inland-empire-software-development · SJT1988 · Aug 4, 2019 · Aug 4, 2019 · Aug 31, 2019 · Aug 31, 2019
diff --git a/README.md b/README.md
@@ -23,14 +23,49 @@
 </p>
 
 <p align="center">
-  Welcome to the official repository for the IESD Hack Day event.
+  August 2019 IESD Hack Day event.
 </p>
 
 
 ## **Getting Started**
 
-Look under branches and find the appropriate month and year for the Hack Day you're participating in. Each branch has its own documentation for getting started. 
+This repository has the resources to get you prepared for the Hack Day event. 
+
+```Starter code has been update - 8/31/19 @ 1:55 PM.```
 
 If you have any questions, please ask on our [Slack](https://ie-sd.slack.com). We welcome everyone to our Slack, so don't be afraid to join! Have fun coding!
 
 **<a href="https://bit.ly/2C0umfQ">Join our Slack!</a>**
+
+## **Concepts to Review**
+Resources section below has links for these concepts. 
+- Canvas 
+- RequestAnimationFrame (JS Method)
+- Object Oriented JavaScript 
+- Prototypal Inheritance 
+- Sprites
+- Keyboard Events 
+
+## **Resources**
+List will be updated up until the day of the Hack Day event.
+- <a href="https://jlongster.com/Making-Sprite-based-Games-with-Canvas">Making Sprite Based Games with Canvas</a> (2013 article - still relevant)
+- <a href="http://blog.sklambert.com/html5-canvas-game-2d-collision-detection#d-collision-detection">HTML5 Canvas Game: 2D Collision Detection</a>
+- <a href="https://stackoverflow.com/questions/13916966/adding-collision-detection-to-images-drawn-on-canvas">Adding collision detection to images drawn on canvas on StackOverflow</a>
+- <a href="https://lowrey.me/modals-in-pure-es6-javascript/">Modals in Pure ES6 JavaScript</a>
+- <a href="https://css-tricks.com/snippets/javascript/javascript-keycodes/">KeyboardEvent Value (keyCodes, metaKey, etc) via CSS-Tricks</a>
+
+### **RequestAnimationFrame**
+
+The `window.requestAnimationFrame()` method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint. <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">Read more about this here.</a>
+
+### **Object-Oriented JavaScript**
+Make sure you are comfortable with Object-Oriented JavaScript:
+
+- What is an object?
+- How is an object different from a primitive in JavaScript (e.g., can a primitive have methods?)
+- What are some ways to create or instantiate a new object?
+- How do you modify properties, or add/remove properties from an object?
+- What is a constructor function (or class)?
+- What is `this`? What does it refer to and how is it used in different contexts (i.e., in a constructor function, a method, etc.)?
+- How do you add a property or method to a constructor's prototype?
+- What is prototypal inheritance and how is it implemented?
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,78 @@
+body {
+    text-align: center;
+}
+
+#game-info {
+    border: 1px solid red;
+    display: flex;
+    width: 100%;
+    flex-direction: row;
+}
+
+#life-counter-container, #score-counter-container, #character-profile-container   {
+    border: 1px solid black;
+    flex: 1;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 24px;
+}
+
+#score-counter-container {
+    border: 1px solid green;
+    flex: 1;
+}
+
+#character-profile-container {
+    border: 1px solid blue;
+    flex: 1;
+}
+
+.is-hidden {
+    display: none !important;
+  }
+
+  .button-close {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    cursor: pointer;
+  }
+
+  .modal-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 505px;
+    height: 606px;
+    background: rgba(0, 0, 0, 0.6);
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+  }
+
+  .modal {
+    padding: 20px 30px;
+    width: 90%;
+    max-height: calc(100% - 150px);
+    position: relative;
+    margin: 5% auto 0;
+    z-index: 9999;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+  }
+
+  .game-over {
+      font-size: 48px;
+  }
+
+  #retry-btn {
+      background-color: #8888ff;
+      color: #fff;
+      max-width: 160px;
+      padding: 16px;
+  }
diff --git a/engine.js b/engine.js
diff --git a/images/Gem Blue.png b/images/Gem Blue.png
diff --git a/images/Gem Green.png b/images/Gem Green.png
diff --git a/images/Gem Orange.png b/images/Gem Orange.png
diff --git a/images/Heart.png b/images/Heart.png
diff --git a/images/Key.png b/images/Key.png
diff --git a/images/Rock.png b/images/Rock.png
diff --git a/images/Selector.png b/images/Selector.png
diff --git a/images/Star.png b/images/Star.png
diff --git a/images/char-boy.png b/images/char-boy.png
diff --git a/images/char-cat-girl.png b/images/char-cat-girl.png
diff --git a/images/char-horn-girl.png b/images/char-horn-girl.png
diff --git a/images/char-pink-girl.png b/images/char-pink-girl.png
diff --git a/images/char-princess-girl.png b/images/char-princess-girl.png
diff --git a/images/enemy-bug.png b/images/enemy-bug.png
diff --git a/images/grass-block.png b/images/grass-block.png
diff --git a/images/stone-block.png b/images/stone-block.png
diff --git a/images/water-block.png b/images/water-block.png
diff --git a/index.html b/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Hack Day - Frogger Clone Starter Code</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <div id="game-info">
+        <div id="life-counter-container">
+            Lives: <span id="life-counter">5</span>
+        </div>
+        <div id="score-counter-container">
+            Rounds: <span id="round-counter">1</span>
+        </div>
+        <div id="character-profile-container">
+            Games Won: <span id="games-won">0</span>
+        </div>
+    </div>
+    <div class="is-hidden modal-overlay">
+        <div class="modal">
+            <div class="modal-content"></div>
+        </div>
+    </div>
+    <script src="js/game.js"></script>
+    <script src="js/screens.js"></script>
+    <script src="js/modal.js"></script>
+    <script src="js/resources.js"></script>
+    <script src="js/populate.js"></script>
+    <script src="js/player.js"></script>
+    <script src="js/enemy.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/engine.js"></script>
+</body>
+</html>