Improve Custom Color UX

[marknn3]

This PR is mainly about UX improvements regarding custom color.

Functional changes

• Fixed surface painting with custom color. Now the color is correct.
• Fixed transparency color editing. Upgrade to tinycolor 1.5.2. Old version uses #argb and not the web standard #rgba.
• Fixed unavailable submode selection. To reproduce: E.g. Create new Hexagon grid, select mode 'Cage', start drawing cage lines.
• Move 'Sudoku' to 2nd position in drop down list, for easier access.
• The Symbol panel will now display symbols in the selected custom color.
• The selected custom color is now stored per mode, and will persist across sessions.
• Implement custom color for all board types:
  • Triangle
  • Pyramid
  • Cube
  • Kakuro
  • Truncated square
  • Snub square
  • Cairo pentagonal
  • Rhombitrihexagonal
  • Deltoidal trihexagonal

Technical changes:

• Move custom color configuration to penpa_modes (where is belongs IMHO).
• Move draw_surface to base class, because the implementation is identical for all board types.
• Refactor default custom color selection for all modes and sub modes into a separate customcolor.js file.
• Simplify custom color implementation to reduce code.
• Custom color info is now only added to the puzzle when it is not the default custom color, and will delete it otherwise. This will reduce the puzzle URL length.

[swaroopg92]

@marknn3 Hi, I am currently reviewing this. I came across one issue and haven't traced yet what's causing it. Perhaps you may know it.

So you turn on the Custom Colors in Surface mode, shade some cells (even 2 to 3 is enough). Now observe the undo array, it has 50+ of entries.

[swaroopg92]

[Update] -- Its caused due to dragging of mouse button in Surface mode. It happens with both left click or right mouse click.

[marknn3]

Thanks for noticing this, I will investigate what is causing this behaviour.

[swaroopg92]

I have noticed another small bug. If you can please take a look while you are at it, that would be great.

Switch to board type "Cube". Select Shape mode. Select Shape --> cross from the dropdown. The panel looks empty.

Similar for "lines", "○△□×". Similar for Shape -> Number -> digital Green, Black and Grey.

Other shapes seems fine. I haven't checked the same for other board types yet.

[marknn3]

Your mentioned issues are fixed. But I did see that 'Shape -> Number -> digital Green, Black and Grey' (degital_E; degital_B; degital_G) is only implemented in Square and Hex grids. So this is an existing issue and probably needs an update in modes.js, or implement for all board types (will be other PR) Same for triup_S and tridown_S. Oh, this looks like a bug in applying penpa_modes (modes.js) to the UI. Will require another PR to fix this.

[swaroopg92]

@marknn3 Thank you so much for this incredible work. This is a massive update. It looks like everything is fine. I will release it soon. Merging it. Since it's such a big update, its possible I may have missed something but we have intelligent users and I am sure they will let us know of any possible gimmiks. Merry Christmas!

[swaroopg92]

[Update] -- Penpa modes and relevant board types are now fixed

[marknn3]

The README.md still contains this text:

Note: This feature only works on Square grid type. It also rests Undo/Redo history. Before removing a row/column ensure they are empty and contains no elements.

I did miss this in my PR

[swaroopg92]

I have updated the README with many other changes to reflect the current website options. Thanks.