Save finished games and add history views

app/templates/base_app.html

@@ -33,6 +33,11 @@
               class="{{ 'active' if active_page == 'friends' else '' }}"
               >Friends</a
             >
+            <a
+              href="{{ url_for('main.games_history') }}"
+              class="{{ 'active' if active_page == 'games' else '' }}"
+              >Games</a
+            >
           </nav>
           <div class="profile-pill">{{ current_user.username }}</div>
         </div>

app/templates/game_detail.html

@@ -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 %}

app/templates/games.html

@@ -0,0 +1,49 @@
+{% extends "base_app.html" %} {% set active_page = 'games' %} {% block title
+%}Games{% endblock %} {% block content %}
+<section class="games-page">
+  <div class="games-header">
+    <div>
+      <h1>Past games</h1>
+    </div>
+    <a href="{{ url_for('main.play') }}" class="btn btn-primary">New game</a>
+  </div>
+
+  <article class="panel">
+    {% if games %}
+    <div class="games-list">
+      {% for game in games %}
+      <a
+        class="game-card"
+        href="{{ url_for('main.game_detail', game_id=game.id) }}"
+      >
+        <div class="game-card-main">
+          <div>
+            <p class="game-card-label">Opponent</p>
+            <p class="game-card-title">{{ game.opponent_username }}</p>
+          </div>
+          <span class="result-badge result-{{ game.result }}"
+            >{{ game.result }}</span
+          >
+        </div>
+        <div class="game-card-meta">
+          <span>You played {{ game.my_color }}</span>
+          <span>{{ game.time_mode or "Untimed" }}</span>
+          <span>{{ game.move_count }} moves</span>
+          <span
+            >{{ game.termination_detail or game.termination or "finished"
+            }}</span
+          >
+          <span>{{ game.ended_at or game.started_at or "Unknown date" }}</span>
+        </div>
+      </a>
+      {% endfor %}
+    </div>
+    {% else %}
+    <div class="empty-state">
+      <h2>No saved games yet</h2>
+      <p class="muted">Finished matches will appear here automatically.</p>
+    </div>
+    {% endif %}
+  </article>
+</section>
+{% endblock %}

app/templates/home.html

@@ -6,5 +6,8 @@
   <a href="{{ url_for('main.friends') }}" class="btn btn-secondary"
     >Open friends</a
   >
+  <a href="{{ url_for('main.games_history') }}" class="btn btn-secondary"
+    >Past games</a
+  >
 </div>
 {% endblock %}