Building Queens with Vue.js

I recently built the puzzle Queens, from LinkedIn games, using Vue.js and Vite. I wanted to try my hand at designing a game that I play often, and integrating a project into my website as a webpage. This turned out to be a pretty simple gateway project to accomplish both objectives.

The Queens game challenges players to place queens on a chess board so that no queen can attack another queen – a fun and sometimes frustrating way to spend your Sunday morning. This implementation was inspired by Fotis Adamakis’s excellent article on recreating the Queens game in Vue, which I used as a starting point (and admittedly is most of the code). I added a few key features:

• three difficulty level selections (easy, medium, and hard),
• a smart timer that starts only on the first move with pause/resume functionality
• minimal color palette and small stylistic touches

You can play the game here: Queens. The source code is available here on GitHub for those interested in the implementation details. Good luck!