diff --git a/src/App.vue b/src/App.vue
index d41bcf3..7a2314d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,12 +2,31 @@
-
-
- Verbindung wird hergestellt…
-
-
-
+
+ Verbindung wird hergestellt…
+
+
+
+
+
+
@@ -74,8 +93,10 @@
import { trpcClient } from "./trpc"
import { useGame } from "./game"
import InteractionsScreen from "./screens/InteractionsScreen.vue"
+ import QueueScreen from "./screens/QueueScreen.vue"
const isLoading = ref(true)
+ const activeTab = ref<"interactions" | "queue">("interactions")
const game = useGame()
trpcClient.join.subscribe(undefined, {
diff --git a/src/components/InteractionQueueItemCard.vue b/src/components/InteractionQueueItemCard.vue
new file mode 100644
index 0000000..8f58bcf
--- /dev/null
+++ b/src/components/InteractionQueueItemCard.vue
@@ -0,0 +1,65 @@
+
+
+
+
+
+
+
+
+ {{ game.allObjectsById.get(item.interaction.objectId)!.label }}
+
+
+
+
+
+
+
+ {{ game.allObjectsById.get(objectId)!.label }}
+
+
+
+
+
+
+
+
{{ item.votes }}
+
+ Vote{{item.votes === 1 ? "" : "s" }}
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/ObjectCard.vue b/src/components/ObjectCard.vue
index 77f7817..9419cc0 100644
--- a/src/components/ObjectCard.vue
+++ b/src/components/ObjectCard.vue
@@ -8,7 +8,7 @@
}"
:data-object-id="object.id"
>
-
![]()
+
{{ object.label }}
@@ -41,6 +41,7 @@
import interact from "@interactjs/interact"
import { useCurrentElement } from "@vueuse/core"
import { computed, onMounted, onUnmounted, ref, useCssModule } from "vue"
+ import ObjectPicture from "./ObjectPicture.vue"
const props = defineProps<{
object: GameObject
diff --git a/src/components/ObjectPicture.vue b/src/components/ObjectPicture.vue
new file mode 100644
index 0000000..f211be7
--- /dev/null
+++ b/src/components/ObjectPicture.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/game.ts b/src/game.ts
index ef9ebb6..5f5ec84 100644
--- a/src/game.ts
+++ b/src/game.ts
@@ -1,7 +1,7 @@
import { defineStore } from "pinia"
import { computed, reactive, ref } from "vue"
import { script } from "./shared/script"
-import type { Interaction, InteractionQueueItem } from "./shared/script/types"
+import type { GameObject, Interaction, InteractionQueueItem } from "./shared/script/types"
import { trpcClient } from "./trpc"
import type { GameEvent } from "./shared/gameEvents"
import { getInteractionQueueItemId } from "./shared/util"
@@ -13,10 +13,20 @@ export const useGame = defineStore("gameState", () => {
const currentInteractionId = computed(() =>
currentInteraction.value === null ? null : getInteractionQueueItemId(currentInteraction.value))
+ const sortedInteractionQueue = computed(() => [...interactionQueue.values()].sort((a, b) => b.votes - a.votes))
+
+ const currentRoom = computed(() => script.roomsById.get(currentRoomId.value)!)
+
return {
currentRoomId,
interactionQueue,
- currentRoom: computed(() => script.roomsById.get(currentRoomId.value)!),
+ sortedInteractionQueue,
+ currentRoom,
+ allObjectsById: computed(() => {
+ const map = new Map
()
+ currentRoom.value.initialObjects.union(currentRoom.value.hiddenObjects).forEach(o => map.set(o.id, o))
+ return map
+ }),
currentInteraction,
currentInteractionId,
voteForInteraction(interaction: Interaction) {
diff --git a/src/screens/InteractionsScreen.vue b/src/screens/InteractionsScreen.vue
index c95504a..d515b6a 100644
--- a/src/screens/InteractionsScreen.vue
+++ b/src/screens/InteractionsScreen.vue
@@ -1,22 +1,22 @@
-
+
createSetInclusionSetter(useFloatingObjectIds)(v, i)"
@object-drop="onObjectUseDrop"
/>
createSetInclusionSetter(combineFloatingObjectIds)(v, i)"
@object-drop="onObjectInteractionDrop"
/>
-
+
+
+
+
+
+
+
+
+
\ No newline at end of file