// 定义游戏画布页面
<template>
  <!-- ref="parent" 用于将 return 返回的 parent 指向 div -->
  <div ref="parent" class="gamemap">
    <!-- canvas 画布, tabindex="0" 属性用于接受用户键盘操作 -->
    <canvas ref="canvas" tabindex="0"></canvas>
  </div>
</template>

<script>
// 导入 GameMap.js
import { GameMap } from "@/assets/scripts/GameMap";
// 引入 canvas, onMounted 用于挂载操作定义
import { ref, onMounted } from "vue";
import { useStore } from "vuex";

export default {
  setup() {
    const store = useStore();
    // 定义两个变量 parent 和 canvas, 一开始这两个变量都没有指向任何元素,因此 ref(null)
    let parent = ref(null);
    let canvas = ref(null);

    // 定义挂载函数,挂载完成后执行
    onMounted(() => {
      // new GameMap(canvas.value.getContext("2d"), parent.value);
      // 改为后端(服务器)获取生成地图
      new GameMap(canvas.value.getContext("2d"), parent.value, store);
    });

    return {
      parent,
      canvas,
    };
  },
};
</script>

<style scoped>
.gamemap {
  /* 宽度、高度设为100%,目的是与其父元素等长等宽 */
  width: 100%;
  height: 100%;
  /* flex可用于同时实现水平和竖直居中 */
  display: flex;
  /* 水平居中 */
  justify-content: center;
  /* 竖直居中 */
  align-content: center;
}
</style>