prepare socket comms & html templates
This commit is contained in:
@@ -13,6 +13,7 @@ login_manager = LoginManager()
|
||||
def load_user(user_id: int | str) -> Optional["User"]:
|
||||
return User.get(user_id)
|
||||
|
||||
|
||||
def create_app():
|
||||
app = Flask(__name__)
|
||||
app.config['SECRET_KEY'] = 'dev' #! ofc not intended for prod use
|
||||
@@ -23,6 +24,7 @@ def create_app():
|
||||
|
||||
sIO.init_app(app)
|
||||
login_manager.init_app(app)
|
||||
login_manager.login_view = "auth.login" # type: ignore
|
||||
|
||||
from .routes.auth import auth_bp
|
||||
from .routes.main import main_bp
|
||||
|
||||
@@ -4,8 +4,6 @@ from app.routes.friends import _friends_page_data
|
||||
|
||||
main_bp = Blueprint("main", __name__)
|
||||
|
||||
|
||||
|
||||
@main_bp.route("/", methods=["GET", "POST"])
|
||||
def index():
|
||||
if current_user.is_authenticated:
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -50,5 +50,6 @@
|
||||
</main>
|
||||
</div>
|
||||
<script src="{{ url_for('static', filename='js/presence.js') }}"></script>
|
||||
{% block extra_scripts %}{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+137
-15
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user