🕵️ Cəsus Oyunu (Spy Game)

A modern Progressive Web App (PWA) implementation of the classic Spyfall party game, built with Vue 3 and TypeScript.

📱 Features

• Offline Support — Play anywhere, even without internet connection
• PWA Installable — Add to home screen for native app experience
• Mobile First — Optimized for mobile devices
• Multilingual — Azerbaijani language support (i18n ready)
• Dark Mode — Toggle between light and dark themes
• Recent Players — Remembers players for quick game setup

🎮 How to Play

1. Setup — Add 3-12 players and configure game settings
2. Deal Cards — Each player secretly views their role
3. Play — Players ask each other questions about the location
4. Find the Spy — Civilians try to identify the spy before time runs out

Roles

• Civilians — Know the location, must find the spy
• Spy — Doesn't know the location, must blend in or guess it

🛠️ Tech Stack

• Framework: Vue 3 (Composition API)
• Language: TypeScript
• Build Tool: Vite 7
• UI Components: PrimeVue 4
• Styling: Tailwind CSS 4
• State Management: Pinia
• Data Fetching: TanStack Vue Query
• Internationalization: Vue I18n
• PWA: vite-plugin-pwa
• Offline Storage: IndexedDB (idb-keyval)
• Package Manager: pnpm

📁 Project Structure

src/
├── assets/              # Static assets (images, fonts)
├── components/          # Global UI components
│   ├── AppHeader.vue
│   ├── AppFooter.vue
│   └── PWAPrompt.vue
├── composables/         # Global composables
│   └── usePWA.ts
├── constants/           # Global constants
├── i18n/                # Internationalization
├── layouts/             # Layout components
│   └── default.vue
├── modules/             # Feature modules
│   ├── home/            # Home page module
│   │   ├── components/
│   │   └── index.ts
│   ├── lobby/           # Game setup module
│   │   ├── components/
│   │   ├── stores/
│   │   ├── types/
│   │   └── index.ts
│   ├── locations/       # Locations data module
│   │   ├── api/
│   │   ├── composables/
│   │   ├── types/
│   │   └── index.ts
│   ├── dealing/         # Card dealing module
│   │   ├── components/
│   │   ├── stores/
│   │   ├── types/
│   │   └── index.ts
│   ├── game/            # Main game module
│   │   ├── components/
│   │   ├── stores/
│   │   └── index.ts
│   └── rules/           # Game rules module
│       ├── components/
│       └── index.ts
├── pages/               # Route pages
├── plugins/             # Vue plugins
├── router/              # Vue Router config
├── App.vue
└── main.ts

🚀 Getting Started

Prerequisites

• Node.js 20+
• pnpm 10+

Installation

# Clone the repository
git clone https://github.com/ilgarabdullazade/spyfall-game.git
cd spyfall-game

# Install dependencies
pnpm install

# Generate PWA assets
pnpm generate-pwa-assets

# Start development server
pnpm dev

Available Scripts

pnpm dev              # Start development server
pnpm build            # Build for production
pnpm preview          # Preview production build
pnpm lint             # Lint and fix files
pnpm type-check       # Run TypeScript type checking
pnpm generate-pwa-assets  # Generate PWA icons

⚙️ Configuration

Environment Variables

Create a .env file in the root directory:

VITE_API_URL=https://your-api-url.com/api

PWA Configuration

PWA settings are configured in vite.config.ts:

• App name and description
• Theme colors
• Icons and screenshots
• Caching strategies

🌐 API

The app expects a REST API with the following endpoint:

GET /locations

Returns an array of locations:

[
  {
    "id": 1,
    "name": "Bank",
    "category": {
      "id": 1,
      "name": "Buildings"
    }
  }
]

📦 Building for Production

# Build the app
pnpm build

# Preview the build locally
pnpm preview

The built files will be in the dist/ directory, ready for deployment to any static hosting service.

🔧 PWA Installation

Desktop (Chrome/Edge)

Click the install icon in the address bar or use the browser menu.

Mobile (Android)

Tap "Add to Home Screen" from the browser menu.

Mobile (iOS)

Tap the Share button → "Add to Home Screen".

📄 License

MIT License — feel free to use this project for your own purposes.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
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

📞 Support

If you have any questions or issues, please open an issue on GitHub.

---

Made with ❤️ in Azerbaijan