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
Important
Special thanks to Mega Satish for her meaningful contributions, guidance, and support that helped shape this work.
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.
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-beziercurves 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.
| 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
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.
- 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)
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 EntranceInitial system state with optimized aesthetics and synchronized brand identity.
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.
- 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.
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-FRAMEWORKAccess the primary Angular application layer:
cd "Source Code/TicTacToe"Install core dependencies and logic engines:
npm installLaunch the primary reactive development server:
ng serveTip
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) and state management in Angular.
This repository is openly shared to support learning and knowledge exchange across the engineering community.
For Students
Use this project as reference material for understanding Angular Signals, Standalone Component Architecture, and Procedural Audio Synthesis. The source code is available for study to facilitate high-performance interactive development.
For Educators
This project may serve as a practical lab example or supplementary teaching resource for Web Frameworks, Human-Machine Interaction, and Interactive System Design courses.
For Researchers
The documentation and architectural approach may provide insights into systematic project archiving, esbuild-optimized bundling, and sensory feedback loops in modern SPAs.
This repository and all its creative and technical assets are made available under the MIT License. See the LICENSE file for complete terms.
Note
Summary: You are free to share and adapt this content for any purpose, even commercially, as long as you provide appropriate attribution to the original authors.
Copyright © 2022 Amey Thakur & Mega Satish
Created & Maintained by: Amey Thakur & Mega Satish
This project features Tic Tac Toe (Angular Framework), a sensory-rich tactile game. It represents a personal exploration into Angular-based state orchestration and high-performance interactive design.
Connect: GitHub · LinkedIn · ORCID
Grateful acknowledgment to Mega Satish for her exceptional collaboration and scholarly partnership during the development of this Tic-Tac-Toe game application project using the Angular framework. Her constant support, technical clarity, and dedication to software quality were instrumental in achieving the system's functional objectives. Learning alongside her was a transformative experience; her thoughtful approach to problem-solving and steady encouragement turned complex requirements into meaningful learning moments. This work reflects the growth and insights gained from our side-by-side journey. Thank you, Mega, for everything you shared and taught along the way.
Special thanks to the mentors and peers whose encouragement, discussions, and support contributed meaningfully to this learning experience.
Authors · Overview · Features · Structure · Results · Quick Start · Usage Guidelines · License · About · Acknowledgments
Computer Engineering (B.E.) - University of Mumbai
Semester-wise curriculum, laboratories, projects, and academic notes.