index.php 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <?php
  2. require_once 'config.php'; // NEU: Damit IMG_URL bekannt ist
  3. require_once 'db_config.php';
  4. // --- 1. DATEN LADEN (REIHEN FÜR DEN FILTER) ---
  5. $reihen = $pdo->query("SELECT * FROM game_reihe ORDER BY name ASC")->fetchAll();
  6. // --- 2. LOGIK: NEUEN SPIELER HINZUFÜGEN ---
  7. if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_player'])) {
  8. $sql = "INSERT IGNORE INTO spieler (name) VALUES (?)";
  9. $stmt = $pdo->prepare($sql);
  10. $stmt->execute([$_POST['neuer_spieler_name']]);
  11. header("Location: index.php?success=player");
  12. exit;
  13. }
  14. // --- 3. LOGIK: SCORE HINZUFÜGEN ---
  15. if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['add_score'])) {
  16. $unbekannt = isset($_POST['ergebnis_unbekannt']);
  17. $zeit = $unbekannt ? 0 : (int)$_POST['zeit'];
  18. $hilfe = $unbekannt ? 0 : (int)$_POST['hilfe'];
  19. $sterne = $unbekannt ? 0 : (int)$_POST['sterne'];
  20. $sql = "INSERT INTO scores (spieler_id, spiel_id, zeit, hilfe, sterne) VALUES (?, ?, ?, ?, ?)";
  21. $stmt = $pdo->prepare($sql);
  22. $stmt->execute([$_POST['spieler_id'], $_POST['spiel_id'], $zeit, $hilfe, $sterne]);
  23. header("Location: index.php?success=score");
  24. exit;
  25. }
  26. // --- 4. DATEN ABFRAGEN (NEUE STRUKTUR MIT JOINS) ---
  27. $sqlGames = "SELECT s.*,
  28. r.name as reihe_name,
  29. t.bezeichnung as typ_name,
  30. l.bezeichnung as level_name
  31. FROM spiele s
  32. LEFT JOIN game_reihe r ON s.game_reihe_id = r.id
  33. LEFT JOIN game_typ t ON s.game_typ_id = t.id
  34. LEFT JOIN game_level l ON s.game_level_id = l.id
  35. ORDER BY r.name ASC, s.titel ASC";
  36. $exitGames = $pdo->query($sqlGames)->fetchAll(PDO::FETCH_ASSOC);
  37. $playersList = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
  38. $sqlScores = "SELECT s.*, p.name as spieler_name
  39. FROM scores s
  40. JOIN spieler p ON s.spieler_id = p.id
  41. ORDER BY s.id DESC";
  42. $allScores = $pdo->query($sqlScores)->fetchAll();
  43. // Hilfsfunktion Sterne (Zahlen zu ★)
  44. function getStarRating($val) {
  45. if (!is_numeric($val)) return htmlspecialchars($val);
  46. $n = (int)$val; $out = "";
  47. for($i=1; $i<=5; $i++) { $out .= ($i <= $n) ? "★" : "☆"; }
  48. return $out;
  49. }
  50. ?>
  51. <!DOCTYPE html>
  52. <html lang="de">
  53. <head>
  54. <meta charset="UTF-8">
  55. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  56. <title>EXIT - Dashboard</title>
  57. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  58. <style>
  59. :root {
  60. --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd; --accent: #e67e22;
  61. --input-bg: #fff; --footer-bg: #f1f1f1; --success: #27ae60;
  62. }
  63. .dark-theme {
  64. --bg: #121212; --card: #1e1e1e; --text: #e0e0e0; --border: #333;
  65. --input-bg: #2a2a2a; --footer-bg: #1a1a1a;
  66. }
  67. body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); margin: 0; padding-bottom: 120px; transition: 0.3s; }
  68. .container { max-width: 1200px; margin: auto; padding: 20px; }
  69. .alert { background: var(--success); color: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; text-align: center; font-weight: bold; }
  70. header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; border-bottom: 1px solid var(--border); padding-bottom: 15px; }
  71. h1 { color: var(--accent); margin: 0; font-size: 1.6em; }
  72. .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; }
  73. .swiper-outer-wrapper { position: relative; width: 100%; padding: 0 40px; box-sizing: border-box; margin-bottom: 40px; }
  74. .swiper-slide { width: 300px; height: auto; }
  75. .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); display: flex; flex-direction: column; }
  76. .card img { width: 100%; height: 160px; object-fit: cover; }
  77. .content { padding: 15px; flex-grow: 1; }
  78. h2 { color: var(--accent); margin: 0 0 5px 0; font-size: 1.1em; }
  79. .reihe-label { font-size: 0.75em; opacity: 0.7; text-transform: uppercase; display: block; margin-bottom: 2px; }
  80. .stats { width: 100%; border-collapse: collapse; font-size: 0.85em; margin-top: 10px; }
  81. .stats td { padding: 6px 0; border-bottom: 1px solid var(--border); }
  82. .badge { padding: 3px 7px; border-radius: 4px; font-size: 0.65em; font-weight: bold; text-transform: uppercase; color: white; display: inline-block; margin-bottom: 5px; margin-right: 3px; }
  83. .level-badge { background: #7f8c8d; }
  84. .type-badge { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
  85. .bottom-section { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; margin-top: 20px; }
  86. @media (max-width: 768px) { .bottom-section { grid-template-columns: 1fr; } .swiper-outer-wrapper { padding: 0 10px; } }
  87. .form-section, .info-section { background: var(--card); padding: 20px; border-radius: 12px; border: 1px solid var(--border); }
  88. .highlight-border { border-color: var(--accent); border-width: 2px; }
  89. input, select { width: 100%; padding: 10px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); border-radius: 5px; margin-bottom: 10px; }
  90. button { background: var(--accent); color: white; border: none; padding: 12px; border-radius: 5px; cursor: pointer; font-weight: bold; width: 100%; }
  91. .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; }
  92. .footer-nav a { color: var(--accent); text-decoration: none; font-weight: bold; font-size: 0.85em; }
  93. #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; }
  94. .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); z-index: 1500; }
  95. </style>
  96. </head>
  97. <body>
  98. <div class="container">
  99. <?php if (isset($_GET['success'])): ?>
  100. <div class="alert" id="success-alert">
  101. <?= $_GET['success'] === 'score' ? '✅ Score gespeichert!' : '👤 Spieler angelegt!' ?>
  102. </div>
  103. <?php endif; ?>
  104. <header>
  105. <h1>🏆 EXIT Highscores</h1>
  106. <button onclick="toggleTheme()" class="theme-toggle" id="theme-icon">🌙</button>
  107. </header>
  108. <div class="swiper-outer-wrapper">
  109. <div class="swiper mySwiper">
  110. <div class="swiper-wrapper">
  111. <?php foreach ($exitGames as $game): ?>
  112. <div class="swiper-slide">
  113. <div class="card">
  114. <?php
  115. // ANPASSUNG: Pfadbereinigung
  116. $b = $game['bild_url'];
  117. $imgSrc = (empty($b)) ? 'https://via.placeholder.com/300x160?text=Kein+Cover' : (strpos($b, 'http') === 0 ? $b : IMG_URL . $b);
  118. ?>
  119. <img src="<?= htmlspecialchars($imgSrc) ?>" onerror="this.src='https://via.placeholder.com/300x160?text=Kein+Cover'">
  120. <div class="content">
  121. <span class="reihe-label"><?= htmlspecialchars($game['reihe_name']) ?></span>
  122. <h2><?= htmlspecialchars($game['titel']) ?></h2>
  123. <span class="badge type-badge"><?= htmlspecialchars($game['typ_name'] ?: 'Basis') ?></span>
  124. <span class="badge level-badge"><?= getStarRating($game['level_name'] ?: '---') ?></span>
  125. <table class="stats">
  126. <?php
  127. $found = false;
  128. foreach ($allScores as $entry):
  129. if ($entry['spiel_id'] == $game['id']): $found = true; ?>
  130. <tr>
  131. <td><strong><?= htmlspecialchars($entry['spieler_name']) ?></strong></td>
  132. <td><?= $entry['zeit'] > 0 ? $entry['zeit']." Min" : '?' ?></td>
  133. <td style="color:#f1c40f; text-align:right;"><?= $entry['sterne'] > 0 ? $entry['sterne']."★" : "✔" ?></td>
  134. </tr>
  135. <?php endif; endforeach;
  136. if (!$found) echo "<tr><td colspan='3' style='opacity:0.4'>Noch ungelöst...</td></tr>";
  137. ?>
  138. </table>
  139. </div>
  140. </div>
  141. </div>
  142. <?php endforeach; ?>
  143. </div>
  144. <div class="swiper-pagination"></div>
  145. </div>
  146. </div>
  147. <div class="bottom-section">
  148. <div class="info-section">
  149. <h2>📜 Archiv</h2>
  150. <p style="font-size: 0.8em; opacity: 0.6;">Alle Spielergebnisse einsehen.</p>
  151. <a href="gespielte_spiele.php" style="color: var(--accent); font-weight:bold; text-decoration:none;">📂 Zur Übersicht</a>
  152. </div>
  153. <div class="form-section highlight-border">
  154. <h2>🎯 Score eintragen</h2>
  155. <form method="POST">
  156. <select id="filter_reihe" onchange="filterGamesByReihe()">
  157. <option value="">-- Alle Reihen --</option>
  158. <?php foreach ($reihen as $r): ?>
  159. <option value="<?= $r['id'] ?>"><?= htmlspecialchars($r['name']) ?></option>
  160. <?php endforeach; ?>
  161. </select>
  162. <select name="spiel_id" id="spiel_select" required>
  163. <option value="">-- Spiel wählen --</option>
  164. <?php foreach ($exitGames as $game): ?>
  165. <option value="<?= $game['id'] ?>" data-reihe="<?= $game['game_reihe_id'] ?>">
  166. <?= htmlspecialchars($game['reihe_name']) ?>: <?= htmlspecialchars($game['titel']) ?>
  167. </option>
  168. <?php endforeach; ?>
  169. </select>
  170. <select name="spieler_id" required>
  171. <option value="">-- Wer hat gespielt? --</option>
  172. <?php foreach ($playersList as $p): ?>
  173. <option value="<?= $p['id'] ?>"><?= htmlspecialchars($p['name']) ?></option>
  174. <?php endforeach; ?>
  175. </select>
  176. <div style="display: flex; align-items: center; gap: 8px; margin-bottom:10px; font-size:0.9em;">
  177. <input type="checkbox" name="ergebnis_unbekannt" id="ergebnis_unbekannt" onchange="toggleInputs()" style="width:auto; margin:0;">
  178. <label for="ergebnis_unbekannt">Ergebnis unbekannt (nur Archivierung)</label>
  179. </div>
  180. <div id="input-fields" style="display: flex; gap: 10px;">
  181. <input type="number" name="zeit" id="zeit" placeholder="Min" required>
  182. <input type="number" name="sterne" id="sterne" min="1" max="10" placeholder="Sterne">
  183. <input type="number" name="hilfe" id="hilfe" placeholder="Hilfe">
  184. </div>
  185. <button type="submit" name="add_score">Score speichern</button>
  186. </form>
  187. </div>
  188. </div>
  189. </div>
  190. <div class="footer-nav">
  191. <a href="javascript:void(0)" onclick="toggleModal()">👤 NEUER SPIELER</a>
  192. <a href="besitz.php">📦 BESTAND</a>
  193. <a href="gesamtliste.php">📝 LISTE</a>
  194. <a href="admin.php">🛠 ADMIN</a>
  195. </div>
  196. <div class="overlay" id="overlay" onclick="toggleModal()"></div>
  197. <div id="playerModal">
  198. <h2 style="color:var(--accent); margin-top:0;">👤 Team/Spieler</h2>
  199. <form method="POST">
  200. <input type="text" name="neuer_spieler_name" placeholder="Name" required>
  201. <button type="submit" name="add_player">Anlegen</button>
  202. <button type="button" onclick="toggleModal()" style="background: #666; margin-top: 8px;">Abbrechen</button>
  203. </form>
  204. </div>
  205. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  206. <script>
  207. function toggleTheme() {
  208. const isDark = document.documentElement.classList.toggle('dark-theme');
  209. localStorage.setItem('theme', isDark ? 'dark' : 'light');
  210. document.getElementById('theme-icon').innerText = isDark ? '☀️' : '🌙';
  211. }
  212. if (localStorage.getItem('theme') === 'dark') {
  213. document.documentElement.classList.add('dark-theme');
  214. document.getElementById('theme-icon').innerText = '☀️';
  215. }
  216. function filterGamesByReihe() {
  217. const reihenId = document.getElementById('filter_reihe').value;
  218. const select = document.getElementById('spiel_select');
  219. const options = select.querySelectorAll('option');
  220. options.forEach(opt => {
  221. const rId = opt.getAttribute('data-reihe');
  222. if (reihenId === "" || rId === reihenId || !rId) {
  223. opt.style.display = "block";
  224. } else {
  225. opt.style.display = "none";
  226. }
  227. });
  228. select.value = "";
  229. }
  230. function toggleInputs() {
  231. const check = document.getElementById('ergebnis_unbekannt');
  232. const ids = ['zeit', 'sterne', 'hilfe'];
  233. ids.forEach(id => {
  234. const el = document.getElementById(id);
  235. el.disabled = check.checked;
  236. if (check.checked) el.value = '';
  237. if (id === 'zeit') el.required = !check.checked;
  238. });
  239. document.getElementById('input-fields').style.opacity = check.checked ? '0.5' : '1';
  240. }
  241. function toggleModal() {
  242. const m = document.getElementById('playerModal');
  243. const o = document.getElementById('overlay');
  244. const vis = m.style.display === 'block';
  245. m.style.display = vis ? 'none' : 'block';
  246. o.style.display = vis ? 'none' : 'block';
  247. }
  248. new Swiper(".mySwiper", {
  249. slidesPerView: "auto",
  250. spaceBetween: 20,
  251. pagination: { el: ".swiper-pagination", type: "progressbar" },
  252. });
  253. setTimeout(() => {
  254. const a = document.getElementById('success-alert');
  255. if(a) a.style.display = 'none';
  256. }, 3000);
  257. </script>
  258. </body>
  259. </html>