A board game I fell in love with and wanted to get it in my browser.
I am not the inventor of that game and do not own the copyright for it. I only wrote this software implementation.
The board game Gemini was created by Dr. Oliver Schaudt and is manufactured by Gerhards Spiel und Design. If you like this software version you will love the hardware version.
- Move the marbles along straight lines (simply click on the respective line).
- Only two neighboring marbles can be moved together.
- The puzzle is solved once all marbles of the same color (except for the white placeholder marbles) lie in straight rows.
I started this as a React App with one big JSX file. Just out of curiosity whether I can use React for a simple browser game. As the project evolved I modularized the code, first extracting level data, later moving every class to its own file. Having separated the game’s data structures and its presentational components from the start that was easy. And so was implementing Web Components as a drop-in replacement for the React components.
| Web Components version | React version | |
|---|---|---|
| live example | index.html | reactive.html |
| source code | src/view/web | src/view/react |
| bundle size (Vite)1 | 4.67 kB (gzip: 1.35 kB) | 200.37 kB (gzip: 59.36 kB) |
Footnotes
-
The additional model and data code bundle shared by both versions is 10.33 kB (gzip: 2.47 kB). ↩