{% extends "global/Page.html" %}
{% load otree %}

{% block title %}Part 1{% endblock %}

{% block content %}

<div class="outer">
     <canvas id="canvas" width="500" height="500" class="canvas">
		</canvas>
        <div class="board right">
            <h4>INFORMATION</h4>
            <p>Collected boxes:<a id="delectedCount">0</a>
            </p>
            <p>Left boxes:
                <a id="leftCount">100</a>
            </p>
        </div>
        <input type="button" value="STOP" class="mybutton right" onclick="stop()" />
    </div>
</body>

<style type="text/css">
    .outer {
        top: 50%;
        margin: 0 auto;
        width: 750px;
        height: 520px;
        position: relative;
        background-color: #C2C2C2;
        border: 2px solid dimgrey;
    }
    
    .board {
        width: 180px;
        height: 180px;
        position: absolute;
        margin: 0 auto;
        top: 50px;
        background-color: grey;
        padding: 20px;
        right: 10px;
        border: 2px solid dimgrey;
    }
    
    .mybutton {
        width: 180px;
        height: 150px;
        display: inline-block;
        position: absolute;
        bottom: 30px;
        right: 20px;
    }
    
    .canvas {
        position: absolute;
        left: 10px;
        top: 10px;
        background-color: white;
        width: 500px;
        height: 500px;
        border: 1px solid #000000;
    }
</style>
<script type="text/javascript">
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var blockSize = 500 / 10; //每个块的大小
    var blankSize = 1; //空隙的大小
    var deletedCount = 0;
    var leftCount = 100;
    var clock;
    /**
     * 绘制一个方块，isWhite为判断是否要绘制白块
     * 
     * x,y为方块的坐标，即第几行第几个，从0,0开始，9,9结束
     * @param {*} x :int
     * @param {*} y :int
     * @param {*} isWhite :Boolean
     * @returns
     */
    function drawBlock(x, y, isWhite) {
        var leftUpX = 0 + x * blockSize;
        var leftUpY = 0 + y * blockSize;
        ctx.save();
        ctx.fillStyle = "white";
        ctx.fillRect(leftUpX, leftUpY, blockSize, blockSize); //绘制白色背景
        if (isWhite == false) {
            ctx.fillStyle = "rgba(79,79,79,0.8)";
            var size = blockSize - 2 * blankSize;
            ctx.fillRect(leftUpX + blankSize, leftUpY + blankSize, size, size); //绘制灰色正方形
        }
        ctx.restore();
    }
    /**
     * 初始化canvas,加载所有的箱子 
     * @param
     * @returns
     */
    function drawInit() {
        for (var i = 0; i <= 9; i++) {
            for (var j = 0; j <= 9; j++) {
                drawBlock(i, j, false);
            }
        }
    }
    /**
     * 继续收集一个箱子
     * @param
     * @returns
     */
    function collectABox() {
        leftCount--;
        deletedCount = 100 - leftCount;
        var y = (deletedCount - 1) % 10;
        var x = parseInt((deletedCount - 1) / 10);
        drawBlock(y, x, true);
        document.getElementById("delectedCount").innerHTML = deletedCount;
        document.getElementById("leftCount").innerHTML = leftCount;
    }
    /**
     * 停止按钮
     * 
     * 终止计时器
     * @param
     * @returns
     */
    function stop() {
        clearInterval(clock);
    }

    function loading() {
        drawInit();
        clock = setInterval(() => {
            leftCount > 0 ? collectABox() : clearInterval(clock);
        }, 1000); //每1秒走一次的计时器
    }
    //脚本加载后运行这里
    loading();
</script>
{% formfields %}
{% next_button %}

{% endblock %}