Contextual menu for cards

components/GameBoard.vue

@@ -10,7 +10,23 @@ async function buy(cardId: string) {
     socket.value.send(JSON.stringify({
         type: "action",
         data_type: "buy",
-        data: [cardId]
+        data: cardId
+    }))
+}
+
+async function buy_in_hand(cardId: string) {
+    socket.value.send(JSON.stringify({
+        type: "temp_action",
+        data_type: "buy_in_hand",
+        data: cardId
+    }))
+}
+
+async function buy_on_stack(cardId: string) {
+    socket.value.send(JSON.stringify({
+        type: "temp_action",
+        data_type: "buy_on_stack",
+        data: cardId
     }))
 }
 
@@ -33,22 +49,46 @@ async function endTurn() {
             market_amount = {{ props.game.market_stack?.length }}
             <br>
             market =
-            <template v-for="c in props.game.market">
+            <div class="cards_container">
 
-                <CardPreview :data="c">
-                    <button v-if="isTurn && c" @click="buy(c)">BUY</button>
-                </CardPreview> |
-            </template>
+                <CardPreview :data="c" v-for="c in props.game.market">
+                    <template v-if="isTurn && c">
+                        <button @click="buy(c)">BUY</button>
+                        <button @click="buy_in_hand(c)">
+                            BUY IN HAND
+                        </button>
+                        <button @click="buy_on_stack(c)">
+                            BUY ON STACK
+                        </button>
+                    </template>
+                </CardPreview>
+            </div>
 
             <br>
             gems =
             <CardSlot :stack="props.game.gem_stack">
-                <button v-if="isTurn && props.game.gem_stack.length > 0"
-                    @click="buy(props.game.gem_stack.at(-1))">BUY</button>
+                <template v-if="isTurn && props.game.gem_stack.length > 0">
+                    <button @click="buy(props.game.gem_stack.at(-1))">
+                        BUY
+                    </button>
+                    <button @click="buy_in_hand(props.game.gem_stack.at(-1))">
+                        BUY IN HAND
+                    </button>
+                    <button @click="buy_on_stack(props.game.gem_stack.at(-1))">
+                        BUY ON STACK
+                    </button>
+                </template>
             </CardSlot>
         </div>
         <div>
             <PlayerList :players="props.game?.players" :current_team="game.turn"></PlayerList>
         </div>
     </div>
-</template>
+</template>
+
+<style>
+.cards_container {
+    display: flex;
+    flex-direction: row;
+}
+</style>