⚫ ToggleTheDarkness

The only production pipeline where “turning it off and on again” actually wins the game. 🦝

---

🖼 Preview

Main App Demo

Feature Highlights

🎞️ Previews are short animated GIFs recorded directly from the live app using screen capture — perfect for quick demos in READMEs.

---

🚀 Features

• 🕹️ 3×3, 5×5, or 7×7 boards (difficulty selector)
• 🎉 Win detection & banner
• 🔁 Reset + randomize
• 💡 Optional sound & move counter
• 🧠 Surprisingly therapeutic to play in dark mode

---

🗓️ Roadmap

• Achievement tracker
• Darkwave mode 🌊
• Shareable puzzle URLs
• Stats & streaks
• Hint system

---

🛠 Tech Stack

• ⚛️ React + TypeScript
• 🎨 Tailwind CSS
• 🧠 Custom game logic (flip, randomize, win check)

---

💡 Learning Notes

This project is where React state and prop flow finally clicked for me. It helped me understand how components talk to each other — who owns state, who updates it, and how props actually flow. Basically, this was the “React finally makes sense” project. 🦝

---

📦 Getting Started

1. Clone the repository

   git clone https://github.com/NickTheDevOpsGuy/ToggleTheDarkness.git
   cd cd ToggleTheDarkness

2. Install dependencies

   npm install

3. Run the development server

   npm run dev

4. Click some lights. Question your life choices.

5. Win. Celebrate. Reset. Repeat.

---

📂 Project Structure

📁 Click to expand file structure

.
├── .github
│   ├── ISSUE_TEMPLATE
│   │   ├── bug.yml
│   │   ├── config.yml
│   │   ├── documentation.yml
│   │   ├── enhancement_refactor.yml
│   │   ├── feature_request.yml
│   │   └── question_discussion.yml
│   ├── pull_request_template.md
│   └── workflows
│       └── ToggleTheDarkness-ci.yml
├── .gitignore
├── .husky
│   ├── _
│   │   ├── .gitignore
│   │   ├── applypatch-msg
│   │   ├── commit-msg
│   │   ├── h
│   │   ├── husky.sh
│   │   ├── post-applypatch
│   │   ├── post-checkout
│   │   ├── post-commit
│   │   ├── post-merge
│   │   ├── post-rewrite
│   │   ├── pre-applypatch
│   │   ├── pre-auto-gc
│   │   ├── pre-commit
│   │   ├── pre-merge-commit
│   │   ├── pre-push
│   │   ├── pre-rebase
│   │   └── prepare-commit-msg
│   ├── pre-commit
│   └── pre-push
├── .prettierignore
├── .prettierrc
├── .prettierrc.json
├── .prettierrc.yml
├── .stylelintrc.json
├── CONTRIBUTORS.md
├── eslint.config.js
├── index.html
├── LICENSE
├── package-lock.json
├── package.json
├── public
│   ├── .DS_Store
│   ├── assets
│   │   ├── gamePlay.gif
│   │   └── mainApp.png
│   └── tooglethedarkness.svg
├── README.md
├── scripts
│   └── precheck.sh
├── src
│   └── app
│       ├── App.tsx
│       ├── components
│       │   ├── Board.tsx
│       │   └── Cell.tsx
│       ├── hooks
│       │   └── useLightsOut.ts
│       ├── lib
│       │   ├── game.ts
│       │   └── sound.ts
│       ├── main.tsx
│       ├── styles
│       │   └── global.css
│       └── types
│           └── game.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

---

🤝 Contributing

• 🐛 Report bugs in Issues
• 💡 Suggest features or improvements
• 🔧 Open a Pull Request

---

🦝 Built by NickDoesDevOps

Created with ☕, curiosity, and a touch of chaos by Nicholas Clark.
Follow the journey → GitHub • LinkedIn

🏷 #NickDoesDevOps • #LearningInPublic • #BuiltInPublic