2024-06-29 16:40:11 +02:00
|
|
|
<script setup lang="ts">
|
|
|
|
import GameComponent from '@/components/GameComponent.vue'
|
2024-07-05 01:31:55 +02:00
|
|
|
import { useGameStore } from '@/stores/game'
|
|
|
|
import { storeToRefs } from 'pinia'
|
2024-06-29 16:40:11 +02:00
|
|
|
import { inject, onBeforeUnmount, ref } from 'vue'
|
|
|
|
import { onMounted } from 'vue'
|
2024-07-05 01:31:55 +02:00
|
|
|
import useClipboard from 'vue-clipboard3'
|
2024-07-06 20:28:48 +02:00
|
|
|
import { useRouter } from 'vue-router'
|
2024-06-29 16:40:11 +02:00
|
|
|
|
|
|
|
const socketService: any = inject('socket')
|
|
|
|
|
2024-07-05 01:31:55 +02:00
|
|
|
const { toClipboard } = useClipboard()
|
|
|
|
const gameStore = useGameStore()
|
2024-07-06 20:28:48 +02:00
|
|
|
const { moveToMake, canMakeMove, sessionState, gameState, playerState } = storeToRefs(gameStore)
|
2024-06-29 16:40:11 +02:00
|
|
|
|
2024-07-06 20:28:48 +02:00
|
|
|
onMounted(async () => {
|
|
|
|
startMatch()
|
|
|
|
})
|
|
|
|
|
|
|
|
if (!playerState?.value) {
|
|
|
|
const router = useRouter()
|
|
|
|
router.push({ name: 'home' })
|
|
|
|
}
|
2024-06-29 16:40:11 +02:00
|
|
|
|
2024-07-05 01:31:55 +02:00
|
|
|
function makeMove(move: any) {
|
|
|
|
moveToMake.value = move
|
|
|
|
canMakeMove.value = false
|
2024-06-29 16:40:11 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
onBeforeUnmount(() => {
|
2024-07-05 01:31:55 +02:00
|
|
|
// socketService.disconnect()
|
2024-06-29 16:40:11 +02:00
|
|
|
})
|
|
|
|
|
2024-07-06 20:28:48 +02:00
|
|
|
async function startMatch() {
|
|
|
|
const sessionId = sessionState?.value?.id
|
|
|
|
const seed = sessionState?.value?.seed
|
|
|
|
const playerId = playerState?.value?.id
|
|
|
|
if (sessionId) {
|
2024-07-05 01:31:55 +02:00
|
|
|
await socketService.sendMessageWithAck('startSession', {
|
2024-07-06 20:28:48 +02:00
|
|
|
sessionId: sessionId,
|
|
|
|
playerId: playerId,
|
|
|
|
seed: seed?.trim()
|
2024-07-05 01:31:55 +02:00
|
|
|
})
|
2024-06-29 16:40:11 +02:00
|
|
|
}
|
|
|
|
}
|
2024-07-05 01:31:55 +02:00
|
|
|
|
|
|
|
function copySeed() {
|
|
|
|
if (sessionState?.value?.seed) toClipboard(sessionState.value.seed)
|
|
|
|
}
|
2024-06-29 16:40:11 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2024-07-05 01:31:55 +02:00
|
|
|
<div class="block">
|
|
|
|
<section class="block">
|
|
|
|
<p>
|
|
|
|
Running: {{ sessionState?.sessionInProgress }} Seed: {{ sessionState?.seed }}
|
|
|
|
<button @click="copySeed">Copy!</button>
|
|
|
|
</p>
|
2024-07-06 20:28:48 +02:00
|
|
|
<p>
|
|
|
|
FreeEnds: {{ gameState?.boardFreeEnds }} - Current Player:{{
|
|
|
|
gameState?.currentPlayer?.name
|
|
|
|
}}
|
2024-07-07 23:27:14 +02:00
|
|
|
- Score: {{ sessionState?.scoreboard }}
|
2024-07-06 20:28:48 +02:00
|
|
|
</p>
|
|
|
|
<p v-if="sessionState?.id">
|
|
|
|
SessionID: {{ sessionState.id }} PlayerID: {{ playerState?.id }}
|
|
|
|
</p>
|
2024-07-05 01:31:55 +02:00
|
|
|
</section>
|
|
|
|
<section class="block">
|
|
|
|
<div class="game-container">
|
2024-07-06 20:28:48 +02:00
|
|
|
<GameComponent :playerId="playerState?.id" :canMakeMove="canMakeMove" @move="makeMove" />
|
2024-07-05 01:31:55 +02:00
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
|
2024-07-06 20:28:48 +02:00
|
|
|
<!-- <section class="block">
|
2024-07-05 01:31:55 +02:00
|
|
|
<div class="fixed-grid has-8-cols">
|
2024-07-06 20:28:48 +02:00
|
|
|
<div class="grid" v-if="!sessionState?.id">
|
2024-07-05 01:31:55 +02:00
|
|
|
<div class="cell">
|
|
|
|
<button style="width: 200px" class="button" @click="createSession">
|
|
|
|
Create Session
|
|
|
|
</button>
|
2024-06-29 16:40:11 +02:00
|
|
|
</div>
|
2024-07-05 01:31:55 +02:00
|
|
|
<div class="cell is-col-span7"></div>
|
2024-06-29 16:40:11 +02:00
|
|
|
</div>
|
2024-07-05 01:31:55 +02:00
|
|
|
<div class="grid" v-if="sessionId">
|
|
|
|
<div class="cell">
|
|
|
|
<button class="button" style="width: 200px" @click="startSession">Start Session</button>
|
|
|
|
</div>
|
|
|
|
<div class="cell is-col-span-7">
|
|
|
|
<input class="input" style="margin-bottom: 0" v-model="seed" placeholder="Seed" />
|
2024-06-29 16:40:11 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-05 15:37:29 +02:00
|
|
|
<div class="grid">
|
2024-07-05 01:31:55 +02:00
|
|
|
<div class="cell">
|
|
|
|
<button class="button" style="width: 200px" @click="joinSession">Join Session</button>
|
|
|
|
</div>
|
|
|
|
<div class="cell is-col-span-7">
|
|
|
|
<input
|
|
|
|
class="input"
|
|
|
|
style="margin-bottom: 0"
|
|
|
|
v-model="sessionId"
|
|
|
|
placeholder="Session Id"
|
2024-06-29 16:40:11 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-06 20:28:48 +02:00
|
|
|
</section> -->
|
2024-06-29 16:40:11 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
* {
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
|
2024-07-05 01:31:55 +02:00
|
|
|
.action-select {
|
|
|
|
display: flex;
|
|
|
|
gap: 16px;
|
|
|
|
align-items: start;
|
|
|
|
justify-items: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.game-container {
|
|
|
|
display: flex;
|
|
|
|
align-items: start;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
2024-06-29 16:40:11 +02:00
|
|
|
.control {
|
|
|
|
padding: 8px;
|
|
|
|
margin-right: 4px;
|
|
|
|
}
|
|
|
|
|
|
|
|
textarea {
|
|
|
|
width: 100%;
|
2024-07-05 01:31:55 +02:00
|
|
|
height: 110px;
|
2024-06-29 16:40:11 +02:00
|
|
|
resize: none;
|
|
|
|
}
|
|
|
|
#response,
|
|
|
|
#status {
|
2024-07-05 01:31:55 +02:00
|
|
|
height: 180px;
|
2024-06-29 16:40:11 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.tiles-container {
|
|
|
|
display: flex;
|
|
|
|
gap: 4px;
|
|
|
|
flex-flow: row wrap;
|
|
|
|
align-content: flex-start;
|
|
|
|
}
|
|
|
|
|
|
|
|
.board-container {
|
|
|
|
position: absolute;
|
|
|
|
height: 600px;
|
|
|
|
padding: 10px;
|
|
|
|
width: calc(50% - 50px);
|
|
|
|
background-color: var(--pico-form-element-background-color);
|
|
|
|
}
|
|
|
|
|
|
|
|
.hand-container {
|
|
|
|
position: fixed;
|
|
|
|
bottom: 0;
|
|
|
|
height: 200px;
|
|
|
|
padding: 10px;
|
|
|
|
width: calc(50% - 50px);
|
|
|
|
background-color: var(--pico-form-element-background-color);
|
|
|
|
}
|
|
|
|
</style>
|