init
This commit is contained in:
44
.gitignore
vendored
Normal file
44
.gitignore
vendored
Normal file
@@ -0,0 +1,44 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
.pnp/
|
||||
.pnp.js
|
||||
|
||||
# Production build outputs
|
||||
dist/
|
||||
dist-ssr/
|
||||
build/
|
||||
|
||||
# Logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
*.log
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
!.vscode/settings.json
|
||||
.idea/
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# OS generated files
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
121
README.md
Normal file
121
README.md
Normal file
@@ -0,0 +1,121 @@
|
||||
# Quartiles — Daily Word Fragment Puzzle Game
|
||||
|
||||
A sleek, Apple News+ inspired webapp clone of the addictive word puzzle game **Quartiles**. Combine letter tiles into words, discover the 5 hidden 4-tile Quartiles, claim the massive 40-point completion bonus, and climb the ranks from Novice to Expert!
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 🎮 How to Play
|
||||
|
||||
1. **The Board**: You are presented with a **4×5 grid of 20 letter tiles**. Each tile contains a 2 to 4 letter fragment (morpheme, syllable, or root).
|
||||
2. **Build Words**: Tap 1, 2, 3, or 4 tiles in sequence to construct valid English words.
|
||||
3. **Submit**: Tap the **✓ ENTER** button (or press `Enter` on your keyboard) to validate.
|
||||
4. **Tile Reusability**: Tiles stay on the board and can be reused to form as many different words as possible!
|
||||
|
||||
### 🏆 Points System
|
||||
|
||||
| Tile Count | Type | Points |
|
||||
| :---: | :---: | :---: |
|
||||
| **1 Tile** | Single-fragment word | **1 pt** |
|
||||
| **2 Tiles** | Compound word | **2 pts** |
|
||||
| **3 Tiles** | Multi-part word | **4 pts** |
|
||||
| **4 Tiles** | **"Quartile"** (Target word) | **8 pts** |
|
||||
|
||||
### ✨ The 40-Point Quartiles Bonus
|
||||
Every puzzle contains **5 target 4-tile Quartiles**. Finding all 5 target Quartiles awards an instant **40-point completion bonus** with celebratory confetti!
|
||||
|
||||
### 📈 Ranks & Tiers
|
||||
- **Novice**: 0 – 24 pts
|
||||
- **Apprentice**: 25 – 49 pts
|
||||
- **Builder**: 50 – 69 pts
|
||||
- **Artisan**: 70 – 84 pts
|
||||
- **Wordsmith**: 85 – 99 pts
|
||||
- **Expert**: **100+ pts** *(The primary daily milestone!)*
|
||||
- **Perfect**: 100% of all constructible words found on the board!
|
||||
|
||||
---
|
||||
|
||||
## 🌟 Key Features
|
||||
|
||||
- **Apple News+ Inspired Aesthetics**: Crisp typography, frosted glass (`backdrop-filter: blur`), curated color palettes, tactile tile presses, and smooth animations.
|
||||
- **Dark Mode & Light Mode**: Seamless toggle matching iOS system styling.
|
||||
- **Auto-Lock Solved Quartiles**: Toggle locking to automatically pin found 4-tile Quartiles in neat rows at the top of the grid with padlock badges, while allowing remaining tiles to shuffle freely.
|
||||
- **Shuffle & Sort A-Z**: Reorder unlocked tiles to spot new combinations or sort them alphabetically.
|
||||
- **Interactive Words Found Drawer**: Filter solved words by tile count (*All, Quartiles, 3-Tiles, 2-Tiles, 1-Tile*), view point values, and tile fragment breakdowns.
|
||||
- **Progressive Hint System**: Contextual hints guiding you to unfound Quartiles and words without spoiling the puzzle.
|
||||
- **Daily Calendar & Archives**: Over 30 curated daily and themed challenge puzzles (*Cosmos, Urban Pulse, Wild Kingdom, Mind & Memory, etc.*).
|
||||
- **Unlimited Random Mode**: Instant on-the-fly puzzle generator yielding infinite unique playable boards.
|
||||
- **Custom Puzzle Creator & Sharing**: Create your own puzzle using 5 custom four-tile words and share with friends via URL hash.
|
||||
- **Tactile Web Audio Feedback**: Realistic acoustic clicks, pops, harmonious chords, and celebratory fanfare built using the native Web Audio API (0 external sound files needed).
|
||||
- **Canvas Confetti**: High-performance canvas particle system for Quartile and Expert victories.
|
||||
- **Keyboard Shortcuts**:
|
||||
- `Enter`: Submit constructed word
|
||||
- `Backspace`: Remove last tile from tray
|
||||
- `Escape`: Clear active tray
|
||||
- `Spacebar`: Shuffle board tiles
|
||||
- **Progress Persistence**: Automatically saves your game progress, score, and solved words in `localStorage`.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Getting Started
|
||||
|
||||
### Prerequisites
|
||||
- Node.js (v18+)
|
||||
- npm
|
||||
|
||||
### Installation & Local Run
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development server
|
||||
npm run dev
|
||||
|
||||
# Open your browser at http://localhost:5173
|
||||
```
|
||||
|
||||
### Production Build
|
||||
```bash
|
||||
npm run build
|
||||
npm run preview
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📁 Project Structure
|
||||
|
||||
```
|
||||
quartiles/
|
||||
├── index.html # App shell with SEO and viewport configuration
|
||||
├── package.json # Scripts and dependencies (Vite)
|
||||
├── src/
|
||||
│ ├── main.js # App bootstrap, event wiring, keyboard handlers
|
||||
│ ├── styles/
|
||||
│ │ ├── main.css # Design tokens, variables, typography, reset
|
||||
│ │ ├── board.css # 4x5 grid layout, tactile tiles, active builder
|
||||
│ │ └── components.css # Score bar, action buttons, drawer, modals
|
||||
│ ├── components/
|
||||
│ │ ├── Header.js # Brand title, date badge, utility controls
|
||||
│ │ ├── ScoreRankBar.js # Score, rank progression, 5-segment Quartiles tracker
|
||||
│ │ ├── WordBuilder.js # Construction tray with drag & drop reorder
|
||||
│ │ ├── TileGrid.js # 20-tile responsive board with locked rows
|
||||
│ │ ├── ActionBar.js # Shuffle, Sort A-Z, Lock Quartiles, Hint
|
||||
│ │ ├── WordsDrawer.js # Categorized found words bottom sheet
|
||||
│ │ ├── Modals.js # How to Play, Calendar, Builder, Stats, Settings
|
||||
│ │ └── Toast.js # Spring floating notifications
|
||||
│ ├── data/
|
||||
│ │ ├── puzzles.js # Pre-solved daily and themed puzzles database
|
||||
│ │ └── lexicon.js # SCOWL recognized English vocabulary set
|
||||
│ └── engine/
|
||||
│ ├── solver.js # Tree-pruning word solver and rank calculator
|
||||
│ ├── generator.js # Unlimited and custom puzzle generator & URL encoder
|
||||
│ ├── audio.js # Web Audio API acoustic synthesizer
|
||||
│ └── confetti.js # Canvas particle confetti engine
|
||||
└── scripts/
|
||||
├── solver.mjs # Node solver script
|
||||
├── build-all-data.mjs # Curated puzzle builder
|
||||
└── build-client-lexicon.mjs
|
||||
```
|
||||
34
index.html
Normal file
34
index.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
|
||||
<title>Quartiles — Daily Word Puzzle Game</title>
|
||||
<meta name="description" content="Play Quartiles, the addictive daily word fragment puzzle game. Combine letter tiles into words, chase the five 4-tile Quartiles, and score 100 points for Expert rank!" />
|
||||
|
||||
<!-- PWA & Theme Colors -->
|
||||
<meta name="theme-color" content="#1c1c1e" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-mobile-web-app-title" content="Quartiles" />
|
||||
<meta name="application-name" content="Quartiles" />
|
||||
<meta name="msapplication-TileColor" content="#d97706" />
|
||||
|
||||
<!-- Web App Manifest -->
|
||||
<link rel="manifest" href="/manifest.webmanifest" />
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
||||
<link rel="apple-touch-icon" href="/icon.svg" />
|
||||
|
||||
<!-- Google Fonts: Inter -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
838
package-lock.json
generated
Normal file
838
package-lock.json
generated
Normal file
@@ -0,0 +1,838 @@
|
||||
{
|
||||
"name": "quartiles",
|
||||
"version": "1.0.0",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "quartiles",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"wordlist-english": "^1.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^8.3.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@oxc-project/types": {
|
||||
"version": "0.155.0",
|
||||
"resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.155.0.tgz",
|
||||
"integrity": "sha512-SeE8JPwW1xs1tHeNycjUtUBdhorRa8o4jlvjwk49R7/Z291i+4DQa7JJIgOm/TaYQZx+QrPQbVJ/9c8dMIZN8Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/oxc-project"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-android-arm-eabi": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.15.tgz",
|
||||
"integrity": "sha512-aLcgK9gIJ3YRvrrtfSBbRa27F5WrpiTaPulnFpsHPxpUHgFlSgnU4854MHwoRGEBhfRJDWCS2WQ7lIjskE9Olw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-android-arm64": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.15.tgz",
|
||||
"integrity": "sha512-xD7DdZCrbThKuxNg7ooQmvp07ys4J/pnSEMTG3/OdOWl6daC67m/Q4fL78sRHMxTH/N4fGUbYhcPM0MF5WFHkg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-darwin-arm64": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.15.tgz",
|
||||
"integrity": "sha512-m2WuQ6r0B4OTYxyPpNLtXaMRbRDUbG8YQV2Q3KTdSSK8Th6KHCnC8jVCJt8bvYeSB5WivkkNbc85mKadaSdOxA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-darwin-x64": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.15.tgz",
|
||||
"integrity": "sha512-5RtnsHM36nodM9WbMy+zip0LGS/G+y5wro5RHrpOlr4ac24+1zSi9kiV2MP1myZeZ/ifEHfulQcWjnAXzc2C2A==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-freebsd-x64": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.15.tgz",
|
||||
"integrity": "sha512-g3l09pyFqhu+135JKkbkwiKGQmwU5hUMUPJ4VdBADvuqR8d33L6H578rh8m7rtxbdp+VmX/+nzI7nvhSZlzpUQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-arm-gnueabihf": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.15.tgz",
|
||||
"integrity": "sha512-nIe3VugI97nGQtspPxDqA4sXMUpeiocKIP/CqpY/u/vgbT+alX+cVxu1C/oVBPKg4feNTmYovE91v4DgXvXNwQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-arm64-gnu": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.15.tgz",
|
||||
"integrity": "sha512-iTBjXx+B5QSvgI89lJfmqh4wTh8NabR1YZIIN3hNx4zSG0EVfVqkOvLulNpG4251pbd6/IAmZ/LefVk1Y4rPhw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-arm64-musl": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.15.tgz",
|
||||
"integrity": "sha512-uN26XOnVR7rqQupG3V9oAG2EGGatWjcJHOeDOHUFCh4TBWmP2tHTFoVN13aYbwfm0aHqJAEmcwhAu6sooIjfqQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-ppc64-gnu": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.15.tgz",
|
||||
"integrity": "sha512-9nWkcdd+H+XhaA3fQIwpHnKIrfx/PQ6rO0pivr78Og07tXlUlctBBJoEYLPfhTmCR/QxEVdn6uPjHV5SymPhdw==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-s390x-gnu": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.15.tgz",
|
||||
"integrity": "sha512-Ggh0ciFjLwIusLSLz7LZYEaGdxOAUJXI+Qu5JCbhPJJHEt8vP+IjRATTJheiJsdzzTYgUiHUiw3X1Ea3ZpMBdA==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-x64-gnu": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.15.tgz",
|
||||
"integrity": "sha512-FHg60rS6DBePAYZ9X9F67x+JObFdmgn6tupA1C/a3B+CufFmTD4mX+e8M75tCiAO3foR/6xwVBI0KQiI7sn/rw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-linux-x64-musl": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.15.tgz",
|
||||
"integrity": "sha512-/cvV/7v5VGz/moiz0XKRj2dE8DzsKyhIu1KpOvJGPjRywg3yscON889UGvAe8zfiJLHup7VLjBduoGWi3HusWQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-openharmony-arm64": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.15.tgz",
|
||||
"integrity": "sha512-MyzC5Hrv/sm+Z7TSGKP/j8001RO2xQm1zOpCNVL4j0cY/VhBZviludA2YFQ7i4lH6ZAXxQm0lcMdBzM+99mE7w==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"openharmony"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-win32-arm64-msvc": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.15.tgz",
|
||||
"integrity": "sha512-+PgYiS+AH5omy6L45ZLxybasauJaj3M8buoT83D+nzPmCayXlxUV9hydhciCKVyIg0B/v0BtXPDE1uGqNwCPpg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/binding-win32-x64-msvc": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.15.tgz",
|
||||
"integrity": "sha512-HFZd2QNQYn1JbIi+Hpd7H+r/lkWxcfIu28nirZ6eCn2LafuvmExMlb/P96Sfx5tf7pPArw39IdhmCF8vmV+NhQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/pluginutils": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz",
|
||||
"integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/fdir": {
|
||||
"version": "6.5.0",
|
||||
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
|
||||
"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"picomatch": "^3 || ^4"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"picomatch": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/fsevents": {
|
||||
"version": "2.3.3",
|
||||
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
|
||||
"integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz",
|
||||
"integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==",
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"dependencies": {
|
||||
"detect-libc": "^2.0.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"lightningcss-android-arm64": "1.33.0",
|
||||
"lightningcss-darwin-arm64": "1.33.0",
|
||||
"lightningcss-darwin-x64": "1.33.0",
|
||||
"lightningcss-freebsd-x64": "1.33.0",
|
||||
"lightningcss-linux-arm-gnueabihf": "1.33.0",
|
||||
"lightningcss-linux-arm64-gnu": "1.33.0",
|
||||
"lightningcss-linux-arm64-musl": "1.33.0",
|
||||
"lightningcss-linux-x64-gnu": "1.33.0",
|
||||
"lightningcss-linux-x64-musl": "1.33.0",
|
||||
"lightningcss-win32-arm64-msvc": "1.33.0",
|
||||
"lightningcss-win32-x64-msvc": "1.33.0"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-android-arm64": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz",
|
||||
"integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"android"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-darwin-arm64": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz",
|
||||
"integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-darwin-x64": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz",
|
||||
"integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-freebsd-x64": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz",
|
||||
"integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"freebsd"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm-gnueabihf": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz",
|
||||
"integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm64-gnu": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz",
|
||||
"integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-arm64-musl": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz",
|
||||
"integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-x64-gnu": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz",
|
||||
"integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-linux-x64-musl": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz",
|
||||
"integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-win32-arm64-msvc": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz",
|
||||
"integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss-win32-x64-msvc": {
|
||||
"version": "1.33.0",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz",
|
||||
"integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"dev": true,
|
||||
"license": "MPL-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">= 12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/parcel"
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.20",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.20.tgz",
|
||||
"integrity": "sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz",
|
||||
"integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/jonschlinkert"
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.31",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.31.tgz",
|
||||
"integrity": "sha512-YUbWYCgErwnMAVkjUnYa+KlMBzGpHwiIt/DE7f0G33AuX2LH9UcTk6KgWxd3zRU+pN3u/C+Xl3EnMLM4Hea7Sg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/postcss/"
|
||||
},
|
||||
{
|
||||
"type": "tidelift",
|
||||
"url": "https://tidelift.com/funding/github/npm/postcss"
|
||||
},
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.20",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
}
|
||||
},
|
||||
"node_modules/rolldown": {
|
||||
"version": "1.2.15",
|
||||
"resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.15.tgz",
|
||||
"integrity": "sha512-6odND+fel5zVw3I4Yc2e69gvguDnX0CAAGiNDZSq4ik5WUcaLrkD2GLuog0XcODbor31hZ5ayEMgVDno+KPV5g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@oxc-project/types": "=0.155.0",
|
||||
"@rolldown/pluginutils": "^1.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"rolldown": "bin/cli.mjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@rolldown/binding-android-arm-eabi": "1.2.15",
|
||||
"@rolldown/binding-android-arm64": "1.2.15",
|
||||
"@rolldown/binding-darwin-arm64": "1.2.15",
|
||||
"@rolldown/binding-darwin-x64": "1.2.15",
|
||||
"@rolldown/binding-freebsd-x64": "1.2.15",
|
||||
"@rolldown/binding-linux-arm-gnueabihf": "1.2.15",
|
||||
"@rolldown/binding-linux-arm64-gnu": "1.2.15",
|
||||
"@rolldown/binding-linux-arm64-musl": "1.2.15",
|
||||
"@rolldown/binding-linux-ppc64-gnu": "1.2.15",
|
||||
"@rolldown/binding-linux-s390x-gnu": "1.2.15",
|
||||
"@rolldown/binding-linux-x64-gnu": "1.2.15",
|
||||
"@rolldown/binding-linux-x64-musl": "1.2.15",
|
||||
"@rolldown/binding-openharmony-arm64": "1.2.15",
|
||||
"@rolldown/binding-win32-arm64-msvc": "1.2.15",
|
||||
"@rolldown/binding-win32-x64-msvc": "1.2.15"
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.2.tgz",
|
||||
"integrity": "sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tinyglobby": {
|
||||
"version": "0.2.17",
|
||||
"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz",
|
||||
"integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fdir": "^6.5.0",
|
||||
"picomatch": "^4.0.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/SuperchupuDev"
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "8.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-8.3.5.tgz",
|
||||
"integrity": "sha512-z1YpjieJ9g0ebTmQpLBv/oq9E3F9EIlOe+7LahW8SrE3LTiG3udBRUXQOlYXP9b+IC2q2phHeVxj9xGlw34OEQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"lightningcss": "^1.33.0",
|
||||
"picomatch": "^4.0.7",
|
||||
"postcss": "^8.5.30",
|
||||
"rolldown": "~1.2.14",
|
||||
"tinyglobby": "^0.2.17"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/vitejs/vite?sponsor=1"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"fsevents": "~2.3.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/node": "^20.19.0 || >=22.12.0",
|
||||
"@vitejs/devtools": "^0.7.1 || ^0.8.0",
|
||||
"esbuild": "^0.27.0 || ^0.28.0",
|
||||
"jiti": ">=1.21.0",
|
||||
"less": "^4.0.0",
|
||||
"sass": "^1.70.0",
|
||||
"sass-embedded": "^1.70.0",
|
||||
"stylus": ">=0.54.8",
|
||||
"sugarss": "^5.0.0",
|
||||
"terser": "^5.16.0",
|
||||
"tsx": "^4.8.1",
|
||||
"yaml": "^2.4.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/node": {
|
||||
"optional": true
|
||||
},
|
||||
"@vitejs/devtools": {
|
||||
"optional": true
|
||||
},
|
||||
"esbuild": {
|
||||
"optional": true
|
||||
},
|
||||
"jiti": {
|
||||
"optional": true
|
||||
},
|
||||
"less": {
|
||||
"optional": true
|
||||
},
|
||||
"sass": {
|
||||
"optional": true
|
||||
},
|
||||
"sass-embedded": {
|
||||
"optional": true
|
||||
},
|
||||
"stylus": {
|
||||
"optional": true
|
||||
},
|
||||
"sugarss": {
|
||||
"optional": true
|
||||
},
|
||||
"terser": {
|
||||
"optional": true
|
||||
},
|
||||
"tsx": {
|
||||
"optional": true
|
||||
},
|
||||
"yaml": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/wordlist-english": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/wordlist-english/-/wordlist-english-1.2.1.tgz",
|
||||
"integrity": "sha512-vaiQQiu95UeON0WZFtiTrWfZmIiUd2rhrhMCBeEzwq3oTVzHCX8naGCqv/smSspE9kH2sN+E8lZyV0JZjqSzGw==",
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
}
|
||||
21
package.json
Normal file
21
package.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "quartiles",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"vite": "^8.3.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"wordlist-english": "^1.2.1"
|
||||
}
|
||||
}
|
||||
36
public/icon.svg
Normal file
36
public/icon.svg
Normal file
@@ -0,0 +1,36 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
||||
<defs>
|
||||
<linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#f59e0b" />
|
||||
<stop offset="100%" stop-color="#b45309" />
|
||||
</linearGradient>
|
||||
<linearGradient id="tileGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#ffffff" />
|
||||
<stop offset="100%" stop-color="#f3f4f6" />
|
||||
</linearGradient>
|
||||
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
|
||||
<feDropShadow dx="0" dy="8" stdDeviation="10" flood-opacity="0.25" />
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Background iOS squircle -->
|
||||
<rect width="512" height="512" rx="112" fill="url(#bgGrad)" />
|
||||
|
||||
<!-- 4 Quartile Tiles forming a grid/Q -->
|
||||
<g filter="url(#shadow)">
|
||||
<!-- Top Left -->
|
||||
<rect x="116" y="116" width="124" height="124" rx="28" fill="url(#tileGrad)" />
|
||||
<text x="178" y="200" font-family="-apple-system, BlinkMacSystemFont, 'Inter', sans-serif" font-weight="800" font-size="68" fill="#1f2937" text-anchor="middle">Q</text>
|
||||
|
||||
<!-- Top Right -->
|
||||
<rect x="272" y="116" width="124" height="124" rx="28" fill="url(#tileGrad)" />
|
||||
<text x="334" y="200" font-family="-apple-system, BlinkMacSystemFont, 'Inter', sans-serif" font-weight="800" font-size="68" fill="#1f2937" text-anchor="middle">U</text>
|
||||
|
||||
<!-- Bottom Left -->
|
||||
<rect x="116" y="272" width="124" height="124" rx="28" fill="url(#tileGrad)" />
|
||||
<text x="178" y="356" font-family="-apple-system, BlinkMacSystemFont, 'Inter', sans-serif" font-weight="800" font-size="68" fill="#1f2937" text-anchor="middle">A</text>
|
||||
|
||||
<!-- Bottom Right with emerald accent -->
|
||||
<rect x="272" y="272" width="124" height="124" rx="28" fill="#10b981" />
|
||||
<text x="334" y="356" font-family="-apple-system, BlinkMacSystemFont, 'Inter', sans-serif" font-weight="800" font-size="68" fill="#ffffff" text-anchor="middle">R</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
26
public/manifest.webmanifest
Normal file
26
public/manifest.webmanifest
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "Quartiles — Daily Word Puzzle",
|
||||
"short_name": "Quartiles",
|
||||
"description": "Combine letter tiles to form words, find the 5 hidden Quartiles, and score 100 points for Expert rank!",
|
||||
"start_url": "/",
|
||||
"scope": "/",
|
||||
"display": "standalone",
|
||||
"orientation": "portrait-primary",
|
||||
"background_color": "#000000",
|
||||
"theme_color": "#1c1c1e",
|
||||
"categories": ["games", "puzzle"],
|
||||
"icons": [
|
||||
{
|
||||
"src": "/icon.svg",
|
||||
"sizes": "512x512",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any"
|
||||
},
|
||||
{
|
||||
"src": "/icon.svg",
|
||||
"sizes": "512x512",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
76
public/sw.js
Normal file
76
public/sw.js
Normal file
@@ -0,0 +1,76 @@
|
||||
const CACHE_NAME = 'quartiles-pwa-v1';
|
||||
|
||||
const STATIC_ASSETS = [
|
||||
'/',
|
||||
'/index.html',
|
||||
'/manifest.webmanifest',
|
||||
'/icon.svg'
|
||||
];
|
||||
|
||||
// Install: Cache initial shell assets
|
||||
self.addEventListener('install', event => {
|
||||
event.waitUntil(
|
||||
caches.open(CACHE_NAME).then(cache => {
|
||||
return cache.addAll(STATIC_ASSETS);
|
||||
}).then(() => self.skipWaiting())
|
||||
);
|
||||
});
|
||||
|
||||
// Activate: Clean up old cache versions
|
||||
self.addEventListener('activate', event => {
|
||||
event.waitUntil(
|
||||
caches.keys().then(keys => {
|
||||
return Promise.all(
|
||||
keys.map(key => {
|
||||
if (key !== CACHE_NAME) {
|
||||
return caches.delete(key);
|
||||
}
|
||||
})
|
||||
);
|
||||
}).then(() => self.clients.claim())
|
||||
);
|
||||
});
|
||||
|
||||
// Fetch: Stale-While-Revalidate for local assets, Network-First for HTML navigation
|
||||
self.addEventListener('fetch', event => {
|
||||
const request = event.request;
|
||||
const url = new URL(request.url);
|
||||
|
||||
// Only handle GET requests
|
||||
if (request.method !== 'GET') return;
|
||||
|
||||
// Handle HTML navigation requests (Offline support)
|
||||
if (request.mode === 'navigate') {
|
||||
event.respondWith(
|
||||
fetch(request)
|
||||
.then(response => {
|
||||
if (response && response.status === 200) {
|
||||
const responseClone = response.clone();
|
||||
caches.open(CACHE_NAME).then(cache => cache.put(request, responseClone));
|
||||
}
|
||||
return response;
|
||||
})
|
||||
.catch(() => caches.match('/index.html') || caches.match('/'))
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// Same-origin static assets or Google Fonts: Stale-While-Revalidate
|
||||
if (url.origin === location.origin || url.hostname.includes('googleapis.com') || url.hostname.includes('gstatic.com')) {
|
||||
event.respondWith(
|
||||
caches.match(request).then(cachedResponse => {
|
||||
const fetchPromise = fetch(request)
|
||||
.then(networkResponse => {
|
||||
if (networkResponse && networkResponse.status === 200) {
|
||||
const responseClone = networkResponse.clone();
|
||||
caches.open(CACHE_NAME).then(cache => cache.put(request, responseClone));
|
||||
}
|
||||
return networkResponse;
|
||||
})
|
||||
.catch(() => cachedResponse);
|
||||
|
||||
return cachedResponse || fetchPromise;
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
323
scripts/build-all-data.mjs
Normal file
323
scripts/build-all-data.mjs
Normal file
@@ -0,0 +1,323 @@
|
||||
import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import wordlistEnglish from 'wordlist-english';
|
||||
import { solveBoard } from './solver.mjs';
|
||||
|
||||
const targetWordsPool = [
|
||||
// Wonder & Exploration
|
||||
{ word: 'remarkable', tiles: ['re', 'mar', 'ka', 'ble'], theme: 'wonder', clue: 'Worthy of attention; striking' },
|
||||
{ word: 'unforgettable', tiles: ['un', 'for', 'get', 'table'], theme: 'wonder', clue: 'Impossible to forget; memorable' },
|
||||
{ word: 'photography', tiles: ['pho', 'to', 'gra', 'phy'], theme: 'wonder', clue: 'The art or practice of taking photos' },
|
||||
{ word: 'adventurous', tiles: ['ad', 'ven', 'tur', 'ous'], theme: 'wonder', clue: 'Willing to take risks or try new things' },
|
||||
{ word: 'inspiration', tiles: ['in', 'spi', 'ra', 'tion'], theme: 'wonder', clue: 'A stimulus to creative thought or action' },
|
||||
|
||||
// Space & Cosmos
|
||||
{ word: 'astronomy', tiles: ['as', 'tro', 'no', 'my'], theme: 'space', clue: 'The branch of science dealing with space' },
|
||||
{ word: 'gravitation', tiles: ['gra', 'vi', 'ta', 'tion'], theme: 'space', clue: 'The force that attracts bodies toward mass' },
|
||||
{ word: 'atmosphere', tiles: ['at', 'mo', 'sph', 'ere'], theme: 'space', clue: 'The envelope of gases surrounding a planet' },
|
||||
{ word: 'interstellar', tiles: ['in', 'ter', 'ste', 'llar'], theme: 'space', clue: 'Occurring between stars' },
|
||||
{ word: 'telescopic', tiles: ['tel', 'es', 'co', 'pic'], theme: 'space', clue: 'Having the power for viewing distant objects' },
|
||||
|
||||
// Science & Discovery
|
||||
{ word: 'required', tiles: ['re', 'qu', 'ir', 'ed'], theme: 'science', clue: 'Officially compulsory or needed' },
|
||||
{ word: 'equivalent', tiles: ['equ', 'iv', 'al', 'ent'], theme: 'science', clue: 'Equal in value, amount, or meaning' },
|
||||
{ word: 'objection', tiles: ['obj', 'ec', 'ti', 'on'], theme: 'science', clue: 'An expression or feeling of disapproval' },
|
||||
{ word: 'justification', tiles: ['ju', 'stif', 'ica', 'tion'], theme: 'science', clue: 'The action of showing something to be right' },
|
||||
{ word: 'mysterious', tiles: ['mys', 'ter', 'io', 'us'], theme: 'science', clue: 'Difficult or impossible to understand' },
|
||||
|
||||
// Nature & Earth
|
||||
{ word: 'biodiversity', tiles: ['bio', 'di', 'ver', 'sity'], theme: 'nature', clue: 'The variety of life in the world or habitat' },
|
||||
{ word: 'environment', tiles: ['en', 'vi', 'ron', 'ment'], theme: 'nature', clue: 'The surroundings or conditions in which one lives' },
|
||||
{ word: 'caterpillar', tiles: ['cat', 'er', 'pil', 'lar'], theme: 'nature', clue: 'The larval stage of a butterfly or moth' },
|
||||
{ word: 'underwater', tiles: ['un', 'der', 'wa', 'ter'], theme: 'nature', clue: 'Situated or occurring below water surface' },
|
||||
{ word: 'thunderstorm', tiles: ['thun', 'der', 'sto', 'rm'], theme: 'nature', clue: 'A transient storm of lightning and thunder' },
|
||||
|
||||
// Mind & Philosophy
|
||||
{ word: 'imagination', tiles: ['im', 'agi', 'na', 'tion'], theme: 'mind', clue: 'The faculty of forming new ideas or images' },
|
||||
{ word: 'understanding', tiles: ['un', 'der', 'stan', 'ding'], theme: 'mind', clue: 'The ability to comprehend something' },
|
||||
{ word: 'psychology', tiles: ['psy', 'cho', 'lo', 'gy'], theme: 'mind', clue: 'The scientific study of mind and behavior' },
|
||||
{ word: 'intelligence', tiles: ['in', 'tel', 'li', 'gence'], theme: 'mind', clue: 'The ability to acquire and apply knowledge' },
|
||||
{ word: 'consciousness', tiles: ['con', 'sci', 'ous', 'ness'], theme: 'mind', clue: 'The state of being aware of one surroundings' },
|
||||
|
||||
// Architecture & City
|
||||
{ word: 'architecture', tiles: ['ar', 'chi', 'tec', 'ture'], theme: 'city', clue: 'The art and practice of designing buildings' },
|
||||
{ word: 'metropolitan', tiles: ['me', 'tro', 'pol', 'itan'], theme: 'city', clue: 'Relating to a large, busy city' },
|
||||
{ word: 'construction', tiles: ['con', 'stru', 'cti', 'on'], theme: 'city', clue: 'The building of something typically large' },
|
||||
{ word: 'neighborhood', tiles: ['neigh', 'bor', 'ho', 'od'], theme: 'city', clue: 'A district or area forming a community' },
|
||||
{ word: 'skyscraper', tiles: ['sky', 'sc', 'ra', 'per'], theme: 'city', clue: 'A very tall building with many stories' },
|
||||
|
||||
// Music & Arts
|
||||
{ word: 'symphony', tiles: ['sym', 'pho', 'ni', 'cally'], theme: 'arts', clue: 'Relating to an elaborate musical composition' },
|
||||
{ word: 'masterpiece', tiles: ['mas', 'ter', 'pie', 'ce'], theme: 'arts', clue: 'A work of outstanding artistry or skill' },
|
||||
{ word: 'performance', tiles: ['per', 'for', 'man', 'ce'], theme: 'arts', clue: 'An act of staging or presenting a play or concert' },
|
||||
{ word: 'exhibition', tiles: ['ex', 'hi', 'bi', 'tion'], theme: 'arts', clue: 'A public display of works of art or items' },
|
||||
{ word: 'creativity', tiles: ['cre', 'at', 'iv', 'ity'], theme: 'arts', clue: 'The use of the imagination or original ideas' },
|
||||
|
||||
// Technology & Future
|
||||
{ word: 'technology', tiles: ['tec', 'hno', 'lo', 'gy'], theme: 'tech', clue: 'Application of scientific knowledge for practical aims' },
|
||||
{ word: 'electronic', tiles: ['el', 'ect', 'ro', 'nic'], theme: 'tech', clue: 'Having components like microchips or transistors' },
|
||||
{ word: 'automation', tiles: ['au', 'to', 'ma', 'tion'], theme: 'tech', clue: 'The use of largely automatic equipment in a system' },
|
||||
{ word: 'innovation', tiles: ['in', 'no', 'va', 'tion'], theme: 'tech', clue: 'A new method, idea, or product' },
|
||||
{ word: 'computation', tiles: ['com', 'pu', 'ta', 'tion'], theme: 'tech', clue: 'The action of mathematical calculation' },
|
||||
|
||||
// Society & Community
|
||||
{ word: 'celebration', tiles: ['cel', 'eb', 'ra', 'tion'], theme: 'society', clue: 'The action of marking one pleasure at an event' },
|
||||
{ word: 'communication', tiles: ['com', 'mu', 'ni', 'cation'], theme: 'society', clue: 'The imparting or exchanging of information' },
|
||||
{ word: 'relationship', tiles: ['re', 'la', 'tion', 'ship'], theme: 'society', clue: 'The way in which two or more concepts or people connect' },
|
||||
{ word: 'opportunity', tiles: ['op', 'por', 'tu', 'nity'], theme: 'society', clue: 'A set of circumstances making it possible to do something' },
|
||||
{ word: 'conversation', tiles: ['con', 'ver', 'sa', 'tion'], theme: 'society', clue: 'A talk between two or more people' },
|
||||
|
||||
// Literature & Words
|
||||
{ word: 'vocabulary', tiles: ['vo', 'cab', 'ul', 'ary'], theme: 'words', clue: 'The body of words used in a particular language' },
|
||||
{ word: 'encyclopedia', tiles: ['en', 'cy', 'clo', 'pedia'], theme: 'words', clue: 'A book or set providing information on many subjects' },
|
||||
{ word: 'dictionary', tiles: ['dic', 'tion', 'ar', 'y'], theme: 'words', clue: 'A reference book on words and definitions' },
|
||||
{ word: 'manuscript', tiles: ['man', 'us', 'cr', 'ipt'], theme: 'words', clue: 'An author text that has not yet been printed' },
|
||||
{ word: 'translation', tiles: ['trans', 'la', 'ti', 'on'], theme: 'words', clue: 'The process of translating words into another language' },
|
||||
|
||||
// Travel & Geography
|
||||
{ word: 'destination', tiles: ['des', 'ti', 'na', 'tion'], theme: 'travel', clue: 'The place to which someone is going or being sent' },
|
||||
{ word: 'navigation', tiles: ['na', 'vi', 'ga', 'tion'], theme: 'travel', clue: 'The process of accurately ascertaining one position' },
|
||||
{ word: 'continental', tiles: ['con', 'ti', 'nen', 'tal'], theme: 'travel', clue: 'Forming or belonging to a continent' },
|
||||
{ word: 'expedition', tiles: ['ex', 'pe', 'di', 'tion'], theme: 'travel', clue: 'A journey undertaken by a group with a definite purpose' },
|
||||
{ word: 'exploration', tiles: ['ex', 'plo', 'ra', 'tion'], theme: 'travel', clue: 'The action of traveling in or through an unfamiliar area' },
|
||||
|
||||
// Seasons & Weather
|
||||
{ word: 'temperatures', tiles: ['tem', 'per', 'at', 'ures'], theme: 'weather', clue: 'The degrees or intensities of heat present in an area' },
|
||||
{ word: 'precipitation', tiles: ['pre', 'cip', 'ita', 'tion'], theme: 'weather', clue: 'Rain, snow, sleet, or hail that falls to the ground' },
|
||||
{ word: 'meteorology', tiles: ['me', 'teo', 'rol', 'ogy'], theme: 'weather', clue: 'The science concerned with processes of the atmosphere' },
|
||||
{ word: 'hibernation', tiles: ['hi', 'ber', 'na', 'tion'], theme: 'weather', clue: 'The condition or period of an animal spending winter asleep' },
|
||||
{ word: 'illumination', tiles: ['il', 'lum', 'ina', 'tion'], theme: 'weather', clue: 'Lighting or light provided' },
|
||||
|
||||
// Botany & Garden
|
||||
{ word: 'photosynthesis', tiles: ['pho', 'to', 'syn', 'thesis'], theme: 'plants', clue: 'Process by which green plants synthesize nutrients' },
|
||||
{ word: 'chlorophyll', tiles: ['chl', 'oro', 'ph', 'yll'], theme: 'plants', clue: 'A green pigment responsible for light absorption in plants' },
|
||||
{ word: 'horticulture', tiles: ['hor', 'ti', 'cul', 'ture'], theme: 'plants', clue: 'The art or practice of garden cultivation' },
|
||||
{ word: 'germination', tiles: ['ger', 'mi', 'na', 'tion'], theme: 'plants', clue: 'The development of a plant from a seed or spore' },
|
||||
{ word: 'cultivation', tiles: ['cul', 'ti', 'va', 'tion'], theme: 'plants', clue: 'The act of caring for and encouraging plant growth' },
|
||||
|
||||
// Wisdom & Knowledge
|
||||
{ word: 'extraordinary', tiles: ['ex', 'tra', 'ordi', 'nary'], theme: 'wisdom', clue: 'Very unusual or remarkable' },
|
||||
{ word: 'satisfaction', tiles: ['sa', 'tis', 'fac', 'tion'], theme: 'wisdom', clue: 'Fulfillment of one wishes or expectations' },
|
||||
{ word: 'anticipation', tiles: ['an', 'ti', 'cip', 'ation'], theme: 'wisdom', clue: 'The act of expecting something in advance' },
|
||||
{ word: 'consideration', tiles: ['con', 'sid', 'era', 'tion'], theme: 'wisdom', clue: 'Careful thought over a period of time' },
|
||||
{ word: 'investigation', tiles: ['in', 'ves', 'ti', 'gation'], theme: 'wisdom', clue: 'A formal inquiry or systematic examination' },
|
||||
|
||||
// Ocean & Marine
|
||||
{ word: 'oceanography', tiles: ['oce', 'ano', 'gra', 'phy'], theme: 'ocean', clue: 'The branch of science that deals with physical oceans' },
|
||||
{ word: 'submersible', tiles: ['sub', 'mer', 'si', 'ble'], theme: 'ocean', clue: 'Designed to operate completely underwater' },
|
||||
{ word: 'navigation', tiles: ['na', 'vi', 'ga', 'tion'], theme: 'ocean', clue: 'Planning and directing route of ship or craft' },
|
||||
{ word: 'constellation', tiles: ['con', 'ste', 'lla', 'tion'], theme: 'ocean', clue: 'A group of stars forming a recognizable pattern' },
|
||||
{ word: 'mediterranean', tiles: ['med', 'ite', 'rra', 'nean'], theme: 'ocean', clue: 'Of or characteristic of the Mediterranean Sea' },
|
||||
|
||||
// Human Endeavor
|
||||
{ word: 'determination', tiles: ['de', 'ter', 'mi', 'nation'], theme: 'endeavor', clue: 'Firmness of purpose; resoluteness' },
|
||||
{ word: 'perseverance', tiles: ['per', 'sev', 'er', 'ance'], theme: 'endeavor', clue: 'Persistence in doing something despite difficulty' },
|
||||
{ word: 'accomplished', tiles: ['ac', 'com', 'pli', 'shed'], theme: 'endeavor', clue: 'Highly trained or skilled in a field' },
|
||||
{ word: 'achievement', tiles: ['ach', 'ie', 've', 'ment'], theme: 'endeavor', clue: 'A thing done successfully with effort' },
|
||||
{ word: 'distinguished', tiles: ['dis', 'tin', 'gui', 'shed'], theme: 'endeavor', clue: 'Successful, well known, and respected' },
|
||||
|
||||
// Energy & Physics
|
||||
{ word: 'electricity', tiles: ['el', 'ect', 'ri', 'city'], theme: 'physics', clue: 'Form of energy from charged elementary particles' },
|
||||
{ word: 'acceleration', tiles: ['ac', 'cel', 'era', 'tion'], theme: 'physics', clue: 'The rate of change of velocity per unit time' },
|
||||
{ word: 'thermodynamic', tiles: ['the', 'rmo', 'dyn', 'amic'], theme: 'physics', clue: 'Relating to heat and its relation to work and energy' },
|
||||
{ word: 'equilibrium', tiles: ['equ', 'ili', 'bri', 'um'], theme: 'physics', clue: 'A state in which opposing forces are balanced' },
|
||||
{ word: 'radioactivity', tiles: ['rad', 'ioa', 'cti', 'vity'], theme: 'physics', clue: 'The emission of ionizing radiation from nuclei' }
|
||||
];
|
||||
|
||||
console.log('Target words pool size:', targetWordsPool.length);
|
||||
|
||||
// Generate 30 curated daily and themed puzzles
|
||||
const dailyPuzzlesDefs = [
|
||||
{
|
||||
id: '2026-10-23',
|
||||
date: '2026-10-23',
|
||||
title: 'Daily Puzzle — Oct 23, 2026',
|
||||
theme: 'Discovery & Wonder',
|
||||
difficulty: 'Normal',
|
||||
words: ['remarkable', 'unforgettable', 'photography', 'adventurous', 'inspiration']
|
||||
},
|
||||
{
|
||||
id: '2026-10-24',
|
||||
date: '2026-10-24',
|
||||
title: 'Daily Puzzle — Oct 24, 2026',
|
||||
theme: 'Cosmic Horizons',
|
||||
difficulty: 'Challenging',
|
||||
words: ['astronomy', 'gravitation', 'atmosphere', 'interstellar', 'telescopic']
|
||||
},
|
||||
{
|
||||
id: '2026-10-25',
|
||||
date: '2026-10-25',
|
||||
title: 'Daily Puzzle — Oct 25, 2026',
|
||||
theme: 'Mind & Memory',
|
||||
difficulty: 'Normal',
|
||||
words: ['imagination', 'understanding', 'psychology', 'intelligence', 'consciousness']
|
||||
},
|
||||
{
|
||||
id: '2026-10-26',
|
||||
date: '2026-10-26',
|
||||
title: 'Daily Puzzle — Oct 26, 2026',
|
||||
theme: 'Urban Pulse',
|
||||
difficulty: 'Challenging',
|
||||
words: ['architecture', 'metropolitan', 'construction', 'neighborhood', 'skyscraper']
|
||||
},
|
||||
{
|
||||
id: '2026-10-27',
|
||||
date: '2026-10-27',
|
||||
title: 'Daily Puzzle — Oct 27, 2026',
|
||||
theme: 'Harmony & Arts',
|
||||
difficulty: 'Normal',
|
||||
words: ['symphony', 'masterpiece', 'performance', 'exhibition', 'creativity']
|
||||
},
|
||||
{
|
||||
id: '2026-10-28',
|
||||
date: '2026-10-28',
|
||||
title: 'Daily Puzzle — Oct 28, 2026',
|
||||
theme: 'Digital Future',
|
||||
difficulty: 'Normal',
|
||||
words: ['technology', 'electronic', 'automation', 'innovation', 'computation']
|
||||
},
|
||||
{
|
||||
id: '2026-10-29',
|
||||
date: '2026-10-29',
|
||||
title: 'Daily Puzzle — Oct 29, 2026',
|
||||
theme: 'Celebrations',
|
||||
difficulty: 'Easy',
|
||||
words: ['celebration', 'communication', 'relationship', 'opportunity', 'conversation']
|
||||
},
|
||||
{
|
||||
id: '2026-10-30',
|
||||
date: '2026-10-30',
|
||||
title: 'Daily Puzzle — Oct 30, 2026',
|
||||
theme: 'Wild Kingdom',
|
||||
difficulty: 'Normal',
|
||||
words: ['biodiversity', 'environment', 'caterpillar', 'underwater', 'thunderstorm']
|
||||
},
|
||||
{
|
||||
id: '2026-10-31',
|
||||
date: '2026-10-31',
|
||||
title: 'Daily Puzzle — Oct 31, 2026',
|
||||
theme: 'Mysteries & Legends',
|
||||
difficulty: 'Challenging',
|
||||
words: ['mysterious', 'determination', 'perseverance', 'investigation', 'anticipation']
|
||||
},
|
||||
{
|
||||
id: '2026-10-22',
|
||||
date: '2026-10-22',
|
||||
title: 'Daily Puzzle — Oct 22, 2026',
|
||||
theme: 'Scientific Insight',
|
||||
difficulty: 'Normal',
|
||||
words: ['required', 'equivalent', 'objection', 'justification', 'mysterious']
|
||||
},
|
||||
{
|
||||
id: '2026-10-21',
|
||||
date: '2026-10-21',
|
||||
title: 'Daily Puzzle — Oct 21, 2026',
|
||||
theme: 'Wordsmith Almanac',
|
||||
difficulty: 'Normal',
|
||||
words: ['vocabulary', 'encyclopedia', 'dictionary', 'manuscript', 'translation']
|
||||
},
|
||||
{
|
||||
id: '2026-10-20',
|
||||
date: '2026-10-20',
|
||||
title: 'Daily Puzzle — Oct 20, 2026',
|
||||
theme: 'Globe Trekker',
|
||||
difficulty: 'Normal',
|
||||
words: ['destination', 'navigation', 'continental', 'expedition', 'exploration']
|
||||
},
|
||||
{
|
||||
id: '2026-10-19',
|
||||
date: '2026-10-19',
|
||||
title: 'Daily Puzzle — Oct 19, 2026',
|
||||
theme: 'Atmospheric Skies',
|
||||
difficulty: 'Challenging',
|
||||
words: ['temperatures', 'precipitation', 'meteorology', 'hibernation', 'illumination']
|
||||
},
|
||||
{
|
||||
id: '2026-10-18',
|
||||
date: '2026-10-18',
|
||||
title: 'Daily Puzzle — Oct 18, 2026',
|
||||
theme: 'Green Oasis',
|
||||
difficulty: 'Normal',
|
||||
words: ['photosynthesis', 'chlorophyll', 'horticulture', 'germination', 'cultivation']
|
||||
},
|
||||
{
|
||||
id: '2026-10-17',
|
||||
date: '2026-10-17',
|
||||
title: 'Daily Puzzle — Oct 17, 2026',
|
||||
theme: 'Grit & Glory',
|
||||
difficulty: 'Normal',
|
||||
words: ['determination', 'perseverance', 'accomplished', 'achievement', 'distinguished']
|
||||
},
|
||||
{
|
||||
id: '2026-10-16',
|
||||
date: '2026-10-16',
|
||||
title: 'Daily Puzzle — Oct 16, 2026',
|
||||
theme: 'Oceanic Depths',
|
||||
difficulty: 'Challenging',
|
||||
words: ['oceanography', 'submersible', 'constellation', 'mediterranean', 'exploration']
|
||||
},
|
||||
{
|
||||
id: '2026-10-15',
|
||||
date: '2026-10-15',
|
||||
title: 'Daily Puzzle — Oct 15, 2026',
|
||||
theme: 'Energy & Waves',
|
||||
difficulty: 'Expert',
|
||||
words: ['electricity', 'acceleration', 'thermodynamic', 'equilibrium', 'radioactivity']
|
||||
}
|
||||
];
|
||||
|
||||
// Map target words for quick lookup
|
||||
const wordMap = new Map();
|
||||
for (const item of targetWordsPool) {
|
||||
wordMap.set(item.word, item);
|
||||
}
|
||||
|
||||
const solvedPuzzles = [];
|
||||
|
||||
for (const def of dailyPuzzlesDefs) {
|
||||
const quartets = def.words.map(w => {
|
||||
const found = wordMap.get(w);
|
||||
if (!found) throw new Error('Missing word in pool: ' + w);
|
||||
return found.tiles;
|
||||
});
|
||||
|
||||
const solved = solveBoard(quartets);
|
||||
|
||||
// Add clues to target quartiles
|
||||
const quartileDetails = def.words.map(w => {
|
||||
const item = wordMap.get(w);
|
||||
return {
|
||||
word: item.word,
|
||||
tiles: item.tiles,
|
||||
clue: item.clue
|
||||
};
|
||||
});
|
||||
|
||||
solvedPuzzles.push({
|
||||
id: def.id,
|
||||
date: def.date,
|
||||
title: def.title,
|
||||
theme: def.theme,
|
||||
difficulty: def.difficulty,
|
||||
quartets,
|
||||
tiles: solved.tiles,
|
||||
targetQuartiles: solved.targetQuartiles,
|
||||
quartileDetails,
|
||||
words: solved.words,
|
||||
wordCount: solved.wordCount,
|
||||
maxPossibleScore: solved.maxPossibleScore
|
||||
});
|
||||
|
||||
console.log(`Generated: ${def.id} [${def.theme}] -> ${solved.wordCount} words, max score: ${solved.maxPossibleScore}`);
|
||||
}
|
||||
|
||||
// Write solved puzzles to src/data/puzzles.js
|
||||
const puzzlesFileContent = `// Pre-computed solved daily and themed puzzles for Quartiles
|
||||
export const CURATED_PUZZLES = ${JSON.stringify(solvedPuzzles, null, 2)};
|
||||
|
||||
export const TARGET_WORDS_POOL = ${JSON.stringify(targetWordsPool, null, 2)};
|
||||
`;
|
||||
|
||||
fs.mkdirSync('src/data', { recursive: true });
|
||||
fs.writeFileSync('src/data/puzzles.js', puzzlesFileContent, 'utf8');
|
||||
console.log('Saved src/data/puzzles.js successfully!');
|
||||
45
scripts/build-client-lexicon.mjs
Normal file
45
scripts/build-client-lexicon.mjs
Normal file
@@ -0,0 +1,45 @@
|
||||
import fs from 'node:fs';
|
||||
import wordlistEnglish from 'wordlist-english';
|
||||
|
||||
const validTwo = new Set([
|
||||
'am', 'an', 'as', 'at', 'be', 'by', 'do', 'go', 'he', 'hi',
|
||||
'if', 'in', 'is', 'it', 'me', 'my', 'no', 'of', 'oh', 'on',
|
||||
'or', 'so', 'to', 'up', 'us', 'we'
|
||||
]);
|
||||
|
||||
// Build a clean, high-frequency recognized vocabulary for client-side unlimited/custom puzzles
|
||||
const vocabulary = new Set();
|
||||
for (const word of wordlistEnglish.english) {
|
||||
const w = word.toLowerCase().trim();
|
||||
if (w.length === 2 && validTwo.has(w)) {
|
||||
vocabulary.add(w);
|
||||
} else if (w.length >= 3 && w.length <= 16 && /^[a-z]+$/.test(w)) {
|
||||
vocabulary.add(w);
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Total vocabulary words:', vocabulary.size);
|
||||
|
||||
// Pack into space-separated string or array
|
||||
const sortedWords = [...vocabulary].sort();
|
||||
const lexiconContent = `// Client-side recognized English words for solver & custom puzzles
|
||||
// Loaded as a Set for O(1) instantaneous lookup
|
||||
const RAW_LEXICON = ${JSON.stringify(sortedWords)};
|
||||
|
||||
export const DICTIONARY_SET = new Set(RAW_LEXICON);
|
||||
|
||||
// Prefix set for lightning fast tree-pruning search (1 to 6 chars)
|
||||
export const PREFIX_SET = new Set();
|
||||
for (const word of RAW_LEXICON) {
|
||||
for (let len = 1; len <= Math.min(word.length, 6); len++) {
|
||||
PREFIX_SET.add(word.slice(0, len));
|
||||
}
|
||||
}
|
||||
|
||||
export function isWordValid(word) {
|
||||
return DICTIONARY_SET.has(word.toLowerCase());
|
||||
}
|
||||
`;
|
||||
|
||||
fs.writeFileSync('src/data/lexicon.js', lexiconContent, 'utf8');
|
||||
console.log('Saved src/data/lexicon.js successfully!');
|
||||
108
scripts/solver.mjs
Normal file
108
scripts/solver.mjs
Normal file
@@ -0,0 +1,108 @@
|
||||
import fs from 'node:fs';
|
||||
import wordlistEnglish from 'wordlist-english';
|
||||
|
||||
// Valid 2-letter English words accepted in standard games
|
||||
const validTwo = new Set([
|
||||
'am', 'an', 'as', 'at', 'be', 'by', 'do', 'go', 'he', 'hi',
|
||||
'if', 'in', 'is', 'it', 'me', 'my', 'no', 'of', 'oh', 'on',
|
||||
'or', 'so', 'to', 'up', 'us', 'we'
|
||||
]);
|
||||
|
||||
// Build standard clean dictionary (excluding vulgarities, numbers, non-alpha)
|
||||
const cleanWordSet = new Set();
|
||||
for (const raw of wordlistEnglish.english) {
|
||||
const w = raw.toLowerCase().trim();
|
||||
if (w.length === 2 && validTwo.has(w)) {
|
||||
cleanWordSet.add(w);
|
||||
} else if (w.length >= 3 && w.length <= 16 && /^[a-z]+$/.test(w)) {
|
||||
cleanWordSet.add(w);
|
||||
}
|
||||
}
|
||||
|
||||
// Build prefix set for super fast solver pruning (up to 6 letters)
|
||||
const prefixSet = new Set();
|
||||
for (const word of cleanWordSet) {
|
||||
for (let len = 1; len <= Math.min(word.length, 6); len++) {
|
||||
prefixSet.add(word.slice(0, len));
|
||||
}
|
||||
}
|
||||
|
||||
// Function to solve a 20-tile board and return all valid words and paths
|
||||
export function solveBoard(quartets) {
|
||||
const tiles = quartets.flat();
|
||||
const foundMap = new Map();
|
||||
|
||||
function search(prefix, usedIndices) {
|
||||
if (prefix.length > 0) {
|
||||
const checkLen = Math.min(prefix.length, 6);
|
||||
if (!prefixSet.has(prefix.slice(0, checkLen))) return;
|
||||
}
|
||||
|
||||
if (prefix.length >= 2 && cleanWordSet.has(prefix)) {
|
||||
if (!foundMap.has(prefix)) {
|
||||
foundMap.set(prefix, [...usedIndices]);
|
||||
}
|
||||
}
|
||||
if (usedIndices.length >= 4) return;
|
||||
|
||||
for (let i = 0; i < tiles.length; i++) {
|
||||
if (usedIndices.includes(i)) continue;
|
||||
usedIndices.push(i);
|
||||
search(prefix + tiles[i], usedIndices);
|
||||
usedIndices.pop();
|
||||
}
|
||||
}
|
||||
|
||||
search('', []);
|
||||
|
||||
const quartilesList = quartets.map(q => q.join(''));
|
||||
const quartileSet = new Set(quartilesList);
|
||||
|
||||
const words = [];
|
||||
let totalScore = 0;
|
||||
let quartileCount = 0;
|
||||
|
||||
for (const [word, path] of foundMap.entries()) {
|
||||
const tileSegments = path.map(idx => tiles[idx]);
|
||||
const tileCount = path.length;
|
||||
let points = tileCount === 4 ? 8 : tileCount === 3 ? 4 : tileCount;
|
||||
const isTargetQuartile = quartileSet.has(word);
|
||||
const isQuartile = tileCount === 4;
|
||||
|
||||
if (isQuartile) quartileCount++;
|
||||
totalScore += points;
|
||||
|
||||
words.push({
|
||||
word,
|
||||
points,
|
||||
tileCount,
|
||||
tileIndices: path,
|
||||
tileSegments,
|
||||
isTargetQuartile,
|
||||
isQuartile
|
||||
});
|
||||
}
|
||||
|
||||
// Add 40 bonus points for finding all 5 quartiles
|
||||
const maxPossibleScore = totalScore + 40;
|
||||
|
||||
// Sort words: Quartiles first, then by points descending, then alphabetically
|
||||
words.sort((a, b) => {
|
||||
if (a.isTargetQuartile !== b.isTargetQuartile) return a.isTargetQuartile ? -1 : 1;
|
||||
if (b.points !== a.points) return b.points - a.points;
|
||||
return a.word.localeCompare(b.word);
|
||||
});
|
||||
|
||||
return {
|
||||
tiles,
|
||||
quartets,
|
||||
targetQuartiles: quartilesList,
|
||||
words,
|
||||
wordCount: words.length,
|
||||
quartileCount: 5,
|
||||
totalBaseScore: totalScore,
|
||||
maxPossibleScore
|
||||
};
|
||||
}
|
||||
|
||||
console.log('Solver module ready. Clean words count:', cleanWordSet.size);
|
||||
47
src/components/ActionBar.js
Normal file
47
src/components/ActionBar.js
Normal file
@@ -0,0 +1,47 @@
|
||||
import { sound } from '../engine/audio.js';
|
||||
|
||||
export function createActionBar({ onShuffle, onSortAlpha, onToggleLock, onGetHint }) {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'action-bar';
|
||||
|
||||
function render(state) {
|
||||
const isLocked = state.lockQuartiles;
|
||||
|
||||
container.innerHTML = `
|
||||
<button class="btn-action" id="btn-action-shuffle" title="Shuffle unlocked tiles">
|
||||
<span class="action-icon">🔀</span>
|
||||
<span>Shuffle</span>
|
||||
</button>
|
||||
|
||||
<button class="btn-action" id="btn-action-sort" title="Sort tiles alphabetically A-Z">
|
||||
<span class="action-icon">🔤</span>
|
||||
<span>Sort A-Z</span>
|
||||
</button>
|
||||
|
||||
<button class="btn-action ${isLocked ? 'active' : ''}" id="btn-action-lock" title="${isLocked ? 'Unlock Quartiles to shuffle freely' : 'Lock found Quartiles at top rows'}">
|
||||
<span class="action-icon">${isLocked ? '🔒' : '🔓'}</span>
|
||||
<span>${isLocked ? 'Locked' : 'Unlocked'}</span>
|
||||
</button>
|
||||
|
||||
<button class="btn-action" id="btn-action-hint" title="Get a hint for an unfound word">
|
||||
<span class="action-icon">💡</span>
|
||||
<span>Hint</span>
|
||||
</button>
|
||||
`;
|
||||
|
||||
container.querySelector('#btn-action-shuffle')?.addEventListener('click', () => {
|
||||
sound.playShuffle();
|
||||
onShuffle();
|
||||
});
|
||||
|
||||
container.querySelector('#btn-action-sort')?.addEventListener('click', () => {
|
||||
sound.playShuffle();
|
||||
onSortAlpha();
|
||||
});
|
||||
|
||||
container.querySelector('#btn-action-lock')?.addEventListener('click', onToggleLock);
|
||||
container.querySelector('#btn-action-hint')?.addEventListener('click', onGetHint);
|
||||
}
|
||||
|
||||
return { element: container, render };
|
||||
}
|
||||
64
src/components/Header.js
Normal file
64
src/components/Header.js
Normal file
@@ -0,0 +1,64 @@
|
||||
import { sound } from '../engine/audio.js';
|
||||
|
||||
export function createHeader({
|
||||
onOpenCalendar,
|
||||
onOpenHowToPlay,
|
||||
onOpenStats,
|
||||
onOpenCustomBuilder,
|
||||
onOpenSettings,
|
||||
onNewRandomPuzzle
|
||||
}) {
|
||||
const header = document.createElement('header');
|
||||
header.className = 'app-header';
|
||||
|
||||
function render(state) {
|
||||
const puzzle = state.currentPuzzle;
|
||||
const isMuted = sound.isMuted();
|
||||
|
||||
header.innerHTML = `
|
||||
<div class="header-brand">
|
||||
<div>
|
||||
<h1 class="app-title">
|
||||
QUARTILES
|
||||
<span class="title-badge">DAILY</span>
|
||||
</h1>
|
||||
<div class="header-date-badge">${puzzle ? puzzle.title : 'Word Game'}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-controls">
|
||||
<button class="btn-header-icon" id="btn-sound-toggle" title="${isMuted ? 'Unmute Sound' : 'Mute Sound'}">
|
||||
${isMuted ? '🔇' : '🔊'}
|
||||
</button>
|
||||
<button class="btn-header-icon" id="btn-random-puzzle" title="New Random Unlimited Puzzle">
|
||||
🎲
|
||||
</button>
|
||||
<button class="btn-header-icon" id="btn-open-calendar" title="Puzzles Archive">
|
||||
📅
|
||||
</button>
|
||||
<button class="btn-header-icon" id="btn-open-help" title="How to Play">
|
||||
❓
|
||||
</button>
|
||||
<button class="btn-header-icon" id="btn-open-stats" title="Statistics">
|
||||
🏆
|
||||
</button>
|
||||
<button class="btn-header-icon" id="btn-open-settings" title="Settings">
|
||||
⚙️
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Event listeners
|
||||
header.querySelector('#btn-sound-toggle')?.addEventListener('click', () => {
|
||||
const nowMuted = sound.toggleMute();
|
||||
header.querySelector('#btn-sound-toggle').innerHTML = nowMuted ? '🔇' : '🔊';
|
||||
});
|
||||
|
||||
header.querySelector('#btn-random-puzzle')?.addEventListener('click', onNewRandomPuzzle);
|
||||
header.querySelector('#btn-open-calendar')?.addEventListener('click', onOpenCalendar);
|
||||
header.querySelector('#btn-open-help')?.addEventListener('click', onOpenHowToPlay);
|
||||
header.querySelector('#btn-open-stats')?.addEventListener('click', onOpenStats);
|
||||
header.querySelector('#btn-open-settings')?.addEventListener('click', onOpenSettings);
|
||||
}
|
||||
|
||||
return { element: header, render };
|
||||
}
|
||||
405
src/components/Modals.js
Normal file
405
src/components/Modals.js
Normal file
@@ -0,0 +1,405 @@
|
||||
import { CURATED_PUZZLES } from '../data/puzzles.js';
|
||||
import { sound } from '../engine/audio.js';
|
||||
|
||||
export function createModals({ onSelectPuzzle, onCustomPuzzleCreated, onResetPuzzle }) {
|
||||
const container = document.createElement('div');
|
||||
container.id = 'app-modals-container';
|
||||
|
||||
let activeModal = null; // 'help', 'calendar', 'builder', 'stats', 'settings'
|
||||
|
||||
function render(state) {
|
||||
if (!activeModal) {
|
||||
container.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="modal-backdrop open" id="generic-modal-backdrop">
|
||||
<div class="modal-sheet" style="max-height: 85vh;">
|
||||
<div class="sheet-handle"></div>
|
||||
<div class="sheet-header">
|
||||
<div class="sheet-title">${getModalTitle(activeModal)}</div>
|
||||
<button class="btn-close-sheet" id="btn-close-generic-modal">✕</button>
|
||||
</div>
|
||||
<div class="sheet-body" style="padding: 16px 20px 24px;">
|
||||
${getModalBodyHtml(activeModal, state)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Event listeners
|
||||
container.querySelector('#btn-close-generic-modal')?.addEventListener('click', close);
|
||||
container.querySelector('#generic-modal-backdrop')?.addEventListener('click', e => {
|
||||
if (e.target.id === 'generic-modal-backdrop') {
|
||||
close();
|
||||
}
|
||||
});
|
||||
|
||||
wireModalEvents(activeModal, state);
|
||||
}
|
||||
|
||||
function getModalTitle(type) {
|
||||
switch (type) {
|
||||
case 'help': return 'How to Play Quartiles';
|
||||
case 'calendar': return 'Daily Puzzles & Archives';
|
||||
case 'builder': return 'Create Custom Puzzle';
|
||||
case 'stats': return 'Player Statistics';
|
||||
case 'settings': return 'Game Settings';
|
||||
default: return '';
|
||||
}
|
||||
}
|
||||
|
||||
function getModalBodyHtml(type, state) {
|
||||
if (type === 'help') {
|
||||
return `
|
||||
<div style="display:flex; flex-direction:column; gap:16px; font-size:0.92rem; line-height:1.5;">
|
||||
<div>
|
||||
<h3 style="font-size:1.05rem; margin-bottom:4px; color:var(--text-primary);">🎯 The Objective</h3>
|
||||
<p style="color:var(--text-secondary);">Combine letter tiles to form valid English words, find the 5 hidden <strong>Quartiles</strong>, and score at least <strong>100 points</strong> to achieve the <strong>Expert</strong> rank!</p>
|
||||
</div>
|
||||
|
||||
<div style="background:var(--bg-primary); padding:12px; border-radius:var(--radius-md); border:1px solid var(--border-subtle);">
|
||||
<h3 style="font-size:1rem; margin-bottom:8px; color:var(--text-primary);">⭐ Points System</h3>
|
||||
<div style="display:grid; grid-template-columns: repeat(2, 1fr); gap:8px;">
|
||||
<div style="background:var(--bg-secondary); padding:8px 12px; border-radius:8px;">
|
||||
<strong>1 Tile:</strong> 1 point
|
||||
</div>
|
||||
<div style="background:var(--bg-secondary); padding:8px 12px; border-radius:8px;">
|
||||
<strong>2 Tiles:</strong> 2 points
|
||||
</div>
|
||||
<div style="background:var(--bg-secondary); padding:8px 12px; border-radius:8px;">
|
||||
<strong>3 Tiles:</strong> 4 points
|
||||
</div>
|
||||
<div style="background:var(--bg-secondary); padding:8px 12px; border-radius:8px; border:1px solid var(--accent-quartile);">
|
||||
<strong style="color:var(--accent-quartile);">4 Tiles (Quartile):</strong> 8 points
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style="font-size:1.05rem; margin-bottom:4px; color:var(--accent-quartile);">✨ The 40-Point Bonus</h3>
|
||||
<p style="color:var(--text-secondary);">Every puzzle has <strong>5 target Quartiles</strong> (4-tile words). Finding all 5 unlocks an instant <strong>40-point completion bonus</strong>!</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 style="font-size:1.05rem; margin-bottom:4px; color:var(--text-primary);">🔤 Rules & Gameplay</h3>
|
||||
<ul style="padding-left:18px; color:var(--text-secondary); display:flex; flex-direction:column; gap:4px;">
|
||||
<li>Words can be 1, 2, 3, or 4 tiles long.</li>
|
||||
<li>Each tile contains 2 to 4 letters.</li>
|
||||
<li>Tiles stay on the board and can be reused for other words.</li>
|
||||
<li>Use <strong>Shuffle</strong> to mix tiles, or <strong>Sort A-Z</strong> to alphabetize.</li>
|
||||
<li>Enable <strong>Lock Quartiles</strong> to pin solved 4-tile words at the top.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (type === 'calendar') {
|
||||
return `
|
||||
<div style="display:flex; flex-direction:column; gap:12px;">
|
||||
<p style="font-size:0.88rem; color:var(--text-secondary);">
|
||||
Choose from the official daily puzzles or themed challenge packs:
|
||||
</p>
|
||||
<div class="puzzles-list-grid">
|
||||
${CURATED_PUZZLES.map(p => {
|
||||
const isCurrent = state.currentPuzzle && state.currentPuzzle.id === p.id;
|
||||
const saved = localStorage.getItem(`quartiles_save_${p.id}`);
|
||||
let progressBadge = '';
|
||||
if (saved) {
|
||||
try {
|
||||
const parsed = JSON.parse(saved);
|
||||
if (parsed.score >= 100) {
|
||||
progressBadge = '<span style="font-size:0.72rem; color:#10b981; font-weight:700;">🏆 Expert</span>';
|
||||
} else if (parsed.score > 0) {
|
||||
progressBadge = `<span style="font-size:0.72rem; color:var(--accent-quartile); font-weight:700;">${parsed.score} pts</span>`;
|
||||
}
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
return `
|
||||
<button class="puzzle-card-select ${isCurrent ? 'active' : ''}" data-id="${p.id}">
|
||||
<div style="font-weight:700; font-size:0.92rem; color:var(--text-primary);">${p.date || p.id}</div>
|
||||
<div style="font-size:0.78rem; color:var(--text-secondary); margin:2px 0 4px;">${p.theme}</div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:center;">
|
||||
<span style="font-size:0.72rem; background:var(--bg-tertiary); padding:1px 6px; border-radius:4px;">${p.difficulty}</span>
|
||||
${progressBadge}
|
||||
</div>
|
||||
</button>
|
||||
`;
|
||||
}).join('')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (type === 'builder') {
|
||||
return `
|
||||
<div style="display:flex; flex-direction:column; gap:14px;">
|
||||
<p style="font-size:0.88rem; color:var(--text-secondary);">
|
||||
Create your own Quartiles puzzle! Enter <strong>5 four-tile words</strong> (each tile must be 2 to 4 letters):
|
||||
</p>
|
||||
|
||||
<div class="custom-builder-form" id="custom-builder-form">
|
||||
<div style="font-size:0.8rem; font-weight:700; color:var(--text-secondary);">Quartile #1</div>
|
||||
<div class="custom-quartet-row">
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="UN" value="UN" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="FOR" value="FOR" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="GET" value="GET" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="TABLE" value="TABLE" />
|
||||
</div>
|
||||
|
||||
<div style="font-size:0.8rem; font-weight:700; color:var(--text-secondary);">Quartile #2</div>
|
||||
<div class="custom-quartet-row">
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="PHO" value="PHO" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="TO" value="TO" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="GRA" value="GRA" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="PHY" value="PHY" />
|
||||
</div>
|
||||
|
||||
<div style="font-size:0.8rem; font-weight:700; color:var(--text-secondary);">Quartile #3</div>
|
||||
<div class="custom-quartet-row">
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="AD" value="AD" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="VEN" value="VEN" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="TUR" value="TUR" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="OUS" value="OUS" />
|
||||
</div>
|
||||
|
||||
<div style="font-size:0.8rem; font-weight:700; color:var(--text-secondary);">Quartile #4</div>
|
||||
<div class="custom-quartet-row">
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="IN" value="IN" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="SPI" value="SPI" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="RA" value="RA" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="TION" value="TION" />
|
||||
</div>
|
||||
|
||||
<div style="font-size:0.8rem; font-weight:700; color:var(--text-secondary);">Quartile #5</div>
|
||||
<div class="custom-quartet-row">
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="RE" value="RE" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="MAR" value="MAR" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="KA" value="KA" />
|
||||
<input class="custom-quartet-input" maxlength="4" placeholder="BLE" value="BLE" />
|
||||
</div>
|
||||
|
||||
<div style="margin-top:6px;">
|
||||
<input id="custom-title-input" type="text" placeholder="Puzzle Title (e.g. Maya's Word Challenge)"
|
||||
style="width:100%; height:38px; padding:0 12px; border-radius:8px; border:1px solid var(--border-color); background:var(--bg-primary); color:var(--text-primary); font-size:0.9rem;" />
|
||||
</div>
|
||||
|
||||
<button class="btn-primary-modal" id="btn-submit-custom-puzzle" style="margin-top:8px;">
|
||||
Build & Play Puzzle
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (type === 'stats') {
|
||||
const stats = state.getStats();
|
||||
return `
|
||||
<div style="display:flex; flex-direction:column; gap:16px;">
|
||||
<div style="display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; text-align:center;">
|
||||
<div style="background:var(--bg-primary); padding:14px 8px; border-radius:var(--radius-md);">
|
||||
<div style="font-size:1.8rem; font-weight:800; color:var(--accent-submit);">${stats.totalWordsFound}</div>
|
||||
<div style="font-size:0.75rem; color:var(--text-secondary); text-transform:uppercase; font-weight:600;">Words Found</div>
|
||||
</div>
|
||||
<div style="background:var(--bg-primary); padding:14px 8px; border-radius:var(--radius-md);">
|
||||
<div style="font-size:1.8rem; font-weight:800; color:var(--accent-quartile);">${stats.expertCount}</div>
|
||||
<div style="font-size:0.75rem; color:var(--text-secondary); text-transform:uppercase; font-weight:600;">Expert Ranks</div>
|
||||
</div>
|
||||
<div style="background:var(--bg-primary); padding:14px 8px; border-radius:var(--radius-md);">
|
||||
<div style="font-size:1.8rem; font-weight:800; color:var(--accent-blue);">${stats.perfectCount}</div>
|
||||
<div style="font-size:0.75rem; color:var(--text-secondary); text-transform:uppercase; font-weight:600;">Perfect Clears</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="background:var(--bg-primary); padding:14px; border-radius:var(--radius-md); font-size:0.88rem;">
|
||||
<div style="font-weight:700; margin-bottom:6px; color:var(--text-primary);">Current Puzzle Progress</div>
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:4px;">
|
||||
<span style="color:var(--text-secondary);">Score:</span>
|
||||
<strong>${state.score} pts</strong>
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:4px;">
|
||||
<span style="color:var(--text-secondary);">Quartiles:</span>
|
||||
<strong>${state.getTargetQuartilesSolvedCount()} / 5</strong>
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between;">
|
||||
<span style="color:var(--text-secondary);">Current Rank:</span>
|
||||
<strong>${state.getRank().current.badge} ${state.getRank().current.name}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (type === 'settings') {
|
||||
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
||||
const isMuted = sound.isMuted();
|
||||
const lockSetting = state.lockQuartiles;
|
||||
|
||||
return `
|
||||
<div style="display:flex; flex-direction:column; gap:16px; font-size:0.92rem;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-subtle);">
|
||||
<div>
|
||||
<div style="font-weight:600; color:var(--text-primary);">Dark Theme</div>
|
||||
<div style="font-size:0.78rem; color:var(--text-secondary);">Toggle sleek dark appearance</div>
|
||||
</div>
|
||||
<button id="setting-toggle-theme" style="padding:6px 14px; border-radius:var(--radius-full); background:var(--bg-tertiary); font-weight:600;">
|
||||
${isDark ? '🌙 Dark' : '☀️ Light'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-subtle);">
|
||||
<div>
|
||||
<div style="font-weight:600; color:var(--text-primary);">Sound Effects</div>
|
||||
<div style="font-size:0.78rem; color:var(--text-secondary);">Tactile audio feedback and chimes</div>
|
||||
</div>
|
||||
<button id="setting-toggle-sound" style="padding:6px 14px; border-radius:var(--radius-full); background:var(--bg-tertiary); font-weight:600;">
|
||||
${isMuted ? '🔇 Off' : '🔊 On'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-subtle);">
|
||||
<div>
|
||||
<div style="font-weight:600; color:var(--text-primary);">Auto-Lock Quartiles</div>
|
||||
<div style="font-size:0.78rem; color:var(--text-secondary);">Lock completed Quartiles at top rows</div>
|
||||
</div>
|
||||
<button id="setting-toggle-lock" style="padding:6px 14px; border-radius:var(--radius-full); background:var(--bg-tertiary); font-weight:600;">
|
||||
${lockSetting ? '🔒 Locked' : '🔓 Off'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style="padding-top:10px;">
|
||||
<button id="setting-reset-puzzle" style="width:100%; height:40px; border-radius:var(--radius-md); background:rgba(239, 68, 68, 0.1); color:var(--accent-danger); font-weight:700;">
|
||||
Reset Current Puzzle Progress
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
|
||||
function wireModalEvents(type, state) {
|
||||
if (type === 'calendar') {
|
||||
const cards = container.querySelectorAll('.puzzle-card-select');
|
||||
cards.forEach(card => {
|
||||
card.addEventListener('click', () => {
|
||||
const id = card.getAttribute('data-id');
|
||||
onSelectPuzzle(id);
|
||||
close();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (type === 'builder') {
|
||||
const submitBtn = container.querySelector('#btn-submit-custom-puzzle');
|
||||
submitBtn?.addEventListener('click', async () => {
|
||||
const rows = container.querySelectorAll('.custom-quartet-row');
|
||||
const quartets = [];
|
||||
let hasError = false;
|
||||
|
||||
rows.forEach((row, rIdx) => {
|
||||
const inputs = row.querySelectorAll('.custom-quartet-input');
|
||||
const quartet = [];
|
||||
inputs.forEach(input => {
|
||||
const val = input.value.trim().toLowerCase();
|
||||
if (val.length < 2 || val.length > 4 || !/^[a-z]+$/.test(val)) {
|
||||
state.notifyToast(`Tile "${val.toUpperCase()}" in Quartile #${rIdx + 1} must be 2 to 4 letters!`, 'warning', 3500);
|
||||
input.style.borderColor = 'var(--accent-danger)';
|
||||
hasError = true;
|
||||
} else {
|
||||
input.style.borderColor = '';
|
||||
}
|
||||
quartet.push(val);
|
||||
});
|
||||
quartets.push(quartet);
|
||||
});
|
||||
|
||||
if (hasError) return;
|
||||
|
||||
const titleInput = container.querySelector('#custom-title-input');
|
||||
const title = (titleInput && titleInput.value.trim()) || 'Custom Community Puzzle';
|
||||
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.innerText = 'Analyzing & Building...';
|
||||
|
||||
try {
|
||||
const { createCustomPuzzle, encodePuzzleToHash } = await import('../engine/generator.js');
|
||||
const customPuzzle = createCustomPuzzle(quartets, title);
|
||||
onCustomPuzzleCreated(customPuzzle);
|
||||
|
||||
// Update URL hash with encoded puzzle
|
||||
const hash = encodePuzzleToHash(quartets, title);
|
||||
window.location.hash = `puzzle=${hash}`;
|
||||
|
||||
close();
|
||||
} catch (err) {
|
||||
state.notifyToast('Error creating puzzle: ' + err.message, 'error', 4000);
|
||||
submitBtn.disabled = false;
|
||||
submitBtn.innerText = 'Build & Play Puzzle';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
if (type === 'settings') {
|
||||
container.querySelector('#setting-toggle-theme')?.addEventListener('click', () => {
|
||||
const current = document.documentElement.getAttribute('data-theme');
|
||||
const nextTheme = current === 'dark' ? 'light' : 'dark';
|
||||
document.documentElement.setAttribute('data-theme', nextTheme);
|
||||
localStorage.setItem('quartiles_theme', nextTheme);
|
||||
render(state);
|
||||
});
|
||||
|
||||
container.querySelector('#setting-toggle-sound')?.addEventListener('click', () => {
|
||||
sound.toggleMute();
|
||||
render(state);
|
||||
});
|
||||
|
||||
container.querySelector('#setting-toggle-lock')?.addEventListener('click', () => {
|
||||
state.toggleLockQuartiles();
|
||||
render(state);
|
||||
});
|
||||
|
||||
const resetBtn = container.querySelector('#setting-reset-puzzle');
|
||||
if (resetBtn) {
|
||||
let isConfirming = false;
|
||||
let timer = null;
|
||||
resetBtn.addEventListener('click', () => {
|
||||
if (!isConfirming) {
|
||||
isConfirming = true;
|
||||
resetBtn.innerText = 'Tap again to confirm reset';
|
||||
resetBtn.style.background = 'var(--accent-danger)';
|
||||
resetBtn.style.color = '#ffffff';
|
||||
timer = setTimeout(() => {
|
||||
isConfirming = false;
|
||||
if (resetBtn) {
|
||||
resetBtn.innerText = 'Reset Current Puzzle Progress';
|
||||
resetBtn.style.background = 'rgba(239, 68, 68, 0.1)';
|
||||
resetBtn.style.color = 'var(--accent-danger)';
|
||||
}
|
||||
}, 3500);
|
||||
} else {
|
||||
clearTimeout(timer);
|
||||
onResetPuzzle();
|
||||
close();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function open(modalType, state) {
|
||||
activeModal = modalType;
|
||||
render(state);
|
||||
}
|
||||
|
||||
function close() {
|
||||
activeModal = null;
|
||||
container.innerHTML = '';
|
||||
}
|
||||
|
||||
return { element: container, render, open, close };
|
||||
}
|
||||
60
src/components/ScoreRankBar.js
Normal file
60
src/components/ScoreRankBar.js
Normal file
@@ -0,0 +1,60 @@
|
||||
export function createScoreRankBar({ onOpenWordsDrawer }) {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'score-rank-container';
|
||||
|
||||
function render(state) {
|
||||
const rankInfo = state.getRank();
|
||||
const quartilesSolved = state.getTargetQuartilesSolvedCount();
|
||||
const totalWords = state.currentPuzzle ? state.currentPuzzle.wordCount : 0;
|
||||
const foundWordsCount = state.foundWords.size;
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="score-rank-card">
|
||||
<div class="score-rank-top">
|
||||
<div class="score-display">
|
||||
<span class="score-num" id="current-score-num">${state.score}</span>
|
||||
<span class="score-label">Points</span>
|
||||
</div>
|
||||
<div class="rank-badge-wrap">
|
||||
<div class="rank-pill ${rankInfo.isExpert ? 'expert' : ''}">
|
||||
<span>${rankInfo.current.badge}</span>
|
||||
<span>${rankInfo.current.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress-bar-container" title="${rankInfo.next ? `Next: ${rankInfo.next.name} in ${rankInfo.pointsToNext} pts` : 'Top Rank!'}">
|
||||
<div class="progress-bar-fill ${rankInfo.isExpert ? 'expert' : ''}" style="width: ${rankInfo.progressPercent}%"></div>
|
||||
</div>
|
||||
|
||||
<div class="quartiles-indicator-row">
|
||||
<div class="quartiles-counter">
|
||||
<span>Quartiles:</span>
|
||||
<strong>${quartilesSolved} / 5</strong>
|
||||
${state.quartilesBonusAwarded ? '<span class="quartile-bonus-badge">+40 BONUS</span>' : ''}
|
||||
</div>
|
||||
<div class="quartiles-segments">
|
||||
${[0, 1, 2, 3, 4]
|
||||
.map(i => `<div class="quartile-segment-pip ${i < quartilesSolved ? 'solved' : ''}"></div>`)
|
||||
.join('')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="words-found-strip">
|
||||
<button class="btn-words-drawer" id="btn-words-found-toggle">
|
||||
<span>Words Found</span>
|
||||
<span class="badge-count">${foundWordsCount} ${rankInfo.isExpert ? `/ ${totalWords}` : ''}</span>
|
||||
<span style="font-size: 0.75rem;">▾</span>
|
||||
</button>
|
||||
<div style="font-size: 0.8rem; color: var(--text-secondary); font-weight: 500;">
|
||||
${rankInfo.next ? `Next rank in <strong>${rankInfo.pointsToNext}</strong> pts` : '🌟 Expert Reached!'}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
container.querySelector('#btn-words-found-toggle')?.addEventListener('click', onOpenWordsDrawer);
|
||||
}
|
||||
|
||||
return { element: container, render };
|
||||
}
|
||||
52
src/components/TileGrid.js
Normal file
52
src/components/TileGrid.js
Normal file
@@ -0,0 +1,52 @@
|
||||
import { sound } from '../engine/audio.js';
|
||||
|
||||
export function createTileGrid({ onTileSelected }) {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'board-container';
|
||||
|
||||
function render(state) {
|
||||
const activeSet = new Set(state.activeTileIds);
|
||||
|
||||
container.innerHTML = `
|
||||
<div class="tiles-grid" id="main-tiles-grid">
|
||||
${state.boardTiles
|
||||
.map(tile => {
|
||||
const isSelected = activeSet.has(tile.id);
|
||||
const isLocked = tile.isLocked;
|
||||
|
||||
return `
|
||||
<button
|
||||
class="board-tile ${isSelected ? 'selected' : ''} ${isLocked ? 'locked' : ''}"
|
||||
data-id="${tile.id}"
|
||||
aria-label="Tile ${tile.text}"
|
||||
>
|
||||
${tile.text}
|
||||
</button>
|
||||
`;
|
||||
})
|
||||
.join('')}
|
||||
</div>
|
||||
`;
|
||||
|
||||
const tiles = container.querySelectorAll('.board-tile');
|
||||
tiles.forEach(tileBtn => {
|
||||
const id = parseInt(tileBtn.getAttribute('data-id'), 10);
|
||||
tileBtn.addEventListener('click', () => {
|
||||
sound.playTileClick();
|
||||
onTileSelected(id);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function triggerShuffleAnimation() {
|
||||
const tiles = container.querySelectorAll('.board-tile:not(.locked)');
|
||||
tiles.forEach((tile, index) => {
|
||||
setTimeout(() => {
|
||||
tile.classList.add('flipping');
|
||||
setTimeout(() => tile.classList.remove('flipping'), 400);
|
||||
}, (index % 4) * 40);
|
||||
});
|
||||
}
|
||||
|
||||
return { element: container, render, triggerShuffleAnimation };
|
||||
}
|
||||
35
src/components/Toast.js
Normal file
35
src/components/Toast.js
Normal file
@@ -0,0 +1,35 @@
|
||||
export function createToastContainer() {
|
||||
const container = document.createElement('div');
|
||||
container.className = 'toast-container';
|
||||
|
||||
function show({ message, type = 'info', duration = 2500 }) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = `toast toast-${type}`;
|
||||
|
||||
let icon = 'ℹ️';
|
||||
if (type === 'success') icon = '✓';
|
||||
if (type === 'quartile') icon = '⭐';
|
||||
if (type === 'warning') icon = '⚠️';
|
||||
if (type === 'error') icon = '✕';
|
||||
|
||||
toast.innerHTML = `
|
||||
<span>${icon}</span>
|
||||
<span>${message}</span>
|
||||
`;
|
||||
|
||||
container.appendChild(toast);
|
||||
|
||||
setTimeout(() => {
|
||||
toast.style.opacity = '0';
|
||||
toast.style.transform = 'scale(0.85) translateY(-10px)';
|
||||
toast.style.transition = 'all 0.25s ease';
|
||||
setTimeout(() => {
|
||||
if (toast.parentNode) {
|
||||
toast.parentNode.removeChild(toast);
|
||||
}
|
||||
}, 260);
|
||||
}, duration);
|
||||
}
|
||||
|
||||
return { element: container, show };
|
||||
}
|
||||
159
src/components/WordBuilder.js
Normal file
159
src/components/WordBuilder.js
Normal file
@@ -0,0 +1,159 @@
|
||||
import { sound } from '../engine/audio.js';
|
||||
|
||||
export function createWordBuilder({ onTileRemoved, onTilesReordered, onSubmitWord, onClearWord, onBackspaceWord }) {
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'word-builder-wrapper';
|
||||
|
||||
let draggedIndex = null;
|
||||
let touchStartX = 0;
|
||||
let touchMoved = false;
|
||||
|
||||
function render(state) {
|
||||
const hasTiles = state.activeTileIds.length > 0;
|
||||
const tileObjects = state.activeTileIds.map(id => state.boardTiles.find(t => t.id === id)).filter(Boolean);
|
||||
|
||||
wrapper.innerHTML = `
|
||||
<div class="word-builder ${hasTiles ? 'has-tiles' : ''}" id="active-word-builder">
|
||||
<div class="active-tiles-container" id="active-tiles-tray">
|
||||
${
|
||||
hasTiles
|
||||
? tileObjects
|
||||
.map(
|
||||
(tile, idx) => `
|
||||
<div class="active-tile-chip" data-idx="${idx}" draggable="true" title="Tap to remove or drag to reorder">
|
||||
<span>${tile.text}</span>
|
||||
<span class="remove-icon">✕</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join('')
|
||||
: `<span class="builder-placeholder">Tap tiles below to build a word</span>`
|
||||
}
|
||||
</div>
|
||||
<div class="builder-actions">
|
||||
<button class="btn-icon-tray" id="btn-builder-clear" title="Clear all tiles" ${!hasTiles ? 'style="opacity:0.3;pointer-events:none;"' : ''}>
|
||||
✕
|
||||
</button>
|
||||
<button class="btn-icon-tray" id="btn-builder-backspace" title="Remove last tile" ${!hasTiles ? 'style="opacity:0.3;pointer-events:none;"' : ''}>
|
||||
⌫
|
||||
</button>
|
||||
<button class="btn-submit-tray" id="btn-builder-submit" ${!hasTiles ? 'disabled' : ''}>
|
||||
<span>✓</span>
|
||||
<span>ENTER</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Event listeners for active chips
|
||||
const chips = wrapper.querySelectorAll('.active-tile-chip');
|
||||
chips.forEach(chip => {
|
||||
const idx = parseInt(chip.getAttribute('data-idx'), 10);
|
||||
|
||||
// Tap chip to remove (only if not dragged)
|
||||
chip.addEventListener('click', e => {
|
||||
if (!touchMoved) {
|
||||
sound.playTileRemove();
|
||||
onTileRemoved(idx);
|
||||
}
|
||||
});
|
||||
|
||||
// Desktop HTML5 drag and drop
|
||||
chip.addEventListener('dragstart', e => {
|
||||
draggedIndex = idx;
|
||||
chip.classList.add('dragging');
|
||||
e.dataTransfer.effectAllowed = 'move';
|
||||
});
|
||||
|
||||
chip.addEventListener('dragend', () => {
|
||||
chip.classList.remove('dragging');
|
||||
chips.forEach(c => c.classList.remove('drag-over'));
|
||||
});
|
||||
|
||||
chip.addEventListener('dragover', e => {
|
||||
e.preventDefault();
|
||||
e.dataTransfer.dropEffect = 'move';
|
||||
chip.classList.add('drag-over');
|
||||
});
|
||||
|
||||
chip.addEventListener('dragleave', () => {
|
||||
chip.classList.remove('drag-over');
|
||||
});
|
||||
|
||||
chip.addEventListener('drop', e => {
|
||||
e.preventDefault();
|
||||
chip.classList.remove('drag-over');
|
||||
if (draggedIndex !== null && draggedIndex !== idx) {
|
||||
onTilesReordered(draggedIndex, idx);
|
||||
}
|
||||
draggedIndex = null;
|
||||
});
|
||||
|
||||
// Touch events for mobile reordering
|
||||
chip.addEventListener(
|
||||
'touchstart',
|
||||
e => {
|
||||
touchStartX = e.touches[0].clientX;
|
||||
touchMoved = false;
|
||||
draggedIndex = idx;
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
|
||||
chip.addEventListener(
|
||||
'touchmove',
|
||||
e => {
|
||||
const currentX = e.touches[0].clientX;
|
||||
if (Math.abs(currentX - touchStartX) > 10) {
|
||||
touchMoved = true;
|
||||
chip.classList.add('dragging');
|
||||
}
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
|
||||
chip.addEventListener('touchend', e => {
|
||||
chip.classList.remove('dragging');
|
||||
if (touchMoved) {
|
||||
const endX = e.changedTouches[0].clientX;
|
||||
const endY = e.changedTouches[0].clientY;
|
||||
// Find which chip the touch ended on
|
||||
const targetEl = document.elementFromPoint(endX, endY);
|
||||
const targetChip = targetEl ? targetEl.closest('.active-tile-chip') : null;
|
||||
if (targetChip) {
|
||||
const targetIdx = parseInt(targetChip.getAttribute('data-idx'), 10);
|
||||
if (!isNaN(targetIdx) && targetIdx !== idx) {
|
||||
onTilesReordered(idx, targetIdx);
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
touchMoved = false;
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
wrapper.querySelector('#btn-builder-clear')?.addEventListener('click', () => {
|
||||
sound.playTileRemove();
|
||||
onClearWord();
|
||||
});
|
||||
|
||||
wrapper.querySelector('#btn-builder-backspace')?.addEventListener('click', () => {
|
||||
sound.playTileRemove();
|
||||
onBackspaceWord();
|
||||
});
|
||||
|
||||
wrapper.querySelector('#btn-builder-submit')?.addEventListener('click', onSubmitWord);
|
||||
}
|
||||
|
||||
function triggerShake() {
|
||||
const builder = wrapper.querySelector('#active-word-builder');
|
||||
if (builder) {
|
||||
builder.classList.remove('invalid-shake');
|
||||
void builder.offsetWidth; // Trigger reflow
|
||||
builder.classList.add('invalid-shake');
|
||||
}
|
||||
}
|
||||
|
||||
return { element: wrapper, render, triggerShake };
|
||||
}
|
||||
173
src/components/WordsDrawer.js
Normal file
173
src/components/WordsDrawer.js
Normal file
@@ -0,0 +1,173 @@
|
||||
export function createWordsDrawer({ onRevealAll }) {
|
||||
const backdrop = document.createElement('div');
|
||||
backdrop.className = 'modal-backdrop';
|
||||
backdrop.id = 'words-drawer-backdrop';
|
||||
|
||||
let currentTab = 'all'; // 'all', 'quartiles', '3-tiles', '2-tiles', '1-tiles'
|
||||
|
||||
function render(state) {
|
||||
if (!state.currentPuzzle) return;
|
||||
|
||||
const foundWordsList = Array.from(state.foundWords.values());
|
||||
const allPuzzleWords = state.currentPuzzle.words;
|
||||
const isRevealed = state.isRevealed;
|
||||
|
||||
// Filter words according to current tab
|
||||
let displayWords = isRevealed ? allPuzzleWords : foundWordsList;
|
||||
|
||||
if (currentTab === 'quartiles') {
|
||||
displayWords = displayWords.filter(w => w.tileCount === 4);
|
||||
} else if (currentTab === '3-tiles') {
|
||||
displayWords = displayWords.filter(w => w.tileCount === 3);
|
||||
} else if (currentTab === '2-tiles') {
|
||||
displayWords = displayWords.filter(w => w.tileCount === 2);
|
||||
} else if (currentTab === '1-tiles') {
|
||||
displayWords = displayWords.filter(w => w.tileCount === 1);
|
||||
}
|
||||
|
||||
// Sort display words: target quartiles first, then points desc, then alphabetical
|
||||
displayWords.sort((a, b) => {
|
||||
if (a.isTargetQuartile !== b.isTargetQuartile) return a.isTargetQuartile ? -1 : 1;
|
||||
if (b.points !== a.points) return b.points - a.points;
|
||||
return a.word.localeCompare(b.word);
|
||||
});
|
||||
|
||||
const quartilesCount = foundWordsList.filter(w => w.tileCount === 4).length;
|
||||
const threeTilesCount = foundWordsList.filter(w => w.tileCount === 3).length;
|
||||
const twoTilesCount = foundWordsList.filter(w => w.tileCount === 2).length;
|
||||
const oneTilesCount = foundWordsList.filter(w => w.tileCount === 1).length;
|
||||
|
||||
backdrop.innerHTML = `
|
||||
<div class="modal-sheet" id="words-drawer-sheet">
|
||||
<div class="sheet-handle"></div>
|
||||
<div class="sheet-header">
|
||||
<div>
|
||||
<div class="sheet-title">Words Found</div>
|
||||
<div style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 2px;">
|
||||
${foundWordsList.length} of ${allPuzzleWords.length} words found (${state.score} pts)
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-close-sheet" id="btn-close-words-drawer">✕</button>
|
||||
</div>
|
||||
|
||||
<div class="sheet-tabs">
|
||||
<button class="tab-btn ${currentTab === 'all' ? 'active' : ''}" data-tab="all">
|
||||
All (${foundWordsList.length})
|
||||
</button>
|
||||
<button class="tab-btn ${currentTab === 'quartiles' ? 'active' : ''}" data-tab="quartiles">
|
||||
Quartiles (${quartilesCount}/5)
|
||||
</button>
|
||||
<button class="tab-btn ${currentTab === '3-tiles' ? 'active' : ''}" data-tab="3-tiles">
|
||||
3-Tiles (${threeTilesCount})
|
||||
</button>
|
||||
<button class="tab-btn ${currentTab === '2-tiles' ? 'active' : ''}" data-tab="2-tiles">
|
||||
2-Tiles (${twoTilesCount})
|
||||
</button>
|
||||
<button class="tab-btn ${currentTab === '1-tiles' ? 'active' : ''}" data-tab="1-tiles">
|
||||
1-Tile (${oneTilesCount})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sheet-body">
|
||||
${
|
||||
displayWords.length === 0
|
||||
? `<div style="text-align:center; padding: 32px 16px; color: var(--text-secondary);">
|
||||
<div style="font-size: 2rem; margin-bottom: 8px;">🔍</div>
|
||||
<strong>No words found in this category yet</strong>
|
||||
<div style="font-size: 0.85rem; margin-top: 4px;">Combine tiles on the board to discover valid words!</div>
|
||||
</div>`
|
||||
: displayWords
|
||||
.map(w => {
|
||||
const isFound = state.foundWords.has(w.word.toLowerCase());
|
||||
const isQuartile = w.tileCount === 4;
|
||||
|
||||
return `
|
||||
<div class="word-card ${isQuartile ? 'quartile-card' : ''}" style="${!isFound ? 'opacity: 0.6; border-style: dashed;' : ''}">
|
||||
<div class="word-card-left">
|
||||
<div class="word-card-word">
|
||||
${w.word.toUpperCase()}
|
||||
${isQuartile ? ' ⭐' : ''}
|
||||
${!isFound ? ' <span style="font-size:0.75rem; color:var(--text-tertiary);">(Unfound)</span>' : ''}
|
||||
</div>
|
||||
<div class="word-card-tiles">
|
||||
${w.tileSegments.map(s => `<span class="tile-chip-mini">${s.toUpperCase()}</span>`).join('+')}
|
||||
</div>
|
||||
</div>
|
||||
<div class="word-card-points">+${w.points}</div>
|
||||
</div>
|
||||
`;
|
||||
})
|
||||
.join('')
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="sheet-footer">
|
||||
<div style="font-size: 0.8rem; color: var(--text-secondary);">
|
||||
${isRevealed ? 'All solutions revealed' : state.getRank().isExpert ? '🏆 Expert reached! You can keep hunting or reveal solutions.' : 'Reach 100 points for Expert rank!'}
|
||||
</div>
|
||||
${
|
||||
!isRevealed
|
||||
? `<button class="btn-reveal-all" id="btn-trigger-reveal">
|
||||
Reveal All Words
|
||||
</button>`
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Event listeners
|
||||
backdrop.querySelector('#btn-close-words-drawer')?.addEventListener('click', () => {
|
||||
close();
|
||||
});
|
||||
|
||||
backdrop.addEventListener('click', e => {
|
||||
if (e.target === backdrop) {
|
||||
close();
|
||||
}
|
||||
});
|
||||
|
||||
const tabBtns = backdrop.querySelectorAll('.tab-btn');
|
||||
tabBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
currentTab = btn.getAttribute('data-tab');
|
||||
render(state);
|
||||
});
|
||||
});
|
||||
|
||||
const revealBtn = backdrop.querySelector('#btn-trigger-reveal');
|
||||
if (revealBtn) {
|
||||
let isConfirming = false;
|
||||
let timer = null;
|
||||
revealBtn.addEventListener('click', () => {
|
||||
if (!isConfirming) {
|
||||
isConfirming = true;
|
||||
revealBtn.innerText = 'Tap again to reveal all words';
|
||||
revealBtn.style.background = 'var(--accent-danger)';
|
||||
revealBtn.style.color = '#ffffff';
|
||||
timer = setTimeout(() => {
|
||||
isConfirming = false;
|
||||
if (revealBtn) {
|
||||
revealBtn.innerText = 'Reveal All Words';
|
||||
revealBtn.style.background = 'rgba(239, 68, 68, 0.1)';
|
||||
revealBtn.style.color = 'var(--accent-danger)';
|
||||
}
|
||||
}, 3500);
|
||||
} else {
|
||||
clearTimeout(timer);
|
||||
onRevealAll();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function open() {
|
||||
backdrop.classList.add('open');
|
||||
}
|
||||
|
||||
function close() {
|
||||
backdrop.classList.remove('open');
|
||||
}
|
||||
|
||||
return { element: backdrop, render, open, close };
|
||||
}
|
||||
17
src/data/lexicon.js
Normal file
17
src/data/lexicon.js
Normal file
File diff suppressed because one or more lines are too long
10611
src/data/puzzles.js
Normal file
10611
src/data/puzzles.js
Normal file
File diff suppressed because it is too large
Load Diff
265
src/engine/audio.js
Normal file
265
src/engine/audio.js
Normal file
@@ -0,0 +1,265 @@
|
||||
/**
|
||||
* Web Audio API synthesizer for tactile, Apple-grade acoustic feedback
|
||||
* Requires 0 external audio files, operates instantly with zero latency
|
||||
*/
|
||||
class SoundEngine {
|
||||
constructor() {
|
||||
this.ctx = null;
|
||||
this.muted = localStorage.getItem('quartiles_sound_muted') === 'true';
|
||||
}
|
||||
|
||||
initContext() {
|
||||
if (!this.ctx) {
|
||||
const AudioCtx = window.AudioContext || window.webkitAudioContext;
|
||||
if (AudioCtx) {
|
||||
this.ctx = new AudioCtx();
|
||||
}
|
||||
}
|
||||
if (this.ctx && this.ctx.state === 'suspended') {
|
||||
this.ctx.resume();
|
||||
}
|
||||
}
|
||||
|
||||
isMuted() {
|
||||
return this.muted;
|
||||
}
|
||||
|
||||
setMuted(muted) {
|
||||
this.muted = !!muted;
|
||||
localStorage.setItem('quartiles_sound_muted', this.muted ? 'true' : 'false');
|
||||
}
|
||||
|
||||
toggleMute() {
|
||||
this.setMuted(!this.muted);
|
||||
return this.muted;
|
||||
}
|
||||
|
||||
// Soft tactile click for tile selection
|
||||
playTileClick() {
|
||||
if (this.muted) return;
|
||||
this.initContext();
|
||||
if (!this.ctx) return;
|
||||
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
const now = this.ctx.currentTime;
|
||||
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(620, now);
|
||||
osc.frequency.exponentialRampToValueAtTime(380, now + 0.04);
|
||||
|
||||
gain.gain.setValueAtTime(0.12, now);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.04);
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.start(now);
|
||||
osc.stop(now + 0.045);
|
||||
}
|
||||
|
||||
// Gentle acoustic pop when tile is removed
|
||||
playTileRemove() {
|
||||
if (this.muted) return;
|
||||
this.initContext();
|
||||
if (!this.ctx) return;
|
||||
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
const now = this.ctx.currentTime;
|
||||
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(320, now);
|
||||
osc.frequency.exponentialRampToValueAtTime(540, now + 0.05);
|
||||
|
||||
gain.gain.setValueAtTime(0.1, now);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + 0.05);
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.start(now);
|
||||
osc.stop(now + 0.055);
|
||||
}
|
||||
|
||||
// Shuffle swoosh sound
|
||||
playShuffle() {
|
||||
if (this.muted) return;
|
||||
this.initContext();
|
||||
if (!this.ctx) return;
|
||||
|
||||
const now = this.ctx.currentTime;
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
const delay = i * 0.025;
|
||||
|
||||
osc.type = 'triangle';
|
||||
osc.frequency.setValueAtTime(280 + i * 70, now + delay);
|
||||
osc.frequency.exponentialRampToValueAtTime(160, now + delay + 0.06);
|
||||
|
||||
gain.gain.setValueAtTime(0.06, now + delay);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + delay + 0.06);
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.start(now + delay);
|
||||
osc.stop(now + delay + 0.065);
|
||||
}
|
||||
}
|
||||
|
||||
// Gentle double boop on invalid submission
|
||||
playError() {
|
||||
if (this.muted) return;
|
||||
this.initContext();
|
||||
if (!this.ctx) return;
|
||||
|
||||
const now = this.ctx.currentTime;
|
||||
[0, 0.09].forEach(delay => {
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
|
||||
osc.type = 'sawtooth';
|
||||
osc.frequency.setValueAtTime(140, now + delay);
|
||||
osc.frequency.exponentialRampToValueAtTime(110, now + delay + 0.08);
|
||||
|
||||
gain.gain.setValueAtTime(0.08, now + delay);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + delay + 0.08);
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.start(now + delay);
|
||||
osc.stop(now + delay + 0.085);
|
||||
});
|
||||
}
|
||||
|
||||
// Cheerful chime on valid word
|
||||
playWordValid(tileCount) {
|
||||
if (this.muted) return;
|
||||
this.initContext();
|
||||
if (!this.ctx) return;
|
||||
|
||||
const now = this.ctx.currentTime;
|
||||
const baseFreqs = {
|
||||
1: [523.25, 659.25], // C5, E5
|
||||
2: [523.25, 659.25, 783.99], // C5, E5, G5
|
||||
3: [587.33, 739.99, 880.00, 1046.50] // D5, F#5, A5, C6
|
||||
};
|
||||
|
||||
const freqs = baseFreqs[tileCount] || baseFreqs[2];
|
||||
|
||||
freqs.forEach((freq, idx) => {
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
const delay = idx * 0.045;
|
||||
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(freq, now + delay);
|
||||
|
||||
gain.gain.setValueAtTime(0.12, now + delay);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + delay + 0.22);
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.start(now + delay);
|
||||
osc.stop(now + delay + 0.23);
|
||||
});
|
||||
}
|
||||
|
||||
// Sparkling golden fanfare for 4-tile Quartile
|
||||
playQuartileFound() {
|
||||
if (this.muted) return;
|
||||
this.initContext();
|
||||
if (!this.ctx) return;
|
||||
|
||||
const now = this.ctx.currentTime;
|
||||
// Major 7th arpeggio: C5, E5, G5, B5, C6
|
||||
const notes = [523.25, 659.25, 783.99, 987.77, 1046.50];
|
||||
|
||||
notes.forEach((freq, idx) => {
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
const delay = idx * 0.055;
|
||||
|
||||
osc.type = 'triangle';
|
||||
osc.frequency.setValueAtTime(freq, now + delay);
|
||||
|
||||
gain.gain.setValueAtTime(0.15, now + delay);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + delay + 0.45);
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.start(now + delay);
|
||||
osc.stop(now + delay + 0.46);
|
||||
});
|
||||
}
|
||||
|
||||
// Grand celebration fanfare when all 5 Quartiles are discovered (+40 pts bonus!)
|
||||
playBonusCelebration() {
|
||||
if (this.muted) return;
|
||||
this.initContext();
|
||||
if (!this.ctx) return;
|
||||
|
||||
const now = this.ctx.currentTime;
|
||||
// Fanfare chord progression
|
||||
const chords = [
|
||||
{ delay: 0.0, freqs: [523.25, 659.25, 783.99], dur: 0.2 },
|
||||
{ delay: 0.2, freqs: [587.33, 739.99, 880.00], dur: 0.2 },
|
||||
{ delay: 0.4, freqs: [659.25, 830.61, 987.77], dur: 0.25 },
|
||||
{ delay: 0.7, freqs: [783.99, 987.77, 1174.66, 1567.98], dur: 0.8 }
|
||||
];
|
||||
|
||||
chords.forEach(chord => {
|
||||
chord.freqs.forEach(freq => {
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
const startTime = now + chord.delay;
|
||||
|
||||
osc.type = 'triangle';
|
||||
osc.frequency.setValueAtTime(freq, startTime);
|
||||
|
||||
gain.gain.setValueAtTime(0.14, startTime);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, startTime + chord.dur);
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.start(startTime);
|
||||
osc.stop(startTime + chord.dur + 0.05);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Uplifting chord for rank progression (e.g. hitting Expert)
|
||||
playRankUp() {
|
||||
if (this.muted) return;
|
||||
this.initContext();
|
||||
if (!this.ctx) return;
|
||||
|
||||
const now = this.ctx.currentTime;
|
||||
const freqs = [440, 554.37, 659.25, 880];
|
||||
freqs.forEach((freq, idx) => {
|
||||
const osc = this.ctx.createOscillator();
|
||||
const gain = this.ctx.createGain();
|
||||
const delay = idx * 0.08;
|
||||
|
||||
osc.type = 'sine';
|
||||
osc.frequency.setValueAtTime(freq, now + delay);
|
||||
|
||||
gain.gain.setValueAtTime(0.13, now + delay);
|
||||
gain.gain.exponentialRampToValueAtTime(0.001, now + delay + 0.35);
|
||||
|
||||
osc.connect(gain);
|
||||
gain.connect(this.ctx.destination);
|
||||
|
||||
osc.start(now + delay);
|
||||
osc.stop(now + delay + 0.36);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export const sound = new SoundEngine();
|
||||
107
src/engine/confetti.js
Normal file
107
src/engine/confetti.js
Normal file
@@ -0,0 +1,107 @@
|
||||
/**
|
||||
* Lightweight canvas confetti system with multi-colored ribbons, stars and sparkles
|
||||
*/
|
||||
export function fireConfetti({
|
||||
particleCount = 75,
|
||||
spread = 70,
|
||||
origin = { x: 0.5, y: 0.6 },
|
||||
colors = ['#f59e0b', '#10b981', '#6366f1', '#ec4899', '#3b82f6', '#fbbf24']
|
||||
} = {}) {
|
||||
let canvas = document.getElementById('quartiles-confetti-canvas');
|
||||
if (!canvas) {
|
||||
canvas = document.createElement('canvas');
|
||||
canvas.id = 'quartiles-confetti-canvas';
|
||||
canvas.style.position = 'fixed';
|
||||
canvas.style.top = '0';
|
||||
canvas.style.left = '0';
|
||||
canvas.style.width = '100vw';
|
||||
canvas.style.height = '100vh';
|
||||
canvas.style.pointerEvents = 'none';
|
||||
canvas.style.zIndex = '9999';
|
||||
document.body.appendChild(canvas);
|
||||
}
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
canvas.width = window.innerWidth * dpr;
|
||||
canvas.height = window.innerHeight * dpr;
|
||||
ctx.scale(dpr, dpr);
|
||||
|
||||
const particles = [];
|
||||
const startX = origin.x * window.innerWidth;
|
||||
const startY = origin.y * window.innerHeight;
|
||||
|
||||
for (let i = 0; i < particleCount; i++) {
|
||||
const angle = (Math.PI / 180) * (-90 + (Math.random() - 0.5) * spread * 2);
|
||||
const speed = 7 + Math.random() * 9;
|
||||
const color = colors[Math.floor(Math.random() * colors.length)];
|
||||
const size = Math.random() * 8 + 6;
|
||||
const shape = Math.random() > 0.4 ? 'rect' : 'circle';
|
||||
|
||||
particles.push({
|
||||
x: startX,
|
||||
y: startY,
|
||||
vx: Math.cos(angle) * speed,
|
||||
vy: Math.sin(angle) * speed,
|
||||
rotation: Math.random() * 360,
|
||||
vRotation: (Math.random() - 0.5) * 12,
|
||||
scaleX: 1,
|
||||
vScale: (Math.random() - 0.5) * 0.1,
|
||||
color,
|
||||
size,
|
||||
shape,
|
||||
gravity: 0.28,
|
||||
drag: 0.96,
|
||||
opacity: 1,
|
||||
decay: 0.012 + Math.random() * 0.008
|
||||
});
|
||||
}
|
||||
|
||||
let animationFrame;
|
||||
|
||||
function render() {
|
||||
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
||||
|
||||
let activeCount = 0;
|
||||
|
||||
for (let i = 0; i < particles.length; i++) {
|
||||
const p = particles[i];
|
||||
if (p.opacity <= 0) continue;
|
||||
|
||||
activeCount++;
|
||||
p.vx *= p.drag;
|
||||
p.vy = p.vy * p.drag + p.gravity;
|
||||
p.x += p.vx;
|
||||
p.y += p.vy;
|
||||
p.rotation += p.vRotation;
|
||||
p.scaleX += p.vScale;
|
||||
if (Math.abs(p.scaleX) > 1) p.vScale *= -1;
|
||||
p.opacity -= p.decay;
|
||||
|
||||
ctx.save();
|
||||
ctx.translate(p.x, p.y);
|
||||
ctx.rotate((p.rotation * Math.PI) / 180);
|
||||
ctx.scale(p.scaleX, 1);
|
||||
ctx.globalAlpha = Math.max(0, p.opacity);
|
||||
ctx.fillStyle = p.color;
|
||||
|
||||
if (p.shape === 'rect') {
|
||||
ctx.fillRect(-p.size / 2, -p.size / 3, p.size, p.size / 1.5);
|
||||
} else {
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, p.size / 2.5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
if (activeCount > 0) {
|
||||
animationFrame = requestAnimationFrame(render);
|
||||
} else {
|
||||
ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);
|
||||
cancelAnimationFrame(animationFrame);
|
||||
}
|
||||
}
|
||||
|
||||
render();
|
||||
}
|
||||
69
src/engine/constants.js
Normal file
69
src/engine/constants.js
Normal file
@@ -0,0 +1,69 @@
|
||||
export const POINTS_BY_TILE_COUNT = {
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 4,
|
||||
4: 8
|
||||
};
|
||||
|
||||
export const QUARTILE_COMPLETION_BONUS = 40;
|
||||
export const EXPERT_RANK_POINTS = 100;
|
||||
|
||||
export const RANK_TIERS = [
|
||||
{ name: 'Novice', minPoints: 0, badge: '🌱' },
|
||||
{ name: 'Apprentice', minPoints: 25, badge: '🛠️' },
|
||||
{ name: 'Builder', minPoints: 50, badge: '📐' },
|
||||
{ name: 'Artisan', minPoints: 70, badge: '🎨' },
|
||||
{ name: 'Wordsmith', minPoints: 85, badge: '✒️' },
|
||||
{ name: 'Expert', minPoints: 100, badge: '🏆' },
|
||||
{ name: 'Perfect', minPoints: 999999, badge: '👑' }
|
||||
];
|
||||
|
||||
/**
|
||||
* Gets the current rank object and progress to the next rank
|
||||
*/
|
||||
export function getRankInfo(currentScore, foundCount, totalCount) {
|
||||
// If player found every word, rank is Perfect!
|
||||
if (totalCount > 0 && foundCount >= totalCount) {
|
||||
return {
|
||||
current: RANK_TIERS[6], // Perfect
|
||||
next: null,
|
||||
progressPercent: 100,
|
||||
pointsToNext: 0,
|
||||
isExpert: true,
|
||||
isPerfect: true
|
||||
};
|
||||
}
|
||||
|
||||
let currentRank = RANK_TIERS[0];
|
||||
let nextRank = RANK_TIERS[1];
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
if (currentScore >= RANK_TIERS[i].minPoints) {
|
||||
currentRank = RANK_TIERS[i];
|
||||
nextRank = RANK_TIERS[i + 1] || null;
|
||||
}
|
||||
}
|
||||
|
||||
let progressPercent = 0;
|
||||
let pointsToNext = 0;
|
||||
|
||||
if (nextRank && nextRank.minPoints <= EXPERT_RANK_POINTS) {
|
||||
const range = nextRank.minPoints - currentRank.minPoints;
|
||||
const earned = currentScore - currentRank.minPoints;
|
||||
progressPercent = Math.min(100, Math.max(0, Math.round((earned / range) * 100)));
|
||||
pointsToNext = Math.max(0, nextRank.minPoints - currentScore);
|
||||
} else {
|
||||
// Already Expert, heading towards Perfect
|
||||
progressPercent = totalCount > 0 ? Math.min(100, Math.round((foundCount / totalCount) * 100)) : 100;
|
||||
pointsToNext = 0;
|
||||
}
|
||||
|
||||
return {
|
||||
current: currentRank,
|
||||
next: nextRank,
|
||||
progressPercent: isNaN(progressPercent) ? 0 : progressPercent,
|
||||
pointsToNext,
|
||||
isExpert: currentScore >= EXPERT_RANK_POINTS,
|
||||
isPerfect: false
|
||||
};
|
||||
}
|
||||
114
src/engine/generator.js
Normal file
114
src/engine/generator.js
Normal file
@@ -0,0 +1,114 @@
|
||||
import { TARGET_WORDS_POOL } from '../data/puzzles.js';
|
||||
import { solveBoard } from './solver.js';
|
||||
|
||||
/**
|
||||
* Generates a random valid Quartiles puzzle from the target word pool
|
||||
*/
|
||||
export function generateRandomPuzzle(seed) {
|
||||
const pool = [...TARGET_WORDS_POOL];
|
||||
// Shuffle pool
|
||||
for (let i = pool.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[pool[i], pool[j]] = [pool[j], pool[i]];
|
||||
}
|
||||
|
||||
// Pick 5 words that don't repeat letters/roots too excessively
|
||||
const selectedWords = pool.slice(0, 5);
|
||||
const quartets = selectedWords.map(w => w.tiles);
|
||||
|
||||
const solved = solveBoard(quartets);
|
||||
|
||||
const id = 'custom-' + Date.now();
|
||||
const theme = selectedWords[0].theme ? `${selectedWords[0].theme.toUpperCase()} & MORE` : 'Unlimited Challenge';
|
||||
|
||||
return {
|
||||
id,
|
||||
date: new Date().toISOString().slice(0, 10),
|
||||
title: `Unlimited Puzzle #${Math.floor(Math.random() * 9000 + 1000)}`,
|
||||
theme,
|
||||
difficulty: 'Random',
|
||||
quartets,
|
||||
tiles: solved.tiles,
|
||||
targetQuartiles: solved.targetQuartiles,
|
||||
quartileDetails: selectedWords.map(w => ({
|
||||
word: w.word,
|
||||
tiles: w.tiles,
|
||||
clue: w.clue || 'A 4-part Quartile word'
|
||||
})),
|
||||
words: solved.words,
|
||||
wordCount: solved.wordCount,
|
||||
maxPossibleScore: solved.maxPossibleScore
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Validates and creates a custom puzzle from user-provided quartets
|
||||
* Expects array of 5 quartets: [[t1,t2,t3,t4], [t5,t6,t7,t8], ...]
|
||||
*/
|
||||
export function createCustomPuzzle(quartets, customTitle = 'Custom Community Puzzle') {
|
||||
if (!Array.isArray(quartets) || quartets.length !== 5) {
|
||||
throw new Error('Puzzle must have exactly 5 quartets (4-tile words)');
|
||||
}
|
||||
|
||||
for (let i = 0; i < quartets.length; i++) {
|
||||
const q = quartets[i];
|
||||
if (!Array.isArray(q) || q.length !== 4) {
|
||||
throw new Error(`Quartet #${i + 1} must contain exactly 4 tiles`);
|
||||
}
|
||||
for (let j = 0; j < 4; j++) {
|
||||
const tile = q[j].toLowerCase().trim();
|
||||
if (!/^[a-z]{2,4}$/.test(tile)) {
|
||||
throw new Error(`Tile "${tile}" in quartet #${i + 1} must be 2 to 4 letters`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const normalizedQuartets = quartets.map(q => q.map(t => t.toLowerCase().trim()));
|
||||
const solved = solveBoard(normalizedQuartets);
|
||||
|
||||
return {
|
||||
id: 'user-' + btoa(normalizedQuartets.map(q => q.join('-')).join('|')).slice(0, 16),
|
||||
date: new Date().toISOString().slice(0, 10),
|
||||
title: customTitle,
|
||||
theme: 'Community Creation',
|
||||
difficulty: 'Custom',
|
||||
quartets: normalizedQuartets,
|
||||
tiles: solved.tiles,
|
||||
targetQuartiles: solved.targetQuartiles,
|
||||
quartileDetails: normalizedQuartets.map(q => ({
|
||||
word: q.join(''),
|
||||
tiles: q,
|
||||
clue: 'Player created Quartile'
|
||||
})),
|
||||
words: solved.words,
|
||||
wordCount: solved.wordCount,
|
||||
maxPossibleScore: solved.maxPossibleScore
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Encodes custom quartets to URL safe hash string
|
||||
*/
|
||||
export function encodePuzzleToHash(quartets, title) {
|
||||
const payload = {
|
||||
t: title || 'Custom Puzzle',
|
||||
q: quartets
|
||||
};
|
||||
return encodeURIComponent(btoa(JSON.stringify(payload)));
|
||||
}
|
||||
|
||||
/**
|
||||
* Decodes URL safe hash string to custom puzzle
|
||||
*/
|
||||
export function decodePuzzleFromHash(hash) {
|
||||
try {
|
||||
const json = atob(decodeURIComponent(hash));
|
||||
const payload = JSON.parse(json);
|
||||
if (payload && payload.q) {
|
||||
return createCustomPuzzle(payload.q, payload.t);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to decode puzzle from hash:', err);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
79
src/engine/solver.js
Normal file
79
src/engine/solver.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import { DICTIONARY_SET, PREFIX_SET } from '../data/lexicon.js';
|
||||
import { POINTS_BY_TILE_COUNT, QUARTILE_COMPLETION_BONUS, EXPERT_RANK_POINTS, RANK_TIERS, getRankInfo } from './constants.js';
|
||||
|
||||
export { POINTS_BY_TILE_COUNT, QUARTILE_COMPLETION_BONUS, EXPERT_RANK_POINTS, RANK_TIERS, getRankInfo };
|
||||
|
||||
/**
|
||||
* Solves a 20-tile board (5 quartets)
|
||||
* Returns all constructible valid words, point values, and tile paths
|
||||
*/
|
||||
export function solveBoard(quartets) {
|
||||
const tiles = quartets.flat();
|
||||
const foundMap = new Map();
|
||||
|
||||
function search(prefix, usedIndices) {
|
||||
if (prefix.length > 0) {
|
||||
const checkLen = Math.min(prefix.length, 6);
|
||||
if (!PREFIX_SET.has(prefix.slice(0, checkLen))) return;
|
||||
}
|
||||
|
||||
if (prefix.length >= 2 && DICTIONARY_SET.has(prefix)) {
|
||||
if (!foundMap.has(prefix)) {
|
||||
foundMap.set(prefix, [...usedIndices]);
|
||||
}
|
||||
}
|
||||
if (usedIndices.length >= 4) return;
|
||||
|
||||
for (let i = 0; i < tiles.length; i++) {
|
||||
if (usedIndices.includes(i)) continue;
|
||||
usedIndices.push(i);
|
||||
search(prefix + tiles[i], usedIndices);
|
||||
usedIndices.pop();
|
||||
}
|
||||
}
|
||||
|
||||
search('', []);
|
||||
|
||||
const quartilesList = quartets.map(q => q.join('').toLowerCase());
|
||||
const quartileSet = new Set(quartilesList);
|
||||
|
||||
const words = [];
|
||||
let totalBaseScore = 0;
|
||||
|
||||
for (const [word, path] of foundMap.entries()) {
|
||||
const tileCount = path.length;
|
||||
const points = POINTS_BY_TILE_COUNT[tileCount] || 1;
|
||||
const isTargetQuartile = quartileSet.has(word);
|
||||
const isQuartile = tileCount === 4;
|
||||
|
||||
totalBaseScore += points;
|
||||
|
||||
words.push({
|
||||
word,
|
||||
points,
|
||||
tileCount,
|
||||
tileIndices: path,
|
||||
tileSegments: path.map(idx => tiles[idx]),
|
||||
isTargetQuartile,
|
||||
isQuartile
|
||||
});
|
||||
}
|
||||
|
||||
// Sort words: Quartiles first, then by points descending, then alphabetically
|
||||
words.sort((a, b) => {
|
||||
if (a.isTargetQuartile !== b.isTargetQuartile) return a.isTargetQuartile ? -1 : 1;
|
||||
if (b.points !== a.points) return b.points - a.points;
|
||||
return a.word.localeCompare(b.word);
|
||||
});
|
||||
|
||||
return {
|
||||
tiles,
|
||||
quartets,
|
||||
targetQuartiles: quartilesList,
|
||||
words,
|
||||
wordCount: words.length,
|
||||
quartileCount: 5,
|
||||
totalBaseScore,
|
||||
maxPossibleScore: totalBaseScore + QUARTILE_COMPLETION_BONUS
|
||||
};
|
||||
}
|
||||
326
src/main.js
Normal file
326
src/main.js
Normal file
@@ -0,0 +1,326 @@
|
||||
import './styles/main.css';
|
||||
import './styles/board.css';
|
||||
import './styles/components.css';
|
||||
|
||||
import { gameState } from './state/game-state.js';
|
||||
import { CURATED_PUZZLES } from './data/puzzles.js';
|
||||
import { sound } from './engine/audio.js';
|
||||
import { fireConfetti } from './engine/confetti.js';
|
||||
|
||||
import { createHeader } from './components/Header.js';
|
||||
import { createScoreRankBar } from './components/ScoreRankBar.js';
|
||||
import { createWordBuilder } from './components/WordBuilder.js';
|
||||
import { createTileGrid } from './components/TileGrid.js';
|
||||
import { createActionBar } from './components/ActionBar.js';
|
||||
import { createWordsDrawer } from './components/WordsDrawer.js';
|
||||
import { createModals } from './components/Modals.js';
|
||||
import { createToastContainer } from './components/Toast.js';
|
||||
|
||||
// PWA Service Worker Registration
|
||||
if ('serviceWorker' in navigator && window.location.protocol.startsWith('http')) {
|
||||
window.addEventListener('load', () => {
|
||||
navigator.serviceWorker
|
||||
.register('/sw.js')
|
||||
.then(reg => {
|
||||
console.log('Quartiles PWA Service Worker registered:', reg.scope);
|
||||
})
|
||||
.catch(err => {
|
||||
console.warn('PWA Service Worker registration error:', err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function initApp() {
|
||||
const root = document.getElementById('app');
|
||||
if (!root) return;
|
||||
|
||||
// Initialize theme (dark/light)
|
||||
const savedTheme = localStorage.getItem('quartiles_theme');
|
||||
const systemPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const initialTheme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
|
||||
document.documentElement.setAttribute('data-theme', initialTheme);
|
||||
|
||||
// App Layout Container
|
||||
const appContainer = document.createElement('div');
|
||||
appContainer.className = 'app-container';
|
||||
root.appendChild(appContainer);
|
||||
|
||||
// Create Toast System
|
||||
const toastContainer = createToastContainer();
|
||||
document.body.appendChild(toastContainer.element);
|
||||
|
||||
gameState.subscribeToast(data => {
|
||||
toastContainer.show(data);
|
||||
});
|
||||
|
||||
// Create Modals System
|
||||
const modals = createModals({
|
||||
onSelectPuzzle: puzzleId => {
|
||||
gameState.loadPuzzle(puzzleId);
|
||||
},
|
||||
onCustomPuzzleCreated: customPuzzle => {
|
||||
gameState.loadPuzzle(customPuzzle);
|
||||
gameState.notifyToast('Custom puzzle loaded! Share your link with friends.', 'success');
|
||||
},
|
||||
onResetPuzzle: () => {
|
||||
if (gameState.currentPuzzle) {
|
||||
localStorage.removeItem(`quartiles_save_${gameState.currentPuzzle.id}`);
|
||||
gameState.loadPuzzle(gameState.currentPuzzle);
|
||||
gameState.notifyToast('Progress reset', 'info');
|
||||
}
|
||||
}
|
||||
});
|
||||
document.body.appendChild(modals.element);
|
||||
|
||||
// Create Words Found Drawer
|
||||
const wordsDrawer = createWordsDrawer({
|
||||
onRevealAll: () => {
|
||||
gameState.revealAllWords();
|
||||
gameState.notifyToast('All words revealed!', 'info');
|
||||
}
|
||||
});
|
||||
document.body.appendChild(wordsDrawer.element);
|
||||
|
||||
// Create Header Component
|
||||
const header = createHeader({
|
||||
onOpenCalendar: () => modals.open('calendar', gameState),
|
||||
onOpenHowToPlay: () => modals.open('help', gameState),
|
||||
onOpenStats: () => modals.open('stats', gameState),
|
||||
onOpenCustomBuilder: () => modals.open('builder', gameState),
|
||||
onOpenSettings: () => modals.open('settings', gameState),
|
||||
onNewRandomPuzzle: async () => {
|
||||
try {
|
||||
const { generateRandomPuzzle } = await import('./engine/generator.js');
|
||||
const randomPuzzle = generateRandomPuzzle();
|
||||
gameState.loadPuzzle(randomPuzzle);
|
||||
gameState.notifyToast('Loaded fresh unlimited puzzle!', 'success');
|
||||
fireConfetti({ particleCount: 30, spread: 50 });
|
||||
} catch (err) {
|
||||
console.error('Failed to generate puzzle:', err);
|
||||
gameState.notifyToast('Failed to generate puzzle', 'error');
|
||||
}
|
||||
}
|
||||
});
|
||||
appContainer.appendChild(header.element);
|
||||
|
||||
// Create Score & Rank Bar
|
||||
const scoreRankBar = createScoreRankBar({
|
||||
onOpenWordsDrawer: () => {
|
||||
wordsDrawer.open();
|
||||
}
|
||||
});
|
||||
appContainer.appendChild(scoreRankBar.element);
|
||||
|
||||
// Create Word Construction Tray
|
||||
const wordBuilder = createWordBuilder({
|
||||
onTileRemoved: index => {
|
||||
gameState.removeActiveTile(index);
|
||||
},
|
||||
onTilesReordered: (from, to) => {
|
||||
gameState.reorderActiveTiles(from, to);
|
||||
},
|
||||
onSubmitWord: () => {
|
||||
handleWordSubmission();
|
||||
},
|
||||
onClearWord: () => {
|
||||
gameState.clearActive();
|
||||
},
|
||||
onBackspaceWord: () => {
|
||||
gameState.backspace();
|
||||
}
|
||||
});
|
||||
appContainer.appendChild(wordBuilder.element);
|
||||
|
||||
// Create 4x5 Board Grid
|
||||
const tileGrid = createTileGrid({
|
||||
onTileSelected: tileId => {
|
||||
gameState.onTileClicked(tileId);
|
||||
}
|
||||
});
|
||||
appContainer.appendChild(tileGrid.element);
|
||||
|
||||
// Create Action Bar (Shuffle, Sort, Lock, Hint)
|
||||
const actionBar = createActionBar({
|
||||
onShuffle: () => {
|
||||
tileGrid.triggerShuffleAnimation();
|
||||
gameState.shuffle();
|
||||
},
|
||||
onSortAlpha: () => {
|
||||
tileGrid.triggerShuffleAnimation();
|
||||
gameState.sortAlphabetical();
|
||||
},
|
||||
onToggleLock: () => {
|
||||
gameState.toggleLockQuartiles();
|
||||
},
|
||||
onGetHint: () => {
|
||||
const hint = gameState.getHint();
|
||||
if (!hint) {
|
||||
gameState.notifyToast('You have found every single word!', 'success');
|
||||
return;
|
||||
}
|
||||
|
||||
if (hint.type === 'quartile') {
|
||||
gameState.notifyToast(`💡 Quartile Clue: "${hint.clue}" (Starts with "${hint.firstTile}")`, 'warning', 4000);
|
||||
} else {
|
||||
gameState.notifyToast(`💡 Word Hint: ${hint.tileCount}-tile word starting with "${hint.firstTile}" (+${hint.points} pts)`, 'info', 3500);
|
||||
}
|
||||
}
|
||||
});
|
||||
appContainer.appendChild(actionBar.element);
|
||||
|
||||
// Word submission handler
|
||||
function handleWordSubmission() {
|
||||
const prevRank = gameState.getRank();
|
||||
const result = gameState.submitWord();
|
||||
|
||||
if (!result.success) {
|
||||
sound.playError();
|
||||
wordBuilder.triggerShake();
|
||||
return;
|
||||
}
|
||||
|
||||
// Success!
|
||||
if (result.bonusUnlocked) {
|
||||
// 5/5 Quartiles bonus!
|
||||
sound.playBonusCelebration();
|
||||
gameState.notifyToast(`🎉 5/5 QUARTILES BONUS! +40 POINTS!`, 'quartile', 4500);
|
||||
fireConfetti({ particleCount: 160, spread: 100 });
|
||||
} else if (result.isQuartile) {
|
||||
// Quartile found!
|
||||
sound.playQuartileFound();
|
||||
gameState.notifyToast(`+${result.points} pts! QUARTILE! ⭐`, 'quartile', 3000);
|
||||
fireConfetti({ particleCount: 65, spread: 65 });
|
||||
} else {
|
||||
// Standard word
|
||||
sound.playWordValid(result.points >= 4 ? 3 : result.points);
|
||||
gameState.notifyToast(`+${result.points} pts: ${result.word.toUpperCase()}`, 'success', 2200);
|
||||
}
|
||||
|
||||
// Check rank progression
|
||||
const currentRank = gameState.getRank();
|
||||
if (!prevRank.isExpert && currentRank.isExpert) {
|
||||
setTimeout(() => {
|
||||
sound.playRankUp();
|
||||
gameState.notifyToast('🏆 EXPERT RANK ACHIEVED! Outstanding!', 'quartile', 4000);
|
||||
fireConfetti({ particleCount: 120, spread: 90 });
|
||||
}, 700);
|
||||
}
|
||||
}
|
||||
|
||||
// Keyboard typing buffer for intelligent physical keyboard support
|
||||
let typingBuffer = '';
|
||||
let typingClearTimer = null;
|
||||
|
||||
// Keyboard controls
|
||||
window.addEventListener('keydown', e => {
|
||||
// If inside an input field, do not hijack
|
||||
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
|
||||
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleWordSubmission();
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'Backspace') {
|
||||
e.preventDefault();
|
||||
sound.playTileRemove();
|
||||
gameState.backspace();
|
||||
typingBuffer = '';
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
sound.playTileRemove();
|
||||
gameState.clearActive();
|
||||
typingBuffer = '';
|
||||
return;
|
||||
}
|
||||
|
||||
if (e.key === ' ' || e.code === 'Space') {
|
||||
e.preventDefault();
|
||||
sound.playShuffle();
|
||||
tileGrid.triggerShuffleAnimation();
|
||||
gameState.shuffle();
|
||||
typingBuffer = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// A-Z letter typing to select board tiles
|
||||
if (/^[a-zA-Z]$/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
|
||||
const letter = e.key.toLowerCase();
|
||||
typingBuffer += letter;
|
||||
|
||||
clearTimeout(typingClearTimer);
|
||||
typingClearTimer = setTimeout(() => {
|
||||
typingBuffer = '';
|
||||
}, 1500);
|
||||
|
||||
const activeSet = new Set(gameState.activeTileIds);
|
||||
const availableTiles = gameState.boardTiles.filter(t => !activeSet.has(t.id));
|
||||
|
||||
// 1. Exact match of accumulated typing buffer
|
||||
const exactMatch = availableTiles.find(t => t.text.toLowerCase() === typingBuffer);
|
||||
if (exactMatch) {
|
||||
sound.playTileClick();
|
||||
gameState.onTileClicked(exactMatch.id);
|
||||
typingBuffer = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. Check if typingBuffer is a prefix of any available tile
|
||||
const hasPrefix = availableTiles.some(t => t.text.toLowerCase().startsWith(typingBuffer));
|
||||
if (!hasPrefix) {
|
||||
// Reset to just the newly typed letter and re-check
|
||||
typingBuffer = letter;
|
||||
const singleExact = availableTiles.find(t => t.text.toLowerCase() === letter);
|
||||
if (singleExact) {
|
||||
sound.playTileClick();
|
||||
gameState.onTileClicked(singleExact.id);
|
||||
typingBuffer = '';
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Subscribe components to state changes
|
||||
gameState.subscribe(state => {
|
||||
header.render(state);
|
||||
scoreRankBar.render(state);
|
||||
wordBuilder.render(state);
|
||||
tileGrid.render(state);
|
||||
actionBar.render(state);
|
||||
wordsDrawer.render(state);
|
||||
modals.render(state);
|
||||
});
|
||||
|
||||
// Check URL hash for shared custom puzzle
|
||||
const hash = window.location.hash;
|
||||
if (hash && hash.includes('puzzle=')) {
|
||||
try {
|
||||
const rawHash = hash.split('puzzle=')[1];
|
||||
const { decodePuzzleFromHash } = await import('./engine/generator.js');
|
||||
const decoded = decodePuzzleFromHash(rawHash);
|
||||
if (decoded) {
|
||||
gameState.loadPuzzle(decoded);
|
||||
gameState.notifyToast(`Loaded "${decoded.title}"`, 'success');
|
||||
return;
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to load shared puzzle from hash:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Load today's puzzle or default
|
||||
const todayStr = gameState.getTodayDateString();
|
||||
const todayPuzzle = CURATED_PUZZLES.find(p => p.date === todayStr) || CURATED_PUZZLES[0];
|
||||
gameState.loadPuzzle(todayPuzzle);
|
||||
}
|
||||
|
||||
// Start application when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initApp);
|
||||
} else {
|
||||
initApp();
|
||||
}
|
||||
485
src/state/game-state.js
Normal file
485
src/state/game-state.js
Normal file
@@ -0,0 +1,485 @@
|
||||
import { CURATED_PUZZLES } from '../data/puzzles.js';
|
||||
import { getRankInfo, QUARTILE_COMPLETION_BONUS } from '../engine/constants.js';
|
||||
|
||||
class GameStateManager {
|
||||
constructor() {
|
||||
this.currentPuzzle = null;
|
||||
this.boardTiles = []; // Array of { id, text, isQuartileSolved, isLocked }
|
||||
this.activeTileIds = []; // Array of tile IDs in construction tray
|
||||
this.foundWords = new Map(); // word -> wordData
|
||||
this.score = 0;
|
||||
this.quartilesBonusAwarded = false;
|
||||
this.lockQuartiles = localStorage.getItem('quartiles_lock_setting') !== 'false';
|
||||
this.listeners = new Set();
|
||||
this.toastListeners = new Set();
|
||||
this.isRevealed = false;
|
||||
this.hintIndex = 0;
|
||||
}
|
||||
|
||||
subscribe(listener) {
|
||||
this.listeners.add(listener);
|
||||
return () => this.listeners.delete(listener);
|
||||
}
|
||||
|
||||
notify() {
|
||||
for (const listener of this.listeners) {
|
||||
listener(this);
|
||||
}
|
||||
}
|
||||
|
||||
subscribeToast(listener) {
|
||||
this.toastListeners.add(listener);
|
||||
return () => this.toastListeners.delete(listener);
|
||||
}
|
||||
|
||||
notifyToast(message, type = 'info', duration = 2500) {
|
||||
for (const listener of this.toastListeners) {
|
||||
listener({ message, type, duration });
|
||||
}
|
||||
}
|
||||
|
||||
// Load a puzzle (by object or find by date/id)
|
||||
loadPuzzle(puzzleOrId) {
|
||||
let puzzle = puzzleOrId;
|
||||
if (typeof puzzleOrId === 'string') {
|
||||
puzzle = CURATED_PUZZLES.find(p => p.id === puzzleOrId || p.date === puzzleOrId) || CURATED_PUZZLES[0];
|
||||
}
|
||||
|
||||
this.currentPuzzle = puzzle;
|
||||
this.activeTileIds = [];
|
||||
this.foundWords = new Map();
|
||||
this.score = 0;
|
||||
this.quartilesBonusAwarded = false;
|
||||
this.isRevealed = false;
|
||||
this.hintIndex = 0;
|
||||
|
||||
// Initialize board tiles from the 20 puzzle tiles
|
||||
this.boardTiles = puzzle.tiles.map((text, id) => ({
|
||||
id,
|
||||
text: text.toUpperCase(),
|
||||
originalText: text,
|
||||
isQuartileSolved: false,
|
||||
isLocked: false
|
||||
}));
|
||||
|
||||
// Restore saved state from LocalStorage if available
|
||||
this.restoreProgress();
|
||||
|
||||
// Organize board tiles according to lock state
|
||||
this.reorganizeBoard();
|
||||
|
||||
this.notify();
|
||||
}
|
||||
|
||||
// Get current date string in YYYY-MM-DD
|
||||
getTodayDateString() {
|
||||
const today = new Date();
|
||||
const y = today.getFullYear();
|
||||
const m = String(today.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(today.getDate()).padStart(2, '0');
|
||||
return `${y}-${m}-${d}`;
|
||||
}
|
||||
|
||||
// Save current puzzle progress to LocalStorage
|
||||
saveProgress() {
|
||||
if (!this.currentPuzzle) return;
|
||||
const saveKey = `quartiles_save_${this.currentPuzzle.id}`;
|
||||
const payload = {
|
||||
foundWords: Array.from(this.foundWords.entries()),
|
||||
score: this.score,
|
||||
bonus: this.quartilesBonusAwarded,
|
||||
tileOrder: this.boardTiles.map(t => t.id)
|
||||
};
|
||||
try {
|
||||
localStorage.setItem(saveKey, JSON.stringify(payload));
|
||||
} catch (err) {
|
||||
console.warn('LocalStorage save failed:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Restore puzzle progress
|
||||
restoreProgress() {
|
||||
if (!this.currentPuzzle) return;
|
||||
const saveKey = `quartiles_save_${this.currentPuzzle.id}`;
|
||||
try {
|
||||
const saved = localStorage.getItem(saveKey);
|
||||
if (saved) {
|
||||
const parsed = JSON.parse(saved);
|
||||
if (parsed && Array.isArray(parsed.foundWords)) {
|
||||
this.foundWords = new Map(parsed.foundWords);
|
||||
this.score = parsed.score || 0;
|
||||
this.quartilesBonusAwarded = !!parsed.bonus;
|
||||
|
||||
// Re-mark solved quartiles
|
||||
this.updateSolvedQuartileTiles();
|
||||
|
||||
// Restore tile order if saved
|
||||
if (Array.isArray(parsed.tileOrder) && parsed.tileOrder.length === 20) {
|
||||
const tileMap = new Map(this.boardTiles.map(t => [t.id, t]));
|
||||
const reordered = parsed.tileOrder.map(id => tileMap.get(id)).filter(Boolean);
|
||||
if (reordered.length === 20) {
|
||||
this.boardTiles = reordered;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Failed to restore progress:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Check if a tile belongs to an already found Quartile
|
||||
updateSolvedQuartileTiles() {
|
||||
const solvedQuartileWords = new Set();
|
||||
for (const [w, data] of this.foundWords.entries()) {
|
||||
if (data.isTargetQuartile) {
|
||||
solvedQuartileWords.add(w.toLowerCase());
|
||||
}
|
||||
}
|
||||
|
||||
// For each target quartet, check if solved
|
||||
this.boardTiles.forEach(tile => {
|
||||
tile.isQuartileSolved = false;
|
||||
tile.isLocked = false;
|
||||
});
|
||||
|
||||
for (let qIdx = 0; qIdx < this.currentPuzzle.quartets.length; qIdx++) {
|
||||
const quartet = this.currentPuzzle.quartets[qIdx];
|
||||
const word = quartet.join('').toLowerCase();
|
||||
if (solvedQuartileWords.has(word)) {
|
||||
// Mark tiles belonging to this quartet
|
||||
const startTileIndex = qIdx * 4;
|
||||
for (let i = startTileIndex; i < startTileIndex + 4; i++) {
|
||||
const tile = this.boardTiles.find(t => t.id === i);
|
||||
if (tile) {
|
||||
tile.isQuartileSolved = true;
|
||||
if (this.lockQuartiles) {
|
||||
tile.isLocked = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Reorganizes the board: locked solved quartiles go to top rows
|
||||
reorganizeBoard() {
|
||||
this.updateSolvedQuartileTiles();
|
||||
|
||||
if (this.lockQuartiles) {
|
||||
// Group locked solved quartiles first in neat rows
|
||||
const lockedTiles = [];
|
||||
for (let qIdx = 0; qIdx < this.currentPuzzle.quartets.length; qIdx++) {
|
||||
const quartet = this.currentPuzzle.quartets[qIdx];
|
||||
const word = quartet.join('').toLowerCase();
|
||||
if (this.foundWords.has(word)) {
|
||||
const start = qIdx * 4;
|
||||
for (let i = start; i < start + 4; i++) {
|
||||
const t = this.boardTiles.find(tile => tile.id === i);
|
||||
if (t) lockedTiles.push(t);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const lockedSet = new Set(lockedTiles.map(t => t.id));
|
||||
const unlockedTiles = this.boardTiles.filter(t => !lockedSet.has(t.id));
|
||||
|
||||
this.boardTiles = [...lockedTiles, ...unlockedTiles];
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle lock quartiles setting
|
||||
toggleLockQuartiles() {
|
||||
this.lockQuartiles = !this.lockQuartiles;
|
||||
localStorage.setItem('quartiles_lock_setting', this.lockQuartiles ? 'true' : 'false');
|
||||
this.reorganizeBoard();
|
||||
this.notify();
|
||||
this.notifyToast(
|
||||
this.lockQuartiles ? 'Quartiles locked at top' : 'Quartiles unlocked for free shuffle',
|
||||
'info'
|
||||
);
|
||||
}
|
||||
|
||||
// Tile clicked on board: add to tray or remove if already in tray
|
||||
onTileClicked(tileId) {
|
||||
const existingIndex = this.activeTileIds.indexOf(tileId);
|
||||
if (existingIndex !== -1) {
|
||||
// Already selected, remove it
|
||||
this.removeActiveTile(existingIndex);
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.activeTileIds.length >= 4) {
|
||||
this.notifyToast('Maximum 4 tiles per word', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
this.activeTileIds.push(tileId);
|
||||
this.notify();
|
||||
}
|
||||
|
||||
// Remove tile from active tray by index
|
||||
removeActiveTile(index) {
|
||||
if (index >= 0 && index < this.activeTileIds.length) {
|
||||
this.activeTileIds.splice(index, 1);
|
||||
this.notify();
|
||||
}
|
||||
}
|
||||
|
||||
// Reorder tiles in active tray (e.g. from drag & drop)
|
||||
reorderActiveTiles(fromIndex, toIndex) {
|
||||
if (
|
||||
fromIndex >= 0 &&
|
||||
fromIndex < this.activeTileIds.length &&
|
||||
toIndex >= 0 &&
|
||||
toIndex < this.activeTileIds.length &&
|
||||
fromIndex !== toIndex
|
||||
) {
|
||||
const [item] = this.activeTileIds.splice(fromIndex, 1);
|
||||
this.activeTileIds.splice(toIndex, 0, item);
|
||||
this.notify();
|
||||
}
|
||||
}
|
||||
|
||||
// Backspace: removes last tile in tray
|
||||
backspace() {
|
||||
if (this.activeTileIds.length > 0) {
|
||||
this.activeTileIds.pop();
|
||||
this.notify();
|
||||
}
|
||||
}
|
||||
|
||||
// Clear all tiles in tray
|
||||
clearActive() {
|
||||
if (this.activeTileIds.length > 0) {
|
||||
this.activeTileIds = [];
|
||||
this.notify();
|
||||
}
|
||||
}
|
||||
|
||||
// Shuffle unlocked tiles
|
||||
shuffle() {
|
||||
const lockedTiles = this.lockQuartiles ? this.boardTiles.filter(t => t.isLocked) : [];
|
||||
const unlockedTiles = this.lockQuartiles ? this.boardTiles.filter(t => !t.isLocked) : [...this.boardTiles];
|
||||
|
||||
// Fisher-Yates shuffle
|
||||
for (let i = unlockedTiles.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[unlockedTiles[i], unlockedTiles[j]] = [unlockedTiles[j], unlockedTiles[i]];
|
||||
}
|
||||
|
||||
this.boardTiles = [...lockedTiles, ...unlockedTiles];
|
||||
this.saveProgress();
|
||||
this.notify();
|
||||
}
|
||||
|
||||
// Sort unlocked tiles alphabetically
|
||||
sortAlphabetical() {
|
||||
const lockedTiles = this.lockQuartiles ? this.boardTiles.filter(t => t.isLocked) : [];
|
||||
const unlockedTiles = this.lockQuartiles ? this.boardTiles.filter(t => !t.isLocked) : [...this.boardTiles];
|
||||
|
||||
unlockedTiles.sort((a, b) => a.text.localeCompare(b.text));
|
||||
|
||||
this.boardTiles = [...lockedTiles, ...unlockedTiles];
|
||||
this.saveProgress();
|
||||
this.notify();
|
||||
}
|
||||
|
||||
// Submit current word in active construction tray
|
||||
submitWord() {
|
||||
if (this.activeTileIds.length === 0) {
|
||||
this.notifyToast('Tap tiles to form a word', 'info');
|
||||
return { success: false, reason: 'empty' };
|
||||
}
|
||||
|
||||
const constructedWord = this.activeTileIds
|
||||
.map(id => {
|
||||
const tile = this.boardTiles.find(t => t.id === id);
|
||||
return tile ? tile.text.toLowerCase() : '';
|
||||
})
|
||||
.join('');
|
||||
|
||||
// Check if already found
|
||||
if (this.foundWords.has(constructedWord)) {
|
||||
this.notifyToast(`"${constructedWord.toUpperCase()}" already found!`, 'warning');
|
||||
this.activeTileIds = [];
|
||||
this.notify();
|
||||
return { success: false, reason: 'duplicate' };
|
||||
}
|
||||
|
||||
// Look up in current puzzle's valid words list
|
||||
const match = this.currentPuzzle.words.find(w => w.word.toLowerCase() === constructedWord);
|
||||
|
||||
if (!match) {
|
||||
this.notifyToast(`"${constructedWord.toUpperCase()}" is not in the word list`, 'error');
|
||||
return { success: false, reason: 'invalid' };
|
||||
}
|
||||
|
||||
// Valid word!
|
||||
const tileSegments = this.activeTileIds.map(id => {
|
||||
const tile = this.boardTiles.find(t => t.id === id);
|
||||
return tile ? tile.text : '';
|
||||
});
|
||||
const tileCount = this.activeTileIds.length;
|
||||
const isTargetQuartile = this.currentPuzzle.targetQuartiles.some(t => t.toLowerCase() === constructedWord);
|
||||
const isQuartile = tileCount === 4;
|
||||
|
||||
const wordEntry = {
|
||||
word: constructedWord,
|
||||
points: match.points,
|
||||
tileCount,
|
||||
tileSegments,
|
||||
isTargetQuartile,
|
||||
isQuartile,
|
||||
foundAt: Date.now()
|
||||
};
|
||||
|
||||
this.foundWords.set(constructedWord, wordEntry);
|
||||
this.score += match.points;
|
||||
|
||||
// Check if all 5 target quartiles are solved
|
||||
let quartilesCount = 0;
|
||||
for (const target of this.currentPuzzle.targetQuartiles) {
|
||||
if (this.foundWords.has(target.toLowerCase())) {
|
||||
quartilesCount++;
|
||||
}
|
||||
}
|
||||
|
||||
let bonusUnlocked = false;
|
||||
if (quartilesCount === 5 && !this.quartilesBonusAwarded) {
|
||||
this.quartilesBonusAwarded = true;
|
||||
this.score += QUARTILE_COMPLETION_BONUS;
|
||||
bonusUnlocked = true;
|
||||
}
|
||||
|
||||
// Clear active tray
|
||||
this.activeTileIds = [];
|
||||
|
||||
// Reorganize board if quartiles locked
|
||||
this.reorganizeBoard();
|
||||
|
||||
// Save progress and update player stats
|
||||
this.saveProgress();
|
||||
this.updateStats();
|
||||
|
||||
this.notify();
|
||||
|
||||
return {
|
||||
success: true,
|
||||
word: constructedWord,
|
||||
points: match.points,
|
||||
isQuartile,
|
||||
isTargetQuartile,
|
||||
quartilesFound: quartilesCount,
|
||||
bonusUnlocked
|
||||
};
|
||||
}
|
||||
|
||||
// Get target quartiles solved count
|
||||
getTargetQuartilesSolvedCount() {
|
||||
if (!this.currentPuzzle) return 0;
|
||||
let count = 0;
|
||||
for (const q of this.currentPuzzle.targetQuartiles) {
|
||||
if (this.foundWords.has(q.toLowerCase())) count++;
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
// Get rank data
|
||||
getRank() {
|
||||
return getRankInfo(
|
||||
this.score,
|
||||
this.foundWords.size,
|
||||
this.currentPuzzle ? this.currentPuzzle.wordCount : 0
|
||||
);
|
||||
}
|
||||
|
||||
// Progressive hint system
|
||||
getHint() {
|
||||
if (!this.currentPuzzle) return null;
|
||||
|
||||
// 1. Prioritize unfound target Quartiles
|
||||
const unfoundQuartiles = this.currentPuzzle.quartileDetails.filter(
|
||||
qd => !this.foundWords.has(qd.word.toLowerCase())
|
||||
);
|
||||
|
||||
if (unfoundQuartiles.length > 0) {
|
||||
const target = unfoundQuartiles[this.hintIndex % unfoundQuartiles.length];
|
||||
this.hintIndex++;
|
||||
return {
|
||||
type: 'quartile',
|
||||
word: target.word,
|
||||
firstTile: target.tiles[0].toUpperCase(),
|
||||
clue: target.clue || 'A 4-part Quartile word',
|
||||
remainingQuartiles: unfoundQuartiles.length
|
||||
};
|
||||
}
|
||||
|
||||
// 2. Unfound other words
|
||||
const unfoundWords = this.currentPuzzle.words.filter(
|
||||
w => !this.foundWords.has(w.word.toLowerCase())
|
||||
);
|
||||
|
||||
if (unfoundWords.length > 0) {
|
||||
const sample = unfoundWords[Math.floor(Math.random() * unfoundWords.length)];
|
||||
return {
|
||||
type: 'word',
|
||||
tileCount: sample.tileCount,
|
||||
firstTile: sample.tileSegments[0].toUpperCase(),
|
||||
points: sample.points,
|
||||
remainingWords: unfoundWords.length
|
||||
};
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Reveal all words (when expert reached or explicitly requested)
|
||||
revealAllWords() {
|
||||
this.isRevealed = true;
|
||||
this.notify();
|
||||
}
|
||||
|
||||
// Update persistent stats in LocalStorage
|
||||
updateStats() {
|
||||
try {
|
||||
const statsKey = 'quartiles_player_stats';
|
||||
const stats = JSON.parse(localStorage.getItem(statsKey) || '{}');
|
||||
|
||||
stats.totalWordsFound = (stats.totalWordsFound || 0) + 1;
|
||||
const rank = this.getRank();
|
||||
if (rank.isExpert) {
|
||||
stats.expertPuzzles = stats.expertPuzzles || {};
|
||||
stats.expertPuzzles[this.currentPuzzle.id] = true;
|
||||
}
|
||||
if (rank.isPerfect) {
|
||||
stats.perfectPuzzles = stats.perfectPuzzles || {};
|
||||
stats.perfectPuzzles[this.currentPuzzle.id] = true;
|
||||
}
|
||||
|
||||
localStorage.setItem(statsKey, JSON.stringify(stats));
|
||||
} catch (err) {
|
||||
console.warn('Stats update error:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Get player stats
|
||||
getStats() {
|
||||
try {
|
||||
const statsKey = 'quartiles_player_stats';
|
||||
const stats = JSON.parse(localStorage.getItem(statsKey) || '{}');
|
||||
const expertCount = Object.keys(stats.expertPuzzles || {}).length;
|
||||
const perfectCount = Object.keys(stats.perfectPuzzles || {}).length;
|
||||
|
||||
return {
|
||||
totalWordsFound: stats.totalWordsFound || 0,
|
||||
expertCount,
|
||||
perfectCount
|
||||
};
|
||||
} catch (err) {
|
||||
return { totalWordsFound: 0, expertCount: 0, perfectCount: 0 };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const gameState = new GameStateManager();
|
||||
300
src/styles/board.css
Normal file
300
src/styles/board.css
Normal file
@@ -0,0 +1,300 @@
|
||||
/* ==========================================================================
|
||||
BOARD & WORD BUILDER STYLES
|
||||
========================================================================== */
|
||||
|
||||
/* Active Word Construction Tray */
|
||||
.word-builder-wrapper {
|
||||
margin: 6px 0 10px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.word-builder {
|
||||
min-height: 52px;
|
||||
background: var(--bg-surface);
|
||||
backdrop-filter: blur(18px);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
border: 1.5px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 8px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
|
||||
transition: all var(--transition-normal);
|
||||
}
|
||||
|
||||
.word-builder.has-tiles {
|
||||
border-color: var(--border-highlight);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.word-builder.invalid-shake {
|
||||
animation: shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
|
||||
border-color: var(--accent-danger);
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
10%, 90% { transform: translate3d(-2px, 0, 0); }
|
||||
20%, 80% { transform: translate3d(4px, 0, 0); }
|
||||
30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
|
||||
40%, 60% { transform: translate3d(6px, 0, 0); }
|
||||
}
|
||||
|
||||
/* Selected Tiles in Tray */
|
||||
.active-tiles-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-height: 48px;
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.active-tiles-container::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.builder-placeholder {
|
||||
color: var(--text-tertiary);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
/* Active Tile Chip */
|
||||
.active-tile-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 8px 14px;
|
||||
background: var(--tile-bg);
|
||||
color: var(--text-primary);
|
||||
border: 1.5px solid var(--tile-border);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1.12rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
box-shadow: var(--tile-shadow);
|
||||
cursor: grab;
|
||||
position: relative;
|
||||
transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
|
||||
animation: chipInsert 0.22s var(--ease-spring);
|
||||
}
|
||||
|
||||
.active-tile-chip:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.active-tile-chip.dragging {
|
||||
opacity: 0.4;
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
.active-tile-chip.drag-over {
|
||||
border-color: var(--accent-blue);
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.active-tile-chip .remove-icon {
|
||||
margin-left: 6px;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-tertiary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@keyframes chipInsert {
|
||||
0% { transform: scale(0.7) translateY(8px); opacity: 0; }
|
||||
100% { transform: scale(1) translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Action controls inside the tray */
|
||||
.builder-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.btn-icon-tray {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-icon-tray:hover {
|
||||
background: var(--border-highlight);
|
||||
color: var(--text-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-icon-tray:active {
|
||||
transform: translateY(1px) scale(0.94);
|
||||
}
|
||||
|
||||
.btn-submit-tray {
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--accent-submit-gradient);
|
||||
color: #ffffff;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
box-shadow: 0 2px 8px var(--accent-submit-glow);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-submit-tray:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px var(--accent-submit-glow);
|
||||
}
|
||||
|
||||
.btn-submit-tray:active {
|
||||
transform: translateY(1px) scale(0.96);
|
||||
}
|
||||
|
||||
.btn-submit-tray:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
THE 4x5 BOARD GRID (20 TILES)
|
||||
========================================================================== */
|
||||
|
||||
.board-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tiles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-gap: 8px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.tiles-grid {
|
||||
grid-gap: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Single Board Tile */
|
||||
.board-tile {
|
||||
aspect-ratio: 1.35 / 1;
|
||||
max-height: 56px;
|
||||
min-height: 44px;
|
||||
background: var(--tile-bg);
|
||||
border: 1.5px solid var(--tile-border);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--tile-shadow);
|
||||
color: var(--tile-text);
|
||||
font-size: 1.12rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.board-tile {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.board-tile:hover:not(.selected) {
|
||||
background: var(--tile-bg-hover);
|
||||
border-color: var(--border-highlight);
|
||||
box-shadow: var(--tile-shadow-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.board-tile:active:not(.selected) {
|
||||
background: var(--tile-bg-active);
|
||||
transform: translateY(1px) scale(0.96);
|
||||
box-shadow: var(--tile-shadow-selected);
|
||||
}
|
||||
|
||||
/* Selected state: tile is currently in construction tray */
|
||||
.board-tile.selected {
|
||||
opacity: 0.38;
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-subtle);
|
||||
transform: scale(0.95);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.board-tile.selected::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 6px;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 900;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Locked solved Quartile tile state */
|
||||
.board-tile.locked {
|
||||
background: linear-gradient(145deg, var(--tile-bg), var(--bg-tertiary));
|
||||
border-color: var(--accent-quartile);
|
||||
}
|
||||
|
||||
.board-tile.locked::before {
|
||||
content: '🔒';
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 6px;
|
||||
font-size: 0.65rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Board tile shuffle animation */
|
||||
.board-tile.flipping {
|
||||
animation: tileFlip 0.4s var(--ease-smooth);
|
||||
}
|
||||
|
||||
@keyframes tileFlip {
|
||||
0% { transform: scale(1) rotateY(0); }
|
||||
50% { transform: scale(0.85) rotateY(90deg); opacity: 0.5; }
|
||||
100% { transform: scale(1) rotateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
/* Solved Quartile Section Header */
|
||||
.locked-section-divider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 6px;
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--accent-quartile);
|
||||
}
|
||||
664
src/styles/components.css
Normal file
664
src/styles/components.css
Normal file
@@ -0,0 +1,664 @@
|
||||
/* ==========================================================================
|
||||
COMPONENTS: HEADER, SCORE BAR, ACTION BAR, DRAWER & MODALS
|
||||
========================================================================== */
|
||||
|
||||
/* Header */
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0 8px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.header-brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.title-badge {
|
||||
font-size: 0.62rem;
|
||||
font-weight: 700;
|
||||
padding: 2px 6px;
|
||||
background: var(--accent-quartile-gradient);
|
||||
color: #ffffff;
|
||||
border-radius: var(--radius-full);
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.header-date-badge {
|
||||
font-size: 0.78rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.btn-header-icon {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: var(--radius-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
font-size: 0.95rem;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-header-icon:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-header-icon:active {
|
||||
transform: scale(0.92);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
SCORE, RANK & QUARTILES PROGRESS BAR
|
||||
========================================================================== */
|
||||
|
||||
.score-rank-card {
|
||||
background: var(--bg-surface);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 8px 14px;
|
||||
margin-bottom: 6px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
|
||||
.score-rank-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.score-display {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.score-num {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--text-primary);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.score-label {
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.rank-badge-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.rank-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 3px 10px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.rank-pill.expert {
|
||||
background: var(--accent-quartile-gradient);
|
||||
color: #ffffff;
|
||||
box-shadow: 0 2px 8px var(--accent-quartile-glow);
|
||||
}
|
||||
|
||||
/* Rank Progress Bar */
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
height: 5px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-full);
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.progress-bar-fill {
|
||||
height: 100%;
|
||||
background: var(--accent-submit-gradient);
|
||||
border-radius: var(--radius-full);
|
||||
transition: width 0.4s var(--ease-smooth);
|
||||
}
|
||||
|
||||
.progress-bar-fill.expert {
|
||||
background: var(--accent-quartile-gradient);
|
||||
}
|
||||
|
||||
/* Quartiles 5-Segment Indicator */
|
||||
.quartiles-indicator-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 6px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.quartiles-counter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.quartiles-segments {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.quartile-segment-pip {
|
||||
width: 28px;
|
||||
height: 9px;
|
||||
border-radius: 4px;
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s var(--ease-spring);
|
||||
}
|
||||
|
||||
.quartile-segment-pip.solved {
|
||||
background: var(--accent-quartile-gradient);
|
||||
border-color: var(--accent-quartile);
|
||||
box-shadow: 0 0 8px var(--accent-quartile-glow);
|
||||
transform: scaleY(1.15);
|
||||
}
|
||||
|
||||
.quartile-bonus-badge {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
padding: 2px 8px;
|
||||
background: var(--accent-quartile-gradient);
|
||||
color: #ffffff;
|
||||
border-radius: var(--radius-full);
|
||||
box-shadow: 0 2px 6px var(--accent-quartile-glow);
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.05); }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
WORDS FOUND STRIP / BUTTON
|
||||
========================================================================== */
|
||||
|
||||
.words-found-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.btn-words-drawer {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 12px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-words-drawer:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-words-drawer .badge-count {
|
||||
background: var(--accent-blue);
|
||||
color: #ffffff;
|
||||
padding: 1px 6px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
ACTION BAR (SHUFFLE, SORT, LOCK, HINT)
|
||||
========================================================================== */
|
||||
|
||||
.action-bar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 6px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.btn-action {
|
||||
height: 38px;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.03);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-action:hover {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-highlight);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.btn-action:active {
|
||||
transform: translateY(1px) scale(0.96);
|
||||
}
|
||||
|
||||
.btn-action.active {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--accent-quartile);
|
||||
color: var(--accent-quartile);
|
||||
}
|
||||
|
||||
.btn-action .action-icon {
|
||||
font-size: 1.05rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
WORDS FOUND DRAWER / MODAL
|
||||
========================================================================== */
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity var(--transition-normal);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.modal-backdrop {
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop.open {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.modal-sheet {
|
||||
background: var(--bg-secondary);
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
max-height: 85vh;
|
||||
border-radius: 24px 24px 0 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
|
||||
transform: translateY(100%);
|
||||
transition: transform var(--transition-normal);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.modal-sheet {
|
||||
border-radius: 20px;
|
||||
max-height: 80vh;
|
||||
transform: scale(0.95) translateY(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-backdrop.open .modal-sheet {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.modal-backdrop.open .modal-sheet {
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-handle {
|
||||
width: 36px;
|
||||
height: 5px;
|
||||
background: var(--border-color);
|
||||
border-radius: var(--radius-full);
|
||||
margin: 10px auto 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.sheet-handle {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
padding: 14px 20px 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.sheet-title {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-close-sheet {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: var(--radius-full);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/* Tabs inside Drawer */
|
||||
.sheet-tabs {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
padding: 10px 18px;
|
||||
border-bottom: 1px solid var(--border-subtle);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.sheet-tabs::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
background: var(--bg-tertiary);
|
||||
white-space: nowrap;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.tab-btn.active {
|
||||
background: var(--text-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
/* Words List Content */
|
||||
.sheet-body {
|
||||
padding: 16px 20px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.word-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 14px;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.word-card.quartile-card {
|
||||
border-color: var(--accent-quartile);
|
||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), transparent);
|
||||
}
|
||||
|
||||
.word-card-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
}
|
||||
|
||||
.word-card-word {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.word-card-tiles {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tile-chip-mini {
|
||||
font-size: 0.72rem;
|
||||
font-weight: 600;
|
||||
padding: 1px 6px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.word-card-points {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 800;
|
||||
color: var(--accent-submit);
|
||||
}
|
||||
|
||||
.word-card.quartile-card .word-card-points {
|
||||
color: var(--accent-quartile);
|
||||
}
|
||||
|
||||
.sheet-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.btn-reveal-all {
|
||||
font-size: 0.82rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-danger);
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-reveal-all:hover {
|
||||
background: rgba(239, 68, 68, 0.18);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
TOAST NOTIFICATIONS
|
||||
========================================================================== */
|
||||
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
padding: 10px 18px;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.88rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
animation: toastPop 0.3s var(--ease-spring);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@keyframes toastPop {
|
||||
0% { transform: scale(0.8) translateY(-16px); opacity: 0; }
|
||||
100% { transform: scale(1) translateY(0); opacity: 1; }
|
||||
}
|
||||
|
||||
.toast.toast-info {
|
||||
background: var(--text-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.toast.toast-success {
|
||||
background: var(--accent-submit-gradient);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.toast.toast-quartile {
|
||||
background: var(--accent-quartile-gradient);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.toast.toast-warning {
|
||||
background: #f59e0b;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.toast.toast-error {
|
||||
background: var(--accent-danger);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Calendar & Custom Modals Content */
|
||||
.puzzles-list-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.puzzle-card-select {
|
||||
padding: 12px;
|
||||
background: var(--bg-primary);
|
||||
border: 1.5px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: left;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.puzzle-card-select:hover {
|
||||
border-color: var(--accent-quartile);
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.puzzle-card-select.active {
|
||||
border-color: var(--accent-quartile);
|
||||
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent);
|
||||
}
|
||||
|
||||
.custom-builder-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.custom-quartet-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.custom-quartet-input {
|
||||
height: 38px;
|
||||
text-align: center;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1.5px solid var(--border-color);
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.custom-quartet-input:focus {
|
||||
border-color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.btn-primary-modal {
|
||||
height: 44px;
|
||||
background: var(--accent-submit-gradient);
|
||||
color: #ffffff;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
box-shadow: 0 4px 12px var(--accent-submit-glow);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-primary-modal:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
142
src/styles/main.css
Normal file
142
src/styles/main.css
Normal file
@@ -0,0 +1,142 @@
|
||||
/* ==========================================================================
|
||||
QUARTILES DESIGN SYSTEM - APPLE NEWS+ PREMIUM AESTHETICS
|
||||
========================================================================== */
|
||||
|
||||
:root {
|
||||
/* Color Palette - Light Theme */
|
||||
--bg-primary: #f5f5f7;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #e5e5ea;
|
||||
--bg-surface: rgba(255, 255, 255, 0.85);
|
||||
--bg-glass: rgba(255, 255, 255, 0.72);
|
||||
--border-color: rgba(0, 0, 0, 0.08);
|
||||
--border-subtle: rgba(0, 0, 0, 0.04);
|
||||
--border-highlight: rgba(0, 0, 0, 0.16);
|
||||
|
||||
--text-primary: #1c1c1e;
|
||||
--text-secondary: #636366;
|
||||
--text-tertiary: #8e8e93;
|
||||
--text-inverse: #ffffff;
|
||||
|
||||
/* Accent Colors */
|
||||
--accent-quartile: #d97706;
|
||||
--accent-quartile-gradient: linear-gradient(135deg, #f59e0b, #d97706);
|
||||
--accent-quartile-glow: rgba(245, 158, 11, 0.35);
|
||||
|
||||
--accent-submit: #10b981;
|
||||
--accent-submit-gradient: linear-gradient(135deg, #34d399, #059669);
|
||||
--accent-submit-glow: rgba(16, 185, 129, 0.3);
|
||||
|
||||
--accent-blue: #0284c7;
|
||||
--accent-blue-gradient: linear-gradient(135deg, #38bdf8, #0284c7);
|
||||
|
||||
--accent-purple: #6366f1;
|
||||
--accent-danger: #ef4444;
|
||||
|
||||
/* Tile Styling */
|
||||
--tile-bg: #ffffff;
|
||||
--tile-bg-hover: #fcfcfd;
|
||||
--tile-bg-active: #ebebed;
|
||||
--tile-text: #1d1d1f;
|
||||
--tile-border: #d2d2d7;
|
||||
--tile-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
--tile-shadow-hover: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
|
||||
--tile-shadow-selected: inset 0 2px 4px rgba(0, 0, 0, 0.06);
|
||||
|
||||
/* Dimensions & Radius */
|
||||
--radius-xs: 6px;
|
||||
--radius-sm: 10px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 18px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Transitions */
|
||||
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
--ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--transition-fast: 0.15s ease;
|
||||
--transition-normal: 0.25s var(--ease-smooth);
|
||||
}
|
||||
|
||||
/* Dark Theme Overrides */
|
||||
[data-theme='dark'] {
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: #1c1c1e;
|
||||
--bg-tertiary: #2c2c2e;
|
||||
--bg-surface: rgba(28, 28, 30, 0.88);
|
||||
--bg-glass: rgba(28, 28, 30, 0.75);
|
||||
--border-color: rgba(255, 255, 255, 0.12);
|
||||
--border-subtle: rgba(255, 255, 255, 0.06);
|
||||
--border-highlight: rgba(255, 255, 255, 0.24);
|
||||
|
||||
--text-primary: #f5f5f7;
|
||||
--text-secondary: #a1a1a6;
|
||||
--text-tertiary: #6e6e73;
|
||||
--text-inverse: #000000;
|
||||
|
||||
/* Tile Styling Dark */
|
||||
--tile-bg: #2c2c2e;
|
||||
--tile-bg-hover: #3a3a3c;
|
||||
--tile-bg-active: #1c1c1e;
|
||||
--tile-text: #f5f5f7;
|
||||
--tile-border: rgba(255, 255, 255, 0.14);
|
||||
--tile-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
|
||||
--tile-shadow-hover: 0 6px 14px rgba(0, 0, 0, 0.55);
|
||||
--tile-shadow-selected: inset 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
|
||||
--accent-quartile: #f59e0b;
|
||||
--accent-quartile-glow: rgba(245, 158, 11, 0.45);
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
RESET & TYPOGRAPHY
|
||||
========================================================================== */
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
line-height: 1.45;
|
||||
letter-spacing: -0.01em;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
transition: background-color var(--transition-normal), color var(--transition-normal);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* App Container */
|
||||
.app-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
padding: 6px 14px 16px;
|
||||
position: relative;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.app-container {
|
||||
max-width: 480px;
|
||||
padding: 10px 16px 20px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user