Some game actions work

app.vue

@@ -2,11 +2,16 @@
 import { ref } from 'vue';
 const cards = useState<{ [key: string]: any }>('cards', () => ({}))
 const players = useState<{ [key: string]: any }>('players', () => ({}))
+const teams = useState<{ [key: string]: any }>('teams', () => ({}))
 const self = useState<string>('self')
-let gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
+const gameObjects = useState<{ [key: string]: any }>('gameObject', () => ({}))
+
+const socket = useState<WebSocket>('socket', () => new WebSocket("ws://127.0.0.1:8765"))
+
 let game = ref<any>({ started: true })
 let context = ref<string>('login')
-const socket = new WebSocket("ws://127.0.0.1:8765")
+let username = ref<string>('legonzaur')
+
 
 const createObject = {
   "card": (data: any) => {
@@ -21,14 +26,17 @@ const createObject = {
     game.value = data
     gameObjects.value[data.uuid] = data
   },
-  "team": () => { }
+  "team": (data: any) => {
+    teams.value[data.uuid] = data
+    gameObjects.value[data.uuid] = data
+  }
 } as { [id: string]: (data: Object) => any }
 
-socket.onopen = function (e) {
+socket.value.onopen = function (e) {
   console.log("[open] Connection established");
 };
 
-socket.onclose = function (event) {
+socket.value.onclose = function (event) {
   if (event.wasClean) {
     console.warn(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
   } else {
@@ -38,11 +46,11 @@ socket.onclose = function (event) {
   }
 };
 
-socket.onerror = function (error) {
+socket.value.onerror = function (error) {
   console.error(error);
 };
 
-socket.onmessage = function (event) {
+socket.value.onmessage = function (event) {
   const data = JSON.parse(event.data)
 
 
@@ -73,7 +81,7 @@ socket.onmessage = function (event) {
 
 
 async function register(username: string) {
-  socket.send(JSON.stringify({
+  socket.value.send(JSON.stringify({
     type: "register",
     data_type: "username",
     data: username
@@ -81,7 +89,7 @@ async function register(username: string) {
 }
 
 async function setReady(value: Event) {
-  socket.send(JSON.stringify({
+  socket.value.send(JSON.stringify({
     type: "ready",
     data_type: "ready_state",
     data: ((value.target as HTMLInputElement).checked)
@@ -90,7 +98,8 @@ async function setReady(value: Event) {
 </script>
 
 <template>
-  <button v-if="!self && !game.started" @click="register('legonzaur')">LOGIN</button>
+  <input v-if="!self && !game.started" type="text" v-model="username">
+  <button v-if="!self && !game.started" @click="register(username)">LOGIN</button>
   <input @change="setReady" v-if="self && !game.started" type="checkbox" id="ready">
   <label v-if="self && !game.started" for="scales">Ready</label>
   <div>

components/CardPreview.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-const props = defineProps({
-    data: {
-        type: String as PropType<string>,
-        required: false,
-    },
-})
+
+export interface Props {
+    data?: string
+}
+
+const props = defineProps<Props>()
+
 const cards = useState<{ [key: string]: any }>('cards')
 
 function cardClick() {
@@ -14,19 +15,24 @@ function cardClick() {
 </script>
 
 <template>
-    <span v-if="props.data" @click="cardClick">
-        {{ cards[props.data].name }}
+    <span class="card">
+        <span v-if="props.data" @click="cardClick">
+            {{ cards[props.data]?.name }}
+        </span>
+
+        <span v-if="props.data === null">
+            HIDDEN
+        </span>
+
+        <slot></slot>
     </span>
 
-    <span v-if="!props.data">
-        HIDDEN
-    </span>
 
-    |
+
 </template>
 
 <style scoped>
-span {
+.card {
     border: 1px solid black;
     cursor: pointer
 }

components/CardSlot.vue

@@ -1,9 +1,20 @@
 <script setup lang="ts">
-const props = defineProps(['stack'])
+export interface Props {
+    stack: string[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    stack: () => [],
+})
+
 </script>
 
 <template>
-    <span>
-        <CardPreview v-for="c in props.stack" :data="c" />
-    </span>
+    {{ props.stack?.length }}
+
+    <CardPreview :data="props.stack.at(-1)">
+        <slot></slot>
+    </CardPreview>
+
+
 </template>

components/GameBoard.vue

@@ -1,26 +1,54 @@
 <script setup lang="ts">
 const props = defineProps(['game'])
-const self = useState<any>('self')
+const self = useState<string>('self')
 const gameObject = useState<{ [key: string]: any }>('gameObject')
+const socket = useState<WebSocket>('socket')
+
+const isTurn = computed(() => self.value && props.game?.started && (gameObject.value[self.value]?.team == props.game.turn))
+
+async function buy(cardId: string) {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "buy",
+        data: [cardId]
+    }))
+}
+
+async function endTurn() {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "end_turn",
+        data: true
+    }))
+}
+
 </script>
 
 <template>
+
     <div>
+        <button v-if="isTurn" @click="endTurn">END TURN</button>
+        <div v-if="!self"><b>SPECTATOR MODE</b></div>
         <div>
-            self = {{ gameObject[self]?.username }}
-            <br>
             market_amount = {{ props.game.market_stack?.length }}
             <br>
             market =
-            <CardPreview v-for="c in props.game.market" :data="c" :key="c.uuid" />
+            <template v-for="c in props.game.market">
+
+                <CardPreview :data="c">
+                    <button v-if="isTurn && c" @click="buy(c)">BUY</button>
+                </CardPreview> |
+            </template>
+
             <br>
             gems =
-            <CardSlot :stack="props.game.gem_stack" />
+            <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>
+            </CardSlot>
         </div>
         <div>
-            <PlayerSlot :player="self"></PlayerSlot>
-            <br>
-            players = {{ props.game.players?.map((e: any) => gameObject[e].username) }}
+            <PlayerList :players="props.game?.players" :current_team="game.turn"></PlayerList>
         </div>
     </div>
 </template>

components/PlayerList.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+export interface Props {
+    players?: string[]
+    current_team?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    players: () => [],
+})
+const players = useState<{ [key: string]: any }>('players')
+</script>
+
+<template>
+    <div v-for="player in props.players">
+        <PlayerSlot :player="players[player]" :current_team="props.current_team" />
+    </div>
+</template>

components/PlayerSlot.vue

@@ -1,17 +1,85 @@
 <script setup lang="ts">
-const props = defineProps(['player'])
-const gameObject = useState<{ [key: string]: any }>('gameObject')
+const props = defineProps(['player', 'current_team'])
+const teams = useState<{ [key: string]: any }>('teams')
+const self = useState<string>('self')
+const socket = useState<WebSocket>('socket')
+const isTurn = computed(() => props.player.team == props.current_team)
+const isSelf = computed(() => props.player.uuid == self.value)
+
+
+async function playAllCards() {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "play_cards",
+        data: props.player.hand
+    }))
+}
+
+async function playCard(cardId: string) {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "play_cards",
+        data: [cardId]
+    }))
+}
+
+async function draw() {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "draw",
+        data: 1
+    }))
+}
+
+async function discard(cardId: string) {
+    socket.value.send(JSON.stringify({
+        type: "action",
+        data_type: "discard",
+        data: [cardId]
+    }))
+}
 </script>
 
 <template>
-    <span>
+    <div :class="'player ' + (isTurn ? 'turn' : '')">
+        <div v-if="isSelf"><b>YOU</b></div>
+        username = <b>{{ props.player.username }}</b>
+        <br>
+        health = {{ teams[player.team].health }}
+        <br>
         hand =
-        <CardSlot :stack="gameObject[props.player]?.hand" />
+        <template v-for="c in props.player.hand">
+            <CardPreview :data="c">
+                <button v-if="isSelf && isTurn" @click="playCard(c)">PLAY</button>
+                <button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
+            </CardPreview> |
+        </template>
+        <button v-if="isSelf && isTurn && props.player.hand.length > 1" @click="playAllCards">PLAY
+            ALL</button>
+        <br>
+        board =
+        <template v-for="c in props.player.board">
+            <CardPreview :data="c">
+                <button v-if="isSelf && isTurn" @click="discard(c)">DISCARD</button>
+            </CardPreview> |
+        </template>
         <br>
         stack =
-        <CardSlot :stack="gameObject[props.player]?.stack_pile" />
+        <CardSlot :stack="props.player.stack_pile">
+            <button v-if="isSelf && isTurn" @click="draw">DRAW</button>
+        </CardSlot>
         <br>
         discard =
-        <CardSlot :stack="gameObject[props.player]?.discard_pile" />
-    </span>
-</template>
+        <CardSlot :stack="props.player.discard_pile"></CardSlot>
+    </div>
+</template>
+
+<style scoped>
+.player {
+    border-top: 5px solid black;
+}
+
+.turn {
+    background: lightgreen;
+}
+</style>