gespielte_spiele.php 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <?php
  2. require_once 'config.php';
  3. require_once 'db_config.php';
  4. // --- 1. DATEN LADEN ---
  5. $allTeams = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
  6. $teamFilter = isset($_GET['team_id']) ? (int)$_GET['team_id'] : 0;
  7. $sql = "SELECT sp.*,
  8. sc.zeit, sc.hilfe, sc.sterne,
  9. s.name as team_name,
  10. r.name as reihe_name,
  11. t.bezeichnung as typ_name
  12. FROM spiele sp
  13. JOIN scores sc ON sp.id = sc.spiel_id
  14. JOIN spieler s ON sc.spieler_id = s.id
  15. LEFT JOIN game_reihe r ON sp.game_reihe_id = r.id
  16. LEFT JOIN game_typ t ON sp.game_typ_id = t.id";
  17. if ($teamFilter > 0) {
  18. $sql .= " WHERE s.id = $teamFilter";
  19. }
  20. $sql .= " ORDER BY r.name ASC, sp.titel ASC, sc.zeit ASC";
  21. $results = $pdo->query($sql)->fetchAll();
  22. // --- 2. GRUPPIERUNG ---
  23. $groupedData = [];
  24. foreach ($results as $row) {
  25. $reihe = !empty($row['reihe_name']) ? $row['reihe_name'] : 'Sonstige';
  26. $gameId = $row['id'];
  27. if (!isset($groupedData[$reihe][$gameId])) {
  28. $groupedData[$reihe][$gameId] = [
  29. 'titel' => $row['titel'],
  30. 'bild_url' => $row['bild_url'],
  31. 'typ_name' => $row['typ_name'],
  32. 'teams' => []
  33. ];
  34. }
  35. // Verhindert doppelte Teamanzeige bei Bundle-Einträgen
  36. $teamKey = $row['team_name'] . '_' . $row['zeit'];
  37. if (!isset($groupedData[$reihe][$gameId]['teams'][$teamKey])) {
  38. $groupedData[$reihe][$gameId]['teams'][$teamKey] = [
  39. 'name' => $row['team_name'],
  40. 'zeit' => (int)$row['zeit'],
  41. 'hilfe' => (int)$row['hilfe'],
  42. 'sterne' => (int)$row['sterne']
  43. ];
  44. }
  45. }
  46. ?>
  47. <!DOCTYPE html>
  48. <html lang="de">
  49. <head>
  50. <meta charset="UTF-8">
  51. <title>EXIT Log - Kompaktansicht</title>
  52. <style>
  53. :root {
  54. --bg: #f4f7f6; --card: #ffffff; --text: #333; --border: #ddd; --accent: #e67e22;
  55. --muted: #888; --reihe-bg: #2c3e50;
  56. }
  57. .dark-theme {
  58. --bg: #121212; --card: #1e1e1e; --text: #ffffff; --border: #333; --muted: #aaa;
  59. }
  60. body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); padding: 15px; transition: 0.3s; margin: 0; }
  61. .container { max-width: 1400px; margin: 0 auto; }
  62. header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 2px solid var(--accent); padding-bottom: 8px; }
  63. h1 { color: var(--accent); margin: 0; font-size: 1.4rem; }
  64. .btn-nav { background: var(--accent); color: white; text-decoration: none; padding: 6px 12px; border-radius: 6px; font-weight: bold; font-size: 0.85em; }
  65. .theme-toggle { background: none; border: none; font-size: 1.2rem; cursor: pointer; }
  66. .filter-bar { background: var(--card); padding: 10px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-size: 0.9em; }
  67. select { padding: 5px 10px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text); }
  68. .reihe-divider { grid-column: 1 / -1; margin: 25px 0 10px; padding: 8px 15px; background: var(--reihe-bg); color: white; border-radius: 6px; font-size: 0.9rem; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; }
  69. .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; }
  70. .item { background: var(--card); border-radius: 8px; border: 1px solid var(--border); box-shadow: 0 2px 8px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-direction: column; }
  71. .item img { width: 100%; height: 140px; object-fit: cover; background: #2a2a2a; }
  72. .stats { padding: 10px; flex-grow: 1; }
  73. .game-title { font-weight: bold; display: block; margin-bottom: 2px; font-size: 1rem; color: var(--accent); text-align: center; }
  74. .game-subtitle { display: block; text-align: center; font-size: 0.7em; opacity: 0.6; margin-bottom: 10px; text-transform: uppercase; }
  75. .team-section-label { font-size: 0.65em; color: var(--muted); display: block; text-transform: uppercase; margin-bottom: 8px; border-bottom: 1px solid var(--border); padding-bottom: 3px; }
  76. .team-entry { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed var(--border); }
  77. .team-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  78. .team-name-text { font-size: 0.85em; font-weight: bold; display: block; margin-bottom: 3px; }
  79. .result-row { display: flex; justify-content: space-between; font-size: 0.75em; }
  80. .res-item b { color: var(--accent); }
  81. .res-only-solved { font-size: 0.75em; color: var(--muted); font-style: italic; }
  82. @media (max-width: 600px) {
  83. .grid { grid-template-columns: 1fr; }
  84. }
  85. </style>
  86. </head>
  87. <body>
  88. <div class="container">
  89. <header>
  90. <h1>📂 Gelöste Abenteuer</h1>
  91. <div style="display: flex; align-items: center; gap: 10px;">
  92. <button onclick="toggleTheme()" class="theme-toggle" id="theme-icon">🌙</button>
  93. <a href="index.php" class="btn-nav">Dashboard</a>
  94. </div>
  95. </header>
  96. <div class="filter-bar">
  97. <strong>Filter:</strong>
  98. <form id="filterForm" method="GET">
  99. <select name="team_id" onchange="this.form.submit()">
  100. <option value="0">Alle Teams</option>
  101. <?php foreach ($allTeams as $t): ?>
  102. <option value="<?= $t['id'] ?>" <?= $teamFilter == $t['id'] ? 'selected' : '' ?>>
  103. <?= htmlspecialchars($t['name']) ?>
  104. </option>
  105. <?php endforeach; ?>
  106. </select>
  107. </form>
  108. </div>
  109. <div class="grid">
  110. <?php foreach ($groupedData as $reiheName => $games): ?>
  111. <div class="reihe-divider"><?= htmlspecialchars($reiheName) ?></div>
  112. <?php foreach ($games as $gameId => $data): ?>
  113. <div class="item">
  114. <?php
  115. $b = $data['bild_url'];
  116. $imgSrc = empty($b) ? 'https://via.placeholder.com/240x140?text=EXIT' : (strpos($b, 'http') === 0 ? $b : IMG_URL . $b);
  117. ?>
  118. <img src="<?= htmlspecialchars($imgSrc) ?>" onerror="this.src='https://via.placeholder.com/240x140?text=EXIT'">
  119. <div class="stats">
  120. <span class="game-title"><?= htmlspecialchars($data['titel']) ?></span>
  121. <span class="game-subtitle"><?= htmlspecialchars($data['typ_name'] ?: '') ?></span>
  122. <span class="team-section-label">Teams</span>
  123. <?php foreach ($data['teams'] as $team): ?>
  124. <div class="team-entry">
  125. <span class="team-name-text">👥 <?= htmlspecialchars($team['name']) ?></span>
  126. <?php if ($team['zeit'] === 0 && $team['hilfe'] === 0 && $team['sterne'] === 0): ?>
  127. <div class="res-only-solved">✅ Gelöst</div>
  128. <?php else: ?>
  129. <div class="result-row">
  130. <div class="res-item"><b><?= $team['zeit'] ?></b> Min.</div>
  131. <div class="res-item">Hilfe: <b><?= $team['hilfe'] ?></b></div>
  132. <div class="res-item"><b>⭐ <?= $team['sterne'] ?></b></div>
  133. </div>
  134. <?php endif; ?>
  135. </div>
  136. <?php endforeach; ?>
  137. </div>
  138. </div>
  139. <?php endforeach; ?>
  140. <?php endforeach; ?>
  141. </div>
  142. </div>
  143. <script>
  144. const themeIcon = document.getElementById('theme-icon');
  145. function toggleTheme() {
  146. const isDark = document.documentElement.classList.toggle('dark-theme');
  147. localStorage.setItem('theme', isDark ? 'dark' : 'light');
  148. themeIcon.innerText = isDark ? '☀️' : '🌙';
  149. }
  150. if (localStorage.getItem('theme') === 'dark') {
  151. document.documentElement.classList.add('dark-theme');
  152. themeIcon.innerText = '☀️';
  153. }
  154. </script>
  155. </body>
  156. </html>