Case study
Mystery Mosaics
A colour by number mosaic puzzle that runs entirely in the browser, with the grid, palette and solving state all handled client side and nothing to install.
Overview
A colour by number puzzle: a grid of numbered cells, a palette, and a picture that appears as it is filled in. Everything happens in the browser, with no account, no server and nothing to install.
Complexities tackled
Colour choice is the design problem. The palette has to be distinguishable at small sizes, hold up next to itself in adjacent cells, and stay usable for someone who does not see colour the way the designer does. This uses a colour manipulation library to derive the palette rather than picking values by eye, because picking by eye produces sets that look fine to the person who picked them.
Rendering a large grid without repainting it. A mosaic is thousands of cells and only one changes when a cell is filled. Re-rendering the grid on every interaction is the obvious implementation and it is unusable. Keeping the update local to the cell is what makes it feel instant.
State that survives a reload. A mosaic is not finished in one sitting, so progress persists locally and the puzzle picks up where it was left rather than starting again.
Stack
Vue with TypeScript, Vuex for state, Tailwind CSS, and chroma-js for the palette work.
Working on something similar?
Tell me what you are building and what is in the way. I will tell you honestly whether I am the right person for it.