Wordle Clone added for unlimited play

fromdev · Dec 9, 2024 · 0ed6d9c · 0ed6d9c
1 parent 95a5610
commit 0ed6d9c
Show file tree

Hide file tree

Showing 5 changed files with 498 additions and 0 deletions.
diff --git a/_includes/theme-sidebar b/_includes/theme-sidebar
@@ -121,6 +121,7 @@
                             <li><a href="/crypto-average-calculator.html"><i class="fa fa-circle-o"></i> Crypto Average Calculator</a></li>
                         </ul>
                     </li>
+                    <li><a href="/wordle/wordle.html"><i class="fa fa-circle-o text-aqua"></i> <span>Play Wordle</span></a></li>
                     <li><a href="/contact.html"><i class="fa fa-circle-o text-aqua"></i> <span>Feedback</span></a></li>
                 </ul>
             </section>

diff --git a/wordle/styles.css b/wordle/styles.css
@@ -0,0 +1,130 @@
+body {
+  font-family: Arial, sans-serif;
+  background-color: #121213;
+  color: white;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.container {
+  text-align: center;
+}
+
+h1 {
+  font-size: 2rem;
+  margin-bottom: 20px;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.tile {
+  width: 60px;
+  height: 60px;
+  border: 2px solid #3a3a3c;
+  font-size: 1.5rem;
+  text-align: center;
+  line-height: 60px;
+  text-transform: uppercase;
+  background-color: #121213;
+  color: white;
+  animation: flip 0.5s ease;
+}
+
+.tile.correct {
+  background-color: #6aaa64;
+  border-color: #6aaa64;
+}
+
+.tile.present {
+  background-color: #c9b458;
+  border-color: #c9b458;
+}
+
+.tile.absent {
+  background-color: #3a3a3c;
+  border-color: #3a3a3c;
+}
+
+@keyframes flip {
+  0% {
+    transform: rotateX(0);
+  }
+  50% {
+    transform: rotateX(90deg);
+  }
+  100% {
+    transform: rotateX(0);
+  }
+}
+
+.keyboard {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  gap: 5px;
+}
+
+.key {
+  padding: 10px;
+  background-color: #818384;
+  border: none;
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+  text-transform: uppercase;
+}
+
+.key.used {
+  background-color: #3a3a3c;
+  pointer-events: none;
+}
+
+.key {
+  background-color: #d3d6da; /* Default key color */
+  border: 1px solid #888;
+  padding: 10px;
+  margin: 5px;
+  font-size: 16px;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.key.correct {
+  background-color: #6aaa64; /* Green for correct letters */
+  color: white;
+}
+
+.key.present {
+  background-color: #c9b458; /* Yellow for present letters */
+  color: white;
+}
+
+.key.absent {
+  background-color: #787c7e; /* Gray for absent letters */
+  color: white;
+}
+
+
+.message {
+  margin-top: 20px;
+  font-size: 1.2rem;
+  height: 24px;
+}
+
+button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  background-color: #6aaa64;
+  border: none;
+  color: white;
+  font-size: 1rem;
+  cursor: pointer;
+}
diff --git a/wordle/wordle.html b/wordle/wordle.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Wordle Clone</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div class="container">
+    <h1>Wordle Clone</h1>
+    <div id="grid" class="grid"></div>
+    <div id="keyboard" class="keyboard"></div>
+    <div class="message" id="message"></div>
+    <button id="new-game">New Game</button>
+  </div>
+  <script src="words.js"></script>
+  <script src="wordle.js"></script>
+</body>
+</html>
diff --git a/wordle/wordle.js b/wordle/wordle.js
@@ -0,0 +1,146 @@
+let targetWord = words[Math.floor(Math.random() * words.length)];
+let currentGuess = "";
+let attempts = 0;
+
+const grid = document.getElementById("grid");
+const keyboard = document.getElementById("keyboard");
+const message = document.getElementById("message");
+const newGameBtn = document.getElementById("new-game");
+
+function initializeGrid() {
+  grid.innerHTML = "";
+  for (let i = 0; i < 30; i++) {
+    const tile = document.createElement("div");
+    tile.classList.add("tile");
+    grid.appendChild(tile);
+  }
+}
+
+function initializeKeyboard() {
+  const keys = "qwertyuiopasdfghjklzxcvbnm".split("");
+  keyboard.innerHTML = "";
+  keys.forEach((key) => {
+    const keyBtn = document.createElement("button");
+    keyBtn.classList.add("key");
+    keyBtn.textContent = key;
+    keyBtn.setAttribute("data-key", key);
+    keyBtn.addEventListener("click", () => handleInput(key));
+    keyboard.appendChild(keyBtn);
+  });
+
+  const enterKey = document.createElement("button");
+  enterKey.classList.add("key");
+  enterKey.textContent = "Enter";
+  enterKey.addEventListener("click", handleSubmit);
+  keyboard.appendChild(enterKey);
+
+  const backspaceKey = document.createElement("button");
+  backspaceKey.classList.add("key");
+  backspaceKey.textContent = "Backspace";
+  backspaceKey.addEventListener("click", handleBackspace);
+  keyboard.appendChild(backspaceKey);
+}
+
+function handleInput(letter) {
+  if (currentGuess.length < 5) {
+    currentGuess += letter;
+    updateGrid();
+  }
+}
+
+function handleBackspace() {
+  if (currentGuess.length > 0) {
+    currentGuess = currentGuess.slice(0, -1); // Remove the last letter
+    updateGrid();
+  }
+}
+
+function handleSubmit() {
+  if (currentGuess.length !== 5) {
+    setMessage("Word must be 5 letters");
+    return;
+  }
+
+  if (!words.includes(currentGuess)) {
+    setMessage("Invalid word");
+    return;
+  }
+
+  checkGuess();
+  currentGuess = "";
+  attempts++;
+
+  if (currentGuess === targetWord) {
+    setMessage("You Win!");
+  } else if (attempts === 6) {
+    setMessage(`Game Over! The word was: ${targetWord}`);
+  }
+}
+
+function updateGrid() {
+  const tiles = document.querySelectorAll(".tile");
+  const startIdx = attempts * 5;
+  for (let i = 0; i < 5; i++) {
+    tiles[startIdx + i].textContent = currentGuess[i] || ""; // Clear unused tiles
+  }
+}
+
+function checkGuess() {
+  const tiles = document.querySelectorAll(".tile");
+  currentGuess.split("").forEach((letter, index) => {
+    const tile = tiles[attempts * 5 + index];
+    const key = document.querySelector(`[data-key="${letter}"]`);
+
+    if (letter === targetWord[index]) {
+      tile.classList.add("correct");
+      updateKeyboardColor(key, "correct");
+    } else if (targetWord.includes(letter)) {
+      tile.classList.add("present");
+      updateKeyboardColor(key, "present");
+    } else {
+      tile.classList.add("absent");
+      updateKeyboardColor(key, "absent");
+    }
+  });
+}
+
+function updateKeyboardColor(key, status) {
+  // Update the keyboard key's color only if the new status is "better"
+  if (key.classList.contains("correct")) return; // Already correct
+  if (status === "correct") {
+    key.className = "key correct";
+  } else if (status === "present" && !key.classList.contains("correct")) {
+    key.className = "key present";
+  } else if (status === "absent" && !key.classList.contains("correct") && !key.classList.contains("present")) {
+    key.className = "key absent";
+  }
+}
+
+function setMessage(text) {
+  message.textContent = text;
+}
+
+newGameBtn.addEventListener("click", startNewGame);
+
+function startNewGame() {
+  targetWord = words[Math.floor(Math.random() * words.length)];
+  currentGuess = "";
+  attempts = 0;
+  setMessage("");
+  initializeGrid();
+  initializeKeyboard();
+}
+
+// Add event listener for direct keyboard input
+document.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    handleSubmit();
+  } else if (event.key === "Backspace") {
+    handleBackspace();
+  } else if (/^[a-zA-Z]$/.test(event.key)) {
+    handleInput(event.key.toLowerCase());
+  }
+});
+
+initializeGrid();
+initializeKeyboard();