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
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();
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user