<template>
  <div class="page-root">
    <game2048 class="game" :key="game2048Store.gameKey" />
    <el-button @click="click">重新开始</el-button>
    <el-input-number v-model="game2048Store.width" placeholder="宽度" :min="1" :max="10" />
    <el-input-number
      v-model="game2048Store.height"
      type="number"
      placeholder="高度"
      :min="1"
      :max="10"
    />
  </div>
  <el-drawer v-model="showSettings"></el-drawer>
</template>
<style scoped lang="scss">
.page-root {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(250, 248, 239);
}
.el-input {
  width: auto;
}
.game-container {
  margin-bottom: 10px;
}
</style>
<script setup lang="ts">
import Game2048 from '@/components/Game2048.vue';
import { useGame2048Store } from '@/stores';
import { ref } from 'vue';
const showSettings = ref(false);
const game2048Store = useGame2048Store();
function click() {
  // game2048Store.width = 4;
  // game2048Store.height = 4;
  game2048Store.$reset();
}
</script>
