Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
846cfbc44a | ||
|
|
207346d571 | ||
|
|
dfa75719d0 | ||
|
|
444f54b6c6 |
@@ -0,0 +1,27 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const buttons = document.querySelectorAll('[data-tab-target]');
|
||||
if (!buttons.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activate = (id) => {
|
||||
document.querySelectorAll('[id^="player-"]').forEach(el => el.style.display = 'none');
|
||||
const target = document.getElementById(id);
|
||||
if (target) {
|
||||
target.style.display = 'block';
|
||||
}
|
||||
|
||||
buttons.forEach(btn => {
|
||||
const active = btn.dataset.tabTarget === id;
|
||||
btn.style.background = active ? '#fff' : '#f8fafc';
|
||||
btn.style.color = active ? '#1e40af' : '#64748b';
|
||||
btn.style.fontWeight = active ? '600' : '400';
|
||||
btn.style.borderColor = active ? '#3b82f6' : '#e2e8f0';
|
||||
btn.style.borderBottom = active ? '1px solid #fff' : '1px solid #e2e8f0';
|
||||
});
|
||||
};
|
||||
|
||||
buttons.forEach(btn => {
|
||||
btn.addEventListener('click', () => activate(btn.dataset.tabTarget));
|
||||
});
|
||||
});
|
||||
@@ -5,3 +5,6 @@ import './styles/app.scss';
|
||||
import 'bootstrap/js/dist/collapse';
|
||||
import 'bootstrap/js/dist/alert';
|
||||
import 'bootstrap/js/dist/dropdown';
|
||||
import './game-waiting';
|
||||
import './game-lobby';
|
||||
import './admin-session-tabs';
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const config = document.getElementById('game-lobby-config');
|
||||
if (!config) {
|
||||
return;
|
||||
}
|
||||
|
||||
const publicUrl = config.dataset.mercurePublicUrl;
|
||||
const topic = config.dataset.topic;
|
||||
const chatLog = document.getElementById('lobby-chat-log');
|
||||
|
||||
function appendLobbyMessage(username, content, createdAt) {
|
||||
if (!chatLog) {
|
||||
return;
|
||||
}
|
||||
const emptyNotice = document.getElementById('lobby-chat-empty');
|
||||
if (emptyNotice) {
|
||||
emptyNotice.remove();
|
||||
}
|
||||
|
||||
const time = createdAt
|
||||
? new Date(createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
: '';
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'lobby-message';
|
||||
|
||||
const author = document.createElement('strong');
|
||||
author.textContent = username;
|
||||
|
||||
const timestamp = document.createElement('span');
|
||||
timestamp.className = 'text-muted small';
|
||||
timestamp.textContent = ' ' + time;
|
||||
|
||||
const body = document.createElement('div');
|
||||
body.textContent = content;
|
||||
|
||||
wrapper.appendChild(author);
|
||||
wrapper.appendChild(timestamp);
|
||||
wrapper.appendChild(body);
|
||||
chatLog.appendChild(wrapper);
|
||||
chatLog.scrollTop = chatLog.scrollHeight;
|
||||
}
|
||||
|
||||
if (publicUrl && topic) {
|
||||
const url = new URL(publicUrl);
|
||||
url.searchParams.append('topic', topic);
|
||||
|
||||
const eventSource = new EventSource(url);
|
||||
eventSource.onmessage = event => {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'lobby_message') {
|
||||
appendLobbyMessage(data.username, data.content, data.createdAt);
|
||||
} else if (data.type === 'player_joined' || data.type === 'session_started') {
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (chatLog) {
|
||||
chatLog.scrollTop = chatLog.scrollHeight;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,68 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const config = document.getElementById('game-waiting-config');
|
||||
if (!config) {
|
||||
return;
|
||||
}
|
||||
|
||||
const publicUrl = config.dataset.mercurePublicUrl;
|
||||
const topic = config.dataset.topic;
|
||||
const readyAt = config.dataset.readyAt;
|
||||
|
||||
let reloading = false;
|
||||
const reloadOnce = (eventSource) => {
|
||||
if (reloading) {
|
||||
return;
|
||||
}
|
||||
reloading = true;
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
if (publicUrl && topic) {
|
||||
const url = new URL(publicUrl);
|
||||
url.searchParams.append('topic', topic);
|
||||
|
||||
const eventSource = new EventSource(url);
|
||||
eventSource.onmessage = event => {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'all_ready' || data.type === 'player_ready') {
|
||||
reloadOnce(eventSource);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Our own ready status expires 60s after we set it - proactively tell the
|
||||
// server as close to that deadline as possible, so the other players find
|
||||
// out live instead of only whenever someone else's request happens to
|
||||
// trigger the lazy check.
|
||||
if (readyAt) {
|
||||
const timeoutMs = 61000; // slightly more than the server-side 60s
|
||||
const readyAtMs = readyAt * 1000;
|
||||
const countdownEl = document.getElementById('ready-countdown');
|
||||
const expireForm = document.getElementById('expire-ready-form');
|
||||
|
||||
const updateCountdown = () => {
|
||||
const remaining = Math.max(0, Math.ceil((readyAtMs + timeoutMs - Date.now()) / 1000));
|
||||
if (countdownEl) {
|
||||
const m = Math.floor(remaining / 60);
|
||||
const s = remaining % 60;
|
||||
countdownEl.textContent = m + ':' + s.toString().padStart(2, '0');
|
||||
}
|
||||
return remaining;
|
||||
};
|
||||
|
||||
const remaining = updateCountdown();
|
||||
if (remaining <= 0) {
|
||||
expireForm?.submit();
|
||||
} else {
|
||||
const countdownInterval = setInterval(() => {
|
||||
if (updateCountdown() <= 0) {
|
||||
clearInterval(countdownInterval);
|
||||
expireForm?.submit();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace DoctrineMigrations;
|
||||
|
||||
use Doctrine\DBAL\Schema\Schema;
|
||||
use Doctrine\Migrations\AbstractMigration;
|
||||
|
||||
final class Version20260810120000 extends AbstractMigration
|
||||
{
|
||||
public function getDescription(): string
|
||||
{
|
||||
return 'Add lobby_message table for pre-game lobby chat';
|
||||
}
|
||||
|
||||
public function up(Schema $schema): void
|
||||
{
|
||||
$this->addSql('CREATE TABLE lobby_message (id INT AUTO_INCREMENT NOT NULL, session_id INT NOT NULL, player_id INT NOT NULL, content VARCHAR(500) NOT NULL, created_at DATETIME NOT NULL, INDEX IDX_LOBBY_MESSAGE_SESSION (session_id), INDEX IDX_LOBBY_MESSAGE_PLAYER (player_id), PRIMARY KEY(id)) DEFAULT CHARACTER SET utf8mb4 COLLATE `utf8mb4_unicode_ci` ENGINE = InnoDB');
|
||||
$this->addSql('ALTER TABLE lobby_message ADD CONSTRAINT FK_LOBBY_MESSAGE_SESSION FOREIGN KEY (session_id) REFERENCES session (id)');
|
||||
$this->addSql('ALTER TABLE lobby_message ADD CONSTRAINT FK_LOBBY_MESSAGE_PLAYER FOREIGN KEY (player_id) REFERENCES player (id)');
|
||||
}
|
||||
|
||||
public function down(Schema $schema): void
|
||||
{
|
||||
$this->addSql('ALTER TABLE lobby_message DROP FOREIGN KEY FK_LOBBY_MESSAGE_SESSION');
|
||||
$this->addSql('ALTER TABLE lobby_message DROP FOREIGN KEY FK_LOBBY_MESSAGE_PLAYER');
|
||||
$this->addSql('DROP TABLE lobby_message');
|
||||
}
|
||||
}
|
||||
@@ -7,6 +7,7 @@ namespace App\Game\Controller;
|
||||
use App\Game\Entity\Session;
|
||||
use App\Game\Enum\SessionStatus;
|
||||
use App\Game\Repository\GameRepository;
|
||||
use App\Game\Repository\LobbyMessageRepository;
|
||||
use App\Game\Repository\SessionRepository;
|
||||
use App\Tech\Repository\UserRepository;
|
||||
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||
@@ -49,7 +50,7 @@ final class GameAdminController extends AbstractController
|
||||
}
|
||||
|
||||
#[Route('/session/{session}', name: 'game_admin_view_session', methods: ['GET'])]
|
||||
public function viewSession(Session $session): Response
|
||||
public function viewSession(Session $session, LobbyMessageRepository $lobbyMessageRepository): Response
|
||||
{
|
||||
$playersLogs = [];
|
||||
foreach ($session->getPlayers() as $player) {
|
||||
@@ -65,6 +66,7 @@ final class GameAdminController extends AbstractController
|
||||
return $this->render('game/admin/sessions/view.html.twig', [
|
||||
'session' => $session,
|
||||
'playersLogs' => $playersLogs,
|
||||
'lobbyMessages' => $lobbyMessageRepository->findForSession($session),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,12 +141,21 @@ final class GameController extends AbstractController
|
||||
return $this->redirectToRoute('game', ['session' => $session->getId()]);
|
||||
}
|
||||
|
||||
if ($request->isMethod('POST') && $request->request->has('send_message')) {
|
||||
$dashboardService->postLobbyMessage($session, $user, (string) $request->request->get('content', ''));
|
||||
return $this->redirectToRoute('game', ['session' => $session->getId()]);
|
||||
}
|
||||
|
||||
// Lazily pick up readiness changes from other players since our last request
|
||||
$dashboardService->checkAllPlayersReady($session);
|
||||
|
||||
if ($session->getStatus() === SessionStatus::CREATED) {
|
||||
$this->addFlash('info', 'This session is still waiting for more players to join.');
|
||||
return $this->redirectToRoute('game_dashboard');
|
||||
return $this->render('game/lobby.html.twig', [
|
||||
'session' => $session,
|
||||
'messages' => $dashboardService->getLobbyMessages($session),
|
||||
'player' => $player,
|
||||
'mercure_public_url' => $this->mercurePublicUrl,
|
||||
]);
|
||||
}
|
||||
|
||||
if ($session->getStatus() === SessionStatus::WON) {
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<?php
|
||||
|
||||
namespace App\Game\Entity;
|
||||
|
||||
use App\Game\Repository\LobbyMessageRepository;
|
||||
use Doctrine\ORM\Mapping as ORM;
|
||||
|
||||
#[ORM\Entity(repositoryClass: LobbyMessageRepository::class)]
|
||||
#[ORM\Table(name: 'lobby_message')]
|
||||
class LobbyMessage
|
||||
{
|
||||
#[ORM\Id]
|
||||
#[ORM\GeneratedValue]
|
||||
#[ORM\Column]
|
||||
private ?int $id = null;
|
||||
|
||||
#[ORM\ManyToOne(targetEntity: Session::class)]
|
||||
#[ORM\JoinColumn(nullable: false)]
|
||||
private ?Session $session = null;
|
||||
|
||||
#[ORM\ManyToOne(targetEntity: Player::class)]
|
||||
#[ORM\JoinColumn(nullable: false)]
|
||||
private ?Player $player = null;
|
||||
|
||||
#[ORM\Column(length: 500)]
|
||||
private ?string $content = null;
|
||||
|
||||
#[ORM\Column(type: 'datetime')]
|
||||
private ?\DateTimeInterface $createdAt = null;
|
||||
|
||||
public function __construct()
|
||||
{
|
||||
$this->createdAt = new \DateTime();
|
||||
}
|
||||
|
||||
public function getId(): ?int
|
||||
{
|
||||
return $this->id;
|
||||
}
|
||||
|
||||
public function getSession(): ?Session
|
||||
{
|
||||
return $this->session;
|
||||
}
|
||||
|
||||
public function setSession(?Session $session): static
|
||||
{
|
||||
$this->session = $session;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getPlayer(): ?Player
|
||||
{
|
||||
return $this->player;
|
||||
}
|
||||
|
||||
public function setPlayer(?Player $player): static
|
||||
{
|
||||
$this->player = $player;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getContent(): ?string
|
||||
{
|
||||
return $this->content;
|
||||
}
|
||||
|
||||
public function setContent(string $content): static
|
||||
{
|
||||
$this->content = $content;
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function getCreatedAt(): ?\DateTimeInterface
|
||||
{
|
||||
return $this->createdAt;
|
||||
}
|
||||
|
||||
public function setCreatedAt(\DateTimeInterface $createdAt): static
|
||||
{
|
||||
$this->createdAt = $createdAt;
|
||||
|
||||
return $this;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<?php
|
||||
|
||||
namespace App\Game\Repository;
|
||||
|
||||
use App\Game\Entity\LobbyMessage;
|
||||
use App\Game\Entity\Session;
|
||||
use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository;
|
||||
use Doctrine\Persistence\ManagerRegistry;
|
||||
|
||||
/**
|
||||
* @extends ServiceEntityRepository<LobbyMessage>
|
||||
*/
|
||||
class LobbyMessageRepository extends ServiceEntityRepository
|
||||
{
|
||||
public function __construct(ManagerRegistry $registry)
|
||||
{
|
||||
parent::__construct($registry, LobbyMessage::class);
|
||||
}
|
||||
|
||||
/**
|
||||
* @return LobbyMessage[]
|
||||
*/
|
||||
public function findForSession(Session $session, int $limit = 100): array
|
||||
{
|
||||
return $this->createQueryBuilder('m')
|
||||
->andWhere('m.session = :session')
|
||||
->setParameter('session', $session)
|
||||
->orderBy('m.createdAt', 'ASC')
|
||||
->setMaxResults($limit)
|
||||
->getQuery()
|
||||
->getResult();
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,7 @@ declare(strict_types=1);
|
||||
namespace App\Game\Service;
|
||||
|
||||
use App\Game\Entity\Game;
|
||||
use App\Game\Entity\LobbyMessage;
|
||||
use App\Game\Entity\Player;
|
||||
use App\Game\Entity\Session;
|
||||
use App\Game\Entity\SessionSetting;
|
||||
@@ -11,6 +12,7 @@ use App\Game\Enum\GameStatus;
|
||||
use App\Game\Enum\SessionSettingType;
|
||||
use App\Game\Enum\SessionStatus;
|
||||
use App\Game\Repository\GameRepository;
|
||||
use App\Game\Repository\LobbyMessageRepository;
|
||||
use App\Game\Repository\SessionRepository;
|
||||
use App\Tech\Entity\User;
|
||||
use Doctrine\ORM\EntityManagerInterface;
|
||||
@@ -21,10 +23,12 @@ use Symfony\Component\Mercure\Update;
|
||||
final class GameDashboardService
|
||||
{
|
||||
private const READY_TIMEOUT_SECONDS = 60;
|
||||
private const LOBBY_MESSAGE_MAX_LENGTH = 500;
|
||||
|
||||
public function __construct(
|
||||
private readonly GameRepository $gameRepository,
|
||||
private readonly SessionRepository $sessionRepository,
|
||||
private readonly LobbyMessageRepository $lobbyMessageRepository,
|
||||
private readonly EntityManagerInterface $entityManager,
|
||||
private readonly HubInterface $hub,
|
||||
) {
|
||||
@@ -122,6 +126,8 @@ final class GameDashboardService
|
||||
|
||||
$this->entityManager->flush();
|
||||
|
||||
$this->publishLobbyEvent($session, 'player_joined');
|
||||
|
||||
if (count($session->getPlayers()) === $session->getGame()->getNumberOfPlayers()) {
|
||||
$this->startSession($session);
|
||||
}
|
||||
@@ -283,9 +289,60 @@ final class GameDashboardService
|
||||
$this->entityManager->persist($session);
|
||||
$this->entityManager->flush();
|
||||
|
||||
$this->publishLobbyEvent($session, 'session_started');
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @return LobbyMessage[]
|
||||
*/
|
||||
public function getLobbyMessages(Session $session): array
|
||||
{
|
||||
return $this->lobbyMessageRepository->findForSession($session);
|
||||
}
|
||||
|
||||
public function postLobbyMessage(Session $session, User $user, string $content): ?LobbyMessage
|
||||
{
|
||||
if ($session->getStatus() !== SessionStatus::CREATED) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$player = null;
|
||||
foreach ($session->getPlayers() as $sessionPlayer) {
|
||||
if ($sessionPlayer->getUser() === $user) {
|
||||
$player = $sessionPlayer;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!$player) {
|
||||
return null;
|
||||
}
|
||||
|
||||
$content = trim($content);
|
||||
if ($content === '') {
|
||||
return null;
|
||||
}
|
||||
$content = mb_substr($content, 0, self::LOBBY_MESSAGE_MAX_LENGTH);
|
||||
|
||||
$message = new LobbyMessage();
|
||||
$message->setSession($session);
|
||||
$message->setPlayer($player);
|
||||
$message->setContent($content);
|
||||
|
||||
$this->entityManager->persist($message);
|
||||
$this->entityManager->flush();
|
||||
|
||||
$this->publishLobbyEvent($session, 'lobby_message', [
|
||||
'username' => $user->getUserIdentifier(),
|
||||
'content' => $content,
|
||||
'createdAt' => $message->getCreatedAt()->format(DATE_ATOM),
|
||||
]);
|
||||
|
||||
return $message;
|
||||
}
|
||||
|
||||
public function toggleReady(Session $session, User $user): bool
|
||||
{
|
||||
if ($session->getStatus() !== SessionStatus::READY) {
|
||||
@@ -393,10 +450,15 @@ final class GameDashboardService
|
||||
}
|
||||
|
||||
private function publishPlayerReady(Session $session, int $screen, bool $ready): void
|
||||
{
|
||||
$this->publishLobbyEvent($session, 'player_ready', ['player' => $screen, 'ready' => $ready]);
|
||||
}
|
||||
|
||||
private function publishLobbyEvent(Session $session, string $type, array $extra = []): void
|
||||
{
|
||||
try {
|
||||
$topic = '/game/hub/' . $session->getId();
|
||||
$this->hub->publish(new Update($topic, json_encode(['type' => 'player_ready', 'player' => $screen, 'ready' => $ready])));
|
||||
$this->hub->publish(new Update($topic, json_encode(array_merge(['type' => $type], $extra))));
|
||||
} catch (\Exception $e) {
|
||||
// Mercure might be down, but we don't want to crash the game
|
||||
}
|
||||
|
||||
@@ -1,49 +0,0 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}View Session Logs - {{ session.id }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<h1>Session: {{ session.game.name }} (#{{ session.id }})</h1>
|
||||
<p><a href="{{ path('game_admin_dashboard') }}">Back to Dashboard</a></p>
|
||||
|
||||
<div class="tabs">
|
||||
<ul style="display: flex; list-style: none; padding: 0; border-bottom: 1px solid #ccc;">
|
||||
{% for playerLog in playersLogs %}
|
||||
<li style="margin-right: 10px;">
|
||||
<button
|
||||
onclick="openTab(event, 'player-{{ loop.index }}')"
|
||||
class="tablinks {{ loop.first ? 'active' : '' }}"
|
||||
style="padding: 10px; cursor: pointer; border: 1px solid #ccc; border-bottom: none; background: {{ loop.first ? '#eee' : '#fff' }};"
|
||||
>
|
||||
{{ playerLog.username }}
|
||||
</button>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% for playerLog in playersLogs %}
|
||||
<div id="player-{{ loop.index }}" class="tabcontent" style="display: {{ loop.first ? 'block' : 'none' }}; border: 1px solid #ccc; border-top: none; padding: 20px;">
|
||||
<h3>Logs for {{ playerLog.username }}</h3>
|
||||
<pre style="background: #f4f4f4; padding: 15px; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;">{{ playerLog.logs ?: 'No logs found for this player.' }}</pre>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<script>
|
||||
function openTab(evt, playerName) {
|
||||
var i, tabcontent, tablinks;
|
||||
tabcontent = document.getElementsByClassName("tabcontent");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].style.display = "none";
|
||||
}
|
||||
tablinks = document.getElementsByClassName("tablinks");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
||||
tablinks[i].style.background = "#fff";
|
||||
}
|
||||
document.getElementById(playerName).style.display = "block";
|
||||
evt.currentTarget.className += " active";
|
||||
evt.currentTarget.style.background = "#eee";
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -10,6 +10,24 @@
|
||||
<h1 style="margin: 0 0 0.25rem; font-size: 1.5rem; color: #0f172a;">{{ session.game.name }} — Session #{{ session.id }}</h1>
|
||||
<p style="margin: 0 0 1.5rem; color: #64748b; font-size: 0.9rem;">{{ session.status.value }} · {{ session.players|length }} player(s) · Created {{ session.created|date('Y-m-d H:i') }}</p>
|
||||
|
||||
<div style="background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.07); padding: 1.25rem; margin-bottom: 1.5rem;">
|
||||
<h2 style="margin: 0 0 1rem; font-size: 1.1rem; color: #0f172a;">Pregame lobby chat</h2>
|
||||
|
||||
{% if lobbyMessages is empty %}
|
||||
<p style="margin: 0; color: #94a3b8;">No lobby chat messages for this session.</p>
|
||||
{% else %}
|
||||
<div style="max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem;">
|
||||
{% for message in lobbyMessages %}
|
||||
<div style="font-size: 0.9rem;">
|
||||
<strong style="color: #0f172a;">{{ message.player.user.username }}</strong>
|
||||
<span style="color: #94a3b8; font-size: 0.8rem;">{{ message.createdAt|date('Y-m-d H:i') }}</span>
|
||||
<div style="color: #334155;">{{ message.content }}</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if playersLogs is empty %}
|
||||
<div style="background: #fff; border-radius: 8px; padding: 2rem; text-align: center; color: #94a3b8; box-shadow: 0 1px 3px rgba(0,0,0,.07);">
|
||||
No players in this session.
|
||||
@@ -19,7 +37,7 @@
|
||||
<div style="display: flex; gap: 0; margin-bottom: 0; border-bottom: 1px solid #e2e8f0; overflow-x: auto; -webkit-overflow-scrolling: touch;">
|
||||
{% for playerLog in playersLogs %}
|
||||
<button
|
||||
onclick="openTab('player-{{ loop.index }}')"
|
||||
data-tab-target="player-{{ loop.index }}"
|
||||
id="tab-{{ loop.index }}"
|
||||
style="
|
||||
flex-shrink: 0;
|
||||
@@ -65,21 +83,4 @@
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
|
||||
<script>
|
||||
function openTab(id) {
|
||||
document.querySelectorAll('[id^="player-"]').forEach(el => el.style.display = 'none');
|
||||
document.getElementById(id).style.display = 'block';
|
||||
|
||||
const idx = id.split('-')[1];
|
||||
document.querySelectorAll('[id^="tab-"]').forEach((btn, i) => {
|
||||
const active = String(i + 1) === idx;
|
||||
btn.style.background = active ? '#fff' : '#f8fafc';
|
||||
btn.style.color = active ? '#1e40af' : '#64748b';
|
||||
btn.style.fontWeight = active ? '600' : '400';
|
||||
btn.style.borderColor = active ? '#3b82f6' : '#e2e8f0';
|
||||
btn.style.borderBottom = active ? '1px solid #fff' : '1px solid #e2e8f0';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
{% 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 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 — 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>
|
||||
|
||||
{% if session.players|length >= session.game.numberOfPlayers %}
|
||||
<form method="post" action="{{ path('game_dashboard') }}" class="mb-3">
|
||||
<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>
|
||||
|
||||
<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="text" name="content" class="form-control" placeholder="Type a message…" 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 %}
|
||||
@@ -90,74 +90,10 @@
|
||||
<input type="hidden" name="expire_ready" value="1">
|
||||
</form>
|
||||
|
||||
<div id="mercure-config"
|
||||
<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>
|
||||
|
||||
<script>
|
||||
const config = document.getElementById('mercure-config');
|
||||
const publicUrl = config.dataset.mercurePublicUrl;
|
||||
const topic = config.dataset.topic;
|
||||
const readyAt = config.dataset.readyAt;
|
||||
|
||||
let reloading = false;
|
||||
const reloadOnce = (eventSource) => {
|
||||
if (reloading) {
|
||||
return;
|
||||
}
|
||||
reloading = true;
|
||||
if (eventSource) {
|
||||
eventSource.close();
|
||||
}
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
if (publicUrl && topic) {
|
||||
const url = new URL(publicUrl);
|
||||
url.searchParams.append('topic', topic);
|
||||
|
||||
const eventSource = new EventSource(url);
|
||||
eventSource.onmessage = event => {
|
||||
const data = JSON.parse(event.data);
|
||||
if (data.type === 'all_ready' || data.type === 'player_ready') {
|
||||
reloadOnce(eventSource);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Our own ready status expires 60s after we set it - proactively tell the
|
||||
// server as close to that deadline as possible, so the other players find
|
||||
// out live instead of only whenever someone else's request happens to
|
||||
// trigger the lazy check.
|
||||
if (readyAt) {
|
||||
const timeoutMs = 61000; // slightly more than the server-side 60s
|
||||
const readyAtMs = readyAt * 1000;
|
||||
const countdownEl = document.getElementById('ready-countdown');
|
||||
|
||||
const updateCountdown = () => {
|
||||
const remaining = Math.max(0, Math.ceil((readyAtMs + timeoutMs - Date.now()) / 1000));
|
||||
if (countdownEl) {
|
||||
const m = Math.floor(remaining / 60);
|
||||
const s = remaining % 60;
|
||||
countdownEl.textContent = m + ':' + s.toString().padStart(2, '0');
|
||||
}
|
||||
return remaining;
|
||||
};
|
||||
|
||||
const remaining = updateCountdown();
|
||||
if (remaining <= 0) {
|
||||
document.getElementById('expire-ready-form').submit();
|
||||
} else {
|
||||
const countdownInterval = setInterval(() => {
|
||||
if (updateCountdown() <= 0) {
|
||||
clearInterval(countdownInterval);
|
||||
document.getElementById('expire-ready-form').submit();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -10,6 +10,7 @@ use App\Game\Entity\SessionSetting;
|
||||
use App\Game\Enum\GameStatus;
|
||||
use App\Game\Enum\SessionStatus;
|
||||
use App\Game\Enum\SessionSettingType;
|
||||
use App\Game\Repository\LobbyMessageRepository;
|
||||
use App\Game\Service\GameDashboardService;
|
||||
use App\Tech\Entity\User;
|
||||
use Doctrine\ORM\EntityManagerInterface;
|
||||
@@ -23,6 +24,7 @@ class GameDashboardServiceTest extends TestCase
|
||||
private $entityManager;
|
||||
private $gameRepository;
|
||||
private $sessionRepository;
|
||||
private $lobbyMessageRepository;
|
||||
private $hub;
|
||||
private $service;
|
||||
|
||||
@@ -31,14 +33,15 @@ class GameDashboardServiceTest extends TestCase
|
||||
$this->entityManager = $this->createMock(EntityManagerInterface::class);
|
||||
$this->gameRepository = $this->createMock(GameRepository::class);
|
||||
$this->sessionRepository = $this->createMock(SessionRepository::class);
|
||||
$this->lobbyMessageRepository = $this->createMock(LobbyMessageRepository::class);
|
||||
$this->hub = $this->createMock(HubInterface::class);
|
||||
|
||||
$this->service = new GameDashboardService(
|
||||
$this->gameRepository,
|
||||
$this->sessionRepository,
|
||||
$this->lobbyMessageRepository,
|
||||
$this->entityManager,
|
||||
$this->hub,
|
||||
'http://localhost/topic'
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user