commit 01

2024-12-26 18:54:19 +01:00 · 2024-12-26 18:54:19 +01:00 · 08b0f87596
commit 08b0f87596
38 changed files with 4021 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
 .idea/
 node_modules/
 *.env
--- a/.nvmrc
+++ b/.nvmrc
@ -0,0 +1 @@
 22
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
 <!DOCTYPE html>
 <html lang="de">
    <head>
        <meta charset="UTF-8">
        <title>Level Up</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <script type="module" src="./src/index.ts"></script>
        <link rel="stylesheet" href="./node_modules/@fontsource-variable/inter/wght.css"/>
        <link rel="stylesheet" href="./node_modules/@fontsource/titan-one/400.css"/>
    </head>
    <body>
        <div id="app"></div>
    </body>
 </html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,53 @@
 {
  "name": "level-up",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "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:server": "NODE_ENV=development tsx watch --clear-screen=false ./src/server/main.ts"
  },
  "devDependencies": {
    "@iconify-json/ph": "^1.2.2",
    "@types/express": "^5.0.0",
    "@types/lodash-es": "^4.17.12",
    "@types/node": "22.10.2",
    "@types/ws": "^8.5.13",
    "@vitejs/plugin-vue": "^5.2.1",
    "sass": "^1.83.0",
    "tsx": "^4.19.2",
    "typescript": "^5.7.2",
    "unplugin-icons": "^0.22.0",
    "vite": "^6.0.3",
    "vite-plugin-pages": "^0.32.4",
    "vite-plugin-windicss": "^1.9.4",
    "windicss": "^3.5.6"
  },
  "dependencies": {
    "@fontsource-variable/inter": "^5.1.0",
    "@fontsource/titan-one": "^5.1.0",
    "@headlessui/vue": "^1.7.23",
    "@interactjs/actions": "^1.10.27",
    "@interactjs/auto-start": "^1.10.27",
    "@interactjs/interact": "^1.10.27",
    "@trpc/client": "^10.45.2",
    "@trpc/server": "^10.45.2",
    "@vueuse/core": "^12.0.0",
    "@vueuse/integrations": "^12.0.0",
    "bufferutil": "^4.0.8",
    "eventemitter3": "^5.0.1",
    "express": "^4.21.2",
    "immer": "^10.1.1",
    "listhen": "^1.9.0",
    "lodash-es": "^4.17.21",
    "nanoid": "^5.0.9",
    "pinia": "^2.3.0",
    "superjson": "^2.2.2",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0",
    "ws": "^8.18.0",
    "zod": "^3.24.1"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/objects/haustür.png
+++ b/public/objects/haustür.png
--- a/public/objects/kakao.png
+++ b/public/objects/kakao.png
--- a/public/objects/kakaopulver.png
+++ b/public/objects/kakaopulver.png
--- a/public/objects/kühlschrank.png
+++ b/public/objects/kühlschrank.png
--- a/public/objects/milch.png
+++ b/public/objects/milch.png
--- a/public/objects/offene-haustür.png
+++ b/public/objects/offene-haustür.png
--- a/public/objects/schlüssel.png
+++ b/public/objects/schlüssel.png
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,93 @@
 <template>
  <div class="bg-gray-900 h-100vh w-100vw overflow-hidden text-white">
    <div :class="$style.noise"/>
    <div :class="$style.vignette"/>
    <div class="relative h-full">
      <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>
      <main>
        <InteractionsScreen/>
      </main>
    </div>
  </div>
 </template>
 <style module lang="scss">
  body {
    user-select: none;
  }
  .noise, .vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .noise {
    background: url("./assets/noise.png") repeat;
    opacity: 10%;
  }
  .vignette {
    background: radial-gradient(rgb(0 0 0 / 0%) 40%, rgb(0 0 0 / 20%));
  }
 </style>
 <style>
  body {
    min-height: 100vh;
    width: 100vw;
    overflow-x: hidden;
    font-size: 16px;
    user-select: none;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 200ms ease;
  }
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }
  .slide-down-enter-active,
  .slide-down-leave-active {
    position: absolute;
    transition: 200ms ease;
    transition-property: opacity, transform;
  }
  .slide-down-enter-from,
  .slide-down-leave-to {
    opacity: 0;
    transform: translateY(40%);
  }
 </style>
 <script setup lang="ts">
  import { ref } from "vue"
  import { trpcClient } from "./trpc"
  import { useGame } from "./game"
  import InteractionsScreen from "./screens/InteractionsScreen.vue"
  const isLoading = ref(true)
  const game = useGame()
  trpcClient.join.subscribe(undefined, {
    onStarted: () => {
      isLoading.value = false
    },
    onData: game.handleGameEvent,
    onError: error => {
      console.error("🔴", error)
    },
    onStopped() {
        location.reload()
    },
  })
 </script>
--- a/src/assets/noise.png
+++ b/src/assets/noise.png
--- a/src/components/ObjectCard.vue
+++ b/src/components/ObjectCard.vue
@ -0,0 +1,82 @@
 <template>
  <div
      class="flex flex-col items-center gap-2 bg-dark-600 rounded-lg p-3 border border-solid"
      :class="[$style.root, borderClass]"
      :style="{
        transform: dragPosition === null ? undefined : `translate(${dragPosition.x}px, ${dragPosition.y}px) scale(${isOverDropzone ? 0.5 : 1})`,
        transformOrigin: pointerCoordinates === null ? undefined : `${pointerCoordinates.x}px ${pointerCoordinates.y}px`,
      }"
      :data-object-id="object.id"
  >
    <img :src="`/objects/${props.object.id}.png`" :alt="object.label" class="invert filter object-contain max-w-15"/>
    <div class="text-sm text-gray-300">
      {{ object.label }}
    </div>
  </div>
 </template>
 <style module lang="scss">
  .root {
    touch-action: none;
    transition: transform 50ms ease, background-color 200ms ease;
  }
 </style>
 <script setup lang="ts">
  import type { GameObject } from "../shared/script/types"
  import interact from "@interactjs/interact"
  import { useCurrentElement } from "@vueuse/core"
  import { computed, onMounted, onUnmounted, ref } from "vue"
  const props = defineProps<{
    object: GameObject
    isOverDropzone: boolean
    markedFor: null | "use" | "combine"
  }>()
  const emit = defineEmits<{
    "drag-start": []
    "drag-end": []
  }>()
  const element = useCurrentElement()
  const dragPosition = ref<null | { x: number; y: number }>(null)
  const pointerCoordinates = ref<null | { x: number; y: number }>(null)
  onMounted(() => {
    const interactable = interact(element.value as HTMLElement).draggable({
      listeners: {
        start(event) {
          const elementBounds = (element.value as HTMLElement).getBoundingClientRect()
          pointerCoordinates.value = {
            x: event.clientX0 - elementBounds.x,
            y: event.clientY0 - elementBounds.y,
          }
          dragPosition.value = { x: 0, y: 0 }
          emit("drag-start")
        },
        move(event) {
          dragPosition.value = {
            x: (dragPosition.value?.x ?? 0) + event.dx,
            y: (dragPosition.value?.y ?? 0) + event.dy,
          }
        },
        end(event) {
          dragPosition.value = null
          emit("drag-end")
        }
      }
    })
    onUnmounted(() => interactable.unset())
  })
  const borderClass = computed(() => {
    switch (props.markedFor) {
      case null: return "border-dark-600"
      case "use": return "border-green-600"
      case "combine": return "border-blue-900"
    }
  })
 </script>
--- a/src/components/ObjectCardDropZone.vue
+++ b/src/components/ObjectCardDropZone.vue
@ -0,0 +1,64 @@
 <template>
  <div
      class="flex items-center justify-center text-xl w-0 flex-grow py-4 bg-green-900 bg-opacity-60"
      :class="$style.root"
      :data-has-floating="hasFloating"
  >
    <span>{{ label }}</span>
  </div>
 </template>
 <style module lang="scss">
  .root {
    transition: transform 200ms ease;
    &[data-has-floating="true"] {
      transform: scale(1.2)
    }
  }
 </style>
 <script setup lang="ts">
  import interact from "@interactjs/interact"
  import { useCurrentElement } from "@vueuse/core"
  import { onMounted, onUnmounted } from "vue"
  const props = defineProps<{
    label: string
    hasFloating: boolean
  }>()
  const emit = defineEmits<{
    "object-change": [string, boolean]
    "object-drop": [string]
  }>()
  const element = useCurrentElement()
  onMounted(() => {
    const interactable = interact(element.value as HTMLElement).dropzone({
      overlap: "pointer",
      ondragenter(event) {
        const draggedElement = event.relatedTarget
        const objectId = draggedElement.dataset?.objectId
        if (objectId === undefined) return
        emit("object-change", objectId, true)
      },
      ondragleave(event) {
        const draggedElement = event.relatedTarget
        const objectId = draggedElement.dataset?.objectId
        if (objectId === undefined) return
        emit("object-change", objectId, false)
      },
      ondrop(event) {
        const draggedElement = event.relatedTarget
        const objectId = draggedElement.dataset?.objectId
        if (objectId === undefined) return
        emit("object-change", objectId, false)
        emit("object-drop", objectId)
      }
    })
    onUnmounted(() => interactable.unset())
  })
 </script>
--- a/src/game.ts
+++ b/src/game.ts
@ -0,0 +1,63 @@
 import { defineStore } from "pinia"
 import { computed, reactive, ref } from "vue"
 import { script } from "./shared/script"
 import type { Interaction, InteractionQueueItem } from "./shared/script/types"
 import { trpcClient } from "./trpc"
 import type { GameEvent } from "./shared/gameEvents"
 import { getInteractionQueueItemId } from "./shared/util"
 export const useGame = defineStore("gameState", () => {
    const currentRoomId = ref(script.roomsById.values().next().value!.id)
    const interactionQueue = reactive(new Map<string, InteractionQueueItem>())
    const currentInteraction = ref<null | Interaction>(null)
    const currentInteractionId = computed(() =>
        currentInteraction.value === null ? null : getInteractionQueueItemId(currentInteraction.value))
    return {
        currentRoomId,
        interactionQueue,
        currentRoom: computed(() => script.roomsById.get(currentRoomId.value)!),
        currentInteraction,
        currentInteractionId,
        voteForInteraction(interaction: Interaction) {
            if (currentInteractionId.value === getInteractionQueueItemId(interaction)) return
            if (currentInteractionId.value !== null) trpcClient.player.removeInteractionVote.mutate({ queueItemId: currentInteractionId.value })
            currentInteraction.value = interaction
            trpcClient.player.voteForInteraction.mutate({ interaction })
        },
        removeInteractionVote(queueItemId: string) {
            trpcClient.player.removeInteractionVote.mutate({ queueItemId })
            currentInteraction.value = null
        },
        switchRoom(roomId: string) {
            trpcClient.director.switchRoom.mutate({ roomId })
        },
        removeInteractionQueueItem(id: string) {
            trpcClient.director.removeInteractionQueueItem.mutate({ id })
        },
        handleGameEvent(event: GameEvent) {
            console.log(event)
            switch (event.type) {
                case "room-changed":
                    interactionQueue.clear()
                    currentRoomId.value = event.roomId
                    currentInteraction.value = null
                    break
                case "interaction-queued":
                    interactionQueue.set(event.item.id, event.item)
                    break
                case "interaction-votes-changed":
                    if (event.votes <= 0) {
                        interactionQueue.delete(event.id)
                        if (currentInteractionId.value === event.id) currentInteraction.value = null
                    } else {
                        interactionQueue.get(event.id)!.votes = event.votes
                    }
                    break
            }
        }
    }
 })
--- a/src/index.ts
+++ b/src/index.ts
@ -0,0 +1,19 @@
 import "virtual:windi.css"
 import "@interactjs/actions"
 import "@interactjs/auto-start"
 import { createApp } from "vue"
 import { createRouter, createWebHistory } from "vue-router"
 import App from "./App.vue"
 import routes from "virtual:generated-pages"
 import { createPinia } from "pinia"
 const router = createRouter({
    routes,
    history: createWebHistory()
 })
 createApp(App)
    .use(router)
    .use(createPinia())
    .mount("#app")
--- a/src/screens/AdminScreen.vue
+++ b/src/screens/AdminScreen.vue
@ -0,0 +1,11 @@
 <template>
  <
 </template>
 <style module lang="scss">
 </style>
 <script setup lang="ts">
 </script>
--- a/src/screens/InteractionsScreen.vue
+++ b/src/screens/InteractionsScreen.vue
@ -0,0 +1,91 @@
 <template>
  <div class="h-100vh flex flex-col relative">
    <div class="flex-shrink-0 flex order-1">
      <ObjectCardDropZone
          label="Use"
          class="bg-green-800"
          :has-floating="useFloatingObjectIds.size > 0"
          @object-change="(v, i) => createSetInclusionSetter(useFloatingObjectIds)(v, i)"
          @object-drop="onObjectUseDrop"
      />
      <ObjectCardDropZone
          label="Combine"
          class="bg-blue-900"
          :has-floating="combineFloatingObjectIds.size > 0"
          @object-change="(v, i) => createSetInclusionSetter(combineFloatingObjectIds)(v, i)"
      />
    </div>
    <div ref="objectsContainerElement" class="grid gap-3 grid-cols-2 flex-grow auto-rows-min p-4">
      <ObjectCard
          v-for="object in game.currentRoom.initialObjects"
          :key="object.id"
          :object="object"
          :is-over-dropzone="allFloatingObjectIds.has(object.id)"
          :marked-for="getMarkedFor(object.id)"
          @drag-start="onObjectDragStart"
          @drag-end="onObjectDragEnd"
      />
    </div>
  </div>
 </template>
 <style module lang="scss">
 </style>
 <script setup lang="ts">
  import ObjectCard from "../components/ObjectCard.vue"
  import { useGame } from "../game"
  import { computed, reactive, ref } from "vue"
  import { useScrollLock } from "@vueuse/core"
  import ObjectCardDropZone from "../components/ObjectCardDropZone.vue"
  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())
  const allFloatingObjectIds = computed(() => new Set([...useFloatingObjectIds, ...combineFloatingObjectIds]))
  function createSetInclusionSetter<T>(set: Set<T>) {
    return (value: T, isIncluded: boolean) => {
      if (isIncluded) set.add(value)
      else set.delete(value)
    }
  }
  function getMarkedFor(objectId: string) {
    if (game.currentInteraction !== null) {
      switch (game.currentInteraction.type) {
        case "use":
          if (game.currentInteraction.objectId === objectId) return "use"
          break
        case "combine":
          if (game.currentInteraction.objectIds.has(objectId)) return "combine"
          break
      }
    }
    return null
  }
  function onObjectDragStart() {
    dragCounter.value++
  }
  function onObjectDragEnd() {
    dragCounter.value--
    if (dragCounter.value <= 0) objectsContainerScrollLock.value = false
  }
  function onObjectUseDrop(objectId: string) {
    game.voteForInteraction({
      type: "use",
      objectId
    })
  }
 </script>
--- a/src/server/game.ts
+++ b/src/server/game.ts
@ -0,0 +1,69 @@
 import EventEmitter from "eventemitter3"
 import type { GameEvent } from "../shared/gameEvents"
 import type { Interaction, InteractionQueueItem } from "../shared/script/types"
 import { script } from "../shared/script"
 import { getInteractionQueueItemId } from "../shared/util"
 interface Events {
    "game-event": [GameEvent]
 }
 export class Game extends EventEmitter<Events> {
    private currentRoomId: string = script.roomsById.values().next()!.value!.id
    private interactionQueue: Map<string, InteractionQueueItem> = new Map()
    constructor() {
        super()
    }
    getInitialStateEvents(): GameEvent[] {
        const events: GameEvent[] = []
        events.push({ type: "room-changed", roomId: this.currentRoomId })
        this.interactionQueue.forEach(item => events.push({ type: "interaction-queued", item }))
        return events
    }
    addInteractionVote(interaction: Interaction) {
        const id = getInteractionQueueItemId(interaction)
        const existingItem = this.interactionQueue.get(id)
        if (existingItem === undefined) {
            const item = {
                id,
                votes: 1,
                interaction
            }
            this.interactionQueue.set(item.id, item)
            this.emit("game-event", { type: "interaction-queued", item })
        } else {
            existingItem.votes += 1
            this.emit("game-event", { type: "interaction-votes-changed", id: existingItem.id, votes: existingItem.votes })
        }
    }
    removeInteractionVote(id: string) {
        const item = this.interactionQueue.get(id)
        if (item !== undefined) {
            item.votes -= 1
            this.emit("game-event", { type: "interaction-votes-changed", id: item.id, votes: item.votes })
            if (item.votes <= 0) this.interactionQueue.delete(id)
        }
    }
    switchRoom(roomId: string) {
        this.currentRoomId = roomId
        this.interactionQueue.clear()
        this.emit("game-event", { type: "room-changed", roomId })
    }
    removeInteractionQueueItem(id: string) {
        if (!this.interactionQueue.has(id)) return
        this.emit("game-event", { type: "interaction-votes-changed", id: id, votes: 0 })
        this.interactionQueue.delete(id)
    }
 }
 export const game = new Game()
--- a/src/server/index.ts
+++ b/src/server/index.ts
@ -0,0 +1 @@
 export type { AppRouter } from "./trpc"
--- a/src/server/isDev.ts
+++ b/src/server/isDev.ts
@ -0,0 +1 @@
 export const isDev = process.env.NODE_ENV === "development"
--- a/src/server/main.ts
+++ b/src/server/main.ts
@ -0,0 +1,38 @@
 import createExpressApp from "express"
 import { listen } from "listhen"
 import { WebSocketServer } from "ws"
 import { appRouter } from "./trpc"
 import { createExpressMiddleware as createTrpcMiddleware } from "@trpc/server/adapters/express"
 import { applyWSSHandler } from "@trpc/server/adapters/ws"
 import { createContext } from "./trpc/base"
 import { isDev } from "./isDev"
 const expressApp = createExpressApp()
 expressApp.use("/trpc", createTrpcMiddleware({
    router: appRouter,
    createContext: ({ req, res }) => createContext(res),
 }))
 const { server } = await listen(expressApp, { isProd: !isDev, autoClose: false })
 const wss = new WebSocketServer({ server, path: "/ws" })
 const wssTrpcHandler = applyWSSHandler({
    wss,
    router: appRouter,
    createContext: () => createContext(undefined)
 })
 const stop = () => {
    console.log("Received stop signal")
    server.close()
    wssTrpcHandler.broadcastReconnectNotification()
    wss.close(console.error)
 }
 process.on("SIGTERM", stop)
 process.on("SIGINT", stop)
 process.on("exit", () => {
    console.log("exit")
 })
--- a/src/server/trpc/base.ts
+++ b/src/server/trpc/base.ts
@ -0,0 +1,17 @@
 import { initTRPC } from "@trpc/server"
 import type { Response } from "express"
 import superjson from "superjson"
 export interface Context {
    res?: Response
 }
 export async function createContext(res: Response | undefined): Promise<Context> {
    return {
        res
    }
 }
 export const t = initTRPC.context<Context>().create({
    transformer: superjson
 })
--- a/src/server/trpc/director.ts
+++ b/src/server/trpc/director.ts
@ -0,0 +1,20 @@
 import { t } from "./base"
 import { z } from "zod"
 export const directorRouter = t.router({
    switchRoom: t.procedure
        .input(z.object({
            roomId: z.string()
        }))
        .mutation(async ({ input, ctx }) => {
            ctx.game.switchRoom(input.roomId)
        }),
    removeInteractionQueueItem: t.procedure
        .input(z.object({
            id: z.string()
        }))
        .mutation(async ({ input, ctx }) => {
            ctx.game.removeInteractionQueueItem(input.id)
        }),
 })
--- a/src/server/trpc/index.ts
+++ b/src/server/trpc/index.ts
@ -0,0 +1,29 @@
 import { t } from "./base"
 import { playerRouter } from "./player"
 import { observable } from "@trpc/server/observable"
 import type { GameEvent } from "../../shared/gameEvents"
 import { directorRouter } from "./director"
 import { game } from "../game"
 export const appRouter = t.router({
    player: playerRouter,
    director: directorRouter,
    join: t.procedure
        .subscription(({ ctx }) => {
            return observable<GameEvent>(emit => {
                const handleGameEvent = (event: GameEvent) => emit.next(event)
                const handleDestroyed = () => setTimeout(() => emit.complete(), 500)
                game.on("game-event", handleGameEvent)
                game.getInitialStateEvents().forEach(event => emit.next(event))
                return () => {
                    game.off("game-event", handleGameEvent)
                }
            })
        }),
 })
 export type AppRouter = typeof appRouter
--- a/src/server/trpc/player.ts
+++ b/src/server/trpc/player.ts
@ -0,0 +1,22 @@
 import { t } from "./base"
 import { z } from "zod"
 import { interactionSchema } from "../../shared/script/types"
 import { game } from "../game"
 export const playerRouter = t.router({
    voteForInteraction: t.procedure
        .input(z.object({
            interaction: interactionSchema
        }))
        .mutation(async ({ input, ctx }) => {
            game.addInteractionVote(input.interaction)
        }),
    removeInteractionVote: t.procedure
        .input(z.object({
            queueItemId: z.string()
        }))
        .mutation(async ({ input, ctx }) => {
            game.removeInteractionVote(input.queueItemId)
        }),
 })
--- a/src/shared/gameEvents.ts
+++ b/src/shared/gameEvents.ts
@ -0,0 +1,6 @@
 import type { InteractionQueueItem } from "./script/types"
 export type GameEvent =
    | { type: "room-changed"; roomId: string }
    | { type: "interaction-queued"; item: InteractionQueueItem }
    | { type: "interaction-votes-changed"; id: string; votes: number }
--- a/src/shared/script/index.ts
+++ b/src/shared/script/index.ts
@ -0,0 +1,12 @@
 import type { Script } from "./types"
 import { roomHauseingang } from "./rooms/hauseingang"
 import { roomKueche } from "./rooms/küche"
 const script: Script = {
    roomsById: new Map
 }
 script.roomsById.set("hauseingang", roomHauseingang)
 script.roomsById.set("küche", roomKueche)
 export { script }
--- a/src/shared/script/rooms/hauseingang.ts
+++ b/src/shared/script/rooms/hauseingang.ts
@ -0,0 +1,41 @@
 import type { Room } from "../types"
 import { cSet } from "../../util"
 export const roomHauseingang: Room = {
    id: "hauseingang",
    label: "Hauseingang",
    initialObjects: cSet(
        {
            id: "schlüssel",
            label: "Schlüssel",
        },
        {
            id: "haustür",
            label: "Haustür"
        }
    ),
    hiddenObjects: cSet(
        {
            id: "offene-haustür",
            label: "Offene Haustür"
        }
    ),
    combinations: cSet(
        {
            id: "open-door",
            inputs: cSet(
                {
                    objectId: "schlüssel",
                    isConsumed: false
                },
                {
                    objectId: "haustür",
                    isConsumed: true
                }
            ),
            outputIds: cSet(
                "offene-haustür"
            )
        }
    )
 }
--- a/src/shared/script/rooms/küche.ts
+++ b/src/shared/script/rooms/küche.ts
@ -0,0 +1,49 @@
 import type { Room } from "../types"
 import { cSet } from "../../util"
 export const roomKueche: Room = {
    id: "küche",
    label: "Küche",
    initialObjects: cSet(
        {
            id: "schüssel",
            label: "Schüssel"
        },
        {
            id: "kühlschrank",
            label: "Kühlschrank"
        },
        {
            id: "kakaopulver",
            label: "Kakaopulver"
        }
    ),
    hiddenObjects: cSet(
        {
            id: "milch",
            label: "Milch"
        },
        {
            id: "kakao",
            label: "Kakao"
        }
    ),
    combinations: cSet(
        {
            id: "kakao",
            inputs: cSet(
                {
                    objectId: "milch",
                    isConsumed: true
                },
                {
                    objectId: "kakaopulver",
                    isConsumed: false
                }
            ),
            outputIds: cSet(
                "kakao"
            )
        }
    )
 }
--- a/src/shared/script/types.ts
+++ b/src/shared/script/types.ts
@ -0,0 +1,46 @@
 import { z } from "zod"
 export interface Script {
    roomsById: Map<string, Room>
 }
 export interface Room {
    id: string
    label: string
    initialObjects: Set<GameObject>
    hiddenObjects: Set<GameObject>
    combinations: Set<Combination>
 }
 export interface GameObject {
    id: string
    label: string
 }
 export interface Combination {
    id: string
    inputs: Set<{
        objectId: string
        isConsumed: boolean
    }>
    outputIds: Set<string>
 }
 export const interactionSchema = z.discriminatedUnion("type", [
    z.object({
        type: z.literal("use"),
        objectId: z.string()
    }),
    z.object({
        type: z.literal("combine"),
        objectIds: z.set(z.string())
    })
 ])
 export type Interaction = z.infer<typeof interactionSchema>
 export interface InteractionQueueItem {
    id: string
    votes: number
    interaction: Interaction
 }
--- a/src/shared/util.ts
+++ b/src/shared/util.ts
@ -0,0 +1,12 @@
 import type { Interaction } from "./script/types"
 export const cSet = <T>(...values: T[]) => new Set(values)
 export const cMap = <K extends string | number | symbol, V>(object: Record<K, V>) => new Map(Object.entries(object))
 export function getInteractionQueueItemId(interaction: Interaction) {
    let id: string
    if (interaction.type === "use") id = `use-${interaction.objectId}`
    else if (interaction.type === "combine") id = `combine-${[...interaction.objectIds].sort().join("_")}`
    else throw new Error("Unknown interaction type")
    return id
 }
--- a/src/trpc.ts
+++ b/src/trpc.ts
@ -0,0 +1,19 @@
 import { createTRPCProxyClient, createWSClient, wsLink } from "@trpc/client"
 import superjson from "superjson"
 import type { AppRouter } from "./server"
 const wsUrl = new URL(location.href)
 wsUrl.protocol = wsUrl.protocol.replace("http", "ws")
 wsUrl.pathname = "/ws"
 wsUrl.hash = ""
 export const trpcClient = createTRPCProxyClient<AppRouter>({
    links: [
        wsLink({
            client: createWSClient({
                url: wsUrl.href
            })
        })
    ],
    transformer: superjson
 })
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,31 @@
 {
  "compilerOptions": {
    "declaration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "lib": ["esnext", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "allowJs": true,
    "resolveJsonModule": true,
    "importsNotUsedAsValues": "error",
    "isolatedModules": true,
    "rootDir": "src",
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "stripInternal": true,
    "target": "esnext",
    "types": [
      "./src/types.d.ts",
      "vite/client",
      "unplugin-icons/types/vue",
      "vite-plugin-pages/client"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ]
 }
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,23 @@
 import { defineConfig } from "vite"
 import vuePlugin from "@vitejs/plugin-vue"
 import iconsPlugin from "unplugin-icons/vite"
 import pagesPlugin from "vite-plugin-pages"
 import windiPlugin from "vite-plugin-windicss"
 export default defineConfig({
    plugins: [
        vuePlugin(),
        iconsPlugin(),
        pagesPlugin(),
        windiPlugin()
    ],
    server: {
        proxy: {
            "/trpc": "http://localhost:3000",
            "/ws": {
                target: "http://localhost:3000",
                ws: true
            }
        }
    }
 })
--- a/windi.config.ts
+++ b/windi.config.ts
@ -0,0 +1,23 @@
 import { defineConfig } from "vite-plugin-windicss"
 import colors from "windicss/colors"
 export default defineConfig({
    theme: {
        fontFamily: {
            "normal": ["InterVariable", "sans-serif"],
            "fat": ["Titan One", "sans-serif"]
        },
        colors: {
            transparent: "transparent",
            white: "white",
            black: "black",
            gray: colors.zinc,
            light: colors.light,
            dark: colors.dark,
            red: colors.rose,
            yellow: colors.yellow,
            green: colors.green,
            blue: colors.indigo,
        }
    }
 })
		`@ -0,0 +1 @@`
							`export const isDev = process.env.NODE_ENV === "development"`