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

{% block title %}
    Maze {{ round }}
{% endblock title %}

{% block styles %}
   {# <link href="{% static "maze_timing/style.css" %}" rel="stylesheet"> #}
{% endblock styles %}

{% block content %}
    <canvas width="616" height="556" id="mazecanvas">Can't load the maze game, because your browser doesn't support HTML5.</canvas>
    <noscript>JavaScript is not enabled. To play the game, you should enable it.</noscript>

    <div>
        <button id="next-button" class="otree-btn-next btn btn-primary d-none">Next</button>
    </div>

    <div>
        <input type="hidden" name="solve_time_seconds" id='solve_time_seconds' value="{{ seconds_to_solve }}">
        <input type="hidden" name="solved" id='solved' value="0">
        <input type="hidden" name="maze_id" id='maze_id' value="{{ maze_id }}">
    </div>
{% endblock content %}

{% block scripts %}
    <script src={% static 'maze_timing/js/js.cookie.js' %}></script>
    <script>
        let maze_id = '{{ maze_id }}';
        var secondsToSolve = {{ seconds_to_solve }};

        var previousSecondsRemaining = Cookies.get(maze_id);
        // Page refreshed
        if (typeof previousSecondsRemaining !== 'undefined') {
            var timeLeft = parseInt(Cookies.get(maze_id));
            var x = parseInt(Cookies.get('x'));
            var y = parseInt(Cookies.get('y'));
            var solved = parseInt(Cookies.get('solved'));
            var START_X = x;
            var START_Y = y;
        }
        // First time loading
        else {
            var timeLeft = secondsToSolve;
            var x = {{ start_x }};
            var y = {{ start_y }};
            Cookies.set('x', x);
            Cookies.set('y', y);
            var solved = 0;
            Cookies.set('solved', 0);
            var START_X = {{ start_x }};
            var START_Y = {{ start_y }};
        }

        const MAZE_IMG_PATH = "{% static maze_img %}";
        var END_X = {{ end_x }};
        var END_Y = {{ end_y }};

    </script>
    <script src={% static 'maze_timing/js/maze.js' %}></script>
{% endblock scripts %}