🌊 Flood Game

A modern, responsive flood game built with React 18, TypeScript, and TailwindCSS. The objective is to flood the entire grid with a single color in the smallest number of steps possible.

🎮 Live Demo

Play the game now at: https://vramdhanie.github.io/flood

✨ Features

• 🎯 Strategic Gameplay: Plan your moves to minimize steps
• 📊 Real-time Stats: Track steps, progress percentage, and cells owned
• 🏆 Win Detection: Automatic celebration when you flood the entire grid
• 🔄 Instant Restart: Play again without page refresh
• 📱 Responsive Design: Works perfectly on desktop and mobile
• 🎨 Modern UI: Clean, intuitive interface with smooth animations
• ⚡ Performance Optimized: Efficient flood-fill algorithm

🎯 How to Play

1. Start: The grid begins with random colors, and you control the top-left cell
2. Select Color: Click any color button to flood your territory with that color
3. Expand: All adjacent cells of the selected color join your territory
4. Strategy: Choose colors that will capture the most adjacent cells
5. Win: Flood the entire 30×30 grid in the fewest steps possible!

🚀 Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm

Installation

# Clone the repository
git clone https://github.com/vramdhanie/flood.git
cd flood

# Install dependencies
pnpm install

# Start development server
pnpm start

# Build for production
pnpm build

The game will be available at http://localhost:3000

🛠️ Technology Stack

Frontend Technologies

• React 18: Modern React with hooks and functional components
• TypeScript: Full type safety and enhanced developer experience
• TailwindCSS: Utility-first CSS framework for rapid UI development
• Create React App: Zero-configuration React development environment

Development Tools

• Package Manager: pnpm for fast, efficient dependency management
• Code Quality: ESLint with TypeScript strict mode
• Build Tool: Create React App with optimized production builds
• Deployment: GitHub Pages with automated GitHub Actions

🧠 Game Algorithm

Flood-Fill Implementation

The game uses an efficient Breadth-First Search (BFS) flood-fill algorithm:

1. Color Change: All owned cells change to the selected color
2. BFS Expansion: Starting from owned cells, expand to adjacent cells of the same color
3. Territory Growth: Newly captured cells become part of your territory
4. Win Detection: Check if all cells are owned after each move

Performance Optimization

• Efficient Data Structures: Optimized grid representation for fast updates
• Smart Boundary Detection: Minimal cell checks during expansion
• Memory Management: Efficient state updates without unnecessary re-renders
• Algorithm Complexity: O(n) where n is the number of cells to update

🎯 Game Rules & Mechanics

Grid Specifications

• Grid Size: 30×30 cells (900 total)
• Colors: 6 different colors to choose from
• Starting Position: Top-left cell is your initial territory
• Victory Condition: Own all 900 cells

Scoring System

• Primary Goal: Minimize the number of steps to achieve the best score
• Real-time Feedback: Track progress percentage and cells owned
• Win Celebration: Visual feedback upon completion

Strategy Tips

• Analyze the Grid: Look for color clusters that will maximize expansion
• Plan Ahead: Consider which colors will give you the most territory
• Edge Strategy: Focus on colors that reach the grid boundaries
• Color Frequency: Choose colors that appear most frequently adjacent to your territory

🏗️ Project Architecture

Component Structure

src/
├── components/
│   ├── board/          # Game board component
│   ├── cell/           # Individual cell component
│   └── controls/       # Color selection controls
├── hooks/
│   ├── game.ts         # Main game logic and state
│   └── colours.ts      # Color management
└── types/
    └── images.d.ts     # TypeScript declarations

Key Components

• Game Hook: Manages game state, flood-fill logic, and win detection
• Board Component: Renders the game grid and UI elements
• Cell Component: Individual grid cells with conditional styling
• Controls Component: Color selection buttons with hover effects

State Management

• React Hooks: Uses useState and useEffect for efficient state management
• Game State: Tracks grid colors, owned cells, step count, and game status
• Performance: Optimized re-renders with proper dependency arrays
• Memory Efficiency: Minimal state updates for smooth gameplay

🎨 User Interface Design

Design Principles

• Clean and Modern: Minimalist design focused on gameplay
• Color Accessibility: High contrast colors for better visibility
• Responsive Layout: Seamless experience across all device sizes
• Touch-Friendly: Optimized button sizes for mobile interaction
• Visual Feedback: Clear indicators for game state and progress

TailwindCSS Implementation

• Utility-First: Rapid development with utility classes
• Responsive Design: Mobile-first responsive breakpoints
• Custom Colors: Game-specific color palette
• Animation: Smooth transitions and hover effects
• Component Styling: Consistent design system

🚀 Deployment & CI/CD

Automated Deployment

The game is automatically deployed to GitHub Pages using GitHub Actions:

• Trigger: Every push to the main branch
• Build Process: Optimized production build with pnpm
• Static Assets: Compressed and optimized for fast loading
• URL: https://vramdhanie.github.io/flood

GitHub Actions Workflow

# Automated build and deployment
- Build with pnpm
- Run TypeScript checks
- Execute ESLint validation
- Deploy to GitHub Pages
- Update live site automatically

🔧 Development Features

Code Quality

• TypeScript: Full type safety with strict mode enabled
• ESLint: Comprehensive linting rules for code quality
• Component Architecture: Reusable, maintainable components
• Performance: Optimized rendering and state management

Development Experience

• Fast Refresh: Instant feedback during development
• Type Safety: Catch errors at compile time
• Modern JavaScript: Latest ES features with TypeScript
• Development Server: Hot reloading for rapid iteration

🎯 Future Enhancements

Planned Features

• Difficulty Levels: Different grid sizes and color counts
• High Score System: Local storage for best scores
• Hint System: Suggest optimal moves for learning
• Custom Themes: Additional color palettes
• Sound Effects: Audio feedback for actions
• Achievements: Unlock rewards for milestones

Technical Improvements

• PWA Support: Offline gameplay capability
• WebGL Rendering: Hardware-accelerated graphics for larger grids
• AI Solver: Show optimal solution paths
• Multiplayer Mode: Real-time competitive gameplay
• Analytics: Track gameplay patterns and statistics

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

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

👨‍💻 Author

Vincent Ramdhanie

• Website: vincentramdhanie.com
• GitHub: @vramdhanie

🎮 Game Development Journey

This project demonstrates:

• Algorithm Implementation: Practical application of BFS flood-fill
• React Mastery: Modern React patterns and hooks
• TypeScript Proficiency: Type-safe game development
• UI/UX Design: Creating engaging, responsive interfaces
• Performance Optimization: Efficient rendering and state management
• DevOps: Automated deployment and CI/CD practices

About

A modern, responsive flood game built with React 18, TypeScript, and TailwindCSS where the objective is to flood the entire grid with a single color in the fewest steps possible.