domino-client/src/views/GameView.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, gameState, 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 }} Seed: {{ sessionState?.seed }}
        <button @click="copySeed">Copy!</button>
      </p>
      <p>
        FreeEnds: {{ gameState?.boardFreeEnds }} - Current Player:{{
          gameState?.currentPlayer?.name
        }}
        - Score: {{ sessionState?.scoreboard }}
      </p>
      <p v-if="sessionState?.id">
        SessionID: {{ sessionState.id }} PlayerID: {{ playerState?.id }} - canMakeMove
        {{ canMakeMove }}
      </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 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}
</style>