Skip to content

A showcase Chrome Extension built with React, demonstrating modern development practices including TypeScript, testing with Jest, automated linting with ESLint, and pre-commit hooks with Husky.

License

Notifications You must be signed in to change notification settings

KingMario/I-m-movin-it

Repository files navigation

I'm movin' it

This Chrome Extension is a growing collection of interactive moving/logic games, starting with the classic Fifteen Puzzle. The name "I'm movin' it" reflects the core mechanic shared by all included games: moving pieces, tiles, or objects to solve puzzles.

Why the name?

"I'm movin' it" is inspired by the idea that every game here involves moving something—whether it's tiles, matchsticks, or pieces of a picture. The extension will feature a variety of movement-based puzzles, making the name a playful nod to the core gameplay.

Current Features

  • Two Puzzle Games:
    • Fifteen Puzzle: The classic number sliding game.
    • Picture Puzzle: A sliding puzzle that you can play with your own images.
  • Persistent State: Your game progress is automatically saved.
  • Customizable: Upload your own images for the picture puzzle.
  • Modern UI: Built with React, SCSS, and Tailwind CSS.
  • Accessible Gameplay: Great consideration has been given to accessibility, including full keyboard navigation and ARIA support.
  • Best Practices: Includes linting, formatting, and pre-commit hooks.

Planned Features

  • Move-One-Matchstick Game:
    • Classic logic puzzles where you move a matchstick to fix an equation.
  • More movement-based puzzles to come!

Getting Started

Prerequisites

  • Node.js (v18+ recommended)
  • npm

Install dependencies

npm install

Development

Start the development build with hot reload:

npm run start

Build for production

npm run build

Lint and format

npm run lint
npm run prettier

Pre-commit hooks

This project uses Husky and lint-staged to automatically lint and format staged files before each commit.

Load the extension in Chrome

  1. Build the project (npm run build).
  2. Go to chrome://extensions in Chrome.
  3. Enable "Developer mode".
  4. Click "Load unpacked" and select the dist/ folder.

Project Structure

  • src/ - Source code
    • popup/ - Popup UI and game logic
    • options/ - Options page
    • background/ - Background scripts
    • contentScript/ - Content scripts
    • static/ - Static assets and manifest
  • dist/ - Build output

License

MIT License. See LICENSE for details.


© Mario Studio 2025-2026

About

A showcase Chrome Extension built with React, demonstrating modern development practices including TypeScript, testing with Jest, automated linting with ESLint, and pre-commit hooks with Husky.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published