commit 02

src/components/ObjectCard.vue

@@ -20,18 +20,32 @@
     touch-action: none;
     transition: transform 50ms ease, background-color 200ms ease;
   }
+
+  .combineFirst {
+    animation: 500ms ease-in-out alternate infinite combineFirst;
+  }
+
+  @keyframes combineFirst {
+    from {
+      @apply border-blue-400;
+    }
+
+    to {
+      @apply border-blue-700;
+    }
+  }
 </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"
+  import { computed, onMounted, onUnmounted, ref, useCssModule } from "vue"
 
   const props = defineProps<{
     object: GameObject
     isOverDropzone: boolean
-    markedFor: null | "use" | "combine"
+    markedFor: null | "use" | "combine" | "combine-first"
   }>()
 
   const emit = defineEmits<{
@@ -72,11 +86,14 @@
     onUnmounted(() => interactable.unset())
   })
 
+  const style = useCssModule()
+
   const borderClass = computed(() => {
     switch (props.markedFor) {
       case null: return "border-dark-600"
       case "use": return "border-green-600"
-      case "combine": return "border-blue-900"
+      case "combine": return "border-blue-500"
+      case "combine-first": return style.combineFirst
     }
   })
 </script>

src/game.ts

@@ -25,8 +25,9 @@ export const useGame = defineStore("gameState", () => {
             currentInteraction.value = interaction
             trpcClient.player.voteForInteraction.mutate({ interaction })
         },
-        removeInteractionVote(queueItemId: string) {
-            trpcClient.player.removeInteractionVote.mutate({ queueItemId })
+        revokeCurrentInteractionVote() {
+            if (currentInteractionId.value === null) return
+            trpcClient.player.removeInteractionVote.mutate({ queueItemId: currentInteractionId.value })
             currentInteraction.value = null
         },
         switchRoom(roomId: string) {

src/screens/InteractionsScreen.vue

@@ -13,6 +13,7 @@
           class="bg-blue-900"
           :has-floating="combineFloatingObjectIds.size > 0"
           @object-change="(v, i) => createSetInclusionSetter(combineFloatingObjectIds)(v, i)"
+          @object-drop="onObjectInteractionDrop"
       />
     </div>
     <div ref="objectsContainerElement" class="grid gap-3 grid-cols-2 flex-grow auto-rows-min p-4">
@@ -50,6 +51,8 @@
   const combineFloatingObjectIds = reactive(new Set())
   const allFloatingObjectIds = computed(() => new Set([...useFloatingObjectIds, ...combineFloatingObjectIds]))
 
+  const firstCombinationObjectId = ref<null | string>(null)
+
   function createSetInclusionSetter<T>(set: Set<T>) {
     return (value: T, isIncluded: boolean) => {
       if (isIncluded) set.add(value)
@@ -58,7 +61,9 @@
   }
 
   function getMarkedFor(objectId: string) {
-    if (game.currentInteraction !== null) {
+    if (firstCombinationObjectId.value !== null) {
+      if (firstCombinationObjectId.value === objectId) return "combine-first"
+    } else if (game.currentInteraction !== null) {
       switch (game.currentInteraction.type) {
         case "use":
           if (game.currentInteraction.objectId === objectId) return "use"
@@ -88,4 +93,23 @@
       objectId
     })
   }
+
+  function onObjectInteractionDrop(objectId: string) {
+    if (firstCombinationObjectId.value === null) {
+      game.revokeCurrentInteractionVote()
+      firstCombinationObjectId.value = objectId
+    } else {
+      if (firstCombinationObjectId.value === objectId) {
+        firstCombinationObjectId.value = null
+        return
+      }
+
+      game.voteForInteraction({
+        type: "combine",
+        objectIds: new Set([firstCombinationObjectId.value, objectId])
+      })
+
+      firstCombinationObjectId.value = null
+    }
+  }
 </script>