added end-game box

assets/css/game.css

@@ -4,6 +4,7 @@
     height: 20%;
     width: 80%;
     border-radius: 10px;
+    color: #fafafa;
     border: 4px dashed #fafafa;  
     display: flex;
     flex-direction: column;
@@ -33,6 +34,28 @@
     flex-direction: row;
 }
 
+.end-game-container{
+    width: 80%;
+    border-radius: 10px;
+    border: 4px dashed #fafafa;
+    background-color: black;
+    position: absolute;
+    top: 40%;
+    left: 10%;
+    z-index: 10;
+}
+
+#end-game{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 10px auto;
+    padding: 10px;
+}
+
+.playagain{
+    width: 160px;
+}
 
 /* game css */
 

assets/js/game.js

@@ -137,7 +137,7 @@ const handleInput = (direction) => {
 
 const startGame = () => {
     const startTime = new Date().getTime()
-    const songLength = 30000 // 30sec
+    const songLength = 60000 // TODO this needs to be whatever the audio length is - get from Component
 
 
     createRow();
@@ -153,7 +153,11 @@ const startGame = () => {
 }
 
 const gameEnd = () => {
-    console.log('pop up goes here')
+    document.getElementById('score-end').innerHTML = score;
+    document.getElementById('end-game').classList.remove('hidden')
+    if (score = 80){
+    document.getElementById('winner').classList.remove('hidden')
+    }
 }
 
 //end the level after song length

game.html

@@ -53,6 +53,15 @@ <h3>Current Song</h3>
         <div id="hit" class="hidden">HIT</div>
         <div id="miss" class="hidden">MISS</div>
     </div>
+    <!-- ./ScoreBoard -->
+    <div class="hidden end-game-container">
+        <div id="end-game">
+            <p>You scored</p>
+            <p>Score: <span id="score-end"></span></p>
+            <p id='winner' class="hidden">You are a Rhythm Hero</p>
+            <a class="btn btn-dark btn-lg playagain" href="carousel.html">Play Again?</a>
+        </div>
+    </div>
     <!-- GameBoard -->
     <div class="game-wrapper">
         <div class="new-row-generator" id="new-row-generator">