🎮 AICademy Game Store

🚀 Internal React component library for AICademy's interactive educational games

🔒 This is a private repository for IceTea AI internal development team only.

AICademy Game Store is a modern React component library that provides ready-to-use interactive game components for our educational platforms. Built with TypeScript, Tailwind CSS, and Framer Motion for smooth animations.

✨ Features

• 🎯 Multiple Game Types: Arrange, Drag & Drop, Escape Room, Line Matching
• 🎨 Modern UI: Built with Radix UI and Tailwind CSS
• ⚡ Performance: Optimized with Vite and tree-shaking
• 🔧 TypeScript: Full type safety and IntelliSense support
• 📱 Responsive: Works perfectly on all devices
• 🎭 Animations: Smooth animations with Framer Motion
• 🧩 Modular: Import only what you need

📦 Installation

For IceTea AI team members only:

# Using pnpm (recommended)
pnpm add aicademy-game-store

# Using npm  
npm install aicademy-game-store

# Using yarn
yarn add aicademy-game-store

Peer Dependencies

Make sure you have these peer dependencies installed:

pnpm add react react-dom

🚀 Quick Start

import { GameStore, ArrangeGame, DragDropGame } from 'aicademy-game-store';

function App() {
  return (
    <div className="p-4">
      <h1>My Educational Games</h1>
      
      {/* Complete game store */}
      <GameStore />
      
      {/* Individual games */}
      <ArrangeGame 
        items={['Apple', 'Banana', 'Cherry']}
        onComplete={(result) => console.log('Completed!', result)}
      />
    </div>
  );
}

🎮 Available Games

1. Arrange Game

Sort and arrange items in correct order.

import { ArrangeGame } from 'aicademy-game-store';

<ArrangeGame
  items={['First', 'Second', 'Third']}
  instruction="Arrange in correct order"
  onComplete={(result) => console.log(result)}
/>

2. Drag & Drop Game

Interactive drag and drop mechanics.

import { DragDropGame } from 'aicademy-game-store';

<DragDropGame
  sources={['Item A', 'Item B']}
  targets={['Target 1', 'Target 2']}
  onComplete={(matches) => console.log(matches)}
/>

3. Escape Room Game

Puzzle-solving adventure game.

import { EscapeRoomGame } from 'aicademy-game-store';

<EscapeRoomGame
  scenario="classroom"
  timeLimit={300}
  onEscape={() => console.log('Escaped!')}
/>

4. Line Matching Game

Connect related items with lines.

import { LineMatchingGame } from 'aicademy-game-store';

   <LineMatchingGame
   leftItems={['Cat', 'Dog']}
   rightItems={['Meow', 'Bark']}
   onComplete={(pairs) => console.log(pairs)}
   />

🛠️ Development (Internal Team)

Prerequisites

• Node.js >= 18.16.0
• pnpm >= 8.0.0
• Access to IceTea AI private repositories

Setup

# Clone the repository (requires access)
git clone https://github.com/icetea-ai/aicademy-game-store.git

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Build the library
pnpm build

# Run linting and type checking
pnpm lint
pnpm type-check

Scripts

| Script | Description | |--------|-------------| | pnpm dev | Start development server | | pnpm build | Build for production | | pnpm lint | Run ESLint | | pnpm type-check | Check TypeScript types | | pnpm deps:check | Check outdated dependencies | | pnpm release | Create a new release |

📚 API Reference

Game Components

All game components share common props:

interface BaseGameProps {
  onComplete?: (result: any) => void;
  onError?: (error: Error) => void;
  className?: string;
  disabled?: boolean;
}

Game Store

The main component that includes all games:

interface GameStoreProps {
  games?: GameType[];
  onGameSelect?: (gameType: string) => void;
  theme?: 'light' | 'dark';
}

🎨 Styling

This library uses Tailwind CSS for styling. Make sure to include Tailwind CSS in your project:

pnpm add -D tailwindcss

# Add to your tailwind.config.js
module.exports = {
  content: [
    "./node_modules/aicademy-game-store/**/*.{js,ts,jsx,tsx}",
    // ... your other content paths
  ],
  // ... rest of your config
}

🤝 Contributing (Internal Team Only)

This is a private repository. Only IceTea AI team members can contribute.

Development Workflow:

1. Create a feature branch from main

   git checkout -b feature/your-feature-name

2. Make your changes following our coding standards

3. Run quality checks

   pnpm lint
   pnpm type-check
   pnpm build

4. Commit and push

   git add .
   git commit -m "feat: add your feature description"
   git push origin feature/your-feature-name

5. Create a Pull Request and request review from team members

Code Standards:

• Follow TypeScript best practices
• Use conventional commits format
• Ensure all linting passes
• Update documentation when needed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👥 Team

IceTea AI Development Team:

• Internal development team members

📞 Internal Support

• 📧 Internal Email: [email protected]
• � Team Chat: Internal Slack channels
• 🐛 Issues: Create issues in this private repository
• � Documentation: Internal wiki and confluence