word-games-theme 1.1.9 → 1.2.2

data/assets/js/createWordle.js

@@ -0,0 +1,71 @@
+let customWord = document.querySelector(".custom-word")
+let generateLinkButton = document.querySelector(".generate-word-game-link")
+let wordleGameLink = document.querySelector(".wordle-game-link")
+let copy_btn = document.querySelector(".copy-btn")
+
+let form = document.querySelector('#create-wordle-form')
+let openPopup = document.querySelector(".open-popup")
+
+const alertContainer = document.querySelector(".alert-container")
+let errorMsg = document.querySelector("#errorMsg")
+
+customWord.focus()
+
+
+let dictionary
+async function getData() {
+    const response = await fetch("/dictionary.json")
+    const data = await response.json()
+    dictionary = data
+}
+getData()
+
+
+
+const createWordle = (e) => {
+    e.preventDefault();
+
+    if (customWord.value.length < 5) {
+        errorMsg.innerHTML = "Not enough letters"
+        alertContainer.classList.add("active-alert")
+        setTimeout(() => {
+            alertContainer.classList.remove("active-alert")
+        }, 1000)
+    }
+    if (customWord.value.length === 5 && !dictionary.includes(customWord.value.toLocaleLowerCase())) {
+        errorMsg.innerHTML = "Not a valid word"
+        alertContainer.classList.add("active-alert")
+        setTimeout(() => {
+            alertContainer.classList.remove("active-alert")
+        }, 1000)
+    } else {
+        if (customWord.value.length === 5) {
+            openPopup.click()
+            copy_btn.innerHTML = "Copy"
+            copy_btn.style.background = "dodgerblue"
+            wordleGameLink.setAttribute("href", `/word-game-play?q=${btoa(customWord.value.toLocaleLowerCase())}`)
+            wordleGameLink.innerHTML = `${window.location.protocol + "//" + window.location.hostname}/word-game-play?q=${btoa(customWord.value.toLocaleLowerCase())}`
+        }
+    }
+}
+form.addEventListener('submit', createWordle);
+
+
+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)
+        copy_btn.innerHTML = "Copied !"
+        copy_btn.style.background = "#444"
+        // copy_btn.setAttribute('data-tooltip', 'Copied !')
+    } catch (error) {
+        console.log(error)
+    }
+}
+copy_btn.addEventListener('click', () => {
+    copyToClipboard(wordleGameLink.innerHTML)
+})

data/assets/js/game.js

@@ -0,0 +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 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")
+
+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"
+
+
+let dictionary
+let attempt = 0
+async function getData() {
+    const response = await fetch("/dictionary.json")
+    const data = await response.json()
+    dictionary = data
+}
+getData()
+
+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
+    }
+}
+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)
+}
+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)}&quote=
+             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)}&quote=
+         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)}`)
+})
+
+
+

data/assets/js/wordScrabble-test.js

@@ -172,8 +172,9 @@ if (lengthValue === '1') {
       lengthValue = params.get('length')
       dictonary = params.get('dictionary')
 
-      // console.log('/result' + location.search)
-      ga('send', 'pageview', window.location.pathname + location.search)
+      gtag('event', 'page_view', {
+        page_location: window.location.pathname + location.search,
+      })
     }
     getData(txtBox.value.toLowerCase())
     addFilterCount()
@@ -184,9 +185,6 @@ if (lengthValue === '1') {
   selectedDictionary.addEventListener("change", ((e) => {
     logSubmit(e)
   }))
-
-
-
   applyBtn.addEventListener('submit', logSubmit)
   form.addEventListener('submit', logSubmit);
 }

data/assets/js/words-starting-with.js

@@ -121,7 +121,9 @@ if (lengthValue === '1') {
       lengthValue = params.get('length')
       dictonary = params.get('dictionary')
 
-      ga('send', 'pageview', window.location.pathname + location.search)
+      gtag('event', 'page_view', {
+        page_location: window.location.pathname + location.search,
+      })
     }
     getData(txtBox.value.toLowerCase())
     addFilterCount()

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: word-games-theme
 version: !ruby/object:Gem::Version
-  version: 1.1.9
+  version: 1.2.2
 platform: ruby
 authors:
 - manpreet-appscms
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-04-12 00:00:00.000000000 Z
+date: 2022-04-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -105,6 +105,8 @@ files:
 - _data/wordgames/en/two_letter_word_finder.json
 - _data/wordgames/en/unscramble_letters_to_make_words.json
 - _data/wordgames/en/unscramble_words_and_jumble_solver.json
+- _data/wordgames/en/word-game-generator-online.json
+- _data/wordgames/en/word-game-play.json
 - _data/wordgames/en/word-meaning.json
 - _data/wordgames/en/words_with_friends_word_finder.json
 - _data/wordgames/es/four_letter_word_finder.json
@@ -171,6 +173,8 @@ files:
 - _includes/section/xyzGroup.html
 - _includes/seo.html
 - _includes/share/socialshare.html
+- _includes/word-game/word-game-generator-online.html
+- _includes/word-game/word-game-play.html
 - _includes/wordfinderstrategy/content.html
 - _includes/wordle-solver/wordle-solver.html
 - _includes/xyzpages/xyz.html
@@ -200,6 +204,7 @@ files:
 - assets/css/content.css
 - assets/css/feature.css
 - assets/css/footer.css
+- assets/css/game.css
 - assets/css/home.css
 - assets/css/news.css
 - assets/css/style.css
@@ -218,8 +223,11 @@ files:
 - assets/images/bg_elements.png
 - assets/images/bg_elements.svg
 - assets/images/board-game.png
+- assets/images/close.png
+- assets/images/copy.svg
 - assets/images/facebook-square.svg
 - assets/images/facebook.svg
+- assets/images/facebooks.svg
 - assets/images/footer.png
 - assets/images/footer2-bg.webp
 - assets/images/header.svg
@@ -255,11 +263,14 @@ files:
 - assets/images/twitter-square.svg
 - assets/images/twitter.svg
 - assets/images/twitter2.svg
+- assets/images/twitters.svg
 - assets/images/uo.svg
+- assets/images/whatsapp.svg
 - assets/images/window-close.png
 - assets/images/window-close.svg
 - assets/images/word-games-logo.svg
 - assets/images/word-games-logo.webp
+- assets/images/wordle.png
 - assets/images/wordswithletters-logo.png
 - assets/images/yellow_bg.png
 - assets/js/TopScroll.js
@@ -269,6 +280,9 @@ files:
 - assets/js/advancedFilter.js
 - assets/js/advancedFilter2.js
 - assets/js/advancedFilter3.js
+- assets/js/confetti.js
+- assets/js/createWordle.js
+- assets/js/game.js
 - assets/js/leftNav.js
 - assets/js/other-lang-wordScrabble.js
 - assets/js/scrabbleDictonary.js