diff --git a/site/assets/scripts/controllers/keyboard.js b/site/assets/scripts/controllers/keyboard.js index 075dc03..de20ce4 100644 --- a/site/assets/scripts/controllers/keyboard.js +++ b/site/assets/scripts/controllers/keyboard.js @@ -63,14 +63,22 @@ export default class extends Controller { break; case MARKERS.RIGHT_CHAR: if (!keyElement.classList.contains("right-pos")) { + keyElement.classList.remove("attempted"); keyElement.classList.add("right-char"); } break; case MARKERS.MISS: - if (keyElement.classList.length == 0) { + keyElement.classList.remove("attempted"); + if (!keyElement.classList.contains("right-pos") && !keyElement.classList.contains("right-char")) { + keyElement.classList.remove("attempted"); keyElement.classList.add("miss"); } - break; + break; + case MARKERS.ATTEMPTED: + if (keyElement.classList.length == 0) { + keyElement.classList.add("attempted"); + } + break; } } diff --git a/site/assets/scripts/controllers/playfield.js b/site/assets/scripts/controllers/playfield.js index 855c915..14fd96a 100644 --- a/site/assets/scripts/controllers/playfield.js +++ b/site/assets/scripts/controllers/playfield.js @@ -5,7 +5,7 @@ import { WordSource } from "../models/words.js"; export default class extends Controller { - static targets = ["row", "playfield", "topMessage", "nextPuzzleButton"]; + static targets = ["row", "playfield", "topMessage", "nextPuzzleButtons"]; static outlets = ["overlay"]; async connect() { @@ -44,6 +44,13 @@ export default class extends Controller { this._verifyGuess(rowElem); } } + + loadDef(ev) { + ev.preventDefault() + + let word = this._gameController.currentWord(); + window.open(`https://www.ecosia.org/search?q=define+${word}`, "_blank"); + } tappedBackspace() { if (this._activeLetter == 0) { @@ -65,10 +72,14 @@ export default class extends Controller { switch (results.guessResult) { case GUESS_RESULT.FOUL: - this.overlayOutlet.showMessage("Not a valid word."); + this.overlayOutlet.showMessage("Not a valid word"); rowElem.replaceWith(this._buildPlayfieldRow(this._gameController.wordLength())); this._activeLetter = 0; + + window.dispatchEvent(new CustomEvent("guessResults", { + detail: results + })); break; case GUESS_RESULT.MISS: this._colorizeRow(rowElem, results); @@ -76,7 +87,7 @@ export default class extends Controller { this._activeRowIndex += 1; if (this._activeRowIndex >= this._gameController.guesses()) { this.topMessageTarget.innerText = this._gameController.currentWord().toUpperCase(); - this.nextPuzzleButtonTarget.classList.remove("hide"); + this.nextPuzzleButtonsTarget.classList.remove("hide"); } else { this._activeLetter = 0; } @@ -86,17 +97,7 @@ export default class extends Controller { this._colorizeRow(rowElem, results); this.topMessageTarget.innerText = "Hooray! You did it."; - this.nextPuzzleButtonTarget.classList.remove("hide"); - - /* - if (this._gameController.nextWord()) { - this._buildPlayfield(); - } else { - console.log("No more words"); - this._activeRowIndex = -1; - this._colorizeRow(rowElem, results); - } - */ + this.nextPuzzleButtonsTarget.classList.remove("hide"); break; } } @@ -125,7 +126,7 @@ export default class extends Controller { this.playfieldTarget.replaceChildren.apply(this.playfieldTarget, newRows); this.topMessageTarget.innerHTML = " " - this.nextPuzzleButtonTarget.classList.add("hide"); + this.nextPuzzleButtonsTarget.classList.add("hide"); window.dispatchEvent(new CustomEvent("resetKeyColors")); } diff --git a/site/assets/scripts/models/gamecontroller.js b/site/assets/scripts/models/gamecontroller.js index aa74f77..aa7d19e 100644 --- a/site/assets/scripts/models/gamecontroller.js +++ b/site/assets/scripts/models/gamecontroller.js @@ -7,7 +7,8 @@ export const GUESS_RESULT = { export const MARKERS = { MISS: 'm', RIGHT_POS: 'g', - RIGHT_CHAR: 'y' + RIGHT_CHAR: 'y', + ATTEMPTED: 'a', }; class ProgressionState { @@ -87,7 +88,13 @@ export class GameController { if (this._currentWord.length <= 5) { if (!this._wordSource.isWord(guess)) { + hits = {}; + for (let i = 0; i < guess.length; i++) { + hits[guess[i]] = MARKERS.ATTEMPTED; + } + return { + hits: hits, guessResult: GUESS_RESULT.FOUL, }; } diff --git a/site/assets/styles/main.css b/site/assets/styles/main.css index 06f6023..077309f 100644 --- a/site/assets/styles/main.css +++ b/site/assets/styles/main.css @@ -10,11 +10,25 @@ } body { - height: 100vh; + min-height: 100vh; display: flex; flex-direction: column; } +button { + font-size: 0.9em; +} + +button.secondary { + background: var(--bg); + color: var(--accent); +} + +button.secondary:hover { + background: var(--bg); + color: var(--accent-hover); +} + main { flex-grow: 1; flex-shrink: 1; @@ -23,8 +37,13 @@ main { flex-direction: column; } -body header > h1 { - margin-block: 0.2rem; +body header > h1:only-child { + margin-block: 0.5rem; + font-size: 2rem; +} + +body header { + padding-block-end: 0; } main > div:first-child { @@ -45,6 +64,12 @@ div.playfield div[data-playfield-target="playfield"] { font-size: 2.5rem; } +div.playfield div[data-playfield-target="nextPuzzleButtons"] { + display: flex; + justify-content: center; + gap: 0.8rem; +} + div.keyboard > div { display: flex; justify-content: space-around; @@ -61,6 +86,10 @@ div.keyboard button { border: solid 1px #444; } +div.keyboard button:hover { + background: #bbb; +} + div.keyboard > div:nth-child(2) { margin-inline: 2vw; } @@ -75,16 +104,36 @@ button[data-keyboard-target="key"].right-pos { color: var(--color-right-letter-fg); } +button[data-keyboard-target="key"].right-pos:hover { + background: var(--color-right-letter-bg); +} + button[data-keyboard-target="key"].right-char { background: var(--color-has-letter-bg); color: var(--color-has-letter-fg); } +button[data-keyboard-target="key"].right-char:hover { + background: var(--color-has-letter-bg); +} + button[data-keyboard-target="key"].miss { background: var(--color-no-letter-bg); color: var(--color-no-letter-fg); } +button[data-keyboard-target="key"].miss:hover { + background: var(--color-no-letter-bg); +} + +button[data-keyboard-target="key"].attempted { + background: #ddd; +} + +button[data-keyboard-target="key"].miss:hover { + background: #ddd; +} + div.playfield div.row { display: flex; justify-content: center; @@ -117,7 +166,7 @@ div.playfield div.row span.miss { div.overlay { position: fixed; - bottom: 25%; + bottom: 30%; left: 10%; right: 10%; z-index: 10; @@ -131,7 +180,7 @@ div.overlay.show { } div.overlay-message { - font-size: 2rem; + font-size: 1.8rem; line-height: 2.2rem; text-align: center; @@ -145,5 +194,5 @@ div.overlay-message { } .hide { - display: none; + display: none !important; } \ No newline at end of file diff --git a/site/index.html b/site/index.html index 0572caa..22888f8 100644 --- a/site/index.html +++ b/site/index.html @@ -21,7 +21,10 @@
 
- +
+ + +
l
- + @@ -62,7 +65,7 @@ - +