rithmschool · toChaim · Aug 1, 2017 · Aug 3, 2017 · Aug 3, 2017 · Aug 3, 2017
diff --git a/canvas_exercise/shapes_game/index.html b/canvas_exercise/shapes_game/index.html
@@ -10,33 +10,57 @@
 </head>
 <body>
   <div class="container">
-    <div class="col-xs-10 canvas-container">
-      <canvas id="shapes-game" height="750" width="800"></canvas>
-    </div>
-    <div class="col-xs-2 scores">
-      <h1>Score</h1>
-      <h3><span id="score-val">0</span></h3>
-      <h1>Timer</h1>
-      <h3><span id="time-remaining">30</span></h3>
-      <div class="legend">
-        <h1>Legend</h1>
-        <div class="legend-contents">
-          <div class="triangle-bottomleft-red">
-          </div>
-          <h4>Left</h4>
-          <div class="white-square">
-          </div>
-          <h4>Right</h4>
+
+    <div class="row">
+      <div class="col-md-10 col-xs-12 canvas-container">
+        <canvas id="shapes-game" class="col-xs-12"></canvas>
+      </div>
+
+      <div class="col-md-2 col-xs-12 key">
+
+      <div class="col-md-12 col-xs-6">
+          <h1>Score</h1>
+          <h3><span id="score-val">0</span></h3>
+      </div>
+      <div class="col-md-12 col-xs-6">
+          <h1>Timer</h1>
+          <h3><span id="time-remaining">30</span></h3>
+      </div>
+
+    <div class="legend col-xs-12">
+
+      <h1 class="col-xs-12">Legend</h1>
+
+      <div class="shape col-md-12 col-xs-6">
+        <div class="triangle-bottomleft-red">
+        </div>
+        <h4>Left</h4>
+      </div>
+
+      <div class="shape col-md-12 col-xs-6">
+        <div class="white-square">
+        </div>
+        <h4>Right</h4>
+      </div>
+
+        <div class="shape col-md-12 col-xs-6">
           <div class="triangle-bottomleft-black">
             <div class="triangle-inner-white"></div>
           </div>
           <h4>Up</h4>
-          <div class="red-square">
-          </div>
+        </div>
+
+        <div class="shape col-md-12 col-xs-6">
+          <div class="red-square"></div>
           <h4>Down</h4>
         </div>
-      </div>
+
+    </div>
+
+    </div>
+
     </div>
+
   </div>
 </body>
 </html>
diff --git a/canvas_exercise/shapes_game/index.js b/canvas_exercise/shapes_game/index.js
@@ -1,15 +1,91 @@
 window.addEventListener("load", function() {
 
-  function clear(ctx, width, heigt) {
+  function clear() {
+    ctx.clearRect(0,0,width,height);
   }
 
-  function drawRandomShape(ctx, width, height) {
+  function drawRandomShape() {
+    let top = Math.floor(Math.random() * (height -50));
+    let left = Math.floor(Math.random() * (width -50));
+    let pick = Math.floor(Math.random() * 4);
+    clear();
+
+    switch (pick){
+      case 0: //white0 white triangle = up
+        expectedKey = 'ArrowUp';
+        ctx.fillStyle = "white";
+        ctx.beginPath();
+        ctx.moveTo(left,top);
+        ctx.lineTo(left+50, top+50);
+        ctx.lineTo(left, top+50);
+        ctx.fill();
+        ctx.closePath();
+        break;
+      case 1: //red1 red square = down
+        expectedKey = 'ArrowDown';
+        ctx.fillStyle = 'red';
+        ctx.fillRect(
+          top,
+          left,
+          50,
+          50);
+        break;
+      case 2: //red0 red triangle = left
+        expectedKey = 'ArrowLeft';
+        ctx.fillStyle = "red";
+        ctx.beginPath();
+        ctx.moveTo(left,top);
+        ctx.lineTo(left+50, top+50);
+        ctx.lineTo(left, top+50);
+        ctx.fill();
+        ctx.closePath();
+        break;
+      case 3: //white1 white square = right
+        expectedKey = 'ArrowRight';
+        ctx.fillStyle = 'white';
+        ctx.fillRect(
+          top,
+          left,
+          50,
+          50);
+        break;
+    }
+
   }
 
-  function drawGameStartText(ctx, width, height, score) {
+  function drawGameStartText() {
+    console.log('End Game');
+    clear();
+    ctx.font = '2em serif';
+    ctx.textAlign = 'center';
+    ctx.fillStyle = 'white';
+    ctx.fillText('Press the space bar to start the game.', 
+      Math.floor(width/2), 
+      Math.floor(height/2.25));
+    if(score > 0){
+      ctx.fillText('Last score is ' + score, 
+      Math.floor(width/2), 
+      Math.floor(height/2));
+    }
+
   }
 
-  function restartGame(ctx, width, height) {
+  function startGame(){
+        console.log('Starting Game');
+        scoreSpan.innerText = score = 0;
+        seconds = 30;
+        gameOn = true;
+        clear();
+        drawRandomShape();
+
+        intervalId = setInterval(function(){
+          timerSpan.innerText = --seconds;
+          if(seconds <= 0) {
+            clearInterval(intervalId);
+            gameOn = false;
+            drawGameStartText();
+          }
+        }, 1000);
   }
 
   var canvas = document.getElementById("shapes-game"),
@@ -18,19 +94,28 @@ window.addEventListener("load", function() {
       gameOn = false,
       expectedKey = undefined,
       ctx = canvas.getContext('2d'),
-      // white triangle = up, red square = down,
-      // red triangle = left, white square = right
-      expectedKeysMap = {white0: 38, red1: 40, red0: 37, white1: 39},
       timerSpan = document.getElementById("time-remaining"),
       scoreSpan = document.getElementById("score-val"),
-      seconds = 3,
+      score = 0,
+      seconds = 0,
       intervalId;
 
   canvas.width = width;
   canvas.height = height;
 
-  document.addEventListener("keyup", function() {
-
+  document.addEventListener("keyup", function(e) {
+      if(e.key === ' ' && !gameOn){
+        startGame();
+      }else if(gameOn && e.key == expectedKey){ //right key
+        scoreSpan.innerText = ++score;
+        drawRandomShape();
+      }else if(gameOn && 'ArrowUpArrowDownArrowLeftArrowRight'.includes(e.key)){ //wrong key
+        scoreSpan.innerText = --score;
+        drawRandomShape();
+      }
   });
+
+  //On Load
+  drawGameStartText();
 });
 
diff --git a/canvas_exercise/shapes_game/styles.css b/canvas_exercise/shapes_game/styles.css
@@ -11,11 +11,11 @@ body {
   padding: 10px;
 }
 .canvas-container, #shapes-game {
-  height: 750px;
-  width: 800px;
+  height: 90vh;
 }
 
-.scores {
+.key {
+  height: 90vh;
   padding: 10px;
   text-align: center;
 }
@@ -30,20 +30,23 @@ body {
 }
 
 .triangle-bottomleft-red {
+  margin: 0 auto;
   width: 0;
   height: 0;
   border-bottom: 50px solid red;
   border-right: 50px solid transparent;
 }
 
 .triangle-bottomleft-black {
+  margin: 0 auto;
   width: 0;
   height: 0;
   border-bottom: 54px solid black;
   border-right: 58px solid transparent;
 }
 
 .triangle-inner-white {
+    margin: 0 auto;
     position: relative;
     top: 2px;
     left: 2px;
@@ -54,6 +57,7 @@ body {
 }
 
 .triangle-left {
+    margin: 0 auto;
     width: 0;
     height: 0;
     border-top: 23px solid transparent;
@@ -62,6 +66,7 @@ body {
 }
 
 .inner-triangle {
+    margin: 0 auto;
     position: relative;
     top: -20px;
     left: 2px;
@@ -73,12 +78,14 @@ body {
 }
 
 .red-square {
+  margin: 0 auto;
   width: 50px;
   height: 50px;
   background-color: red;
 }
 
 .white-square {
+  margin: 0 auto;
   width: 50px;
   height: 50px;
   background-color: white;

diff --git a/es2015_exercise/readme.md b/es2015_exercise/readme.md
@@ -11,23 +11,42 @@ var person = {
         }.bind(this),1000)
     }
 }
+
+// 2015
+var person = {
+    fullName: "Harry Potter",
+    sayHi(){
+        setTimeout(() => console.log(`Your name is ${this.fullName}`),1000)
+    }
+}
 ```
 
 ```javascript
 var name = "Josie"
 console.log("When " + name + " comes home, so good")
+
+// 2015
+var name = "Josie";
+console.log(`When ${name} comes home, so good`);
 ```
 
 ```javascript
 var DO_NOT_CHANGE = 42;
 DO_NOT_CHANGE = 50; // stop me from doing this!
+
+// 2015
+const DO_NOT_CHANGE = 42;
 ```
 
 ```javascript
 var arr = [1,2]
 var temp = arr[0]
 arr[0] = arr[1]
 arr[1] = temp
+
+// 2015
+let [ta, tb, ...tc] = arr;
+arr = [tb, ta, ...tc];
 ```
 
 ```javascript
@@ -36,6 +55,9 @@ function double(arr){
         return val*2
     });
 }
+
+// 2015
+var double = arr => arr.map(val => val*2);
 ```
 
 ```javascript
@@ -48,6 +70,9 @@ var obj = {
 
 var a = obj.numbers.a;
 var b = obj.numbers.b;
+
+// 2015
+var {a, b} = obj.numbers;
 ```
 
 ```javascript
@@ -62,6 +87,9 @@ function add(a,b){
     }
     return a+b
 }
+
+// 2015
+var add = (a = 10,b = 10) => a+b;
 ```
 
 Research the following functions - what do they do?