A modern, interactive web platform featuring brain-training games built with Astro, Tailwind CSS, and TypeScript. Challenge your memory, reaction time, and problem-solving skills with our growing collection of scientifically-inspired cognitive games.
Test your working memory with increasingly complex sequences. Features:
- Progressive difficulty scaling
- Performance-based scoring system
- Real-time feedback and statistics
Test your arithmetic skills with chained calculations. Features:
- Sequential number operations
- Multiple-choice answers with distractors
- Visual distractions to test focus
- Speed-based scoring system
- Memory Matrix
- Speed Math
- Pattern Recognition
- Logic Puzzles
Mind Games features a component system:
src/styles/components/
├── index.css # Main import file
├── button.css # Button system (BEM)
├── game-stats.css # Game statistics (BEM)
├── glass.css # Glass morphism effects
├── game-ui.css # Game UI components
├── game-card.css # Game card components
├── navigation.css # Navigation components
├── typography.css # Typography system
├── layout.css # Layout and grid system
├── animations.css # Animation utilities
└── states.css # State management classes
Benefits:
- 🎯 BEM Methodology: Professional naming conventions
- 🔍 Easy to Find: Component-specific CSS files
- 📈 Maintainable: Clear separation of concerns
- ⚡ Performance: Optimized imports and minimal CSS
- 🚀 Developer Experience: Comprehensive documentation
- Framework: Astro 5.0
- Styling: Tailwind CSS 4.0 + Custom Component System
- Language: TypeScript
- Package Manager: Bun
- Deployment: GitHub Pages
# Install dependencies
bun install
# Start development server
bun dev
# Build for production
bun build
# Preview production build
bun previewVisit http://localhost:4321 to start playing!
Experience Mind Games online at: https://hectorromerodev.github.io/mind-games/
The application is automatically deployed to GitHub Pages on every push to the main branch.
Mind Games features a modular, reusable component architecture:
- Universal Scoring System: Consistent performance evaluation across all games
- Standardized Components: Reusable UI elements and game layouts
- Unified Game Options: Single button system for all interactive game elements
- Type-Safe Game Logic: TypeScript-based game classes with inheritance
- Responsive Design: Mobile-first approach with Tailwind CSS
- BEM Methodology: Maintainable CSS architecture with component-based styling
All games use a standardized scoring framework that evaluates:
- Accuracy: Precision and attention to detail
- Speed: Reaction time and processing efficiency
- Progression: Learning rate and adaptation
- Consistency: Performance stability over time
Performance levels range from "Practice More" to "Outstanding Master" with detailed feedback.
- Framework: Astro 4.x
- Styling: Tailwind CSS
- Language: TypeScript
- Runtime: Bun
- Build: Vite (via Astro)
src/
├── components/
│ ├── game/ # Game-specific components
│ │ ├── BaseGame.astro # Main game layout
│ │ ├── GameControls.astro # Standard controls
│ │ └── GameGrid.astro # Grid component
│ ├── ui/ # UI primitives
│ │ └── Button.astro # Consistent buttons
│ ├── GameStats.astro # Score/timer display
│ └── StartGame.astro # Start screen
├── layouts/ # Page layouts
├── pages/ # Routes and games
├── utils/ # Game logic and scoring
└── styles/ # Global styles
- Create Game Class: Extend
BaseGameClassfor game logic - Design UI: Use
BaseGame.astrolayout with standardized components - Implement Scoring: Configure
ScoreCalculatorfor your game type - Add Navigation: Update games listing and navigation
See GAME_ARCHITECTURE.md for detailed instructions.
- Game Architecture - Component system and development guide
- Scoring System - Universal scoring framework
- Component IDs - Standardized element identification
- Deployment Guide - GitHub Pages deployment setup and configuration
<!-- Buttons -->
<button class="btn btn--primary btn--lg">Play Game</button>
<button class="btn btn--start btn--xl">Start Game</button>
<!-- Game Cards -->
<div class="game-card">
<div class="game-card__header">
<h3 class="game-card__title">Math Challenge</h3>
</div>
<div class="game-card__body">
<p class="game-card__description">Test your skills...</p>
</div>
</div>
<!-- Game Statistics -->
<div class="game-stats">
<div class="game-stats__card">
<div class="game-stats__value">42</div>
<div class="game-stats__label">Score</div>
</div>
</div>- Component System Guide: Complete component reference
- Migration Plan: Migration documentation
- Component Classes: Detailed API documentation
- Follow BEM methodology:
block__element--modifier - Use component-specific files: Keep styles organized
- Document new components: Update documentation
- Test thoroughly: Ensure cross-browser compatibility
src/
├── components/ # Reusable UI components
│ ├── ui/ # Basic UI elements
│ ├── game/ # Game-specific components
│ └── GameCard.astro # Game listing cards
├── layouts/ # Page layouts
├── pages/ # Route pages
├── styles/ # CSS and component styles
│ └── components/ # Modular component CSS
├── utils/ # Utility functions
└── assets/ # Static assets
- Create game component in
src/components/game/ - Add game page in
src/pages/games/ - Update game listing in
src/pages/games/index.astro - Follow scoring system patterns
- Use existing UI components
- Modular Components: Each component has its own CSS file
- BEM Methodology: Professional naming conventions
- Tailwind Integration: Custom components extend Tailwind
- Performance Optimized: Tree-shaking and minimal output
- Fork the repository
- Create a feature branch
- Follow the established component patterns
- Add appropriate tests and documentation
- Submit a pull request
MIT License - see LICENSE for details.
Built with ❤️ for cognitive enhancement and brain training.