https://github.com/abolkog/thinkdots
Guess the secret color sequence using logic and feedback. Can you crack the code?
https://github.com/abolkog/thinkdots
color-game game giiker mastermind mastermind-game reactjs vite
Last synced: 5 months ago
JSON representation
Guess the secret color sequence using logic and feedback. Can you crack the code?
- Host: GitHub
- URL: https://github.com/abolkog/thinkdots
- Owner: abolkog
- License: mit
- Created: 2025-06-03T00:27:31.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-16T23:51:10.000Z (about 1 year ago)
- Last Synced: 2025-07-06T14:07:25.599Z (12 months ago)
- Topics: color-game, game, giiker, mastermind, mastermind-game, reactjs, vite
- Language: TypeScript
- Homepage: https://abolkog.github.io/thinkdots/
- Size: 3.74 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ThinkDots
[](https://github.com/abolkog/thinkdots/actions)
[](LICENSE.md)
[](https://github.com/abolkog/thinkdots/pulls)
A simple, open-source color code-breaking game inspired by Mastermind and Giiker Super Decoder.
Guess the secret color sequence using logic and feedback. Can you crack the code?
[](https://abolkog.github.io/thinkdots/)
## Features
- Interactive color palette and code-breaking gameplay
- Feedback system: green for correct color & position, white for correct color wrong position, gray for absent color
- Multiple difficulty levels
- **Player statistics:** Track your total games, wins, losses, streaks, fastest solve, and more
- **Achievements:** Unlock badges for special milestones and challenges
- **Multiplayer Challenge:** Set your own secret code and invite a friend to try and break it.
- Responsive, accessible UI
## Tech Stack
- React
- Vite
- Tailwind CSS
- TypeScript
- React Router
- Howler.js (for sound)
- Jest & React Testing Library (for tests)
- GitHub Actions (CI/CD)
## Screenshots
## How to Play
1. The game generates a secret color code.
2. Click each dot to select your guess for each position.
3. Submit your guess. You will receive feedback:
- **Green dot:** Correct color in the correct position
- **White dot:** Correct color, wrong position
- **Gray dot:** Color not in the code
4. Use the feedback to refine your next guess.
5. Win by guessing the exact sequence before you run out of attempts!
### Feedback System
- **Easy Mode:**
After each guess, you receive feedback for every dot:
- 🟢 **Green:** Correct color in the correct position.
- ⚪ **White:** Correct color, wrong position.
- âš« **Gray:** Color not in the code.
- **Pro Mode:**
After each guess, you receive only a summary for the whole row:
- Example: “2 correct, 1 present” means two colors are correct and in the right position, and one color is correct but in the wrong position. You won’t know which dots are which.
## Run it locally
1. **Clone the Repo**
```shell
git clone https://github.com/abolkog/thinkdots.git
cd thinkdots
```
2. **Set up Node version (if using `nvm`):**
```shell
nvm use
```
3. **Install the dependencies**
```shell
npm i
```
4. **Start the dev server**
```shell
npm run dev
```
5. **Open [http://localhost:3000](http://localhost:3000) on your browser**.
## Contributing
Pull requests are welcome!
For major changes, please [open an issue](https://github.com/abolkog/thinkdots/issues) first to discuss what you would like to change.
- Please make sure to update tests as appropriate.
- See [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines
## Authors
- **Khalid Elshafie** - _Initial work_ - [abolkog](https://github.com/abolkog)
See also the list of [contributors](https://github.com/abolkog/thinkdots/contributors) who participated in this project.
## Design Reference
The UI design of this project is based on [g1alexander's Tic Tac Toe](https://github.com/g1alexander/tic-tac-toe).
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details