PolyDiff - Spot the Difference Game (Fall 2023)

PolyDiff — A Multiplayer Spot the Difference Game

Real-time multiplayer • Cross-platform gaming • Advanced game modes • Game creation tools

🏃‍♂️ Quick Start • Game Modes • Features • Development

---

Overview

PolyDiff is an interactive multiplayer spot-the-difference game developed for the LOG3900 course. The project consists of three main components:

• A desktop client (Electron/Angular) with game creation and administration capabilities
• A mobile client (Android) optimized for touch-based gameplay
• A NestJS backend server handling game logic, user management, and real-time communications

The game features multiple game modes including Classic (up to 4 players), Team Mode, and Time Limited challenges. Players can create custom game levels, join ongoing games as observers, and interact through an integrated chat system.

Technology Stack

Backend

Desktop Client

Mobile Client

Development Tools

Project Components

The project consists of three main components:

Desktop Client (client-lourd/)

• Built with Angular and Electron
• Provides a rich drawing interface
• Supports real-time collaboration
• Integrated chat system
• Cross-platform compatibility

Mobile Client (client-leger/)

• Native Android application
• Kotlin-based implementation
• Touch-optimized drawing interface
• Real-time synchronization
• Mobile-friendly chat system

Server (serveur/)

• Built with NestJS framework
• WebSocket support for real-time features
• RESTful API endpoints
• User authentication and management
• Data persistence and session handling

Common Layer (common/)

• Shared TypeScript interfaces
• Common constants and enums
• Cross-component type definitions
• Shared utility functions

Architecture Overview

flowchart TB
    subgraph Clients["Game Clients"]
        Desktop["Desktop Client\nGame Creation & Playing"]
        Mobile["Mobile Client\nOptimized for Play"]
    end

    subgraph GameServer["Game Server"]
        GameLogic["Game Logic"]
        MatchMaking["Matchmaking"]
        Chat["Chat System"]
        ReplaySystem["Replay System"]
    end

    subgraph DataLayer["Data Management"]
        UserProfiles["User Profiles"]
        GameData["Game/Level Data"]
        MatchHistory["Match History"]
    end

    Desktop --> GameLogic
    Desktop --> MatchMaking
    Mobile --> GameLogic
    Mobile --> MatchMaking

    GameLogic --> ReplaySystem
    GameLogic --> Chat
    MatchMaking --> GameData
    Chat --> UserProfiles

    Desktop -.-> |"Game Creation"| GameData
    ReplaySystem --> MatchHistory

Loading

System Components

Game Clients

• Desktop Client: Full-featured client with game creation capabilities
• Mobile Client: Optimized for touch-based gameplay

Game Server

• Real-time game state management
• Match creation and player grouping
• Chat system with multiple channels
• Replay recording and playback

Data Management

• User profiles and authentication
• Game level storage
• Match history and statistics

🏃‍♂️ Quick Start

Prerequisites

• Node.js 18+ (for desktop client and server)
• Android Studio (for mobile client)
• Git

Server Setup

cd serveur
npm install
npm run start:dev

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

Desktop Client Setup

cd client-lourd
npm install
npm start

The desktop application will launch automatically

Mobile Client Setup

1. Open client-leger/ in Android Studio
2. Sync Gradle files
3. Build and run on an emulator or physical device

Game Modes

Classic Mode

• 2-4 player competitive gameplay
• Find differences in image pairs
• Score tracking and time limits
• Winner determined by most differences found

Team Mode

• 2-3 teams of 2 players each
• Collaborative difference spotting
• Shared team penalties
• Team-based scoring system

Time Limited Mode

• Fast-paced single difference challenges
• Time bonuses for correct finds
• Rotating image pairs
• Progressive difficulty

Features

Game Creation & Administration

• Custom game level creation
• Drawing tools (Rectangle, Ellipse, Paint bucket)
• Random difference generator
• Game management interface

Multiplayer Features

• Real-time multiplayer support
• Integrated chat system with multiple channels
• Observer mode with player interactions
• Team formation and management

Game Experience

• Visual and sound effects for actions
• Cheat mode with difference highlighting
• Video replay system with timeline
• Multi-language support
• Customizable themes

Cross-Platform Support

• Desktop client (Windows 10+)
• Android client (Android 9+)
• Consistent gameplay experience

Development Guide

Desktop Client (client-lourd)

cd client-lourd
npm install
npm run start:dev

The desktop client includes:

• Game creation interface with drawing tools
• Administration panel for game management
• Full game hosting capabilities
• Comprehensive replay system

Mobile Client (client-leger)

cd client-leger
./gradlew build

The Android client features:

• Touch-optimized gameplay
• Camera integration for avatar capture
• Mobile-friendly chat interface
• Notification system

Server (serveur)

cd serveur
npm install
npm run start:dev

Server capabilities:

• Game state management
• Real-time game synchronization
• User authentication & profiles
• Match history tracking
• WebSocket communication

Common Module Updates

When updating shared interfaces or constants:

1. Make changes in common/
2. Update version in package.json
3. Update all dependent projects

Testing

Each component includes its own test suite:

Running Tests

• Server: cd serveur && npm test
• Desktop: cd client-lourd && npm test
• Mobile: Use Android Studio's test runner

Code Coverage

Generate coverage reports:

npm run coverage

Coverage reports will be available in the /coverage directory of each component.

Quality Assurance

Code Style & Linting

• ESLint configuration is provided for each component
• Run linting checks with npm run lint
• TypeScript strict mode enabled
• Consistent code style across all components

Best Practices

• Use TypeScript types strictly (avoid any)
• Prefer arrow functions over function keyword
• Keep functions single-responsibility
• Use constants for magic numbers/strings
• Follow component-specific architecture patterns

Git Workflow

Branch Naming

• Feature branches: feature/feature-name
• Bug fixes: hotfix/bug-name
• Use kebab-case for branch names

Commit Messages

• Write clear, concise commit messages
• Use present tense ("Add feature" not "Added feature")
• Reference issues where appropriate

Merge Requests

• Keep changes focused and atomic
• Request reviews from team members
• Ensure CI passes before merging
• Squash commits when merging to master

Deployment

See DEPLOYMENT.md for detailed deployment instructions for each component.

Deployment

Binary Generation

All executables must be generated in Release mode for evaluation:

1. Desktop Client:

cd client-lourd
npm run build:prod

Generated in client-lourd/build/

2. Mobile Client:

cd client-leger
./gradlew assembleRelease

Generated APK in client-leger/app/build/outputs/apk/release/

3. Server:

cd serveur
npm run build

Generated in serveur/dist/

Project Structure

LOG3900-104/
├── client-lourd/          # Desktop client (Windows)
│   ├── src/              # Source code
│   └── build/            # Generated executables
├── client-leger/          # Mobile client (Android)
│   ├── app/              # Application code
│   └── build/            # Generated APK
├── serveur/              # Game server
│   ├── src/              # Server implementation
│   └── dist/             # Compiled server
└── common/               # Shared definitions

Project Team

• Émile Watier
• [Other Team Members]

Academic Context

This project was developed for the LOG3900 course at Polytechnique Montréal. It demonstrates:

• Real-time multiplayer game development
• Cross-platform client development
• Backend server implementation
• User interface design
• Network programming

---

Built with ❤️ by the LOG3900-104 Team

Additional Resources

• AntiPatterns
• Software Development AntiPatterns
• Building your first Angular App