Complete layout overhaul
This commit is contained in:
Frank
@@ -1,42 +1,57 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
{% extends 'layout/site.html.twig' %}
|
||||
|
||||
{% block title %}Game Dashboard{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<h1>Game Dashboard</h1>
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1 class="mb-0">Game Dashboard</h1>
|
||||
{% if is_granted('ROLE_ADMIN') %}
|
||||
<a href="{{ path('game_admin_dashboard') }}" class="btn btn-outline-secondary">Go to Game Admin Dashboard</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if is_granted('ROLE_ADMIN') %}
|
||||
<p><a href="{{ path('game_admin_dashboard') }}">Go to Game Admin Dashboard</a></p>
|
||||
{% endif %}
|
||||
<div class="row g-4 mb-4">
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-secondary text-white">Create New Session</div>
|
||||
<div class="card-body">
|
||||
{% if availableGames is not empty %}
|
||||
<form method="post">
|
||||
<select name="game_id" class="form-select mb-3">
|
||||
{% for game in availableGames %}
|
||||
<option value="{{ game.id }}">
|
||||
{{ game.name }} ({{ game.numberOfPlayers }} players)
|
||||
{% if is_granted('ROLE_ADMIN') %}
|
||||
[{{ game.status.value }}]
|
||||
{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" name="create_session" class="btn btn-primary">Create Session</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<p class="text-muted mb-0">No games available to start.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-secondary text-white">Join Session</div>
|
||||
<div class="card-body">
|
||||
<form method="post" class="d-flex gap-2">
|
||||
<input type="text" name="invite_code" class="form-control" placeholder="Enter Invite Code" required>
|
||||
<button type="submit" name="join_session" class="btn btn-primary text-nowrap">Join Session</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Create New Session</h2>
|
||||
{% if availableGames is not empty %}
|
||||
<form method="post">
|
||||
<select name="game_id">
|
||||
{% for game in availableGames %}
|
||||
<option value="{{ game.id }}">
|
||||
{{ game.name }} ({{ game.numberOfPlayers }} players)
|
||||
{% if is_granted('ROLE_ADMIN') %}
|
||||
[{{ game.status.value }}]
|
||||
{% endif %}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button type="submit" name="create_session">Create Session</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<p>No games available to start.</p>
|
||||
{% endif %}
|
||||
|
||||
<h2>Join Session</h2>
|
||||
<form method="post">
|
||||
<input type="text" name="invite_code" placeholder="Enter Invite Code" required>
|
||||
<button type="submit" name="join_session">Join Session</button>
|
||||
</form>
|
||||
|
||||
<h2>Your Sessions</h2>
|
||||
<h2 class="h4">Your Sessions</h2>
|
||||
{% if sessions is not empty %}
|
||||
<table>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped align-middle">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
@@ -52,7 +67,7 @@
|
||||
<tr>
|
||||
<td>{{ session.id }}</td>
|
||||
<td>{{ session.game.name }}</td>
|
||||
<td>{{ session.status.value }}</td>
|
||||
<td><span class="badge bg-info text-dark">{{ session.status.value }}</span></td>
|
||||
<td>{{ session.created|date('Y-m-d H:i') }}</td>
|
||||
<td>
|
||||
{% set inviteCode = '' %}
|
||||
@@ -65,25 +80,25 @@
|
||||
{% if inviteCode %}
|
||||
<code>{{ inviteCode }}</code>
|
||||
{% else %}
|
||||
<form method="post" style="display:inline;">
|
||||
<form method="post" class="d-inline">
|
||||
<input type="hidden" name="session_id" value="{{ session.id }}">
|
||||
<button type="submit" name="create_invite">Generate Invite</button>
|
||||
<button type="submit" name="create_invite" class="btn btn-sm btn-outline-secondary">Generate Invite</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ path('game', {session: session.id}) }}">Enter Game</a>
|
||||
<a href="{{ path('game', {session: session.id}) }}" class="btn btn-sm btn-primary">Enter Game</a>
|
||||
{% if session.status.value == 'created' %}
|
||||
{% if session.players|length >= session.game.numberOfPlayers %}
|
||||
<form method="post" style="display:inline;">
|
||||
<form method="post" class="d-inline">
|
||||
<input type="hidden" name="session_id" value="{{ session.id }}">
|
||||
<button type="submit" name="start_session">Start Session</button>
|
||||
<button type="submit" name="start_session" class="btn btn-sm btn-success">Start Session</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% if session.timer == 0 %}
|
||||
<form method="post" style="display:inline;">
|
||||
<form method="post" class="d-inline">
|
||||
<input type="hidden" name="session_id" value="{{ session.id }}">
|
||||
<button type="submit" name="leave_session" onclick="return confirm('Are you sure you want to leave this session?')">Leave Session</button>
|
||||
<button type="submit" name="leave_session" class="btn btn-sm btn-outline-danger" onclick="return confirm('Are you sure you want to leave this session?')">Leave Session</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
@@ -92,7 +107,8 @@
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>You are not part of any sessions.</p>
|
||||
<p class="text-muted">You are not part of any sessions.</p>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
{% extends 'layout/site.html.twig' %}
|
||||
|
||||
{% block title %}Game Lost - {{ session.game.name }}{% endblock %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<style>
|
||||
body {
|
||||
.site-main {
|
||||
background-color: #1a1a1a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
@@ -46,10 +46,9 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container mt-5 mb-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-lg">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card shadow-lg">
|
||||
<div class="card-header bg-danger text-white">
|
||||
<h3 class="card-title mb-0">Game Over - Time's Up!</h3>
|
||||
</div>
|
||||
@@ -123,5 +122,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,77 +1,75 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
{% extends 'layout/site.html.twig' %}
|
||||
|
||||
{% block title %}Waiting for players - {{ session.game.name }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container mt-5">
|
||||
<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 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="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="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>
|
||||
<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 %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% 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>
|
||||
|
||||
<form method="post" class="mt-4">
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="toggle_ready" name="toggle_ready" onchange="this.form.submit()" {{ isReady ? 'checked' : '' }}>
|
||||
<label class="form-check-label" for="toggle_ready">
|
||||
<strong>I am ready to start!</strong>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-muted small">
|
||||
Note: If all players are not ready within 1 minute of you checking this, your status will be reset automatically.
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<hr>
|
||||
|
||||
<form method="post" class="mt-4">
|
||||
<div class="form-check form-switch mb-3">
|
||||
<input class="form-check-input" type="checkbox" id="toggle_ready" name="toggle_ready" onchange="this.form.submit()" {{ isReady ? 'checked' : '' }}>
|
||||
<label class="form-check-label" for="toggle_ready">
|
||||
<strong>I am ready to start!</strong>
|
||||
</label>
|
||||
</div>
|
||||
<p class="text-muted small">
|
||||
Note: If all players are not ready within 1 minute of you checking this, your status will be reset automatically.
|
||||
</p>
|
||||
</form>
|
||||
|
||||
<div class="mt-3">
|
||||
<a href="{{ path('game_dashboard') }}" class="btn btn-outline-secondary">Back to Dashboard</a>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<a href="{{ path('game_dashboard') }}" class="btn btn-outline-secondary">Back to Dashboard</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user