Several templates had their own <script> blocks instead of going through webpack like game1.js already does. Extracted the waiting page, lobby page, and admin session-log tab scripts into their own files under assets/, imported from the main app.js entry. Since app.js is already loaded on every page, each module just reads its own data-* attributes and no-ops if its target element isn't present on the current page - same pattern game1.js already uses. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
100 lines
4.8 KiB
Twig
100 lines
4.8 KiB
Twig
{% extends 'layout/site.html.twig' %}
|
|
|
|
{% block title %}Waiting for players - {{ session.game.name }}{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<h3 class="card-title mb-0">Waiting for all players to be ready</h3>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4>{{ session.game.name }}</h4>
|
|
<p>Welcome to the game! Please wait for all players to join and signal they are ready to start.</p>
|
|
|
|
<div class="game-info">
|
|
Please keep the following things in mind:
|
|
<ul>
|
|
<li>This game is best played in full screen mode. For windows, press F11. For Mac, press Cmd+Ctrl+F.</li>
|
|
<li>There is no need to reload the page. There is even a chance this could break the game.</li>
|
|
<li>If your internet connection is lost, you can get back in the game after internet has been fixed.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="alert alert-info">
|
|
<strong>Game Information:</strong>
|
|
<ul class="mb-0">
|
|
<li>Number of players: {{ session.game.numberOfPlayers }}</li>
|
|
<li>Current players: {{ session.players|length }} / {{ session.game.numberOfPlayers }}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<h5>Players status:</h5>
|
|
<ul class="list-group">
|
|
{% for player in session.players %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
{{ player.user.username }}
|
|
{% set playerReady = false %}
|
|
{% set settingName = 'ReadyAtForPlayer' ~ player.screen %}
|
|
{% for setting in session.settings %}
|
|
{% if setting.name.value == settingName and setting.player == player %}
|
|
{% set playerReady = true %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if playerReady %}
|
|
<span class="badge bg-success">Ready</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">Not ready</span>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
{% if not app.user.verified %}
|
|
<div class="alert alert-warning">
|
|
You must verify your email address before you can mark yourself as ready.
|
|
Check your inbox for the confirmation link, or <a href="{{ path('app_verify_resend_email') }}">request a new one</a>.
|
|
</div>
|
|
{% endif %}
|
|
<form method="post" class="mt-4">
|
|
<input type="hidden" name="toggle_ready" value="0">
|
|
<div class="form-check form-switch mb-3">
|
|
<input class="form-check-input" type="checkbox" id="toggle_ready" name="toggle_ready" value="1" onchange="this.form.submit()" {{ isReady ? 'checked' : '' }} {{ not app.user.verified ? 'disabled' : '' }}>
|
|
<label class="form-check-label" for="toggle_ready">
|
|
<strong>I am ready to start!</strong>
|
|
</label>
|
|
</div>
|
|
<p class="text-muted small">
|
|
As soon as everyone has checked this box, the game starts automatically for everyone.
|
|
{% if isReady %}
|
|
Your ready status expires in <span id="ready-countdown">1:00</span> if not everyone else is ready by then.
|
|
{% endif %}
|
|
</p>
|
|
</form>
|
|
|
|
<div class="mt-3">
|
|
<a href="{{ path('game_dashboard') }}" class="btn btn-outline-secondary">Back to Dashboard</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="expire-ready-form" method="post" style="display:none">
|
|
<input type="hidden" name="expire_ready" value="1">
|
|
</form>
|
|
|
|
<div id="game-waiting-config"
|
|
data-mercure-public-url="{{ mercure_public_url|e('html_attr') }}"
|
|
data-topic="/game/hub/{{ session.id|e('html_attr') }}"
|
|
data-ready-at="{{ readyAt|e('html_attr') }}"
|
|
style="display:none">
|
|
</div>
|
|
{% endblock %}
|