From ddaad26374653be4bae2f15d2f8d2e765e024b8b Mon Sep 17 00:00:00 2001
From: Pierre Hubert <pierre.git@communiquons.org>
Date: Mon, 23 Mar 2020 15:17:50 +0100
Subject: [PATCH] Render snake

---
 levels/1.json |  4 +---
 levels/2.json |  6 +++---
 script.js     | 35 ++++++++++++++++++++++++++++++++---
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/levels/1.json b/levels/1.json
index 3d9e2e7..d91f5e7 100644
--- a/levels/1.json
+++ b/levels/1.json
@@ -9,9 +9,7 @@
         [20, 20]
     ],
     "snake": [
-      [6,10],
-      [6,11],
-      [6,12]
+        [4,2], [4,1], [3,1], [2,1]
     ]
 
 }
\ No newline at end of file
diff --git a/levels/2.json b/levels/2.json
index fe1e223..13904ff 100644
--- a/levels/2.json
+++ b/levels/2.json
@@ -10,9 +10,9 @@
         [10,12]
     ],
     "snake": [
-      [60,60],
-      [60,59],
-      [60,58]
+      [6,6],
+      [6,5],
+      [6,4]
     ]
 
 }
\ No newline at end of file
diff --git a/script.js b/script.js
index e283cff..ac805dd 100644
--- a/script.js
+++ b/script.js
@@ -122,7 +122,10 @@ async function startGame(gameID) {
      */
     let interval = setInterval(() => step(), level.delay);
     function step() {
+        console.log("render")
 
+        if(!canvas.isConnected)
+            clearInterval(interval)
         
         // Redraw screen
         ctx.clearRect(0, 0, canvas.width, canvas.height)
@@ -137,10 +140,11 @@ async function startGame(gameID) {
 
         
         // Now draw the map
-        for(let y = 0; y < map.length; y++) {
-            for(let x = 0; x < map[y].length; x++) {
+        for(let y = 1; y <= map.length; y++) {
+            for(let x = 1; x <= map[y-1].length; x++) {
 
-                switch(map[y][x]) {
+                // Adapt rendering to the element to display
+                switch(map[y-1][x-1]) {
 
                     case WALL:
                         ctx.fillStyle = "darkRed";
@@ -153,7 +157,28 @@ async function startGame(gameID) {
                         break;
 
                     case SNAKE:
+                        ctx.fillStyle = "orange"
+                        ctx.fillRect(x*cell_width, y*cell_height, cell_width, cell_height)
+
+                        // Check if it is the head of the snake
+                        // If it is the case, we draw an eye to the snake
+                        const headPos = snake[snake.length-1];
                         
+                        if(headPos[0] == y-1 && headPos[1] == x-1) {
+                            ctx.fillStyle = "darkRed";
+                            ctx.beginPath();
+                            ctx.arc(
+                                (x+0.5)*cell_width, // x
+                                (y+0.5)*cell_height, // y
+                                3, // width
+                                0, // startAngle
+                                2*Math.PI) // End angle
+                            ctx.fill();
+                            console.log(x, y)
+                        }
+                            
+
+                        break;
 
 
                 }
@@ -168,6 +193,10 @@ async function startGame(gameID) {
  */
 function changeWindow() {
     
+    // Make sure there are not canvas left in the background (to make sure
+    // no interval is running for an old game)
+    canvasTarget.innerHTML = ""
+
     // Try to get game ID
     const gameID = Number(window.location.hash.substr(1));