Add win/lose game-ending flow

Removing all 3 locked files while the timer is still running now marks
the session WON immediately (checked right after every successful rm)
and broadcasts a "game_finished" signal over Mercure so every
connected player gets redirected together, not just the one who
removed the last file. A new /won/{session} route + won.html.twig
mirrors the existing lost flow (victory narrative + the same feedback
form).

The existing timer-expiry path already set LOST but always redirected
to lostUrl regardless of actual status; it now picks won/lost based on
the status the server reports.

Also fixes a pre-existing bug on the lost page (and would-be bug on
the new won page): PlayerService::GetCurrentlyActiveAsPlayer() only
matches players in READY/PLAYING sessions, so by the time a session
has ended it always returned null there, silently breaking the
feedback form. Both pages now look the player up directly via
PlayerRepository instead.

Added a navigatingAway flag so the page's "confirm before leaving"
prompt doesn't block our own win/lose redirects.
This commit is contained in:
Frank
2026-07-11 21:41:16 +02:00
parent eee6c3a369
commit 3984a33282
5 changed files with 237 additions and 8 deletions
+1
View File
@@ -20,6 +20,7 @@
data-api-echo-url="{{ path('game_api_message')|e('html_attr') }}"
data-api-check-finished-url="{{ path('game_api_check_finished', {session: session.id})|e('html_attr') }}"
data-lost-url="{{ path('game_lost', {session: session.id})|e('html_attr') }}"
data-won-url="{{ path('game_won', {session: session.id})|e('html_attr') }}"
data-screen="{{ screen|e('html_attr') }}"
{% if lock %}
data-lock-locked-at="{{ lock.lockedAt }}"
+125
View File
@@ -0,0 +1,125 @@
{% extends 'layout/site.html.twig' %}
{% block title %}Game Won - {{ session.game.name }}{% endblock %}
{% block stylesheets %}
{{ parent() }}
<style>
.site-main {
background-color: #1a1a1a;
color: #e0e0e0;
}
.card {
background-color: #2d2d2d;
border-color: #444;
color: #e0e0e0;
}
.form-label {
font-weight: bold;
}
.story-container {
font-style: italic;
border-left: 4px solid #28a745;
padding-left: 20px;
margin-bottom: 30px;
}
.donation-section {
background-color: #333;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
text-align: center;
}
.form-range::-webkit-slider-runnable-track {
background-color: #444;
}
.form-range::-moz-range-track {
background-color: #444;
}
.form-range::-webkit-slider-thumb {
background-color: #28a745;
}
.form-range::-moz-range-thumb {
background-color: #28a745;
}
</style>
{% endblock %}
{% block body %}
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card shadow-lg">
<div class="card-header bg-success text-white">
<h3 class="card-title mb-0">Game Won - Virus Contained!</h3>
</div>
<div class="card-body">
<h4>{{ session.game.name }}</h4>
<hr>
<div class="story-container">
<p>
The last protected file dissolves from the directory listing, and for a moment the mainframe goes quiet.
Then the screens flood green: containment confirmed. The AI virus's grip on the server unravels file by file.
</p>
<p>
Agents Doyle, Vega and Lennox are safe. Their identities were never decoded. In the days that follow,
the agency quietly credits an anonymous team of specialists for the save - you.
</p>
</div>
<div class="donation-section">
<h5>Support the Developer</h5>
<p>If you enjoyed the experience, please consider a small donation to help me create more games.</p>
<a href="https://www.paypal.com/donate?hosted_button_id=X9X8KB6R6GMRU" target="_blank" class="btn btn-primary">
<i class="bi bi-paypal"></i> Donate via PayPal
</a>
</div>
<div class="feedback-form mt-4">
<h5>Feedback</h5>
<form method="post">
<div class="mb-3">
<label for="difficulty" class="form-label">How would you rate the difficulty? (<span id="difficulty-val">5</span>/10)</label>
<input type="range" class="form-range" min="1" max="10" step="1" id="difficulty" name="difficulty" value="5" oninput="document.getElementById('difficulty-val').innerText = this.value">
<div class="d-flex justify-content-between mt-1">
<small class="text-muted">Absolutely not</small>
-
<small class="text-muted">Absolutely</small>
</div>
</div>
<div class="mb-3">
<label for="entertaining" class="form-label">How entertaining was it? (<span id="entertaining-val">5</span>/10)</label>
<input type="range" class="form-range" min="1" max="10" step="1" id="entertaining" name="entertaining" value="5" oninput="document.getElementById('entertaining-val').innerText = this.value">
<div class="d-flex justify-content-between mt-1">
<small class="text-muted">Absolutely not</small>
-
<small class="text-muted">Absolutely</small>
</div>
</div>
<div class="mb-3">
<label for="theme" class="form-label">How was the theme? (<span id="theme-val">5</span>/10)</label>
<input type="range" class="form-range" min="1" max="10" step="1" id="theme" name="theme" value="5" oninput="document.getElementById('theme-val').innerText = this.value">
<div class="d-flex justify-content-between mt-1">
<small class="text-muted">Absolutely not</small>
-
<small class="text-muted">Absolutely</small>
</div>
</div>
<div class="mb-3">
<label for="feedback" class="form-label">Additional Feedback</label>
<textarea class="form-control" id="feedback" name="feedback" rows="4" placeholder="Tell us more about your experience..."></textarea>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-success">Submit Feedback & Return to Dashboard</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock %}