Save finished games and add history views

2026-03-03 19:05:54 +01:00
parent 7887986a5a
commit d1b432f8aa
11 changed files with 919 additions and 33 deletions
@@ -0,0 +1,100 @@
+{% extends "base_app.html" %} {% set active_page = 'games' %} {% block title
+%}Game {{ game.id }}{% endblock %} {% block content %}
+<section class="games-page">
+  <div class="games-header">
+    <div>
+      <h1>{{ current_user.username }} vs {{ game.opponent_username }}</h1>
+      <p class="muted">
+        {{ game.time_mode or "Untimed" }} - {{ game.termination_detail or
+        game.termination or "finished" }} - {{ game.ended_at or game.started_at
+        or "Unknown date" }}
+      </p>
+    </div>
+    <div class="cta-row games-header-actions">
+      <a href="{{ url_for('main.games_history') }}" class="btn btn-secondary"
+        >Back to games</a
+      >
+      <a href="{{ url_for('main.play') }}" class="btn btn-primary"
+        >Play again</a
+      >
+    </div>
+  </div>
+
+  <section class="game-detail-layout">
+    <article class="panel">
+      <div class="game-summary">
+        <div class="game-summary-copy">
+          <p class="game-summary-label">Result</p>
+          <h2 class="game-summary-title">{{ game.result }}</h2>
+        </div>
+        <span class="result-badge result-{{ game.result }}"
+          >{{ game.result }}</span
+        >
+      </div>
+      <div class="game-summary-meta">
+        <div class="game-meta-row">
+          <span class="game-meta-key">You</span>
+          <span class="game-meta-value"
+            >{{ current_user.username }} ({{ game.my_color }})</span
+          >
+        </div>
+        <div class="game-meta-row">
+          <span class="game-meta-key">Opponent</span>
+          <span class="game-meta-value"
+            >{{ game.opponent_username }} ({{ game.opponent_color }})</span
+          >
+        </div>
+        <div class="game-meta-row">
+          <span class="game-meta-key">Moves</span>
+          <span class="game-meta-value">{{ game.move_count }}</span>
+        </div>
+      </div>
+
+      <div class="history-board" aria-label="Final board position">
+        {% for row in board_rows %} {% for square in row %}
+        <div
+          class="history-square history-square-{{ square.shade }}"
+          title="{{ square.square }}"
+        >
+          {% if square.piece_image %}
+          <img
+            src="{{ url_for('static', filename='board_pieces/' ~ square.piece_image) }}"
+            alt=""
+          />
+          {% endif %}
+        </div>
+        {% endfor %} {% endfor %}
+      </div>
+      <p class="muted">Final position</p>
+    </article>
+
+    <article class="panel">
+      <h2>Moves</h2>
+      {% if move_pairs %}
+      <div class="move-list-wrap">
+        <table class="move-table">
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>White</th>
+              <th>Black</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for pair in move_pairs %}
+            <tr>
+              <td>{{ pair.move_no }}.</td>
+              <td>{{ pair.white }}</td>
+              <td>{{ pair.black }}</td>
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+      {% else %}
+      <p class="muted">No moves were recorded for this game.</p>
+      {% endif %}
+    </article>
+  </section>
+</section>
+{% endblock %}