Escapepage/templates/game/lobby.html.twig

{% extends 'layout/site.html.twig' %}

{% set isCreated = session.status.value == 'created' %}
{% set isFinished = session.status.value in ['won', 'lost'] %}

{% block title %}{{ isCreated ? 'Waiting for players' : 'Post-game chat' }} - {{ session.game.name }}{% endblock %}

{% block body %}
<div class="row justify-content-center">
    <div class="col-md-8">
        {% if isCreated %}
            <div class="card shadow-sm mb-4">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">Waiting for more players to join</h3>
                </div>
                <div class="card-body">
                    <h4>{{ session.game.name }}</h4>
                    <p>Share the invite code with your friends. Feel free to chat below while you wait &mdash; no need to reload the page.</p>

                    <div class="alert alert-info">
                        <strong>Players joined:</strong> {{ session.players|length }} / {{ session.game.numberOfPlayers }}
                    </div>

                    <ul class="list-group mb-3">
                        {% for sessionPlayer in session.players %}
                            <li class="list-group-item">{{ sessionPlayer.user.username }}</li>
                        {% endfor %}
                    </ul>

                    <div class="alert alert-secondary">
                        <strong>New here?</strong> Try the <a href="{{ path('game_pregame', {session: session.id}) }}" target="_blank" rel="noopener">command line tutorial</a>.
                        It's a small tutorial that gives you the information you'll need for the game to run.
                        You can go through it as many times as you like &mdash; just make sure you feel at least a little confident
                        with the commands it covers before you start the game.
                    </div>

                    {% if session.players|length >= session.game.numberOfPlayers %}
                        <form method="post" action="{{ path('game_dashboard') }}" class="mb-3">
                            <input type="hidden" name="_token" value="{{ csrf_token('start_session_' ~ session.id) }}">
                            <input type="hidden" name="session_id" value="{{ session.id }}">
                            <button type="submit" name="start_session" class="btn btn-success">Start Session</button>
                        </form>
                    {% endif %}

                    <a href="{{ path('game_dashboard') }}" class="btn btn-outline-secondary btn-sm">Back to Dashboard</a>
                </div>
            </div>
        {% elseif isFinished %}
            <div class="card shadow-sm mb-4">
                <div class="card-header {{ session.status.value == 'won' ? 'bg-success' : 'bg-secondary' }} text-white">
                    <h3 class="card-title mb-0">{{ session.status.value == 'won' ? 'You won!' : 'Game over' }}</h3>
                </div>
                <div class="card-body">
                    <h4>{{ session.game.name }}</h4>
                    <p>The game has ended, but the chat is still open for a little while &mdash; feel free to keep talking.</p>

                    <a href="{{ path(session.status.value == 'won' ? 'game_won' : 'game_lost', {session: session.id}) }}" class="btn btn-primary btn-sm">View results</a>
                    <a href="{{ path('game_dashboard') }}" class="btn btn-outline-secondary btn-sm">Back to Dashboard</a>
                </div>
            </div>
        {% endif %}

        <div class="card shadow-sm">
            <div class="card-header">
                <h5 class="mb-0">Lobby chat</h5>
            </div>
            <div class="card-body">
                <div id="lobby-chat-log" class="mb-3 d-flex flex-column gap-2" style="max-height: 320px; overflow-y: auto;">
                    {% for message in messages %}
                        <div class="lobby-message">
                            <strong>{{ message.player.user.username }}</strong>
                            <span class="text-muted small">{{ message.createdAt|date('H:i') }}</span>
                            <div>{{ message.content }}</div>
                        </div>
                    {% else %}
                        <p class="text-muted mb-0" id="lobby-chat-empty">No messages yet. Say hi!</p>
                    {% endfor %}
                </div>

                {% if player %}
                    <form method="post" class="d-flex gap-2">
                        <input type="hidden" name="_token" value="{{ csrf_token('send_message_' ~ session.id) }}">
                        <input type="text" name="content" class="form-control" placeholder="Type a message&hellip;" maxlength="500" required autocomplete="off">
                        <button type="submit" name="send_message" class="btn btn-primary">Send</button>
                    </form>
                {% else %}
                    <p class="text-muted mb-0">Only players in this session can chat.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div id="game-lobby-config"
     data-mercure-public-url="{{ mercure_public_url|e('html_attr') }}"
     data-topic="/game/hub/{{ session.id|e('html_attr') }}"
     style="display:none">
</div>
{% endblock %}