20 Apr 2019 Search

(update 21 Apr 2019: copy edit, add some explanation.)

I’m learning how to make a Progressive Web Application. Progressive Web Applications are a good thing because they give people a lot of the features of mobile apps, but run in the browser where it’s easy to turn on privacy protection features.

Here’s how it’s going so far. A simple polyhedral dice roller for Dungeons and Dragons, and similar games that use many-sided dice.

Links: standalone, source.

(Yes, I know real dice are better for a real game. This is for when you forget your dice but not your phone, or have a few minutes to prepare something.) This is mainly designed to run on a phone, but it does take keyboard input, and if you can see it here it also works in an iframe.

I ran into some browser compatibility problems trying to do the ASCII Art as real ASCII Art, so the ASCII Art is really a PNG. To look on the bright side, though, finding a browser incompatibility issue means that this is now a Real Web Project.

Here’s how I got the help to work the way it does, with CSS. In its regular place, the keypad is laid out calculator-style, and on the help page, the buttons are laid out in a column on the left with the explanation of what they do next to them.

The keypad and the help page are really the same content, so each button’s help is a p element that lives right next to the button element. Turning help on and off doesn’t navigate you to a separate help page, it just moves the keypad to a new parent element where it is styled differently.

The #keypad div starts off as a child of the #compact div. Inside of #compact,

  • the grid is four columns: grid-template-columns: 1fr 1fr 1fr 1fr;

  • the help text is styled with display: none

  • the tall button is grid-area: span 2 / span 1 and the wide button is styled with grid-area: span 1 / span 2;

  • the 0-9 button, only used in help, is also display: none

Moving #keypad to be a child element of #help means that different styling applies.

  • the grid is two columns: grid-template-columns: 1fr 4fr;

  • All the help elements are display: block so they show up, and take up positions in the grid.

  • The tall and wide buttons are single sized.

  • The individual numbers are display: none and the 0-9 button is display: block.

Putting the help text next to the button it applies to should make it easier for me to check that the help text for each button is there and up to date, and I don’t have to make a separate help page.

Next step: figure out how to make this Do The Right Thing with a screen reader.