Add presenter mode and app version display

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 cardDistance = 96;
+        const verticalRadius = hasCompactHeight.value ? 34 : 40;
+        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%;