<template>
    <div>
        <canvas id="canvas" width="400" height="400"></canvas>
        <el-button @click="reset" type="primary">重新开始</el-button>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator"
import { SCanvasView, SColor, SPainter, STextAlign } from "@persagy-web/draw/lib";

/**
 * 2048
 *
 * @author 郝洁 <haojie@persagy.com>
 */
class GameView extends SCanvasView {
    /** 游戏结束 */
    gameOver: boolean = false
    /** 格子宽度 */
    box_width: number = this.width * 0.8 * 0.25;
    margin_width: number = this.width * 0.2 * 0.20;

    /**
     * 构造函数
     *
     * @param id canvas DOM id
     */
    constructor(id: string) {
        super(id);
        this.init()
    }

    /**
     * 初始化游戏
     */
    init(): void {

    }

    /**
     * 键盘按下事件
     *
     * @param   event   事件对象
     */
    onKeyDown(event: KeyboardEvent): void {
        if ( /* 游戏结束*/ 1) {
            return;
        }
        // 按键判断
        switch (event.code) {
            case "KeyW": // 上移动作
            case "ArrowUp":
                // 判断游戏是否继续，底部产生随机位置随机数
                break;

            case "KeyA": // 左移动作
            case "ArrowLeft":
                // 判断游戏是否继续，右部产生随机位置随机数
                break;

            case "KeyD":    // 右移动作
            case "ArrowRight":
                // 判断游戏是否继续，左部产生随机位置随机数
                break;
            // 按键 下
            case "KeyS": // 下移动作
            case "ArrowDown":
                // 判断游戏是否继续，上部产生随机位置随机数
                break;
            default :
            // do nothing
        }

        // 更新视图
    }

    /**
     * 生成随机的格子
     */
    generateOneNumber(): void {
        if ( /* 游戏结束*/ 1) {
            return;
        }

        //随机一个位置，取新方块出现的位置

        //随机一个数字 2 或 4 ，在随机位置显示随机数字

        return;
    }

    /**
     * 新生成的数的位置，位置随机产生,位置不可被占用，不可重叠
     *
     * @param indexArray    小格子对应的索引
     */
    newLocationRandomNumber(indexArray: []) {

    }

    /**
     * 绘制游戏画面
     *
     * @param   canvas      画布
     */
    onDraw(canvas: SPainter): void {
        canvas.clearRect(0, 0, this.width, this.height)
        //绘制格子
        if (this.gameOver) {
            canvas.brush.color = SColor.Red;
            canvas.font.size = 40;
            canvas.font.textAlign = STextAlign.Center;
            canvas.drawText("Game Over");
        }
        this.update();
        return;
    }
}

@Component
export default class Gcanvas extends Vue {
    /** 实例化 */
    view: GameView | null = null;

    /**
     * 页面挂载完成
     */
    mounted(): void {
        this.view = new GameView('canvas')
    }

    /**
     * 重置操作
     */
    reset(): void {
        this.view!!.init()
        document.getElementById("canvas")!!.focus()
    }
}
</script>

<style scoped>

</style>
