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
@@ -20,7 +25,7 @@ const isLetter = string => /^[a-zA-Z]$/.test(string)
 function setGridLetter(row, column, letter) {
     console.log([row, column])
     console.log(letter)
-    
+
     getGridItem(row, column).letter = letter
     getGridItem(row, column).HTMLItem.getElementsByClassName("grid_item_p")[0].innerHTML = letter !== null ? letter : ""
 }
@@ -30,14 +35,14 @@ function checkGridRow() {
     var [row, _ ] = findCurrentLetterPosition()
     var rowWord = ''
     getGridRow(row).items.forEach(item => rowWord += item.letter)
-    
+
     console.log(rowWord)
     if (!wordlist.includes(rowWord)) {
         body.classList.add("incorrect")
         setTimeout( () => body.classList.remove("incorrect"), 500)
         return
     }
-    
+
     var correct_letters = 0
     var dedupword = word
 
@@ -45,7 +50,7 @@ function checkGridRow() {
         gridItem = getGridItem(row, column)
         // letters are removed from dedupword as letters are matched
         if (gridItem.letter === null) return
-        
+
         if (gridItem.letter === word[column]) {
             gridItem.HTMLItem.classList.add('grid_correct')
             correct_letters += 1
@@ -54,16 +59,16 @@ function checkGridRow() {
         } else {
             gridItem.HTMLItem.classList.add('grid_wrong')
         }
-        
+
         dedupword = dedupword.replace(gridItem.letter, '')
         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) => {
@@ -161,4 +179,5 @@ document.addEventListener('keyup', (e) => {
 })
 
 
-init()
+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;
+}