Add a small button to show previous word(s).

Could be done by building a list of displayed entries with each click. The list would have to contain the color (category) as well.

If no entries are in the list, or the index gets back to zero (same scenario implementation-wise), the button can be disabled.

Note that upon clicking a regular button, the index of previous-words-list needs to be reset to proper position.

• Genre (literature and film combined?)
• Music style
• Historical era (including future with abstract names)

From a removed comment:

  // {
  //   type: "body-part",
  //   label: "Część ciała",
  // },
  // {
  //   type: "genre",
  //   label: "Gatunek filmowy",
  //   prevButtonPrefix: "Poprzedni",
  //   nextButtonPrefix: "Następny",
  // },
  // {
  //   type: "name",
  //   label: "Imię",
  //   prevButtonPrefix: "Poprzednie",
  //   nextButtonPrefix: "Następne",
  // },
  // {
  //   type: "noun",
  //   label: "Rzeczownik",
  //   prevButtonPrefix: "Poprzedni",
  //   nextButtonPrefix: "Następny",
  // },
  // {
  //   type: "dictionary",
  //   label: "Dowolne słowo",
  //   prevButtonPrefix: "Poprzednie",
  //   nextButtonPrefix: "Następne",
  // },

Old layout

Pros

• The generated word is large, easily readable on mobile

Cons

• SVG scaling is expensive and lags even on new smartphones
• Requires tweaking to ensure the word is not too large on desktops
• Due to large text size, buttons can get below the fold, thus forcing the user to scroll after each press

New layout idea

       Rzeczownik
  <    [__>__] ______________________

       Miejsce
  <    [__>__] ______________________

       Postać
  <    [__>__] ______________________

       . . .

       [__>>>_wszystko__]    [ info ]

Pros

• Separate undo button for each type
• Will be trivial to add character modifiers, as opposed to old layout (where would I put its button there?)
• No humongous text on desktops

Cons

• I'll be a bit sad to see that dynamically scaled text gone
• Smaller text on mobile

Instead of creating a new callback function for each new list type, just make a generic one that accepts list name and text color.

0. Either rename dict.php to dictionary.php or change class from dictionary to dict (former is preferred).
1. Create a map [ "noun" => "#f00", "location" => "#0f0", ... ].
2. Init all array elements by iterating over said map.

Add a static version of the main functionality. Return a few words from each category in a layout similar to the main one.

Five words should be enough.

Add a note at the bottom, explaining that the user is viewing a dumbed-down page, and provide a link to the main one.

• Add a 'reset to defaults' button to appearance settings. When clicked and confirmed, it reverts a selection of settings to local defaults.
• Add a 'reset to defaults' button to category management. When clicked and confirmed, it reverts the list of categories to global default.

Both of the above options require an additional, modal-like confirmation popup. Need to add it as well.

• Add a confirmation dialog, styled to be common to the above use cases, but with different text inside (and callback, of course).

Some colors might not be too visible on current background.

Adjust the yellow and gray buttons' colors to enhance the contrast.

Use media queries for various screen sizes.

https://gist.github.com/gokulkrishh/242e68d1ee94ad05f488

If the user clicked undo a few times and moved to the next word afterwards, it should move the index to the following entry in history instead of jumping straight to the new word.

Usability testing revealed that users tend to refresh the whole page instead of clicking on section buttons. When asked why, they said they are aware of the buttons, but they wanted to see a complete new set. Seems that the site might be used for a complete improv scene definition, not just single aspects of it.

Action: Add a mechanism enabling the user to set a new word in every category at once. There are a few ideas how to approach this while keeping the UI minimal and consistent.

Ten thousand hours in MS Paint

A) Put the next-all button on top

Pros

• The button will be easily visible
• If people use it, will cause less data transfer / read ops
• Will add a space for other stuff: logo, link to the about page

Cons

• Actually useful information (words) are pushed down the screen
• Last few sections will get cut out even more

B) Put the next-all button at the bottom

Pros

• Actually useful information (words) stay the most visible
• Will work as a footer, where other information might go: logo, about page, etc.

Cons

• Might not be visible at all, which will invalidate any benefit that such a button would add
• People already rarely go to the bottom of the page, as that's where the least useful section resides (random dictionary word)

C) Custom pull-down action

Example: https://ebidel.github.io/demos/chatbox.html

Pros

• Takes zero space from existing layout
• Overrides the action resulting from actual users' behavior, causing the page to behave virtually the same, but without the downsides of page loads / file reads

Cons

• Expensive to implement
• May cause confusion at first
• Might not work on all mobile browsers
  • Need to check for overscroll-behavior-y support on client side
• No equivalent for desktop browsers - need for a regular button there

If categories' placeholder is shown, toggling the "Compact mode" checkbox makes the placeholder jump a few pixels.

Probably related to some :first-child CSS rules for <main>.

i18n support will be costly, but this could open the application to way, way bigger audience.

• Extract static strings to consts in a language file.
• Detect user's language as the first thing in init, and use it if it has not been overridden already (aka present in local storage with some value).
• Load words with ajax calls to endpoints with some additional flag (e.g. 'en' would load locations_en.txt).
• Rename current files to *_pl.txt.
• Fill the database with translated words.
• Add a language icon next to about. It should open a panel with language selection menu. It will also nicely balance the footer with 2 icons on the left and 2 icons on the right.
• When user clicks a different language, the page might have to reload completely. This might be needed for screen readers that use html's lang attribute for speech language selection. Research this topic to find out if it's true.
• Is the domain good enough to English-speaking improvisers? Maybe a different one will be nice?
• Descriptions, titles and media images should be handled as well. No idea how that could be done...

Currently, short lists (e.g. locations) are treated the same as large lists (e.g. nouns), where a bunch of random words is read from the file.

For short lists, instead of reading random words (which causes noticeable repetitions), just load the whole list and shuffle it clientside.

Add a ?v=2 or something like that to each resource's path in index.php, forcing the browser to load a new version.

To prevent unnecessary loading, the actual value could be taken from the given file's last modification time.

Also, consider disabling eTags. See https://github.com/phanan/htaccess for details.

Regex in JS doesn't count non-ASCII characters when checking word boundary (\b), causing some false positives when checking for conjunctions.

For example, when a word ends with ów, regex sees a word boundary before w, so the app adds a   after it, like it was a w conjunction.

This emerged with the Time container, entry
XXI wiek według futurologów z 1960
being changed to
XXI wiek według futurologów z 1960

The correct one would be
XXI wiek według futurologów z 1960

In Surface Duo, the application breaks in the middle, which is a critical area:

There are some approaches and new APIs to target such devices.

• Research a bit and implement a fix.
• Note that there could be a separate view for when this device is rotated 90 degrees (two screens stacked vertically).

• Add a new section under settings: Categories management.

Kategorie
[x] Miejsce         [v] [ ]
[x] Postać          [v] [^]
[ ] Cecha postaci   [v] [^]
[x] Emocja          [v] [^]
[ ] Relacja         [v] [^]
[ ] Czynność        [ ] [^]

Instead of buttons, this could be done based on dragging (with ⠿ icon as handler) and support touch events as well. Sounds like a fun challenge. (It isn't.)

• Allow reordering the items in this list.
• Propagate changes from this list into the real categories in <main> (reordering).
• Propagate changes from this list into the real categories in <main> (showing).
• Propagate changes from this list into the real categories in <main> (hiding).
• Animate the swap via some fancy CSS animations.
• To keep the gradient, colors will have to be assigned from top to bottom, not bound to specific categories.
• Handle a case where someone hides all categories. Maybe show a logo with direct link to category management and a separate link to revert to defaults.
• Check how it all works with a screen reader.
• Check how it all works in light and dark mode.
• Check how it all works with animations enabled and disabled.
• Add an indicator to the footer icon if any category is hidden. Use proper cutout around the dot.
• Add a counter to the panel's header. Kategorie (7/9)
• Prevent tabbing to hidden categories' buttons.
• Prevent tabbing to placeholder's two buttons if the placeholder is not shown.
• Resolve microcopy TODO (see comment below)

On slower connections, the lists might take a second to download. If the list is not yet ready, clicking its button causes the welcome message to shrink and colorize, which is a confusing behavior.

Delaying the activation of buttons if their lists are not yet loaded should do the trick.

It appears that the previous implementation (using visibility: hidden) has stopped working recently. Sliding sheets can be tabbed to even if they're hidden, which makes keyboard navigation annoying.

Check with toggling between display: none and the element's original display.

Add a list of actions / activities.

The list of nouns contains unhelpful entries like Amilkar, Ą, or Tuapse.

Remove the (subjectively) lesser known proper nouns and only keep the useful ones that will actually work for inspiration.

Filtering out this list will take a while, but should be worth the pain.