|
|
@@ -2,10 +2,8 @@
|
|
|
include 'db_config.php';
|
|
|
|
|
|
// --- 1. DATEN LADEN ---
|
|
|
-// Alle Spieler (Teams) für den Filter laden
|
|
|
$allTeams = $pdo->query("SELECT * FROM spieler ORDER BY name ASC")->fetchAll();
|
|
|
|
|
|
-// Filter-Logik
|
|
|
$teamFilter = isset($_GET['team_id']) ? (int)$_GET['team_id'] : 0;
|
|
|
|
|
|
$sql = "SELECT sp.*, sc.zeit, sc.hilfe, sc.sterne, s.name as team_name
|
|
|
@@ -17,10 +15,27 @@ if ($teamFilter > 0) {
|
|
|
$sql .= " WHERE s.id = $teamFilter";
|
|
|
}
|
|
|
|
|
|
-// Sortierung nach Titel
|
|
|
-$sql .= " ORDER BY sp.titel ASC";
|
|
|
+$sql .= " ORDER BY sp.titel ASC, sc.zeit ASC";
|
|
|
$stmt = $pdo->query($sql);
|
|
|
-$playedGames = $stmt->fetchAll();
|
|
|
+$results = $stmt->fetchAll();
|
|
|
+
|
|
|
+// --- 2. GRUPPIERUNG NACH SPIEL ---
|
|
|
+$groupedGames = [];
|
|
|
+foreach ($results as $row) {
|
|
|
+ $gameTitle = $row['titel'];
|
|
|
+ if (!isset($groupedGames[$gameTitle])) {
|
|
|
+ $groupedGames[$gameTitle] = [
|
|
|
+ 'bild_url' => $row['bild_url'],
|
|
|
+ 'teams' => []
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ $groupedGames[$gameTitle]['teams'][] = [
|
|
|
+ 'name' => $row['team_name'],
|
|
|
+ 'zeit' => (int)$row['zeit'],
|
|
|
+ 'hilfe' => (int)$row['hilfe'],
|
|
|
+ 'sterne' => (int)$row['sterne']
|
|
|
+ ];
|
|
|
+}
|
|
|
?>
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="de">
|
|
|
@@ -39,35 +54,33 @@ $playedGames = $stmt->fetchAll();
|
|
|
body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); padding: 20px; transition: 0.3s; }
|
|
|
.container { max-width: 1200px; margin: 0 auto; }
|
|
|
|
|
|
- /* HEADER */
|
|
|
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid var(--accent); padding-bottom: 10px; }
|
|
|
h1 { color: var(--accent); margin: 0; font-size: 1.8rem; }
|
|
|
|
|
|
- .btn-nav { background: var(--accent); color: white; text-decoration: none; padding: 10px 15px; border-radius: 8px; font-weight: bold; font-size: 0.9em; display: inline-block; border: none; cursor: pointer; }
|
|
|
+ .btn-nav { background: var(--accent); color: white; text-decoration: none; padding: 10px 15px; border-radius: 8px; font-weight: bold; font-size: 0.9em; display: inline-block; border: none; }
|
|
|
.theme-toggle { background: none; border: none; font-size: 1.5rem; cursor: pointer; padding: 0; line-height: 1; }
|
|
|
|
|
|
- /* FILTER BAR */
|
|
|
.filter-bar { background: var(--card); padding: 15px; border-radius: 12px; border: 1px solid var(--border); margin-bottom: 25px; display: flex; align-items: center; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
|
|
|
select { padding: 8px 15px; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
|
|
|
|
|
|
- /* GRID & CARDS */
|
|
|
- .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
|
|
|
- .item { background: var(--card); border-radius: 12px; text-align: center; border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden; }
|
|
|
- .item img { width: 100%; height: 180px; object-fit: cover; background: #2a2a2a; border-bottom: 1px solid var(--border); }
|
|
|
+ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 25px; }
|
|
|
+ .item { background: var(--card); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(0,0,0,0.1); overflow: hidden; display: flex; flex-direction: column; }
|
|
|
+ .item img { width: 100%; height: 200px; object-fit: cover; background: #2a2a2a; border-bottom: 1px solid var(--border); }
|
|
|
|
|
|
- .stats { padding: 15px; }
|
|
|
+ .stats { padding: 15px; flex-grow: 1; }
|
|
|
+ .game-title { font-weight: bold; display: block; margin-bottom: 15px; font-size: 1.2em; color: var(--accent); text-align: center; }
|
|
|
|
|
|
- /* TYPOGRAFIE & REIHENFOLGE */
|
|
|
- .game-title { font-weight: bold; display: block; margin-bottom: 12px; font-size: 1.1em; min-height: 2.2em; display: flex; align-items: center; justify-content: center; color: var(--text); line-height: 1.2; }
|
|
|
+ .team-section-label { font-size: 0.7em; color: var(--muted); display: block; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; border-bottom: 1px solid var(--border); padding-bottom: 5px; }
|
|
|
+
|
|
|
+ .team-entry { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px dashed var(--border); }
|
|
|
+ .team-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
|
|
|
|
|
|
- .team-info-container { margin-bottom: 15px; }
|
|
|
- .team-label { font-size: 0.7em; color: var(--muted); display: block; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; }
|
|
|
- .team-name-text { font-size: 0.9em; color: var(--text); opacity: 0.9; font-weight: 500; }
|
|
|
+ .team-name-text { font-size: 0.95em; font-weight: bold; display: block; margin-bottom: 5px; }
|
|
|
|
|
|
- /* ERGEBNIS ZEILE */
|
|
|
- .result-row { display: flex; justify-content: space-around; font-size: 0.85em; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 5px; }
|
|
|
- .res-item span { display: block; opacity: 0.6; font-size: 0.75em; margin-bottom: 2px; }
|
|
|
- .res-item b { color: var(--accent); font-size: 1em; }
|
|
|
+ .result-row { display: flex; justify-content: space-between; font-size: 0.8em; }
|
|
|
+ .res-item span { opacity: 0.6; margin-right: 4px; }
|
|
|
+ .res-item b { color: var(--accent); }
|
|
|
+ .res-only-solved { font-size: 0.8em; color: var(--muted); font-style: italic; }
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
header { flex-direction: column; gap: 15px; text-align: center; }
|
|
|
@@ -104,28 +117,35 @@ $playedGames = $stmt->fetchAll();
|
|
|
</div>
|
|
|
|
|
|
<div class="grid">
|
|
|
- <?php foreach ($playedGames as $game): ?>
|
|
|
+ <?php foreach ($groupedGames as $title => $data): ?>
|
|
|
<div class="item">
|
|
|
- <img src="<?= htmlspecialchars($game['bild_url']) ?>" onerror="this.src='https://via.placeholder.com/240x180?text=EXIT+Spiel'">
|
|
|
+ <img src="<?= htmlspecialchars($data['bild_url']) ?>" onerror="this.src='https://via.placeholder.com/300x200?text=EXIT+Spiel'">
|
|
|
<div class="stats">
|
|
|
- <span class="game-title"><?= htmlspecialchars($game['titel']) ?></span>
|
|
|
+ <span class="game-title"><?= htmlspecialchars($title) ?></span>
|
|
|
|
|
|
- <div class="team-info-container">
|
|
|
- <span class="team-label">Gelöst von</span>
|
|
|
- <span class="team-name-text"><?= htmlspecialchars($game['team_name']) ?></span>
|
|
|
- </div>
|
|
|
+ <span class="team-section-label">Gelöst von</span>
|
|
|
|
|
|
- <div class="result-row">
|
|
|
- <div class="res-item"><span>Zeit</span><b><?= $game['zeit'] ?> Min.</b></div>
|
|
|
- <div class="res-item"><span>Hilfe</span><b><?= $game['hilfe'] ?></b></div>
|
|
|
- <div class="res-item"><span>Sterne</span><b>⭐ <?= $game['sterne'] ?></b></div>
|
|
|
- </div>
|
|
|
+ <?php foreach ($data['teams'] as $team): ?>
|
|
|
+ <div class="team-entry">
|
|
|
+ <span class="team-name-text">👥 <?= htmlspecialchars($team['name']) ?></span>
|
|
|
+
|
|
|
+ <?php if ($team['zeit'] === 0 && $team['hilfe'] === 0 && $team['sterne'] === 0): ?>
|
|
|
+ <div class="res-only-solved">✅ Erfolgreich gelöst</div>
|
|
|
+ <?php else: ?>
|
|
|
+ <div class="result-row">
|
|
|
+ <div class="res-item"><span>Zeit:</span><b><?= $team['zeit'] ?> Min.</b></div>
|
|
|
+ <div class="res-item"><span>Hilfe:</span><b><?= $team['hilfe'] ?></b></div>
|
|
|
+ <div class="res-item"><b>⭐ <?= $team['sterne'] ?></b></div>
|
|
|
+ </div>
|
|
|
+ <?php endif; ?>
|
|
|
+ </div>
|
|
|
+ <?php endforeach; ?>
|
|
|
</div>
|
|
|
</div>
|
|
|
<?php endforeach; ?>
|
|
|
</div>
|
|
|
|
|
|
- <?php if (empty($playedGames)): ?>
|
|
|
+ <?php if (empty($groupedGames)): ?>
|
|
|
<p style="text-align: center; margin-top: 50px; opacity: 0.5;">Hier wurden noch keine Abenteuer gelöst.</p>
|
|
|
<?php endif; ?>
|
|
|
</div>
|
|
|
@@ -137,7 +157,6 @@ $playedGames = $stmt->fetchAll();
|
|
|
localStorage.setItem('theme', isDark ? 'dark' : 'light');
|
|
|
themeIcon.innerText = isDark ? '☀️' : '🌙';
|
|
|
}
|
|
|
-
|
|
|
if (localStorage.getItem('theme') === 'dark') {
|
|
|
themeIcon.innerText = '☀️';
|
|
|
}
|
erdo