commit 06

.gitignore

@@ -1,3 +1,4 @@
 .idea/
 node_modules/
+dist/
 *.env

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start:ui": "vite preview --host --port 4000",
+    "start:ui": "vite preview --host --port 3000",
     "start:server": "NODE_ENV=production tsx ./src/server/main.ts",
     "build:ui": "vite build",
     "dev:ui": "vite --host",

src/App.vue

@@ -2,9 +2,6 @@
   <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 p-4 flex gap-4 overflow-x-auto max-w-full">
         <div class="flex-shrink-0 flex items-center rounded-lg bg-dark-400 overflow-hidden">
@@ -28,6 +25,9 @@
         </transition>
       </main>
     </div>
+    <div class="flex flex-col justify-center items-center text-lg inset-0 absolute bg-dark-900 transition" :class="!isLoading && 'opacity-0 pointer-events-none'">
+      <span class="text-center">Verbindung wird hergestellt…</span>
+    </div>
   </div>
 </template>
 

src/game.ts

@@ -64,6 +64,7 @@ export const useGame = defineStore("gameState", () => {
             trpcClient.director.setObjectVisibility.mutate({ id, isVisible })
         },
         handleGameEvent(event: GameEvent) {
+            console.log(event)
             switch (event.type) {
                 case "room-changed":
                     currentInteraction.value = null

src/screens/InteractionsScreen.vue

@@ -16,7 +16,7 @@
           @object-drop="onObjectInteractionDrop"
       />
     </div>
-    <transition-group tag="div" name="list" ref="objectsContainerElement" class="grid gap-3 grid-cols-2 flex-grow auto-rows-min p-4 pt-0 relative">
+    <transition-group tag="div" name="list" class="grid gap-3 grid-cols-2 flex-grow auto-rows-min p-4 pt-0 relative">
       <ObjectCard
           v-for="object in game.visibleObjectsById.values()"
           :key="object.id"
@@ -44,8 +44,6 @@
   const game = useGame()
 
   const dragCounter = ref(0)
-  const objectsContainerElement = ref<HTMLElement>()
-  const objectsContainerScrollLock = useScrollLock(objectsContainerElement)
 
   const useFloatingObjectIds = reactive(new Set())
   const combineFloatingObjectIds = reactive(new Set())
@@ -84,7 +82,9 @@
 
   function onObjectDragEnd() {
     dragCounter.value--
-    if (dragCounter.value <= 0) objectsContainerScrollLock.value = false
+    if (dragCounter.value <= 0) {
+      // lock scrolling?
+    }
   }
 
   function onObjectUseDrop(objectId: string) {

src/server/game.ts

@@ -11,16 +11,26 @@ interface Events {
 export class Game extends EventEmitter<Events> {
     private currentRoomId: string = script.roomsById.values().next()!.value!.id
     private interactionQueue: Map<string, InteractionQueueItem> = new Map()
+    private visibleObjectIds = new Set<string>()
 
     constructor() {
         super()
+        this.switchRoom(this.currentRoomId)
     }
 
     getInitialStateEvents(): GameEvent[] {
         const events: GameEvent[] = []
 
         events.push({ type: "room-changed", roomId: this.currentRoomId })
+
         this.interactionQueue.forEach(item => events.push({ type: "interaction-queued", item }))
+        script.roomsById.get(this.currentRoomId)!.initialObjects.forEach(o => {
+            if (!this.visibleObjectIds.has(o.id)) events.push({ type: "object-visibility-changed", id: o.id, isVisible: false })
+        })
+
+        script.roomsById.get(this.currentRoomId)!.hiddenObjects.forEach(o => {
+            if (this.visibleObjectIds.has(o.id)) events.push({ type: "object-visibility-changed", id: o.id, isVisible: true })
+        })
 
         return events
     }
@@ -56,6 +66,8 @@ export class Game extends EventEmitter<Events> {
     switchRoom(roomId: string) {
         this.currentRoomId = roomId
         this.interactionQueue.clear()
+        this.visibleObjectIds.clear()
+        script.roomsById.get(this.currentRoomId)!.initialObjects.forEach(o => this.visibleObjectIds.add(o.id))
         this.emit("game-event", { type: "room-changed", roomId })
     }
 
@@ -66,7 +78,7 @@ export class Game extends EventEmitter<Events> {
         this.emit("game-event", { type: "interaction-votes-changed", id, votes: 0 })
         switch (item.interaction.type) {
             case "use":
-                this.emit("game-event", { type: "object-visibility-changed", id: item.interaction.objectId, isVisible: false })
+                this.setObjectVisibility(item.interaction.objectId, false)
                 break
 
             case "combine":
@@ -74,11 +86,11 @@ export class Game extends EventEmitter<Events> {
 
                 if (matchingCombination !== undefined) {
                     matchingCombination.inputs.forEach(input => {
-                        if (input.isConsumed) this.emit("game-event", { type: "object-visibility-changed", id: input.objectId, isVisible: false })
+                        if (input.isConsumed) this.setObjectVisibility(input.objectId, false)
                     })
 
                     matchingCombination.outputIds.forEach(outputId => {
-                        this.emit("game-event", { type: "object-visibility-changed", id: outputId, isVisible: true })
+                        this.setObjectVisibility(outputId, true)
                     })
                 }
 
@@ -93,6 +105,9 @@ export class Game extends EventEmitter<Events> {
     }
 
     setObjectVisibility(id: string, isVisible: boolean) {
+        if (isVisible) this.visibleObjectIds.add(id)
+        else this.visibleObjectIds.delete(id)
+
         this.emit("game-event", { type: "object-visibility-changed", id, isVisible })
     }
 }

src/server/main.ts

@@ -14,7 +14,7 @@ expressApp.use("/trpc", createTrpcMiddleware({
     createContext: ({ req, res }) => createContext(res),
 }))
 
-const { server } = await listen(expressApp, { isProd: !isDev, autoClose: false })
+const { server } = await listen(expressApp, { isProd: !isDev, autoClose: false, port: 3001 })
 
 const wss = new WebSocketServer({ server, path: "/ws" })
 const wssTrpcHandler = applyWSSHandler({

vite.config.ts

@@ -10,10 +10,11 @@ export default defineConfig({
         windiPlugin()
     ],
     server: {
+        port: 3000,
         proxy: {
-            "/trpc": "http://localhost:3000",
+            "/trpc": "http://localhost:3001",
             "/ws": {
-                target: "http://localhost:3000",
+                target: "http://localhost:3001",
                 ws: true
             }
         }