erdo
/
exit-game


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307
							<?php
require_once 'db_config.php';

// --- LOGIK: NEUEN SPIELER HINZUFÜGEN ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_player'])) {
    $sql = "INSERT IGNORE INTO spieler (name) VALUES (?)";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([$_POST['neuer_spieler_name']]);
    header("Location: index.php?success=player");
    exit;
}

// --- LOGIK: SCORE HINZUFÜGEN ---
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_score'])) {
    $sql = "INSERT INTO scores (spieler_id, spiel_id, zeit, hilfe, sterne) VALUES (?, ?, ?, ?, ?)";
    $stmt = $pdo->prepare($sql);
    $stmt->execute([
        $_POST['spieler_id'], 
        $_POST['spiel_id'], 
        (int)$_POST['zeit'], 
        (int)$_POST['hilfe'], 
        (int)$_POST['sterne']
    ]);
    header("Location: index.php?success=score");
    exit;
}

// --- DATEN ABFRAGEN ---
$sqlGames = "SELECT s.*, t.bezeichnung as typ_name 
             FROM spiele s 
             LEFT JOIN game_typen t ON s.typ_id = t.id 
             ORDER BY s.titel ASC";
$stmtGames = $pdo->query($sqlGames);
$exitGames = $stmtGames->fetchAll(PDO::FETCH_ASSOC);

$stmtAllPlayers = $pdo->query("SELECT * FROM spieler ORDER BY name ASC");
$playersList = $stmtAllPlayers->fetchAll();

$sqlScores = "SELECT s.*, p.name as spieler_name 
              FROM scores s 
              JOIN spieler p ON s.spieler_id = p.id 
              ORDER BY s.sterne DESC, s.zeit ASC";
$allScores = $pdo->query($sqlScores)->fetchAll();
?>

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EXIT - Dashboard</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <style>
        :root { 
            --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd; --accent: #e67e22;
            --input-bg: #fff; --footer-bg: #f1f1f1; --success: #27ae60;
        }
        .dark-theme { 
            --bg: #121212cf; --card: #1e1e1e; --text: #e0e0e0; --border: #333;
            --input-bg: #2a2a2a; --footer-bg: #1a1a1a;
        }

        body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-bottom: 120px; transition: 0.3s; }
        .container { max-width: 1200px; margin: auto; padding: 20px; }
        
        .alert { 
            background: var(--success); color: white; padding: 15px; border-radius: 8px; 
            margin-bottom: 20px; text-align: center; font-weight: bold;
            animation: fadeOut 1s forwards; animation-delay: 3s;
        }
        @keyframes fadeOut { from {opacity: 1;} to {opacity: 0; visibility: hidden;} }

        header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
        h1 { color: var(--accent); margin: 0; font-size: 1.6em; }

        .theme-toggle { background: var(--card); border: 1px solid var(--border); color: var(--text); width: 42px; height: 34px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.3s; }

        /* --- SWIPER LAYOUT MIT TRANSPARENTEN PFEILEN OHNE KREIS --- */
        .swiper-outer-wrapper {
            position: relative;
            width: 100%;
            padding: 0 50px; /* Platz für die Pfeile neben dem Banner */
            box-sizing: border-box;
            margin-bottom: 40px;
        }

        .swiper { width: 100%; padding-top: 10px; }
        .swiper-slide { width: 320px; height: auto; }
        .swiper-pagination-progressbar { background: var(--border) !important; height: 4px !important; top: 0 !important; }
        .swiper-pagination-progressbar-fill { background: var(--accent) !important; }
        
        /* Die Pfeil-Buttons angepasst */
        .swiper-button-next, .swiper-button-prev { 
            color: var(--text); /* Nutzt Standard-Textfarbe oder Akzentfarbe */
            background: none;   /* Kreis entfernen */
            width: auto;        /* Breite automatisch */
            height: auto;       /* Höhe automatisch */
            box-shadow: none;   /* Schatten entfernen */
            border: none;       /* Rahmen entfernen */
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            margin-top: 0;
            opacity: 0.5;       /* Transparent setzen */
            transition: all 0.3s ease;
        }

        /* Hover-Effekt: Farbe ändern und Deckkraft erhöhen */
        .swiper-button-next:hover, .swiper-button-prev:hover {
            color: var(--accent);
            opacity: 1;
            background: none;
            transform: translateY(-50%) scale(1.1);
        }

        .swiper-button-prev { left: 10px; }
        .swiper-button-next { right: 10px; }

        /* Pfeilspitzen-Größe (angepasst für Icon-Look) */
        .swiper-button-next:after, .swiper-button-prev:after { 
            font-size: 40px;    /* Etwas größer, da der Kreis weg ist */
            font-weight: bold; 
        }

        /* Auf kleinen Geräten Pfeile ausblenden für mehr Platz */
        @media (max-width: 768px) {
            .swiper-outer-wrapper { padding: 0 10px; }
            .swiper-button-next, .swiper-button-prev { display: none; }
        }

        .card { background: var(--card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; height: 100%; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
        .card img { width: 100%; height: 180px; object-fit: cover; opacity: 0.9; }
        .content { padding: 15px; }
        
        h2 { color: var(--accent); margin-top: 0; font-size: 1.1em; }
        .stats { width: 100%; border-collapse: collapse; font-size: 0.85em; }
        .stats td { padding: 6px 0; border-bottom: 1px solid var(--border); }
        
        .badge { padding: 4px 8px; border-radius: 4px; font-size: 0.7em; font-weight: bold; text-transform: uppercase; color: white; display: inline-block; margin-bottom: 5px; }
        .level-Einsteiger { background: #27ae60; } 
        .level-Profi { background: #c0392b; } 
        .level-Fortgeschrittene { background: #2980b9; }
        .level-unknown { background: #f39c12; }

        .bottom-section { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-top: 20px; }
        @media (max-width: 768px) { .bottom-section { grid-template-columns: 1fr; } }

        .form-section, .info-section { background: var(--card); padding: 20px; border-radius: 12px; border: 1px solid var(--border); }
        .highlight-border { border-color: var(--accent); }
        
        .info-section a { color: var(--accent); text-decoration: none; display: block; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; transition: 0.2s; }
        .info-section a:hover { background: var(--bg); border-color: var(--accent); }

        input, select { width: 100%; padding: 10px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; margin-bottom: 10px; box-sizing: border-box; }
        button { background: var(--accent); color: white; border: none; padding: 12px; border-radius: 5px; cursor: pointer; font-weight: bold; width: 100%; }

        .footer-nav { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--footer-bg); border-top: 2px solid var(--accent); padding: 15px 0; display: flex; justify-content: center; gap: 20px; z-index: 1000; flex-wrap: wrap; }
        .footer-nav a { color: var(--accent); text-decoration: none; font-weight: bold; font-size: 0.8em; padding: 5px 10px; border: 1px solid transparent; transition: 0.3s; }
        .footer-nav a:hover { border-color: var(--accent); border-radius: 5px; }
        
        #playerModal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--card); padding: 30px; border-radius: 12px; border: 1px solid var(--accent); z-index: 2000; color: var(--text); box-shadow: 0 0 50px rgba(0,0,0,0.5); }
        .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1500; }
    </style>
    <script>
        if (localStorage.getItem('theme') === 'dark') document.documentElement.classList.add('dark-theme');
    </script>
</head>
<body>

<div class="container">
    <?php if (isset($_GET['success'])): ?>
        <div class="alert" id="success-alert">
            <?= $_GET['success'] === 'score' ? '✅ Score erfolgreich gespeichert!' : '👤 Neuer Spieler angelegt!' ?>
        </div>
    <?php endif; ?>

    <header>
        <h1>🏆 EXIT Highscores</h1>
        <button onclick="toggleTheme()" class="theme-toggle" id="theme-icon">🌙</button>
    </header>

    <div class="swiper-outer-wrapper">
        <div class="swiper mySwiper">
            <div class="swiper-pagination"></div>
            <div class="swiper-wrapper">
                <?php foreach ($exitGames as $game): 
                    $lvl_class = (empty($game['level']) || strtolower($game['level']) == 'unknown') ? 'unknown' : $game['level'];
                ?>
                    <div class="swiper-slide">
                        <div class="card">
                            <img src="<?= htmlspecialchars($game['bild_url']) ?>" alt="Cover" onerror="this.src='https://via.placeholder.com/320x180?text=Kein+Bild'">
                            <div class="content">
                                <span class="badge level-<?= $lvl_class ?>"><?= htmlspecialchars($game['level'] ?: 'Unbekannt') ?></span>
                                <h2><?= htmlspecialchars($game['titel']) ?></h2>
                                <table class="stats">
                                    <?php 
                                    $found = false;
                                    foreach ($allScores as $entry): 
                                        if ($entry['spiel_id'] == $game['id']): $found = true; ?>
                                        <tr>
                                            <td><strong><?= htmlspecialchars($entry['spieler_name']) ?></strong></td>
                                            <td><?= $entry['zeit'] ?>'</td>
                                            <td style="color:#f1c40f"><?= $entry['sterne'] ?>★</td>
                                        </tr>
                                    <?php endif; endforeach; 
                                    if (!$found) echo "<tr><td colspan='3' style='opacity:0.5'>Noch keine Scores.</td></tr>";
                                    ?>
                                </table>
                            </div>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>

    <div class="bottom-section">
        <div class="info-section">
            <h2>📜 Archiv</h2>
            <p style="font-size: 0.8em; opacity: 0.6; margin-bottom: 15px;">Bereits gelöste Abenteuer einsehen.</p>
            <a href="gespielte_spiele.php">📂 Übersicht gespielte Spiele</a>
        </div>

        <div class="form-section highlight-border">
            <h2>🎯 Ergebnis eintragen</h2>
            <form method="POST" action="index.php">
                <select name="spiel_id" required>
                    <option value="">-- Spiel wählen --</option>
                    <?php foreach ($exitGames as $game): 
                        $display_typ = $game['typ_name'] ?: 'Unbekannt';
                    ?>
                        <option value="<?= $game['id'] ?>">
                            <?= htmlspecialchars($game['titel']) ?> (<?= htmlspecialchars($display_typ) ?>)
                        </option>
                    <?php endforeach; ?>
                </select>
                <select name="spieler_id" required>
                    <option value="">-- Wer hat gespielt? --</option>
                    <?php foreach ($playersList as $p): ?>
                        <option value="<?= $p['id'] ?>"><?= htmlspecialchars($p['name']) ?></option>
                    <?php endforeach; ?>
                </select>
                <div style="display: flex; gap: 10px;">
                    <input type="number" name="zeit" placeholder="Min" required>
                    <input type="number" name="sterne" min="1" max="10" placeholder="Sterne">
                    <input type="number" name="hilfe" placeholder="Hilfe">
                </div>
                <button type="submit" name="add_score">Score speichern</button>
            </form>
        </div>
    </div>
</div>

<div class="footer-nav">
    <a href="javascript:void(0)" onclick="toggleModal()">👤 NEUER SPIELER</a>
    <a href="besitz.php">📦 BESTAND</a> 
    <a href="gesamtliste.php">📝 GESAMTÜBERSICHT</a>
    <a href="admin.php">🛠 ADMIN</a>
</div>

<div class="overlay" id="overlay" onclick="toggleModal()"></div>
<div id="playerModal">
    <h2>👤 Team/Spieler anlegen</h2>
    <form method="POST" action="index.php">
        <input type="text" name="neuer_spieler_name" placeholder="Name" required>
        <button type="submit" name="add_player">Anlegen</button>
        <button type="button" onclick="toggleModal()" style="background: #666; margin-top: 10px;">Abbrechen</button>
    </form>
</div>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    const themeIcon = document.getElementById('theme-icon');
    function toggleTheme() {
        const isDark = document.documentElement.classList.toggle('dark-theme');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
        themeIcon.innerText = isDark ? '☀️' : '🌙';
    }
    if (localStorage.getItem('theme') === 'dark') themeIcon.innerText = '☀️';

    new Swiper(".mySwiper", {
        slidesPerView: "auto", 
        spaceBetween: 20, 
        grabCursor: true, 
        pagination: { 
            el: ".swiper-pagination", 
            type: "progressbar" 
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

    function toggleModal() {
        const m = document.getElementById('playerModal');
        const o = document.getElementById('overlay');
        const vis = m.style.display === 'block';
        m.style.display = vis ? 'none' : 'block';
        o.style.display = vis ? 'none' : 'block';
    }
</script>
</body>
</html>