fix:minor fixes in Layout

resources/js/layouts/PublicLayout.vue

@@ -2,10 +2,6 @@
     import { ref } from 'vue'
 
     const navigation = [
-        { name: 'Product', href: '#' },
-        { name: 'Features', href: '#' },
-        { name: 'Marketplace', href: '#' },
-        { name: 'Company', href: '#' },
     ]
 
     const mobileMenuOpen = ref(false)
@@ -27,8 +23,7 @@
                         </button>
                     </div>
                     <div class="hidden lg:flex lg:gap-x-12">
-                        <a v-for="item in navigation" :key="item.name" :href="item.href"
-                            class="text-sm/6 font-semibold text-white">{{ item.name }}</a>
+                        <h1 class="font-extrabold text-2xl">Scrum Poker</h1>
                     </div>
                     <div class="hidden lg:flex lg:flex-1 lg:justify-end">
                         <a href="#" class="text-sm/6 font-semibold text-white">Log in <span

resources/js/pages/rooms/Show.vue

@@ -10,28 +10,10 @@ import {
     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;
-};
+import type { PokerCard, RoomPlayer, SeatStyle } from '@/types/room';
 
 const props = defineProps<{
     room: {
@@ -45,7 +27,7 @@ const props = defineProps<{
             name: string;
             cards: PokerCard[];
         };
-        players: Player[];
+        players: RoomPlayer[];
     };
     currentPlayer: {
         id: number;
@@ -60,7 +42,7 @@ const voteForm = useForm({
 });
 const revealForm = useForm<{ room?: string }>({});
 const nextRoundForm = useForm<{ room?: string }>({});
-const resetForm = useForm({});
+const resetForm = useForm<{ room?: string }>({});
 const copied = ref(false);
 
 usePoll(2_000, {
@@ -84,10 +66,11 @@ const positionedPlayers = computed(() => {
         const angle = Math.PI / 2 + (index * Math.PI * 2) / playerCount;
         const horizontalRadius = 39;
         const verticalRadius = 40;
-        const cardDistance = 88;
+        const cardDistance = 96;
 
         return {
             ...player,
+            isTopSeat: Math.sin(angle) < -0.25,
             seatStyle: {
                 left: `${50 + Math.cos(angle) * horizontalRadius}%`,
                 top: `${48 + Math.sin(angle) * verticalRadius}%`,
@@ -166,11 +149,11 @@ function cardLabel(value: string | null): string {
     );
 }
 
-function isCurrentPlayer(player: Player): boolean {
+function isCurrentPlayer(player: RoomPlayer): boolean {
     return player.id === props.currentPlayer.id;
 }
 
-function playerVote(player: Player): string | null {
+function playerVote(player: RoomPlayer): string | null {
     if (isCurrentPlayer(player)) {
         return props.currentPlayer.current_vote;
     }
@@ -189,24 +172,19 @@ function playerVote(player: Player): string | null {
             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">
+                <h1 class="text-2xl font-bold 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"
+                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"
                 @click="copyInviteLink"
             >
                 <span>
                     <span
-                        class="block text-[10px] tracking-[0.18em] text-slate-400 uppercase"
+                        class="block text-sm tracking-[0.18em] text-slate-400"
                     >
                         Raumcode
                     </span>
@@ -292,7 +270,12 @@ function playerVote(player: Player): string | null {
                         >
                     </div>
 
-                    <div class="mt-2 flex flex-col items-center gap-1">
+                    <div
+                        class="player-details mt-2 flex flex-col items-center gap-1"
+                        :class="{
+                            'player-details-above': player.isTopSeat,
+                        }"
+                    >
                         <p
                             class="player-name max-w-32 text-center text-sm leading-tight font-semibold text-slate-100"
                         >
@@ -476,6 +459,10 @@ function playerVote(player: Player): string | null {
     overflow-wrap: anywhere;
 }
 
+.player-details-above {
+    transform: translateY(calc(-100% - 4.5rem));
+}
+
 .moderator-controls {
     position: absolute;
     right: 1.5rem;
@@ -498,7 +485,7 @@ function playerVote(player: Player): string | null {
 
 .seat-card {
     position: absolute;
-    top: 50%;
+    top: 1.75rem;
     left: 50%;
     width: 3.15rem;
     height: 4.35rem;
@@ -627,6 +614,10 @@ function playerVote(player: Player): string | null {
         width: 6.5rem;
     }
 
+    .player-details-above {
+        transform: translateY(calc(-100% - 4rem));
+    }
+
     .moderator-controls {
         right: 1rem;
         bottom: 1rem;
@@ -638,6 +629,7 @@ function playerVote(player: Player): string | null {
     }
 
     .seat-card {
+        top: 1.5rem;
         width: 2.65rem;
         height: 3.65rem;
         transform: translate(-50%, -50%) translate(var(--card-x), var(--card-y))

resources/js/types/index.ts

@@ -1,3 +1,4 @@
 export * from './auth';
 export * from './navigation';
+export * from './room';
 export * from './ui';

resources/js/types/room.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from 'vue';
+
+export type PokerCard = {
+    key: string;
+    label: string;
+};
+
+export type RoomPlayer = {
+    id: number;
+    name: string;
+    is_moderator: boolean;
+    has_voted: boolean;
+    vote: string | null;
+};
+
+export type SeatStyle = CSSProperties & {
+    '--card-x': string;
+    '--card-y': string;
+};