commit 04

package.json

@@ -6,7 +6,7 @@
     "start:ui": "vite preview --host --port 4000",
     "start:server": "NODE_ENV=production tsx ./src/server/main.ts",
     "build:ui": "vite build",
-    "dev:ui": "vite",
+    "dev:ui": "vite --host",
     "dev:server": "NODE_ENV=development tsx watch --clear-screen=false ./src/server/main.ts"
   },
   "devDependencies": {

src/App.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="bg-gray-900 h-100vh w-100vw overflow-hidden text-white">
+  <div class="bg-gray-900 h-[100dvh] overflow-hidden text-white">
     <div :class="$style.noise"/>
     <div :class="$style.vignette"/>
     <div v-if="isLoading" class="flex flex-col justify-center items-center text-lg inset-0 absolute">
       <span class="text-center">Verbindung wird hergestellt…</span>
     </div>
     <div class="h-full relative flex flex-col">
-      <nav class="mx-auto py-4">
+      <nav class="mx-auto py-4 flex gap-4">
         <div class="flex items-center rounded-lg bg-dark-400 overflow-hidden">
           <button
               class="px-4 py-2 bg-gray-700"
@@ -23,6 +23,9 @@
             Abstimmen
           </button>
         </div>
+        <button v-if="!isFullscreen" class="px-3 rounded-lg bg-dark-400 flex items-center justify-center" @click="enterFullscreen()">
+          <CornersOutIcon/>
+        </button>
       </nav>
       <main class="flex-grow">
         <InteractionsScreen v-if="activeTab === 'interactions'"/>
@@ -33,8 +36,9 @@
 </template>
 
 <style module lang="scss">
-  body {
+  html, body {
     user-select: none;
+    height: 100%;
   }
 
   .noise, .vignette {
@@ -94,11 +98,15 @@
   import { useGame } from "./game"
   import InteractionsScreen from "./screens/InteractionsScreen.vue"
   import QueueScreen from "./screens/QueueScreen.vue"
+  import CornersOutIcon from "virtual:icons/ph/corners-out-bold"
+  import { useFullscreen } from "@vueuse/core"
 
   const isLoading = ref(true)
   const activeTab = ref<"interactions" | "queue">("interactions")
   const game = useGame()
 
+  const { isFullscreen, enter: enterFullscreen } = useFullscreen()
+
   trpcClient.join.subscribe(undefined, {
     onStarted: () => {
       isLoading.value = false

src/game.ts

@@ -24,7 +24,8 @@ export const useGame = defineStore("gameState", () => {
         currentRoom,
         allObjectsById: computed(() => {
             const map = new Map<string, GameObject>()
-            currentRoom.value.initialObjects.union(currentRoom.value.hiddenObjects).forEach(o => map.set(o.id, o))
+            currentRoom.value.initialObjects.forEach(o => map.set(o.id, o))
+            currentRoom.value.hiddenObjects.forEach(o => map.set(o.id, o))
             return map
         }),
         currentInteraction,

src/screens/QueueScreen.vue

@@ -1,9 +1,11 @@
 <template>
   <transition-group tag="div" name="list" class="h-full flex flex-col gap-4 p-4 pt-0 relative">
     <InteractionQueueItemCard
-        v-for="item in game.sortedInteractionQueue"
+        v-for="(item, index) in game.sortedInteractionQueue"
         :key="item.id"
         :item="item"
+        class="relative"
+        :style="{ zIndex: 1000 - index }"
     />
   </transition-group>
 </template>