add end screen

game.js

@@ -8,6 +8,11 @@ var gameCompleted = null
 
 // HTML items
 const gameContainer = document.getElementById("game_container")
+const body = document.getElementsByTagName("body")[0]
+const endScreen = document.getElementById("end_screen")
+const endScreenGuesses = document.getElementById("end_screen_guesses")
+const endScreenMessage = document.getElementById("end_screen_message")
+const endScreenTime = document.getElementById("end_screen_time")
 const gridItems = []
 
 // helper functions
@@ -59,11 +64,11 @@ function checkGridRow() {
         console.log(gridItem.letter)
         console.log(dedupword)
 
-        if (correct_letters == gridWidth) gameCompleted = true
+        if (correct_letters == gridWidth) endGame(true)
     }
 
     getGridRow(row).complete = true
-    if (row === gridHeight-1) gameCompleted = true
+    if (row === gridHeight-1) endGame(false)
 }
 
 
@@ -153,6 +158,19 @@ function setNextLetter(key) {
     }
 }
 
+function endGame(won) {
+    gameCompleted = true
+
+    if (won) {
+        endScreenMessage.innerHTML = "niceeeeeeeee"
+    } else {
+        endScreenMessage.innerHTML = "damn. better luck nex time"
+    }
+
+    endScreenGuesses.innerHTML = `guesses: ${findCurrentLetterPosition()[0]+1}/${gridHeight}`
+    endScreen.style.display = "";
+}
+
 
 // create event listeners
 document.addEventListener('keyup', (e) => {
@@ -162,3 +180,4 @@ document.addEventListener('keyup', (e) => {
 
 
 init()
+console.log(word)

index.html

@@ -9,7 +9,12 @@
     <h1>words</h1>
     
     <div id="game_container">
-        you need javascript enabled to play this game
+    </div>
+    <div style="display: none"; id="end_screen">
+        <h2 id="end_screen_message"></h2>
+        <h3 id="end_screen_guesses"></h3>
+        <h3 id="end_screen_time"></h3>
+        <p> refresh page to play again </p>
     </div>
     
     <p> built with ❤ and adequate amounts of care by <a href="https://alv.cx">alv</a> </p>

styles.css

@@ -15,6 +15,12 @@
   --brown: #a16946;
 }
 
+#game_container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 #letter_grid {
     width: fit-content;
     margin: 0 auto;
@@ -31,10 +37,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 0.2em solid var(--dark-bg);
+    border: 0.2em solid var(--default-fg);
     margin: 1em;
     text-transform: uppercase;
     font-weight: 800;
+    transition: 0.5s;
 }
 
 .grid_item * {
@@ -44,4 +51,53 @@
 
 .grid_correct { background-color: var(--green)}
 .grid_present { background-color: var(--yellow)}
-.grid_wrong { background-color: var(--brown)}
+.grid_wrong { background-color: var(--default-bg)}
+
+.correct {
+  animation: correct 0.5s;
+}
+
+.incorrect {
+  animation: incorrect 0.5s;
+}
+
+@keyframes correct {
+  0% {
+    background: var(--default-bg);
+  }
+  50% {
+    background: var(--green);
+  }
+  100% {
+    background: var(--default-bg);
+  }
+}
+
+@keyframes incorrect {
+  0% {
+    background: var(--default-bg);
+  }
+  50% {
+    background: var(--red);
+  }
+  100% {
+    background: var(--default-bg);
+  }
+}
+
+#end_screen {
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(255, 255, 255, 0.8)
+}
+
+#end_screen * {
+    width: fit-content;
+}