115 lines
3.0 KiB
Vue
115 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import GameComponent from '@/components/GameComponent.vue'
|
|
import { useGameStore } from '@/stores/game'
|
|
import { storeToRefs } from 'pinia'
|
|
import { onBeforeUnmount } from 'vue'
|
|
import { onMounted } from 'vue'
|
|
import useClipboard from 'vue-clipboard3'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const { toClipboard } = useClipboard()
|
|
const gameStore = useGameStore()
|
|
const { moveToMake, canMakeMove, sessionState, playerState } = storeToRefs(gameStore)
|
|
|
|
onMounted(async () => {
|
|
// startMatch()
|
|
})
|
|
|
|
if (!playerState?.value) {
|
|
const router = useRouter()
|
|
router.push({ name: 'home' })
|
|
}
|
|
|
|
function makeMove(move: any) {
|
|
moveToMake.value = move
|
|
canMakeMove.value = false
|
|
console.log('makemove :>> ', move)
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
// socketService.disconnect()
|
|
})
|
|
|
|
function copySeed() {
|
|
if (sessionState?.value?.seed) {
|
|
toClipboard(sessionState.value.seed)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="block">
|
|
<!-- <section class="block info">
|
|
<p>Running: {{ sessionState?.sessionInProgress }}</p>
|
|
<p>Seed: {{ sessionState?.seed }}</p>
|
|
<p>
|
|
FreeEnds: {{ gameState?.boardFreeEnds }} - Current Player:{{
|
|
gameState?.currentPlayer?.name
|
|
}}
|
|
</p>
|
|
<p>Score: {{ sessionState?.scoreboard }}</p>
|
|
<p v-if="sessionState?.id">SessionID: {{ sessionState.id }}</p>
|
|
<p>PlayerID: {{ playerState?.id }}</p>
|
|
</section> -->
|
|
<section class="block">
|
|
<div class="game-container">
|
|
<GameComponent :playerId="playerState?.id" :canMakeMove="canMakeMove" @move="makeMove" />
|
|
</div>
|
|
</section>
|
|
|
|
<!-- <section class="block">
|
|
<div class="fixed-grid has-8-cols">
|
|
<div class="grid" v-if="!sessionState?.id">
|
|
<div class="cell">
|
|
<button style="width: 200px" class="button" @click="createSession">
|
|
Create Session
|
|
</button>
|
|
</div>
|
|
<div class="cell is-col-span7"></div>
|
|
</div>
|
|
<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" />
|
|
</div>
|
|
</div>
|
|
<div class="grid">
|
|
<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"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section> -->
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
.game-container {
|
|
display: flex;
|
|
align-items: start;
|
|
justify-content: center;
|
|
}
|
|
.info {
|
|
color: white;
|
|
opacity: 0.1;
|
|
position: fixed;
|
|
top: 200px;
|
|
left: 10px;
|
|
z-index: 20;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|