🧩 mini-game

A React component library for various web based mini games, with customizable settings and Tailwind-based styles.

📦 Installation

1. Install the package:

   npm install mini-game

2. 🎨 Import the styles once in your main entry file (e.g. main.tsx, index.tsx, etc.):

   import "mini-game/styles.css";

   • ⚠️ note:
     • All components use a Tailwind CSS prefix: mg-
     • You must import the provided stylesheet (mini-game/styles.css) for correct appearance.

Usage

1. Math Flashcard Game

   • import Game Component

   import { MathFlashcard, type MathGameSettings, type GameResults } from "mini-game";

   • example usage

   const settings: MathGameSettings = {
     gameId: "Timed Mathflashcard",
     gameDifficulty: "medium",
     gameOperation: "addAndSub",
     playerId: "user-123",
     timePerLevel: 30,
     // For "Custom Mathflashcard", also provide delayPerElement, elementPerLevel, addAndSubLimit, multipicationLimit, divisionLimit
   };
   
   function handleGameEnd(result: GameResults) {
     console.log("Game finished!", result);
   }
   
   function handleExit() {
     // Handle navigation or UI change
   }
   
   <MathFlashcard
     gameSettings={settings}
     onGameEnd={handleGameEnd}
     onExitButton={handleExit}
   />

2. TBA

📚 API

Types

• MathGameSettings: Configure the game mode, difficulty, operations, and limits.
• GameResults: Returned when the game ends.

Extending the Library

We plan to add support for additional mini games and customization options. Feel free to contribute or request features via GitHub issues.