<template>
    <div>
        <canvas :id="id" width="320" height="620" tabindex="0"/>
        <p>{{score}}</p>
        <el-button @click="reset">reset</el-button>
    </div>
</template>

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

    class TestView extends SCanvasView {
        map: number[][] = [];
        fkType: number = Number((Math.random() * 6).toFixed());  // 0-6
        dir: number = Number((Math.random() * 2).toFixed());  // 0-3
        fk: number[][][]=[
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [1, 1, 1, 1],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 1, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [1, 1, 1, 1],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [1, 1, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 1, 1],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 1],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 1, 0],
                [0, 1, 1, 0],
                [0, 1, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [1, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 1, 0],
                [0, 1, 1, 0],
                [0, 1, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 1, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 1, 0],
                [1, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 1],
                [0, 1, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 0, 0],
                [0, 1, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [1, 1, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 1, 0],
                [0, 0, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 1, 1],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 0, 1, 0],
                [0, 1, 1, 1],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 0, 0],
            ],
            [
                [0, 0, 0, 0],
                [1, 1, 1, 0],
                [0, 1, 0, 0],
                [0, 0, 0, 0],
            ],
            [
                [0, 0, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 0, 0],
            ]
        ];
        x = 5;
        y = 0;
        t = Date.now();
        gameOver: boolean = false;
        xzColor: SColor = new SColor(254*this.random(), 254*this.random(), 254*this.random());

        constructor(id: string) {
            super(id);
            this.initMap();
        }

        onKeyDown(event: KeyboardEvent): void {
            if (this.gameOver) {
                return;
            }
            if (event.code == "KeyW") {
                if (!this.isPz(this.x, this.y, (this.dir + 1) % 4)) {
                    this.dir = (this.dir + 1) % 4;
                }
            } else if (event.code == "KeyA") {
                if (!this.isPz(this.x - 1, this.y, this.dir)) {
                    this.x--;
                }
            } else if (event.code == "KeyD") {
                if (!this.isPz(this.x + 1, this.y, this.dir)) {
                    this.x++;
                }
            }
            else if (event.code == "KeyS") {
                if (!this.isPz(this.x, this.y + 1, this.dir)) {
                    this.y++;
                } else {
                    this.fullMap();
                }
            }
            this.update();
        }

        onDraw(painter: SPainter): void {
            if(this.gameOver){
                painter.brush.color = SColor.Blue;
                painter.font.size = 20;
                painter.font.textAlign = STextAlign.Center;
                painter.drawText('GAME OVER', 180, 30);
                return
            }

            painter.clearRect(0,0,this.width, this.height);

            painter.pen.color = new SColor('#0bc0ff');
            painter.brush.color = new SColor("#2accc7");
            this.drawMap(painter);

            painter.pen.color = SColor.Transparent;
            painter.brush.color = this.xzColor;
            this.drawFk(painter);

            if (Date.now() - this.t > 500) {
                if (!this.isPz(this.x, this.y + 1, this.dir)) {
                    this.y++;
                } else {
                    this.fullMap();
                }
                this.t = Date.now();
            }
            this.update();
        }

        initMap(): void {
            this.gameOver = false;
            this.map = [];
            for (let row = 0; row < 22; row++) {
                const m1:number[] = [];
                for (let col = 0; col < 14; col++) {
                    if (row > 19 || col < 2 || col > 11) {
                        m1.push(2);
                    } else {
                        m1.push(0);
                    }
                }
                this.map.push(m1);
            }
        }

        private drawMap(painter: SPainter): void {
            for (let row = 0; row < 22; row++) {
                for (let col = 0; col < 14; col++) {
                    const n = this.map[row][col];
                    if (n == 1 || n == 2) {
                        painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
                    }
                    // if (n == 0) {
                    //     painter.drawRect(col * 30 + 11 - 60, row * 30 + 11, 28, 28);
                    // }
                }
            }
        }

        private drawFk(painter: SPainter): void {
            for (let row = 0; row < 4; row++) {
                for (let col = 0; col < 4; col++) {
                    if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
                        painter.drawRect((col + this.x) * 30 + 11 - 60, (row + this.y) * 30 + 11, 28, 28);
                    }
                }
            }
        }

        private isPz(x: number, y: number, dir: number): boolean {
            for (let row = 0; row < 4; row++) {
                for (let col = 0; col < 4; col++) {
                    if (this.fk[this.fkType * 4 + dir][row][col] == 1 && this.map[y + row][x + col] != 0) {
                        return true;
                    }
                }
            }
            return false;
        }

        private fullMap() {
            for (let row = 0; row < 4; row++) {
                for (let col = 0; col < 4; col++) {
                    if (this.fk[this.fkType * 4 + this.dir][row][col] == 1) {
                        this.map[this.y + row][this.x + col] = 1;
                    }
                }
            }

            this.x = 5;
            this.y = 0;
            this.fkType = Number((Math.random() * 6).toFixed());
            this.dir = Number((Math.random() * 2).toFixed());

            if(this.isPz(this.x, this.y, this.dir)){
                this.gameOver = true;
            }
            this.xc();
            this.xzColor = new SColor(254*this.random(), 254*this.random(), 254*this.random());
        }

        private xc(): void{
            let xcSum = 1;
            for (let row = 0; row < 20; row++) {
                let flag = true;
                for (let col = 0; col < 14; col++) {
                    if (this.map[row][col] == 0) {
                        flag = false;
                        break;
                    }
                }
                if(flag){
                    this.map.splice(row,1);
                    this.map.unshift([2,2, 0,0,0,0,0,0,0,0,0,0,2,2]);
                    xcSum++;
                }
            }
            if (xcSum > 1) {
                this.$emit('score', xcSum);
                this.map.shift();
                this.map.splice(19, 0, [2,2, this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),this.random(),2,2])
            }
        }

        private random():number{
            return Number(Math.random().toFixed())
        }
    }

    @Component
    export default class ElsfkCanvas extends Vue {
        id: string = uuid();
        scoreList: number[] = [100, 300, 600, 1000];
        score: number = 0;
        view: TestView | undefined = undefined;
        mounted(): void {
            this.view = new TestView(this.id);
            this.view.connect('score', this, this.changeScore)
            document.getElementById(this.id)!!.focus();
        }

        changeScore(v: SCanvasView, count: number[]) {
            this.score+= this.scoreList[count[0] - 2];
        }

        reset(){
            this.view!!.initMap();
            this.score = 0;
            this.view!!.update();
            document.getElementById(this.id)!!.focus();
        }
    }
</script>
