Hi everyone! This is a clone of Linkedin's Queens game. My collaborator Ben (@PokerPuppy2514) and I (@zkhan04) have gotten addicted recently. However, after looking for alternatives online, we couldn't find any that have the same features as Linkedin's version, such as auto-placing X's. Therefore, we took it upon ourselves.
The board is an n x n grid like the one shown above. The user must place n crowns on the board such that:
- there is only one crown in each row, column, and color group.
- no two crowns can touch, even diagonally.
Below is the solution for this board:
- Using React and Typescript, I created a responsive user experience, where users can click to place dots and crowns.
- When a user places a crown, any cells of the same row, column, or color, or directly touching the crown are automatically eliminated. This quality-of-life feature isn't available on other alternatives.
- I designed and implemented a graph-based algorithm using
graphlibto efficiently partition n x n square boards into n contiguous color regions. - In order to filter out bad puzzles from the generator (either 0 solutions or multiple solutions), I coded a rule-based solver. This solver is meant to emulate how a human would approach the puzzle. On large puzzles (n>=10), rule-based solvers are anywhere from 10-100 times faster than backtracking solvers.
- Launch a first version after implementing some UX features
- Refine the user experience for mobile devices
- Generate puzzles server-side instead of client-side
- Add a timer and leaderboard
- clone the repository onto your laptop
- download Node.js if you don't already have it
- cd into the repository folder, run
npm installto install all dependencies - run
npm run dev, and open the localhost port on your browser