Tic Tac Toe (Angular Framework)

A high-performance, tactile game implementation built with Angular 21, featuring autonomous state management via Signals and procedural audio synthesis for an advanced Human-Machine Interaction (HMI) experience.

Source Code  ·  Video Demo  ·  Live Demo

---

Authors  ·  Overview  ·  Features  ·  Structure  ·  Results  ·  Quick Start  ·  Usage Guidelines  ·  License  ·  About  ·  Acknowledgments

---

Authors

Amey Thakur	Mega Satish

[!IMPORTANT]

🤝🏻 Special Acknowledgement

Special thanks to Mega Satish for her meaningful contributions, guidance, and support that helped shape this work.

---

Overview

Tic Tac Toe (Angular Framework) is a tactile interactive system engineered to redefine classic logic through a responsive, glassmorphic interface. By bridging the gap between traditional board games and sensory-rich digital environments, this repository provides a foundational study into modern Angular architecture and Human-Machine Interaction (HMI).

The application serves as a digital exploration of reactive state management and tactile transitions, brought into a modern context via the latest Angular 21 and Signals, enabling high-performance game orchestration directly within the browser environment.

Engineering Heuristics

The interaction model is governed by strict computational design patterns ensuring fidelity and responsiveness:

• Reactive Orchestration: The system utilizes Angular Signals for granular reactivity, ensuring O(1) change detection and eliminating redundant DOM reconciliation during intensive gameplay.
• Procedural Audio: Beyond visual cues, the system integrates a Web Audio API engine that dynamically generates synthesized waveforms, reinforcing the goal-driven narrative of every move.
• Tactile Physics: Layout and interaction transitions are governed by complex cubic-bezier curves and rotate-aware CSS transformations, providing a physical, elastic feel to the board.

[!TIP] Sensory Precision Integration

To maximize user engagement, the system employs a multi-sensory validation system. Visual victory vectors (Signaled by the High-Contrast Victory State) and procedural resonators strictly couple interaction goals with state changes. This ensures the user's mental model is constantly synchronized with the underlying game trajectory.

---

Features

Feature	Description
Autonomous State	Implements Angular Signals (signal, computed, effect) for modern reactive orchestration.
Procedural Audio	Custom Web Audio Synthesizer generating real-time waveforms for tactile sensory feedback.
Tactile UX	Glassmorphic Design with responsive hover expansions and 3D board transformations.
Pristine Archival	A refined structure with eliminated clutter, ensuring a "Pure Source" study environment.
High-Fidelity Sharing	Integrated Result Card Engine using html2canvas for responsive post-game snapshots.
Hardened Logic	Advanced Guard Clauses and interaction locks to prevent state corruption post-victory.
Automated Ops	Modern GitHub Actions Workflow for deterministic PWA deployment to GitHub Pages.
Structural Clarity	In-depth and detailed scholarly comments integrated throughout the codebase for transparent logic study.

[!NOTE]

Interactive Polish: The Glass Board

We have engineered a Logic-Driven Animation Manager that calibrates layout shifts across multiple vectors to simulate fluid human-like movement. The visual language focuses on the "Glass Board" aesthetic, ensuring maximum focus on the interactive game trajectory.

Tech Stack

• Framework: Angular 21.1.2 (Standalone Architecture)
• Logic: Signals-based Orchestration (state, computation, effects)
• Audio: Web Audio API (Procedural Sine/Square Tone Synthesis)
• Visuals: CSS3 Glassmorphism & backdrop filters
• Build System: Angular CLI + esbuild (Optimized Bundling)
• Automation: GitHub Actions (CI/CD Deployment Pipeline)
• Hosting: GitHub Pages (Subdirectory Optimized)

---

Project Structure

TIC-TAC-TOE-ANGULAR-FRAMEWORK/
│
├── .github/ workflows/              # DevOps Automation
│   └── deploy.yml                   # GitHub Pages Deployment
│
├── docs/                            # Documentation Layer
│   └── SPECIFICATION.md             # Technical Architecture
│
├── Mega/                            # Attribution Assets
│   ├── Filly.jpg                    # Companion (Filly)
│   └── Mega.png                     # Profile Image (Mega Satish)
│
├── screenshots/                     # Visual Gallery
│   ├── 01-loading-screen.png        # System Boot
│   ├── 04-game-play.png             # Kinetic UI
│   ├── 07-winner-x.png              # System Log: Goal Achieved
│   └── 09-share-card-x-win.png      # High-Fidelity Capture
│
├── Source Code/                     # Primary Application Layer
│   └── TicTacToe/
│       ├── src/                     # Standalone Logic
│       │   ├── app/                 # Component Ecosystem
│       │   │   ├── board/           # Square Components
│       │   │   ├── game/            # Game Orchestrator (Signals)
│       │   │   ├── not-found/       # Error Handling Layer
│       │   │   └── sound.service.ts # Procedural Audio Engine
│       │   ├── assets/              # Static Resources
│       │   ├── index.html           # Application Entrance
│       │   └── main.ts              # System Bootstrapper
│       ├── angular.json             # Build Architecture
│       └── package.json             # Dependency Manifest
│
├── SECURITY.md                      # Security Protocols
├── social_preview.html              # Social Preview Branding
├── CITATION.cff                     # Project Citation Manifest
├── codemeta.json                    # Metadata Standard
├── LICENSE                          # MIT License
└── README.md                        # Project Entrance

---

Results

Board Initialization: Modern Homepage Clean, glassmorphic entrance portal for the interactive grid.

Game Start: Reactive Ready Logical state prepared for high-fidelity interactive orchestration.

Tactile Feedback: Kinetic Interaction Real-time move injection with visual expansion and procedural audio feedback.

Operational Equilibrium: Draw State System-wide state locking triggered upon total grid saturation without victory.

System Log: Victory O Automated high-contrast celebration for Player O victory.

System Log: Victory X Automated high-contrast celebration for Player X victory.

Result Aggregation: Share Result Dynamic overlay for post-game result review and social injection.

Refined Snapshots: High-Fidelity Cards Synthesized result cards optimized for social distribution and archival.

---

Quick Start

1. Prerequisites

• Node.js 20+: Required for modern Angular build and runtime. Download Node.js
• Angular CLI: Install via npm install -g @angular/cli.
• Git: For version control and cloning. Download Git

[!WARNING] Subdirectory Deployment Guard

When deploying to GitHub Pages, ensure the build includes the --base-href /TIC-TAC-TOE/ flag to correctly resolve asset pathing within the subdirectory environment. This is handled automatically by the integrated GitHub Actions workflow.

2. Installation & Setup

Step 1: Clone the Repository

Open your terminal and clone the repository:

git clone https://github.com/Amey-Thakur/TIC-TAC-TOE-ANGULAR-FRAMEWORK.git
cd TIC-TAC-TOE-ANGULAR-FRAMEWORK

Step 2: Navigate to Source

Access the primary Angular application layer:

cd "Source Code/TicTacToe"

Step 3: Synchronize Environment

Install core dependencies and logic engines:

npm install

3. Execution

Launch the primary reactive development server:

ng serve

[!TIP]

Reactive Gaming Simulation | Angular Signals Engine

Experience the interactive Tic Tac Toe simulation directly in your browser through the working GitHub Pages deployment. This platform features a Signals-based Orchestration engine that combines granular reactivity with procedural audio synthesis, providing a visual and auditory demonstration of modern Human-Machine Interaction (HMI