<script setup>
import { useGameStore } from '@/stores/game'
import { useBotStore } from '@/stores/bot'
import { useWebsocketStore } from '@/stores/websocket';

useGameStore().$reset()
useBotStore().$reset()
localStorage.removeItem('game')
localStorage.removeItem('bot')
useWebsocketStore().disconnect()

const startNewGame = (mode) => {
  useGameStore().create(mode)
}
</script>

<template>
  <div>
    <div class="application-logo">
      <div class="application-name">{{ $t('application.name') }}</div>
    </div>
    <button class="button-game" @click="startNewGame('single')">{{ $t("button.singlePlayer") }}</button>
    <button class="button-game" @click="startNewGame('multi')">{{ $t("button.multiPlayer") }}</button>
  </div>
</template>

<style scoped>
.application-logo {
  position: relative;
  height: 220px;
  width: 320px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  border: 17px solid transparent;
  border-image: url('/public/images/shore.png') 17 / 17px repeat;
  background-image: url('/public/images/water/1.png');
  animation: water 2s infinite;
}

.application-name {
  text-align: center;
  width: 340px;
  white-space: nowrap;
  margin-top: -2rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: -28px;
  font-weight: 500;
  font-size: 2.7rem;
  color: aliceblue;
  text-shadow: .5rem .5rem 1rem black;
}


.button-game {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 25%;
  min-width: 300px;
  height: 52px;
  border-radius: 1rem;
}
.button-game:disabled {
  background-color: rgb(165, 165, 165, 0.7);
}
</style>