AlacrisDevs
2 weeks ago
parent
facb36a07f
commit
0955d6ca65
31 changed files with 3386 additions and 1391 deletions
@ -0,0 +1,541 @@ |
||||
# Kuldvillak/Jeopardy Game Platform - Technical Documentation |
||||
|
||||
## Table of Contents |
||||
- [Overview](#overview) |
||||
- [Tech Stack](#tech-stack) |
||||
- [Architecture](#architecture) |
||||
- [Directory Structure](#directory-structure) |
||||
- [Game Flow](#game-flow) |
||||
- [State Management](#state-management) |
||||
- [Components](#components) |
||||
- [Data Types](#data-types) |
||||
- [Features](#features) |
||||
- [Multi-Window Sync](#multi-window-sync) |
||||
|
||||
--- |
||||
|
||||
## Overview |
||||
|
||||
**Ultimate Gaming** is a web-based platform for hosting trivia game shows, currently featuring **Kuldvillak** - a Jeopardy-style quiz game. The platform supports: |
||||
|
||||
- Full game editor with customizable settings |
||||
- Dual-screen setup (Moderator + Projector views) |
||||
- Real-time cross-tab synchronization |
||||
- Theme customization |
||||
- Internationalization (Estonian/English) |
||||
- Audio management |
||||
- Persistent game storage |
||||
|
||||
--- |
||||
|
||||
## Tech Stack |
||||
|
||||
| Technology | Version | Purpose | |
||||
|------------|---------|---------| |
||||
| **SvelteKit** | 2.48.5 | Full-stack framework | |
||||
| **Svelte 5** | 5.43.8 | UI with Runes reactivity | |
||||
| **TailwindCSS** | 4.1.17 | Utility-first styling | |
||||
| **TypeScript** | 5.9.3 | Type safety | |
||||
| **Paraglide** | 2.5.0 | i18n (internationalization) | |
||||
| **Vite** | 7.2.2 | Build tool | |
||||
|
||||
--- |
||||
|
||||
## Architecture |
||||
|
||||
``` |
||||
┌─────────────────────────────────────────────────────────────┐ |
||||
│ Ultimate Gaming │ |
||||
├─────────────────────────────────────────────────────────────┤ |
||||
│ Routes │ |
||||
│ ├── / (Home - Game Selection) │ |
||||
│ ├── /kuldvillak (Game Menu) │ |
||||
│ ├── /kuldvillak/edit (Game Editor) │ |
||||
│ └── /kuldvillak/play (Game Play) │ |
||||
│ ├── ModeratorView (Controls) │ |
||||
│ └── ProjectorView (Display) │ |
||||
├─────────────────────────────────────────────────────────────┤ |
||||
│ State Management (Svelte 5 Runes) │ |
||||
│ ├── gameSession.svelte.ts (Live game state + BroadcastAPI) │ |
||||
│ ├── kuldvillak.svelte.ts (Game store - editor) │ |
||||
│ ├── theme.svelte.ts (Color theming) │ |
||||
│ ├── audio.svelte.ts (Music/SFX volumes) │ |
||||
│ └── persistence.ts (localStorage utilities) │ |
||||
├─────────────────────────────────────────────────────────────┤ |
||||
│ Components │ |
||||
│ ├── Shared (Settings, ColorPicker, Toast, etc.) │ |
||||
│ └── Kuldvillak UI (Buttons, Cards, Logo, etc.) │ |
||||
└─────────────────────────────────────────────────────────────┘ |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## Directory Structure |
||||
|
||||
``` |
||||
src/ |
||||
├── lib/ |
||||
│ ├── assets/ # Static assets (favicon) |
||||
│ ├── components/ |
||||
│ │ ├── kuldvillak/ |
||||
│ │ │ └── ui/ # Game-specific UI components |
||||
│ │ │ ├── KvButtonPrimary.svelte |
||||
│ │ │ ├── KvButtonSecondary.svelte |
||||
│ │ │ ├── KvEditCard.svelte |
||||
│ │ │ ├── KvGameLogo.svelte |
||||
│ │ │ ├── KvNumberInput.svelte |
||||
│ │ │ ├── KvPlayerCard.svelte |
||||
│ │ │ └── KvProjectorCard.svelte |
||||
│ │ ├── ColorPicker.svelte |
||||
│ │ ├── ConfirmDialog.svelte |
||||
│ │ ├── LanguageSwitcher.svelte |
||||
│ │ ├── Settings.svelte |
||||
│ │ ├── Slider.svelte |
||||
│ │ └── Toast.svelte |
||||
│ ├── paraglide/ # Generated i18n code |
||||
│ ├── stores/ |
||||
│ │ ├── audio.svelte.ts |
||||
│ │ ├── gameSession.svelte.ts |
||||
│ │ ├── kuldvillak.svelte.ts |
||||
│ │ ├── persistence.ts |
||||
│ │ └── theme.svelte.ts |
||||
│ ├── types/ |
||||
│ │ └── kuldvillak.ts # TypeScript interfaces |
||||
│ └── index.ts # Library exports |
||||
├── routes/ |
||||
│ ├── kuldvillak/ |
||||
│ │ ├── edit/ |
||||
│ │ │ └── +page.svelte # Game editor |
||||
│ │ ├── play/ |
||||
│ │ │ ├── +page.svelte # Route handler |
||||
│ │ │ ├── ModeratorView.svelte |
||||
│ │ │ └── ProjectorView.svelte |
||||
│ │ ├── +layout.svelte |
||||
│ │ └── +page.svelte # Game menu |
||||
│ ├── +error.svelte |
||||
│ ├── +layout.svelte # Root layout |
||||
│ ├── +page.svelte # Home page |
||||
│ └── layout.css # Global styles + Tailwind |
||||
├── app.html |
||||
├── app.d.ts |
||||
├── hooks.server.ts |
||||
└── hooks.ts |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## Game Flow |
||||
|
||||
### 1. Game Creation (Editor) |
||||
``` |
||||
/kuldvillak/edit |
||||
│ |
||||
├── Configure Settings |
||||
│ ├── Number of rounds (1-2) |
||||
│ ├── Timer durations |
||||
│ ├── Point values (preset or custom) |
||||
│ ├── Daily doubles per round |
||||
│ └── Enable/disable final round |
||||
│ |
||||
├── Add Teams (2-6 players) |
||||
│ |
||||
├── Fill Categories & Questions |
||||
│ ├── 6 categories per round |
||||
│ ├── 5 questions per category |
||||
│ └── Mark daily doubles |
||||
│ |
||||
├── Final Round Question (optional) |
||||
│ |
||||
└── Start Game → Opens Moderator + Projector views |
||||
``` |
||||
|
||||
### 2. Game Phases |
||||
``` |
||||
┌─────────────┐ |
||||
│ intro │ ← Kuldvillak logo screen |
||||
└──────┬──────┘ |
||||
│ |
||||
┌──────▼──────────────┐ |
||||
│ intro-categories │ ← Category reveal animation |
||||
└──────┬──────────────┘ |
||||
│ |
||||
┌──────▼──────┐ |
||||
│ board │ ← Question selection grid |
||||
└──────┬──────┘ |
||||
│ |
||||
┌──────▼──────────────┐ |
||||
│ daily-double (if) │ ← Wager selection |
||||
└──────┬──────────────┘ |
||||
│ |
||||
┌──────▼──────┐ |
||||
│ question │ ← Display question, teams answer |
||||
└──────┬──────┘ |
||||
│ |
||||
├── Correct → Award points |
||||
├── Wrong → Deduct points, next team |
||||
└── Skip → Reveal answer |
||||
│ |
||||
└──────► Back to board |
||||
│ |
||||
│ (After all questions) |
||||
│ |
||||
┌──────▼────────────────┐ |
||||
│ final-intro │ ← Final round logo |
||||
├───────────────────────┤ |
||||
│ final-category │ ← Reveal final category |
||||
├───────────────────────┤ |
||||
│ final-question │ ← Teams write answers + wagers |
||||
├───────────────────────┤ |
||||
│ final-scores │ ← Final standings |
||||
└───────────────────────┘ |
||||
│ |
||||
┌──────▼──────┐ |
||||
│ finished │ |
||||
└─────────────┘ |
||||
``` |
||||
|
||||
### 3. Question Flow |
||||
``` |
||||
Question Selected |
||||
│ |
||||
├── Is Daily Double? |
||||
│ │ |
||||
│ ├── YES → Select team → Enter wager → Show question |
||||
│ └── NO → Show question directly |
||||
│ |
||||
▼ |
||||
Display Question |
||||
│ |
||||
├── Timer starts |
||||
│ |
||||
├── Team clicks to answer |
||||
│ │ |
||||
│ ├── Timer pauses |
||||
│ │ |
||||
│ ├── Moderator marks Correct/Wrong |
||||
│ │ │ |
||||
│ │ ├── Correct → +points → Show answer → Return to board |
||||
│ │ └── Wrong → -points → Continue (others can try) |
||||
│ │ |
||||
│ └── All teams wrong → Auto-reveal answer |
||||
│ |
||||
└── Timer expires → Auto-reveal answer |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## State Management |
||||
|
||||
### GameSessionStore (`gameSession.svelte.ts`) |
||||
|
||||
The heart of the game - manages live game state with cross-tab synchronization. |
||||
|
||||
**Key Features:** |
||||
- Uses `BroadcastChannel` API for real-time sync between Moderator and Projector |
||||
- Persists to `localStorage` for session recovery |
||||
- Single internal timer managed by moderator view |
||||
|
||||
**State Interface:** |
||||
```typescript |
||||
interface GameSessionState { |
||||
// Game data |
||||
name: string; |
||||
settings: GameSettings; |
||||
teams: Team[]; |
||||
rounds: Round[]; |
||||
finalRound: FinalRound | null; |
||||
|
||||
// Game phase |
||||
phase: GamePhase; |
||||
currentRoundIndex: number; |
||||
activeTeamId: string | null; |
||||
|
||||
// Animation state |
||||
introCategoryIndex: number; |
||||
categoriesIntroduced: boolean; |
||||
boardRevealed: boolean; |
||||
|
||||
// Question state |
||||
currentQuestion: { roundIndex, categoryIndex, questionIndex } | null; |
||||
showAnswer: boolean; |
||||
wrongTeamIds: string[]; |
||||
lastAnsweredTeamId: string | null; |
||||
lastAnswerCorrect: boolean | null; |
||||
|
||||
// Daily Double |
||||
dailyDoubleWager: number | null; |
||||
|
||||
// Final Round |
||||
finalCategoryRevealed: boolean; |
||||
finalWagers: Record<string, number>; |
||||
finalAnswers: Record<string, string>; |
||||
finalRevealed: string[]; |
||||
|
||||
// Timer |
||||
timerRunning: boolean; |
||||
timerSeconds: number; |
||||
timerMax: number; |
||||
timeoutCountdown: number | null; |
||||
revealCountdown: number | null; |
||||
skippingQuestion: boolean; |
||||
|
||||
// Tracking |
||||
questionsAnswered: number; |
||||
currentQuestionNumber: number; |
||||
questionResults: QuestionResult[]; |
||||
} |
||||
``` |
||||
|
||||
### ThemeStore (`theme.svelte.ts`) |
||||
|
||||
Manages color theming with cross-window sync. |
||||
|
||||
**CSS Variables controlled:** |
||||
- `--kv-blue` (primary) |
||||
- `--kv-yellow` (secondary) |
||||
- `--kv-text` |
||||
- `--kv-background` |
||||
|
||||
### AudioStore (`audio.svelte.ts`) |
||||
|
||||
Manages background music and sound effects volumes. |
||||
|
||||
--- |
||||
|
||||
## Components |
||||
|
||||
### Shared Components |
||||
|
||||
| Component | Purpose | |
||||
|-----------|---------| |
||||
| `Settings.svelte` | Modal with audio, language, and color settings | |
||||
| `ColorPicker.svelte` | Full HSL color picker with swatches | |
||||
| `ConfirmDialog.svelte` | Confirmation modal | |
||||
| `Toast.svelte` | Notification messages | |
||||
| `Slider.svelte` | Volume control slider | |
||||
| `LanguageSwitcher.svelte` | ET/EN language toggle | |
||||
|
||||
### Kuldvillak UI Components |
||||
|
||||
| Component | Purpose | |
||||
|-----------|---------| |
||||
| `KvButtonPrimary.svelte` | Yellow primary action button | |
||||
| `KvButtonSecondary.svelte` | Blue secondary action button | |
||||
| `KvEditCard.svelte` | Team card for moderator (score adjust, correct/wrong) | |
||||
| `KvPlayerCard.svelte` | Basic player display card | |
||||
| `KvProjectorCard.svelte` | Player card for projector view | |
||||
| `KvNumberInput.svelte` | Styled number input with +/- buttons | |
||||
| `KvGameLogo.svelte` | SVG logo component with variants | |
||||
|
||||
--- |
||||
|
||||
## Data Types |
||||
|
||||
### Core Types (`types/kuldvillak.ts`) |
||||
|
||||
```typescript |
||||
interface Question { |
||||
id: string; |
||||
question: string; |
||||
answer: string; |
||||
points: number; |
||||
isDailyDouble: boolean; |
||||
isRevealed: boolean; |
||||
imageUrl?: string; |
||||
} |
||||
|
||||
interface Category { |
||||
id: string; |
||||
name: string; |
||||
questions: Question[]; |
||||
} |
||||
|
||||
interface Round { |
||||
id: string; |
||||
name: string; |
||||
categories: Category[]; |
||||
pointMultiplier: number; |
||||
} |
||||
|
||||
interface Team { |
||||
id: string; |
||||
name: string; |
||||
score: number; |
||||
} |
||||
|
||||
interface GameSettings { |
||||
numberOfRounds: 1 | 2; |
||||
pointValuePreset: 'round1' | 'round2' | 'custom' | 'multiplier'; |
||||
pointValues: number[]; |
||||
basePointValue: number; |
||||
categoriesPerRound: number; // Default: 6 |
||||
questionsPerCategory: number; // Default: 5 |
||||
dailyDoublesPerRound: number[]; |
||||
enableFinalRound: boolean; |
||||
enableSoundEffects: boolean; |
||||
allowNegativeScores: boolean; |
||||
maxTeams: number; // Max: 6 |
||||
defaultTimerSeconds: number; |
||||
answerRevealSeconds: number; |
||||
} |
||||
|
||||
type GamePhase = |
||||
| 'intro' // Logo screen |
||||
| 'intro-categories' // Category reveal |
||||
| 'lobby' |
||||
| 'board' // Question grid |
||||
| 'question' |
||||
| 'answer' |
||||
| 'daily-double' |
||||
| 'final-intro' |
||||
| 'final-category' |
||||
| 'final-wagers' |
||||
| 'final-question' |
||||
| 'final-reveal' |
||||
| 'final-scores' |
||||
| 'finished'; |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## Features |
||||
|
||||
### 1. Game Editor |
||||
- Auto-save to localStorage |
||||
- Import/Export JSON game files |
||||
- Visual daily double indicators |
||||
- Point value presets or custom |
||||
- Final round configuration |
||||
|
||||
### 2. Moderator View |
||||
- Full game control |
||||
- Score adjustments |
||||
- Timer control (start/stop/reset) |
||||
- Question skip functionality |
||||
- Open projector window button |
||||
|
||||
### 3. Projector View |
||||
- Full-screen presentation |
||||
- Animated category introductions |
||||
- Staggered board reveal animation |
||||
- Question expand animation |
||||
- Team score display during questions |
||||
- Final scores display |
||||
|
||||
### 4. Animations (ProjectorView) |
||||
- **Category Intro**: 500ms fade-in → 1500ms shown → 500ms push-out |
||||
- **Board Reveal**: Staggered 50ms per cell |
||||
- **Question Expand**: From grid cell position to fullscreen |
||||
|
||||
### 5. Cross-Tab Sync |
||||
- Real-time state sync via BroadcastChannel |
||||
- localStorage persistence for recovery |
||||
- Single timer owner (moderator) |
||||
|
||||
--- |
||||
|
||||
## Multi-Window Sync |
||||
|
||||
``` |
||||
┌─────────────────┐ BroadcastChannel ┌─────────────────┐ |
||||
│ Moderator Tab │ ◄─────────────────────────────► │ Projector Tab │ |
||||
│ │ │ │ |
||||
│ - Controls │ STATE_UPDATE │ - Display │ |
||||
│ - Timer owner │ ─────────────────────────────────►│ - Animations │ |
||||
│ - Score adjust │ │ - Read-only │ |
||||
└────────┬────────┘ └─────────────────┘ |
||||
│ |
||||
│ localStorage |
||||
▼ |
||||
┌─────────────────┐ |
||||
│ Session Store │ |
||||
│ (persistence) │ |
||||
└─────────────────┘ |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## Styling |
||||
|
||||
### Design Tokens (CSS Variables) |
||||
|
||||
```css |
||||
:root { |
||||
/* Colors */ |
||||
--kv-blue: #003B9B; /* Primary */ |
||||
--kv-yellow: #FFAB00; /* Secondary/Accent */ |
||||
--kv-text: #FFFFFF; |
||||
--kv-background: #000000; |
||||
--kv-green: #009900; /* Correct */ |
||||
--kv-red: #FF3333; /* Wrong */ |
||||
|
||||
/* Fonts */ |
||||
--kv-font-title: 'Swiss 921'; |
||||
--kv-font-body: 'Swiss 921'; |
||||
--kv-font-price: 'Bebas Neue'; |
||||
--kv-font-question: 'ITC Korinna'; |
||||
|
||||
/* Shadows */ |
||||
--kv-shadow-text: 6px 6px 4px rgba(0,0,0,0.5); |
||||
--kv-shadow-price: 8px 8px 4px rgba(0,0,0,0.5); |
||||
--kv-shadow-button: 0 4px 4px rgba(0,0,0,0.25), 8px 8px 4px rgba(0,0,0,0.5); |
||||
} |
||||
``` |
||||
|
||||
### Tailwind Theme Extensions |
||||
|
||||
Custom Tailwind classes prefixed with `kv-`: |
||||
- Colors: `bg-kv-blue`, `text-kv-yellow`, etc. |
||||
- Fonts: `font-kv-body`, `font-kv-price`, etc. |
||||
|
||||
--- |
||||
|
||||
## i18n (Internationalization) |
||||
|
||||
Using **Paraglide** for type-safe translations. |
||||
|
||||
**Supported Languages:** |
||||
- Estonian (et) - Primary |
||||
- English (en) |
||||
|
||||
**Message Files:** |
||||
- `messages/et.json` |
||||
- `messages/en.json` |
||||
|
||||
**Usage:** |
||||
```svelte |
||||
<script> |
||||
import * as m from "$lib/paraglide/messages"; |
||||
</script> |
||||
|
||||
{m.kv_play_daily_double()} |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## Development |
||||
|
||||
```bash |
||||
# Install dependencies |
||||
npm install |
||||
|
||||
# Start dev server |
||||
npm run dev |
||||
|
||||
# Build for production |
||||
npm run build |
||||
|
||||
# Type check |
||||
npm run check |
||||
``` |
||||
|
||||
--- |
||||
|
||||
## Future Considerations |
||||
|
||||
1. **Database Backend**: Replace localStorage with proper database for persistence |
||||
2. **WebSocket**: Real-time sync without BroadcastChannel limitations |
||||
3. **Sound Effects**: Implement actual SFX playback |
||||
4. **More Game Modes**: "Rooside Sõda" (Family Feud) placeholder exists |
||||
5. **User Accounts**: Save games to cloud |
||||
6. **Mobile Buzzer**: Player buzzer app for team selection |
||||
@ -0,0 +1,21 @@ |
||||
MIT License |
||||
|
||||
Copyright (c) 2024 |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -0,0 +1,821 @@ |
||||
<script lang="ts"> |
||||
import * as m from "$lib/paraglide/messages"; |
||||
import ConfirmDialog from "./ConfirmDialog.svelte"; |
||||
|
||||
interface ColorPickerProps { |
||||
value: string; |
||||
onchange?: (color: string) => void; |
||||
} |
||||
|
||||
let { value = $bindable("#ffffff"), onchange }: ColorPickerProps = $props(); |
||||
|
||||
let isOpen = $state(false); |
||||
let hexInput = $state(value); |
||||
|
||||
// RGB values |
||||
let r = $state(255); |
||||
let g = $state(255); |
||||
let b = $state(255); |
||||
|
||||
// Alpha/Opacity (0-100%) |
||||
let alpha = $state(100); |
||||
|
||||
// HSV values |
||||
let hsvH = $state(0); |
||||
let hsvS = $state(0); |
||||
let hsvV = $state(100); |
||||
|
||||
// HSL values |
||||
let hslH = $state(0); |
||||
let hslS = $state(0); |
||||
let hslL = $state(100); |
||||
|
||||
// Grayscale |
||||
let gray = $state(255); |
||||
|
||||
// Parse hex input - supports 2, 3, 6, and 8 character formats |
||||
function parseHexInput(input: string): string | null { |
||||
// Remove # and whitespace |
||||
let hex = input.replace(/^#/, "").trim().toLowerCase(); |
||||
|
||||
// 2 characters: repeat 3 times (e.g., "AB" → "ABABAB") |
||||
if (/^[a-f\d]{2}$/i.test(hex)) { |
||||
hex = hex + hex + hex; |
||||
} |
||||
// 3 characters: double each (e.g., "ABC" → "AABBCC") |
||||
else if (/^[a-f\d]{3}$/i.test(hex)) { |
||||
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; |
||||
} |
||||
// 4 characters: double each with alpha (e.g., "ABCD" → "AABBCCDD") |
||||
else if (/^[a-f\d]{4}$/i.test(hex)) { |
||||
hex = |
||||
hex[0] + |
||||
hex[0] + |
||||
hex[1] + |
||||
hex[1] + |
||||
hex[2] + |
||||
hex[2] + |
||||
hex[3] + |
||||
hex[3]; |
||||
} |
||||
// 6 characters: full hex |
||||
else if (/^[a-f\d]{6}$/i.test(hex)) { |
||||
// Already valid |
||||
} |
||||
// 8 characters: full hex with alpha |
||||
else if (/^[a-f\d]{8}$/i.test(hex)) { |
||||
// Valid with alpha |
||||
} else { |
||||
return null; // Invalid |
||||
} |
||||
|
||||
return "#" + hex; |
||||
} |
||||
|
||||
// Convert hex to RGB (supports 6 and 8 character hex) |
||||
function hexToRgb(hex: string): { |
||||
r: number; |
||||
g: number; |
||||
b: number; |
||||
a: number; |
||||
} { |
||||
const parsed = parseHexInput(hex); |
||||
if (!parsed) return { r: 255, g: 255, b: 255, a: 100 }; |
||||
|
||||
const clean = parsed.replace("#", ""); |
||||
const r = parseInt(clean.substring(0, 2), 16); |
||||
const g = parseInt(clean.substring(2, 4), 16); |
||||
const b = parseInt(clean.substring(4, 6), 16); |
||||
// Alpha from hex (8 chars) or default to 100% |
||||
const a = |
||||
clean.length === 8 |
||||
? Math.round((parseInt(clean.substring(6, 8), 16) / 255) * 100) |
||||
: 100; |
||||
|
||||
return { r, g, b, a }; |
||||
} |
||||
|
||||
// Convert RGB to hex (always outputs 6 characters, alpha stored separately) |
||||
function rgbToHex(r: number, g: number, b: number): string { |
||||
return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`; |
||||
} |
||||
|
||||
// Convert RGB to HSV |
||||
function rgbToHsv( |
||||
r: number, |
||||
g: number, |
||||
b: number, |
||||
): { h: number; s: number; v: number } { |
||||
r /= 255; |
||||
g /= 255; |
||||
b /= 255; |
||||
const max = Math.max(r, g, b), |
||||
min = Math.min(r, g, b); |
||||
const v = max; |
||||
const d = max - min; |
||||
const s = max === 0 ? 0 : d / max; |
||||
let h = 0; |
||||
if (max !== min) { |
||||
switch (max) { |
||||
case r: |
||||
h = ((g - b) / d + (g < b ? 6 : 0)) / 6; |
||||
break; |
||||
case g: |
||||
h = ((b - r) / d + 2) / 6; |
||||
break; |
||||
case b: |
||||
h = ((r - g) / d + 4) / 6; |
||||
break; |
||||
} |
||||
} |
||||
return { |
||||
h: Math.round(h * 360), |
||||
s: Math.round(s * 100), |
||||
v: Math.round(v * 100), |
||||
}; |
||||
} |
||||
|
||||
// Convert HSV to RGB |
||||
function hsvToRgb( |
||||
h: number, |
||||
s: number, |
||||
v: number, |
||||
): { r: number; g: number; b: number } { |
||||
s /= 100; |
||||
v /= 100; |
||||
const c = v * s; |
||||
const x = c * (1 - Math.abs(((h / 60) % 2) - 1)); |
||||
const m = v - c; |
||||
let r1 = 0, |
||||
g1 = 0, |
||||
b1 = 0; |
||||
if (h < 60) { |
||||
r1 = c; |
||||
g1 = x; |
||||
} else if (h < 120) { |
||||
r1 = x; |
||||
g1 = c; |
||||
} else if (h < 180) { |
||||
g1 = c; |
||||
b1 = x; |
||||
} else if (h < 240) { |
||||
g1 = x; |
||||
b1 = c; |
||||
} else if (h < 300) { |
||||
r1 = x; |
||||
b1 = c; |
||||
} else { |
||||
r1 = c; |
||||
b1 = x; |
||||
} |
||||
return { |
||||
r: Math.round((r1 + m) * 255), |
||||
g: Math.round((g1 + m) * 255), |
||||
b: Math.round((b1 + m) * 255), |
||||
}; |
||||
} |
||||
|
||||
// Convert RGB to HSL |
||||
function rgbToHsl( |
||||
r: number, |
||||
g: number, |
||||
b: number, |
||||
): { h: number; s: number; l: number } { |
||||
r /= 255; |
||||
g /= 255; |
||||
b /= 255; |
||||
const max = Math.max(r, g, b), |
||||
min = Math.min(r, g, b); |
||||
const l = (max + min) / 2; |
||||
let h = 0, |
||||
s = 0; |
||||
if (max !== min) { |
||||
const d = max - min; |
||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min); |
||||
switch (max) { |
||||
case r: |
||||
h = ((g - b) / d + (g < b ? 6 : 0)) / 6; |
||||
break; |
||||
case g: |
||||
h = ((b - r) / d + 2) / 6; |
||||
break; |
||||
case b: |
||||
h = ((r - g) / d + 4) / 6; |
||||
break; |
||||
} |
||||
} |
||||
return { |
||||
h: Math.round(h * 360), |
||||
s: Math.round(s * 100), |
||||
l: Math.round(l * 100), |
||||
}; |
||||
} |
||||
|
||||
// Convert HSL to RGB |
||||
function hslToRgb( |
||||
h: number, |
||||
s: number, |
||||
l: number, |
||||
): { r: number; g: number; b: number } { |
||||
s /= 100; |
||||
l /= 100; |
||||
const c = (1 - Math.abs(2 * l - 1)) * s; |
||||
const x = c * (1 - Math.abs(((h / 60) % 2) - 1)); |
||||
const m = l - c / 2; |
||||
let r1 = 0, |
||||
g1 = 0, |
||||
b1 = 0; |
||||
if (h < 60) { |
||||
r1 = c; |
||||
g1 = x; |
||||
} else if (h < 120) { |
||||
r1 = x; |
||||
g1 = c; |
||||
} else if (h < 180) { |
||||
g1 = c; |
||||
b1 = x; |
||||
} else if (h < 240) { |
||||
g1 = x; |
||||
b1 = c; |
||||
} else if (h < 300) { |
||||
r1 = x; |
||||
b1 = c; |
||||
} else { |
||||
r1 = c; |
||||
b1 = x; |
||||
} |
||||
return { |
||||
r: Math.round((r1 + m) * 255), |
||||
g: Math.round((g1 + m) * 255), |
||||
b: Math.round((b1 + m) * 255), |
||||
}; |
||||
} |
||||
|
||||
// Sync all values from hex |
||||
function syncFromHex(hex: string) { |
||||
const rgba = hexToRgb(hex); |
||||
r = rgba.r; |
||||
g = rgba.g; |
||||
b = rgba.b; |
||||
alpha = rgba.a; |
||||
const hsv = rgbToHsv(r, g, b); |
||||
hsvH = hsv.h; |
||||
hsvS = hsv.s; |
||||
hsvV = hsv.v; |
||||
const hsl = rgbToHsl(r, g, b); |
||||
hslH = hsl.h; |
||||
hslS = hsl.s; |
||||
hslL = hsl.l; |
||||
gray = Math.round((r + g + b) / 3); |
||||
hexInput = rgbToHex(r, g, b); |
||||
} |
||||
|
||||
// Initialize from value |
||||
$effect(() => { |
||||
if (!isOpen) { |
||||
syncFromHex(value); |
||||
} |
||||
}); |
||||
|
||||
// Get output color with alpha if not 100% |
||||
function getOutputColor(): string { |
||||
const hex = rgbToHex(r, g, b); |
||||
if (alpha < 100) { |
||||
const alphaHex = Math.round((alpha / 100) * 255) |
||||
.toString(16) |
||||
.padStart(2, "0"); |
||||
return hex + alphaHex; |
||||
} |
||||
return hex; |
||||
} |
||||
|
||||
function applyColor(hex: string, updateAlphaFromHex = true) { |
||||
const rgba = hexToRgb(hex); |
||||
r = rgba.r; |
||||
g = rgba.g; |
||||
b = rgba.b; |
||||
// Update alpha from hex if it's 8 chars |
||||
if (updateAlphaFromHex && hex.replace("#", "").length === 8) { |
||||
alpha = rgba.a; |
||||
} |
||||
const hsv = rgbToHsv(r, g, b); |
||||
hsvH = hsv.h; |
||||
hsvS = hsv.s; |
||||
hsvV = hsv.v; |
||||
const hsl = rgbToHsl(r, g, b); |
||||
hslH = hsl.h; |
||||
hslS = hsl.s; |
||||
hslL = hsl.l; |
||||
gray = Math.round((r + g + b) / 3); |
||||
// Update output value with alpha |
||||
value = getOutputColor(); |
||||
hexInput = rgbToHex(r, g, b); |
||||
onchange?.(value); |
||||
} |
||||
|
||||
function updateFromHex() { |
||||
const parsed = parseHexInput(hexInput); |
||||
if (parsed) { |
||||
applyColor(parsed, true); |
||||
} |
||||
} |
||||
|
||||
function updateFromRgb() { |
||||
r = Math.max(0, Math.min(255, r)); |
||||
g = Math.max(0, Math.min(255, g)); |
||||
b = Math.max(0, Math.min(255, b)); |
||||
applyColor(rgbToHex(r, g, b), false); |
||||
} |
||||
|
||||
function updateFromHsv() { |
||||
const rgb = hsvToRgb(hsvH, hsvS, hsvV); |
||||
applyColor(rgbToHex(rgb.r, rgb.g, rgb.b), false); |
||||
} |
||||
|
||||
function updateFromHsl() { |
||||
const rgb = hslToRgb(hslH, hslS, hslL); |
||||
applyColor(rgbToHex(rgb.r, rgb.g, rgb.b), false); |
||||
} |
||||
|
||||
function updateFromAlpha() { |
||||
value = getOutputColor(); |
||||
onchange?.(value); |
||||
} |
||||
|
||||
function updateFromGray() { |
||||
const v = Math.max(0, Math.min(255, gray)); |
||||
applyColor(rgbToHex(v, v, v)); |
||||
} |
||||
|
||||
// Handle saturation/value picker click (HSV-based) |
||||
function handleSVPick(e: MouseEvent) { |
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); |
||||
hsvS = Math.round( |
||||
Math.max( |
||||
0, |
||||
Math.min(100, ((e.clientX - rect.left) / rect.width) * 100), |
||||
), |
||||
); |
||||
hsvV = Math.round( |
||||
Math.max( |
||||
0, |
||||
Math.min( |
||||
100, |
||||
100 - ((e.clientY - rect.top) / rect.height) * 100, |
||||
), |
||||
), |
||||
); |
||||
updateFromHsv(); |
||||
} |
||||
|
||||
// Slider refs for global drag tracking |
||||
let hueSliderRect: DOMRect | null = null; |
||||
let opacitySliderRect: DOMRect | null = null; |
||||
let svPickerRect: DOMRect | null = null; |
||||
let dragging: "hue" | "opacity" | "sv" | null = null; |
||||
|
||||
// Calculate hue from mouse position |
||||
function calcHue(clientX: number, rect: DOMRect) { |
||||
const padding = rect.width * 0.02; |
||||
const usableWidth = rect.width * 0.96; |
||||
const relativeX = clientX - rect.left - padding; |
||||
return Math.round( |
||||
Math.max(0, Math.min(359, (relativeX / usableWidth) * 359)), |
||||
); |
||||
} |
||||
|
||||
// Calculate opacity from mouse position |
||||
function calcOpacity(clientX: number, rect: DOMRect) { |
||||
const padding = rect.width * 0.02; |
||||
const usableWidth = rect.width * 0.96; |
||||
const relativeX = clientX - rect.left - padding; |
||||
return Math.round( |
||||
Math.max(0, Math.min(100, (relativeX / usableWidth) * 100)), |
||||
); |
||||
} |
||||
|
||||
// Handle hue slider |
||||
function handleHuePick(e: MouseEvent) { |
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); |
||||
hueSliderRect = rect; |
||||
dragging = "hue"; |
||||
hsvH = calcHue(e.clientX, rect); |
||||
updateFromHsv(); |
||||
} |
||||
|
||||
// Handle opacity slider |
||||
function handleOpacityPick(e: MouseEvent) { |
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); |
||||
opacitySliderRect = rect; |
||||
dragging = "opacity"; |
||||
alpha = calcOpacity(e.clientX, rect); |
||||
updateFromAlpha(); |
||||
} |
||||
|
||||
// Handle SV picker |
||||
function handleSVPickStart(e: MouseEvent) { |
||||
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect(); |
||||
svPickerRect = rect; |
||||
dragging = "sv"; |
||||
handleSVPick(e); |
||||
} |
||||
|
||||
// Global mouse move handler |
||||
function handleGlobalMouseMove(e: MouseEvent) { |
||||
if (!dragging) return; |
||||
|
||||
if (dragging === "hue" && hueSliderRect) { |
||||
hsvH = calcHue(e.clientX, hueSliderRect); |
||||
updateFromHsv(); |
||||
} else if (dragging === "opacity" && opacitySliderRect) { |
||||
alpha = calcOpacity(e.clientX, opacitySliderRect); |
||||
updateFromAlpha(); |
||||
} else if (dragging === "sv" && svPickerRect) { |
||||
const rect = svPickerRect; |
||||
hsvS = Math.round( |
||||
Math.max( |
||||
0, |
||||
Math.min(100, ((e.clientX - rect.left) / rect.width) * 100), |
||||
), |
||||
); |
||||
hsvV = Math.round( |
||||
Math.max( |
||||
0, |
||||
Math.min( |
||||
100, |
||||
100 - ((e.clientY - rect.top) / rect.height) * 100, |
||||
), |
||||
), |
||||
); |
||||
updateFromHsv(); |
||||
} |
||||
} |
||||
|
||||
// Global mouse up handler |
||||
function handleGlobalMouseUp() { |
||||
dragging = null; |
||||
hueSliderRect = null; |
||||
opacitySliderRect = null; |
||||
svPickerRect = null; |
||||
} |
||||
|
||||
// Add/remove global listeners when modal opens/closes |
||||
$effect(() => { |
||||
if (isOpen) { |
||||
document.addEventListener("mousemove", handleGlobalMouseMove); |
||||
document.addEventListener("mouseup", handleGlobalMouseUp); |
||||
} |
||||
return () => { |
||||
document.removeEventListener("mousemove", handleGlobalMouseMove); |
||||
document.removeEventListener("mouseup", handleGlobalMouseUp); |
||||
}; |
||||
}); |
||||
|
||||
// Confirmation dialog state |
||||
let showConfirmClose = $state(false); |
||||
let originalValue = $state(value); |
||||
|
||||
function togglePicker() { |
||||
if (!isOpen) { |
||||
originalValue = value; // Store original when opening |
||||
} |
||||
isOpen = !isOpen; |
||||
} |
||||
|
||||
function handleCloseClick() { |
||||
// Only show confirmation if value changed |
||||
if (value !== originalValue) { |
||||
showConfirmClose = true; |
||||
} else { |
||||
closePicker(); |
||||
} |
||||
} |
||||
|
||||
function confirmClose() { |
||||
showConfirmClose = false; |
||||
// Revert to original value |
||||
value = originalValue; |
||||
syncFromHex(originalValue); |
||||
onchange?.(originalValue); |
||||
isOpen = false; |
||||
} |
||||
|
||||
function cancelClose() { |
||||
showConfirmClose = false; |
||||
} |
||||
|
||||
function closePicker() { |
||||
isOpen = false; |
||||
} |
||||
|
||||
// Portal action - moves element to body |
||||
function portal(node: HTMLElement) { |
||||
document.body.appendChild(node); |
||||
return { |
||||
destroy() { |
||||
if (node.parentNode) { |
||||
node.parentNode.removeChild(node); |
||||
} |
||||
}, |
||||
}; |
||||
} |
||||
</script> |
||||
|
||||
<!-- Color Swatch Button --> |
||||
<button |
||||
class="w-10 h-10 border-4 border-black cursor-pointer" |
||||
style="background-color: {value};" |
||||
onclick={togglePicker} |
||||
type="button" |
||||
aria-label="Pick color" |
||||
></button> |
||||
|
||||
<!-- Picker Modal - rendered via portal to body --> |
||||
{#if isOpen} |
||||
<div use:portal> |
||||
<!-- Backdrop --> |
||||
<div |
||||
class="fixed inset-0 bg-kv-background/50 z-[60]" |
||||
onclick={closePicker} |
||||
role="button" |
||||
tabindex="-1" |
||||
onkeydown={(e) => e.key === "Escape" && closePicker()} |
||||
></div> |
||||
|
||||
<!-- Modal centered on screen --> |
||||
<div |
||||
class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[70] |
||||
bg-kv-blue border-4 md:border-8 lg:border-[16px] border-kv-black |
||||
p-3 md:p-6 lg:p-8 w-[95vw] max-w-[320px] md:max-w-[400px] lg:max-w-[450px] |
||||
flex flex-col gap-3 md:gap-4 lg:gap-6 |
||||
max-h-[90vh] overflow-y-auto" |
||||
> |
||||
<!-- Header with Title and Close Button --> |
||||
<div class="flex items-start justify-between w-full"> |
||||
<h2 |
||||
class="text-xl md:text-[28px] text-kv-white uppercase font-kv-body kv-shadow-text" |
||||
> |
||||
{m.kv_color_picker()} |
||||
</h2> |
||||
<button |
||||
onclick={handleCloseClick} |
||||
class="w-6 h-6 cursor-pointer bg-transparent border-none p-0 hover:opacity-70" |
||||
aria-label="Close" |
||||
> |
||||
<svg |
||||
viewBox="0 0 24 24" |
||||
fill="none" |
||||
stroke="currentColor" |
||||
stroke-width="2" |
||||
class="w-full h-full text-kv-yellow" |
||||
> |
||||
<path d="M18 6L6 18M6 6l12 12" /> |
||||
</svg> |
||||
</button> |
||||
</div> |
||||
|
||||
<!-- Saturation/Value Picker (HSV-based) --> |
||||
<div |
||||
class="relative w-full h-32 md:h-48 lg:h-56 cursor-crosshair border-2 md:border-4 border-black shrink-0 select-none" |
||||
style="background: linear-gradient(to top, black, transparent), |
||||
linear-gradient(to right, white, hsl({hsvH}, 100%, 50%));" |
||||
onmousedown={handleSVPickStart} |
||||
role="slider" |
||||
tabindex="0" |
||||
aria-label="Saturation and Value" |
||||
aria-valuenow={hsvS} |
||||
> |
||||
<!-- Picker Indicator --> |
||||
<div |
||||
class="absolute w-5 h-5 border-2 border-white rounded-full -translate-x-1/2 -translate-y-1/2 pointer-events-none" |
||||
style="left: {hsvS}%; top: {100 - |
||||
hsvV}%; box-shadow: 0 0 3px black;" |
||||
></div> |
||||
</div> |
||||
|
||||
<!-- Hue Slider --> |
||||
<div |
||||
class="relative w-full h-6 md:h-8 cursor-pointer border-2 md:border-4 border-black shrink-0 select-none" |
||||
style="background: linear-gradient(to right, hsl(0,100%,50%), hsl(60,100%,50%), hsl(120,100%,50%), hsl(180,100%,50%), hsl(240,100%,50%), hsl(300,100%,50%), hsl(359,100%,50%));" |
||||
onmousedown={handleHuePick} |
||||
role="slider" |
||||
tabindex="0" |
||||
aria-label="Hue" |
||||
aria-valuenow={hsvH} |
||||
> |
||||
<div |
||||
class="absolute top-0 bottom-0 w-2 md:w-3 border-2 border-white -translate-x-1/2 pointer-events-none" |
||||
style="left: calc(2% + {(hsvH / 359) * |
||||
96}%); box-shadow: 0 0 3px black;" |
||||
></div> |
||||
</div> |
||||
|
||||
<!-- Opacity Slider --> |
||||
<div> |
||||
<div class="flex justify-between items-center mb-1"> |
||||
<span |
||||
class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text" |
||||
> |
||||
{m.kv_opacity()} |
||||
</span> |
||||
<span |
||||
class="text-sm md:text-base text-kv-white font-kv-body" |
||||
> |
||||
{alpha}% |
||||
</span> |
||||
</div> |
||||
<div |
||||
class="relative w-full h-6 md:h-8 cursor-pointer border-2 md:border-4 border-black shrink-0 select-none" |
||||
style="background: linear-gradient(to right, transparent, {rgbToHex( |
||||
r, |
||||
g, |
||||
b, |
||||
)}), |
||||
repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%) 50% / 16px 16px;" |
||||
onmousedown={handleOpacityPick} |
||||
role="slider" |
||||
tabindex="0" |
||||
aria-label="Opacity" |
||||
aria-valuenow={alpha} |
||||
> |
||||
<div |
||||
class="absolute top-0 bottom-0 w-2 md:w-3 border-2 border-white -translate-x-1/2 pointer-events-none" |
||||
style="left: calc(2% + {alpha * |
||||
0.96}%); box-shadow: 0 0 3px black;" |
||||
></div> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Preview & HEX --> |
||||
<div class="flex gap-2 md:gap-4 items-center"> |
||||
<div |
||||
class="w-12 h-12 md:w-16 md:h-16 border-2 md:border-4 border-black shrink-0" |
||||
style="background-color: rgba({r}, {g}, {b}, {alpha / |
||||
100}); |
||||
background-image: repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%); |
||||
background-size: 8px 8px; |
||||
background-blend-mode: normal;" |
||||
> |
||||
<div |
||||
class="w-full h-full" |
||||
style="background-color: rgba({r}, {g}, {b}, {alpha / |
||||
100});" |
||||
></div> |
||||
</div> |
||||
<div class="flex-1"> |
||||
<span |
||||
class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text" |
||||
>HEX</span |
||||
> |
||||
<input |
||||
type="text" |
||||
bind:value={hexInput} |
||||
oninput={updateFromHex} |
||||
onblur={updateFromHex} |
||||
onkeydown={(e) => e.key === "Enter" && updateFromHex()} |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-2 md:px-3 py-1.5 md:py-2 text-kv-white font-kv-body text-base md:text-lg uppercase" |
||||
maxlength="9" |
||||
placeholder="#RRGGBB" |
||||
/> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- RGB --> |
||||
<div> |
||||
<span |
||||
class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text" |
||||
>RGB</span |
||||
> |
||||
<div class="grid grid-cols-3 gap-1 md:gap-2"> |
||||
<input |
||||
type="number" |
||||
bind:value={r} |
||||
oninput={updateFromRgb} |
||||
min="0" |
||||
max="255" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
<input |
||||
type="number" |
||||
bind:value={g} |
||||
oninput={updateFromRgb} |
||||
min="0" |
||||
max="255" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
<input |
||||
type="number" |
||||
bind:value={b} |
||||
oninput={updateFromRgb} |
||||
min="0" |
||||
max="255" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- HSV --> |
||||
<div> |
||||
<span |
||||
class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text" |
||||
>HSV</span |
||||
> |
||||
<div class="grid grid-cols-3 gap-1 md:gap-2"> |
||||
<input |
||||
type="number" |
||||
bind:value={hsvH} |
||||
oninput={updateFromHsv} |
||||
min="0" |
||||
max="360" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
<input |
||||
type="number" |
||||
bind:value={hsvS} |
||||
oninput={updateFromHsv} |
||||
min="0" |
||||
max="100" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
<input |
||||
type="number" |
||||
bind:value={hsvV} |
||||
oninput={updateFromHsv} |
||||
min="0" |
||||
max="100" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- HSL --> |
||||
<div> |
||||
<span |
||||
class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text" |
||||
>HSL</span |
||||
> |
||||
<div class="grid grid-cols-3 gap-1 md:gap-2"> |
||||
<input |
||||
type="number" |
||||
bind:value={hslH} |
||||
oninput={updateFromHsl} |
||||
min="0" |
||||
max="360" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
<input |
||||
type="number" |
||||
bind:value={hslS} |
||||
oninput={updateFromHsl} |
||||
min="0" |
||||
max="100" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
<input |
||||
type="number" |
||||
bind:value={hslL} |
||||
oninput={updateFromHsl} |
||||
min="0" |
||||
max="100" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
</div> |
||||
</div> |
||||
|
||||
<!-- Grayscale --> |
||||
<div> |
||||
<span |
||||
class="text-sm md:text-base text-kv-white uppercase font-kv-body kv-shadow-text" |
||||
>Grayscale</span |
||||
> |
||||
<input |
||||
type="number" |
||||
bind:value={gray} |
||||
oninput={updateFromGray} |
||||
min="0" |
||||
max="255" |
||||
class="w-full bg-kv-black border-2 md:border-4 border-black px-1 md:px-2 py-1 md:py-2 text-kv-white font-kv-body text-sm md:text-base text-center" |
||||
/> |
||||
</div> |
||||
|
||||
<!-- Done Button --> |
||||
<button |
||||
onclick={closePicker} |
||||
class="bg-kv-yellow border-4 border-black font-kv-body text-black uppercase px-6 py-3 cursor-pointer hover:opacity-80 text-xl kv-shadow-button" |
||||
> |
||||
{m.kv_done()} |
||||
</button> |
||||
</div> |
||||
|
||||
<!-- Confirmation Dialog --> |
||||
<ConfirmDialog |
||||
bind:open={showConfirmClose} |
||||
title={m.kv_confirm_close_title()} |
||||
message={m.kv_confirm_close_message()} |
||||
confirmText={m.kv_confirm_discard()} |
||||
cancelText={m.kv_confirm_cancel()} |
||||
onconfirm={confirmClose} |
||||
oncancel={cancelClose} |
||||
/> |
||||
</div> |
||||
{/if} |
||||
@ -0,0 +1,81 @@ |
||||
<script lang="ts"> |
||||
import * as m from "$lib/paraglide/messages"; |
||||
|
||||
interface ConfirmDialogProps { |
||||
open?: boolean; |
||||
title?: string; |
||||
message?: string; |
||||
confirmText?: string; |
||||
cancelText?: string; |
||||
onconfirm?: () => void; |
||||
oncancel?: () => void; |
||||
} |
||||
|
||||
let { |
||||
open = $bindable(false), |
||||
title = m.kv_confirm_close_title(), |
||||
message = m.kv_confirm_close_message(), |
||||
confirmText = m.kv_confirm_discard(), |
||||
cancelText = m.kv_confirm_cancel(), |
||||
onconfirm, |
||||
oncancel, |
||||
}: ConfirmDialogProps = $props(); |
||||
|
||||
function handleConfirm() { |
||||
open = false; |
||||
onconfirm?.(); |
||||
} |
||||
|
||||
function handleCancel() { |
||||
open = false; |
||||
oncancel?.(); |
||||
} |
||||
|
||||
function handleKeydown(e: KeyboardEvent) { |
||||
if (e.key === "Escape") handleCancel(); |
||||
} |
||||
</script> |
||||
|
||||
<svelte:window onkeydown={open ? handleKeydown : undefined} /> |
||||
|
||||
{#if open} |
||||
<!-- Backdrop --> |
||||
<div |
||||
class="fixed inset-0 bg-kv-background/70 z-[100]" |
||||
onclick={handleCancel} |
||||
role="button" |
||||
tabindex="-1" |
||||
onkeydown={(e) => e.key === "Enter" && handleCancel()} |
||||
></div> |
||||
|
||||
<!-- Dialog --> |
||||
<div |
||||
class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[110] |
||||
bg-kv-blue border-4 md:border-8 border-kv-black |
||||
p-4 md:p-6 w-[90vw] max-w-[380px] |
||||
flex flex-col gap-4 items-center text-center" |
||||
> |
||||
<h3 |
||||
class="text-xl md:text-2xl text-kv-white uppercase font-kv-body kv-shadow-text" |
||||
> |
||||
{title} |
||||
</h3> |
||||
<p class="text-sm md:text-base text-kv-white font-kv-body"> |
||||
{message} |
||||
</p> |
||||
<div class="flex gap-3 w-full"> |
||||
<button |
||||
onclick={handleCancel} |
||||
class="flex-1 bg-kv-blue border-4 border-black font-kv-body text-kv-white uppercase px-4 py-3 cursor-pointer hover:opacity-80 kv-shadow-button" |
||||
> |
||||
<span class="kv-shadow-text">{cancelText}</span> |
||||
</button> |
||||
<button |
||||
onclick={handleConfirm} |
||||
class="flex-1 bg-kv-yellow border-4 border-black font-kv-body text-black uppercase px-4 py-3 cursor-pointer hover:opacity-80 kv-shadow-button" |
||||
> |
||||
{confirmText} |
||||
</button> |
||||
</div> |
||||
</div> |
||||
{/if} |
||||
@ -0,0 +1,208 @@ |
||||
<script lang="ts"> |
||||
import * as m from "$lib/paraglide/messages"; |
||||
import KvNumberInput from "./KvNumberInput.svelte"; |
||||
|
||||
interface Props { |
||||
name: string; |
||||
score: number; |
||||
scoreAdjustment?: number; |
||||
answering?: boolean; |
||||
selectable?: boolean; |
||||
// Final round mode |
||||
finalMode?: boolean; |
||||
finalJudged?: boolean; |
||||
finalActive?: boolean; |
||||
onFinalJudge?: (correct: boolean, wager: number) => void; |
||||
// Event handlers |
||||
onSelect?: () => void; |
||||
onAdd?: () => void; |
||||
onRemove?: () => void; |
||||
onCorrect?: () => void; |
||||
onWrong?: () => void; |
||||
} |
||||
|
||||
let { |
||||
name, |
||||
score, |
||||
scoreAdjustment = 100, |
||||
answering = false, |
||||
selectable = false, |
||||
finalMode = false, |
||||
finalJudged = false, |
||||
finalActive = false, |
||||
onFinalJudge, |
||||
onSelect, |
||||
onAdd, |
||||
onRemove, |
||||
onCorrect, |
||||
onWrong, |
||||
}: Props = $props(); |
||||
|
||||
// Final round state |
||||
let finalAnswerCorrect = $state<boolean | null>(null); |
||||
let finalWagerInput = $state(0); |
||||
</script> |
||||
|
||||
<div |
||||
class="group relative bg-kv-blue flex flex-col gap-4 items-center justify-center p-4 flex-1 min-w-0 box-border |
||||
{answering || finalActive |
||||
? 'border-8 border-kv-yellow' |
||||
: 'border-8 border-transparent'} |
||||
{selectable && !finalJudged ? 'cursor-pointer' : ''} |
||||
{finalJudged ? 'opacity-60' : ''}" |
||||
onclick={selectable && !finalJudged ? onSelect : undefined} |
||||
onkeydown={selectable && !finalJudged |
||||
? (e) => e.key === "Enter" && onSelect?.() |
||||
: undefined} |
||||
role={selectable && !finalJudged ? "button" : undefined} |
||||
tabindex={selectable && !finalJudged ? 0 : undefined} |
||||
> |
||||
<!-- Hover overlay - darkens background only, extends to cover border --> |
||||
{#if selectable && !finalJudged} |
||||
<div |
||||
class="absolute -inset-2 bg-black opacity-0 group-hover:opacity-20 transition-opacity pointer-events-none z-0" |
||||
></div> |
||||
{/if} |
||||
|
||||
<!-- Name and Score --> |
||||
<div |
||||
class="relative z-10 flex flex-col gap-4 items-center font-kv-body text-kv-white text-center uppercase w-full |
||||
{selectable && !finalJudged |
||||
? 'group-hover:text-kv-yellow transition-colors' |
||||
: ''}" |
||||
> |
||||
<span class="text-2xl md:text-4xl kv-shadow-text">{name}</span> |
||||
<span |
||||
class="text-2xl md:text-4xl kv-shadow-text {score < 0 |
||||
? 'text-kv-red' |
||||
: ''}">{score}€</span |
||||
> |
||||
{#if finalJudged} |
||||
<span class="text-sm text-kv-green">✓ {m.kv_play_judged()}</span> |
||||
{/if} |
||||
</div> |
||||
|
||||
<!-- Action Buttons --> |
||||
<div class="relative z-10 flex flex-col gap-2 items-center justify-center"> |
||||
{#if finalMode && finalActive} |
||||
<!-- Final round judging UI --> |
||||
{#if finalAnswerCorrect === null} |
||||
<div class="flex gap-2"> |
||||
<button |
||||
onclick={() => (finalAnswerCorrect = true)} |
||||
class="bg-kv-green border-4 border-black box-border flex items-center justify-center p-2 cursor-pointer hover:opacity-80" |
||||
> |
||||
<span |
||||
class="font-kv-body text-xl md:text-[28px] text-kv-white uppercase kv-shadow-text" |
||||
> |
||||
{m.kv_play_correct()} |
||||
</span> |
||||
</button> |
||||
<button |
||||
onclick={() => (finalAnswerCorrect = false)} |
||||
class="bg-kv-red border-4 border-black box-border flex items-center justify-center p-2 cursor-pointer hover:opacity-80" |
||||
> |
||||
<span |
||||
class="font-kv-body text-xl md:text-[28px] text-kv-white uppercase kv-shadow-text" |
||||
> |
||||
{m.kv_play_wrong()} |
||||
</span> |
||||
</button> |
||||
</div> |
||||
{:else} |
||||
<!-- Wager input and confirm --> |
||||
<div class="flex items-center gap-2"> |
||||
<KvNumberInput |
||||
bind:value={finalWagerInput} |
||||
min={0} |
||||
max={Math.max(score, 0)} |
||||
step={100} |
||||
/> |
||||
<span class="font-kv-body text-lg text-kv-white">€</span> |
||||
</div> |
||||
<button |
||||
onclick={() => { |
||||
onFinalJudge?.(finalAnswerCorrect!, finalWagerInput); |
||||
finalAnswerCorrect = null; |
||||
finalWagerInput = 0; |
||||
}} |
||||
class="bg-kv-yellow border-4 border-black box-border font-kv-body text-lg text-black uppercase px-4 py-1 cursor-pointer hover:opacity-80" |
||||
> |
||||
{m.kv_play_confirm()} |
||||
</button> |
||||
{/if} |
||||
{:else if finalMode && !finalJudged && !finalActive} |
||||
<!-- Final mode but not active - show score adjustment buttons --> |
||||
<div class="flex gap-4"> |
||||
<button |
||||
onclick={onAdd} |
||||
class="bg-kv-green border-4 border-black box-border flex items-center justify-center p-2 cursor-pointer hover:opacity-80" |
||||
> |
||||
<span |
||||
class="font-kv-body text-xl md:text-[28px] text-kv-white uppercase kv-shadow-text" |
||||
> |
||||
+{scoreAdjustment} |
||||
</span> |
||||
</button> |
||||
<button |
||||
onclick={onRemove} |
||||
class="bg-kv-red border-4 border-black box-border flex items-center justify-center p-2 cursor-pointer hover:opacity-80" |
||||
> |
||||
<span |
||||
class="font-kv-body text-xl md:text-[28px] text-kv-white uppercase kv-shadow-text" |
||||
> |
||||
-{scoreAdjustment} |
||||
</span> |
||||
</button> |
||||
</div> |
||||
{:else if answering} |
||||
<!-- Correct/Wrong buttons when answering --> |
||||
<div class="flex gap-4"> |
||||
<button |
||||
onclick={onCorrect} |
||||
class="bg-kv-green border-4 border-black box-border flex items-center justify-center p-2 cursor-pointer hover:opacity-80" |
||||
> |
||||
<span |
||||
class="font-kv-body text-xl md:text-[28px] text-kv-white uppercase kv-shadow-text" |
||||
> |
||||
{m.kv_play_correct()} |
||||
</span> |
||||
</button> |
||||
<button |
||||
onclick={onWrong} |
||||
class="bg-kv-red border-4 border-black box-border flex items-center justify-center p-2 cursor-pointer hover:opacity-80" |
||||
> |
||||
<span |
||||
class="font-kv-body text-xl md:text-[28px] text-kv-white uppercase kv-shadow-text" |
||||
> |
||||
{m.kv_play_wrong()} |
||||
</span> |
||||
</button> |
||||
</div> |
||||
{:else if !finalMode} |
||||
<!-- Add/Remove score buttons in normal mode --> |
||||
<div class="flex gap-4"> |
||||
<button |
||||
onclick={onAdd} |
||||
class="bg-kv-green border-4 border-black box-border flex items-center justify-center p-2 cursor-pointer hover:opacity-80" |
||||
> |
||||
<span |
||||
class="font-kv-body text-xl md:text-[28px] text-kv-white uppercase kv-shadow-text" |
||||
> |
||||
+{scoreAdjustment} |
||||
</span> |
||||
</button> |
||||
<button |
||||
onclick={onRemove} |
||||
class="bg-kv-red border-4 border-black box-border flex items-center justify-center p-2 cursor-pointer hover:opacity-80" |
||||
> |
||||
<span |
||||
class="font-kv-body text-xl md:text-[28px] text-kv-white uppercase kv-shadow-text" |
||||
> |
||||
-{scoreAdjustment} |
||||
</span> |
||||
</button> |
||||
</div> |
||||
{/if} |
||||
</div> |
||||
</div> |
||||
@ -1,70 +0,0 @@ |
||||
<script lang="ts"> |
||||
import type { Team } from "$lib/types/kuldvillak"; |
||||
|
||||
interface Props { |
||||
team: Team; |
||||
isActive?: boolean; |
||||
isAnswering?: boolean; |
||||
scoreAdjustment?: number; |
||||
onadjust?: (delta: number) => void; |
||||
onclick?: () => void; |
||||
disabled?: boolean; |
||||
class?: string; |
||||
} |
||||
|
||||
let { |
||||
team, |
||||
isActive = false, |
||||
isAnswering = false, |
||||
scoreAdjustment = 100, |
||||
onadjust, |
||||
onclick, |
||||
disabled = false, |
||||
class: className = "", |
||||
}: Props = $props(); |
||||
</script> |
||||
|
||||
<div |
||||
class="flex flex-col gap-4 items-center justify-center p-4 bg-kv-board transition-all |
||||
{isActive ? 'ring-4 ring-kv-yellow' : ''} |
||||
{isAnswering ? 'ring-4 ring-kv-green' : ''} |
||||
{disabled ? 'opacity-50' : ''} |
||||
{className}" |
||||
role={onclick ? "button" : undefined} |
||||
tabindex={onclick ? 0 : undefined} |
||||
{onclick} |
||||
onkeydown={(e) => e.key === "Enter" && onclick?.()} |
||||
> |
||||
<!-- Name and Score --> |
||||
<button |
||||
class="flex flex-col gap-2 items-center font-kv-body text-kv-white uppercase text-center w-full cursor-pointer hover:brightness-110 transition-all |
||||
{disabled ? 'cursor-not-allowed' : ''}" |
||||
{onclick} |
||||
{disabled} |
||||
> |
||||
<span class="text-3xl kv-shadow-text">{team.name}</span> |
||||
<span |
||||
class="text-3xl kv-shadow-text {team.score < 0 |
||||
? 'text-kv-red' |
||||
: ''}">{team.score}€</span |
||||
> |
||||
</button> |
||||
|
||||
<!-- Score Adjustment Buttons --> |
||||
{#if onadjust} |
||||
<div class="flex gap-4 items-center justify-center"> |
||||
<button |
||||
class="flex-1 min-w-[70px] h-10 bg-kv-green border-4 border-black flex items-center justify-center font-kv-body text-xl text-kv-white uppercase cursor-pointer hover:brightness-110 transition-all" |
||||
onclick={() => onadjust(scoreAdjustment)} |
||||
> |
||||
<span class="kv-shadow-text">+{scoreAdjustment}</span> |
||||
</button> |
||||
<button |
||||
class="flex-1 min-w-[70px] h-10 bg-kv-red border-4 border-black flex items-center justify-center font-kv-body text-xl text-kv-white uppercase cursor-pointer hover:brightness-110 transition-all" |
||||
onclick={() => onadjust(-scoreAdjustment)} |
||||
> |
||||
<span class="kv-shadow-text">-{scoreAdjustment}</span> |
||||
</button> |
||||
</div> |
||||
{/if} |
||||
</div> |
||||
@ -1,67 +0,0 @@ |
||||
<script lang="ts"> |
||||
interface Props { |
||||
variant: "category" | "price" | "player"; |
||||
text?: string; |
||||
score?: number; |
||||
isRevealed?: boolean; |
||||
isActive?: boolean; |
||||
class?: string; |
||||
} |
||||
|
||||
let { |
||||
variant, |
||||
text = "", |
||||
score = 0, |
||||
isRevealed = false, |
||||
isActive = false, |
||||
class: className = "", |
||||
}: Props = $props(); |
||||
</script> |
||||
|
||||
{#if variant === "category"} |
||||
<!-- Category Card for Projector --> |
||||
<div |
||||
class="bg-kv-board px-4 py-8 flex items-center justify-center overflow-hidden {className}" |
||||
> |
||||
<span |
||||
class="font-kv-body text-kv-white text-5xl text-center uppercase leading-tight kv-shadow-text" |
||||
> |
||||
{text || "Kategooria"} |
||||
</span> |
||||
</div> |
||||
{:else if variant === "price"} |
||||
<!-- Price Card for Projector --> |
||||
<div |
||||
class="bg-kv-board flex items-center justify-center overflow-hidden {className}" |
||||
> |
||||
{#if isRevealed} |
||||
<span class="opacity-0">{text}</span> |
||||
{:else} |
||||
<span |
||||
class="font-kv-price text-kv-yellow text-7xl text-center kv-shadow-price" |
||||
> |
||||
{text} |
||||
</span> |
||||
{/if} |
||||
</div> |
||||
{:else if variant === "player"} |
||||
<!-- Player Score Card for Projector --> |
||||
<div |
||||
class="bg-kv-board px-4 py-4 flex flex-col items-center justify-center gap-1 overflow-hidden |
||||
{isActive ? 'ring-4 ring-kv-yellow' : ''} |
||||
{className}" |
||||
> |
||||
<span |
||||
class="font-kv-body text-kv-white text-3xl text-center uppercase leading-tight kv-shadow-text" |
||||
> |
||||
{text} |
||||
</span> |
||||
<span |
||||
class="font-kv-body text-3xl text-center kv-shadow-text {score < 0 |
||||
? 'text-red-500' |
||||
: 'text-kv-white'}" |
||||
> |
||||
{score}€ |
||||
</span> |
||||
</div> |
||||
{/if} |
||||
@ -1,363 +0,0 @@ |
||||
// ============================================
|
||||
// Kuldvillak Game State Store (Svelte 5 Runes)
|
||||
// ============================================
|
||||
|
||||
import { |
||||
type KuldvillakGame, |
||||
type Team, |
||||
type Question, |
||||
type GamePhase, |
||||
type Round, |
||||
type Category, |
||||
DEFAULT_SETTINGS, |
||||
DEFAULT_STATE |
||||
} from '$lib/types/kuldvillak'; |
||||
|
||||
// ============================================
|
||||
// Utility Functions
|
||||
// ============================================
|
||||
|
||||
function generateId(): string { |
||||
return crypto.randomUUID(); |
||||
} |
||||
|
||||
function createEmptyGame(name: string = 'New Game'): KuldvillakGame { |
||||
const now = new Date().toISOString(); |
||||
return { |
||||
id: generateId(), |
||||
name, |
||||
createdAt: now, |
||||
updatedAt: now, |
||||
settings: { ...DEFAULT_SETTINGS }, |
||||
teams: [], |
||||
rounds: [], |
||||
finalRound: null, |
||||
state: { ...DEFAULT_STATE } |
||||
}; |
||||
} |
||||
|
||||
function createEmptyRound(name: string, multiplier: number, settings: typeof DEFAULT_SETTINGS): Round { |
||||
const categories: Category[] = []; |
||||
for (let i = 0; i < settings.categoriesPerRound; i++) { |
||||
const questions: Question[] = settings.pointValues.map((points) => ({ |
||||
id: generateId(), |
||||
question: '', |
||||
answer: '', |
||||
points: points * multiplier, |
||||
isDailyDouble: false, |
||||
isRevealed: false |
||||
})); |
||||
categories.push({ |
||||
id: generateId(), |
||||
name: `Category ${i + 1}`, |
||||
questions |
||||
}); |
||||
} |
||||
return { |
||||
id: generateId(), |
||||
name, |
||||
categories, |
||||
pointMultiplier: multiplier |
||||
}; |
||||
} |
||||
|
||||
// ============================================
|
||||
// Game Store Class
|
||||
// ============================================
|
||||
|
||||
class KuldvillakStore { |
||||
// Reactive state using Svelte 5 runes
|
||||
game = $state<KuldvillakGame | null>(null); |
||||
savedGames = $state<KuldvillakGame[]>([]); |
||||
|
||||
// Derived values
|
||||
get currentRound(): Round | null { |
||||
if (!this.game) return null; |
||||
return this.game.rounds[this.game.state.currentRoundIndex] ?? null; |
||||
} |
||||
|
||||
get currentQuestion(): Question | null { |
||||
if (!this.game || !this.currentRound || !this.game.state.currentQuestionId) return null; |
||||
for (const category of this.currentRound.categories) { |
||||
const question = category.questions.find((q) => q.id === this.game!.state.currentQuestionId); |
||||
if (question) return question; |
||||
} |
||||
return null; |
||||
} |
||||
|
||||
get currentCategory(): Category | null { |
||||
if (!this.game || !this.currentRound || !this.game.state.currentCategoryId) return null; |
||||
return this.currentRound.categories.find((c) => c.id === this.game!.state.currentCategoryId) ?? null; |
||||
} |
||||
|
||||
get activeTeam(): Team | null { |
||||
if (!this.game || !this.game.state.activeTeamId) return null; |
||||
return this.game.teams.find((t) => t.id === this.game!.state.activeTeamId) ?? null; |
||||
} |
||||
|
||||
get isRoundComplete(): boolean { |
||||
if (!this.currentRound) return false; |
||||
return this.currentRound.categories.every((c) => c.questions.every((q) => q.isRevealed)); |
||||
} |
||||
|
||||
get isGameComplete(): boolean { |
||||
if (!this.game) return false; |
||||
const allRoundsComplete = this.game.rounds.every((round) => |
||||
round.categories.every((c) => c.questions.every((q) => q.isRevealed)) |
||||
); |
||||
if (!this.game.settings.enableFinalRound) return allRoundsComplete; |
||||
return allRoundsComplete && this.game.state.phase === 'finished'; |
||||
} |
||||
|
||||
// ============================================
|
||||
// Game Lifecycle
|
||||
// ============================================
|
||||
|
||||
newGame(name: string = 'New Game'): void { |
||||
this.game = createEmptyGame(name); |
||||
// Create default 2 rounds (Jeopardy + Double Jeopardy)
|
||||
this.game.rounds = [ |
||||
createEmptyRound('Round 1', 1, this.game.settings), |
||||
createEmptyRound('Round 2', 2, this.game.settings) |
||||
]; |
||||
} |
||||
|
||||
loadGame(gameData: KuldvillakGame): void { |
||||
this.game = gameData; |
||||
} |
||||
|
||||
resetGame(): void { |
||||
if (!this.game) return; |
||||
// Reset all questions to unrevealed
|
||||
for (const round of this.game.rounds) { |
||||
for (const category of round.categories) { |
||||
for (const question of category.questions) { |
||||
question.isRevealed = false; |
||||
} |
||||
} |
||||
} |
||||
// Reset teams scores
|
||||
for (const team of this.game.teams) { |
||||
team.score = 0; |
||||
} |
||||
// Reset state
|
||||
this.game.state = { ...DEFAULT_STATE }; |
||||
} |
||||
|
||||
closeGame(): void { |
||||
this.game = null; |
||||
} |
||||
|
||||
// ============================================
|
||||
// Team Management
|
||||
// ============================================
|
||||
|
||||
addTeam(name: string): void { |
||||
if (!this.game) return; |
||||
this.game.teams.push({ |
||||
id: generateId(), |
||||
name, |
||||
score: 0 |
||||
}); |
||||
} |
||||
|
||||
removeTeam(teamId: string): void { |
||||
if (!this.game) return; |
||||
this.game.teams = this.game.teams.filter((t) => t.id !== teamId); |
||||
} |
||||
|
||||
updateTeamName(teamId: string, name: string): void { |
||||
if (!this.game) return; |
||||
const team = this.game.teams.find((t) => t.id === teamId); |
||||
if (team) team.name = name; |
||||
} |
||||
|
||||
updateTeamScore(teamId: string, score: number): void { |
||||
if (!this.game) return; |
||||
const team = this.game.teams.find((t) => t.id === teamId); |
||||
if (team) team.score = score; |
||||
} |
||||
|
||||
adjustTeamScore(teamId: string, delta: number): void { |
||||
if (!this.game) return; |
||||
const team = this.game.teams.find((t) => t.id === teamId); |
||||
if (team) team.score += delta; |
||||
} |
||||
|
||||
setActiveTeam(teamId: string | null): void { |
||||
if (!this.game) return; |
||||
this.game.state.activeTeamId = teamId; |
||||
} |
||||
|
||||
// ============================================
|
||||
// Game Flow Control
|
||||
// ============================================
|
||||
|
||||
setPhase(phase: GamePhase): void { |
||||
if (!this.game) return; |
||||
this.game.state.phase = phase; |
||||
} |
||||
|
||||
startGame(): void { |
||||
if (!this.game || this.game.teams.length === 0) return; |
||||
this.game.state.phase = 'board'; |
||||
this.game.state.currentRoundIndex = 0; |
||||
} |
||||
|
||||
selectQuestion(categoryId: string, questionId: string): void { |
||||
if (!this.game) return; |
||||
const question = this.findQuestion(questionId); |
||||
if (!question || question.isRevealed) return; |
||||
|
||||
this.game.state.currentCategoryId = categoryId; |
||||
this.game.state.currentQuestionId = questionId; |
||||
|
||||
if (question.isDailyDouble) { |
||||
this.game.state.phase = 'daily-double'; |
||||
} else { |
||||
this.game.state.phase = 'question'; |
||||
} |
||||
} |
||||
|
||||
setDailyDoubleWager(wager: number): void { |
||||
if (!this.game) return; |
||||
this.game.state.dailyDoubleWager = wager; |
||||
this.game.state.phase = 'question'; |
||||
} |
||||
|
||||
revealAnswer(): void { |
||||
if (!this.game) return; |
||||
this.game.state.phase = 'answer'; |
||||
} |
||||
|
||||
markCorrect(teamId: string): void { |
||||
if (!this.game || !this.currentQuestion) return; |
||||
const points = this.game.state.dailyDoubleWager ?? this.currentQuestion.points; |
||||
this.adjustTeamScore(teamId, points); |
||||
this.finishQuestion(); |
||||
} |
||||
|
||||
markIncorrect(teamId: string): void { |
||||
if (!this.game || !this.currentQuestion) return; |
||||
const points = this.game.state.dailyDoubleWager ?? this.currentQuestion.points; |
||||
this.adjustTeamScore(teamId, -points); |
||||
} |
||||
|
||||
finishQuestion(): void { |
||||
if (!this.game || !this.game.state.currentQuestionId) return; |
||||
const question = this.findQuestion(this.game.state.currentQuestionId); |
||||
if (question) question.isRevealed = true; |
||||
|
||||
this.game.state.currentQuestionId = null; |
||||
this.game.state.currentCategoryId = null; |
||||
this.game.state.dailyDoubleWager = null; |
||||
this.game.state.activeTeamId = null; |
||||
|
||||
// Check if round is complete
|
||||
if (this.isRoundComplete) { |
||||
this.advanceRound(); |
||||
} else { |
||||
this.game.state.phase = 'board'; |
||||
} |
||||
} |
||||
|
||||
advanceRound(): void { |
||||
if (!this.game) return; |
||||
const nextIndex = this.game.state.currentRoundIndex + 1; |
||||
if (nextIndex < this.game.rounds.length) { |
||||
this.game.state.currentRoundIndex = nextIndex; |
||||
this.game.state.phase = 'board'; |
||||
} else if (this.game.settings.enableFinalRound && this.game.finalRound) { |
||||
this.game.state.phase = 'final-category'; |
||||
} else { |
||||
this.game.state.phase = 'finished'; |
||||
} |
||||
} |
||||
|
||||
// Final Round
|
||||
startFinalRound(): void { |
||||
if (!this.game) return; |
||||
this.game.state.phase = 'final-question'; |
||||
} |
||||
|
||||
setFinalWager(teamId: string, wager: number): void { |
||||
if (!this.game) return; |
||||
this.game.state.finalWagers[teamId] = wager; |
||||
} |
||||
|
||||
setFinalAnswer(teamId: string, answer: string): void { |
||||
if (!this.game) return; |
||||
this.game.state.finalAnswers[teamId] = answer; |
||||
} |
||||
|
||||
scoreFinalAnswer(teamId: string, correct: boolean): void { |
||||
if (!this.game) return; |
||||
const wager = this.game.state.finalWagers[teamId] ?? 0; |
||||
this.adjustTeamScore(teamId, correct ? wager : -wager); |
||||
} |
||||
|
||||
finishGame(): void { |
||||
if (!this.game) return; |
||||
this.game.state.phase = 'finished'; |
||||
} |
||||
|
||||
// ============================================
|
||||
// Editor Functions
|
||||
// ============================================
|
||||
|
||||
updateGameName(name: string): void { |
||||
if (!this.game) return; |
||||
this.game.name = name; |
||||
this.game.updatedAt = new Date().toISOString(); |
||||
} |
||||
|
||||
updateCategoryName(roundIndex: number, categoryId: string, name: string): void { |
||||
if (!this.game) return; |
||||
const category = this.game.rounds[roundIndex]?.categories.find((c) => c.id === categoryId); |
||||
if (category) category.name = name; |
||||
} |
||||
|
||||
updateQuestion(questionId: string, updates: Partial<Pick<Question, 'question' | 'answer' | 'isDailyDouble'>>): void { |
||||
if (!this.game) return; |
||||
const question = this.findQuestion(questionId); |
||||
if (question) { |
||||
if (updates.question !== undefined) question.question = updates.question; |
||||
if (updates.answer !== undefined) question.answer = updates.answer; |
||||
if (updates.isDailyDouble !== undefined) question.isDailyDouble = updates.isDailyDouble; |
||||
} |
||||
} |
||||
|
||||
updateFinalRound(category: string, question: string, answer: string): void { |
||||
if (!this.game) return; |
||||
this.game.finalRound = { category, question, answer }; |
||||
} |
||||
|
||||
addRound(): void { |
||||
if (!this.game) return; |
||||
const multiplier = this.game.rounds.length + 1; |
||||
this.game.rounds.push(createEmptyRound(`Round ${multiplier}`, multiplier, this.game.settings)); |
||||
} |
||||
|
||||
removeRound(roundIndex: number): void { |
||||
if (!this.game || this.game.rounds.length <= 1) return; |
||||
this.game.rounds.splice(roundIndex, 1); |
||||
} |
||||
|
||||
// ============================================
|
||||
// Helper Functions
|
||||
// ============================================
|
||||
|
||||
private findQuestion(questionId: string): Question | null { |
||||
if (!this.game) return null; |
||||
for (const round of this.game.rounds) { |
||||
for (const category of round.categories) { |
||||
const question = category.questions.find((q) => q.id === questionId); |
||||
if (question) return question; |
||||
} |
||||
} |
||||
return null; |
||||
} |
||||
} |
||||
|
||||
// Export singleton instance
|
||||
export const kuldvillakStore = new KuldvillakStore(); |
||||
File diff suppressed because it is too large
Load Diff
Binary file not shown.
Binary file not shown.
Loading…
Reference in new issue