A web-based puzzle game inspired by LinkedIn’s Queens mini-game, built with vanilla JavaScript and Hugo.
Each level presents a grid divided into colored regions. The goal is to place exactly one queen in each region so that no two queens share the same row, column, or touch each other diagonally.
What’s inside
- 36 general levels from 4×4 to 8×8, plus themed levels
- Timer and move counter to track your performance
- Progress tracking — your best time and moves are saved per level
- Undo, restart, and level navigation (previous / next / random)
- Dark and light themes
- English and Ukrainian localization
- Every level has a unique solution
Under the hood
The game runs entirely in the browser — no backend, no frameworks. Game logic, board rendering, and state management are handled by a single vanilla JS module. Styles are split into five CSS modules bundled via Hugo Pipes. Levels are generated with a Python script that uses backtracking to produce puzzles with a guaranteed unique solution, then saved as Hugo content pages. The site is statically built with Hugo and deployed on Cloudflare Pages.
The entire project was built with the help of AI — Claude was used as a coding partner throughout the development process, from architecture decisions to implementation.