<script setup>
import { useBotStore } from '@/stores/bot';
import { useGameStore } from '@/stores/game';
import { usePlayerStore } from '@/stores/player';
import { useWebsocketStore } from '@/stores/websocket';
import { useRoute } from 'vue-router'



const route = useRoute()
const player = usePlayerStore()
const game = useGameStore()
const bot = useBotStore()

game.$reset()
bot.$reset()
localStorage.removeItem('game')
localStorage.removeItem('bot')

const websocket = useWebsocketStore()
if (player.id == null) player.initPlayer()
websocket.init(route.params.gameId)

const join = () => {
  res = websocket.send({
    action: 'join',
    from: player.id
  })
}
</script>

<template>
<div>
  <button class="button_game_start" @click="join()">{{ $t("button.joinGame") }}</button>
</div>
</template>

<style scoped>
.game_logo {
  height: 300px;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4rem;
  border: 48px solid transparent;
  border-image: url('/public/images/shore.png') 48 repeat;
  background-image: url('/public/images/water/1.png');

  h1 {
    width: fit-content;
    position: relative;
    left: -60%;
    top: -50%;
    font-weight: 500;
    font-size:5rem;
    color: aliceblue;
    text-shadow: .5rem .5rem 1rem black;
  }
  img {
    position: relative;
  }
}

.button_game_start {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  height: 60px;  
}
</style>