2 Commits

Author SHA1 Message Date
Frank
28ee969c29 Message on reload to hopefully stop the user. 2026-01-06 20:20:33 +01:00
Frank
7230520551 Layout done, probably need rework later on 2026-01-06 20:20:33 +01:00
11 changed files with 169 additions and 340 deletions

View File

@@ -60,6 +60,15 @@ document.addEventListener('DOMContentLoaded', async () => {
// Look for config injected by Twig in the page
const cfgEl = document.getElementById('mercure-config');
// Prevent/warn on page reload
window.addEventListener('beforeunload', (event) => {
// Standard way to trigger the browser's confirmation dialog
event.preventDefault();
// Included for compatibility with older browsers
event.returnValue = '';
});
if (!cfgEl) {
console.warn('[Mercure][game1] #mercure-config element not found on page');
return;
@@ -69,7 +78,6 @@ document.addEventListener('DOMContentLoaded', async () => {
const topic = cfgEl.dataset.topic;
const apiPingUrl = cfgEl.dataset.apiPingUrl;
const apiEchoUrl = cfgEl.dataset.apiEchoUrl;
const userId = cfgEl.dataset.userId;
if (mercurePublicUrl && topic) {
subscribeToMercure(mercurePublicUrl, topic);
@@ -89,7 +97,7 @@ document.addEventListener('DOMContentLoaded', async () => {
if (apiEchoUrl) {
const echo = await fetchJson(apiEchoUrl, {
method: 'POST',
body: { message: 'from game1.js', ts: new Date().toISOString(), user: userId },
body: { message: 'from game1.js', ts: new Date().toISOString() },
});
console.log('[API][game1] echo →', echo);
} else {
@@ -98,4 +106,67 @@ document.addEventListener('DOMContentLoaded', async () => {
} catch (e) {
console.error('[API][game1] Request failed:', e);
}
// Add messages to message-container
const messageContainer = document.getElementById('message-container');
if (messageContainer) {
let messages = [
['System initializing...', 500],
['Connection established.', 200],
['Welcome agent to the mainframe.', 1000],
['Scanning...', 3000],
['Virus detected.', 500],
['Starting Mainframe help modus...', 2000],
['Help modus activated.', 500],
['Blocking virus activated', 0]
];
let currentMessageIndex = 0;
const printNextMessage = () => {
if (currentMessageIndex < messages.length) {
const msg = messages[currentMessageIndex];
const msgEl = document.createElement('div');
msgEl.className = 'message';
msgEl.textContent = msg[0];
msgEl.style.color = '#F00';
msgEl.style.marginBottom = '10px';
messageContainer.appendChild(msgEl);
currentMessageIndex++;
setTimeout(printNextMessage, msg[1]);
} else {
// After it has printed a set of messages, it has to start a timer of 2 seconds
console.log('[Game1] All messages printed. Starting 2s timer to expand message-container height...');
setTimeout(() => {
messageContainer.style.height = '400vh';
const inputField = document.getElementById('input-message');
inputField.disabled = false;
// Add event listener for Enter key
inputField.addEventListener('keypress', async (e) => {
if (e.key === 'Enter') {
const message = inputField.value.trim();
if (message && apiEchoUrl) {
inputField.value = '';
try {
const response = await fetchJson(apiEchoUrl, {
method: 'POST',
body: { message, ts: new Date().toISOString() },
});
console.log('[API][game1] message sent →', response);
} catch (err) {
console.error('[API][game1] Failed to send message:', err);
}
}
}
});
console.log('[Game1] message-container height changed to 400vh and input enabled');
}, 2000);
}
};
printNextMessage();
}
});

View File

@@ -1,17 +1,63 @@
/* Styles specific to Game1 */
/* page-level indicator to confirm CSS is loaded */
body.game1-page {
/* subtle background tint so you can visually confirm on /game */
background-color: #f9fbff;
/* Custom scrollbar for WebKit browsers */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 1px;
}
/* example component style */
.game1-banner {
padding: 1rem 1.25rem;
border: 1px solid #cfe2ff;
background: #e9f2ff;
color: #0b5ed7;
border-radius: 8px;
margin: 1rem 0;
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
background: #000;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
background: #F00;
}
/* Standard properties for Firefox */
body {
background-color: #000;
min-height: 100vh;
font-family: monospace;
margin: 0;
scrollbar-width: thin;
scrollbar-color: #F00 #000;
}
div#game-timer {
position: fixed;
top: 20px;
left: 20px;
color: #F00;
font-size: 28px;
z-index: 100;
}
div#message-container {
padding: 20px;
padding-top: 60px; /* Space for fixed timer */
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: calc(100vh - 100px); /* Fill most of the viewport initially */
box-sizing: border-box;
font-size: 20px;
}
div#input {
padding: 20px;
}
input#input-message {
width: 100%;
padding: 10px;
background: #000;
border: 1px solid #F00;
color: #F00;
font-size: 18px;
box-sizing: border-box;
font-family: monospace;
}

View File

@@ -3,72 +3,17 @@ declare(strict_types=1);
namespace App\Game\Controller;
use App\Game\Entity\Session;
use App\Game\Repository\GameRepository;
use App\Game\Repository\SessionRepository;
use App\Game\Service\GameDashboardService;
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Bundle\SecurityBundle\Security;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Security\Http\Attribute\IsGranted;
use Symfony\Component\ExpressionLanguage\Expression;
final class GameController extends AbstractController
{
#[Route(path: '', name: 'game_dashboard', methods: ['GET', 'POST'])]
#[IsGranted(new Expression("is_granted('ROLE_PLAYER') or is_granted('ROLE_ADMIN')"))]
public function dashboard(
Request $request,
GameRepository $gameRepository,
SessionRepository $sessionRepository,
GameDashboardService $dashboardService,
Security $security
): Response {
$user = $security->getUser();
$isAdmin = $this->isGranted('ROLE_ADMIN');
if ($request->isMethod('POST')) {
if ($request->request->has('create_session')) {
$gameId = $request->request->get('game_id');
$game = $gameRepository->find($gameId);
if ($game) {
if ($dashboardService->createSession($game, $user, $isAdmin)) {
$this->addFlash('success', 'New session created!');
}
}
} elseif ($request->request->has('create_invite')) {
$sessionId = $request->request->get('session_id');
$session = $sessionRepository->find($sessionId);
if (!$session) {
$this->addFlash('error', 'Session not found.');
return $this->redirectToRoute('game_dashboard');
}
$inviteCode = $dashboardService->generateInviteCode($session, $user, $isAdmin);
if ($inviteCode) {
$this->addFlash('success', 'Invite link created: ' . $inviteCode);
}
}
return $this->redirectToRoute('game_dashboard');
}
return $this->render('game/dashboard.html.twig', [
'sessions' => $dashboardService->getSessionsForUser($user),
'availableGames' => $dashboardService->getAvailableGames($isAdmin),
#[Route(path: '', name: 'game')]
public function index(): Response
{
return $this->render('game/index.html.twig', [
'user_id' => $this->getUser()?->getId(),
]);
}
#[Route(path: '/{session}', name: 'game')]
#[IsGranted(new Expression("is_granted('ROLE_PLAYER') or is_granted('ROLE_ADMIN')"))]
#[IsGranted('SESSION_VIEW', subject: 'session')]
public function index(
Session $session): Response
{
return $this->render('game/index.html.twig', ['session' => $session]);
}
}

View File

@@ -10,5 +10,4 @@ enum SessionSettingType: string
case RIGHTS_FOR_PLAYER1 = 'RightsForPlayer1';
case RIGHTS_FOR_PLAYER2 = 'RightsForPlayer2';
case RIGHTS_FOR_PLAYER3 = 'RightsForPlayer3';
case INVITE_CODE = 'InviteCode';
}

View File

@@ -1,48 +0,0 @@
<?php
namespace App\Game\Security\Voter;
use App\Game\Entity\Session;
use App\Tech\Entity\User;
use Symfony\Bundle\SecurityBundle\Security;
use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
use Symfony\Component\Security\Core\Authorization\Voter\Voter;
class SessionVoter extends Voter
{
public const VIEW = 'SESSION_VIEW';
public function __construct(
private readonly Security $security,
) {
}
protected function supports(string $attribute, mixed $subject): bool
{
return $attribute === self::VIEW && $subject instanceof Session;
}
protected function voteOnAttribute(string $attribute, mixed $subject, TokenInterface $token): bool
{
$user = $token->getUser();
if (!$user instanceof User) {
return false;
}
if ($this->security->isGranted('ROLE_ADMIN')) {
return true;
}
/** @var Session $session */
$session = $subject;
foreach ($session->getPlayers() as $player) {
if ($player->getUser() === $user) {
return true;
}
}
return false;
}
}

View File

@@ -1,116 +0,0 @@
<?php
declare(strict_types=1);
namespace App\Game\Service;
use App\Game\Entity\Game;
use App\Game\Entity\Player;
use App\Game\Entity\Session;
use App\Game\Entity\SessionSetting;
use App\Game\Enum\GameStatus;
use App\Game\Enum\SessionSettingType;
use App\Game\Enum\SessionStatus;
use App\Game\Repository\GameRepository;
use App\Game\Repository\SessionRepository;
use App\Tech\Entity\User;
use Doctrine\ORM\EntityManagerInterface;
use Symfony\Component\Security\Core\User\UserInterface;
final class GameDashboardService
{
public function __construct(
private readonly GameRepository $gameRepository,
private readonly SessionRepository $sessionRepository,
private readonly EntityManagerInterface $entityManager,
) {
}
/**
* @return Session[]
*/
public function getSessionsForUser(UserInterface $user): array
{
return $this->sessionRepository->createQueryBuilder('s')
->innerJoin('s.players', 'p')
->where('p.user = :user')
->setParameter('user', $user)
->getQuery()
->getResult();
}
/**
* @return Game[]
*/
public function getAvailableGames(bool $isAdmin): array
{
if ($isAdmin) {
return $this->gameRepository->findAll();
}
return $this->gameRepository->findBy(['status' => GameStatus::OPEN]);
}
public function createSession(Game $game, UserInterface $user, bool $isAdmin): ?Session
{
if ($game->getStatus() !== GameStatus::OPEN && !$isAdmin) {
return null;
}
if(!$user instanceof User)
return null;
$session = new Session();
$session->setGame($game);
$session->setStatus(SessionStatus::CREATED);
$session->setTimer(0);
$player = new Player();
$player->setUser($user);
$player->setSession($session);
$player->setScreen(1);
$this->entityManager->persist($session);
$this->entityManager->persist($player);
$this->entityManager->flush();
return $session;
}
public function generateInviteCode(Session $session, UserInterface $user, bool $isAdmin): ?string
{
// Security check: is user part of this session?
$isPlayer = false;
foreach ($session->getPlayers() as $player) {
if ($player->getUser() === $user) {
$isPlayer = true;
break;
}
}
if (!$isPlayer && !$isAdmin) {
return null;
}
$inviteCode = bin2hex(random_bytes(4));
$setting = null;
foreach ($session->getSettings() as $s) {
if ($s->getName() === SessionSettingType::INVITE_CODE) {
$setting = $s;
break;
}
}
if (!$setting) {
$setting = new SessionSetting();
$setting->setSession($session);
$setting->setName(SessionSettingType::INVITE_CODE);
}
$setting->setValue($inviteCode);
$this->entityManager->persist($setting);
$this->entityManager->flush();
return $inviteCode;
}
}

View File

@@ -31,8 +31,6 @@ class RegistrationController extends AbstractController
)
);
$user->setRoles(['ROLE_USER', 'ROLE_PLAYER']);
$entityManager->persist($user);
$entityManager->flush();

View File

@@ -14,7 +14,7 @@
<nav>
{% set pathinfo = app.request.pathinfo %}
<a href="/">{{ 'nav.home'|trans }}</a> |
<a href="{{ path('game_dashboard') }}">{{ 'nav.game'|trans }}</a> |
<a href="/game">{{ 'nav.game'|trans }}</a> |
{% if app.user %}
<a href="{{ path('app_logout') }}">Logout</a>
{% else %}

View File

@@ -1,74 +0,0 @@
{% extends 'base.html.twig' %}
{% block title %}Game Dashboard{% endblock %}
{% block body %}
<h1>Game Dashboard</h1>
<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>Your Sessions</h2>
{% if sessions is not empty %}
<table>
<thead>
<tr>
<th>ID</th>
<th>Game</th>
<th>Status</th>
<th>Created At</th>
<th>Invite Code</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for session in sessions %}
<tr>
<td>{{ session.id }}</td>
<td>{{ session.game.name }}</td>
<td>{{ session.status.value }}</td>
<td>{{ session.created|date('Y-m-d H:i') }}</td>
<td>
{% set inviteCode = '' %}
{% for setting in session.settings %}
{% if setting.name.value == 'InviteCode' %}
{% set inviteCode = setting.value %}
{% endif %}
{% endfor %}
{% if inviteCode %}
<code>{{ inviteCode }}</code>
{% else %}
<form method="post" style="display:inline;">
<input type="hidden" name="session_id" value="{{ session.id }}">
<button type="submit" name="create_invite">Generate Invite</button>
</form>
{% endif %}
</td>
<td>
<a href="{{ path('game', {session: session.id}) }}">Enter Game</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>You are not part of any sessions.</p>
{% endif %}
{% endblock %}

View File

@@ -1,33 +1,41 @@
{% extends 'base.html.twig' %}
{% block title %}{{ 'game.title'|trans({'%site%': ('site.name'|trans)}) }}{% endblock %}
<!DOCTYPE html>
<html lang="{{ app.request.locale|default(app.request.defaultLocale|default('en')) }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ 'game.title'|trans({'%site%': ('site.name'|trans)}) }}</title>
{# Include Game1-specific CSS in addition to the base app assets #}
{% block stylesheets %}
{{ parent() }}
{{ encore_entry_link_tags('app') }}
{{ encore_entry_link_tags('game1') }}
{% endblock %}
{% block body %}
<h1>{{ 'game.h1'|trans }}</h1>
<p>{{ 'game.description'|trans }}</p>
<div class="game1-banner">Game 1 assets are active. Enjoy the challenge!</div>
{# Hidden config element read by assets/game1.js #}
</head>
<body>
<div id="game-container">
<div id="mercure-config"
data-mercure-public-url="{{ mercure_public_url|e('html_attr') }}"
data-topic="{{ (mercure_topic_base ~ '/game/hub')|e('html_attr') }}"
data-api-ping-url="{{ path('game_api_ping')|e('html_attr') }}"
data-api-echo-url="{{ path('game_api_message')|e('html_attr') }}"
data-session-id="{{ session.id }}"
data-user-id="{{ user_id|e('html_attr') }}"
style="display:none">
</div>
<p><a href="{{ path('website_home') }}">{{ 'link.back_to_website'|trans }}</a></p>
{% endblock %}
<div id="game-timer">
00:30:00
</div>
<div id="message-container">
</div>
<div id="input">
<input type="text" disabled id="input-message">
</div>
</div>
</body>
{# Include Game1-specific JS in addition to the base app assets #}
{% block javascripts %}
{{ parent() }}
{{ encore_entry_script_tags('app') }}
{{ encore_entry_script_tags('game1') }}
{% endblock %}

View File

@@ -5,5 +5,5 @@
{% block body %}
<h1>{{ 'home.h1'|trans({'%site%': ('site.name'|trans)}) }}</h1>
<p>{{ 'home.description'|trans }}</p>
<p><a href="{{ path('game_dashboard') }}">{{ 'link.enter_game'|trans }}</a></p>
<p><a href="{{ path('game') }}">{{ 'link.enter_game'|trans }}</a></p>
{% endblock %}