new file: .env.example
new file: .gitignore new file: Dockerfile new file: README.md new file: app.py new file: app/__init__.py new file: app/game.py new file: app/models.py new file: app/routes.py new file: app/seed.py new file: data/movies.json new file: docker-compose.yml new file: requirements.txt new file: static/css/style.css new file: static/js/game.js new file: static/js/player.js new file: templates/index.html
This commit is contained in:
SimolZimol
358
static/css/style.css
Normal file
358
static/css/style.css
Normal file
@@ -0,0 +1,358 @@
|
||||
:root {
|
||||
--bg: #0b141a;
|
||||
--bg-2: #101c26;
|
||||
--panel: #16222e;
|
||||
--panel-2: #1b2c39;
|
||||
--border: #2a475e;
|
||||
--border-soft: #22384a;
|
||||
--text: #d7e2ea;
|
||||
--muted: #8299ab;
|
||||
--accent: #66c0f4;
|
||||
--green: #2e9e4f;
|
||||
--yellow: #c9a227;
|
||||
--red: #b3362f;
|
||||
--radius: 10px;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
background:
|
||||
radial-gradient(1200px 500px at 50% -10%, #1e3d52 0%, var(--bg) 55%),
|
||||
linear-gradient(180deg, #0b141a 0%, #060c12 100%);
|
||||
background-attachment: fixed;
|
||||
color: var(--text);
|
||||
font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding: 14px 32px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: linear-gradient(180deg, rgba(20,40,55,0.95) 0%, rgba(11,20,26,0.95) 100%);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 2px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
background: linear-gradient(90deg, var(--accent), #8ab4ff);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
padding: 8px 18px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
transition: all .15s;
|
||||
}
|
||||
|
||||
nav a:hover { color: var(--text); background: var(--panel-2); }
|
||||
nav a.active {
|
||||
color: #fff;
|
||||
background: rgba(102, 192, 244, 0.12);
|
||||
border-color: rgba(102, 192, 244, 0.4);
|
||||
box-shadow: 0 0 0 1px rgba(102,192,244,0.1) inset;
|
||||
}
|
||||
|
||||
.player-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
#player-name { font-weight: 700; }
|
||||
#streak-label { color: var(--muted); font-size: 12px; }
|
||||
|
||||
main {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 24px 32px 64px;
|
||||
}
|
||||
|
||||
#game-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
#mode-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
color: var(--accent);
|
||||
}
|
||||
#attempts-info { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
|
||||
|
||||
/* Suche */
|
||||
#search-wrapper { position: relative; margin-bottom: 24px; }
|
||||
|
||||
#search-input {
|
||||
width: 100%;
|
||||
padding: 14px 18px;
|
||||
font-size: 16px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--panel-2);
|
||||
color: var(--text);
|
||||
outline: none;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
#search-input::placeholder { color: var(--muted); }
|
||||
#search-input:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px rgba(102,192,244,0.18);
|
||||
}
|
||||
|
||||
.autocomplete {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
border-top: none;
|
||||
border-radius: 0 0 var(--radius) var(--radius);
|
||||
max-height: 340px;
|
||||
overflow-y: auto;
|
||||
z-index: 20;
|
||||
display: none;
|
||||
}
|
||||
.autocomplete.open { display: block; }
|
||||
.autocomplete-item {
|
||||
padding: 10px 18px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
.autocomplete-item:hover, .autocomplete-item.selected {
|
||||
background: rgba(102,192,244,0.1);
|
||||
border-left-color: var(--accent);
|
||||
}
|
||||
.autocomplete-item .year { color: var(--muted); font-size: 13px; }
|
||||
|
||||
/* Brett */
|
||||
#board-wrapper {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
table#board {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 1000px;
|
||||
}
|
||||
|
||||
#board th {
|
||||
padding: 12px 12px;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
color: var(--muted);
|
||||
background: var(--panel);
|
||||
border-bottom: 1px solid var(--border);
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#board td {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
background: var(--panel);
|
||||
min-width: 96px;
|
||||
font-size: 13px;
|
||||
vertical-align: middle;
|
||||
word-break: break-word;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#board tr:last-child td { border-bottom: none; }
|
||||
|
||||
#board td.title-cell {
|
||||
background: linear-gradient(180deg, var(--panel-2), var(--panel));
|
||||
font-weight: 700;
|
||||
min-width: 170px;
|
||||
color: #fff;
|
||||
border-right: 1px solid var(--border-soft);
|
||||
}
|
||||
|
||||
/* Status-Zellen */
|
||||
.cell { border-radius: 6px; }
|
||||
.cell.green { background: linear-gradient(180deg, #34b25a, var(--green)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
|
||||
.cell.yellow { background: linear-gradient(180deg, #dfb43a, var(--yellow)); color: #17190d; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
|
||||
.cell.red { background: linear-gradient(180deg, #cf453c, var(--red)); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
|
||||
|
||||
.cell.green .dir-pill, .cell.red .dir-pill { background: rgba(0,0,0,0.25); color: #fff; }
|
||||
.cell.yellow .dir-pill { background: rgba(0,0,0,0.18); color: #17190d; }
|
||||
.cell.green .badge, .cell.red .badge { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.25); }
|
||||
.cell.yellow .badge { background: rgba(255,255,255,0.35); border-color: rgba(0,0,0,0.15); }
|
||||
|
||||
/* Badges (Icon + Label) */
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 3px 8px;
|
||||
margin: 1px 3px 1px 0;
|
||||
border-radius: 5px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
background: rgba(255,255,255,0.08);
|
||||
border: 1px solid var(--border-soft);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.badge .bicon { font-size: 13px; line-height: 1; }
|
||||
|
||||
/* Zahlen (Jahr/Budget) */
|
||||
.num { font-weight: 700; font-size: 14px; margin-right: 6px; }
|
||||
|
||||
/* Pfeil-Kapsel mit Zahl */
|
||||
.dir-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
padding: 2px 7px;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
background: rgba(0,0,0,0.25);
|
||||
color: #fff;
|
||||
font-variant-numeric: tabular-nums;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dir-pill.up { background: #216e37; color: #b8f5c6; }
|
||||
.dir-pill.down { background: #8f2f29; color: #ffd0ca; }
|
||||
|
||||
/* FSK Badge */
|
||||
.fsk {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 34px;
|
||||
height: 22px;
|
||||
padding: 0 6px;
|
||||
border-radius: 5px;
|
||||
font-weight: 800;
|
||||
font-size: 13px;
|
||||
background: rgba(0,0,0,0.35);
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255,255,255,0.25);
|
||||
}
|
||||
.fsk-0 { background: #2e7d32; }
|
||||
.fsk-6 { background: #2f6fbe; }
|
||||
.fsk-12 { background: #f9a825; color: #201a03; }
|
||||
.fsk-16 { background: #ef6c00; }
|
||||
.fsk-18 { background: #b71c1c; }
|
||||
|
||||
.director { font-weight: 600; }
|
||||
.none { color: rgba(255,255,255,0.55); }
|
||||
|
||||
/* Ergebnis */
|
||||
#result-box {
|
||||
margin-top: 24px;
|
||||
padding: 22px 26px;
|
||||
border-radius: var(--radius);
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
font-size: 16px;
|
||||
}
|
||||
#result-box.won { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
|
||||
#result-box.lost { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
|
||||
#result-box .target-title { font-size: 20px; font-weight: 700; margin: 6px 0; color: #fff; }
|
||||
|
||||
#result-box button {
|
||||
margin-top: 14px;
|
||||
padding: 11px 22px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #7bd0f8, var(--accent));
|
||||
color: #062030;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(102,192,244,0.3);
|
||||
transition: filter .15s;
|
||||
}
|
||||
#result-box button:hover { filter: brightness(1.08); }
|
||||
|
||||
.hidden { display: none !important; }
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(4, 10, 15, 0.78);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
.modal-content {
|
||||
background: var(--panel-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 30px;
|
||||
max-width: 420px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
|
||||
}
|
||||
.modal-content h2 { margin-bottom: 8px; color: #fff; }
|
||||
.modal-content p { color: var(--muted); margin-bottom: 18px; line-height: 1.5; }
|
||||
.modal-content input {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-2);
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
margin-bottom: 14px;
|
||||
outline: none;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
.modal-content input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(102,192,244,0.18); }
|
||||
.modal-content button {
|
||||
width: 100%;
|
||||
padding: 13px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(180deg, #7bd0f8, var(--accent));
|
||||
color: #062030;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px rgba(102,192,244,0.3);
|
||||
transition: filter .15s;
|
||||
}
|
||||
|
||||
375
static/js/game.js
Normal file
375
static/js/game.js
Normal file
@@ -0,0 +1,375 @@
|
||||
(() => {
|
||||
const mode = document.body.dataset.mode; // 'daily' | 'unlimited'
|
||||
const searchInput = document.getElementById("search-input");
|
||||
const autocompleteBox = document.getElementById("autocomplete");
|
||||
const boardBody = document.getElementById("board-body");
|
||||
const attemptsInfo = document.getElementById("attempts-info");
|
||||
const resultBox = document.getElementById("result-box");
|
||||
const nicknameModal = document.getElementById("nickname-modal");
|
||||
const playerNameEl = document.getElementById("player-name");
|
||||
const streakLabel = document.getElementById("streak-label");
|
||||
|
||||
let player = PlayerStore.load();
|
||||
let sessionId = null;
|
||||
let maxAttempts = 10;
|
||||
let finished = false;
|
||||
|
||||
// ---------- Spieler ----------
|
||||
function showNicknameModal() {
|
||||
if (!player) {
|
||||
nicknameModal.classList.remove("hidden");
|
||||
} else {
|
||||
nicknameModal.classList.add("hidden");
|
||||
playerNameEl.textContent = player.nickname;
|
||||
}
|
||||
renderStreaks();
|
||||
}
|
||||
|
||||
async function submitNickname() {
|
||||
const input = document.getElementById("nickname-input");
|
||||
const nickname = input.value.trim();
|
||||
if (!nickname) return;
|
||||
const res = await fetch("/api/player", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ nickname }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.player) {
|
||||
player = data.player;
|
||||
PlayerStore.save(player);
|
||||
PlayerStore.setStreaks(data.streaks);
|
||||
nicknameModal.classList.add("hidden");
|
||||
playerNameEl.textContent = player.nickname;
|
||||
renderStreaks();
|
||||
startGame();
|
||||
}
|
||||
}
|
||||
|
||||
function renderStreaks() {
|
||||
const streaks = PlayerStore.getStreaks();
|
||||
if (!streaks) { streakLabel.textContent = ""; return; }
|
||||
const s = mode === "daily" ? streaks.daily : streaks.unlimited;
|
||||
if (!s) { streakLabel.textContent = ""; return; }
|
||||
streakLabel.textContent = `🏆 ${s.win} Siege · 💀 ${s.loss} Niederlagen`;
|
||||
}
|
||||
|
||||
// ---------- Spielstart ----------
|
||||
async function startGame() {
|
||||
if (!player) return;
|
||||
const res = await fetch("/api/start", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ player_id: player.id, mode }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.error) { alert(data.error); return; }
|
||||
sessionId = data.session_id;
|
||||
maxAttempts = data.max_attempts;
|
||||
attemptsInfo.textContent = `Versuche: 0 / ${maxAttempts}`;
|
||||
|
||||
if (data.already_played) {
|
||||
finished = true;
|
||||
showResult(data.status, data.target, data.attempts_used);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Suche / Autocomplete ----------
|
||||
let searchTimer = null;
|
||||
let suggestions = [];
|
||||
let selectedIndex = -1;
|
||||
|
||||
searchInput.addEventListener("input", () => {
|
||||
clearTimeout(searchTimer);
|
||||
const q = searchInput.value.trim();
|
||||
if (!q) { closeAutocomplete(); return; }
|
||||
searchTimer = setTimeout(async () => {
|
||||
const res = await fetch(`/api/search?q=${encodeURIComponent(q)}`);
|
||||
suggestions = await res.json();
|
||||
renderAutocomplete();
|
||||
}, 200);
|
||||
});
|
||||
|
||||
function renderAutocomplete() {
|
||||
autocompleteBox.innerHTML = "";
|
||||
selectedIndex = -1;
|
||||
if (!suggestions.length) { closeAutocomplete(); return; }
|
||||
suggestions.forEach((s, i) => {
|
||||
const div = document.createElement("div");
|
||||
div.className = "autocomplete-item";
|
||||
div.innerHTML = `<span>${escapeHtml(s.title)}</span><span class="year">${s.year}</span>`;
|
||||
div.addEventListener("mousedown", (e) => {
|
||||
e.preventDefault();
|
||||
selectSuggestion(i);
|
||||
});
|
||||
div.addEventListener("mouseenter", () => { selectedIndex = i; highlight(); });
|
||||
autocompleteBox.appendChild(div);
|
||||
});
|
||||
autocompleteBox.classList.add("open");
|
||||
}
|
||||
|
||||
function highlight() {
|
||||
[...autocompleteBox.children].forEach((el, i) => {
|
||||
el.classList.toggle("selected", i === selectedIndex);
|
||||
});
|
||||
}
|
||||
|
||||
function closeAutocomplete() {
|
||||
autocompleteBox.classList.remove("open");
|
||||
autocompleteBox.innerHTML = "";
|
||||
}
|
||||
|
||||
function selectSuggestion(i) {
|
||||
const s = suggestions[i];
|
||||
if (!s) return;
|
||||
closeAutocomplete();
|
||||
submitGuess(s);
|
||||
}
|
||||
|
||||
searchInput.addEventListener("keydown", (e) => {
|
||||
if (!autocompleteBox.classList.contains("open")) return;
|
||||
if (e.key === "ArrowDown") { e.preventDefault(); selectedIndex = Math.min(selectedIndex + 1, suggestions.length - 1); highlight(); }
|
||||
else if (e.key === "ArrowUp") { e.preventDefault(); selectedIndex = Math.max(selectedIndex - 1, 0); highlight(); }
|
||||
else if (e.key === "Enter") { e.preventDefault(); selectSuggestion(selectedIndex); }
|
||||
else if (e.key === "Escape") { closeAutocomplete(); }
|
||||
});
|
||||
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!searchWrapperContains(e.target)) closeAutocomplete();
|
||||
});
|
||||
function searchWrapperContains(t) {
|
||||
const w = document.getElementById("search-wrapper");
|
||||
return w.contains(t);
|
||||
}
|
||||
|
||||
// ---------- Tipp abgeben ----------
|
||||
async function submitGuess(movie) {
|
||||
if (finished || !sessionId) return;
|
||||
searchInput.value = "";
|
||||
const res = await fetch("/api/guess", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ session_id: sessionId, movie_id: movie.id }),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.error) {
|
||||
if (data.status) {
|
||||
finished = true;
|
||||
showResult(data.status, null, data.attempts_used || 0);
|
||||
} else {
|
||||
alert(data.error);
|
||||
}
|
||||
return;
|
||||
}
|
||||
attemptsInfo.textContent = `Versuche: ${data.attempts_used} / ${data.max_attempts}`;
|
||||
addRow(data.row);
|
||||
|
||||
if (data.finished) {
|
||||
finished = true;
|
||||
if (data.streaks) {
|
||||
PlayerStore.setStreaks(data.streaks);
|
||||
renderStreaks();
|
||||
}
|
||||
showResult(data.status, data.target, data.attempts_used);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------- Icons (Gamedle-/Steam-Stil) ----------
|
||||
const ICONS = {
|
||||
platforms: {
|
||||
"Netflix": ["📺", "#e50914"],
|
||||
"Disney+": ["🐭", "#3f6fc9"],
|
||||
"Prime Video": ["📦", "#00a8e1"],
|
||||
"Max": ["🌊", "#6a4fa3"],
|
||||
"Apple TV+": ["🍎", "#9aa0a6"],
|
||||
"Paramount+": ["🏔️", "#0f5cab"],
|
||||
"Blu-ray": ["💿", "#2f6fbe"],
|
||||
"DVD": ["💿", "#8f959b"],
|
||||
"4K UHD": ["🖥️", "#7f5cd6"],
|
||||
"Cinema": ["🍿", "#e53935"],
|
||||
},
|
||||
genres: {
|
||||
"Action": ["💥", "#ff7043"],
|
||||
"Abenteuer": ["🗺️", "#a1887f"],
|
||||
"Animation": ["🎨", "#ab47bc"],
|
||||
"Komödie": ["😂", "#f6c445"],
|
||||
"Krimi": ["🕵️", "#5c6bc0"],
|
||||
"Drama": ["🎭", "#7e8b98"],
|
||||
"Fantasy": ["🐉", "#7e57c2"],
|
||||
"Horror": ["👻", "#546e7a"],
|
||||
"Mystery": ["🔍", "#26a69a"],
|
||||
"Romantik": ["💘", "#ec407a"],
|
||||
"Sci-Fi": ["🚀", "#29b6f6"],
|
||||
"Thriller": ["🔪", "#8d2f2f"],
|
||||
"Western": ["🤠", "#a1887f"],
|
||||
"Musical": ["🎵", "#f06292"],
|
||||
"Krieg": ["🪖", "#6d4c41"],
|
||||
"Biografie": ["📖", "#b0bec5"],
|
||||
},
|
||||
studios: {
|
||||
"Warner Bros": ["🎞️", "#3f6fc9"],
|
||||
"Disney": ["🏰", "#2f6fbe"],
|
||||
"Universal": ["🌐", "#1d8aaa"],
|
||||
"Paramount": ["🏔️", "#3c5a93"],
|
||||
"Sony Pictures": ["🎥", "#7f5cd6"],
|
||||
"20th Century": ["🦊", "#e0892f"],
|
||||
"MGM": ["🦁", "#c2a845"],
|
||||
"Lionsgate": ["🦁", "#9aa0a6"],
|
||||
"A24": ["⏳", "#e2a11f"],
|
||||
"DreamWorks": ["🌙", "#5b6b8c"],
|
||||
"New Line": ["🟦", "#2f6fbe"],
|
||||
"Orion": ["⭐", "#c9c9c9"],
|
||||
"Neon": ["⚡", "#1fb8e0"],
|
||||
"CJ Entertainment": ["🎬", "#c93030"],
|
||||
"Show East": ["🎥", "#666"],
|
||||
"Dimension": ["🌀", "#9c27b0"],
|
||||
"Netflix": ["📺", "#e50914"],
|
||||
},
|
||||
universes: {
|
||||
"MCU": ["🛡️", "#d63031"],
|
||||
"Star Wars": ["🎆", "#3a3f47"],
|
||||
"DC": ["🦇", "#1f2937"],
|
||||
"Wizarding World": ["⚡", "#7e57c2"],
|
||||
"Fast & Furious": ["🏎️", "#37474f"],
|
||||
"Herr der Ringe": ["💍", "#a1887f"],
|
||||
"Spider-Man": ["🕷️", "#c62828"],
|
||||
},
|
||||
};
|
||||
|
||||
function iconFor(map, name) {
|
||||
if (!name || !map[name]) return "▪️";
|
||||
return map[name][0];
|
||||
}
|
||||
function colorFor(map, name) {
|
||||
if (!map || !name || !map[name]) return null;
|
||||
return map[name][1];
|
||||
}
|
||||
|
||||
// Badge mit Icon + Label
|
||||
function badge(map, name) {
|
||||
if (!name) return "";
|
||||
const color = colorFor(map, name);
|
||||
const style = color ? `style="--tag:${color}"` : "";
|
||||
return `<span class="badge" ${style}><span class="bicon">${iconFor(map, name)}</span>${escapeHtml(name)}</span>`;
|
||||
}
|
||||
|
||||
function addRow(row) {
|
||||
const tr = document.createElement("tr");
|
||||
|
||||
const titleTd = document.createElement("td");
|
||||
titleTd.className = "title-cell";
|
||||
titleTd.textContent = row.title;
|
||||
tr.appendChild(titleTd);
|
||||
|
||||
tr.appendChild(cell(row.platforms.value.map(v => badge(ICONS.platforms, v)).join(""), row.platforms.status));
|
||||
tr.appendChild(cell(row.genres.value.map(v => badge(ICONS.genres, v)).join(""), row.genres.status));
|
||||
tr.appendChild(cell(yearHtml(row.year), row.year.status));
|
||||
tr.appendChild(cell(fskHtml(row.fsk.value), row.fsk.status));
|
||||
tr.appendChild(cell(badge(ICONS.studios, row.studio.value), row.studio.status));
|
||||
tr.appendChild(cell(row.director.value ? `<span class="director">${escapeHtml(row.director.value)}</span>` : `<span class="none">–</span>`, row.director.status));
|
||||
tr.appendChild(cell(budgetHtml(row.budget), row.budget.status));
|
||||
tr.appendChild(cell(badge(ICONS.universes, row.universe.value), row.universe.status));
|
||||
|
||||
boardBody.prepend(tr);
|
||||
}
|
||||
|
||||
function yearHtml(row) {
|
||||
return `<span class="num">${row.value}</span>${arrowDiff(row.direction, row.diff)}`;
|
||||
}
|
||||
|
||||
function fskHtml(fsk) {
|
||||
if (fsk == null) return `<span class="none">–</span>`;
|
||||
return `<span class="fsk fsk-${fsk}">${fsk}</span>`;
|
||||
}
|
||||
|
||||
function budgetHtml(row) {
|
||||
if (row.value == null) return `<span class="none">–</span>`;
|
||||
return `<span class="num">${formatMoney(row.value)}</span>${arrowMoney(row.direction, row.diff)}`;
|
||||
}
|
||||
|
||||
// Pfeil mit Zahl (z.B. Jahr): ▲ 5 / ▼ 3
|
||||
function arrowDiff(dir, diff) {
|
||||
if (dir === "equal" || diff == null) return "";
|
||||
const cls = dir === "up" ? "up" : "down";
|
||||
const gly = dir === "up" ? "▲" : "▼";
|
||||
return `<span class="dir-pill ${cls}">${gly} ${Math.abs(diff)}</span>`;
|
||||
}
|
||||
|
||||
// Pfeil mit Differenz in Geld (Budget)
|
||||
function arrowMoney(dir, diff) {
|
||||
if (dir === "equal" || diff == null) return "";
|
||||
const cls = dir === "up" ? "up" : "down";
|
||||
const gly = dir === "up" ? "▲" : "▼";
|
||||
const n = Math.abs(diff);
|
||||
const txt = n >= 1000000 ? (n / 1000000).toFixed(0) + " Mio $" : Math.round(n / 1000) + " Tsd $";
|
||||
return `<span class="dir-pill ${cls}">${gly} ${txt}</span>`;
|
||||
}
|
||||
|
||||
function cell(inner, status) {
|
||||
const td = document.createElement("td");
|
||||
td.innerHTML = inner;
|
||||
td.classList.add("cell", status);
|
||||
return td;
|
||||
}
|
||||
|
||||
function formatMoney(n) {
|
||||
if (n >= 1000000) return (n / 1000000).toFixed(0) + " Mio $";
|
||||
return n.toLocaleString("de-DE") + " $";
|
||||
}
|
||||
|
||||
// ---------- Ergebnis ----------
|
||||
function showResult(status, target, attemptsUsed) {
|
||||
resultBox.classList.remove("hidden", "won", "lost");
|
||||
if (status === "won") {
|
||||
resultBox.classList.add("won");
|
||||
resultBox.innerHTML = `<div>🎉 <strong>Gewonnen!</strong> Du hast den Film in ${attemptsUsed} Versuch(en) erraten.</div>${target ? `<div class="target-title">${escapeHtml(target.title)} (${target.year})</div>` : ""}${newGameButton()}`;
|
||||
} else {
|
||||
resultBox.classList.add("lost");
|
||||
resultBox.innerHTML = `<div>😞 <strong>Verloren!</strong> Du hattest ${attemptsUsed} Versuch(e).</div>${target ? `Der gesuchte Film war: <div class="target-title">${escapeHtml(target.title)} (${target.year})</div>` : ""}${newGameButton()}`;
|
||||
}
|
||||
}
|
||||
|
||||
function newGameButton() {
|
||||
const label = mode === "unlimited" ? "Neues Spiel" : "Zurück zu Täglich";
|
||||
if (mode === "unlimited") {
|
||||
return `<button id="new-game-btn">${label}</button>`;
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
document.addEventListener("click", async (e) => {
|
||||
if (e.target.id === "nickname-submit") await submitNickname();
|
||||
if (e.target.id === "new-game-btn") {
|
||||
finished = false;
|
||||
resultBox.classList.add("hidden");
|
||||
resultBox.innerHTML = "";
|
||||
boardBody.innerHTML = "";
|
||||
const res = await fetch("/api/new-game", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ player_id: player.id }),
|
||||
});
|
||||
const data = await res.json();
|
||||
sessionId = data.session_id;
|
||||
maxAttempts = data.max_attempts;
|
||||
attemptsInfo.textContent = `Versuche: 0 / ${maxAttempts}`;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("nickname-input").addEventListener("keydown", (e) => {
|
||||
if (e.key === "Enter") submitNickname();
|
||||
});
|
||||
|
||||
// ---------- Init ----------
|
||||
function escapeHtml(s) {
|
||||
if (s == null) return "";
|
||||
const div = document.createElement("div");
|
||||
div.textContent = String(s);
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
window.addEventListener("load", () => {
|
||||
showNicknameModal();
|
||||
if (player) startGame();
|
||||
});
|
||||
})();
|
||||
36
static/js/player.js
Normal file
36
static/js/player.js
Normal file
@@ -0,0 +1,36 @@
|
||||
// Spieler-Verwaltung (Nickname -> player_id in localStorage)
|
||||
const PlayerStore = (() => {
|
||||
const KEY = "filmdle_player";
|
||||
const STREAK_KEY = "filmdle_streaks";
|
||||
|
||||
function save(player) {
|
||||
localStorage.setItem(KEY, JSON.stringify(player));
|
||||
}
|
||||
|
||||
function load() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(KEY));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getStreaks() {
|
||||
try {
|
||||
return JSON.parse(localStorage.getItem(STREAK_KEY));
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function setStreaks(streaks) {
|
||||
localStorage.setItem(STREAK_KEY, JSON.stringify(streaks));
|
||||
}
|
||||
|
||||
function clear() {
|
||||
localStorage.removeItem(KEY);
|
||||
localStorage.removeItem(STREAK_KEY);
|
||||
}
|
||||
|
||||
return { save, load, getStreaks, setStreaks, clear };
|
||||
})();
|
||||
Reference in New Issue
Block a user