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">
      <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;
}

.action-select {
  display: flex;
  gap: 16px;
  align-items: start;
  justify-items: center;
}

.game-container {
  display: flex;
  align-items: start;
  justify-content: center;
}

.control {
  padding: 8px;
  margin-right: 4px;
}

textarea {
  width: 100%;
  height: 110px;
  resize: none;
}
#response,
#status {
  height: 180px;
}

.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>