From 1b075f299d5e43c374c92f1f3c081ace6a0e451b Mon Sep 17 00:00:00 2001 From: Alvie Rahman Date: Fri, 28 Jan 2022 00:30:13 +0000 Subject: [PATCH] tie keyboard into game --- game.js | 33 ++++++++++++++++++++++++++------- index.html | 11 ++++++----- styles.css | 49 ++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 74 insertions(+), 19 deletions(-) diff --git a/game.js b/game.js index 650b432..af2f24e 100644 --- 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) \ No newline at end of file +console.log(word) diff --git a/index.html b/index.html index 80d2e72..4c5f673 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ words by alv -

words by alv

+

words by alv

@@ -42,7 +42,7 @@

l

-

+

z

x

c

@@ -50,12 +50,13 @@

b

n

m

-

+

- + diff --git a/styles.css b/styles.css index c0e5e46..d840de6 100644 --- 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; @@ -102,18 +127,28 @@ width: fit-content; } +#keyboard { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + .kb_row { display: flex; } .kb_row * { - width: 3em; - height: 3em; + width: min(10vw, 3em); + height: min(10vw, 3em); text-align: center; margin: 0; } -.kb_row .kb_filler { - width: 1.5em; +.kb_filler { + width: min(5vw, 1.5em); } +.kb_letter { + line-height: min(10vw, 3em) +}