assets/js/game.js in word-games-theme-1.2.1 vs assets/js/game.js in word-games-theme-1.2.2
- old
+ new
@@ -1,39 +1,268 @@
const params = new URLSearchParams(window.location.search)
let gameBoard = document.querySelector(".game-board")
let serachValue = params.get('q')
let decodeBase64 = atob(serachValue)
let word = decodeBase64
-let gameOver = false;
+let targetWord = word.toLocaleLowerCase()
+let ANIMATION_DURATION = 500
+let wordLength = 5
+let keyboard = document.querySelector(".game-keyboard")
+let alertContainer = document.querySelector(".alert-container")
+let errorMsg = document.querySelector("#errorMsg")
+let gameResult = document.querySelector(".gameResult")
+let openPopup = document.querySelector(".open-popup")
+let wordleGameShareLink = document.querySelector(".wordle-game-share-link")
+let wordleGameCopyLink = document.querySelector(".wordle-game-copy-link")
+let ResutlGuessWord = document.querySelector(".guess-word")
+let answer = document.querySelector("#answer")
+let facebookSHareLink = document.querySelector(".facebook-share-link")
+let twitterSHareLink = document.querySelector(".twitter-share-link")
+let whatsappSHareLink = document.querySelector(".whatsapp-share-link")
-console.log(word.length)
+document.querySelector(".navbar").style.display = "none"
+document.querySelector(".tools_headings").style.display = "none"
+document.querySelector(".ads_layout").style.display = "none"
+document.querySelector(".relatedPosts").style.display = "none"
+document.querySelector(".footer-section").style.display = "none"
+document.querySelector(".rating-tool").style.display = "none"
-var height = 6;
-var width = 5;
-var row = 0;
-var col = 0;
+let dictionary
+let attempt = 0
+async function getData() {
+ const response = await fetch("/dictionary.json")
+ const data = await response.json()
+ dictionary = data
+}
+getData()
-// for (let h = 0; h < height; h++) {
-for (let index = 0; index < word.length; index++) {
- let tile = document.createElement("div");
- tile.classList.add("tile");
- tile.innerText = "";
- let div = document.createElement("div");
- div.classList.add("d-flex")
- div.appendChild(tile)
- gameBoard.appendChild(div);
- console.log(tile)
+const handleClick = (e) => {
+ if (e.target.matches("[data-key]")) {
+ pressKey(e.target.dataset.key)
+ return
+ }
+ if (e.target.matches("[data-enter]")) {
+ handleSubmit()
+ return
+ }
+ if (e.target.matches("[data-delete]")) {
+ deleteKey()
+ return
+ }
}
-// }
-function createTiles() {
- for (let h = 0; h < height; h++) {
- for (let w = 0; w < width; w++) {
- let tile = document.createElement("div");
- tile.id = h.toString() + "-" + w.toString();
- tile.classList.add("tile");
- tile.innerText = "";
- gameBoard.appendChild(tile);
+const handleKeyPress = (e) => {
+ if (e.key === "Enter") {
+ handleSubmit()
+ return
+ }
+ if (e.key === "Delete" || e.key === "Backspace") {
+ deleteKey()
+ return
+ }
+
+ if (e.key.match(/^[a-zA-Z]$/)) {
+ pressKey(e.key)
+ return
+ }
+}
+const getActiveTiles = () => {
+ return gameBoard.querySelectorAll('[data-state="active"]')
+}
+const pressKey = (key) => {
+ const activeTiles = getActiveTiles()
+ if (activeTiles.length >= wordLength) return
+ const nextTile = gameBoard.querySelector(":not([data-letter])")
+ nextTile.dataset.letter = key.toLowerCase()
+ nextTile.dataset.state = "active"
+ nextTile.classList.add("popAni")
+ nextTile.innerText = key
+ nextTile.style.border = "2px solid #a7adc0"
+}
+const deleteKey = () => {
+ const activeTiles = getActiveTiles()
+ const lastTile = activeTiles[activeTiles.length - 1]
+ if (lastTile == null) return
+ lastTile.textContent = ""
+ delete lastTile.dataset.state
+ delete lastTile.dataset.letter
+ lastTile.style.border = "2px solid #dee1e9"
+ lastTile.classList.remove("popAni")
+}
+const handleSubmit = () => {
+ const allTiles = [...getActiveTiles()]
+ if (allTiles.length !== wordLength) {
+ showAlertMessage("Not enough letters")
+ shakeTiles(allTiles)
+ return
+ }
+ const guessWord = allTiles.reduce((word, tile) => {
+ return word + tile.dataset.letter
+ }, "")
+
+
+ if (guessWord === targetWord) {
+ } else {
+ if (!dictionary.includes(guessWord)) {
+ showAlertMessage("Not a valid word")
+ shakeTiles(allTiles)
+ return
}
}
+
+ stopAllEventListeners()
+ let matchLetters = [...targetWord]
+ let matchedLettersCount = matchLetters.reduce((obj, letter) => {
+ if (obj[letter]) {
+ obj[letter]++;
+ return obj;
+ }
+
+ obj[letter] = 1;
+ return obj;
+ }, {})
+ evaluateTiles(allTiles, matchedLettersCount, guessWord)
}
-// createTiles();
\ No newline at end of file
+const evaluateTiles = (allTiles, matchedLettersCount, guessWord) => {
+ let reEvaluate = []
+ allTiles.map((tile, index) => {
+ let letter = tile.dataset.letter
+ let key = keyboard.querySelector(`[data-key="${letter}"i]`)
+ if (targetWord[index] === letter) {
+ tile.dataset.state = "correct-spot"
+ key.dataset.state = "correct-spot"
+ matchedLettersCount[letter]--;
+ return
+ }
+ reEvaluate.push(tile)
+ })
+ reEvaluate.map((tile) => {
+ let letter = tile.dataset.letter
+ let key = keyboard.querySelector(`[data-key="${letter}"i]`)
+ if (matchedLettersCount[letter] > 0) {
+ tile.dataset.state = "wrong-spot"
+ key.dataset.state = "wrong-spot"
+ matchedLettersCount[letter]--;
+ }
+ else {
+ tile.dataset.state = "wrong-word"
+ key.dataset.state = "wrong-word"
+ }
+
+ })
+ startAllEventListeners()
+ gameOver(guessWord, allTiles)
+}
+const shakeTiles = (tiles) => {
+ tiles.forEach(tile => {
+ tile.classList.add("shake")
+ tile.addEventListener('animationend', () => {
+ // console.log('Animation ended');
+ tile.classList.remove("shake")
+ });
+ })
+}
+const gameOver = (guessWord, tiles) => {
+ attempt++
+ const danceTiles = (tiles) => {
+ tiles.forEach((tile) => {
+ tile.classList.add("dance")
+ tile.addEventListener("animationend", () => {
+ tile.classList.remove("dance")
+ })
+ })
+ }
+ if (guessWord === targetWord) {
+ // console.log(`Wordle guessed in ${attempt}/6!`)
+ facebookSHareLink.setAttribute("href",
+ `https://www.facebook.com/share.php?u=${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}"e=
+ I guessed this wordle in ${attempt}/6 tries. Can you do better ?
+ Try this wordle:
+ ${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}`)
+
+ twitterSHareLink.setAttribute("href",
+ `https://www.twitter.com/compose/tweet?&text=I guessed this wordle in ${attempt}/6 tries.
+ Can you do better ? Try this wordle: ${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}`)
+
+ whatsappSHareLink.setAttribute("href", `whatsapp://send?text=I guessed this wordle in ${attempt}/6 tries.
+ Can you do better ? Try this wordle: ${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}`)
+
+ startConfetti()
+ showAlertMessage("You WON! 🏆")
+ stopAllEventListeners()
+ danceTiles(tiles)
+ setTimeout(() => {
+ openPopup.click()
+ stopConfetti()
+ }, 1500);
+ return
+ }
+ const remainingTiles = gameBoard.querySelectorAll(":not([data-letter])")
+ if (remainingTiles.length === 0) {
+ facebookSHareLink.setAttribute("href",
+ `https://www.facebook.com/share.php?u=${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}"e=
+ I guessed this wordle in ${attempt}/6 tries. Can you do better ?
+ Try this wordle:
+ ${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}`)
+ twitterSHareLink.setAttribute("href",
+ `https://www.twitter.com/compose/tweet?&text=I guessed this wordle in ${attempt}/6 tries.
+ Can you do better ? Try this wordle: ${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}`)
+ whatsappSHareLink.setAttribute("href", `whatsapp://send?text=I guessed this wordle in ${attempt}/6 tries.
+ Can you do better ? Try this wordle: ${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}`)
+ showAlertMessage("You LOST!")
+ setTimeout(() => {
+ openPopup.click()
+ }, 1000);
+ stopAllEventListeners()
+ }
+
+}
+const startAllEventListeners = () => {
+ document.addEventListener("keydown", handleKeyPress)
+ document.addEventListener("click", handleClick)
+}
+startAllEventListeners()
+
+const stopAllEventListeners = () => {
+ document.removeEventListener("click", handleClick)
+ document.removeEventListener("keydown", handleKeyPress)
+}
+const showAlertMessage = (msg) => {
+ if (msg === "You LOST!") {
+ answer.innerText = "The answer was"
+ }
+
+ ResutlGuessWord.innerHTML = targetWord
+ gameResult.innerHTML = msg
+ errorMsg.innerHTML = msg
+
+ alertContainer.classList.add("active-alert")
+ setTimeout(() => {
+ alertContainer.classList.remove("active-alert")
+ }, 1000)
+}
+const copyToClipboard = (str) => {
+ try {
+ const el = document.createElement('textarea')
+ el.value = str
+ document.body.appendChild(el)
+ el.select()
+ document.execCommand('copy')
+ document.body.removeChild(el)
+ errorMsg.innerHTML = "Copied !"
+ alertContainer.classList.add("active-alert")
+ setTimeout(() => {
+ alertContainer.classList.remove("active-alert")
+ }, 1000)
+ } catch (error) {
+ console.log(error)
+ }
+}
+wordleGameCopyLink.addEventListener('click', () => {
+ copyToClipboard(`${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}`)
+})
+wordleGameShareLink.addEventListener('click', () => {
+ copyToClipboard(`${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${(serachValue)}`)
+})
+
+
+