<template>
  <el-main class="game-2048-page-wrapper !flex justify-center">
    <div class="game-2048-page">
      <div class="game-header">
        <div class="game-title">
          <b>{{ game2048Store.successNumber.toString().padStart(4, '0') }}</b>
        </div>
        <game2048-score :key="game2048Store.gameKey" :score="game2048Store.maxNumber">
          最高数字
        </game2048-score>
        <game2048-score :key="game2048Store.gameKey" :score="game2048Store.score">
          得分
        </game2048-score>
      </div>
      <div class="game-header">
        <div class="game-description">
          合并数字到达
          <b>{{ game2048Store.successNumber }}!</b>
        </div>
        <game2048-button @click="click"><b>新游戏</b></game2048-button>
      </div>
      <game2048 :key="game2048Store.gameKey" class="game" />
    </div>
  </el-main>
</template>
<style lang="scss" scoped>
.game-2048-page-wrapper {
  --font-color: rgb(119, 110, 101);
  font-family: 'Arial', '微软雅黑', '黑体', sans-serif;
  background-color: rgb(250, 248, 239);
}

.game-2048-page {
  width: max-content;
  zoom: v-bind(zoomCSS);
}

.game-header {
  display: flex;
  align-items: center;
}

.game-header:has(.game-description) {
  margin-bottom: 10px;
}

.game-title {
  font-size: 70px;
  color: var(--font-color);
  margin-right: auto;
}

.game-description {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  font-size: var(--normal-font-size);
  line-height: 18px;
  color: var(--font-color);
  margin-right: auto;
}

.game-container {
  margin: 0 auto 10px;
}

.el-input {
  width: auto;
}
</style>
<script lang="ts">
/**
 * 方向键代码.
 */
export enum Directions {
  UP = 'ArrowUp',
  DOWN = 'ArrowDown',
  LEFT = 'ArrowLeft',
  RIGHT = 'ArrowRight',
}

export type SwipeEventMap = {
  swipe: Directions;
};
</script>
<script lang="ts" setup>
import Game2048 from '@/components/game2048/Game2048.vue';
import Game2048Button from '@/components/game2048/Game2048Button.vue';
import Game2048Score from '@/components/game2048/Game2048Score.vue';
import { useGame2048Store } from '@/stores/2048';
import { useMediaStore } from '@/stores/media';
import { useEventListener } from '@vueuse/core';
import { storeToRefs } from 'pinia';
import { computed } from 'vue';

const game2048Store = useGame2048Store();
const { smLess } = storeToRefs(useMediaStore());
const zoomCSS = computed(() => {
  return smLess.value ? 0.75 : 1;
});
useEventListener(
  'touchmove',
  (e) => {
    e.preventDefault();
  },
  { passive: false },
);

function click() {
  game2048Store.$reset();
  console.log(game2048Store.gameKey);
}
</script>
