tototomate123/cau-praktikum
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

prepare socket comms & html templates

Browse Source
This commit is contained in:
tototomate123
2026-02-27 12:08:25 +01:00
parent 01105d5281
commit 561223453b
5 changed files with 668 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/play.html
+137 -15
View File
@@ -1,25 +1,147 @@
{% extends "base_app.html" %} {% set active_page = 'play' %} {% block title
%}Play{% endblock %} {% block content %}
<section class="queue-layout">
<article class="panel">
<section class="play-page">
<article class="panel" id="setup-panel">
<h1>Play</h1>
<h2>Game settings</h2>
<h3>Choose a time setup</h3>
<div class="chip-row">
<button class="chip" type="button">1 + 0</button>
<button class="chip" type="button">3 + 2</button>
<button class="chip active" type="button">10 + 0</button>
<button class="chip" type="button">15 + 10</button>
<p class="muted">Create a code game or join one from a friend.</p>
<h3>Time control</h3>
<div class="chip-row" id="time-mode-row">
<button class="chip" type="button" data-time-mode="1+0">1 + 0</button>
<button class="chip" type="button" data-time-mode="3+2">3 + 2</button>
<button class="chip active" type="button" data-time-mode="10+0">
10 + 0
</button>
<button class="chip" type="button" data-time-mode="15+10">15 + 10</button>
</div>
<h3>You play as</h3>
<div class="chip-row">
<button class="chip" type="button">white</button>
<button class="chip" type="button">black</button>
<button class="chip active" type="button">random</button>
<h3>Play as</h3>
<div class="chip-row" id="play-as-row">
<button class="chip" type="button" data-play-as="w">White</button>
<button class="chip" type="button" data-play-as="b">Black</button>
<button class="chip active" type="button" data-play-as="r">Random</button>
</div>
<div class="cta-row">
<button class="btn btn-secondary" type="button">Create game code</button>
<button class="btn btn-primary" type="button" id="create-code-btn">
Create game code
</button>
</div>
<h3>Join by code</h3>
<div class="join-row">
<input
type="text"
id="join-code-input"
maxlength="6"
placeholder="ABC123"
/>
<button class="btn btn-secondary" type="button" id="join-code-btn">
Join
</button>
</div>
</article>
<article class="panel hidden" id="waiting-panel">
<h2>Lobby</h2>
<p class="muted">Share this code with your friend.</p>
<div class="code-badge" id="code-value">------</div>
<div class="waiting-meta">
<p>
<strong>Opponent:</strong> <span id="opponent-value">Waiting...</span>
</p>
<p>
<strong>Status:</strong>
<span id="lobby-status">Waiting for opponent to join...</span>
</p>
</div>
<div class="cta-row">
<button class="btn btn-secondary" type="button" id="copy-code-btn">
Copy code
</button>
<button class="btn btn-primary" type="button" id="ready-btn">
Ready
</button>
</div>
</article>
<section class="game-stage hidden" id="game-stage">
<article class="panel board-panel">
<div class="player-strip" id="opponent-strip">
<div class="player-main">
<span class="player-name" id="opponent-name-strip">Opponent</span>
<span class="player-time" id="opponent-time-value">--:--</span>
</div>
<div class="player-meta">
<span class="capture-strip" id="opponent-captured-strip"></span>
<span class="material-pill" id="opponent-material-strip">=</span>
</div>
</div>
<canvas
id="chess-canvas"
width="640"
height="640"
aria-label="Chess board"
></canvas>
<div class="player-strip" id="my-strip">
<div class="player-main">
<span class="player-name" id="my-name-strip">You</span>
<span class="player-time" id="my-time-value">--:--</span>
</div>
<div class="player-meta">
<span class="capture-strip" id="my-captured-strip"></span>
<span class="material-pill" id="my-material-strip">=</span>
</div>
</div>
</article>
<article class="panel game-sidebar">
<h2>Match</h2>
<p><strong>You are:</strong> <span id="color-value">-</span></p>
<p><strong>Turn:</strong> <span id="turn-value">-</span></p>
<p class="muted" id="play-status">Game not started.</p>
<h3>Moves</h3>
<div class="move-list-wrap">
<table class="move-table">
<thead>
<tr>
<th>#</th>
<th>White</th>
<th>Black</th>
</tr>
</thead>
<tbody id="move-list-body"></tbody>
</table>
</div>
<div class="cta-row">
<button class="btn btn-secondary" type="button" id="offer-draw-btn">
Offer draw
</button>
<button class="btn btn-secondary" type="button" id="resign-btn">
Resign
</button>
</div>
</article>
</section>
</section>
<div class="play-modal hidden" id="play-modal" role="dialog" aria-modal="true">
<div class="play-modal-card">
<h3 id="play-modal-title">Notice</h3>
<p id="play-modal-text" class="muted"></p>
<div class="cta-row" id="play-modal-actions"></div>
</div>
</div>
{% endblock %} {% block extra_scripts %}
<script src="{{ url_for('static', filename='socket.io/socket.io.js') }}"></script>
<script
type="module"
src="{{ url_for('static', filename='js/play.js') }}"
></script>
{% endblock %}