Losovačka
Webová aplikace pro náhodné losování z vlastního seznamu. Tři způsoby losování, více pojmenovaných seznamů, historie výsledků, světlý/tmavý režim. Čistý HTML + CSS + JavaScript, bez závislostí a bez build kroku.
Funkce
- Režimy losování: Kolo (otáčející se kolo štěstí), Ruleta (pohled shora, kulička), Karty (zamíchání a vytažení karty)
- Výběry: až 10 samostatných seznamů (
+ přidá, ✕ odebere s potvrzením, ✎ nebo dvojklik přejmenuje; první výběr odebrat nejde)
- Položky: jedna položka na řádek, import a export
.txt (UTF-8)
- Historie: posledních 100 výsledků s datem, výsuvný panel vpravo, řazení kliknutím na hlavičku
- Možnosti: animace zap/vyp (vyp = výsledek hned), „Odebrat z kola" po výsledku, světlý/tmavý režim
- Vše se ukládá do
localStorage prohlížeče (viz níže)
Struktura projektu
index.html HTML kostra (hlavička, panel, dialogy) + načtení souborů
css/
theme.css CSS proměnné, světlý a tmavý motiv
base.css reset, body, hlavička, rozložení stránky
controls.css přepínač animace, volby v hlavičce
wheel.css kolo, ukazatel, střed
panel.css pravý panel: tlačítka, textarea, počítadlo
history.css výsuvný panel s historií, tabulka
presets.css přepínač režimů a záložky výběrů
stage.css přechody mezi režimy kolo/ruleta/karty
cards.css karty
dialogs.css modální okna
js/
state.js konstanty, objekt `state`, load/save do localStorage
theme.js přepínání motivu
wheel.js kreslení kola, funkce `spin()`
roulette.js ruleta: kreslení, fyzika kuličky
cards.js karty: balíček, míchání, vytažení
result.js výsledkový modal
items.js textarea s položkami
presets.js správa výběrů (přidat, odebrat, přejmenovat, přepnout)
io.js import a export .txt
history.js panel historie
dialogs.js potvrzovací modal, reset, vymazání
modes.js přepínání režimů
main.js spuštění aplikace, inicializace
Jak je kód propojený
Soubory v js/ jsou klasické skripty (ne ES moduly) a sdílejí společný globální rozsah. Díky tomu aplikace funguje i po otevření index.html přímo ze složky (file://), bez serveru a bez bundleru. state a pomocné funkce definované v state.js jsou dostupné ve všech dalších souborech.
Pořadí <script> v index.html je důležité. Soubor smí při načtení přímo používat jen to, co definuje on sám nebo soubor načtený před ním. Například modes.js registruje spin a fitCards, proto je až za wheel.js a cards.js. main.js je poslední a spouští inicializaci.
Spuštění lokálně
Stačí otevřít index.html v prohlížeči. Případně libovolný statický server, např.:
npx serve .
Nasazení (Vercel)
Statický web bez build kroku: Vercel servíruje obsah repozitáře tak, jak je (index.html v kořeni). Nastavení „Framework Preset: Other", žádný Build Command, žádný Output Directory. Každý push do main spustí nový deploy.
Měření návštěvnosti zajišťuje Vercel Web Analytics přes dva <script> tagy na konci index.html (/_vercel/insights/script.js). Skript vznikne až po zapnutí Analytics v projektu na Vercelu, lokálně proto vrací 404, což nevadí.
Uložená data (localStorage)
Jeden klíč kolo-stesti:v1 s JSON objektem:
| Pole | Význam |
|---|
items | kopie aktivního výběru (zpětná kompatibilita se starší verzí) |
presets | pole seznamů (pole polí řetězců) |
activePreset | index aktivního výběru |
presetNames | vlastní názvy výběrů ('' = „Výběr N") |
theme | dark / light / nenastaveno (podle systému) |
history | [{ text, ts }], nejnovější první, max 100 |
allowRemove, animate, historyAsc | přepínače |
mode | wheel / roulette / cards |
Starší záznam bez presets se při načtení převede: items skončí ve „Výběr 1". Klíč ani formát neměňte, jinak o uložená data přijdou stávající uživatelé.
Poznámka: otevřete-li aplikaci ve více oknech, sdílí jeden záznam a platí poslední zápis (živá synchronizace mezi okny neexistuje).
Úpravy
- Nový soubor v
js/ nebo css/ přidat do index.html na správné místo v pořadí a doplnit seznam výše.
- Nové pole do
localStorage přidat do load() i save() v js/state.js s ošetřením chybějící hodnoty, aby starší záznamy dál fungovaly.
