-
ENTER
+
ENTER
M
N
B
@@ -132,6 +158,12 @@
+
+
+
diff --git a/index.js b/index.js
index 96a45ee..bb36d9d 100644
--- a/index.js
+++ b/index.js
@@ -1,40 +1,205 @@
const LENGTH = 5;
const GUESSES = LENGTH + 1;
+let guesses = [];
+let running = true;
+let currentGuess = "";
+let lockedGuess = "";
+let runningAnim = false;
+
let hashDate = (date) => {
return date.getFullYear() + date.getMonth() + date.getDate();
};
-const currentWord = ANSWERS[hashDate(new Date()) % ANSWERS.length];
+const currentWord =
+ ANSWERS[hashDate(new Date()) % ANSWERS.length].toUpperCase();
-// initialize board
+let startGame = () => {
+ guesses = [];
+ let boardElement = document.getElementById("board");
-let guesses = [];
-let boardElement = document.getElementById("board");
+ boardElement.innerHTML = "";
-boardElement.innerHTML = "";
+ for (let i = 0; i < GUESSES; i++) {
+ let row = document.createElement("div");
+ row.classList.add("row");
+ row.id = "row" + i;
+ boardElement.appendChild(row);
-for (let i = 0; i < GUESSES; i++) {
- let row = document.createElement("div");
- row.classList.add("row");
- row.id = "row" + i;
- boardElement.appendChild(row);
-
- for (let i = 0; i < LENGTH; i++) {
- let cell = document.createElement("div");
- cell.classList.add("cell");
- cell.id = "cell" + i;
- row.appendChild(cell);
+ for (let j = 0; j < LENGTH; j++) {
+ let cell = document.createElement("div");
+ cell.classList.add("cell");
+ cell.id = "row" + i + "cell" + j;
+ cell.classList.add("unguessed");
+ row.appendChild(cell);
+ }
}
-}
-let running = true;
-let currentGuess = "";
+ running = true;
+ currentGuess = "";
+};
+
+startGame();
let updateBoard = () => {
- let row = document.getElementById("row" + guesses.length);
- for (let i = LENGTH; i > 0; i--) {
- let cell = document.getElementById("cell" + i);
+ if (runningAnim) return;
+ for (let i = 0; i < LENGTH; i++) {
+ let cell = document.getElementById(
+ "row" + guesses.length + "cell" + (LENGTH - i - 1)
+ );
cell.innerHTML = currentGuess[i] || "";
}
};
+
+let addLetter = (letter) => {
+ if (currentGuess.length < LENGTH) currentGuess += letter;
+};
+
+let handleButtonPress = (button) => {
+ if (!running || runningAnim) {
+ return;
+ }
+
+ if (button.id === "backspace") {
+ currentGuess = currentGuess.slice(0, -1);
+ } else if (button.id === "enter") {
+ handleGuess();
+ } else {
+ addLetter(button.id);
+ }
+
+ updateBoard();
+};
+
+onkeyup = (event) => {
+ if (!running || runningAnim) {
+ return;
+ }
+
+ if (event.key === "Backspace") {
+ currentGuess = currentGuess.slice(0, -1);
+ } else if (event.key === "Enter") {
+ handleGuess();
+ } else {
+ addLetter(event.key.toUpperCase());
+ }
+
+ updateBoard();
+};
+
+let buttons = document.getElementsByClassName("letter");
+
+for (let button of buttons) {
+ button.addEventListener("click", () => {
+ handleButtonPress(button);
+ });
+}
+
+let handleGuess = () => {
+ if (currentGuess.length !== LENGTH) {
+ Toastify({
+ text: "Not enough letters",
+ duration: 1000,
+ newWindow: false,
+ close: false,
+ gravity: "top",
+ position: "center",
+ stopOnFocus: false,
+ className: "toast",
+ }).showToast();
+
+ return;
+ }
+
+ if (!WORDS.includes(currentGuess.toLowerCase())) {
+ Toastify({
+ text: "Not in word list",
+ duration: 1000,
+ newWindow: false,
+ close: false,
+ gravity: "top",
+ position: "center",
+ stopOnFocus: false,
+ className: "toast",
+ }).showToast();
+
+ return;
+ }
+
+ lockedGuess = currentGuess;
+ runningAnim = true;
+ currentGuess = "";
+
+ for (let i = 0; i < LENGTH; i++) {
+ let cell = document.getElementById(
+ "row" + guesses.length + "cell" + (LENGTH - i - 1)
+ );
+
+ setTimeout(() => {
+ cell.classList.remove("unguessed");
+ }, 50 * (LENGTH - i));
+
+ setTimeout(() => {
+ cell.classList.add("guessed");
+
+ if (lockedGuess[i] === currentWord[i]) {
+ cell.classList.add("correct");
+ document
+ .getElementById(lockedGuess[i].toUpperCase())
+ .classList.add("correct");
+ } else if (currentWord.includes(lockedGuess[i])) {
+ cell.classList.add("present");
+ document
+ .getElementById(lockedGuess[i].toUpperCase())
+ .classList.add("present");
+ } else {
+ cell.classList.add("absent");
+ document
+ .getElementById(lockedGuess[i].toUpperCase())
+ .classList.add("absent");
+ }
+ }, 300 * (i + 1) + 300);
+ }
+
+ if (lockedGuess === currentWord) {
+ running = false;
+ setTimeout(() => {
+ Toastify({
+ text: "You win!",
+ duration: 1000,
+ newWindow: false,
+ close: false,
+ gravity: "top",
+ position: "center",
+ stopOnFocus: false,
+ className: "toast",
+ }).showToast();
+ confetti({
+ particleCount: 100,
+ spread: 70,
+ origin: { y: 0.6 },
+ });
+ }, 2000);
+ } else if (guesses.length === GUESSES) {
+ running = false;
+
+ setTimeout(() => {
+ Toastify({
+ text: "You lose!",
+ duration: 1000,
+ newWindow: false,
+ close: false,
+ gravity: "top",
+ position: "center",
+ stopOnFocus: false,
+ className: "toast",
+ }).showToast();
+ }, 2000);
+ }
+ setTimeout(() => {
+ guesses.push(lockedGuess);
+ lockedGuess = "";
+ runningAnim = false;
+ updateBoard();
+ }, 2000);
+};
diff --git a/index.sass b/index.sass
index facdefd..dd6dd66 100644
--- a/index.sass
+++ b/index.sass
@@ -63,7 +63,16 @@ header
align-items: center
font-size: 2rem
font-weight: 800
- transform: scale(-1, 1)
+ color: white
+
+ &.unguessed
+ color: black
+ transform: scale(-1, 1)
+
+ &.guessed
+ color: black
+ transform: scale(-1, 1)
+ transition: all 0.3s
&.correct
background-color: $color-correct
@@ -106,6 +115,21 @@ header
transition: all 0.3s
transform: scale(-1, 1)
+ &.correct
+ background-color: $key-color-correct !important
+ color: #fff
+ border: none
+
+ &.present
+ background-color: $key-color-present
+ color: #fff
+ border: none
+
+ &.absent
+ background-color: $key-color-absent
+ color: #fff
+ border: none
+
#backspace
width: 5rem
@@ -117,6 +141,14 @@ header
#enter
width: 5rem
+.toast
+ background: black !important
+ color: white
+ font-family: $sans-serif
+ font-weight: 600
+ border-radius: 5px !important
+ transform: scale(-1, 1) !important
+
footer
font-family: $serif
font-size: 1rem
diff --git a/safari-pinned-tab.svg b/safari-pinned-tab.svg
deleted file mode 100644
index 2eee1af..0000000
--- a/safari-pinned-tab.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-
-
-