786 lines
33 KiB
Python
786 lines
33 KiB
Python
import os
|
||
import time
|
||
import sqlite3
|
||
from flask import Flask, request, redirect, session
|
||
from datetime import datetime, timezone, timedelta
|
||
|
||
app = Flask(__name__)
|
||
app.secret_key = "octan-tower-kragle-everything-is-awesome-2026" # für session (Adventure-Fortschritt)
|
||
|
||
# ─── SQLite-Datenbank (U18) ──────────────────────────────────────────────────
|
||
BASE_DIR = os.path.dirname(os.path.abspath(__file__))
|
||
DB_PATH = os.path.join(BASE_DIR, "adventure.db")
|
||
|
||
def get_db():
|
||
db = sqlite3.connect(DB_PATH)
|
||
db.row_factory = sqlite3.Row # Spalten per Name ansprechen
|
||
return db
|
||
|
||
# ─── Zeitzone: CEST (UTC+2) ──────────────────────────────────────────────────
|
||
BERLIN = timezone(timedelta(hours=2))
|
||
|
||
def jetzt():
|
||
return datetime.now(BERLIN).strftime("%d.%m.%Y, %H:%M Uhr")
|
||
|
||
# ─── Kommentare im Arbeitsspeicher ───────────────────────────────────────────
|
||
# Schema: {"name": str, "text": str, "zeit": str,
|
||
# "antworten": [{"name": str, "text": str, "zeit": str}]}
|
||
eintraege = []
|
||
|
||
# ─────────────────────────────────────────────────────────────────────────────
|
||
# Hilfsfunktion: gemeinsames HTML-Gerüst
|
||
# ─────────────────────────────────────────────────────────────────────────────
|
||
def seite(inhalt):
|
||
return """<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Flask-App – David & Karo</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
font-family: Arial, sans-serif;
|
||
background: #f9f9f9;
|
||
color: #333;
|
||
min-height: 100vh;
|
||
}
|
||
.topbar {
|
||
background: #fff;
|
||
border-bottom: 1px solid #e0e0e0;
|
||
padding: 0 20px;
|
||
height: 56px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16px;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
.topbar-logo {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #cc181e;
|
||
letter-spacing: -1px;
|
||
text-decoration: none;
|
||
}
|
||
.topbar nav { display: flex; gap: 12px; margin-left: 16px; }
|
||
.topbar nav a {
|
||
font-size: 13px;
|
||
color: #555;
|
||
text-decoration: none;
|
||
padding: 4px 10px;
|
||
border-radius: 2px;
|
||
border: 1px solid transparent;
|
||
transition: border-color 0.15s;
|
||
}
|
||
.topbar nav a:hover { border-color: #ccc; background: #f5f5f5; }
|
||
.topbar nav a.aktiv { color: #cc181e; border-color: #cc181e; }
|
||
.topbar-back {
|
||
margin-left: auto;
|
||
font-size: 13px;
|
||
color: #167ac6;
|
||
text-decoration: none;
|
||
padding: 6px 14px;
|
||
border: 1px solid #167ac6;
|
||
border-radius: 2px;
|
||
font-weight: bold;
|
||
white-space: nowrap;
|
||
transition: background 0.15s, color 0.15s;
|
||
}
|
||
.topbar-back:hover { background: #167ac6; color: #fff; }
|
||
.container {
|
||
max-width: 900px;
|
||
margin: 30px auto;
|
||
padding: 0 20px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="topbar">
|
||
<a href="/app/" class="topbar-logo">▶ Flask-App</a>
|
||
<nav>
|
||
<a href="/app/">🧱 Adventure</a>
|
||
<a href="/app/pinnwand" class="aktiv">Kommentare</a>
|
||
</nav>
|
||
<a href="https://isa2.edumake.de" class="topbar-back">← Zurück zur Website</a>
|
||
</div>
|
||
<div class="container">""" + inhalt + """
|
||
</div>
|
||
</body>
|
||
</html>"""
|
||
|
||
|
||
# ─────────────────────────────────────────────────────────────────────────────
|
||
# U18 – Klick-Adventure "Einbruch im Octan-Tower" (The-Lego-Movie-Style)
|
||
# Räume, Ausgänge und Trivia-Fragen kommen aus der SQLite-Datenbank adventure.db
|
||
# ─────────────────────────────────────────────────────────────────────────────
|
||
def adventure_seite(inhalt, akzent="#f59e0b"):
|
||
kopf = """<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Einbruch im Octan-Tower – Klick-Adventure</title>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body { background:#0f172a; color:#e5e7eb;
|
||
font-family: system-ui, "Segoe UI", Arial, sans-serif;
|
||
min-height:100vh; line-height:1.6; }
|
||
.adv-topbar { display:flex; align-items:center; gap:10px; padding:12px 20px;
|
||
background:#111827; border-bottom:2px solid ACCENT; }
|
||
.adv-logo { font-weight:800; letter-spacing:-.5px; color:ACCENT;
|
||
text-decoration:none; font-size:18px; }
|
||
.adv-topbar .link { color:#93c5fd; text-decoration:none; font-size:14px;
|
||
border:1px solid #334155; border-radius:8px; padding:6px 12px; }
|
||
.adv-topbar .link:hover { background:#1e293b; }
|
||
.adv-topbar .spacer { margin-left:auto; }
|
||
.adv-wrap { max-width:680px; margin:44px auto; padding:0 18px; }
|
||
.adv-card { background:#1e293b; border:1px solid #334155; border-radius:16px;
|
||
padding:30px; box-shadow:0 10px 30px rgba(0,0,0,.35); }
|
||
.adv-card h1 { font-size:26px; margin-bottom:6px; }
|
||
.adv-floor { font-size:12px; text-transform:uppercase; letter-spacing:2px;
|
||
color:ACCENT; font-weight:700; }
|
||
.adv-desc { color:#cbd5e1; margin:14px 0 22px; }
|
||
.adv-progress { font-size:13px; color:#94a3b8; margin-bottom:16px; }
|
||
.adv-frage { font-size:19px; font-weight:600; margin-bottom:18px; }
|
||
.opt-form { display:flex; flex-direction:column; gap:12px; }
|
||
.opt-btn { display:block; width:100%; text-align:left; background:#0f172a;
|
||
color:#e5e7eb; border:1px solid #334155; border-radius:10px;
|
||
padding:14px 16px; font-size:16px; cursor:pointer;
|
||
transition:.15s; font-family:inherit; }
|
||
.opt-btn:hover { border-color:ACCENT; background:#172033; transform:translateY(-1px); }
|
||
.exit-link { display:inline-block; background:ACCENT; color:#111827; font-weight:700;
|
||
text-decoration:none; border-radius:10px; padding:12px 18px;
|
||
margin:6px 8px 0 0; }
|
||
.exit-link:hover { filter:brightness(1.08); }
|
||
.ghost-link { display:inline-block; color:#93c5fd; text-decoration:none;
|
||
border:1px solid #334155; border-radius:10px; padding:12px 18px;
|
||
margin:6px 8px 0 0; }
|
||
.ghost-link:hover { background:#0f172a; }
|
||
.pfade { display:flex; flex-direction:column; gap:14px; margin-top:8px; }
|
||
.pfad { background:#0f172a; border:1px solid #334155; border-radius:12px;
|
||
padding:14px 16px; transition:.15s; }
|
||
.pfad:hover { border-color:ACCENT; transform:translateY(-1px); }
|
||
.pfad .exit-link { margin:0 0 6px 0; }
|
||
.pfad-hinweis { display:block; color:#94a3b8; font-size:14px; }
|
||
.deal { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 22px; }
|
||
.deal span { background:#0f172a; border:1px solid #334155; border-radius:8px;
|
||
padding:8px 12px; font-size:14px; }
|
||
.timer-wrap { margin:2px 0 18px; }
|
||
.timer { font-size:42px; font-weight:800; color:#f87171; line-height:1;
|
||
font-variant-numeric:tabular-nums; }
|
||
.timer small { font-size:16px; color:#94a3b8; font-weight:600; }
|
||
.timer-bar { height:8px; background:#0f172a; border:1px solid #334155;
|
||
border-radius:6px; overflow:hidden; margin-top:10px; }
|
||
.timer-bar > div { height:100%; background:#f87171; width:100%;
|
||
transition:width .12s linear; }
|
||
.exit-link.danger { background:#f87171; }
|
||
.exit-link.danger:hover { filter:brightness(1.08); }
|
||
.feedback-bad { background:#7f1d1d; border:1px solid #b91c1c; color:#fecaca;
|
||
border-radius:10px; padding:12px 14px; margin-bottom:16px; font-weight:600; }
|
||
.win-emoji { font-size:54px; text-align:center; margin-bottom:8px; }
|
||
.muted { color:#94a3b8; font-size:14px; margin-top:20px; }
|
||
.muted a { color:#93c5fd; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="adv-topbar">
|
||
<a href="/app/" class="adv-logo">🧱 Octan-Tower</a>
|
||
<a href="/app/pinnwand" class="link spacer">💬 Kommentare</a>
|
||
<a href="https://isa2.edumake.de" class="link">← Website</a>
|
||
</div>
|
||
<div class="adv-wrap">""".replace("ACCENT", akzent)
|
||
fuss = """</div>
|
||
</body>
|
||
</html>"""
|
||
return kopf + inhalt + fuss
|
||
|
||
|
||
@app.route("/")
|
||
def start():
|
||
# Fortschritt für einen frischen Durchlauf zurücksetzen
|
||
for key in [k for k in list(session.keys())
|
||
if k.startswith("raum_") or k.startswith("chal_")]:
|
||
session.pop(key, None)
|
||
inhalt = """
|
||
<div class="adv-card">
|
||
<div class="adv-floor">LEGO • Geheimmission</div>
|
||
<h1>Einbruch im Octan-Tower 🧱</h1>
|
||
<p class="adv-desc">Präsident Business hortet ganz oben in seinem Wolkenkratzer
|
||
das <strong>Kragle</strong> – und will damit die ganze Welt für immer festkleben.
|
||
Nur du kannst ihn stoppen! Kämpf dich Etage für Etage nach oben: vorbei an
|
||
<strong>Haien</strong> 🦈, <strong>Lasern</strong> 🔴 und – natürlich –
|
||
<strong>Laserhaien</strong> 🦈⚡.</p>
|
||
<p class="adv-desc">Jede Etage ist ein Gang, der sich gabelt. <strong>Lies die
|
||
Hinweise genau!</strong> Der <strong>sichere Prüf-Weg</strong> stellt dir ein paar
|
||
thematische Fragen und führt gemütlich eine Etage höher. Der andere Weg ist eine
|
||
<strong>riskante Abkürzung</strong>: Dort wartet jemand mit einem Deal – schaffst
|
||
du seine Fragen <strong>gegen die Uhr</strong>, springst du weit nach oben. Ein
|
||
Fehler oder zu langsam? <strong>Mission vorbei.</strong> Ganz oben wartet die
|
||
letzte Frage zu Präsident Business.</p>
|
||
<a href="/app/raum/1" class="exit-link">Abenteuer starten ▶</a>
|
||
<p class="muted">Lieber quatschen statt einbrechen?
|
||
<a href="/app/pinnwand">Zu den Kommentaren →</a></p>
|
||
</div>"""
|
||
return adventure_seite(inhalt)
|
||
|
||
|
||
@app.route("/frage")
|
||
def frage():
|
||
return redirect("/app/")
|
||
|
||
|
||
# ─── Adventure-Helfer: Sieg / Game Over / Challenge ──────────────────────────
|
||
def _clear_challenge(rid):
|
||
"""Timer- und Fortschritts-Keys einer Challenge aus der Session entfernen."""
|
||
session.pop("chal_%d_deadline" % rid, None)
|
||
session.pop("chal_%d_idx" % rid, None)
|
||
session.modified = True
|
||
|
||
|
||
def sieg_screen(text=None):
|
||
body = text or ("Du hast Präsident Business gestoppt und das Kragle gesichert. "
|
||
"Die Welt bleibt frei – und kreativ!")
|
||
inhalt = ("""
|
||
<div class="adv-card" style="text-align:center">
|
||
<div class="win-emoji">🎉🧱🎉</div>
|
||
<div class="adv-floor">Mission erfüllt</div>
|
||
<h1>Befreit!</h1>
|
||
<p class="adv-desc">%s</p>
|
||
<p class="adv-frage" style="color:#f59e0b">„Everything is awesome!“ 🎵</p>
|
||
<a href="/app/" class="exit-link">Nochmal spielen 🔁</a>
|
||
<a href="/app/pinnwand" class="ghost-link">Sieg in den Kommentaren feiern 💬</a>
|
||
</div>""" % esc(body))
|
||
return adventure_seite(inhalt)
|
||
|
||
|
||
def gameover_screen(grund):
|
||
inhalt = ("""
|
||
<div class="adv-card" style="text-align:center">
|
||
<div class="win-emoji">💥🤖💥</div>
|
||
<div class="adv-floor" style="color:#f87171">Mission gescheitert</div>
|
||
<h1>Erwischt!</h1>
|
||
<p class="adv-desc">%s</p>
|
||
<a href="/app/" class="exit-link">Nochmal von vorn ▶</a>
|
||
<a href="/app/pinnwand" class="ghost-link">Frust in den Kommentaren lassen 💬</a>
|
||
</div>""" % esc(grund))
|
||
return adventure_seite(inhalt, akzent="#f87171")
|
||
|
||
|
||
def challenge_raum(db, r):
|
||
"""Risk/Reward-Abkürzung mit Zeitlimit (Biologe, Elektriker, Cyborgs)."""
|
||
rid = r["id"]
|
||
limit = int(r["zeit_limit"] or 40)
|
||
ziel = int(r["ziel_anzahl"] or 10)
|
||
erfolg_raum = r["erfolg_raum"] or 0
|
||
erfolg_text = r["erfolg_text"] or ""
|
||
dl_key = "chal_%d_deadline" % rid
|
||
idx_key = "chal_%d_idx" % rid
|
||
|
||
fragen = db.execute(
|
||
"SELECT * FROM fragen WHERE raum_id=? ORDER BY id", (rid,)
|
||
).fetchall()
|
||
back = db.execute(
|
||
"SELECT nach_raum FROM ausgaenge WHERE von_raum=? ORDER BY rowid LIMIT 1",
|
||
(rid,)
|
||
).fetchone()
|
||
db.close()
|
||
back_raum = back["nach_raum"] if back else 1
|
||
gesamt = min(ziel, len(fragen)) if fragen else ziel
|
||
now = time.time()
|
||
|
||
# ── Noch nicht gestartet → Intro (die Entscheidung: Risk vs. Reward) ──
|
||
if dl_key not in session:
|
||
if request.args.get("start") == "1" and fragen:
|
||
session[dl_key] = now + limit
|
||
session[idx_key] = 0
|
||
session.modified = True
|
||
return redirect("/app/raum/%d" % rid)
|
||
reward = ("🏆 Bei Erfolg: sofort gewonnen!" if not erfolg_raum
|
||
else "🏆 Bei Erfolg: Express ganz nach oben")
|
||
inhalt = ("""
|
||
<div class="adv-card">
|
||
<div class="adv-floor">⚠️ Risiko-Abkürzung · Etage %d</div>
|
||
<h1>%s</h1>
|
||
<p class="adv-desc">%s</p>
|
||
<div class="deal">
|
||
<span>🎯 %d Fragen richtig</span>
|
||
<span>⏱️ %d Sekunden</span>
|
||
<span>%s</span>
|
||
<span>💀 Ein Fehler = Aus</span>
|
||
</div>
|
||
<a href="/app/raum/%d?start=1" class="exit-link danger">Herausforderung annehmen ⏱️</a>
|
||
<a href="/app/raum/%d" class="ghost-link">Lieber den sicheren Prüf-Weg</a>
|
||
</div>""" % (r["etage"] or 0, esc(r["name"]), esc(r["beschreibung"]),
|
||
gesamt, limit, reward, rid, back_raum))
|
||
return adventure_seite(inhalt, akzent="#f87171")
|
||
|
||
# ── Challenge läuft ──
|
||
deadline = session.get(dl_key, 0)
|
||
idx = session.get(idx_key, 0)
|
||
|
||
# Zeit abgelaufen? (Server ist die Wahrheit; JS meldet Timeout per ?timeout=1)
|
||
if now > deadline or request.args.get("timeout") == "1":
|
||
_clear_challenge(rid)
|
||
return gameover_screen(
|
||
"⏱️ Zeit abgelaufen! Die Wachen kommen näher – du musst fliehen. "
|
||
"Der riskante Weg hat dich diesmal erwischt.")
|
||
|
||
# Antwort verarbeiten
|
||
if request.method == "POST":
|
||
gewaehlt = request.form.get("antwort", "").strip()
|
||
if idx < len(fragen) and gewaehlt.lower() == fragen[idx]["antwort"].strip().lower():
|
||
idx += 1
|
||
session[idx_key] = idx
|
||
session.modified = True
|
||
if idx >= gesamt:
|
||
_clear_challenge(rid)
|
||
if erfolg_raum and erfolg_raum > 0:
|
||
inhalt = ("""
|
||
<div class="adv-card">
|
||
<div class="adv-floor">✅ Abkürzung geschafft!</div>
|
||
<h1>Geschafft – in letzter Sekunde!</h1>
|
||
<p class="adv-desc">%s</p>
|
||
<a href="/app/raum/%d" class="exit-link">Weiter ▶</a>
|
||
</div>""" % (esc(erfolg_text), erfolg_raum))
|
||
return adventure_seite(inhalt)
|
||
return sieg_screen(erfolg_text)
|
||
return redirect("/app/raum/%d" % rid)
|
||
# falsche Antwort → sofortiges Game Over
|
||
_clear_challenge(rid)
|
||
return gameover_screen(
|
||
"❌ Falsch! Dein Gegenüber durchschaut dich sofort und schlägt Alarm. "
|
||
"So knapp – aber der riskante Weg verzeiht keinen einzigen Fehler.")
|
||
|
||
# GET → aktuelle Frage mit Countdown zeigen
|
||
if idx >= len(fragen):
|
||
_clear_challenge(rid)
|
||
return sieg_screen(erfolg_text)
|
||
aktuelle = fragen[idx]
|
||
remaining = deadline - now
|
||
|
||
buttons = ""
|
||
for opt in aktuelle["optionen"].split("|"):
|
||
buttons += ('<button class="opt-btn" name="antwort" value="%s">%s</button>'
|
||
% (esc(opt), esc(opt)))
|
||
|
||
tpl = """
|
||
<div class="adv-card">
|
||
<div class="adv-floor">⏱️ Risiko-Challenge · __NAME__</div>
|
||
<h1>__NAME__</h1>
|
||
<div class="timer-wrap">
|
||
<div class="timer"><span id="tval">__REMAIN__</span><small> s</small></div>
|
||
<div class="timer-bar"><div id="tbar"></div></div>
|
||
</div>
|
||
<p class="adv-progress">Frage __NR__ von __GES__ · schon richtig: __IDX__</p>
|
||
<p class="adv-frage">__FRAGE__</p>
|
||
<form method="post" class="opt-form">__BTN__</form>
|
||
</div>
|
||
<script>
|
||
(function(){
|
||
var end = Date.now() + __REMAINMS__;
|
||
var full = __LIMIT__;
|
||
var v = document.getElementById('tval');
|
||
var bar = document.getElementById('tbar');
|
||
function tick(){
|
||
var rem = (end - Date.now())/1000;
|
||
if(rem < 0){ rem = 0; }
|
||
v.textContent = rem.toFixed(1);
|
||
bar.style.width = Math.max(0, Math.min(100, (rem/full)*100)) + '%';
|
||
if(rem <= 0){ window.location = '/app/raum/__ID__?timeout=1'; return; }
|
||
requestAnimationFrame(tick);
|
||
}
|
||
tick();
|
||
})();
|
||
</script>"""
|
||
html = (tpl
|
||
.replace("__NAME__", esc(r["name"]))
|
||
.replace("__REMAINMS__", str(int(max(0.0, remaining) * 1000)))
|
||
.replace("__REMAIN__", "%.1f" % max(0.0, remaining))
|
||
.replace("__LIMIT__", str(limit))
|
||
.replace("__NR__", str(idx + 1))
|
||
.replace("__GES__", str(gesamt))
|
||
.replace("__IDX__", str(idx))
|
||
.replace("__FRAGE__", esc(aktuelle["frage"]))
|
||
.replace("__BTN__", buttons)
|
||
.replace("__ID__", str(rid)))
|
||
return adventure_seite(html, akzent="#f87171")
|
||
|
||
|
||
@app.route("/raum/<int:id>", methods=["GET", "POST"])
|
||
def raum(id):
|
||
db = get_db()
|
||
r = db.execute("SELECT * FROM raeume WHERE id=?", (id,)).fetchone()
|
||
if r is None:
|
||
db.close()
|
||
return adventure_seite(
|
||
'<div class="adv-card"><div class="adv-floor">Fehler</div>'
|
||
'<h1>Diese Etage existiert nicht 🤖</h1>'
|
||
'<p class="adv-desc">Da hat sich wohl ein Bauplan verheddert.</p>'
|
||
'<a href="/app/" class="exit-link">Zurück zum Start</a></div>')
|
||
|
||
typ = r["typ"]
|
||
|
||
# ═══ Risk/Reward-Abkürzung mit Timer (Biologe / Elektriker / Cyborgs) ═══
|
||
if typ == "challenge":
|
||
return challenge_raum(db, r)
|
||
|
||
# ═══ Räume mit Fragen: thema (Prüf-Weg) · ziel (Finale) ═══
|
||
if typ in ("thema", "ziel"):
|
||
fragen = db.execute(
|
||
"SELECT * FROM fragen WHERE raum_id=? ORDER BY id", (id,)
|
||
).fetchall()
|
||
prog_key = "raum_%d_idx" % id
|
||
idx = session.get(prog_key, 0)
|
||
|
||
# ── Noch offene Fragen → nächste Frage zeigen ──
|
||
if fragen and idx < len(fragen):
|
||
aktuelle = fragen[idx]
|
||
feedback = ""
|
||
if request.method == "POST":
|
||
gewaehlt = request.form.get("antwort", "").strip()
|
||
if gewaehlt.lower() == aktuelle["antwort"].strip().lower():
|
||
session[prog_key] = idx + 1
|
||
session.modified = True
|
||
db.close()
|
||
return redirect("/app/raum/%d" % id)
|
||
feedback = ('<div class="feedback-bad">🚨 Alarm! Falsche Antwort – '
|
||
'die Wächter werden fast auf dich aufmerksam. Nochmal!</div>')
|
||
optionen = aktuelle["optionen"].split("|")
|
||
db.close()
|
||
|
||
buttons = ""
|
||
for opt in optionen:
|
||
buttons += ('<button class="opt-btn" name="antwort" value="%s">%s</button>'
|
||
% (esc(opt), esc(opt)))
|
||
|
||
if typ == "ziel":
|
||
label = "🧱 FINALE · %s" % esc(r["name"])
|
||
else:
|
||
label = "🔐 Sicherheitsprüfung · %s" % esc(r["name"])
|
||
|
||
inhalt = ("""
|
||
<div class="adv-card">
|
||
<div class="adv-floor">%s</div>
|
||
<h1>%s</h1>
|
||
<p class="adv-desc">%s</p>
|
||
<p class="adv-progress">Frage %d von %d</p>
|
||
%s
|
||
<p class="adv-frage">%s</p>
|
||
<form method="post" class="opt-form">%s</form>
|
||
</div>""" % (label, esc(r["name"]), esc(r["beschreibung"]),
|
||
idx + 1, len(fragen), feedback,
|
||
esc(aktuelle["frage"]), buttons))
|
||
return adventure_seite(inhalt)
|
||
|
||
# ── Alle Fragen dieses Raums beantwortet ──
|
||
ausgaenge = db.execute(
|
||
"SELECT richtung, nach_raum, hinweis FROM ausgaenge "
|
||
"WHERE von_raum=? ORDER BY rowid", (id,)
|
||
).fetchall()
|
||
db.close()
|
||
|
||
# ZIEL erreicht → Sieg
|
||
if typ == "ziel":
|
||
inhalt = ("""
|
||
<div class="adv-card" style="text-align:center">
|
||
<div class="win-emoji">🎉🧱🎉</div>
|
||
<div class="adv-floor">Mission erfüllt</div>
|
||
<h1>Befreit!</h1>
|
||
<p class="adv-desc">%s</p>
|
||
<p class="adv-frage" style="color:#f59e0b">„Everything is awesome!“ 🎵</p>
|
||
<a href="/app/" class="exit-link">Nochmal spielen 🔁</a>
|
||
<a href="/app/pinnwand" class="ghost-link">Sieg in den Kommentaren feiern 💬</a>
|
||
</div>""" % esc(r["beschreibung"]))
|
||
return adventure_seite(inhalt)
|
||
|
||
# THEMA gelöst → Erfolg + Ausgang zur nächsten Etage
|
||
weiter = ausgaenge[0] if ausgaenge else None
|
||
weiter_btn = (
|
||
'<a class="exit-link" href="/app/raum/%d">%s</a>'
|
||
% (weiter["nach_raum"], esc(weiter["richtung"]))
|
||
if weiter else
|
||
'<a class="exit-link" href="/app/">Zurück zum Start</a>')
|
||
inhalt = ("""
|
||
<div class="adv-card">
|
||
<div class="adv-floor">✅ Richtiger Weg</div>
|
||
<h1>%s</h1>
|
||
<p class="adv-desc">%s</p>
|
||
<p class="adv-progress">✅ Alle Fragen geknackt – der Weg nach oben ist frei!</p>
|
||
%s
|
||
</div>""" % (esc(r["name"]), esc(r["beschreibung"]), weiter_btn))
|
||
return adventure_seite(inhalt)
|
||
|
||
# ═══ Gang / Start: Beschreibung + Wege (Navigations-Entscheidung) ═══
|
||
ausgaenge = db.execute(
|
||
"SELECT richtung, nach_raum, hinweis FROM ausgaenge "
|
||
"WHERE von_raum=? ORDER BY rowid", (id,)
|
||
).fetchall()
|
||
db.close()
|
||
|
||
wege_html = ""
|
||
for a in ausgaenge:
|
||
wege_html += ("""
|
||
<div class="pfad">
|
||
<a class="exit-link" href="/app/raum/%d">%s</a>
|
||
<span class="pfad-hinweis">%s</span>
|
||
</div>""" % (a["nach_raum"], esc(a["richtung"]), esc(a["hinweis"] or "")))
|
||
if not ausgaenge:
|
||
wege_html = '<a class="exit-link" href="/app/">Zurück zum Start</a>'
|
||
|
||
if r["etage"] and r["etage"] > 0:
|
||
etage_label = "🏢 Etage %d" % r["etage"]
|
||
else:
|
||
etage_label = "🚪 Eingang"
|
||
inhalt = ("""
|
||
<div class="adv-card">
|
||
<div class="adv-floor">%s</div>
|
||
<h1>%s</h1>
|
||
<p class="adv-desc">%s</p>
|
||
<div class="pfade">%s</div>
|
||
</div>""" % (etage_label, esc(r["name"]), esc(r["beschreibung"]), wege_html))
|
||
return adventure_seite(inhalt)
|
||
|
||
|
||
# ─────────────────────────────────────────────────────────────────────────────
|
||
# Route 3: Pinnwand – YouTube-Kommentar-Style mit Antwort-Funktion
|
||
# ─────────────────────────────────────────────────────────────────────────────
|
||
|
||
PINNWAND_CSS = """
|
||
<style>
|
||
.pw-header { font-size:14px; color:#333; margin-bottom:18px;
|
||
border-bottom:1px solid #e0e0e0; padding-bottom:10px; }
|
||
.pw-header strong { font-size:16px; }
|
||
|
||
/* ── Eingabe-Bereich ── */
|
||
.pw-input-row { display:flex; gap:12px; align-items:flex-start; margin-bottom:22px; }
|
||
.pw-avatar { width:40px; height:40px; border-radius:50%; color:#fff;
|
||
display:flex; align-items:center; justify-content:center;
|
||
font-size:18px; font-weight:bold; flex-shrink:0; }
|
||
.pw-input-wrap { flex:1; }
|
||
.pw-input-wrap input[type=text] {
|
||
width:100%; border:none; border-bottom:1px solid #bbb;
|
||
background:transparent; padding:6px 2px; font-size:14px; color:#333;
|
||
outline:none; transition:border-color .2s; margin-bottom:8px; }
|
||
.pw-input-wrap input[type=text]:focus { border-bottom-color:#1155cc; }
|
||
.pw-input-wrap input[type=text]::placeholder { color:#aaa; }
|
||
.pw-btn-row { display:flex; justify-content:flex-end; }
|
||
.pw-btn { padding:6px 14px; border:none; border-radius:2px; font-size:13px;
|
||
cursor:pointer; font-weight:bold; background:#167ac6; color:#fff; }
|
||
.pw-btn:hover { background:#1266a8; }
|
||
|
||
/* ── Kommentar-Liste ── */
|
||
.pw-count { font-size:14px; color:#555; margin-bottom:12px; }
|
||
.pw-comment { display:flex; gap:12px; padding:12px 0; border-bottom:1px solid #f0f0f0; }
|
||
.pw-comment:last-child { border-bottom:none; }
|
||
.pw-comment-body { flex:1; min-width:0; }
|
||
.pw-meta { display:flex; align-items:baseline; gap:8px; margin-bottom:4px; flex-wrap:wrap; }
|
||
.pw-username { font-size:13px; font-weight:bold; color:#167ac6; }
|
||
.pw-time { font-size:12px; color:#999; }
|
||
.pw-text { font-size:14px; color:#333; line-height:1.5; word-break:break-word; }
|
||
.pw-actions { display:flex; gap:10px; margin-top:6px; align-items:center; }
|
||
.pw-action-btn { font-size:12px; color:#888; background:none; border:none;
|
||
cursor:pointer; padding:0; }
|
||
.pw-action-btn:hover { color:#333; }
|
||
.pw-thumb { font-size:13px; }
|
||
|
||
/* ── Antwort-Formular (toggle per JS) ── */
|
||
.pw-reply-form { display:none; margin-top:10px; padding:10px 0 4px 0;
|
||
border-top:1px solid #f0f0f0; }
|
||
.pw-reply-form input[type=text] {
|
||
width:100%; border:none; border-bottom:1px solid #ccc; background:transparent;
|
||
padding:5px 2px; font-size:13px; color:#333; outline:none; margin-bottom:6px;
|
||
transition:border-color .2s; }
|
||
.pw-reply-form input[type=text]:focus { border-bottom-color:#1155cc; }
|
||
.pw-reply-form input[type=text]::placeholder { color:#bbb; }
|
||
.pw-reply-btn-row { display:flex; justify-content:flex-end; gap:8px; }
|
||
.pw-reply-cancel { font-size:12px; color:#888; background:none; border:none;
|
||
cursor:pointer; padding:4px 10px; font-weight:bold; }
|
||
.pw-reply-cancel:hover { color:#333; }
|
||
.pw-reply-submit { padding:5px 12px; border:none; border-radius:2px; font-size:12px;
|
||
cursor:pointer; font-weight:bold; background:#167ac6; color:#fff; }
|
||
.pw-reply-submit:hover { background:#1266a8; }
|
||
|
||
/* ── Antworten unter Kommentar ── */
|
||
.pw-replies { margin-left:52px; margin-top:6px; }
|
||
.pw-reply-item { display:flex; gap:10px; padding:8px 0; border-top:1px solid #f5f5f5; }
|
||
.pw-reply-avatar { width:28px; height:28px; border-radius:50%; color:#fff;
|
||
display:flex; align-items:center; justify-content:center;
|
||
font-size:12px; font-weight:bold; flex-shrink:0; }
|
||
.pw-reply-body { flex:1; min-width:0; }
|
||
.pw-show-replies-btn { font-size:12px; color:#167ac6; background:none; border:none;
|
||
cursor:pointer; padding:4px 0; margin-top:4px; font-weight:bold; }
|
||
.pw-show-replies-btn:hover { text-decoration:underline; }
|
||
|
||
.pw-leer { color:#aaa; font-size:14px; text-align:center; padding:30px 0; }
|
||
</style>
|
||
|
||
<script>
|
||
function toggleReplyForm(idx) {
|
||
var f = document.getElementById('rf-' + idx);
|
||
if (!f) return;
|
||
if (f.style.display === 'none' || f.style.display === '') {
|
||
f.style.display = 'block';
|
||
f.querySelector('input[name="nachricht"]').focus();
|
||
} else {
|
||
f.style.display = 'none';
|
||
}
|
||
}
|
||
function toggleReplies(idx) {
|
||
var box = document.getElementById('replies-' + idx);
|
||
var btn = document.getElementById('sb-' + idx);
|
||
if (!box || !btn) return;
|
||
if (box.style.display === 'none' || box.style.display === '') {
|
||
box.style.display = 'block';
|
||
btn.textContent = btn.textContent.replace('▶','▼').replace('anzeigen','ausblenden');
|
||
} else {
|
||
box.style.display = 'none';
|
||
btn.textContent = btn.textContent.replace('▼','▶').replace('ausblenden','anzeigen');
|
||
}
|
||
}
|
||
</script>
|
||
"""
|
||
|
||
|
||
def esc(s):
|
||
return (s.replace("&", "&")
|
||
.replace("<", "<")
|
||
.replace(">", ">")
|
||
.replace('"', """))
|
||
|
||
|
||
def avatar_farbe(name):
|
||
farben = ["#e53935", "#8e24aa", "#1e88e5", "#00897b",
|
||
"#43a047", "#fb8c00", "#6d4c41", "#546e7a"]
|
||
idx = sum(ord(c) for c in name) % len(farben)
|
||
return farben[idx]
|
||
|
||
|
||
def render_antworten(antworten):
|
||
html = ""
|
||
for a in antworten:
|
||
farbe = avatar_farbe(a["name"])
|
||
initial = a["name"][0].upper()
|
||
html += f"""
|
||
<div class="pw-reply-item">
|
||
<div class="pw-reply-avatar" style="background:{farbe}">{initial}</div>
|
||
<div class="pw-reply-body">
|
||
<div class="pw-meta">
|
||
<span class="pw-username">{esc(a['name'])}</span>
|
||
<span class="pw-time">{esc(a['zeit'])}</span>
|
||
</div>
|
||
<div class="pw-text">{esc(a['text'])}</div>
|
||
</div>
|
||
</div>"""
|
||
return html
|
||
|
||
|
||
@app.route("/pinnwand", methods=["GET", "POST"])
|
||
def pinnwand():
|
||
if request.method == "POST":
|
||
name = request.form.get("name", "").strip() or "Anonym"
|
||
text = request.form.get("nachricht", "").strip()
|
||
parent_raw = request.form.get("parent_id", "").strip()
|
||
if text:
|
||
if parent_raw.isdigit():
|
||
idx = int(parent_raw)
|
||
if 0 <= idx < len(eintraege):
|
||
eintraege[idx]["antworten"].append(
|
||
{"name": name, "text": text, "zeit": jetzt()}
|
||
)
|
||
else:
|
||
eintraege.append(
|
||
{"name": name, "text": text, "zeit": jetzt(), "antworten": []}
|
||
)
|
||
return redirect("/app/pinnwand")
|
||
|
||
# ── Kommentare rendern (neueste zuerst, echter Index für parent_id) ──
|
||
komm_html = ""
|
||
for real_idx, e in reversed(list(enumerate(eintraege))):
|
||
farbe = avatar_farbe(e["name"])
|
||
initial = e["name"][0].upper()
|
||
n_ant = len(e["antworten"])
|
||
|
||
# Block: Antworten anzeigen/verbergen
|
||
antworten_block = ""
|
||
if n_ant > 0:
|
||
label = f"{n_ant} Antwort{'en' if n_ant != 1 else ''}"
|
||
antworten_block = f"""
|
||
<button class="pw-show-replies-btn" id="sb-{real_idx}"
|
||
onclick="toggleReplies({real_idx})">
|
||
▶ {label} anzeigen
|
||
</button>
|
||
<div class="pw-replies" id="replies-{real_idx}" style="display:none">
|
||
{render_antworten(e['antworten'])}
|
||
</div>"""
|
||
|
||
komm_html += f"""
|
||
<div class="pw-comment" id="c-{real_idx}">
|
||
<div class="pw-avatar" style="background:{farbe}">{initial}</div>
|
||
<div class="pw-comment-body">
|
||
<div class="pw-meta">
|
||
<span class="pw-username">{esc(e['name'])}</span>
|
||
<span class="pw-time">{esc(e['zeit'])}</span>
|
||
</div>
|
||
<div class="pw-text">{esc(e['text'])}</div>
|
||
<div class="pw-actions">
|
||
<button class="pw-action-btn pw-thumb">👍</button>
|
||
<button class="pw-action-btn pw-thumb">👎</button>
|
||
<button class="pw-action-btn"
|
||
onclick="toggleReplyForm({real_idx})">Antworten</button>
|
||
</div>
|
||
|
||
<!-- Antwort-Formular (initial versteckt) -->
|
||
<div class="pw-reply-form" id="rf-{real_idx}">
|
||
<form method="post">
|
||
<input type="hidden" name="parent_id" value="{real_idx}">
|
||
<input type="text" name="name"
|
||
placeholder="Dein Name (optional)">
|
||
<input type="text" name="nachricht"
|
||
placeholder="Antwort hinzufügen ..." required>
|
||
<div class="pw-reply-btn-row">
|
||
<button type="button" class="pw-reply-cancel"
|
||
onclick="toggleReplyForm({real_idx})">Abbrechen</button>
|
||
<button type="submit" class="pw-reply-submit">Antworten</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
{antworten_block}
|
||
</div>
|
||
</div>"""
|
||
|
||
if not eintraege:
|
||
komm_html = '<p class="pw-leer">Noch keine Kommentare. Sei der Erste! 💬</p>'
|
||
|
||
n = len(eintraege)
|
||
anzahl_text = f"{n} Kommentar{'e' if n != 1 else ''}"
|
||
|
||
return seite(PINNWAND_CSS + f"""
|
||
<div class="pw-header"><strong>Kommentare</strong></div>
|
||
|
||
<form method="post">
|
||
<div class="pw-input-row">
|
||
<div class="pw-avatar" style="background:#888; font-size:22px">👤</div>
|
||
<div class="pw-input-wrap">
|
||
<input type="text" name="name"
|
||
placeholder="Dein Name (optional)">
|
||
<input type="text" name="nachricht"
|
||
placeholder="Öffentlichen Kommentar hinzufügen ..." autofocus required>
|
||
<div class="pw-btn-row">
|
||
<button type="submit" class="pw-btn">Kommentieren</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<p class="pw-count">{anzahl_text}</p>
|
||
<div id="kommentare">{komm_html}</div>
|
||
""")
|
||
|
||
|
||
# ─────────────────────────────────────────────────────────────────────────────
|
||
if __name__ == "__main__":
|
||
app.run(host="0.0.0.0", port=9002) # isa2 → Port 9002
|
||
|