Merge pull request #2 from ericasch6/codex/presenter-mode-version

.env.example

@@ -66,6 +66,7 @@ AWS_BUCKET=
 AWS_USE_PATH_STYLE_ENDPOINT=false
 
 VITE_APP_NAME="${APP_NAME}"
+VITE_APP_VERSION=local
 
 REVERB_APP_ID=local
 REVERB_APP_KEY=local-key

.github/workflows/ci_cd.yml

@@ -49,6 +49,7 @@ jobs:
               printf -v run_attempt '%03d' "${GITHUB_RUN_ATTEMPT}"
               tag="main-${GITHUB_RUN_NUMBER}-${run_attempt}-${GITHUB_SHA:0:12}"
               environment="staging"
+              vite_app_version="staging-${GITHUB_SHA:0:12}"
               vite_reverb_app_key="1af96b48d2ef78983e4ef281eed3a48b"
               vite_reverb_host="scrum-poker.twyco-staging.de"
               ;;
@@ -68,6 +69,7 @@ jobs:
               fi
 
               environment="production"
+              vite_app_version="${tag}"
               vite_reverb_app_key="cfd9d925ff339374c04997beb90fbc32"
               vite_reverb_host="scrum-poker.petsch-studios.de"
               ;;
@@ -81,6 +83,7 @@ jobs:
             echo "image=${image}"
             echo "tag=${tag}"
             echo "environment=${environment}"
+            echo "vite_app_version=${vite_app_version}"
             echo "vite_reverb_app_key=${vite_reverb_app_key}"
             echo "vite_reverb_host=${vite_reverb_host}"
           } >> "${GITHUB_OUTPUT}"
@@ -110,6 +113,7 @@ jobs:
           IMAGE: ${{ steps.image.outputs.image }}
           IMAGE_TAG: ${{ steps.image.outputs.tag }}
           DEPLOYMENT_ENVIRONMENT: ${{ steps.image.outputs.environment }}
+          VITE_APP_VERSION: ${{ steps.image.outputs.vite_app_version }}
           VITE_REVERB_APP_KEY: ${{ steps.image.outputs.vite_reverb_app_key }}
           VITE_REVERB_HOST: ${{ steps.image.outputs.vite_reverb_host }}
           VITE_REVERB_PORT: "443"
@@ -126,6 +130,7 @@ jobs:
           docker buildx build \
             --file Dockerfile \
             --target runtime \
+            --build-arg "VITE_APP_VERSION=${VITE_APP_VERSION}" \
             --build-arg "VITE_REVERB_APP_KEY=${VITE_REVERB_APP_KEY}" \
             --build-arg "VITE_REVERB_HOST=${VITE_REVERB_HOST}" \
             --build-arg "VITE_REVERB_PORT=${VITE_REVERB_PORT}" \

Dockerfile

@@ -51,12 +51,14 @@ WORKDIR /var/www
 
 FROM php_base AS build
 
+ARG VITE_APP_VERSION=local
 ARG VITE_REVERB_APP_KEY
 ARG VITE_REVERB_HOST
 ARG VITE_REVERB_PORT
 ARG VITE_REVERB_SCHEME
 
-ENV VITE_REVERB_APP_KEY=${VITE_REVERB_APP_KEY} \
+ENV VITE_APP_VERSION=${VITE_APP_VERSION} \
+    VITE_REVERB_APP_KEY=${VITE_REVERB_APP_KEY} \
     VITE_REVERB_HOST=${VITE_REVERB_HOST} \
     VITE_REVERB_PORT=${VITE_REVERB_PORT} \
     VITE_REVERB_SCHEME=${VITE_REVERB_SCHEME}

resources/js/components/AppVersion.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const appVersion = import.meta.env.VITE_APP_VERSION?.trim() || 'local';
+</script>
+
+<template>
+    <span
+        class="pointer-events-none fixed bottom-2 left-2 z-50 font-mono text-[10px] text-slate-400/70 select-none"
+        :aria-label="`Version ${appVersion}`"
+    >
+        {{ appVersion }}
+    </span>
+</template>

resources/js/components/rooms/RoomHeader.vue

@@ -3,10 +3,12 @@ import { Link } from '@inertiajs/vue3';
 import { Check, Copy } from '@lucide/vue';
 import { ref } from 'vue';
 
+import { Checkbox } from '@/components/ui/checkbox';
 import { favorite } from '@/routes/room';
-import type { RoomHeaderProps } from '@/types/room';
+import type { RoomHeaderEmits, RoomHeaderProps } from '@/types/room';
 
 const props = defineProps<RoomHeaderProps>();
+const emit = defineEmits<RoomHeaderEmits>();
 
 const copied = ref(false);
 
@@ -24,7 +26,7 @@ async function copyInviteLink(): Promise<void> {
 
 <template>
     <header
-        class="mx-auto flex max-w-6xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
+        class="mx-auto flex w-full max-w-6xl flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"
     >
         <div>
             <h1 class="text-2xl font-bold sm:text-3xl">
@@ -45,21 +47,39 @@ async function copyInviteLink(): Promise<void> {
             </Link>
         </div>
 
-        <button
+        <div class="flex flex-col items-end gap-2">
-            type="button"
+            <button
-            class="flex w-fit items-center gap-3 rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-left transition hover:bg-slate-700"
+                type="button"
-            @click="copyInviteLink"
+                class="flex w-fit items-center gap-3 rounded-xl border border-slate-700 bg-slate-800 px-4 py-2.5 text-left transition hover:bg-slate-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-300"
-        >
+                @click="copyInviteLink"
-            <span>
+            >
-                <span class="block text-sm tracking-[0.18em] text-slate-400">
+                <span>
-                    Raumcode
+                    <span
+                        class="block text-sm tracking-[0.18em] text-slate-400"
+                    >
+                        Raumcode
+                    </span>
+                    <strong class="font-mono text-lg tracking-[0.2em]">
+                        {{ join_code }}
+                    </strong>
                 </span>
-                <strong class="font-mono text-lg tracking-[0.2em]">
+                <Check v-if="copied" class="size-5 text-emerald-300" />
-                    {{ join_code }}
+                <Copy v-else class="size-5 text-slate-300" />
-                </strong>
+            </button>
-            </span>
+
-            <Check v-if="copied" class="size-5 text-emerald-300" />
+            <label
-            <Copy v-else class="size-5 text-slate-300" />
+                for="presenter-mode"
-        </button>
+                class="flex cursor-pointer items-center gap-2 text-sm text-slate-300"
+            >
+                <Checkbox
+                    id="presenter-mode"
+                    :model-value="presenterMode"
+                    @update:model-value="
+                        emit('update:presenterMode', $event === true)
+                    "
+                />
+                <span>Präsentatormodus</span>
+            </label>
+        </div>
     </header>
 </template>

resources/js/components/rooms/RoomModeratorControls.vue

@@ -106,4 +106,24 @@ function resetVotes(): void {
         left: 1rem;
     }
 }
+
+@media (min-width: 768px) and (max-height: 800px) {
+    .moderator-controls,
+    .reset-controls {
+        bottom: 0.75rem;
+    }
+
+    .moderator-controls {
+        right: 0.75rem;
+    }
+
+    .reset-controls {
+        left: 0.75rem;
+    }
+
+    button {
+        padding: 0.5rem 0.75rem;
+        font-size: 0.875rem;
+    }
+}
 </style>

resources/js/components/rooms/RoomSeat.vue

@@ -39,7 +39,7 @@ function playerVote(): string | null {
             :aria-label="`${player.name} hat eine Karte gewählt`"
         >
             <div
-                v-if="isCurrentPlayer()"
+                v-if="isCurrentPlayer() && !presenterMode"
                 class="own-vote-card"
                 :class="{ 'is-revealed': revealed }"
             >
@@ -313,6 +313,27 @@ function playerVote(): string | null {
     }
 }
 
+@media (min-width: 768px) and (max-height: 800px) {
+    .player-seat {
+        width: 7rem;
+    }
+
+    .player-details {
+        margin-top: 0.25rem;
+    }
+
+    .seat-card {
+        top: 1.5rem;
+        width: 2.75rem;
+        height: 3.8rem;
+    }
+
+    .own-vote-card,
+    .flip-card-face {
+        font-size: 1rem;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .flip-card-inner {
         transition: none;

resources/js/components/rooms/RoomTable.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core';
 import { computed, ref } from 'vue';
 
 import RoomModeratorControls from '@/components/rooms/RoomModeratorControls.vue';
@@ -11,6 +12,9 @@ import type {
 } from '@/types/room';
 
 const props = defineProps<RoomTableProps>();
+const hasCompactHeight = useMediaQuery(
+    '(min-width: 768px) and (max-height: 800px)',
+);
 
 const gameBoard = ref<HTMLElement | null>(null);
 const { activePaperBalls, hitPlayerIds, throwingAtPlayerId, throwPaperBall } =
@@ -36,8 +40,8 @@ const positionedPlayers = computed<PositionedRoomPlayer[]>(() => {
     return orderedPlayers.map((player, index) => {
         const angle = Math.PI / 2 + (index * Math.PI * 2) / playerCount;
         const horizontalRadius = 39;
-        const verticalRadius = 40;
+        const verticalRadius = hasCompactHeight.value ? 34 : 40;
-        const cardDistance = 96;
+        const cardDistance = hasCompactHeight.value ? 72 : 96;
 
         return {
             ...player,
@@ -58,7 +62,7 @@ const voteCount = computed(
 </script>
 
 <template>
-    <section class="mt-5 w-full">
+    <section class="mt-5 w-full md:mt-3 md:min-h-0 md:flex-1">
         <div ref="gameBoard" class="game-board" aria-label="Scrum-Poker-Tisch">
             <div class="poker-table" aria-hidden="true">
                 <div class="table-highlight"></div>
@@ -109,6 +113,7 @@ const voteCount = computed(
                 :current-vote="currentPlayer.current_vote"
                 :cards="room.deck.cards"
                 :revealed="room.revealed"
+                :presenter-mode="presenterMode"
                 :is-paper-ball-hit="hitPlayerIds.includes(player.id)"
                 :throw-disabled="throwingAtPlayerId !== null"
                 @throw-paper-ball="throwPaperBall"
@@ -132,6 +137,13 @@ const voteCount = computed(
     isolation: isolate;
 }
 
+@media (min-width: 768px) {
+    .game-board {
+        height: 100%;
+        min-height: 0;
+    }
+}
+
 .poker-table {
     position: absolute;
     inset: 20% 15% 21%;

resources/js/components/rooms/RoomVoteDeck.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { useForm } 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';
@@ -7,6 +9,22 @@ import type { RoomVoteDeckProps } from '@/types/room';
 
 const props = defineProps<RoomVoteDeckProps>();
 
+const cardShortcuts = [
+    '1',
+    '2',
+    '3',
+    '4',
+    '5',
+    '6',
+    '7',
+    '8',
+    '9',
+    '0',
+    ...Array.from({ length: 24 }, (_, index) =>
+        String.fromCharCode('a'.charCodeAt(0) + index),
+    ),
+];
+
 const voteForm = useForm({
     value: props.currentVote ?? '',
 });
@@ -33,10 +51,52 @@ function submitVote(value: string): void {
         },
     });
 }
+
+function shortcutForCard(index: number): string | null {
+    return cardShortcuts[index] ?? null;
+}
+
+function isEditableTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+
+    return (
+        target.isContentEditable ||
+        ['INPUT', 'SELECT', 'TEXTAREA'].includes(target.tagName)
+    );
+}
+
+function handleKeyboardVote(event: KeyboardEvent): void {
+    if (
+        !props.presenterMode ||
+        props.revealed ||
+        voteForm.processing ||
+        event.repeat ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.metaKey ||
+        isEditableTarget(event.target)
+    ) {
+        return;
+    }
+
+    const cardIndex = cardShortcuts.indexOf(event.key.toLowerCase());
+    const card = props.cards[cardIndex];
+
+    if (card === undefined) {
+        return;
+    }
+
+    event.preventDefault();
+    submitVote(card.key);
+}
+
+useEventListener('keydown', handleKeyboardVote);
 </script>
 
 <template>
-    <section class="mx-auto mt-6 max-w-4xl text-center">
+    <section class="mx-auto mt-6 max-w-4xl text-center md:mt-3 md:shrink-0">
         <div class="mb-3 flex items-center justify-center gap-3">
             <span class="h-px w-10 bg-white/10"></span>
             <h2
@@ -52,17 +112,28 @@ function submitVote(value: string): void {
             class="flex flex-wrap justify-center gap-2.5 sm:gap-3"
         >
             <button
-                v-for="card in cards"
+                v-for="(card, index) in cards"
                 :key="card.key"
                 type="button"
                 class="deck-card"
-                :class="{ 'is-selected': voteForm.value === card.key }"
+                :class="{
+                    'is-selected':
+                        !presenterMode && 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>
+                <span class="card-label">{{ card.label }}</span>
+                <span
+                    v-if="presenterMode && shortcutForCard(index)"
+                    class="card-shortcut"
+                    aria-hidden="true"
+                >
+                    <Keyboard class="size-3" />
+                    <kbd>{{ shortcutForCard(index) }}</kbd>
+                </span>
             </button>
         </div>
 
@@ -78,6 +149,7 @@ function submitVote(value: string): void {
 
 <style scoped>
 .deck-card {
+    position: relative;
     display: grid;
     width: 3.75rem;
     aspect-ratio: 3 / 4;
@@ -94,11 +166,30 @@ function submitVote(value: string): void {
         box-shadow 160ms ease;
 }
 
-.deck-card span {
+.deck-card > .card-label {
     font-size: 1.2rem;
     font-weight: 800;
 }
 
+.card-shortcut {
+    position: absolute;
+    bottom: 0.25rem;
+    left: 50%;
+    display: flex;
+    align-items: center;
+    gap: 0.2rem;
+    color: #64748b;
+    font-size: 0.6rem;
+    font-weight: 700;
+    line-height: 1;
+    transform: translateX(-50%);
+}
+
+.card-shortcut kbd {
+    font: inherit;
+    text-transform: uppercase;
+}
+
 .deck-card:hover:not(:disabled) {
     transform: translateY(-0.35rem);
     border-color: rgb(103 232 249 / 80%);
@@ -122,6 +213,12 @@ function submitVote(value: string): void {
     }
 }
 
+@media (min-width: 768px) and (max-height: 800px) {
+    .deck-card {
+        width: 3.25rem;
+    }
+}
+
 @media (prefers-reduced-motion: reduce) {
     .deck-card {
         transition: none;

resources/js/layouts/PublicLayout.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { Link, usePage } from '@inertiajs/vue3';
 import { computed } from 'vue';
+
+import AppVersion from '@/components/AppVersion.vue';
 import { dashboard, home, login, logout, register } from '@/routes';
 
 const page = usePage();
@@ -57,5 +59,7 @@ const user = computed(() => page.props.auth.user);
         <main class="p-6">
             <slot />
         </main>
+
+        <AppVersion />
     </div>
 </template>

resources/js/pages/rooms/Show.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Head, usePage, usePoll } from '@inertiajs/vue3';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 
 import RoomHeader from '@/components/rooms/RoomHeader.vue';
 import RoomRetentionNotice from '@/components/rooms/RoomRetentionNotice.vue';
@@ -12,6 +12,7 @@ import type { RoomPageProps } from '@/types/room';
 const props = defineProps<RoomPageProps>();
 
 const page = usePage();
+const presenterMode = ref(false);
 const roomNotice = computed(() => page.props.roomNotice);
 const canFavorite = computed(
     () => page.props.auth.user?.id != props.room.owner_id,
@@ -31,7 +32,7 @@ usePoll(30_000, {
     <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"
+        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"
     >
         <RoomRetentionNotice v-if="roomNotice" :notice="roomNotice" />
 
@@ -41,15 +42,21 @@ usePoll(30_000, {
             :join_code="room.join_code"
             :is_favorite="room.is_favorite"
             :can-favorite="canFavorite"
+            v-model:presenter-mode="presenterMode"
         />
 
-        <RoomTable :room="room" :current-player="currentPlayer" />
+        <RoomTable
+            :room="room"
+            :current-player="currentPlayer"
+            :presenter-mode="presenterMode"
+        />
 
         <RoomVoteDeck
             :room-id="room.id"
             :revealed="room.revealed"
             :cards="room.deck.cards"
             :current-vote="currentPlayer.current_vote"
+            :presenter-mode="presenterMode"
         />
     </main>
 </template>

resources/js/types/global.d.ts

@@ -5,6 +5,7 @@ import type { RoomNotice } from '@/types/room';
 declare module 'vite/client' {
     interface ImportMetaEnv {
         readonly VITE_APP_NAME: string;
+        readonly VITE_APP_VERSION?: string;
         [key: string]: string | boolean | undefined;
     }
 

resources/js/types/room.ts

@@ -94,11 +94,17 @@ export type RoomHeaderProps = Pick<
     'id' | 'title' | 'join_code' | 'is_favorite'
 > & {
     canFavorite: boolean;
+    presenterMode: boolean;
+};
+
+export type RoomHeaderEmits = {
+    'update:presenterMode': [value: boolean];
 };
 
 export type RoomTableProps = {
     room: PokerRoom;
     currentPlayer: CurrentRoomPlayer;
+    presenterMode: boolean;
 };
 
 export type RoomSeatProps = {
@@ -107,6 +113,7 @@ export type RoomSeatProps = {
     currentVote: string | null;
     cards: PokerCard[];
     revealed: boolean;
+    presenterMode: boolean;
     isPaperBallHit: boolean;
     throwDisabled: boolean;
 };
@@ -122,6 +129,7 @@ export type RoomVoteDeckProps = {
     revealed: boolean;
     cards: PokerCard[];
     currentVote: string | null;
+    presenterMode: boolean;
 };
 
 export type RoomStateChange =