PlayStation HTML renderer

[jmmelko]

Add PlayStation gamepad buttons as a possible output. Suggested by Kimu.

• [x] Arrange buttons vertically in a chord
• [x] Replace repetition mark of pauses with multiple pauses
• [x] Handle quavers: should be drawn one after the other and not in a column: is that possible?
• [x] Code Switch Layouts
• [x] Code Drums. Have to use shape property. Solve ENUM name problem, by creating prefix or dedicated method?
• [x] Include Switch SVGs
• [x] Use thinner, invisible spaces for pause (silent chords), without the repetition number, only for gamepad layout
• [x] Adjust margins
• [x] Create a harp broken SVG
• [x] Make gamepad buttons a parsing language? Or maybe create a parser but do not declare it on modes so it is not proposed in the prompt
• [x] Store gamepad buttons SVGs in separate CSS files to save space for the final html
  • [x] Redraw SVG elements in a more compact code (using \<text>?)
• [x] Change aspect ratio of SVG to 1:1.10 (portrait)
• [x] choose a default color other than black for the buttons (because it’s ugly on both the white and dark backgrounds).
• [x] choose an optimal color for white
• [x] Choose an optimal color for dark
• [x] copy everything new from the light to do the dark theme
• [x] Create silent-symbol and broken-symbol SVG and PNG for switch and playstation (do not merely copy the ones for mobile)
• [x] Adjust margins according to Kimus preference
• [x] Adjust colors according to Kimus preference, especially the HTML dark mode

[jmmelko]

For the question sequence, there are two solutions.

== Solution A ==

* Choose your platform:
1/ Mobile & computer (default)
2/ PlayStation

If player selects 2, then ask another question:

* Choose the buttons layout
1/ Layout 1 (default)
2/ Layout 2
3/ Layout 3
4/ Layout 4

If layers are not numbered on the PlayStation, then we’ll find a way to identify them, such as:

- Layout 1: [L] button in the upper left corner
- Layout 2: [DL] button in the upper left corner

or

- Layout 1 (defaults): starts with [L]
- Layout 2: starts with [DL]

== Solution B ==

Wait for the question about output rendering formats, add PlayStation there

* HTML
* SVG
* …
* PlayStation

and then after that ask for the PS layout

My preference goes to A because:

• output formats were designed to determine the file format, not the layout
• by default all formats are selected so if people don’t uncheck some, they will be asked about PS, about which most people probably don’t care

== Solution C ===

I guess for the question sequence, we might need another question at the end, once the song has been entered, because it is a new output style (not file format, but it is separate to the grid)

What style would you like to output as? (Optional)
1) Press Enter to use default grid
2) Enter PS for PlayStation

Which PlayStation format?
1) description
2) description
3) description
4) description

[jmmelko]

Playstation’s SVGs:

SVGs.zip

[jmmelko]

[jmmelko]

All layouts:

[jmmelko]

Switch SVGs: Switch SVGs.zip