From 8ba536146929cd45d658d65d6ada56f62f8c46f4 Mon Sep 17 00:00:00 2001
From: Mathieu <math.poke@gmail.com>
Date: Fri, 27 Mar 2020 18:33:32 +0100
Subject: [PATCH] Food and Wall added to the page "rules"

---
 assets/food/cherry.png | Bin 0 -> 982 bytes
 assets/style.css       |   5 +++++
 index.html             |  12 +++++++++++-
 script.js              |  18 ++++++++++++++++--
 4 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 assets/food/cherry.png

diff --git a/assets/food/cherry.png b/assets/food/cherry.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c0355fcce40e7c06fd1d56258a605e1b8e5f1ad
GIT binary patch
literal 982
zcmeAS@N?(olHy`uVBq!ia0vp^SAqBf2OE%_(5qqqq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>a~60+7BevL9R^{><M}I6fP#u8t`Q~9MX8A;nfZANA(^?U3`Pb<237{f
zRz~Iuh89-FhE^tK?~SkbF)%ROdAc};RK&f#W0-d(K*ZsqgZM!sffl2Q8IjD|DZFnQ
z+N?5}XEz>8eezSV{8{yz;#ogKh5nwos{QAQG|(zIXlSn3T(c>^e){>fx2}Hw@b(j@
ziwmn^prcQSfUxKhBxX)X%=U%8oxk75PrJOUT>hT^^3%V*etlkK^-^o!dNmZKD7tbk
zPbv4hu_t2&x`8lNn*$3Y7ta=2{C~Qp{rP7{ttN9NEoz#vLP1TdqZ5T`rlpttT3U3m
zTm5^T;QiO}*lCiMYu0n?*Zu9<I2FNcNA)CF^o%v<HQBd!`R=6(8mz>02H0`WPX4fx
zX45a$*Y-hoCd~1&rHc=_9r#~Zk6TIXY2o)5)qiY$lUjVhmK~=_XX~77zp(uO{`YUu
zt!4iH{-<9qiTwU{p8km?Si@;i(~X_;Z1`;t{x2-wKIdBPzP+)2z5V_Dr!())Z*PBk
z#p1AALv`K3H)pwV26g+L6%wKOEHb%^ldg!~`Meru<n8Y2?F!s%#^jb;3slPZ{%0so
zU%br%s#w$8us0{9=hj8r{av0|)0qqF#^PL{iZ5;lR^*>QPuQ<-fG%*BW)zM+Z9DJL
kJZ4-m4o~q6>}AED`8WNJj#!b$cL*fx>FVdQ&MBb@0A`MNPXGV_

literal 0
HcmV?d00001

diff --git a/assets/style.css b/assets/style.css
index 7aa1720..2dc5457 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -67,4 +67,9 @@ canvas {
 #rulesScreen {
     text-align: center;
     z-index: 2;
+}
+
+img {
+    height: 50px;
+    width: 50px;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 08f1ddc..6ccc169 100644
--- a/index.html
+++ b/index.html
@@ -34,8 +34,18 @@
         <h1>Rules</h1>
 
         <p>Do not touch any map's border or any wall. (Do not harm your snake.. You are watched)</p>
-        <p>You have one job : eat food ! (Try not to feed him with its own tail)</p>
+        <p>You have one job : eat food ! (Try to not feed him with its own tail)</p>
 
+        <br>
+        <h2>Know everything about the different blocks :</h2>
+
+        Food :
+        <div id="foodList"></div>
+
+        Wall :
+        <div id="wallList"></div>
+
+        <br>
         <a href=# id="menuBtn">Go back to menu</a>
     </div>
 
diff --git a/script.js b/script.js
index 96a7767..3514d52 100644
--- a/script.js
+++ b/script.js
@@ -66,13 +66,18 @@ function playAudio(url) {
 
 // Get elements
 const startScreen = byId("startScreen")
-const gameScreen = byId("gameScreen")
+
 const rulesScreen = byId("rulesScreen")
+const rulesBtn = byId("rulesBtn")
+const foodList = byId("foodList")
+const wallList = byId("wallList")
+
+const gameScreen = byId("gameScreen")
 const levelChoicesTarget = byId("levelChoice")
 const stopGameBtn = byId("menuBtn")
 const canvasTarget = byId("canvasTarget")
 const scoreTarget = byId("scoreTarget")
-const rulesBtn = byId("rulesBtn")
+
 
 // Get map texture
 const imgGrass = new Image();
@@ -85,6 +90,8 @@ imgWall.src = './assets/wall/wall.jpg';
 // Get food texture
 const imgApple = new Image();
 imgApple.src = './assets/food/apple.png';
+const imgCherry = new Image();
+imgCherry.src = './assets/food/cherry.png';
 
 // Get snake texture
 let imgSnakeHeadUp = new Image();
@@ -115,6 +122,13 @@ function showRulesScreen() {
     startScreen.style.display = "none";
     gameScreen.style.display = "none";
     rulesScreen.style.display = "unset";
+
+    // Display all food
+    foodList.appendChild(imgApple);
+    foodList.appendChild(imgCherry);
+
+    // Display all wall
+    wallList.appendChild(imgWall);
 }