mirror of
https://github.com/ericasch6/scrum-poker-internal.git
synced 2026-10-13 15:32:09 +00:00
build the backend structure and the fe for the Game
This commit is contained in:
@@ -1,11 +1,150 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Http\Requests\StoreRoomRequest;
|
||||
use App\Models\Deck;
|
||||
use App\Models\Player;
|
||||
use App\Models\Room;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Inertia\Inertia;
|
||||
|
||||
class RoomController extends Controller
|
||||
{
|
||||
public function create(){
|
||||
return Inertia::render('rooms/CreateRoom');
|
||||
public function create(Request $request)
|
||||
{
|
||||
$user = $request->user();
|
||||
|
||||
$decks = Deck::query()
|
||||
->where(function ($query) use ($user) {
|
||||
$query->where('is_system', true);
|
||||
|
||||
if ($user !== null) {
|
||||
$query->orWhere('user_id', $user->id);
|
||||
}
|
||||
})
|
||||
->orderBy('name')
|
||||
->get([
|
||||
'id',
|
||||
'name',
|
||||
'cards',
|
||||
]);
|
||||
|
||||
return Inertia::render('rooms/Create', [
|
||||
'decks' => $decks,
|
||||
'defaultPlayerName' => $user?->name,
|
||||
]);
|
||||
}
|
||||
|
||||
public function store(Request $request, StoreRoomRequest $roomStoreRequest)
|
||||
{
|
||||
$validated = $roomStoreRequest->validated();
|
||||
$user = $request->user();
|
||||
|
||||
$deck = Deck::query()
|
||||
->whereKey($validated['deck_id'])
|
||||
->where(function ($query) use ($user) {
|
||||
$query->where('is_system', true);
|
||||
|
||||
if ($user !== null) {
|
||||
$query->orWhere('user_id', $user->id);
|
||||
}
|
||||
})
|
||||
->firstOrFail();
|
||||
|
||||
[$room, $player] = DB::transaction(function () use (
|
||||
$validated,
|
||||
$deck,
|
||||
$user,
|
||||
) {
|
||||
$room = Room::create([
|
||||
'title' => $validated['title'] ?? null,
|
||||
'deck_config' => [
|
||||
'id' => $deck->id,
|
||||
'name' => $deck->name,
|
||||
'cards' => $deck->cards,
|
||||
],
|
||||
]);
|
||||
|
||||
$player = $room->players()->create([
|
||||
'user_id' => $user?->id,
|
||||
'name' => $validated['player_name'],
|
||||
'is_moderator' => true,
|
||||
'last_seen_at' => now(),
|
||||
]);
|
||||
|
||||
return [$room, $player];
|
||||
});
|
||||
|
||||
$request->session()->put(
|
||||
"room_players.{$room->id}",
|
||||
$player->id,
|
||||
);
|
||||
|
||||
return to_route('room.show', $room);
|
||||
}
|
||||
|
||||
public function show(Room $room, Request $request)
|
||||
{
|
||||
$currentPlayer = $request->attributes->get('currentPlayer');
|
||||
|
||||
abort_unless($currentPlayer instanceof Player, 403);
|
||||
|
||||
$room->load([
|
||||
'players' => fn ($query) => $query
|
||||
->select(['id', 'room_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),
|
||||
]);
|
||||
|
||||
$players = $room->players->map(function (Player $player) use ($room) {
|
||||
$vote = $player->votes->first();
|
||||
|
||||
return [
|
||||
'id' => $player->id,
|
||||
'name' => $player->name,
|
||||
'is_moderator' => $player->is_moderator,
|
||||
'has_voted' => $vote !== null,
|
||||
'vote' => $room->revealed_at !== null ? $vote?->value : null,
|
||||
];
|
||||
});
|
||||
|
||||
$currentVote = $room->players
|
||||
->firstWhere('id', $currentPlayer->id)
|
||||
?->votes
|
||||
->first();
|
||||
|
||||
return Inertia::render('rooms/Show', [
|
||||
'room' => [
|
||||
'id' => $room->id,
|
||||
'title' => $room->title,
|
||||
'join_code' => $room->join_code,
|
||||
'current_round' => $room->current_round,
|
||||
'revealed' => $room->revealed_at !== null,
|
||||
'state_version' => $room->state_version,
|
||||
'deck' => [
|
||||
'name' => $room->deck_config['name'],
|
||||
'cards' => $room->deck_config['cards'],
|
||||
],
|
||||
'players' => $players,
|
||||
],
|
||||
'currentPlayer' => [
|
||||
'id' => $currentPlayer->id,
|
||||
'name' => $currentPlayer->name,
|
||||
'is_moderator' => $currentPlayer->is_moderator,
|
||||
'current_vote' => $currentVote?->value,
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
public function join(Request $request)
|
||||
{
|
||||
return Inertia::render('rooms/Join', [
|
||||
'join_code' => $request->query('join_code'),
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Http\Requests\JoinRoomRequest;
|
||||
use App\Models\Room;
|
||||
|
||||
class RoomPlayerController extends Controller
|
||||
{
|
||||
public function join(JoinRoomRequest $request)
|
||||
{
|
||||
$validated = $request->validated();
|
||||
$user = $request->user();
|
||||
|
||||
$room = Room::where('join_code', '=', $validated['join_code'])->firstOrFail();
|
||||
|
||||
$player = $room->players()->create([
|
||||
'user_id' => $user?->id,
|
||||
'name' => $validated['player_name'],
|
||||
'is_moderator' => false,
|
||||
'last_seen_at' => now(),
|
||||
]);
|
||||
|
||||
$request->session()->put(
|
||||
"room_players.{$room->id}",
|
||||
$player->id,
|
||||
);
|
||||
|
||||
return to_route('room.show', $room);
|
||||
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use App\Models\Player;
|
||||
use App\Models\Room;
|
||||
use App\Models\Vote;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
|
||||
class RoundController extends Controller
|
||||
{
|
||||
public function reset(
|
||||
Request $request,
|
||||
Room $room,
|
||||
): RedirectResponse {
|
||||
$player = $request->attributes->get('currentPlayer');
|
||||
|
||||
abort_unless(
|
||||
$player instanceof Player
|
||||
&& $player->room_id === $room->id
|
||||
&& $player->is_moderator,
|
||||
403,
|
||||
);
|
||||
|
||||
DB::transaction(function () use ($room) {
|
||||
$lockedRoom = Room::query()
|
||||
->lockForUpdate()
|
||||
->findOrFail($room->id);
|
||||
|
||||
Vote::query()
|
||||
->where('room_id', $lockedRoom->id)
|
||||
->where('round', $lockedRoom->current_round)
|
||||
->delete();
|
||||
|
||||
$lockedRoom->update([
|
||||
'revealed_at' => null,
|
||||
'state_version' => $lockedRoom->state_version + 1,
|
||||
]);
|
||||
});
|
||||
|
||||
return back();
|
||||
}
|
||||
|
||||
public function reveal(
|
||||
Request $request,
|
||||
Room $room,
|
||||
): RedirectResponse {
|
||||
$player = $request->attributes->get('currentPlayer');
|
||||
|
||||
abort_unless(
|
||||
$player instanceof Player
|
||||
&& $player->room_id === $room->id
|
||||
&& $player->is_moderator,
|
||||
403,
|
||||
);
|
||||
|
||||
DB::transaction(function () use ($room) {
|
||||
$lockedRoom = Room::query()
|
||||
->lockForUpdate()
|
||||
->findOrFail($room->id);
|
||||
|
||||
if ($lockedRoom->revealed_at !== null) {
|
||||
throw ValidationException::withMessages([
|
||||
'room' => 'Die Karten sind bereits aufgedeckt.',
|
||||
]);
|
||||
}
|
||||
|
||||
$lockedRoom->update([
|
||||
'revealed_at' => now(),
|
||||
'state_version' => $lockedRoom->state_version + 1,
|
||||
]);
|
||||
});
|
||||
|
||||
return back();
|
||||
}
|
||||
|
||||
public function nextRound(
|
||||
Request $request,
|
||||
Room $room,
|
||||
): RedirectResponse {
|
||||
$player = $request->attributes->get('currentPlayer');
|
||||
|
||||
abort_unless(
|
||||
$player instanceof Player
|
||||
&& $player->room_id === $room->id
|
||||
&& $player->is_moderator,
|
||||
403,
|
||||
);
|
||||
|
||||
DB::transaction(function () use ($room) {
|
||||
$lockedRoom = Room::query()
|
||||
->lockForUpdate()
|
||||
->findOrFail($room->id);
|
||||
|
||||
if ($lockedRoom->revealed_at === null) {
|
||||
throw ValidationException::withMessages([
|
||||
'room' => 'Die aktuelle Runde muss zuerst aufgedeckt werden.',
|
||||
]);
|
||||
}
|
||||
|
||||
$lockedRoom->update([
|
||||
'current_round' => $lockedRoom->current_round + 1,
|
||||
'revealed_at' => null,
|
||||
'state_version' => $lockedRoom->state_version + 1,
|
||||
]);
|
||||
});
|
||||
|
||||
return back();
|
||||
}
|
||||
}
|
||||
@@ -2,9 +2,55 @@
|
||||
|
||||
namespace App\Http\Controllers;
|
||||
|
||||
use Illuminate\Http\Request;
|
||||
use App\Http\Requests\SubmitVoteRequest;
|
||||
use App\Models\Player;
|
||||
use App\Models\Room;
|
||||
use App\Models\Vote;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
|
||||
class VoteController extends Controller
|
||||
{
|
||||
//
|
||||
public function store(
|
||||
SubmitVoteRequest $request,
|
||||
Room $room,
|
||||
): RedirectResponse {
|
||||
$player = $request->attributes->get('currentPlayer');
|
||||
|
||||
abort_unless(
|
||||
$player instanceof Player
|
||||
&& $player->room_id === $room->id,
|
||||
403,
|
||||
);
|
||||
|
||||
$value = $request->validated('value');
|
||||
|
||||
DB::transaction(function () use ($room, $player, $value) {
|
||||
$lockedRoom = Room::query()
|
||||
->lockForUpdate()
|
||||
->findOrFail($room->id);
|
||||
|
||||
if ($lockedRoom->revealed_at !== null) {
|
||||
throw ValidationException::withMessages([
|
||||
'value' => 'Die Karten wurden bereits aufgedeckt.',
|
||||
]);
|
||||
}
|
||||
|
||||
Vote::updateOrCreate(
|
||||
[
|
||||
'room_id' => $lockedRoom->id,
|
||||
'player_id' => $player->id,
|
||||
'round' => $lockedRoom->current_round,
|
||||
],
|
||||
[
|
||||
'value' => $value,
|
||||
],
|
||||
);
|
||||
|
||||
$lockedRoom->increment('state_version');
|
||||
});
|
||||
|
||||
return back();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Middleware;
|
||||
|
||||
use App\Models\Room;
|
||||
use Closure;
|
||||
use Illuminate\Http\Request;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
|
||||
class EnsureRoomParticipant
|
||||
{
|
||||
/**
|
||||
* Handle an incoming request.
|
||||
*
|
||||
* @param Closure(Request): (Response) $next
|
||||
*/
|
||||
public function handle(Request $request, Closure $next): Response
|
||||
{
|
||||
$room = $request->route('room');
|
||||
|
||||
if (! $room instanceof Room) {
|
||||
abort(404);
|
||||
}
|
||||
|
||||
$sessionKey = "room_players.{$room->id}";
|
||||
$playerId = $request->session()->get($sessionKey);
|
||||
|
||||
if (! $playerId) {
|
||||
return to_route('room.join', [
|
||||
'join_code' => $room->join_code,
|
||||
])->withErrors([
|
||||
'join_code' => 'Du musst diesen Raum erst beitreten.',
|
||||
]);
|
||||
}
|
||||
|
||||
$player = $room->players()->find($playerId);
|
||||
|
||||
if (! $player) {
|
||||
$request->session()->forget($sessionKey);
|
||||
|
||||
return to_route('room.join', [
|
||||
'join_code' => $room->join_code,
|
||||
]);
|
||||
}
|
||||
|
||||
$request->attributes->set('currentPlayer', $player);
|
||||
|
||||
return $next($request);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Requests;
|
||||
|
||||
use App\Models\Player;
|
||||
use App\Models\Room;
|
||||
use Illuminate\Contracts\Validation\ValidationRule;
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
use Illuminate\Validation\Rule;
|
||||
|
||||
class JoinRoomRequest extends FormRequest
|
||||
{
|
||||
/**
|
||||
* Determine if the user is authorized to make this request.
|
||||
*/
|
||||
public function authorize(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
protected function prepareForValidation(): void
|
||||
{
|
||||
$this->merge([
|
||||
'join_code' => strtoupper(trim((string) $this->input('join_code'))),
|
||||
'player_name' => trim((string) $this->input('player_name')),
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the validation rules that apply to the request.
|
||||
*
|
||||
* @return array<string, ValidationRule|array<mixed>|string>
|
||||
*/
|
||||
public function rules(): array
|
||||
{
|
||||
$roomId = Room::query()
|
||||
->where('join_code', $this->input('join_code'))
|
||||
->value('id');
|
||||
|
||||
return [
|
||||
'join_code' => ['bail', 'string', 'required', 'size:6', Rule::exists(Room::class, 'join_code')],
|
||||
'player_name' => ['required', 'string', 'max:50', Rule::unique(Player::class, 'name')->where('room_id', $roomId)],
|
||||
];
|
||||
}
|
||||
|
||||
public function messages(): array
|
||||
{
|
||||
return [
|
||||
'join_code.exists' => 'Dieser Raumcode existiert nicht.',
|
||||
'join_code.size' => 'Der Raumcode muss aus sechs Zeichen bestehen.',
|
||||
'player_name.unique' => 'Dieser Name wird in dem Raum bereits verwendet.',
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Requests;
|
||||
|
||||
use Illuminate\Contracts\Validation\ValidationRule;
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
|
||||
class StoreRoomRequest extends FormRequest
|
||||
{
|
||||
/**
|
||||
* Determine if the user is authorized to make this request.
|
||||
*/
|
||||
public function authorize(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the validation rules that apply to the request.
|
||||
*
|
||||
* @return array<string, ValidationRule|array<mixed>|string>
|
||||
*/
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
'title' => ['nullable', 'string', 'max:100'],
|
||||
'player_name' => ['required', 'string', 'max:50'],
|
||||
'deck_id' => ['required', 'integer'],
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Requests;
|
||||
|
||||
use Illuminate\Contracts\Validation\ValidationRule;
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
use Illuminate\Validation\Rule;
|
||||
|
||||
class SubmitVoteRequest extends FormRequest
|
||||
{
|
||||
/**
|
||||
* Determine if the user is authorized to make this request.
|
||||
*/
|
||||
public function authorize(): bool
|
||||
{
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the validation rules that apply to the request.
|
||||
*
|
||||
* @return array<string, ValidationRule|array<mixed>|string>
|
||||
*/
|
||||
public function rules(): array
|
||||
{
|
||||
$room = $this->route('room');
|
||||
|
||||
return [
|
||||
'value' => ['bail', 'required', 'string', Rule::in(array_column($room->deck_config['cards'], 'key'))],
|
||||
];
|
||||
}
|
||||
|
||||
public function messages(): array
|
||||
{
|
||||
return [
|
||||
'value.required' => 'Du musst eine Karte auswählen.',
|
||||
'value.in' => 'Diese Karte gehört nicht zum verwendeten Deck.',
|
||||
];
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -16,7 +16,7 @@ class Deck extends Model
|
||||
{
|
||||
return [
|
||||
'cards' => 'array',
|
||||
'is_system' => 'boolean'
|
||||
'is_system' => 'boolean',
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@@ -5,12 +5,12 @@ namespace App\Models;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\BelongsTo;
|
||||
use Illuminate\Database\Eloquent\Relations\HasMany;
|
||||
use phpDocumentor\Reflection\Types\Boolean;
|
||||
|
||||
class Player extends Model
|
||||
{
|
||||
protected $fillable = [
|
||||
'room_id',
|
||||
'room_id',
|
||||
'user_id',
|
||||
'name',
|
||||
'is_moderator',
|
||||
'last_seen_at',
|
||||
@@ -58,7 +58,7 @@ class Player extends Model
|
||||
return $this->is_moderator;
|
||||
}
|
||||
|
||||
public function markAsSeen(): void
|
||||
public function markAsSeen(): void
|
||||
{
|
||||
$this->update([
|
||||
'last_seen_at' => now(),
|
||||
|
||||
+5
-8
@@ -2,11 +2,9 @@
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use Illuminate\Database\Eloquent\Attributes\Fillable;
|
||||
use Illuminate\Database\Eloquent\Concerns\HasUuids;
|
||||
use Illuminate\Database\Eloquent\Model;
|
||||
use Illuminate\Database\Eloquent\Relations\HasMany;
|
||||
use Override;
|
||||
|
||||
class Room extends Model
|
||||
{
|
||||
@@ -20,7 +18,7 @@ class Room extends Model
|
||||
'state_version',
|
||||
];
|
||||
|
||||
protected function casts() :array
|
||||
protected function casts(): array
|
||||
{
|
||||
return [
|
||||
'current_round' => 'integer',
|
||||
@@ -37,15 +35,15 @@ class Room extends Model
|
||||
});
|
||||
}
|
||||
|
||||
private static function generateJoinCode(): string
|
||||
private static function generateJoinCode(): string
|
||||
{
|
||||
$alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
|
||||
|
||||
do {
|
||||
$code = '';
|
||||
|
||||
for($i = 0; $i < 6; $i++) {
|
||||
$code .= $alphabet[random_int(0,strlen($alphabet)-1)];
|
||||
for ($i = 0; $i < 6; $i++) {
|
||||
$code .= $alphabet[random_int(0, strlen($alphabet) - 1)];
|
||||
}
|
||||
} while (static::where('join_code', $code)->exists());
|
||||
|
||||
@@ -53,14 +51,13 @@ class Room extends Model
|
||||
|
||||
}
|
||||
|
||||
|
||||
public function players(): HasMany
|
||||
{
|
||||
return $this->hasMany(Player::class);
|
||||
|
||||
}
|
||||
|
||||
public function vote(): HasMany
|
||||
public function votes(): HasMany
|
||||
{
|
||||
return $this->hasMany(Vote::class);
|
||||
}
|
||||
|
||||
+6
-5
@@ -11,22 +11,23 @@ class Vote extends Model
|
||||
'round',
|
||||
'value',
|
||||
'room_id',
|
||||
'player_id'
|
||||
'player_id',
|
||||
];
|
||||
|
||||
|
||||
protected function casts(): array
|
||||
{
|
||||
return [
|
||||
'round' => 'integer',
|
||||
'round' => 'integer',
|
||||
];
|
||||
}
|
||||
|
||||
public function room(): BelongsTo {
|
||||
public function room(): BelongsTo
|
||||
{
|
||||
return $this->belongsTo(Room::class);
|
||||
}
|
||||
|
||||
public function player(): BelongsTo {
|
||||
public function player(): BelongsTo
|
||||
{
|
||||
return $this->belongsTo(Player::class);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<?php
|
||||
|
||||
use App\Http\Middleware\EnsureRoomParticipant;
|
||||
use App\Http\Middleware\HandleAppearance;
|
||||
use App\Http\Middleware\HandleInertiaRequests;
|
||||
use Illuminate\Foundation\Application;
|
||||
@@ -16,6 +17,9 @@ return Application::configure(basePath: dirname(__DIR__))
|
||||
)
|
||||
->withMiddleware(function (Middleware $middleware): void {
|
||||
$middleware->encryptCookies(except: ['appearance', 'sidebar_state']);
|
||||
$middleware->alias([
|
||||
'room.player' => EnsureRoomParticipant::class,
|
||||
]);
|
||||
|
||||
$middleware->web(append: [
|
||||
HandleAppearance::class,
|
||||
|
||||
@@ -6,7 +6,6 @@ use App\Models\User;
|
||||
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
|
||||
use Illuminate\Database\Seeder;
|
||||
|
||||
|
||||
class DatabaseSeeder extends Seeder
|
||||
{
|
||||
use WithoutModelEvents;
|
||||
@@ -17,7 +16,7 @@ class DatabaseSeeder extends Seeder
|
||||
public function run(): void
|
||||
{
|
||||
$this->call([
|
||||
DeckSeeder::class,
|
||||
DeckSeeder::class,
|
||||
]);
|
||||
|
||||
User::factory()->create([
|
||||
|
||||
@@ -58,7 +58,7 @@ class DeckSeeder extends Seeder
|
||||
->whereNull('user_id')
|
||||
->where('is_system', true)
|
||||
->where('name', $definition['name'])
|
||||
->first() ?? new Deck();
|
||||
->first() ?? new Deck;
|
||||
|
||||
$deck->forceFill([
|
||||
'user_id' => null,
|
||||
@@ -68,4 +68,4 @@ class DeckSeeder extends Seeder
|
||||
])->save();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<main class="p-6">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup lang="ts">
|
||||
import { create, join } from '@/routes/room';
|
||||
import { Link } from '@inertiajs/vue3';
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="p-6">
|
||||
<div class="flex flex-col gap-6 justify-start items-center min-h-screen">
|
||||
|
||||
<h1 class="text-4xl font-extrabold mt-10"> Welcome to ScrumPoker</h1>
|
||||
|
||||
<div class="h-full mt-[6%] space-y-8 flex justify-center flex-col items-center">
|
||||
<p class="font-bold"> Create or Join a Room? </p>
|
||||
<div class=" flex justify-between gap-6 font-extrabold mt-6">
|
||||
<Link :href="join()">
|
||||
<p class="bg-gray-600 rounded-2xl min-w-30 px-4 py-2 text-center"> Join</p>
|
||||
</Link>
|
||||
<Link :href="create()">
|
||||
<p class="bg-gray-600 rounded-2xl min-w-30 px-4 py-2 text-center"> Create</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
@@ -1,9 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, Link } from '@inertiajs/vue3';
|
||||
import { dashboard, login } from '@/routes';
|
||||
import { register } from '@/routes';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>ScrumPoker</h1>
|
||||
</template>
|
||||
@@ -0,0 +1,119 @@
|
||||
<script setup lang="ts">
|
||||
import { store } from '@/routes/room';
|
||||
import { Head, useForm } from '@inertiajs/vue3';
|
||||
|
||||
|
||||
type Deck = {
|
||||
id: number,
|
||||
name: string,
|
||||
cards: Array<{
|
||||
key: string,
|
||||
label: string,
|
||||
}>;
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
decks: Deck[];
|
||||
defaultPlayerName: string | null;
|
||||
}>()
|
||||
|
||||
const form = useForm({
|
||||
title: '',
|
||||
player_name: props.defaultPlayerName ?? '',
|
||||
deck_id: props.decks[0]?.id ?? null,
|
||||
});
|
||||
|
||||
function submit(): void {
|
||||
form.submit(store());
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<Head title="Raum erstellen" />
|
||||
<main class="mx-auto max-w-lg p-6">
|
||||
<h1 class="mb-6 text-2xl font-bold">
|
||||
Scrum Poker Raum erstellen
|
||||
</h1>
|
||||
<form class="space-y-5" @submit.prevent="submit">
|
||||
<div>
|
||||
<label for="player_name" class="mb-1 block font-medium">
|
||||
Dein Name
|
||||
</label>
|
||||
|
||||
<input id="player_name" v-model="form.player_name" type="text" maxlength="50" required
|
||||
class="w-full rounded border p-2" placeholder="Eric">
|
||||
|
||||
<p v-if="form.errors.player_name" class="mt-1 text-sm text-red-600">
|
||||
|
||||
{{ form.errors.player_name }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="title" class="mb-1 block font-medium">
|
||||
Raumtitle
|
||||
</label>
|
||||
|
||||
<input id="title" v-model="form.title" type="text" maxlength="100" class="w-full rounded border p-2"
|
||||
placeholder="Sprint Planning" />
|
||||
|
||||
<p v-if="form.errors.title" class="mt-1 text-sm text-red-600">
|
||||
|
||||
{{ form.errors.title }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="deck_id" class="mb-1 block font-medium">
|
||||
Kartendeck
|
||||
</label>
|
||||
|
||||
<select id="deck_id" v-model.number="form.deck_id" required class="w-full rounded border p-2">
|
||||
<option v-for="deck in decks" :key="deck.id" :value="deck.id">
|
||||
{{ deck.name }}
|
||||
|
||||
</option>
|
||||
|
||||
</select>
|
||||
|
||||
<p v-if="form.errors.deck_id" class="mt-1 text-sm text-red-600">
|
||||
|
||||
{{ form.errors.deck_id }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div v-if="form.deck_id" class="rounded border p-3">
|
||||
<p class="mb-2 text-sm font-medium">
|
||||
Karten:
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<template v-for="deck in decks" :key="deck.id">
|
||||
<span v-for="card in deck.id === form.deck_id ? deck.cards : []" :key="card.key"
|
||||
class="rounded border px-3 py-1">
|
||||
{{ card.label }}
|
||||
</span>
|
||||
|
||||
</template>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<button type="submit" :disabled="form.processing || decks.length === 0"
|
||||
class="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50">
|
||||
{{ form.processing ? 'Raum wird erstellt' : 'Raum erstellen' }}
|
||||
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
<p v-if="decks.length === 0" class="mt-4 text-red-600">
|
||||
Es wurden noch keine Kartendecks angelegt.
|
||||
</p>
|
||||
</main>
|
||||
</template>
|
||||
@@ -1,7 +0,0 @@
|
||||
<script lang="ts">
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<h1>Create a Room</h1>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import { code} from '@/routes/room';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
|
||||
const props = defineProps <{
|
||||
join_code?: string,
|
||||
}>()
|
||||
|
||||
const form = useForm({
|
||||
player_name: '',
|
||||
join_code: props.join_code ?? '',
|
||||
});
|
||||
|
||||
|
||||
function submit(): void {
|
||||
form.submit(code());
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<div class="flex flex-col gap-6 justify-start items-center min-h-screen">
|
||||
|
||||
<h1 class="text-4xl font-extrabold mt-10"> Tritt einer Runde bei </h1>
|
||||
|
||||
<div class="p-6 flex justify-center items-center flex-col gap-8">
|
||||
|
||||
<form class="space-y-5" @submit.prevent="submit">
|
||||
<div>
|
||||
<label for="player_name" class="mb-1 block font-medium">
|
||||
Player Name
|
||||
</label>
|
||||
|
||||
<input id="title" v-model="form.player_name" type="text" maxlength="100"
|
||||
class="w-full rounded border p-2" placeholder="Max Mustermann" />
|
||||
|
||||
<p v-if="form.errors.player_name" class="mt-1 text-sm text-red-600">
|
||||
|
||||
{{ form.errors.player_name }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="join_code" class="mb-1 block font-medium">
|
||||
Raum Code
|
||||
</label>
|
||||
|
||||
<input id="title" v-model="form.join_code" type="text" maxlength="100"
|
||||
class="w-full rounded border p-2" />
|
||||
|
||||
<p v-if="form.errors.join_code" class="mt-1 text-sm text-red-600">
|
||||
|
||||
{{ form.errors.join_code }}
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<button type="submit" :disabled="form.processing"
|
||||
class="w-full rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50">
|
||||
{{ form.processing ? 'Raum wird beigetreten' : 'Raum beitreten' }}
|
||||
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</template>
|
||||
@@ -0,0 +1,663 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, useForm, usePoll } from '@inertiajs/vue3';
|
||||
import {
|
||||
Check,
|
||||
CircleUserRound,
|
||||
Copy,
|
||||
Crown,
|
||||
Eye,
|
||||
RotateCcw,
|
||||
Trash2,
|
||||
} from '@lucide/vue';
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import type { CSSProperties } from 'vue';
|
||||
|
||||
import { nextRound, reset as resetRound, reveal } from '@/routes/room';
|
||||
import { store as storeVote } from '@/routes/room/vote';
|
||||
|
||||
type PokerCard = {
|
||||
key: string;
|
||||
label: string;
|
||||
};
|
||||
|
||||
type Player = {
|
||||
id: number;
|
||||
name: string;
|
||||
is_moderator: boolean;
|
||||
has_voted: boolean;
|
||||
vote: string | null;
|
||||
};
|
||||
|
||||
type SeatStyle = CSSProperties & {
|
||||
'--card-x': string;
|
||||
'--card-y': string;
|
||||
};
|
||||
|
||||
const props = defineProps<{
|
||||
room: {
|
||||
id: string;
|
||||
title: string | null;
|
||||
join_code: string;
|
||||
current_round: number;
|
||||
revealed: boolean;
|
||||
state_version: number;
|
||||
deck: {
|
||||
name: string;
|
||||
cards: PokerCard[];
|
||||
};
|
||||
players: Player[];
|
||||
};
|
||||
currentPlayer: {
|
||||
id: number;
|
||||
name: string;
|
||||
is_moderator: boolean;
|
||||
current_vote: string | null;
|
||||
};
|
||||
}>();
|
||||
|
||||
const voteForm = useForm({
|
||||
value: props.currentPlayer.current_vote ?? '',
|
||||
});
|
||||
const revealForm = useForm<{ room?: string }>({});
|
||||
const nextRoundForm = useForm<{ room?: string }>({});
|
||||
const resetForm = useForm({});
|
||||
const copied = ref(false);
|
||||
|
||||
usePoll(2_000, {
|
||||
only: ['room', 'currentPlayer'],
|
||||
});
|
||||
|
||||
const positionedPlayers = computed(() => {
|
||||
const currentPlayerIndex = props.room.players.findIndex(
|
||||
(player) => player.id === props.currentPlayer.id,
|
||||
);
|
||||
const orderedPlayers =
|
||||
currentPlayerIndex === -1
|
||||
? props.room.players
|
||||
: [
|
||||
...props.room.players.slice(currentPlayerIndex),
|
||||
...props.room.players.slice(0, currentPlayerIndex),
|
||||
];
|
||||
const playerCount = Math.max(orderedPlayers.length, 1);
|
||||
|
||||
return orderedPlayers.map((player, index) => {
|
||||
const angle = Math.PI / 2 + (index * Math.PI * 2) / playerCount;
|
||||
const horizontalRadius = 39;
|
||||
const verticalRadius = 40;
|
||||
const cardDistance = 88;
|
||||
|
||||
return {
|
||||
...player,
|
||||
seatStyle: {
|
||||
left: `${50 + Math.cos(angle) * horizontalRadius}%`,
|
||||
top: `${48 + Math.sin(angle) * verticalRadius}%`,
|
||||
'--card-x': `${-Math.cos(angle) * cardDistance}px`,
|
||||
'--card-y': `${-Math.sin(angle) * cardDistance}px`,
|
||||
} as SeatStyle,
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.currentPlayer.current_vote,
|
||||
(value) => {
|
||||
if (!voteForm.processing) {
|
||||
voteForm.value = value ?? '';
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
function submitVote(value: string): void {
|
||||
if (props.room.revealed || voteForm.processing) {
|
||||
return;
|
||||
}
|
||||
|
||||
voteForm.value = value;
|
||||
voteForm.submit(storeVote(props.room.id), {
|
||||
preserveScroll: true,
|
||||
onError: () => {
|
||||
voteForm.value = props.currentPlayer.current_vote ?? '';
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function revealCards(): void {
|
||||
revealForm.submit(reveal(props.room.id), {
|
||||
preserveScroll: true,
|
||||
});
|
||||
}
|
||||
|
||||
function startNextRound(): void {
|
||||
nextRoundForm.submit(nextRound(props.room.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
voteForm.value = '';
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function resetVotes(): void {
|
||||
resetForm.submit(resetRound(props.room.id), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
voteForm.value = '';
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
async function copyInviteLink(): Promise<void> {
|
||||
const inviteUrl = new URL('/room/join', window.location.origin);
|
||||
inviteUrl.searchParams.set('join_code', props.room.join_code);
|
||||
|
||||
await navigator.clipboard.writeText(inviteUrl.toString());
|
||||
copied.value = true;
|
||||
window.setTimeout(() => {
|
||||
copied.value = false;
|
||||
}, 1_800);
|
||||
}
|
||||
|
||||
function cardLabel(value: string | null): string {
|
||||
if (value === null) {
|
||||
return '–';
|
||||
}
|
||||
|
||||
return (
|
||||
props.room.deck.cards.find((card) => card.key === value)?.label ?? value
|
||||
);
|
||||
}
|
||||
|
||||
function isCurrentPlayer(player: Player): boolean {
|
||||
return player.id === props.currentPlayer.id;
|
||||
}
|
||||
|
||||
function playerVote(player: Player): string | null {
|
||||
if (isCurrentPlayer(player)) {
|
||||
return props.currentPlayer.current_vote;
|
||||
}
|
||||
|
||||
return player.vote;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Head :title="room.title ?? 'Scrum Poker'" />
|
||||
|
||||
<main
|
||||
class="-m-6 min-h-[calc(100svh-4rem)] bg-slate-900 px-3 py-6 text-white sm:px-6 lg:px-10"
|
||||
>
|
||||
<header
|
||||
class="mx-auto flex max-w-6xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
|
||||
>
|
||||
<div>
|
||||
<p
|
||||
class="mb-1 text-xs font-semibold tracking-[0.22em] text-cyan-300 uppercase"
|
||||
>
|
||||
Runde {{ room.current_round }} · {{ room.deck.name }}
|
||||
</p>
|
||||
<h1 class="text-2xl font-bold tracking-tight sm:text-3xl">
|
||||
{{ room.title ?? 'Scrum Poker' }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-fit items-center gap-3 rounded-2xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-left transition hover:bg-slate-700"
|
||||
@click="copyInviteLink"
|
||||
>
|
||||
<span>
|
||||
<span
|
||||
class="block text-[10px] tracking-[0.18em] text-slate-400 uppercase"
|
||||
>
|
||||
Raumcode
|
||||
</span>
|
||||
<strong class="font-mono text-lg tracking-[0.2em]">
|
||||
{{ room.join_code }}
|
||||
</strong>
|
||||
</span>
|
||||
<Check v-if="copied" class="size-5 text-emerald-300" />
|
||||
<Copy v-else class="size-5 text-slate-300" />
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section class="mt-5 w-full">
|
||||
<div class="game-board" aria-label="Scrum-Poker-Tisch">
|
||||
<div class="poker-table" aria-hidden="true">
|
||||
<div class="table-highlight"></div>
|
||||
<div class="table-center">
|
||||
<span
|
||||
v-if="!room.revealed"
|
||||
class="text-sm font-medium text-emerald-50/75"
|
||||
>
|
||||
{{
|
||||
room.players.filter(
|
||||
(player) => player.has_voted,
|
||||
).length
|
||||
}}
|
||||
von {{ room.players.length }} haben gewählt
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-sm font-semibold text-amber-200"
|
||||
>
|
||||
Karten aufgedeckt
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article
|
||||
v-for="player in positionedPlayers"
|
||||
:key="player.id"
|
||||
class="player-seat"
|
||||
:style="player.seatStyle"
|
||||
>
|
||||
<div
|
||||
v-if="player.has_voted"
|
||||
class="seat-card"
|
||||
:aria-label="`${player.name} hat eine Karte gewählt`"
|
||||
>
|
||||
<div
|
||||
v-if="isCurrentPlayer(player)"
|
||||
class="own-vote-card"
|
||||
:class="{ 'is-revealed': room.revealed }"
|
||||
>
|
||||
{{ cardLabel(playerVote(player)) }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flip-card"
|
||||
:class="{ 'is-revealed': room.revealed }"
|
||||
>
|
||||
<div class="flip-card-inner">
|
||||
<div class="flip-card-face flip-card-back">
|
||||
<span>SP</span>
|
||||
</div>
|
||||
<div class="flip-card-face flip-card-front">
|
||||
{{ cardLabel(playerVote(player)) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mx-auto grid size-12 place-items-center rounded-full border border-slate-600 bg-slate-800 text-slate-300 sm:size-14"
|
||||
>
|
||||
<CircleUserRound
|
||||
class="size-7 sm:size-8"
|
||||
:stroke-width="1.7"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="sr-only"
|
||||
>Profilbild von {{ player.name }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mt-2 flex flex-col items-center gap-1">
|
||||
<p
|
||||
class="player-name max-w-32 text-center text-sm leading-tight font-semibold text-slate-100"
|
||||
>
|
||||
{{ player.name }}
|
||||
</p>
|
||||
<div
|
||||
v-if="
|
||||
player.is_moderator || isCurrentPlayer(player)
|
||||
"
|
||||
class="flex flex-wrap items-center justify-center gap-x-2 gap-y-0.5 text-[11px]"
|
||||
>
|
||||
<span
|
||||
v-if="player.is_moderator"
|
||||
class="inline-flex items-center gap-1 text-amber-300"
|
||||
>
|
||||
<Crown
|
||||
class="size-3 fill-amber-300"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
Moderator
|
||||
</span>
|
||||
<span
|
||||
v-if="isCurrentPlayer(player)"
|
||||
class="text-cyan-300"
|
||||
>
|
||||
Du
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div v-if="currentPlayer.is_moderator" class="reset-controls">
|
||||
<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 ||
|
||||
!room.players.some((player) => player.has_voted)
|
||||
"
|
||||
@click="resetVotes"
|
||||
>
|
||||
<Trash2 class="size-4" />
|
||||
Votes zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="currentPlayer.is_moderator"
|
||||
class="moderator-controls"
|
||||
>
|
||||
<p
|
||||
v-if="
|
||||
revealForm.errors.room || nextRoundForm.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
|
||||
}}
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-if="!room.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"
|
||||
@click="revealCards"
|
||||
>
|
||||
<Eye class="size-4" />
|
||||
Karten aufdecken
|
||||
</button>
|
||||
|
||||
<button
|
||||
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"
|
||||
@click="startNextRound"
|
||||
>
|
||||
<RotateCcw class="size-4" />
|
||||
Nächste Runde
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mx-auto mt-6 max-w-4xl text-center">
|
||||
<div class="mb-3 flex items-center justify-center gap-3">
|
||||
<span class="h-px w-10 bg-white/10"></span>
|
||||
<h2
|
||||
class="text-sm font-semibold tracking-[0.16em] text-slate-300 uppercase"
|
||||
>
|
||||
{{ room.revealed ? 'Runde beendet' : 'Wähle deine Karte' }}
|
||||
</h2>
|
||||
<span class="h-px w-10 bg-white/10"></span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="!room.revealed"
|
||||
class="flex flex-wrap justify-center gap-2.5 sm:gap-3"
|
||||
>
|
||||
<button
|
||||
v-for="card in room.deck.cards"
|
||||
:key="card.key"
|
||||
type="button"
|
||||
class="deck-card"
|
||||
:class="{ 'is-selected': voteForm.value === card.key }"
|
||||
:disabled="voteForm.processing"
|
||||
:aria-pressed="voteForm.value === card.key"
|
||||
:aria-label="`Karte ${card.label} wählen`"
|
||||
@click="submitVote(card.key)"
|
||||
>
|
||||
<span>{{ card.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p
|
||||
v-if="voteForm.errors.value"
|
||||
class="mt-3 text-sm text-rose-300"
|
||||
role="alert"
|
||||
>
|
||||
{{ voteForm.errors.value }}
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.game-board {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: max(34rem, calc(100svh - 11rem));
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
.poker-table {
|
||||
position: absolute;
|
||||
inset: 20% 15% 21%;
|
||||
overflow: hidden;
|
||||
border: 0.65rem solid #513b2d;
|
||||
border-radius: 50%;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 50% 42%,
|
||||
rgb(16 126 91 / 38%),
|
||||
transparent 45%
|
||||
),
|
||||
linear-gradient(145deg, #136c54, #074c3d);
|
||||
box-shadow:
|
||||
inset 0 0 0 0.2rem rgb(255 255 255 / 8%),
|
||||
inset 0 -1.5rem 3rem rgb(0 0 0 / 22%),
|
||||
0 1.5rem 3rem rgb(0 0 0 / 35%);
|
||||
}
|
||||
|
||||
.table-highlight {
|
||||
position: absolute;
|
||||
inset: 6%;
|
||||
border: 1px solid rgb(255 255 255 / 8%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.table-center {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.player-seat {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 8rem;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.player-name {
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.moderator-controls {
|
||||
position: absolute;
|
||||
right: 1.5rem;
|
||||
bottom: 1.5rem;
|
||||
top: auto;
|
||||
left: auto;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.reset-controls {
|
||||
position: absolute;
|
||||
bottom: 1.5rem;
|
||||
left: 1.5rem;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.seat-card {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 3.15rem;
|
||||
height: 4.35rem;
|
||||
transform: translate(-50%, -50%) translate(var(--card-x), var(--card-y));
|
||||
perspective: 800px;
|
||||
}
|
||||
|
||||
.own-vote-card,
|
||||
.flip-card-face {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.55rem;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.own-vote-card {
|
||||
border: 2px solid #cbd5e1;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.own-vote-card.is-revealed {
|
||||
border-color: rgb(252 211 77 / 90%);
|
||||
background: #fef3c7;
|
||||
}
|
||||
|
||||
.flip-card,
|
||||
.flip-card-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flip-card-inner {
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 520ms cubic-bezier(0.2, 0.75, 0.25, 1);
|
||||
}
|
||||
|
||||
.flip-card.is-revealed .flip-card-inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.flip-card-face {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.flip-card-back {
|
||||
border: 2px solid rgb(103 232 249 / 70%);
|
||||
background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
transparent 42%,
|
||||
rgb(103 232 249 / 20%) 42% 48%,
|
||||
transparent 48% 92%,
|
||||
rgb(103 232 249 / 20%) 92%
|
||||
),
|
||||
#17324a;
|
||||
background-size: 1rem 1rem;
|
||||
color: rgb(207 250 254 / 78%);
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.flip-card-front {
|
||||
transform: rotateY(180deg);
|
||||
border: 2px solid rgb(252 211 77 / 90%);
|
||||
background: #fffbeb;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.deck-card {
|
||||
display: grid;
|
||||
width: 3.75rem;
|
||||
aspect-ratio: 3 / 4;
|
||||
place-items: center;
|
||||
border: 2px solid rgb(255 255 255 / 15%);
|
||||
border-radius: 0.75rem;
|
||||
background: #f8fafc;
|
||||
color: #0f172a;
|
||||
box-shadow: 0 0.3rem 0.7rem rgb(0 0 0 / 18%);
|
||||
transition:
|
||||
transform 160ms ease,
|
||||
border-color 160ms ease,
|
||||
background 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.deck-card span {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.deck-card:hover:not(:disabled) {
|
||||
transform: translateY(-0.35rem);
|
||||
border-color: rgb(103 232 249 / 80%);
|
||||
}
|
||||
|
||||
.deck-card.is-selected {
|
||||
transform: translateY(-0.5rem);
|
||||
border-color: #fcd34d;
|
||||
background: #fcd34d;
|
||||
box-shadow: 0 0.35rem 0.8rem rgb(0 0 0 / 20%);
|
||||
}
|
||||
|
||||
.deck-card:disabled {
|
||||
cursor: wait;
|
||||
opacity: 0.72;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.game-board {
|
||||
min-height: max(28rem, calc(100svh - 10rem));
|
||||
}
|
||||
|
||||
.poker-table {
|
||||
inset: 24% 17% 23%;
|
||||
border-width: 0.45rem;
|
||||
}
|
||||
|
||||
.player-seat {
|
||||
width: 6.5rem;
|
||||
}
|
||||
|
||||
.moderator-controls {
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
}
|
||||
|
||||
.reset-controls {
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
.seat-card {
|
||||
width: 2.65rem;
|
||||
height: 3.65rem;
|
||||
transform: translate(-50%, -50%) translate(var(--card-x), var(--card-y))
|
||||
scale(0.86);
|
||||
}
|
||||
|
||||
.own-vote-card,
|
||||
.flip-card-face {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.deck-card {
|
||||
width: 3.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.flip-card-inner,
|
||||
.deck-card {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+19
-1
@@ -1,6 +1,24 @@
|
||||
<?php
|
||||
|
||||
use App\Http\Controllers\RoomController;
|
||||
use App\Http\Controllers\RoomPlayerController;
|
||||
use App\Http\Controllers\RoundController;
|
||||
use App\Http\Controllers\VoteController;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
Route::get('/', [RoomController::class, 'create'])->name('room.create');
|
||||
Route::get('/room', [RoomController::class, 'create'])->name('room.create');
|
||||
Route::get('/room/join', [RoomController::class, 'join'])->name('room.join');
|
||||
Route::post('room/join', [RoomPlayerController::class, 'join'])->name('room.code');
|
||||
Route::post('/room', [RoomController::class, 'store'])->name('room.store');
|
||||
|
||||
Route::middleware('room.player')->group(function () {
|
||||
Route::get('/rooms/{room}', [RoomController::class, 'show'])->name('room.show');
|
||||
Route::post('/rooms/{room}/votes', [VoteController::class, 'store'])
|
||||
->name('room.vote.store');
|
||||
Route::post('/rooms/{room}/reveal', [RoundController::class, 'reveal'])
|
||||
->name('room.reveal');
|
||||
Route::post('/rooms/{room}/reset', [RoundController::class, 'reset'])
|
||||
->name('room.reset');
|
||||
Route::post('/rooms/{room}/next-round', [RoundController::class, 'nextRound'])
|
||||
->name('room.next-round');
|
||||
});
|
||||
|
||||
+2
-1
@@ -1,10 +1,11 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Route;
|
||||
|
||||
require __DIR__.'/settings.php';
|
||||
require __DIR__.'/room.php';
|
||||
|
||||
Route::inertia('/', 'Landingpage')->name('home');
|
||||
Route::middleware(['auth', 'verified'])->group(function () {
|
||||
Route::inertia('dashboard', 'Dashboard')->name('dashboard');
|
||||
});
|
||||
|
||||
|
||||
@@ -74,4 +74,4 @@ test('users are rate limited', function () {
|
||||
]);
|
||||
|
||||
$response->assertTooManyRequests();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -98,4 +98,4 @@ test('already verified user visiting verification link is redirected without fir
|
||||
|
||||
Event::assertNotDispatched(Verified::class);
|
||||
expect($user->fresh()->hasVerifiedEmail())->toBeTrue();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -19,4 +19,4 @@ test('password confirmation requires authentication', function () {
|
||||
$response = $this->get(route('password.confirm'));
|
||||
|
||||
$response->assertRedirect(route('login'));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -75,4 +75,4 @@ test('password cannot be reset with invalid token', function () {
|
||||
]);
|
||||
|
||||
$response->assertSessionHasErrors('email');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -22,4 +22,4 @@ test('new users can register', function () {
|
||||
|
||||
$this->assertAuthenticated();
|
||||
$response->assertRedirect(route('dashboard', absolute: false));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -32,4 +32,4 @@ test('two factor challenge can be rendered', function () {
|
||||
->assertInertia(fn (Assert $page) => $page
|
||||
->component('auth/TwoFactorChallenge'),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -31,4 +31,4 @@ test('does not send verification notification if email is verified', function ()
|
||||
->assertRedirect(route('dashboard', absolute: false));
|
||||
|
||||
Notification::assertNothingSent();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -13,4 +13,4 @@ test('authenticated users can visit the dashboard', function () {
|
||||
|
||||
$response = $this->get(route('dashboard'));
|
||||
$response->assertOk();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -4,4 +4,4 @@ test('returns a successful response', function () {
|
||||
$response = $this->get(route('home'));
|
||||
|
||||
$response->assertOk();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,160 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Room;
|
||||
use App\Models\Vote;
|
||||
use Inertia\Testing\AssertableInertia as Assert;
|
||||
|
||||
function createVotingRoom(): array
|
||||
{
|
||||
$room = Room::create([
|
||||
'title' => 'Sprint Planning',
|
||||
'deck_config' => [
|
||||
'name' => 'Fibonacci',
|
||||
'cards' => [
|
||||
['key' => '3', 'label' => '3'],
|
||||
['key' => '5', 'label' => '5'],
|
||||
['key' => '8', 'label' => '8'],
|
||||
],
|
||||
],
|
||||
]);
|
||||
|
||||
$moderator = $room->players()->create([
|
||||
'name' => 'Eric',
|
||||
'is_moderator' => true,
|
||||
]);
|
||||
|
||||
$player = $room->players()->create([
|
||||
'name' => 'Anna',
|
||||
'is_moderator' => false,
|
||||
]);
|
||||
|
||||
return [$room, $moderator, $player];
|
||||
}
|
||||
|
||||
test('a participant can vote and change their vote in the current round', function () {
|
||||
[$room, $moderator] = createVotingRoom();
|
||||
|
||||
$session = ["room_players.{$room->id}" => $moderator->id];
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.vote.store', $room), ['value' => '5'])
|
||||
->assertRedirect();
|
||||
|
||||
$this->assertDatabaseHas('votes', [
|
||||
'room_id' => $room->id,
|
||||
'player_id' => $moderator->id,
|
||||
'round' => 1,
|
||||
'value' => '5',
|
||||
]);
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.vote.store', $room), ['value' => '8'])
|
||||
->assertRedirect();
|
||||
|
||||
expect(Vote::query()->count())->toBe(1);
|
||||
expect(Vote::query()->value('value'))->toBe('8');
|
||||
});
|
||||
|
||||
test('a participant cannot vote with a card outside the room deck', function () {
|
||||
[$room, $moderator] = createVotingRoom();
|
||||
|
||||
$this->withSession(["room_players.{$room->id}" => $moderator->id])
|
||||
->post(route('room.vote.store', $room), ['value' => '100'])
|
||||
->assertSessionHasErrors('value');
|
||||
|
||||
$this->assertDatabaseCount('votes', 0);
|
||||
});
|
||||
|
||||
test('other votes stay hidden until the moderator reveals the round', function () {
|
||||
[$room, $moderator, $player] = createVotingRoom();
|
||||
|
||||
$player->votes()->create([
|
||||
'room_id' => $room->id,
|
||||
'round' => 1,
|
||||
'value' => '8',
|
||||
]);
|
||||
|
||||
$session = ["room_players.{$room->id}" => $moderator->id];
|
||||
|
||||
$this->withSession($session)
|
||||
->get(route('room.show', $room))
|
||||
->assertInertia(fn (Assert $page) => $page
|
||||
->component('rooms/Show')
|
||||
->where('room.revealed', false)
|
||||
->where('room.players.1.has_voted', true)
|
||||
->where('room.players.1.vote', null));
|
||||
|
||||
$this->withSession($session)
|
||||
->post(route('room.reveal', $room))
|
||||
->assertRedirect();
|
||||
|
||||
$this->withSession($session)
|
||||
->get(route('room.show', $room))
|
||||
->assertInertia(fn (Assert $page) => $page
|
||||
->where('room.revealed', true)
|
||||
->where('room.players.1.vote', '8'));
|
||||
});
|
||||
|
||||
test('only the moderator may reveal cards', function () {
|
||||
[$room, , $player] = createVotingRoom();
|
||||
|
||||
$this->withSession(["room_players.{$room->id}" => $player->id])
|
||||
->post(route('room.reveal', $room))
|
||||
->assertForbidden();
|
||||
|
||||
expect($room->fresh()->revealed_at)->toBeNull();
|
||||
});
|
||||
|
||||
test('starting the next round clears the revealed state', function () {
|
||||
[$room, $moderator] = createVotingRoom();
|
||||
|
||||
$room->update(['revealed_at' => now()]);
|
||||
|
||||
$this->withSession(["room_players.{$room->id}" => $moderator->id])
|
||||
->post(route('room.next-round', $room))
|
||||
->assertRedirect();
|
||||
|
||||
$room->refresh();
|
||||
|
||||
expect($room->current_round)->toBe(2)
|
||||
->and($room->revealed_at)->toBeNull();
|
||||
});
|
||||
|
||||
test('the moderator can reset only the votes from the current round', function () {
|
||||
[$room, $moderator, $player] = createVotingRoom();
|
||||
|
||||
$room->update([
|
||||
'current_round' => 2,
|
||||
'revealed_at' => now(),
|
||||
]);
|
||||
|
||||
$player->votes()->create([
|
||||
'room_id' => $room->id,
|
||||
'round' => 1,
|
||||
'value' => '3',
|
||||
]);
|
||||
|
||||
$player->votes()->create([
|
||||
'room_id' => $room->id,
|
||||
'round' => 2,
|
||||
'value' => '8',
|
||||
]);
|
||||
|
||||
$this->withSession(["room_players.{$room->id}" => $moderator->id])
|
||||
->post(route('room.reset', $room))
|
||||
->assertRedirect();
|
||||
|
||||
$this->assertDatabaseHas('votes', [
|
||||
'room_id' => $room->id,
|
||||
'player_id' => $player->id,
|
||||
'round' => 1,
|
||||
'value' => '3',
|
||||
]);
|
||||
|
||||
$this->assertDatabaseMissing('votes', [
|
||||
'room_id' => $room->id,
|
||||
'round' => 2,
|
||||
]);
|
||||
|
||||
expect($room->fresh()->revealed_at)->toBeNull();
|
||||
});
|
||||
@@ -82,4 +82,4 @@ test('correct password must be provided to delete account', function () {
|
||||
->assertRedirect(route('profile.edit'));
|
||||
|
||||
expect($user->fresh())->not->toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -101,4 +101,4 @@ test('correct password must be provided to update password', function () {
|
||||
$response
|
||||
->assertSessionHasErrors('current_password')
|
||||
->assertRedirect(route('security.edit'));
|
||||
});
|
||||
});
|
||||
|
||||
@@ -2,4 +2,4 @@
|
||||
|
||||
test('that true is true', function () {
|
||||
expect(true)->toBeTrue();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user