A word puzzle game where you identify keywords that link three cue words to form a Triad
Triads is a single-player, untimed word puzzle game where you identify a single keyword that links three different cue words to form a Triad. Once you solve three initial Triads, the three keywords become your final challenge—solve all four Triads to win!
The game features beautiful physics-based bubble animations, smooth gameplay, and comprehensive statistics tracking—all without requiring any login or personal information.
You're given 9 bubbles containing words or phrases called cues. Your goal is to find 3 cues that share a common key word to form a 3-word Triad. a key is always a stand-alone word uniquely shared by the 3 cues.
Example: SECOND-, POKER, SHAKE → The key word is "HAND", completing:
- SECOND-HAND
- POKER HAND
- HANDSHAKE
- Initial State: Start with 9 cue words in floating bubbles
- Find a Triad: Select three cues that share a common keyword
- Solve the Triad: Enter your guess for the keyword
- Repeat: Solve a second and third Triad
- Final Challenge: The three keywords from the first three Triads become new cues for the final, fourth Triad
- Win: Solve all four Triads to win the game!
- 3 turns and 2 hints available (any combination)
- Miss a guess = lose a turn
- Take a hint = lose a turn
Hint Types:
- When 9 or 6 cues remain: Highlights a Triad and shows the keyword length
- When 3 cues remain: Also shows the keyword's first letter
Every game is scored, tallied, and averaged. Your performance is tracked in your stats!
| Outcome | Points | Description |
|---|---|---|
| 🎯 Perfect! | 15 | All 4 Triads solved with no misses, no hints |
| 😊 Prideful | 12 | All 4 solved with either 1 miss or 1 hint |
| 👍 Proficient | 10 | All 4 solved with 2 misses and/or hints |
| ✅ Passable | 8 | Got 3 Triads, but couldn't solve the bonus |
| 😕 Piss-poor | 6 | Got 2 Triads, no bonus round |
| 😢 Pitiable | 3 | Got 1 Triad before using up turns |
| 💀 Painful | 0 | Went down in flames |
Triads has no enrollment—you never need to login or reveal anything about yourself!
- First Visit: You're given a randomly generated silly name (e.g.,
HappyPenguin42) - Change Your Name: Click your name anytime to change it
- View Stats: Click your name to see your overall success rate, score distribution, and game history
- New Identity: Start fresh with a new username anytime
- Local Storage: Your progress is saved locally in your browser
- Angular 20.1.6 - Modern web framework
- TypeScript 5.8 - Type-safe JavaScript
- NgRx Signals - Reactive state management
- Tailwind CSS 4.1 - Utility-first CSS framework
- DaisyUI - Component library for Tailwind
- Angular Material - Material Design components
- GSAP - High-performance animations
- Lottie - JSON-based animations
- Matter.js - Physics engine for bubble interactions
- AG Charts - Data visualization for statistics
- ESLint - Code linting
- Prettier - Code formatting
- Husky - Git hooks
- Commitlint - Commit message linting
- Node.js 18+
- pnpm (recommended) or npm/yarn
-
Clone the repository
git clone <repository-url> cd triads-frontend
-
Install dependencies
pnpm install
-
Configure environment
Update
src/environments/environment.tswith your API URL:export const environment = { production: false, apiUrl: 'http://localhost:3000/api', timeout: 10000, }
-
Start development server
pnpm start
Navigate to
http://localhost:4200/
The repository also produces the independently hosted, unlimited Classic edition:
pnpm start:classic # local Classic edition at http://localhost:4200
pnpm build:classic # production artifact in dist/triads-classic/browserDeploy the contents of dist/triads-classic/browser to triads-classic.gametrix.org with SPA fallback to index.html. The build uses the shared production API at https://triads-api.gametrix.org/api; add https://triads-classic.gametrix.org to the backend CORS_ALLOWED_ORIGINS environment variable before serving it publicly. DNS, TLS, and web-server provisioning are managed outside this repository.
| Command | Description |
|---|---|
pnpm start |
Start development server |
pnpm start:classic |
Start Standalone Classic locally |
pnpm build |
Build for production |
pnpm build:classic |
Build Standalone Classic |
pnpm test |
Run unit tests |
pnpm lint |
Lint and fix code |
pnpm format |
Format code with Prettier |
- ✨ Physics-based animations - Bubbles float and interact using Matter.js
- 🎬 Smooth transitions - GSAP-powered animations for game state changes
- 🎭 Lottie animations - Beautiful JSON animations for loading, success, and more
- 💡 Smart hints - Context-aware hints that adapt to game state
- 📊 Statistics tracking - Comprehensive stats with visual charts
- 🎯 Solution reveal - See solutions for unsolved triads when you lose
- 📱 Responsive design - Works seamlessly on desktop, tablet, and mobile
- 🎨 Modern UI - Clean, intuitive interface built with Tailwind CSS
- ⚡ Fast performance - Optimized with Angular's standalone components
- 💾 Local storage - Progress saved automatically in your browser
- 🔄 State management - Reactive state with NgRx Signals
This project follows strict code quality standards:
- ESLint - Configured via
eslint.config.mjs - Prettier - Automatic code formatting
- Husky - Pre-commit hooks for linting and formatting
- Commitlint - Enforces conventional commit messages
- ✅ Standalone Components - All components are standalone
- ✅ Signals - Reactive state management with Angular Signals
- ✅ Tailwind CSS - Styling done exclusively with Tailwind classes
- ✅ TypeScript - Strict type checking enabled
- ✅ OnPush Change Detection - Optimized performance
Happy Triad Solving! 🎯