GitHubHelp

Lymphatus/flag-game

★ 0Forks 0TypeScriptGitHub ↗Compare

README

🚩 Flag Game - Multiplayer Flag Guessing Game

A real-time multiplayer game where players compete to identify world flags as quickly as possible!

🎮 How to Play

Joining a Game

  1. Create a Room: Enter your name and click "Create Room" to start a new game room. You'll receive a room code to share with friends.
  2. Join a Room: Enter your name and the room code shared by a friend, then click "Join Room".

Game Rules

  • Each room can have a maximum of 10 players
  • The game consists of 10 rounds
  • Each round, a random world flag is displayed
  • Players have 20 seconds to guess the country
  • Use the autocomplete search to select your answer from the list of countries
  • Scoring:
    • 🥇 First correct answer: 10 points
    • 🥈 Second correct answer: 9 points
    • 🥉 Third correct answer: 8 points
    • And so on... (11 - position = points)
    • ❌ Wrong answer or no answer: 0 points
  • The player with the highest score at the end wins!

Tips

  • Be quick! Speed matters as much as accuracy
  • Use the autocomplete feature to quickly find countries
  • Watch out for similar-looking flags!

🚀 Getting Started

Prerequisites

  • Node.js (v18 or higher recommended)
  • npm (comes with Node.js)

Installation

  1. Clone the repository

    git clone <repository-url>
cd flag-game

  2. Install dependencies

    npm install

  3. Start the development server

    npm run dev

    This will start both the backend server and the frontend client concurrently:

Available Scripts

Command Description
npm run dev Start both server and client in development mode
npm run client Start only the Vite frontend
npm run server Start only the backend server
npm run build Build the project for production
npm run preview Preview the production build
npm run lint Run ESLint to check for code issues

🛠️ Tech Stack

  • Frontend: React 19, TypeScript, Vite
  • Backend: Express.js, Socket.IO
  • Real-time Communication: Socket.IO
  • Styling: CSS

📁 Project Structure

flag-game/
├── server/          # Backend server code
│   └── index.ts     # Socket.IO server & game logic
├── src/             # Frontend React application
│   ├── components/  # React components
│   │   ├── Game/    # Game-related components
│   │   ├── Lobby/   # Lobby component
│   │   └── shared/  # Shared/reusable components
│   ├── context/     # React context for game state
│   ├── data/        # Static data (countries list)
│   ├── services/    # Socket.IO client service
│   └── types/       # TypeScript type definitions
└── public/          # Static assets

🎯 Features

  • Real-time multiplayer gameplay
  • Room-based matchmaking with shareable codes
  • Autocomplete country search
  • Live score updates
  • Round-by-round results
  • Final leaderboard

Have fun playing! 🌍🏆

Contributors

Lymphatus

Issues