tie keyboard into game

add keyboard
2022-01-28 00:32:26 +00:00 · 2022-01-27 22:05:10 +00:00
6 changed files with 133 additions and 15 deletions
--- a/.gitmodules
+++ b/.gitmodules
@ -0,0 +1,3 @@
+[submodule "Font-Awesome"]
+	path = Font-Awesome
+	url = https://github.com/FortAwesome/Font-Awesome.git
--- a/1
+++ b/1
@ -0,0 +1 @@
+Subproject commit afecf2af5d897b763e5e8e28d46aad2f710ccad6
--- a/6
+++ b/6
@ -3,8 +3,14 @@ MIN_FREQUENCY=1
 SOURCE_WORDLIST=1_1_all_fullalpha.txt
 ALLOWED_TYPELIST=allowed_types

+all: wordlist.js .SUBMODULES
+
 wordlist.js: 
 	./scripts/gen_wordlist.py ${SOURCE_WORDLIST} ${WORD_LENGTH} ${MIN_FREQUENCY} ${ALLOWED_TYPELIST} > wordlist.js

 clean:
 	rm -rf wordlist.js
+
+.SUBMODULES:
+	git submodule init
+	git submodule update
--- a/game.js
+++ b/game.js
@ -7,13 +7,16 @@ const word = wordlist[Math.floor(Math.random()*wordlist.length)];
 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 gameContainer = document.getElementById("game_container")
 const gridItems = []
+const kbLetters = Array.from(document.getElementsByClassName("kb_letter")).filter(kbl => kbl.id === '')
+const kbEnter = document.getElementById("kb_enter")
+const kbBackspace = document.getElementById("kb_backspace")

 // helper functions
 const gridItemId = (row, column) => "grid_item_" + row + "_" + column
@ -168,17 +171,33 @@ function endGame(won) {
        endScreenMessage.innerHTML = "damn. better luck nex time"
    }

-    endScreenGuesses.innerHTML = `guesses: ${findCurrentLetterPosition()[0]+1}/${gridHeight}`
+    endScreenGuesses.innerHTML = `guesses used: ${findCurrentLetterPosition()[0]+1}/${gridHeight}`
    endScreen.style.display = "";
 }


+function runClickAnimation(el) {
+    console.log(el)
+    el.classList.add("clicked")
+    setTimeout(() => el.classList.remove("clicked"), 500)
+}
 // create event listeners
-document.addEventListener('keyup', (e) => {
-    console.log(e)
-    setNextLetter(e)
+document.addEventListener('keyup', e => setNextLetter(e))
+kbBackspace.addEventListener('click', () => {
+    runClickAnimation(kbBackspace)
+    setNextLetter({code: "Backspace", key: "Backspace"})
+})
+kbEnter.addEventListener('click', () => {
+    runClickAnimation(kbEnter)
+    setNextLetter({code: "Enter", key: "Enter"})
+})
+kbLetters.forEach(kbl => {
+    kbl.addEventListener('click', () => {
+        runClickAnimation(kbl) 
+        setNextLetter({code: kbl.innerHTML, key: kbl.innerHTML })
+    })
 })

-
+// start game
 init()
-console.log(word)
+console.log(word)
--- a/index.html
+++ b/index.html
@ -3,10 +3,11 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="styles.css">
-<title>words</title>
+<link rel="stylesheet" type="text/css" href="./Font-Awesome/css/all.min.css">
+<title>words by alv</title>
 </head>
 <body>
-    <h1>words</h1>
+    <h1 style="text-align: center">words by alv</h1>
    
    <div id="game_container">
    </div>
@ -16,9 +17,46 @@
        <h3 id="end_screen_time"></h3>
        <p> refresh page to play again </p>
    </div>
-    
+    <div id="keyboard">
+        <div class="kb_row" id="kb_row1">
+            <p class="kb_letter">q</p>
+            <p class="kb_letter">w</p>
+            <p class="kb_letter">e</p>
+            <p class="kb_letter">r</p>
+            <p class="kb_letter">t</p>
+            <p class="kb_letter">y</p>
+            <p class="kb_letter">u</p>
+            <p class="kb_letter">i</p>
+            <p class="kb_letter">o</p>
+            <p class="kb_letter">p</p>
+        </div>
+        <div class="kb_row" id="kb_row2">
+            <p class="kb_letter">a</p>
+            <p class="kb_letter">s</p>
+            <p class="kb_letter">d</p>
+            <p class="kb_letter">f</p>
+            <p class="kb_letter">g</p>
+            <p class="kb_letter">h</p>
+            <p class="kb_letter">j</p>
+            <p class="kb_letter">k</p>
+            <p class="kb_letter">l</p>
+        </div>
+        <div class="kb_row" id="kb_row3">
+            <p class="kb_letter" id="kb_enter"><i class="fas fa-sign-in-alt"></i></p>
+            <p class="kb_letter">z</p>
+            <p class="kb_letter">x</p>
+            <p class="kb_letter">c</p>
+            <p class="kb_letter">v</p>
+            <p class="kb_letter">b</p>
+            <p class="kb_letter">n</p>
+            <p class="kb_letter">m</p>
+            <p class="kb_letter" id="kb_backspace"><i class="fas fa-backspace"></i></p>
+        </div>
+    </div>
+    <div id="footer">
    <p>built with ❤ and adequate amounts of care by <a href="https://alv.cx">alv</a></p>
-    <p>thanks to Lancaster University for the wordlist and you can find it <a href="https://ucrel.lancs.ac.uk/bncfreq/flists.html">here</a></p>
+    <p>thanks to Lancaster University for the wordlist, which you can find <a href="https://ucrel.lancs.ac.uk/bncfreq/flists.html">here</a> </p>
+    </div>
    
    <script type="application/javascript" src="wordlist.js"></script>
    <script type="application/javascript" src="game.js"></script>
--- a/styles.css
+++ b/styles.css
@ -15,6 +15,11 @@
  --brown: #a16946;
 }

+body {
+    font-family: monospace;
+    margin-top: 0;
+}
+
 #game_container {
    display: flex;
    align-items: center;
@ -26,19 +31,23 @@
    margin: 0 auto;
 }

+#footer { margin-top: 4em; }
+
 .grid_row {
    display: flex;
    flex-direction: row;
 }

 .grid_item {
-    width: 3em;
-    height: 3em;
+    width: 8vw;
+    max-width: 3em;
+    height: 8vw;
+    max-height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0.2em solid var(--default-fg);
-    margin: 1em;
+    margin: 3vw;
    text-transform: uppercase;
    font-weight: 800;
    transition: 0.5s;
@ -61,6 +70,10 @@
  animation: incorrect 0.5s;
 }

+.clicked {
+    animation: clicked 0.5s;
+}
+
@keyframes correct {
  0% {
    background: var(--default-bg);
@ -85,6 +98,18 @@
  }
 }

+@keyframes clicked {
+  0% {
+    background: var(--default-bg);
+  }
+  50% {
+    background: var(--dark-bg);
+  }
+  100% {
+    background: var(--default-bg);
+  }
+}
+
 #end_screen {
    position: fixed;
    height: 100vh;
@ -100,4 +125,30 @@

 #end_screen * {
    width: fit-content;
-}
+}
+
+#keyboard {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.kb_row {
+    display: flex;
+}
+
+.kb_row * {
+    width: min(10vw, 3em);
+    height: min(10vw, 3em);
+    text-align: center;
+    margin: 0;
+}
+
+.kb_filler {
+    width: min(5vw, 1.5em);
+}
+
+.kb_letter {
+    line-height: min(10vw, 3em)
+}
Author	SHA1	Message	Date
Alvie Rahman	1b075f299d	tie keyboard into game	2022-01-28 00:32:26 +00:00
Alvie Rahman	356edb2024	add keyboard	2022-01-27 22:05:10 +00:00
				`@ -0,0 +1 @@`
				`Subproject commit afecf2af5d897b763e5e8e28d46aad2f710ccad6`