fix: improve keyboard shortcuts (and non working help dialog)

[DeepSpace2]

Closes #355

• Fixes help dialog not opening at all ("invalid invocation" console error)

• Keybindings defined in a single location in the codebase. Keys are no longer hardcoded across backend and frontend code. This allows keys to be user-configurable in the future.

• Shows keybindings in tooltip messages

• Adds missing "undo" keybinding to help dialog

• Significantly reduces text overload in help dialog

• Caveat: As I removed format specifiers from a translatable string ("switch-pencil-sizes"), users of non-English/Hebrew languages will see raw %s until these languages will be updated. I wasn't comfortable enough to use machine translations for this.

[Bios-Marcel]

Hey, took my sweet time here, sorry.

Um, wouldn't it be sensible to just do the key definitions clientside to begin with? There's not really a benefit with moving these to the server, as each user might want to have different shortcuts. As as reminder, the server is NEVER meant to persistently store anything, so we can't have it store shortcuts per user either.

Maybe we can just make a dumb ShortcutManager on the client that hardcodes the defaults and has some lookup function like Get("erase") which can later on do a lookup / store in local storage and keep a cache.

The added undo shortcut and the other stuff seem like good changes though.

[Bios-Marcel]

Once we merge this, i should probably create a new release, kinda forgot about that 😅

[DeepSpace2]

Um, wouldn't it be sensible to just do the key definitions clientside to begin with? There's not really a benefit with moving these to the server, as each user might want to have different shortcuts. As as reminder, the server is NEVER meant to persistently store anything, so we can't have it store shortcuts per user either.

Maybe we can just make a dumb ShortcutManager on the client that hardcodes the defaults and has some lookup function like Get("erase") which can later on do a lookup / store in local storage and keep a cache.

Done :)

And don't worry about the time it took, we all got more important things to do than fun side projects.

[Bios-Marcel]

Hey, just tested this, sorry for the long wait. It seems shortcuts for tool sizes don't actually work 🤔

You did not break this, but maybe we should also fix that now to avoid confusion.

Mobile also looks a lil curious xD

[DeepSpace2]

Mobile also looks a lil curious xD

I'll see what I can do about it

seems shortcuts for tool sizes don't actually work 🤔

That's weird, it's working on my end, both on mac and Windows (both running Chrome/Brave). I'll test later on Firefox.

Untitled.mov

[Bios-Marcel]

Hm, maybe one of my plugins is interfering. I'll look into this deeper later.

[DeepSpace2]

@Bios-Marcel

Mobile also looks a lil curious xD

May I suggest that we reconsider the mobile layout from scratch as a separate issue/PR? there are some other things I'd like to improve there regardless of the help menu.

For example, I think that dialog modals should be direct descendants of div#lobby instead of div#drawing-board-inner-wrapper.

That way they can "pop out" more and their size won't be limited to/by the size of the canvas/drawing board.
An example for that can be seen in #415 (comment), minus the colors and the aggressive blur (though they will need to be visually separated from the main DOM elements somehow else if you really dislike the blur).

This will be extremely useful on smaller screens.

(and we most certainly want to consider not allowing multiple dialogs open at the same time, regardless of mobile or not).

[Bios-Marcel]

Yeah, I agree with you ... the mobile thing was more of a hindsight anyway