A modern Tic Tac Toe game built with Vue 3, featuring single-player vs. AI, local two-player, and a polished PWA-ready experience.
- Two game modes
- Two player — Local multiplayer, take turns on the same device
- vs. Computer — Single player with configurable AI difficulty (easy, medium, hard)
- AI opponent — Minimax-based algorithm; hard mode is unbeatable
- Undo moves — Step back one (two-player) or two (vs. computer) moves
- Stats & scoreboard — Per-mode win/draw tracking stored in localStorage
- Sound effects — Move, win, and draw sounds (toggleable)
- Accessibility — ARIA labels, keyboard focus, reduce motion option
- PWA — Installable with offline support via Workbox
- Responsive — Works on desktop, tablet, and mobile
| Layer | Stack |
|---|---|
| Framework | Vue 3 (Composition API) |
| Build | Vite (beta) |
| Language | TypeScript |
| Styling | Tailwind CSS 4 |
| State | Pinia |
| UI components | PrimeVue |
| Icons | Lucide Vue |
| PWA | vite-plugin-pwa (Workbox) |
| Testing | Vitest (unit), Playwright (e2e) |
| Linting | ESLint, oxlint, oxfmt |
Node: ^20.19.0 || >=22.12.0 (see engines in package.json)
pnpm install| Command | Description |
|---|---|
pnpm dev |
Start dev server with HMR |
pnpm build |
Type-check, compile, and minify for prod |
pnpm preview |
Preview production build locally |
pnpm test:unit |
Run unit tests (Vitest) |
pnpm test:e2e |
Run end-to-end tests (Playwright) |
pnpm lint |
Lint with oxlint + ESLint |
pnpm format |
Format with oxfmt |
# Install browsers (first run only)
npx playwright install
# Build before running e2e
pnpm build
pnpm test:e2e
# Run on Chromium only
pnpm test:e2e --project=chromium
# Run a specific file
pnpm test:e2e tests/example.spec.ts
# Debug mode
pnpm test:e2e --debugsrc/
├── components/ # Vue components
│ ├── GameBoard.vue
│ ├── GameModeMenu.vue
│ ├── GameOverModal.vue
│ ├── GameScoreboard.vue
│ └── GameStatus.vue
├── composables/ # Shared logic
│ ├── useSoundEffects.ts
│ ├── useTicTacToe.ts # Game state & rules
│ └── useTicTacToeAI.ts # Minimax AI
├── stores/
│ ├── preferences.ts # Settings (sound, reduce motion, AI difficulty)
│ └── stats.ts # Win/draw stats per mode
├── router/
├── App.vue
└── main.ts
- Vite: vite.config.ts — Plugins, aliases, PWA
- TypeScript: tsconfig.json
- Tailwind: Uses
@tailwindcss/vite(Tailwind v4) - ESLint: eslint.config.ts
VS Code + Vue (Volar) — disable Vetur if installed.
- Chrome/Edge/Brave: Vue DevTools
- Firefox: Vue DevTools
Private project. © 2025