'use strict';

var doric = require('doric');

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const colors = {
    bgColor: doric.Color.parse('#FFB7BFAC'),
    snakeColor: doric.Color.BLACK,
    foodColor: doric.Color.BLACK,
};
const hignScoreKey = "SnakeHignScore";
const arrowUp = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAYAAABS39xVAAASh0lEQVR4Xu2dCZBuRXmGH6PGQMCQxRKVBCgQSSCCW9CQEkpUCMgWdsSAskTECGJACApcAooQQVRQQRSiwYCg7AFXtARBjWgARUWRBJcUSSSKkiBZ6rvpwbn3zsy/naW7z/NVTU0Vc7r7/Z7+ee85/ff5+lEYEpiOwNrA5sBm6fd6wFrzfqLX++f93APcln5uB74z3bC2GjKBRw05eXOfmMA2wA7pZ6OJW6/Y4D7gw8C1wKeBn83Yn80HQEDDGsAkz5ji7wH7AXsAG87Y12LNw7yuAN4P3NTSGHZbAQENq4JJbCmFFyajeinwmJbGWKjbi4ELgOs6HNOhCiGgYRUyUR3KjHWpo4F9OhxzoaHCtE4EYu3LkMByAhqWH4Q5AqslowqzWj0TLHcDy4ALM9GjjJ4JaFg9T0Amw28FnAk8IxM9K8uIu61jgR9mqk9ZHRHQsDoCnfEwBwFvB+IOK+eIrRCvT98q5qxTbS0S0LBahFtA129Jj4EFSH1E4huBk0sSrNbmCGhYzbEsradL0laF0nSH3suA3UsUrubZCGhYs/ErtXXJZjXHPPZrbVnqBKh7OgIa1nTcSm715YwX1yfl+l1g/UkbeX25BDSscuduGuU/zWjLwjT6F2rzEPC4pjqzn7wJaFh5z0+T6u4FntJkhxn1dQewaUZ6lNISAQ2rJbCZdRsvF2+dmaam5bwXOLjpTu0vLwIaVl7z0Yaa84DYazWEiG0axwwh0aHmqGHVPfNHAafVneIq2cWrRacPLOfBpKth1TvV2wPX1JvekplFza6os2VURkDDqmxCUzrrpvIsG9eZ3sis7gS2s9LDSE7FXaBhFTdlYwm+FNhtrCvrvcjd8BXOrYZV36RGOZbj60trqoxOAk6YqqWNsiSgYWU5LVOL2hOIip3GLwjsBcSrSEYFBDSsCiYxpbBJWrdap56UGskkNszGelZsLjUKJ6BhFT6B8+RHDfRt60mn0UyuT6bVaKd21j0BDat75m2M+FbgyDY6rqjPM4DXVZTPIFPRsMqf9lcA55efRicZHAi8r5ORHKQVAhpWK1g763SLtG4VJy4bownESdSxnnXL6Eu9IkcCGlaOszKepjWSWVnEbjxec1fdmEzrgcmaeXUOBDSsHGZhOg3vAQ6ZrungW50L/NngKRQIQMMqcNKA1wBnlSk9G9WHp9OCshGkkNEENKzRjHK7Ypv0KNjl8fG5MWhCz8Pp0fCTTXRmH90Q0LC64dzUKGsns9qsqQ4H3s9Xk2l5QGshHwQNq5CJSjL/Fti3LMnZq70IeGn2KhW4nICGVc4H4S+BU8qRW5TS44A3FaV4oGI1rDImfmfg8jKkFqtyF+CKYtUPRLiGlf9Eb5jWrTbIX2rRCr+d1rPuKjqLysVrWPlPcPyrv1P+MqtQeCUQd7NGpgQ0rEwnJsmKdZVj85ZYnbo3A7FeaGRIQMPKcFKSpPjm6oP5yqta2X5AfCNrZEZAw8psQpKczdO61RPzlFe9qn9J61lfqT7TwhLUsPKbsMcms3pBftIGpehTybR+PqisM09Ww8pvgt4O/Hl+sgap6B3pvc1BJp9j0hpWXrMSFQTenZekwat5JRCVMYwMCGhYGUxCkvBHQNQeXz0fSSoBfpZq5X9OGv0T0LD6n4NQ8Otp3eoP8pCjipUIfCGtZ/1IMv0S0LD65T83+vuBA/KQoopFCFwAvFw6/RLQsPrlH6PHSS5/3b8MFYxB4C+AOKHI6ImAhtUT+DRsHIjw9/1KcPQJCfxxenyfsJmXN0FAw2qC4nR9/HZaZP/d6ZrbqicCX0+L8P/c0/iDHlbD6m/6Pwzs3t/wjjwDgUuBPWZob9MpCWhYU4KbsdmJwAkz9mHzfgksA2IejQ4JaFgdwk5DxV1V3F0Z5ROIu6y42zI6IqBhdQQ6DRPrVbE5NNavjPIJxDrWtkCsaxkdENCwOoA8b4j4RjC+GTTqIXAdEN8cGh0Q0LA6gJyGiL1WsefKqI9A7M2KPVpGywQ0rJYBp+5jh/T7uhnKUXoi8Aog3lgwWiSgYbUIN3Ud7wfGY0O8L2jUSyDeM4zH/Xjv0GiJgIbVEtjU7a8ms4pKDEb9BKKiQ5jWT+tPtZ8MNax2uUdtq6hxZQyHQNTOihpaRgsENKwWoKYuo2poVA81hkfgNUBUKzUaJqBhNQw0dRf12GPdKuqzG8MjEHXg49Ew6sIbDRLQsBqEmbqKk27CrOLkG2O4BOLEnTCtOIHHaIiAhtUQyHndxFmCcaagIYE42zDOODQaIqBhNQQydROnNMdpzYYE5gjEKdJxmrTRAAENqwGIqYudgCua686eKiKwM3BlRfn0loqG1Qz6DdK61YbNdGcvlRG4K61nfbuyvDpPR8NqBvnlQPwrakhgMQJx972LeGYjoGHNxi9anwLEOoUhgVEEYn3zuFEX+ffFCWhYs3069gXimyBDAuMSiG+QLxr3Yq9bkYCGNf0nYrO0brX29F3YcoAEfpjWs746wNxnTlnDmg7hY5JZbTNdc1sNnMAnk2k9PHAOE6evYU2MbHmDs4B4X8yQwLQE4j3Tw6dtPNR2GtbkM38IEG/kGxKYlUBU8jh31k6G1F7Dmmy2t0yPgmtM1syrJbAggQfSo+GN8hmPgIY1Hqe4aq1kVluM38QrJTCSwC3JtO4feaUXoGGN/yE4H4i63YYEmiYQ9f4PbLrTGvvTsMab1SOBOBnFkEBbBOJEpTPa6ryWfjWs0TMZB2VGfStDAm0TiPpZcdCusQgBDWvpj8Y6yaw28RMkgQ4I3JHWs+7tYKwih9Cwlp62i4E9i5xZRZdK4BJgr1LFt61bw1qc8PHAsrYnwP4lsACBE4CTJLMqAQ1r4U/FbsClfmAk0COB3YHLehw/y6E1rFWnZeO0brVuljOmqKEQuCetZ905lITHyVPDWpXSNcD248DzGgm0TOBaYIeWxyiqew1rxek6DTiqqBlUbO0ETgeOrj3JcfPTsH5Ban/ggnHBeZ0EOiRwAHBhh+NlO5SG9f9T8+y0Ye83sp0phQ2ZwL8DsYH5S0OGELlrWLBaWmR//tA/DOafNYHPpkX4B7NW2bI4DQveBbyyZc52L4EmCLwbOLSJjkrtY+iGdRjwzlInT92DJPBq4OxBZj7wR8Kt07rVLw918s27SAIPpfWsG4pUP6Pood5hPSGZ1TNm5GdzCfRB4NZkWvf1MXifYw7VsD4A7NcneMeWwIwEPgi8bMY+ims+RMM6BnhzcTOlYAmsSuBY4NQhgRmaYe0IXDmkCTbX6gnsBFxVfZYpwSEZ1vpp3eqpQ5lc8xwEgW+l9ay7h5DtkAzro8AuQ5hUcxwcgcuBXYeQ9VAM62TguCFMqDkOlsApwBtqz34IhrUPcFHtE2l+EgD2BT5UM4naDevp6T3BJ9U8ieYmgUTgB+l9w3+slUjNhvXoZFYvrHXyzEsCCxD4RDKt/66RTs2G9Tbg8BonzZwkMILAWcARNVKq1bAOBs6tccLMSQJjEjgEOG/Ma4u5rEbD+sP0KLhmMbOgUAk0T+An6dHwpua77q/H2gzr15JZPbc/pI4sgWwI3JxM6z+yUTSjkNoM673AgTMysbkEaiJwPnBQLQnVZFivBc6oZWLMQwINEjgSOLPB/nrrqhbDenF6FKwln94+EA5cJYH/TY+GHys9uxr+B39KMqtNS58M9UugRQK3J9P6XotjtN51DYb1d8BerZNyAAmUT+BiYO+S0yjdsN4InFTyBKhdAh0TOB74q47HbGy4kg3rT4DLGiNhRxIYDoHdgI+UmG6phvW0tG61XonQ1SyBngl8N61nfaNnHRMPX6phXQ3sMHG2NpCABOYIXAO8pDQcJRrWW4CjSwOtXglkSOA04PUZ6lpUUmmG9afAhSUBVqsEMiewP/A3mWt8RF5JhvWstG71W6XAVacECiDwr2k96x8K0EophvUryay2KgGqGiVQGIHPJNP6z9x1l2JYZwOvyh2m+iRQMIFzgMNy11+CYYVRhWEZEpBAuwTCsMK4so3cDSseAa8D4pHQkIAE2iUQj4TbAfGImGXkbFixuB5mFYvthgQk0A2BWHwP04rF+OwiZ8OK7QuxjcGQgAS6JRDbHGK7Q3aRq2HFxtDYIGpIQAL9EIgNpbGxNKvI0bDilZt49caQgAT6JRCv7sQrPNlEboYVLzNfD2yUDSGFSGC4BL4JbAvEy9JZRG6GFeViomyMIQEJ5EEgytBEOZosIifDikJ8UZDPkIAE8iIQBf+i8F/vkYthRYnjKHVsSEACeRKI0spRYrnXyMGw4vCIWLd6cq8kHFwCEliKwPfTelYcZtFb9G1YMX6Y1Yt6I+DAEpDAuAQ+nkwrjg3rJfo2rDjc8YheMndQCUhgGgJvA+LQ4l6iT8OKI+XjaHlDAhIoi8BBwPl9SO7LsJ6bHgUf30fSjikBCcxE4Mfp0fDmmXqZonEfhrVmMqvnTaHXJhKQQB4EPp9M6yddyunDsM4D4pbSkIAEyiYQSzoHd5lC14YVC+yx0G5IQAJ1EIgF+FiI7yS6NKzYuhD1rX6pk8wcRAIS6ILA/6T6WbHlofXoyrBiU2iY1e+3npEDSEACXRO4LZlWbC5tNboyrA8BsbXfkIAE6iQQr9bt03ZqXRjWG4B4edKQgATqJhDFC05uM8W2DWtXIMpTGBKQwDAIRHmoj7aVapuGFUX4Yt1q/bbE268EJJAdgbvTelYU/2s82jSsq4AosWpIQALDIhAlzndsI+W2DOtUIIrYGxKQwDAJxCEyxzSdehuG9TIgjgkyJCCBYROIY/o+0CSCpg3rmWnd6glNirQvCUigSAL3pfWsLzelvknDelwyq62bEmc/EpBA8QRuSKb1X01k0qRhvRM4rAlR9iEBCVRF4Gzg1U1k1JRhHQqc04Qg+5CABKok8CrgXbNm1oRhPT89Cq42qxjbS0AC1RJ4MD0afnaWDGc1rN9MZvXsWUTYVgISGASBLyXT+rdps53VsC4A9p92cNtJQAKDI3AhcMC0Wc9iWEcBp007sO0kIIHBEjgaOH2a7Kc1rO2Ba6YZ0DYSkIAEgB2AayclMY1hrZvWrTaedDCvl4AEJJAI3JnWs+6ZhMg0hnUpsNskg3itBCQggQUIXAbsPgmZSQ1rGXD8JAN4rQQkIIElCJwEnDAuoUkMa0/g4nE79joJSEACYxLYC7hknGvHNaxN0rrVOuN06jUSkIAEJiBwb1rPumNUm3ENKyqHbjuqM/8uAQlIYEoC1yfTWrL5OIYVz5hRXN6QgAQk0CaBOKxmyTXyUYYVd1Vxd2VIQAIS6ILAdkDcbS0YSxnWGsCngOd0odIxJCABCQBfBF4APLAQjaUM6wzgtSKUgAQk0DGBM4EjJzGsFwEf61ikw0lAAhKYI7AVsEopmsXusMKswrQMCUhAAn0QiMNY41DWFWIhw4pSpu/oQ6FjSkACEphHYO+VN6uvbFhrA7cAvyM2CUhAAj0TuBl43nwNKxvWscCbehbp8BKQgATmCLwciEKhy2O+Ya0O3ApsJCsJSEACmRCIhfdYgF/FsOKIrjiqy5CABCSQE4EoQROlaFa4w4rnxS1yUqkWCUhAAsDVwI7zDSuMKgzLkIAEJJAjgagY87W5NawTJymilWM2apKABKomEF8InjpnWD4OVj3XJieB4gncBGwZhrUBcFfx6ZiABCRQO4GnhWHtCnyk9kzNTwISKJ7AvmFYJwPHFZ+KCUhAArUTeGsY1qeBrWvP1PwkIIHiCdwQhnUbsGnxqZiABCRQO4Hbw7C+Dzyp9kzNTwISKJ7AD8KwHgIeW3wqJiABCdRO4OdhWD8C1qo9U/OTgASKJ3B/GNY3gacWn4oJSEACtRP4VhjW52IHae2Zmp8EJFA8gRvDsKJgX7ynY0hAAhLImcCJYVgelprzFKlNAhKYI7BJGNbj014s67j7wZCABHIlcBWw01y1Bk/KyXWa1CUBCQSBKOB39fya7p5F6AdDAhLIkcDyu6sQNt+w4n3CeK/QkIAEJJATgWemA3JWMKwQeChwTk5K1SIBCQyawIuBj88RWOjk5yOAMweNyOQlIIEcCCwDonz7I7GQYcUf9wAuyUGxGiQggUESiBp9qxzqvJhhBaGdU2G/5wwSl0lLQAJ9EPgicApwxUKDL2VYcf1qybSsSNrH1DmmBIZFIIwqfh5cLO1RhjXXLgr87Z1+4tAKQwISkEATBG5NpzrHuRJfH9XhuIY110/cccWjYpx1H9sgNh41gH+XgAQksBKBLwCx7zMKL1w/CZ1JDWvlvtcDNgfi97rp9xOBNdMrP3O/Hz2JKK+VgASKJPAw8OOVfqKi8T/N+4k1qvhvU8X/AVsz4ouVlMLMAAAAAElFTkSuQmCC";
const arrowLeft = "data:image/png;base64,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";
const arrowRight = "data:image/png;base64,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";
const arrowDown = "data:image/png;base64,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";
const startIcon = "data:image/png;base64,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";
const pauseIcon = "data:image/png;base64,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";
function scoreFormat(score) {
    return `${Math.floor((score % 1000) / 100)}${Math.floor((score % 100) / 10)}${Math.floor(score % 10)}`;
}
var Direction;
(function (Direction) {
    Direction[Direction["left"] = 0] = "left";
    Direction[Direction["right"] = 1] = "right";
    Direction[Direction["up"] = 2] = "up";
    Direction[Direction["down"] = 3] = "down";
})(Direction || (Direction = {}));
var State;
(function (State) {
    State[State["idel"] = 0] = "idel";
    State[State["run"] = 1] = "run";
    State[State["fail"] = 2] = "fail";
    State[State["paused"] = 3] = "paused";
})(State || (State = {}));
class SnakeModel {
    constructor(w, h) {
        this.state = State.idel;
        this.direction = Direction.right;
        this.highScore = 0;
        this.food = { x: -1, y: -1 };
        this.head = {
            x: 0,
            y: 0,
        };
        this.width = w;
        this.height = h;
    }
    refreshFood() {
        this.food.x = Math.floor(Math.random() * (this.width - 1));
        this.food.y = Math.floor(Math.random() * (this.height - 1));
    }
    get tail() {
        let node = this.head;
        while (node.next !== undefined) {
            node = node.next;
        }
        return node;
    }
    get score() {
        let node = this.head;
        let n = 0;
        while (node.next !== undefined) {
            n++;
            node = node.next;
        }
        return n;
    }
    forward(node) {
        switch (this.direction) {
            case Direction.left:
                node.x -= 1;
                break;
            case Direction.right:
                node.x += 1;
                break;
            case Direction.up:
                node.y -= 1;
                break;
            case Direction.down:
                node.y += 1;
                break;
        }
    }
    step() {
        if (this.state !== State.run) {
            return;
        }
        let tail = this.tail;
        while (tail.prev != undefined) {
            tail.x = tail.prev.x;
            tail.y = tail.prev.y;
            tail = tail.prev;
        }
        this.forward(this.head);
        if (this.head.x < 0 || this.head.x >= this.width
            || this.head.y < 0 || this.head.y >= this.height) {
            //If out of bound
            this.state = State.fail;
        }
        else if (this.head.x == this.food.x && this.head.y == this.food.y) {
            //If eat food
            let head = { x: this.food.x, y: this.food.y };
            this.forward(head);
            this.head.prev = head;
            head.next = this.head;
            this.head = head;
            this.refreshFood();
            this.highScore = Math.max(this.highScore, this.score);
            doric.storage(context).setItem(hignScoreKey, `${this.highScore}`);
        }
        if (this.crashAtSelf()) {
            //If crash at self
            this.state = State.fail;
        }
    }
    crashAtSelf() {
        let cur = this.head.next;
        while (cur !== undefined) {
            if (cur.x == this.head.x && cur.y == this.head.y) {
                return true;
            }
            cur = cur.next;
        }
        return false;
    }
    reset() {
        this.direction = Direction.right;
        this.state = State.run;
        this.head.x = 0;
        this.head.y = 0;
        this.head.next = undefined;
        this.refreshFood();
    }
}
class SnakeView extends doric.ViewHolder {
    panelZone() {
        return doric.vlayout([
            doric.stack([
                this.panel = doric.stack([]).apply({
                    layoutConfig: doric.layoutConfig().just(),
                }),
            ]).apply({
                padding: {
                    left: 2,
                    right: 2,
                    top: 2,
                    bottom: 2,
                },
                border: {
                    width: 1,
                    color: doric.Color.BLACK,
                },
                layoutConfig: doric.layoutConfig().fit().configAlignmnet(doric.Gravity.Center),
            }),
            doric.hlayout([
                doric.text({
                    text: "SCORE",
                    textSize: 20,
                    padding: {
                        left: 40
                    },
                }),
                this.score = doric.text({
                    text: "000",
                    textSize: 20,
                }),
                (new doric.Stack()).apply({
                    layoutConfig: doric.layoutConfig().just().configWeight(1),
                }),
                doric.text({
                    text: "HIGH",
                    textSize: 20,
                }),
                this.high = doric.text({
                    text: "000",
                    textSize: 20,
                    padding: {
                        right: 40
                    },
                }),
            ]).apply({
                layoutConfig: doric.layoutConfig().fit()
                    .configWidth(doric.LayoutSpec.MOST)
                    .configAlignmnet(doric.Gravity.Left),
                space: 10,
            }),
        ]).apply({
            layoutConfig: doric.layoutConfig().fit().configWidth(doric.LayoutSpec.MOST),
            backgroundColor: colors.bgColor,
            padding: {
                top: 20,
                bottom: 20,
            }
        });
    }
    controlZone() {
        return doric.vlayout([
            doric.hlayout([
                this.up = doric.image({
                    layoutConfig: doric.layoutConfig().just(),
                    width: 50,
                    height: 50,
                    imageBase64: arrowUp
                })
            ]),
            doric.hlayout([
                this.left = doric.image({
                    layoutConfig: doric.layoutConfig().just(),
                    width: 50,
                    height: 50,
                    imageBase64: arrowLeft,
                }),
                this.start = doric.image({
                    layoutConfig: doric.layoutConfig().just(),
                    width: 50,
                    height: 50,
                    imageBase64: startIcon,
                }),
                this.right = doric.image({
                    layoutConfig: doric.layoutConfig().just(),
                    width: 50,
                    height: 50,
                    imageBase64: arrowRight,
                }),
            ]).also(it => {
                it.space = 10;
            }),
            doric.hlayout([
                this.down = doric.image({
                    layoutConfig: doric.layoutConfig().just(),
                    width: 50,
                    height: 50,
                    imageBase64: arrowDown,
                })
            ]),
        ]).also(controlArea => {
            controlArea.space = 10;
            controlArea.gravity = new doric.Gravity().centerX();
            controlArea.layoutConfig = {
                alignment: new doric.Gravity().centerX(),
                widthSpec: doric.LayoutSpec.FIT,
                heightSpec: doric.LayoutSpec.FIT,
            };
        });
    }
    build(root) {
        root.backgroundColor = doric.Color.WHITE;
        doric.vlayout([
            this.panelZone(),
            this.controlZone(),
        ]).also(it => {
            it.layoutConfig = doric.layoutConfig().most();
            it.gravity = new doric.Gravity().centerX();
            it.space = 50;
        }).in(root);
    }
    bind(state) {
        let node = state.head;
        let nodes = [];
        while (node != undefined) {
            nodes.push(node);
            node = node.next;
        }
        nodes.push(state.food);
        nodes.forEach((e, index) => {
            let item = this.panel.children[index];
            if (item === undefined) {
                item = doric.stack([
                    doric.stack([]).apply({
                        layoutConfig: doric.layoutConfig().just().configAlignmnet(doric.Gravity.Center),
                        width: 9,
                        height: 9,
                    })
                ]).apply({
                    layoutConfig: doric.layoutConfig().just(),
                    width: 10,
                    height: 10,
                }).in(this.panel);
            }
            doric.takeNonNull(item.children[0])(v => {
                if (index === nodes.length - 1) {
                    v.backgroundColor = colors.foodColor;
                }
                else {
                    v.backgroundColor = colors.snakeColor;
                }
            });
            item.x = e.x * 10;
            item.y = e.y * 10;
        });
        if (nodes.length < this.panel.children.length) {
            this.panel.children.length = nodes.length;
        }
        this.score.text = `${scoreFormat(state.score)}`;
        this.high.text = `${scoreFormat(state.highScore)}`;
        this.start.imageBase64 = state.state === State.run ? pauseIcon : startIcon;
    }
}
class SnakeVM extends doric.ViewModel {
    constructor() {
        super(...arguments);
        this.timeInterval = 500;
        this.start = () => {
            if (this.timerId !== undefined) {
                clearInterval(this.timerId);
            }
            this.updateState(it => it.reset());
            this.timerId = setInterval(() => {
                this.updateState(it => it.step());
                if (this.getState().state === State.fail) {
                    this.stop();
                }
            }, this.timeInterval);
        };
        this.pause = () => {
            if (this.timerId !== undefined) {
                clearInterval(this.timerId);
            }
            this.updateState(it => it.state = State.paused);
        };
        this.resume = () => {
            if (this.timerId !== undefined) {
                clearInterval(this.timerId);
            }
            this.updateState(it => it.state = State.run);
            this.timerId = setInterval(() => {
                this.updateState(it => it.step());
                if (this.getState().state === State.fail) {
                    this.stop();
                }
            }, this.timeInterval);
        };
        this.stop = () => {
            if (this.timerId !== undefined) {
                clearInterval(this.timerId);
                this.timerId = undefined;
            }
        };
        this.left = () => {
            this.updateState(it => it.direction = Direction.left);
        };
        this.right = () => {
            this.updateState(it => it.direction = Direction.right);
        };
        this.up = () => {
            this.updateState(it => it.direction = Direction.up);
        };
        this.down = () => {
            this.updateState(it => it.direction = Direction.down);
        };
    }
    onAttached(state, v) {
        doric.takeNonNull(v.start)(it => it.onClick = () => {
            if (state.state === State.run) {
                this.pause();
            }
            else if (state.state === State.paused) {
                this.resume();
            }
            else {
                this.start();
            }
        });
        doric.takeNonNull(v.left)(it => it.onClick = this.left);
        doric.takeNonNull(v.right)(it => it.onClick = this.right);
        doric.takeNonNull(v.up)(it => it.onClick = this.up);
        doric.takeNonNull(v.down)(it => it.onClick = this.down);
        v.panel.apply({
            width: state.width * 10,
            height: state.height * 10,
        });
        doric.storage(context).getItem(hignScoreKey).then(r => {
            this.updateState(s => {
                if (r) {
                    s.highScore = parseInt(r);
                }
                else {
                    s.highScore = 0;
                }
            });
        });
    }
    onBind(state, v) {
        v.bind(state);
        if (state.state === State.run) {
            v.start;
        }
        if (state.state === State.fail) {
            doric.popover(context).show(doric.vlayout([
                doric.text({
                    text: "游戏结束",
                    textSize: 40,
                }),
                doric.hlayout([
                    doric.text({
                        text: "继续",
                        textSize: 30,
                        padding: {
                            left: 20,
                            right: 20,
                            top: 10,
                            bottom: 10,
                        },
                        border: {
                            width: 1,
                            color: doric.Color.BLACK,
                        },
                        onClick: () => {
                            doric.popover(context).dismiss();
                            this.start();
                        },
                    }),
                    doric.text({
                        text: "退出",
                        textSize: 30,
                        padding: {
                            left: 20,
                            right: 20,
                            top: 10,
                            bottom: 10,
                        },
                        border: {
                            width: 1,
                            color: doric.Color.BLACK,
                        },
                        onClick: () => {
                            doric.popover(context).dismiss();
                            doric.navigator(context).pop();
                        },
                    }),
                ]).apply({
                    space: 100,
                    layoutConfig: doric.layoutConfig().fit().configMargin({
                        bottom: 20
                    }),
                }),
            ]).apply({
                layoutConfig: doric.layoutConfig().fit().configWidth(doric.LayoutSpec.MOST).configMargin({
                    top: 300,
                    left: 20,
                    right: 20,
                }),
                border: {
                    width: 1,
                    color: doric.Color.BLACK,
                },
                backgroundColor: colors.bgColor,
                gravity: doric.Gravity.Center,
            }));
        }
    }
}
let SnakePanel = class SnakePanel extends doric.VMPanel {
    getViewModelClass() {
        return SnakeVM;
    }
    getState() {
        return new SnakeModel(30, 30);
    }
    getViewHolderClass() {
        return SnakeView;
    }
    onShow() {
        doric.navbar(context).setTitle("贪吃蛇");
    }
};
SnakePanel = __decorate([
    Entry
], SnakePanel);
//# sourceMappingURL=Snake.js.map