{% comment %}
Re2o est un logiciel d'administration développé initiallement au rezometz. Il
se veut agnostique au réseau considéré, de manière à être installable en
quelques clics.

Copyright © 2018  Hugo Levy-Falk

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License along
with this program; if not, write to the Free Software Foundation, Inc.,
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
{% endcomment %}

{% load i18n %}
{% load staticfiles %}

<!DOCTYPE html>
<html>
    <head prefix="og: http://ogp.me/ns#">
        <meta property="og:title" content="Re2o" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="{{ request.scheme }}://{{ request.get_host }}/" />
        <meta property="og:image" content="{% static 'images/logo_re2o.svg' %}"/>
        <meta property="og:image:type" content="image/svg"/>
        <meta property="og:image:alt" content="The Re2o logo"/>
	<meta property="og:description" content="Networking managing website endorsed by FedeRez." />

        <meta charset="utf-8">
        <link rel="shortcut icon" type="image/svg" href="{% static 'images/logo_re2o.svg' %}">
	<title>{% trans "404 error: page not found" %}</title>
        <script src="/javascript/jquery/jquery.min.js"></script>
        <script>
var snake = [{x:0,y:0,vx:1,vy:0}];
var bonus = [];
var lost = false;
var grid = 20;
var score = 0;

function update_snake() {
    var l = snake.length;
    var c = document.getElementById("myCanvas");
    var width = c.width;
    var height = c.height;
    var last_case = {
        x:snake[l-1].x,
        y:snake[l-1].y,
        vx:snake[l-1].vx,
        vy:snake[l-1].vy
    };
    for(var i=l-1; i>=0; --i){
        if(i == 0)
        {
            var m = bonus.length;
            var remove = -1;
            for(var j=0; j<m; ++j)
            {
                if((bonus[j].x == snake[i].x) && (bonus[j].y == snake[i].y))
                {
                    remove = j;
                }
            }
            if(remove >= 0){
                bonus.splice(remove, 1);
                snake.push(last_case);
                score += 1;
            }
        }
        if((i > 0) && (snake[i].x == snake[0].x) && (snake[i].y == snake[0].y))
        {
            lost = true;
        }
        snake[i].x = (snake[i].x + snake[i].vx * grid + width)%width;
        snake[i].y = (snake[i].y + snake[i].vy * grid + height)%height;
        if(i>0)
        {
            snake[i].vx = snake[i-1].vx;
            snake[i].vy = snake[i-1].vy;
        }
    }
}

function draw_snake() {
    var l = snake.length;
    var c = document.getElementById("myCanvas");
    if(c.getContext) {
        var ctx = c.getContext("2d");
        for(var i=0; i<l; ++i){
            ctx.fillStyle = "#2980b9";
            ctx.fillRect(snake[i].x, snake[i].y, grid, grid);
        }
    }
}

function draw_bonus() {
    var l = bonus.length;
    var ctx = document.getElementById("myCanvas").getContext("2d");
    for(var i=0; i<l; ++i)
    {
        ctx.beginPath();
        var x = bonus[i].x;
        var y = bonus[i].y;
        ctx.beginPath();
        ctx.arc(x+grid/2, y+grid/2, grid/2, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#2ecc71';
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#27ae60';
        ctx.stroke();
    }
}

function draw_score(){
    var ctx = document.getElementById('myCanvas').getContext('2d');
    ctx.font = '50px serif';
    ctx.fillStyle = '#2ecc71';
    ctx.fillText("{% trans "Score: " %} " + score, 10, 60);
}

function draw_lost(){
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext('2d');
    ctx.fillStyle = '#2ecc71';
    ctx.font = '50px serif';
    ctx.fillText("{% trans "YOU LOST" %}", c.width/2, c.height/2);
}


function update_bonus() {
    var c = document.getElementById("myCanvas");
    var width = c.width;
    var height = c.height;
    var x = (Math.floor(Math.random() * width / grid))*grid;
    var y = (Math.floor(Math.random() * height / grid))*grid;
    bonus.push({x:x, y:y});
}

function draw() {
    var c = document.getElementById("myCanvas");
    var width = c.width;
    var height = c.height;
    var ctx = c.getContext("2d");
    ctx.clearRect(0, 0, width, height);
    if(!lost){
        draw_snake();
        draw_bonus();
        draw_score();
    }
    else
    {
        draw_score();
        draw_lost();
    }
}

function on_keydown(e) {
    if(e.which == 37) { // left
        snake[0].vx = -1;
        snake[0].vy = 0;
    }
    else if(e.which == 38) { // up
        snake[0].vx = 0;
        snake[0].vy = -1;
    }
    else if(e.which == 39) { // right
        snake[0].vx = 1;
        snake[0].vy = 0;
    }
    else if(e.which == 40) { // down
        snake[0].vx = 0;
        snake[0].vy = 1;
    }
}

$("html").keydown(on_keydown);
window.setInterval(draw, 100);
window.setInterval(update_snake, 100);
window.setInterval(update_bonus, 3000);

        </script>
<style>
html {
    background: #34495e;
}
h1 {
    display:block;
    text-align: center;
    background: #2c3e50;
    padding: 1em;
    width: 80%;
    margin: auto;
    color: #ecf0f1;
    margin-bottom: 1em;
    margin-top: 1em;
}
a
{
    font-size: x-small;
    color: #ecf0f1;
}
#myCanvas
{
    width:80%;
    display:block;
    margin-left:auto;
    margin-right:auto;
    height:50%;
}
</style>
    </head>
    <body>
        <h1>{% trans "Yup, that's a 404 error." %} <a href="/">{% trans "(Go back to a safe page)" %}</a></h1>
<canvas id="myCanvas" width="800px" height="300px" style="border:1px solid #d3d3d3;">
    {% trans "Your browser does not support the HTML5 canvas tag." %}
</canvas>

    </body>
</html>