react-mini-games

An open-source React package containing a collection of fun, easy-to-embed mini-games.

Installation

npm install @walidnurudin/react-mini-games

Available Games

This package includes the following fully playable mini-games:

• TicTacToe - Classic 2-player grid board.
• Snake - Keyboard controlled food-eating snake survival game.
• WhackAMole - Fast paced timer game to hit pop-up moles.
• MemoryMatch - Memory-matching board game with randomized emojis.
• Game2048 - Slide merger puzzle aiming to reach the 2048 block.
• RockPaperScissors - Quick choice comparison rounds against AI.
• SimonSays - Brain-teaser pattern memorization sequences.

Usage

import { 
  TicTacToe, 
  Snake, 
  WhackAMole, 
  MemoryMatch, 
  Game2048, 
  RockPaperScissors, 
  SimonSays 
} from '@walidnurudin/react-mini-games';

function App() {
  const handleScore = (score: number) => {
    console.log(`Game ended! Score/Result: ${score}`);
  };

  return (
    <div>
      <h1>Play Snake</h1>
      <Snake onGameOver={handleScore} />
    </div>
  );
}

🎮 Contributing a New Mini-Game

We love contributions! Follow these steps to add a new mini-game:

1. Fork this repository and clone it to your local machine.
2. Create a new directory under src/games/ (e.g., src/games/Snake/).
3. Build your game component inside that directory:
   • Ensure the component is fully self-contained.
   • Use standard React hook patterns.
   • Export your props interface and your component.
4. Export your game from the main entry point:
   • In src/index.ts, add:

     export { Snake } from './games/Snake';
     export type { SnakeProps } from './games/Snake';

5. Run the build command locally to verify that there are no compilation or TypeScript issues:

   npm run build

6. Submit a Pull Request detailing your game and including a screenshot or GIF of the gameplay.