mirror of
https://github.com/ericasch6/scrum-poker-internal.git
synced 2026-10-13 14:12:08 +00:00
Implement instant websocket room updates
This commit is contained in:
@@ -0,0 +1,7 @@
|
||||
# Project Rules Index
|
||||
|
||||
Before planning or editing, find the row whose globs match the file's path and read that rule file.
|
||||
|
||||
| Applies to | Rule file |
|
||||
| --- | --- |
|
||||
| {app/Events/**,app/Services/Rooms/**,resources/js/composables/**} | .ai/rules/js-composables.md |
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
paths:
|
||||
- '{app/Events/**,app/Services/Rooms/**,resources/js/composables/**}'
|
||||
---
|
||||
|
||||
# Js Composables
|
||||
|
||||
## Never broadcast hidden room votes
|
||||
Room table updates are delivered as synchronous WebSocket state payloads without polling or Inertia reloads. Before a round is revealed, broadcast only has_voted and keep every player's vote null; actual vote values may enter the shared payload only after reveal. State-changing commands remain server-authorized HTTP requests.
|
||||
@@ -5,18 +5,22 @@ namespace App\Events;
|
||||
use App\Enums\RoomStateChange;
|
||||
use Illuminate\Broadcasting\Channel;
|
||||
use Illuminate\Broadcasting\InteractsWithSockets;
|
||||
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
|
||||
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
|
||||
use Illuminate\Foundation\Events\Dispatchable;
|
||||
use Illuminate\Queue\SerializesModels;
|
||||
|
||||
class RoomStateChanged implements ShouldBroadcast
|
||||
class RoomStateChanged implements ShouldBroadcastNow
|
||||
{
|
||||
use Dispatchable, InteractsWithSockets, SerializesModels;
|
||||
|
||||
/**
|
||||
* @param array<string, mixed>|null $state
|
||||
*/
|
||||
public function __construct(
|
||||
public readonly string $roomId,
|
||||
public readonly int $version,
|
||||
public readonly RoomStateChange $change,
|
||||
public readonly ?array $state = null,
|
||||
) {}
|
||||
|
||||
public function broadcastOn(): Channel
|
||||
@@ -30,13 +34,14 @@ class RoomStateChanged implements ShouldBroadcast
|
||||
}
|
||||
|
||||
/**
|
||||
* @return array{version: int, change: string}
|
||||
* @return array{version: int, change: string, state: array<string, mixed>|null}
|
||||
*/
|
||||
public function broadcastWith(): array
|
||||
{
|
||||
return [
|
||||
'version' => $this->version,
|
||||
'change' => $this->change->value,
|
||||
'state' => $this->state,
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,8 +5,8 @@ namespace App\Http\Controllers;
|
||||
use App\Models\Player;
|
||||
use App\Models\Room;
|
||||
use App\Services\Rooms\RoundService;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Http\Response;
|
||||
|
||||
class RoundController extends Controller
|
||||
{
|
||||
@@ -14,28 +14,28 @@ class RoundController extends Controller
|
||||
private readonly RoundService $rounds,
|
||||
) {}
|
||||
|
||||
public function reset(Request $request, Room $room): RedirectResponse
|
||||
public function reset(Request $request, Room $room): Response
|
||||
{
|
||||
$this->ensureModerator($request, $room);
|
||||
$this->rounds->reset($room);
|
||||
|
||||
return back();
|
||||
return response()->noContent();
|
||||
}
|
||||
|
||||
public function reveal(Request $request, Room $room): RedirectResponse
|
||||
public function reveal(Request $request, Room $room): Response
|
||||
{
|
||||
$this->ensureModerator($request, $room);
|
||||
$this->rounds->reveal($room);
|
||||
|
||||
return back();
|
||||
return response()->noContent();
|
||||
}
|
||||
|
||||
public function nextRound(Request $request, Room $room): RedirectResponse
|
||||
public function nextRound(Request $request, Room $room): Response
|
||||
{
|
||||
$this->ensureModerator($request, $room);
|
||||
$this->rounds->startNext($room);
|
||||
|
||||
return back();
|
||||
return response()->noContent();
|
||||
}
|
||||
|
||||
private function ensureModerator(Request $request, Room $room): void
|
||||
|
||||
@@ -6,7 +6,7 @@ use App\Http\Requests\SubmitVoteRequest;
|
||||
use App\Models\Player;
|
||||
use App\Models\Room;
|
||||
use App\Services\Rooms\VoteService;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
use Illuminate\Http\Response;
|
||||
|
||||
class VoteController extends Controller
|
||||
{
|
||||
@@ -17,7 +17,7 @@ class VoteController extends Controller
|
||||
public function store(
|
||||
SubmitVoteRequest $request,
|
||||
Room $room,
|
||||
): RedirectResponse {
|
||||
): Response {
|
||||
$player = $request->attributes->get('currentPlayer');
|
||||
|
||||
abort_unless(
|
||||
@@ -32,6 +32,6 @@ class VoteController extends Controller
|
||||
$request->validated('value'),
|
||||
);
|
||||
|
||||
return back();
|
||||
return response()->noContent();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,10 @@ use Illuminate\Support\Facades\DB;
|
||||
|
||||
class RoomLifecycleService
|
||||
{
|
||||
public function __construct(
|
||||
private readonly RoomRealtimeStateService $realtimeState,
|
||||
) {}
|
||||
|
||||
/**
|
||||
* @return array{player: Player, was_reopened: bool}
|
||||
*/
|
||||
@@ -49,6 +53,7 @@ class RoomLifecycleService
|
||||
$room->id,
|
||||
$stateVersion,
|
||||
RoomStateChange::RoomReopened,
|
||||
$this->realtimeState->for($room),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -12,6 +12,10 @@ use Illuminate\Validation\ValidationException;
|
||||
|
||||
class RoomParticipationService
|
||||
{
|
||||
public function __construct(
|
||||
private readonly RoomRealtimeStateService $realtimeState,
|
||||
) {}
|
||||
|
||||
public function findByJoinCode(string $joinCode): ?Room
|
||||
{
|
||||
if ($joinCode === '') {
|
||||
@@ -92,6 +96,7 @@ class RoomParticipationService
|
||||
$room->id,
|
||||
$room->state_version,
|
||||
RoomStateChange::PlayerJoined,
|
||||
$this->realtimeState->for($room),
|
||||
);
|
||||
|
||||
return [$room, $player];
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
<?php
|
||||
|
||||
namespace App\Services\Rooms;
|
||||
|
||||
use App\Models\Room;
|
||||
|
||||
class RoomRealtimeStateService
|
||||
{
|
||||
public function __construct(
|
||||
private readonly RoomStatisticsService $statistics,
|
||||
) {}
|
||||
|
||||
/**
|
||||
* @return array{
|
||||
* current_round: int,
|
||||
* revealed: bool,
|
||||
* state_version: int,
|
||||
* statistics: array{average: string|null, median: string|null}|null,
|
||||
* players: array<int, array{
|
||||
* id: int,
|
||||
* name: string,
|
||||
* is_moderator: bool,
|
||||
* is_owner: bool,
|
||||
* has_voted: bool,
|
||||
* vote: string|null
|
||||
* }>
|
||||
* }
|
||||
*/
|
||||
public function for(Room $room): array
|
||||
{
|
||||
$room->refresh();
|
||||
$room->load([
|
||||
'players' => fn ($query) => $query
|
||||
->active()
|
||||
->select(['id', 'room_id', 'user_id', 'name', 'is_moderator', 'created_at'])
|
||||
->orderByDesc('is_moderator')
|
||||
->orderBy('created_at'),
|
||||
'players.votes' => fn ($query) => $query
|
||||
->where('room_id', $room->id)
|
||||
->where('round', $room->current_round),
|
||||
]);
|
||||
|
||||
return [
|
||||
'current_round' => $room->current_round,
|
||||
'revealed' => $room->revealed_at !== null,
|
||||
'state_version' => $room->state_version,
|
||||
'statistics' => $this->statistics->currentRound($room),
|
||||
'players' => $room->players
|
||||
->map(function ($player) use ($room): array {
|
||||
$vote = $player->votes->first();
|
||||
|
||||
return [
|
||||
'id' => $player->id,
|
||||
'name' => $player->name,
|
||||
'is_moderator' => $player->is_moderator,
|
||||
'is_owner' => $player->user_id === $room->owner_id,
|
||||
'has_voted' => $vote !== null,
|
||||
'vote' => $room->revealed_at !== null ? $vote?->value : null,
|
||||
];
|
||||
})
|
||||
->all(),
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,10 @@ use Illuminate\Validation\ValidationException;
|
||||
|
||||
class RoundService
|
||||
{
|
||||
public function __construct(
|
||||
private readonly RoomRealtimeStateService $realtimeState,
|
||||
) {}
|
||||
|
||||
public function reset(Room $room): void
|
||||
{
|
||||
$stateVersion = DB::transaction(function () use ($room): int {
|
||||
@@ -38,6 +42,7 @@ class RoundService
|
||||
$room->id,
|
||||
$stateVersion,
|
||||
RoomStateChange::VotesReset,
|
||||
$this->realtimeState->for($room),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -69,6 +74,7 @@ class RoundService
|
||||
$room->id,
|
||||
$stateVersion,
|
||||
RoomStateChange::CardsRevealed,
|
||||
$this->realtimeState->for($room),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -101,6 +107,7 @@ class RoundService
|
||||
$room->id,
|
||||
$stateVersion,
|
||||
RoomStateChange::NextRound,
|
||||
$this->realtimeState->for($room),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -12,6 +12,10 @@ use Illuminate\Validation\ValidationException;
|
||||
|
||||
class VoteService
|
||||
{
|
||||
public function __construct(
|
||||
private readonly RoomRealtimeStateService $realtimeState,
|
||||
) {}
|
||||
|
||||
public function submit(Room $room, Player $player, string $value): void
|
||||
{
|
||||
$stateVersion = DB::transaction(function () use ($room, $player, $value): int {
|
||||
@@ -52,6 +56,7 @@ class VoteService
|
||||
$room->id,
|
||||
$stateVersion,
|
||||
RoomStateChange::VoteChanged,
|
||||
$this->realtimeState->for($room),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { useHttp } from '@inertiajs/vue3';
|
||||
import { Eye, RotateCcw, Trash2 } from '@lucide/vue';
|
||||
|
||||
import { nextRound, reset as resetRound, reveal } from '@/routes/room';
|
||||
@@ -7,26 +7,29 @@ import type { RoomModeratorControlsProps } from '@/types/room';
|
||||
|
||||
const props = defineProps<RoomModeratorControlsProps>();
|
||||
|
||||
const revealForm = useForm<{ room?: string }>({});
|
||||
const nextRoundForm = useForm<{ room?: string }>({});
|
||||
const resetForm = useForm<{ room?: string }>({});
|
||||
const revealRequest = useHttp<{ room?: string }>(
|
||||
() => reveal(props.roomId),
|
||||
{},
|
||||
);
|
||||
const nextRoundRequest = useHttp<{ room?: string }>(
|
||||
() => nextRound(props.roomId),
|
||||
{},
|
||||
);
|
||||
const resetRequest = useHttp<{ room?: string }>(
|
||||
() => resetRound(props.roomId),
|
||||
{},
|
||||
);
|
||||
|
||||
function revealCards(): void {
|
||||
revealForm.submit(reveal(props.roomId), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
void revealRequest.submit();
|
||||
}
|
||||
|
||||
function startNextRound(): void {
|
||||
nextRoundForm.submit(nextRound(props.roomId), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
void nextRoundRequest.submit();
|
||||
}
|
||||
|
||||
function resetVotes(): void {
|
||||
resetForm.submit(resetRound(props.roomId), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
void resetRequest.submit();
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -35,7 +38,7 @@ function resetVotes(): void {
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-xl border border-slate-600 bg-slate-800 px-4 py-2.5 font-semibold text-slate-200 transition hover:bg-slate-700 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
:disabled="resetForm.processing || !hasVotes"
|
||||
:disabled="resetRequest.processing || !hasVotes"
|
||||
@click="resetVotes"
|
||||
>
|
||||
<Trash2 class="size-4" />
|
||||
@@ -45,18 +48,18 @@ function resetVotes(): void {
|
||||
|
||||
<div class="moderator-controls">
|
||||
<p
|
||||
v-if="revealForm.errors.room || nextRoundForm.errors.room"
|
||||
v-if="revealRequest.errors.room || nextRoundRequest.errors.room"
|
||||
class="max-w-64 rounded-lg bg-rose-950/90 px-3 py-2 text-right text-sm text-rose-200 shadow-lg"
|
||||
role="alert"
|
||||
>
|
||||
{{ revealForm.errors.room ?? nextRoundForm.errors.room }}
|
||||
{{ revealRequest.errors.room ?? nextRoundRequest.errors.room }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-if="!revealed"
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-slate-100 px-5 py-2.5 font-semibold text-slate-900 transition hover:bg-white disabled:opacity-50"
|
||||
:disabled="revealForm.processing"
|
||||
:disabled="revealRequest.processing"
|
||||
@click="revealCards"
|
||||
>
|
||||
<Eye class="size-4" />
|
||||
@@ -67,7 +70,7 @@ function resetVotes(): void {
|
||||
v-else
|
||||
type="button"
|
||||
class="inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-slate-100 px-5 py-2.5 font-semibold text-slate-900 transition hover:bg-white disabled:opacity-50"
|
||||
:disabled="nextRoundForm.processing"
|
||||
:disabled="nextRoundRequest.processing"
|
||||
@click="startNextRound"
|
||||
>
|
||||
<RotateCcw class="size-4" />
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<script setup lang="ts">
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { useHttp } from '@inertiajs/vue3';
|
||||
import { Keyboard } from '@lucide/vue';
|
||||
import { useEventListener } from '@vueuse/core';
|
||||
import { watch } from 'vue';
|
||||
|
||||
import { store as storeVote } from '@/routes/room/vote';
|
||||
import type { RoomVoteDeckProps } from '@/types/room';
|
||||
import type { RoomVoteDeckEmits, RoomVoteDeckProps } from '@/types/room';
|
||||
|
||||
const props = defineProps<RoomVoteDeckProps>();
|
||||
const emit = defineEmits<RoomVoteDeckEmits>();
|
||||
|
||||
const cardShortcuts = [
|
||||
'1',
|
||||
@@ -25,29 +26,32 @@ const cardShortcuts = [
|
||||
),
|
||||
];
|
||||
|
||||
const voteForm = useForm({
|
||||
const voteRequest = useHttp(() => storeVote(props.roomId), {
|
||||
value: props.currentVote ?? '',
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.currentVote,
|
||||
(value) => {
|
||||
if (!voteForm.processing) {
|
||||
voteForm.value = value ?? '';
|
||||
if (!voteRequest.processing) {
|
||||
voteRequest.value = value ?? '';
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function submitVote(value: string): void {
|
||||
if (props.revealed || voteForm.processing) {
|
||||
if (props.revealed || voteRequest.processing) {
|
||||
return;
|
||||
}
|
||||
|
||||
voteForm.value = value;
|
||||
voteForm.submit(storeVote(props.roomId), {
|
||||
preserveScroll: true,
|
||||
const previousVote = props.currentVote;
|
||||
|
||||
voteRequest.value = value;
|
||||
emit('vote-changed', value);
|
||||
void voteRequest.submit({
|
||||
onError: () => {
|
||||
voteForm.value = props.currentVote ?? '';
|
||||
voteRequest.value = previousVote ?? '';
|
||||
emit('vote-changed', previousVote);
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -71,7 +75,7 @@ function handleKeyboardVote(event: KeyboardEvent): void {
|
||||
if (
|
||||
!props.presenterMode ||
|
||||
props.revealed ||
|
||||
voteForm.processing ||
|
||||
voteRequest.processing ||
|
||||
event.repeat ||
|
||||
event.altKey ||
|
||||
event.ctrlKey ||
|
||||
@@ -118,10 +122,10 @@ useEventListener('keydown', handleKeyboardVote);
|
||||
class="deck-card"
|
||||
:class="{
|
||||
'is-selected':
|
||||
!presenterMode && voteForm.value === card.key,
|
||||
!presenterMode && voteRequest.value === card.key,
|
||||
}"
|
||||
:disabled="voteForm.processing"
|
||||
:aria-pressed="voteForm.value === card.key"
|
||||
:disabled="voteRequest.processing"
|
||||
:aria-pressed="voteRequest.value === card.key"
|
||||
:aria-label="`Karte ${card.label} wählen`"
|
||||
@click="submitVote(card.key)"
|
||||
>
|
||||
@@ -138,11 +142,11 @@ useEventListener('keydown', handleKeyboardVote);
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="voteForm.errors.value"
|
||||
v-if="voteRequest.errors.value"
|
||||
class="mt-3 text-sm text-rose-300"
|
||||
role="alert"
|
||||
>
|
||||
{{ voteForm.errors.value }}
|
||||
{{ voteRequest.errors.value }}
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1,72 +1,73 @@
|
||||
import { router } from '@inertiajs/vue3';
|
||||
import { onScopeDispose, watch } from 'vue';
|
||||
import { onScopeDispose, ref, shallowReadonly, watch } from 'vue';
|
||||
|
||||
import { getEcho } from '@/lib/echo';
|
||||
import type { RoomStateChangedPayload } from '@/types/room';
|
||||
import { home } from '@/routes';
|
||||
import { join } from '@/routes/room';
|
||||
import type {
|
||||
CurrentRoomPlayer,
|
||||
PokerRoom,
|
||||
RoomStateChangedPayload,
|
||||
} from '@/types/room';
|
||||
|
||||
const ROOM_EVENT = '.room.state.changed';
|
||||
|
||||
export function useRoomRealtime(
|
||||
roomId: () => string,
|
||||
stateVersion: () => number,
|
||||
): void {
|
||||
let reloadInProgress = false;
|
||||
let pendingVersion = 0;
|
||||
let disposed = false;
|
||||
|
||||
function reloadRoom(): void {
|
||||
if (reloadInProgress || disposed) {
|
||||
return;
|
||||
}
|
||||
|
||||
reloadInProgress = true;
|
||||
|
||||
router.reload({
|
||||
only: ['room', 'currentPlayer'],
|
||||
onFinish: () => {
|
||||
reloadInProgress = false;
|
||||
|
||||
if (disposed) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (pendingVersion > stateVersion()) {
|
||||
reloadRoom();
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
pendingVersion = stateVersion();
|
||||
},
|
||||
});
|
||||
}
|
||||
initialRoom: () => PokerRoom,
|
||||
initialCurrentPlayer: () => CurrentRoomPlayer,
|
||||
) {
|
||||
const room = ref<PokerRoom>({ ...initialRoom() });
|
||||
const currentPlayer = ref<CurrentRoomPlayer>({ ...initialCurrentPlayer() });
|
||||
|
||||
function handleRoomChange(payload: RoomStateChangedPayload): void {
|
||||
if (
|
||||
typeof payload.version !== 'number' ||
|
||||
payload.version <= Math.max(stateVersion(), pendingVersion)
|
||||
payload.version <= room.value.state_version
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
pendingVersion = payload.version;
|
||||
|
||||
if (payload.change === 'room_deleted') {
|
||||
router.visit('/', { replace: true });
|
||||
router.visit(home().url, { replace: true });
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
reloadRoom();
|
||||
if (payload.change === 'room_closed') {
|
||||
router.visit(
|
||||
join({ query: { join_code: room.value.join_code } }).url,
|
||||
{ replace: true },
|
||||
);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (payload.state === null || payload.state === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
room.value = {
|
||||
...room.value,
|
||||
...payload.state,
|
||||
};
|
||||
|
||||
if (
|
||||
payload.change === 'votes_reset' ||
|
||||
payload.change === 'next_round'
|
||||
) {
|
||||
currentPlayer.value = {
|
||||
...currentPlayer.value,
|
||||
current_vote: null,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const stopWatchingRoom = watch(
|
||||
roomId,
|
||||
() => initialRoom().id,
|
||||
(nextRoomId, _previousRoomId, onCleanup) => {
|
||||
const echo = getEcho();
|
||||
const channelName = `rooms.${nextRoomId}`;
|
||||
|
||||
pendingVersion = stateVersion();
|
||||
echo.channel(channelName).listen(ROOM_EVENT, handleRoomChange);
|
||||
|
||||
onCleanup(() => {
|
||||
@@ -76,19 +77,30 @@ export function useRoomRealtime(
|
||||
{ immediate: true },
|
||||
);
|
||||
|
||||
const stopWatchingVersion = watch(
|
||||
stateVersion,
|
||||
(version) => {
|
||||
if (!reloadInProgress) {
|
||||
pendingVersion = Math.max(pendingVersion, version);
|
||||
}
|
||||
const stopWatchingInitialState = watch(
|
||||
[initialRoom, initialCurrentPlayer],
|
||||
([nextRoom, nextCurrentPlayer]) => {
|
||||
room.value = { ...nextRoom };
|
||||
currentPlayer.value = { ...nextCurrentPlayer };
|
||||
},
|
||||
{ flush: 'sync' },
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
onScopeDispose(() => {
|
||||
disposed = true;
|
||||
stopWatchingRoom();
|
||||
stopWatchingVersion();
|
||||
stopWatchingInitialState();
|
||||
});
|
||||
|
||||
function setCurrentVote(value: string | null): void {
|
||||
currentPlayer.value = {
|
||||
...currentPlayer.value,
|
||||
current_vote: value,
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
room: shallowReadonly(room),
|
||||
currentPlayer: shallowReadonly(currentPlayer),
|
||||
setCurrentVote,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, usePage, usePoll } from '@inertiajs/vue3';
|
||||
import { Head, usePage } from '@inertiajs/vue3';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import RoomHeader from '@/components/rooms/RoomHeader.vue';
|
||||
@@ -18,18 +18,18 @@ const canFavorite = computed(
|
||||
() => page.props.auth.user?.id != props.room.owner_id,
|
||||
);
|
||||
|
||||
useRoomRealtime(
|
||||
() => props.room.id,
|
||||
() => props.room.state_version,
|
||||
const {
|
||||
room: realtimeRoom,
|
||||
currentPlayer: realtimeCurrentPlayer,
|
||||
setCurrentVote,
|
||||
} = useRoomRealtime(
|
||||
() => props.room,
|
||||
() => props.currentPlayer,
|
||||
);
|
||||
|
||||
usePoll(30_000, {
|
||||
only: ['room', 'currentPlayer'],
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="room.title ?? 'Scrum Poker'" />
|
||||
<Head :title="realtimeRoom.title ?? 'Scrum Poker'" />
|
||||
|
||||
<main
|
||||
class="-m-6 min-h-[calc(100svh-4rem)] bg-slate-900 px-3 py-6 text-white sm:px-6 md:flex md:h-[calc(100dvh-4rem-1px)] md:min-h-0 md:flex-col md:overflow-hidden lg:px-10"
|
||||
@@ -37,26 +37,27 @@ usePoll(30_000, {
|
||||
<RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
|
||||
|
||||
<RoomHeader
|
||||
:id="room.id"
|
||||
:title="room.title"
|
||||
:join_code="room.join_code"
|
||||
:is_favorite="room.is_favorite"
|
||||
:id="realtimeRoom.id"
|
||||
:title="realtimeRoom.title"
|
||||
:join_code="realtimeRoom.join_code"
|
||||
:is_favorite="realtimeRoom.is_favorite"
|
||||
:can-favorite="canFavorite"
|
||||
v-model:presenter-mode="presenterMode"
|
||||
/>
|
||||
|
||||
<RoomTable
|
||||
:room="room"
|
||||
:current-player="currentPlayer"
|
||||
:room="realtimeRoom"
|
||||
:current-player="realtimeCurrentPlayer"
|
||||
:presenter-mode="presenterMode"
|
||||
/>
|
||||
|
||||
<RoomVoteDeck
|
||||
:room-id="room.id"
|
||||
:revealed="room.revealed"
|
||||
:cards="room.deck.cards"
|
||||
:current-vote="currentPlayer.current_vote"
|
||||
:room-id="realtimeRoom.id"
|
||||
:revealed="realtimeRoom.revealed"
|
||||
:cards="realtimeRoom.deck.cards"
|
||||
:current-vote="realtimeCurrentPlayer.current_vote"
|
||||
:presenter-mode="presenterMode"
|
||||
@vote-changed="setCurrentVote"
|
||||
/>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
@@ -132,6 +132,10 @@ export type RoomVoteDeckProps = {
|
||||
presenterMode: boolean;
|
||||
};
|
||||
|
||||
export type RoomVoteDeckEmits = {
|
||||
'vote-changed': [value: string | null];
|
||||
};
|
||||
|
||||
export type RoomStateChange =
|
||||
| 'player_joined'
|
||||
| 'vote_changed'
|
||||
@@ -145,4 +149,14 @@ export type RoomStateChange =
|
||||
export type RoomStateChangedPayload = {
|
||||
version: number;
|
||||
change: RoomStateChange;
|
||||
state: RoomRealtimeState | null;
|
||||
};
|
||||
|
||||
export type RoomRealtimeState = Pick<
|
||||
PokerRoom,
|
||||
| 'current_round'
|
||||
| 'revealed'
|
||||
| 'state_version'
|
||||
| 'statistics'
|
||||
| 'players'
|
||||
>;
|
||||
|
||||
@@ -5,6 +5,7 @@ use App\Events\RoomStateChanged;
|
||||
use App\Jobs\CloseInactiveRooms;
|
||||
use App\Models\Room;
|
||||
use App\Models\User;
|
||||
use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
|
||||
use Illuminate\Support\Carbon;
|
||||
use Illuminate\Support\Facades\Event;
|
||||
|
||||
@@ -23,18 +24,20 @@ function createBroadcastRoom(array $attributes = []): Room
|
||||
]);
|
||||
}
|
||||
|
||||
test('room state broadcasts expose only invalidation metadata', function () {
|
||||
test('room state broadcasts synchronously expose sanitized state', function () {
|
||||
$event = new RoomStateChanged(
|
||||
'019b8f80-37c4-71a3-b415-5f2697332c16',
|
||||
7,
|
||||
RoomStateChange::VoteChanged,
|
||||
);
|
||||
|
||||
expect($event->broadcastAs())->toBe('room.state.changed')
|
||||
expect($event)->toBeInstanceOf(ShouldBroadcastNow::class)
|
||||
->and($event->broadcastAs())->toBe('room.state.changed')
|
||||
->and($event->broadcastOn()->name)->toBe('rooms.019b8f80-37c4-71a3-b415-5f2697332c16')
|
||||
->and($event->broadcastWith())->toBe([
|
||||
'version' => 7,
|
||||
'change' => 'vote_changed',
|
||||
'state' => null,
|
||||
])
|
||||
->and($event->broadcastWith())->not->toHaveKeys([
|
||||
'player_name',
|
||||
@@ -68,23 +71,23 @@ test('voting and round actions broadcast their state changes', function () {
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.vote.store', $room), ['value' => '5'])
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.reveal', $room))
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.next-round', $room))
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.vote.store', $room), ['value' => '3'])
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.reset', $room))
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
foreach ([
|
||||
RoomStateChange::VoteChanged,
|
||||
@@ -98,6 +101,35 @@ test('voting and round actions broadcast their state changes', function () {
|
||||
);
|
||||
}
|
||||
|
||||
Event::assertDispatched(
|
||||
RoomStateChanged::class,
|
||||
function (RoomStateChanged $event) use ($moderator): bool {
|
||||
if ($event->change !== RoomStateChange::VoteChanged || $event->state === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$player = collect($event->state['players'])->firstWhere('id', $moderator->id);
|
||||
|
||||
return $event->state['revealed'] === false
|
||||
&& $player['has_voted'] === true
|
||||
&& $player['vote'] === null;
|
||||
},
|
||||
);
|
||||
|
||||
Event::assertDispatched(
|
||||
RoomStateChanged::class,
|
||||
function (RoomStateChanged $event) use ($moderator): bool {
|
||||
if ($event->change !== RoomStateChange::CardsRevealed || $event->state === null) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$player = collect($event->state['players'])->firstWhere('id', $moderator->id);
|
||||
|
||||
return $event->state['revealed'] === true
|
||||
&& $player['vote'] === '5';
|
||||
},
|
||||
);
|
||||
|
||||
Event::assertDispatchedTimes(RoomStateChanged::class, 5);
|
||||
});
|
||||
|
||||
|
||||
@@ -238,7 +238,7 @@ test('meaningful game actions update the explicit activity timestamp', function
|
||||
|
||||
$this->withSession(["room_players.{$room->id}" => $moderator->id])
|
||||
->post(route('room.vote.store', $room), ['value' => '5'])
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
expect($room->fresh()->last_activity_at->equalTo(now()))->toBeTrue();
|
||||
});
|
||||
|
||||
@@ -40,7 +40,7 @@ test('a participant can vote and change their vote in the current round', functi
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.vote.store', $room), ['value' => '5'])
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
$this->assertDatabaseHas('votes', [
|
||||
'room_id' => $room->id,
|
||||
@@ -51,7 +51,7 @@ test('a participant can vote and change their vote in the current round', functi
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.vote.store', $room), ['value' => '8'])
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
expect(Vote::query()->count())->toBe(1);
|
||||
expect(Vote::query()->value('value'))->toBe('8')
|
||||
@@ -91,7 +91,7 @@ test('other votes stay hidden until the moderator reveals the round', function (
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.reveal', $room))
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
expect($room->fresh()->last_activity_at->greaterThan($previousActivity))->toBeTrue();
|
||||
|
||||
@@ -123,7 +123,7 @@ test('starting the next round clears the revealed state', function () {
|
||||
|
||||
$this->withSession(["room_players.{$room->id}" => $moderator->id])
|
||||
->post(route('room.next-round', $room))
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
$room->refresh();
|
||||
|
||||
@@ -156,7 +156,7 @@ test('the moderator can reset only the votes from the current round', function (
|
||||
|
||||
$this->withSession(["room_players.{$room->id}" => $moderator->id])
|
||||
->post(route('room.reset', $room))
|
||||
->assertRedirect();
|
||||
->assertNoContent();
|
||||
|
||||
$this->assertDatabaseHas('votes', [
|
||||
'room_id' => $room->id,
|
||||
|
||||
Reference in New Issue
Block a user