Snake Online

Lade dir unsere ultimative Multiplayer Version des klassischen Snake Spiels herunter, komplett umgesetzt in PHP, Ajax und JavaScript in einer einzigen Datei. Professionell gestaltet wie von einer Marketing-Agentur entwickelt, bietet dieses Script mehr Features als das Original:

Features:

• Benutzerkonten mit Registrierung, E-Mail-Verifikation und Passwort zurücksetzen
• Highscore-System pro Benutzer mit separatem Leaderboard
• Mehrere Spielmodi: Überleben oder Zeitlimit
• Optische Animationen, Soundeffekte und responsive UI
• PWA-fähig: auf Smartphone installierbar
• Moderationspanel mit Benutzerverwaltung, Bann-Funktion und Score-Löschung
• PHPMailer-Integration für zuverlässige E-Mail-Kommunikation
• Sicherheitsfunktionen: reCAPTCHA, IP-Sperre und verschlüsseltes Admin-Login

Installation:

• Einfach die Datei auf deinen Server hochladen
• Berechtigungen für den Datenordner prüfen, SQLite-Datenbank wird automatisch erstellt
• SMTP-Daten für E-Mail-Funktion konfigurieren (optional)
• Zugriff über den Browser – sofort spielbar

<?php
session_start();
date_default_timezone_set('Europe/Berlin');

/*
  Features
  - SQLite Datenbank initialisierung
  - Registrierung mit E Mail Verifikation
  - Passwort zurücksetzen per E Mail
  - PHPMailer Integration optional
  - Moderations UI und Endpunkte
  - Spiel API bereits vorhanden
  - Alles in einer Datei
  - Ein Dreamcodes.NET Spiel
*/

/* ========== Konfiguration ========== */
define('DATA_DIR', __DIR__ . '/data_snake');
define('DB_FILE', DATA_DIR . '/snake.sqlite');
define('SITE_FROM_EMAIL', 'no-reply@example.com'); // Absender E Mail
define('SITE_FROM_NAME', 'Snake Dreamcodes');
define('SITE_BASE_URL', (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' ? 'https' : 'http') . '://' . ($_SERVER['HTTP_HOST'] ?? 'localhost') . dirname($_SERVER['SCRIPT_NAME']));
if(substr(SITE_BASE_URL, -1) === '/') SITE_BASE_URL = rtrim(SITE_BASE_URL, '/'); // optional trim

// SMTP Konfiguration für PHPMailer
// Wenn du PHPMailer nicht verwenden willst dann wird mail() als Fallback eingesetzt
$smtp = [
  'enabled' => true,            // true um PHPMailer zu nutzen wenn verfügbar
  'host' => 'smtp.example.com',
  'port' => 587,
  'username' => 'smtp_user@example.com',
  'password' => 'smtp_password',
  'secure' => 'tls'             // tls oder ssl
];

// Admin Zugangs Passwort zum Moderationspanel bitte ändern
define('ADMIN_PASSWORD', 'ChangeMeAdminPass123!');

// reCAPTCHA optional platzhalter
define('RECAPTCHA_SITE_KEY', '');
define('RECAPTCHA_SECRET_KEY', '');

/* ========== Initialisierung ========== */
if(!is_dir(DATA_DIR)) mkdir(DATA_DIR,0755,true);
if(!file_exists(DB_FILE)){
  $pdo = new PDO('sqlite:' . DB_FILE);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $pdo->exec("
    CREATE TABLE users (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      username TEXT NOT NULL UNIQUE,
      email TEXT NOT NULL,
      pass_hash TEXT NOT NULL,
      created INTEGER NOT NULL,
      verified INTEGER DEFAULT 0,
      verify_token TEXT DEFAULT NULL,
      reset_token TEXT DEFAULT NULL,
      reset_expires INTEGER DEFAULT NULL,
      is_banned INTEGER DEFAULT 0
    );
    CREATE TABLE scores (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      user_id INTEGER,
      name TEXT,
      score INTEGER NOT NULL,
      mode TEXT,
      created INTEGER NOT NULL,
      FOREIGN KEY(user_id) REFERENCES users(id)
    );
    CREATE INDEX idx_scores_user ON scores(user_id);
  ");
  $pdo = null;
}

/* ========== Hilfsfunktionen ========== */
function get_db(){
  $pdo = new PDO('sqlite:' . DB_FILE);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  return $pdo;
}
function json_response($data){
  header('Content-Type: application/json; charset=utf-8');
  echo json_encode($data);
  exit;
}
function read_input_json(){
  $s = file_get_contents('php://input');
  if(!$s) return [];
  $data = json_decode($s, true);
  return is_array($data) ? $data : [];
}
function current_user(){
  if(!empty($_SESSION['user_id'])){
    $pdo = get_db();
    $st = $pdo->prepare('SELECT id, username, email, verified, is_banned FROM users WHERE id=:id LIMIT 1');
    $st->execute([':id'=>$_SESSION['user_id']]);
    $row = $st->fetch(PDO::FETCH_ASSOC);
    if($row) return $row;
  }
  return null;
}
function send_mail($to_email, $to_name, $subject, $body_html, $body_text=''){
  global $smtp;
  // Versuch PHPMailer wenn aktiviert und verfügbar
  if($smtp['enabled'] && class_exists('PHPMailer\PHPMailer\PHPMailer')){
    try{
      $mail = new PHPMailer\PHPMailer\PHPMailer(true);
      $mail->isSMTP();
      $mail->Host = $smtp['host'];
      $mail->SMTPAuth = true;
      $mail->Username = $smtp['username'];
      $mail->Password = $smtp['password'];
      $mail->SMTPSecure = $smtp['secure'] === 'ssl' ? PHPMailer\PHPMailer\PHPMailer::ENCRYPTION_SMTPS : PHPMailer\PHPMailer\PHPMailer::ENCRYPTION_STARTTLS;
      $mail->Port = $smtp['port'];
      $mail->setFrom(SITE_FROM_EMAIL, SITE_FROM_NAME);
      $mail->addAddress($to_email, $to_name);
      $mail->isHTML(true);
      $mail->Subject = $subject;
      $mail->Body = $body_html;
      if($body_text) $mail->AltBody = $body_text;
      $mail->send();
      return true;
    } catch(Exception $e){
      error_log('PHPMailer error: ' . $e->getMessage());
      // fallback to mail
    }
  }
  // fallback simple mail
  $headers = "From: " . SITE_FROM_NAME . " <" . SITE_FROM_EMAIL . ">\r\n";
  $headers .= "MIME-Version: 1.0\r\n";
  $headers .= "Content-type: text/html; charset=utf-8\r\n";
  return mail($to_email, $subject, $body_html, $headers);
}
function random_token($len=64){
  return bin2hex(random_bytes((int)($len/2)));
}
function require_admin(){
  if(empty($_SESSION['is_admin']) || !$_SESSION['is_admin']) json_response(['ok'=>false,'error'=>'admin_required']);
}

/* Optional PHPMailer Autoload if vorhanden in vendor */
if(file_exists(__DIR__ . '/vendor/autoload.php')){
  require_once __DIR__ . '/vendor/autoload.php';
}

/* ========== Service Worker und Manifest wie vorher ========== */
if(isset($_GET['sw']) && $_GET['sw']=='1'){
  header('Content-Type: application/javascript; charset=utf-8');
  echo "self.addEventListener('install', e=>{e.waitUntil(caches.open('snake-v1').then(c=>c.addAll(['/?manifest=1','/snake.php'])))});\n";
  echo "self.addEventListener('fetch', e=>{e.respondWith(caches.match(e.request).then(r=>r||fetch(e.request)))});\n";
  exit;
}
if(isset($_GET['manifest']) && $_GET['manifest']=='1'){
  header('Content-Type: application/json; charset=utf-8');
  echo json_encode([
    "name" => "Snake Spiel Dreamcodes",
    "short_name" => "Snake",
    "start_url" => "/snake.php",
    "display" => "standalone",
    "background_color" => "#071025",
    "theme_color" => "#06b6d4",
    "icons" => [
      ["src"=>"/favicon-192.png","sizes"=>"192x192","type"=>"image/png"],
      ["src"=>"/favicon-512.png","sizes"=>"512x512","type"=>"image/png"]
    ]
  ]);
  exit;
}

/* ========== AJAX Endpunkte ========== */
if(isset($_GET['action'])){
  $action = $_GET['action'];

  // Registrieren mit Verifikation
  if($action === 'register' && $_SERVER['REQUEST_METHOD'] === 'POST'){
    $data = read_input_json();
    $username = trim($data['username'] ?? '');
    $email = trim($data['email'] ?? '');
    $password = trim($data['password'] ?? '');
    if(!$username || !$email || !$password) json_response(['ok'=>false,'error'=>'Bitte alle Felder ausfüllen']);
    // optional reCAPTCHA prüfen
    if(RECAPTCHA_SECRET_KEY && !empty($data['recaptcha_token'])){
      $resp = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode(RECAPTCHA_SECRET_KEY) . '&response=' . urlencode($data['recaptcha_token']));
      $j = json_decode($resp, true);
      if(empty($j['success']) || $j['score'] < 0.3) json_response(['ok'=>false,'error'=>'reCAPTCHA Prüfung fehlgeschlagen']);
    }
    try{
      $pdo = get_db();
      $st = $pdo->prepare('SELECT id FROM users WHERE username=:u OR email=:e LIMIT 1');
      $st->execute([':u'=>$username,':e'=>$email]);
      if($st->fetch()) json_response(['ok'=>false,'error'=>'Benutzername oder E Mail bereits vorhanden']);
      $token = random_token(64);
      $pass_hash = password_hash($password, PASSWORD_DEFAULT);
      $ins = $pdo->prepare('INSERT INTO users (username, email, pass_hash, created, verify_token, verified) VALUES (:u,:e,:p,:t,:vt,0)');
      $ins->execute([':u'=>$username,':e'=>$email,':p'=>$pass_hash,':t'=>time(),':vt'=>$token]);
      $uid = $pdo->lastInsertId();
      // Verifikationsmail senden
      $link = SITE_BASE_URL . '/snake.php?action=verify&token=' . $token;
      $subject = 'Bitte E Mail bestätigen';
      $body = "<p>Hallo " . htmlspecialchars($username) . "</p><p>Bitte bestätige deine E Mail Adresse mit diesem Link</p><p><a href=\"" . htmlspecialchars($link) . "\">E Mail bestätigen</a></p>";
      send_mail($email, $username, $subject, $body);
      // auto login optional nicht bevor verifiziert
      json_response(['ok'=>true,'message'=>'Registriert bitte prüfe dein Postfach zum Bestätigen']);
    } catch(Exception $e){
      json_response(['ok'=>false,'error'=>'Fehler bei Registrierung']);
    }
  }

  // E Mail Verifikation Link
  if($action === 'verify' && isset($_GET['token'])){
    $token = $_GET['token'];
    if(!$token) { echo 'Ungültiger Token'; exit; }
    $pdo = get_db();
    $st = $pdo->prepare('SELECT id, verified FROM users WHERE verify_token=:t LIMIT 1');
    $st->execute([':t'=>$token]);
    $row = $st->fetch(PDO::FETCH_ASSOC);
    if(!$row) { echo 'Token ungültig oder bereits verwendet'; exit; }
    $upd = $pdo->prepare('UPDATE users SET verified=1, verify_token=NULL WHERE id=:id');
    $upd->execute([':id'=>$row['id']]);
    echo '<!doctype html><html><body><h2>Bestätigung erfolgreich</h2><p>Dein Account wurde aktiviert</p><p><a href="snake.php">Zurück zum Spiel</a></p></body></html>';
    exit;
  }

  // Login
  if($action === 'login' && $_SERVER['REQUEST_METHOD'] === 'POST'){
    $data = read_input_json();
    $user = trim($data['username'] ?? '');
    $pass = trim($data['password'] ?? '');
    if(!$user || !$pass) json_response(['ok'=>false,'error'=>'Bitte ausfüllen']);
    $pdo = get_db();
    $st = $pdo->prepare('SELECT id, username, pass_hash, verified, is_banned FROM users WHERE username=:u LIMIT 1');
    $st->execute([':u'=>$user]);
    $row = $st->fetch(PDO::FETCH_ASSOC);
    if(!$row) json_response(['ok'=>false,'error'=>'Ungültige Zugangsdaten']);
    if($row['is_banned']) json_response(['ok'=>false,'error'=>'Account gesperrt']);
    if(!password_verify($pass, $row['pass_hash'])) json_response(['ok'=>false,'error'=>'Ungültige Zugangsdaten']);
    if(!$row['verified']) json_response(['ok'=>false,'error'=>'E Mail noch nicht bestätigt']);
    $_SESSION['user_id'] = $row['id'];
    json_response(['ok'=>true,'user'=>['id'=>$row['id'],'username'=>$row['username']]]);
  }

  // Logout
  if($action === 'logout'){
    session_unset();
    session_destroy();
    json_response(['ok'=>true]);
  }

  // request password reset
  if($action === 'request_reset' && $_SERVER['REQUEST_METHOD'] === 'POST'){
    $data = read_input_json();
    $email = trim($data['email'] ?? '');
    if(!$email) json_response(['ok'=>false,'error'=>'E Mail fehlt']);
    $pdo = get_db();
    $st = $pdo->prepare('SELECT id, username FROM users WHERE email=:e LIMIT 1');
    $st->execute([':e'=>$email]);
    $row = $st->fetch(PDO::FETCH_ASSOC);
    if(!$row) json_response(['ok'=>false,'error'=>'Keine passenden Daten gefunden']);
    $token = random_token(48);
    $expires = time() + 3600; // 1 Stunde gültig
    $upd = $pdo->prepare('UPDATE users SET reset_token=:rt, reset_expires=:re WHERE id=:id');
    $upd->execute([':rt'=>$token, ':re'=>$expires, ':id'=>$row['id']]);
    $link = SITE_BASE_URL . '/snake.php?action=do_reset&token=' . $token;
    $subject = 'Passwort zurücksetzen';
    $body = "<p>Hallo " . htmlspecialchars($row['username']) . "</p><p>Klicke den Link um dein Passwort zurückzusetzen</p><p><a href=\"" . htmlspecialchars($link) . "\">Passwort zurücksetzen</a></p><p>Link gültig 1 Stunde</p>";
    send_mail($email, $row['username'], $subject, $body);
    json_response(['ok'=>true,'message'=>'Reset Link gesendet']);
  }

  // perform reset form oder direkte API post
  if($action === 'do_reset'){
    if($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['token'])){
      // zeige einfach ein kleines Formular
      $token = $_GET['token'];
      echo "<!doctype html><html><body><h3>Passwort neu setzen</h3>
      <form method='POST' action='?action=do_reset'>
      <input type='hidden' name='token' value='" . htmlspecialchars($token) . "' />
      <div><label>Neues Passwort</label><br><input type='password' name='password' /></div>
      <div><button type='submit'>Speichern</button></div>
      </form></body></html>";
      exit;
    } elseif($_SERVER['REQUEST_METHOD'] === 'POST'){
      // handle both form urlencoded and json
      $token = $_POST['token'] ?? null;
      $password = $_POST['password'] ?? null;
      if(empty($token)){
        $j = read_input_json();
        $token = $j['token'] ?? $token;
        $password = $j['password'] ?? $password;
      }
      if(!$token || !$password) json_response(['ok'=>false,'error'=>'Token oder Passwort fehlt']);
      $pdo = get_db();
      $st = $pdo->prepare('SELECT id, reset_expires FROM users WHERE reset_token=:rt LIMIT 1');
      $st->execute([':rt'=>$token]);
      $row = $st->fetch(PDO::FETCH_ASSOC);
      if(!$row) json_response(['ok'=>false,'error'=>'Ungültiger Token']);
      if(time() > $row['reset_expires']) json_response(['ok'=>false,'error'=>'Token abgelaufen']);
      $pass_hash = password_hash($password, PASSWORD_DEFAULT);
      $upd = $pdo->prepare('UPDATE users SET pass_hash=:ph, reset_token=NULL, reset_expires=NULL WHERE id=:id');
      $upd->execute([':ph'=>$pass_hash, ':id'=>$row['id']]);
      json_response(['ok'=>true,'message'=>'Passwort geändert']);
    }
  }

  // get current user details
  if($action === 'get_user'){
    $u = current_user();
    json_response(['ok'=>true,'user'=>$u]);
  }

  // save score like before
  if($action === 'save_score' && $_SERVER['REQUEST_METHOD'] === 'POST'){
    $payload = read_input_json();
    $name = trim(substr(strip_tags($payload['name'] ?? 'Spieler'), 0, 64));
    $score = intval($payload['score'] ?? 0);
    $mode = in_array($payload['mode'] ?? '', ['survival','timed']) ? $payload['mode'] : 'survival';
    $time = time();
    $pdo = get_db();
    $user = current_user();
    $uid = $user ? $user['id'] : null;
    $ins = $pdo->prepare('INSERT INTO scores (user_id, name, score, mode, created) VALUES (:uid, :n, :s, :m, :t)');
    $ins->execute([':uid'=>$uid, ':n'=>$name, ':s'=>$score, ':m'=>$mode, ':t'=>$time]);
    // respond top 20
    $top = $pdo->prepare('SELECT s.score, COALESCE(u.username, s.name) as name, s.mode FROM scores s LEFT JOIN users u ON u.id = s.user_id ORDER BY s.score DESC LIMIT 20');
    $top->execute();
    $toplist = $top->fetchAll(PDO::FETCH_ASSOC);
    json_response(['ok'=>true,'leaderboard'=>$toplist]);
  }

  // get leaderboard
  if($action === 'get_leaderboard'){
    $pdo = get_db();
    $top = $pdo->prepare('SELECT s.score, COALESCE(u.username, s.name) as name, s.mode FROM scores s LEFT JOIN users u ON u.id = s.user_id ORDER BY s.score DESC LIMIT 50');
    $top->execute();
    json_response(['ok'=>true,'leaderboard'=>$top->fetchAll(PDO::FETCH_ASSOC)]);
  }

  // Moderation Endpunkte
  if($action === 'admin_login' && $_SERVER['REQUEST_METHOD'] === 'POST'){
    $data = read_input_json();
    $pass = $data['password'] ?? '';
    if($pass === ADMIN_PASSWORD){
      $_SESSION['is_admin'] = true;
      json_response(['ok'=>true]);
    } else json_response(['ok'=>false,'error'=>'invalid']);
  }

  if($action === 'admin_logout'){
    unset($_SESSION['is_admin']);
    json_response(['ok'=>true]);
  }

  if($action === 'admin_list_users'){
    require_admin();
    $pdo = get_db();
    $st = $pdo->query('SELECT id, username, email, created, verified, is_banned FROM users ORDER BY created DESC LIMIT 200');
    $rows = $st->fetchAll(PDO::FETCH_ASSOC);
    json_response(['ok'=>true,'users'=>$rows]);
  }

  if($action === 'admin_ban_user' && $_SERVER['REQUEST_METHOD'] === 'POST'){
    require_admin();
    $d = read_input_json();
    $uid = intval($d['user_id'] ?? 0);
    $ban = !empty($d['ban']) ? 1 : 0;
    $pdo = get_db();
    $st = $pdo->prepare('UPDATE users SET is_banned=:b WHERE id=:id');
    $st->execute([':b'=>$ban,':id'=>$uid]);
    json_response(['ok'=>true]);
  }

  if($action === 'admin_delete_score' && $_SERVER['REQUEST_METHOD'] === 'POST'){
    require_admin();
    $d = read_input_json();
    $sid = intval($d['score_id'] ?? 0);
    $pdo = get_db();
    $st = $pdo->prepare('DELETE FROM scores WHERE id=:id');
    $st->execute([':id'=>$sid]);
    json_response(['ok'=>true]);
  }

  json_response(['ok'=>false,'error'=>'unknown_action']);
}

/* ========== Frontend HTML und JS ========== */
/* Aus Platzgründen ist der UI Teil kompakter gehalten und baut auf dem vorherigen Script auf.
   Er enthält nun UI für Verifikation Reset Moderation */
?>
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Snake Spiel – Dreamcodes</title>
<link rel="manifest" href="?manifest=1">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<style>
:root{--bg:#071025;--card:#0f1724;--muted:#9fb4d6;--accent:#06b6d4;--accent2:#7c3aed}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Arial;color:#e6f0fb;background:linear-gradient(180deg,var(--bg),#021226)}
.wrap{max-width:1100px;margin:28px auto;padding:20px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
h1{font-size:20px;margin:0;font-weight:800}
.sub{color:var(--muted);font-size:13px}
.grid{display:grid;grid-template-columns:1fr 420px;gap:18px}
@media(max-width:1020px){.grid{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,var(--card),#071428);border-radius:12px;padding:18px;box-shadow:0 12px 40px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn{background:var(--accent);color:#012;padding:10px 12px;border-radius:10px;border:none;font-weight:700;cursor:pointer}
.btn.alt{background:transparent;border:1px solid rgba(255,255,255,0.04);color:var(--muted)}
.smalltxt{color:var(--muted);font-size:13px}
#gameCanvas{background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(2,6,23,0.45);display:block;max-width:560px;width:100%}
.auth input{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:8px;border-radius:8px;color:inherit;margin-right:6px}
.leaderboard li{padding:8px;border-radius:8px;margin-bottom:6px;background:linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.008));display:flex;justify-content:space-between;align-items:center;font-weight:600}
footer{max-width:1100px;margin:28px auto;color:var(--muted);text-align:center;font-size:13px}
footer a{color:var(--accent2);text-decoration:none}
</style>
</head>
<body>
<div class="wrap">
  <header>
    <div>
      <h1>Snake Spiel</h1>
      <div class="sub">Agentur Style mit Account E Mail Verifikation und Moderation</div>
    </div>
    <div id="userArea" class="sub"></div>
  </header>

  <main class="grid">
    <section class="card">
      <div style="display:flex;justify-content:space-between;align-items:center">
        <div><strong>Spielmodi</strong><div class="smalltxt">Wähle Modus</div></div>
        <div><select id="modeSelect"><option value="survival">Überleben</option><option value="timed">Zeitlimit 60s</option></select></div>
      </div>

      <div style="margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:10px">
        <canvas id="gameCanvas" width="560" height="560"></canvas>
        <div class="controls">
          <button id="btnStart" class="btn">Start</button>
          <button id="btnPause" class="btn alt">Pause</button>
          <button id="btnReset" class="btn alt">Neu</button>
          <select id="speedSelect" class="btn alt"><option value="140">Leicht</option><option value="100" selected>Normal</option><option value="70">Schwer</option></select>
          <label style="margin-left:auto" class="smalltxt">Pfeiltasten oder W A S D</label>
        </div>
      </div>

      <div style="display:flex;gap:18px;margin-top:12px;align-items:center;flex-wrap:wrap">
        <div><div class="smalltxt">Aktuelle Punktzahl</div><div id="currentScore" style="font-size:28px;font-weight:800;color:var(--accent)">0</div></div>
        <div><div class="smalltxt">Highscore</div><div id="bestScore" style="font-size:28px;font-weight:800">0</div></div>
        <div><div class="smalltxt">Spiele gesamt</div><div id="gamesTotal" style="font-size:24px;color:var(--muted)">0</div></div>
      </div>

      <div class="smalltxt" style="margin-top:12px">Bei Spielende kannst du speichern wenn du eingeloggt bist</div>
      <div style="margin-top:8px" id="msgArea"></div>
    </section>

    <aside class="card">
      <h3 style="margin:0 0 8px 0">Leaderboard</h3>
      <div style="padding:12px;max-height:320px;overflow:auto">
        <ol id="leaderList"></ol>
      </div>

      <div style="margin-top:12px">
        <h4 style="margin:0 0 6px 0">Konto</h4>
        <div id="authArea">
          <div id="regBox" style="display:block" class="auth">
            <input id="regUser" placeholder="Benutzername" type="text">
            <input id="regEmail" placeholder="E Mail" type="text">
            <input id="regPass" placeholder="Passwort" type="password">
            <button id="btnRegister" class="btn alt">Registrieren</button>
          </div>
          <div style="margin-top:8px" class="auth">
            <input id="loginUser" placeholder="Benutzername" type="text">
            <input id="loginPass" placeholder="Passwort" type="password">
            <button id="btnLogin" class="btn alt">Login</button>
          </div>
          <div style="margin-top:8px" id="loggedInBox" style="display:none">
            <div class="smalltxt">Eingeloggt als <strong id="loggedUser"></strong></div>
            <div style="display:flex;gap:8px;margin-top:8px">
              <input id="playerName" placeholder="Name für Leaderboard" style="flex:1;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit">
              <button id="btnSaveScore" class="btn">Speichern</button>
            </div>
            <div style="margin-top:8px">
              <button id="btnLogout" class="btn alt">Logout</button>
            </div>
          </div>
          <div style="margin-top:8px">
            <a href="#" id="forgotLink" class="smalltxt">Passwort vergessen</a>
          </div>
        </div>
      </div>

      <div style="margin-top:16px" id="adminPanelWrap">
        <h4 style="margin:0 0 6px 0">Moderation</h4>
        <div id="adminLoginBox" style="display:block">
          <input id="adminPass" placeholder="Admin Passwort" type="password"><button id="adminLoginBtn" class="btn alt">Admin Login</button>
        </div>
        <div id="adminPanel" style="display:none">
          <div style="margin-top:8px" class="smalltxt">Admin angemeldet</div>
          <div style="margin-top:8px"><button id="adminFetchUsers" class="btn small">Nutzer Liste</button> <button id="adminLogoutBtn" class="btn alt small">Logout Admin</button></div>
          <div id="adminUsers" style="margin-top:8px;max-height:200px;overflow:auto"></div>
        </div>
      </div>
    </aside>
  </main>

  <footer>© <?=date('Y')?> <a href="https://www.dreamcodes.net" target="_blank" rel="noopener noreferrer">Dreamcodes</a> — Snake Spiel</footer>
</div>

<script>
// grundlegende helper und API wrapper
const api = async (action, method='GET', body=null) => {
  const url = '?action=' + action;
  const opts = { method, credentials: 'same-origin' };
  if(body){ opts.headers = {'Content-Type':'application/json'}; opts.body = JSON.stringify(body); }
  const r = await fetch(url, opts);
  return await r.json();
};

function el(id){ return document.getElementById(id); }
function showMsg(t){ el('msgArea').textContent = t; setTimeout(()=>el('msgArea').textContent = '',4000); }

// Auth flow
async function refreshUser(){
  const j = await api('get_user');
  const user = j.user;
  if(user){
    el('regBox').style.display='none';
    el('loggedInBox').style.display='block';
    el('loggedUser').textContent = user.username;
  } else {
    el('regBox').style.display='block';
    el('loggedInBox').style.display='none';
  }
}
el('btnRegister').addEventListener('click', async ()=>{
  const u = el('regUser').value.trim();
  const e = el('regEmail').value.trim();
  const p = el('regPass').value.trim();
  if(!u||!e||!p){ alert('Bitte ausfüllen'); return; }
  const r = await api('register','POST',{username:u,email:e,password:p});
  if(r.ok){ alert('Registriert bitte E Mail prüfen zum Aktivieren'); } else alert(r.error || 'Fehler');
});
el('btnLogin').addEventListener('click', async ()=>{
  const u = el('loginUser').value.trim();
  const p = el('loginPass').value.trim();
  if(!u||!p) { alert('Bitte ausfüllen'); return; }
  const r = await api('login','POST',{username:u,password:p});
  if(r.ok){ refreshUser(); showMsg('Login erfolgreich'); } else alert(r.error || 'Fehler');
});
el('btnLogout').addEventListener('click', async ()=>{
  await api('logout'); refreshUser();
});
el('forgotLink').addEventListener('click', async (e)=>{
  e.preventDefault();
  const email = prompt('Deine E Mail zum Zurücksetzen eingeben');
  if(!email) return;
  const r = await api('request_reset','POST',{email});
  if(r.ok) alert('Falls die E Mail existiert wurde ein Link gesendet');
  else alert(r.error || 'Fehler');
});

// Spiel logik verkürzt hier wieder integriert
(function(){
  const canvas = el('gameCanvas');
  const ctx = canvas.getContext('2d');
  const grid = 28;
  let cell = canvas.width / grid;
  let snake = [{x:12,y:12}];
  let dir = {x:0,y:-1};
  let food = null;
  let alive = false;
  let score = 0;
  let best = 0;

  function randCell(){ return {x: Math.floor(Math.random()*grid), y: Math.floor(Math.random()*grid)}; }
  function placeFood(){ let f = randCell(); while(snake.some(s=>s.x===f.x&&s.y===f.y)) f=randCell(); food=f; }
  function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    if(food){ ctx.fillStyle='#ef4444'; ctx.fillRect(food.x*cell+cell*0.12, food.y*cell+cell*0.12, cell*0.76, cell*0.76); }
    for(let i=0;i<snake.length;i++){
      ctx.fillStyle = i===0 ? '#06b6d4' : '#7c3aed';
      const s = snake[i];
      ctx.fillRect(s.x*cell+1, s.y*cell+1, cell-2, cell-2);
    }
    el('currentScore').textContent = score;
    el('bestScore').textContent = best;
  }
  function step(){
    if(!alive) return;
    const head = {x: snake[0].x + dir.x, y: snake[0].y + dir.y};
    if(head.x<0) head.x=grid-1; if(head.x>=grid) head.x=0;
    if(head.y<0) head.y=grid-1; if(head.y>=grid) head.y=0;
    if(snake.some((p,i)=>i>0 && p.x===head.x && p.y===head.y)){ gameOver(); return; }
    snake.unshift(head);
    if(food && head.x===food.x && head.y===food.y){ score += 10; placeFood(); } else snake.pop();
    draw();
  }
  function start(){ if(alive) return; alive=true; if(!food) placeFood(); timer = setInterval(step, parseInt(el('speedSelect').value)); }
  function pause(){ alive=false; clearInterval(window.timer); }
  function reset(){ alive=false; clearInterval(window.timer); snake=[{x:12,y:12}]; dir={x:0,y:-1}; placeFood(); score=0; draw(); }
  function gameOver(){ alive=false; clearInterval(window.timer); if(score>best) best=score; showMsg('Spielende Punktzahl ' + score); }

  document.getElementById('btnStart').addEventListener('click', start);
  document.getElementById('btnPause').addEventListener('click', ()=>{ if(alive) pause(); else start(); });
  document.getElementById('btnReset').addEventListener('click', reset);
  document.getElementById('speedSelect').addEventListener('change', ()=>{ if(alive){ clearInterval(window.timer); window.timer=setInterval(step, parseInt(el('speedSelect').value)); } });
  window.addEventListener('keydown', e=>{
    const map = {'ArrowUp':[0,-1],'ArrowDown':[0,1],'ArrowLeft':[-1,0],'ArrowRight':[1,0],'w':[0,-1],'s':[0,1],'a':[-1,0],'d':[1,0]};
    const k = e.key;
    if(map[k]){ const [x,y]=map[k]; if(snake.length>1 && snake[1].x===snake[0].x+x && snake[1].y===snake[0].y+y) return; dir={x,y}; e.preventDefault(); }
  });

  el('btnSaveScore').addEventListener('click', async ()=>{
    const name = (el('playerName').value || 'Spieler').substring(0,64);
    const res = await fetch('?action=save_score', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({name,score,mode:el('modeSelect').value})});
    const j = await res.json();
    if(j.ok){ renderLeaderboard(j.leaderboard); showMsg('Erfolgreich gespeichert'); } else showMsg('Fehler beim speichern');
  });

  function renderLeaderboard(list){
    const ol = el('leaderList'); ol.innerHTML='';
    list.forEach((it,i)=>{
      const li = document.createElement('li');
      li.innerHTML = `<span>${i+1}. ${escapeHtml(it.name)}</span><strong>${it.score}</strong>`;
      ol.appendChild(li);
    });
  }
  function escapeHtml(s){ return String(s).replace(/[&<>"']/g, m=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[m]); }

  // initial
  placeFood();
  draw();
  (async ()=>{ const r = await api('get_leaderboard'); if(r.ok) renderLeaderboard(r.leaderboard); const s = await api('get_user'); if(s.ok) refreshUser(); })();
})();

// Admin Aktionen
el('adminLoginBtn').addEventListener('click', async ()=>{
  const p = el('adminPass').value;
  const r = await api('admin_login','POST',{password:p});
  if(r.ok){ el('adminPanel').style.display='block'; el('adminLoginBox').style.display='none'; showMsg('Admin angemeldet'); } else alert('Admin login fehlgeschlagen');
});
el('adminLogoutBtn').addEventListener('click', async ()=>{ await api('admin_logout'); el('adminPanel').style.display='none'; el('adminLoginBox').style.display='block'; });
el('adminFetchUsers').addEventListener('click', async ()=>{
  const r = await api('admin_list_users');
  if(r.ok){
    const wrap = el('adminUsers'); wrap.innerHTML='';
    r.users.forEach(u=>{
      const div = document.createElement('div');
      div.style.display='flex'; div.style.justifyContent='space-between'; div.style.alignItems='center'; div.style.padding='6px';
      div.innerHTML = `<div><strong>${escapeHtml(u.username)}</strong><div class="smalltxt">${escapeHtml(u.email)} ${u.verified?'<span style="color:lime">verified</span>':''} ${u.is_banned?'<span style="color:crimson">banned</span>':''}</div></div>
        <div>
          <button class="btn small" data-id="${u.id}" data-action="ban">${u.is_banned?'Unban':'Ban'}</button>
        </div>`;
      wrap.appendChild(div);
    });
    wrap.querySelectorAll('button[data-action="ban"]').forEach(b=>{
      b.addEventListener('click', async ()=>{
        const uid = b.dataset.id; const ban = b.textContent.trim() !== 'Unban';
        await api('admin_ban_user','POST',{user_id:uid,ban: ban});
        b.textContent = ban ? 'Unban' : 'Ban';
      });
    });
  } else alert('Fehler');
});

async function escapeHtml(s){ return String(s).replace(/[&<>"']/g, function(m){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]; }); }
</script>
</body>
</html>