101 lines
3.1 KiB
HTML
101 lines
3.1 KiB
HTML
{% 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 %}
|