word-games-theme 2.7.0 → 2.7.2

data/assets/css/wordgames-theme.css

@@ -229,7 +229,7 @@ header {
 
 .footer-bottom .language-drop-down-item {
     width: 50%;
-    padding: 10px 12px 1px 1px;
+    padding: 1rem;
     text-align: center;
     font-size: 15px;
     margin-bottom: 0;

data/assets/js/other-lang-wordScrabble-home.js

@@ -0,0 +1,251 @@
+let txtBox = document.querySelector('.txtBox')
+txtBox.focus()
+let letterCloseButton = document.querySelector('.letter-close-button')
+let startsWith = document.getElementById("startsWith");
+let mustInclude = document.getElementById("mustInclude");
+let endsWith = document.getElementById("endsWith");
+let exculdeWith = document.getElementById("exculdeWith");
+let inculdeWith = document.getElementById("inculdeWith");
+let wordLength = document.getElementById("wordLength");
+
+const serachSection = document.querySelector(".serachSection");
+let rangeOfBlankTile = serachSection.dataset.range;
+
+// // when typing on input
+txtBox.addEventListener('input', (e) => {
+    if (e.target.value === "") {
+        letterCloseButton.style.display = "none"
+    }
+    else {
+        letterCloseButton.style.display = "block"
+    }
+    e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "")
+    let rangeOfBlankTile = 3
+    if (rangeOfBlankTile === "") {
+        rangeOfBlankTile = 3
+    }
+    e.target.value = e.target.value.replace(/ /g, '?')
+    let data = []
+    data = e.target.value.split('').filter((i) => i === '?')
+    if (data.length > rangeOfBlankTile) {
+        e.target.value = e.target.value.replace(/\?$/, '')
+    }
+})
+letterCloseButton.addEventListener("click", () => {
+    txtBox.value = ""
+    letterCloseButton.style.display = "none"
+})
+//tooltips for advanced filter
+const filterInputs = document.querySelectorAll('.filter_val');
+Array.from(filterInputs).forEach((item) => {
+    item.addEventListener("input", (e) => {
+        const inputValue = e.target.value;
+        const parentElement = e.target.parentElement;
+        const imgElement = parentElement.querySelector('img');
+        const tooltipElement = parentElement.querySelector('.filter-tooltip');
+
+        if (inputValue == "") {
+            imgElement.src = "/assets/images/questionmark.svg"
+            setTimeout(() => {
+                item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+            }, 100);
+            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
+
+        } else {
+            item.nextElementSibling.removeAttribute("data-tip")
+            imgElement.src = "/assets/images/close-btn.svg"
+            tooltipElement.style.setProperty('--tooltip-padding', '0');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'none');
+        }
+        item.nextElementSibling.addEventListener("click", () => {
+            e.target.value = ""
+            imgElement.src = "/assets/images/questionmark.svg"
+            setTimeout(() => {
+                item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+            }, 100);
+            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
+        })
+    })
+})
+
+
+const loadResource = (FILE_URL, data = {}, async = true, type = "text/javascript") => {
+    return new Promise((resolve, reject) => {
+        let resourceEle;
+
+        if (type === "text/javascript") {
+            resourceEle = document.createElement("script");
+            resourceEle.src = FILE_URL;
+            resourceEle.classList.add("loaded-js");
+        } else if (type === "text/css") {
+            resourceEle = document.createElement("link");
+            resourceEle.rel = "stylesheet";
+            resourceEle.href = FILE_URL;
+        } else {
+            reject({
+                status: false,
+                message: `Unsupported resource type: ${type}`,
+            });
+            return;
+        }
+
+        resourceEle.type = type;
+        resourceEle.async = async;
+
+        Object.keys(data).forEach((key) => {
+            resourceEle.setAttribute(`data-${key}`, data[key]);
+        });
+
+        resourceEle.addEventListener("load", () => {
+            resolve({ status: true });
+        });
+
+        resourceEle.addEventListener("error", () => {
+            reject({
+                status: false,
+                message: `Failed to load the resource ${FILE_URL}`,
+            });
+        });
+
+        if (type === "text/javascript") {
+            // console.log(resourceEle);
+            // console.log(FILE_URL);
+            document.body.appendChild(resourceEle);
+        } else if (type === "text/css") {
+            document.head.appendChild(resourceEle);
+        }
+    });
+};
+const formElement = document.querySelector("#form");
+formElement.addEventListener("submit", function (e) {
+    e.preventDefault();
+    if (txtBox.value != "" || startsWith.value != "" || endsWith.value != "" || mustInclude.value != "" || exculdeWith.value != "" || inculdeWith.value != "" || wordLength.value != "") {
+        let quesMark = "?";
+        if (rangeOfBlankTile) {
+            if (!txtBox.value.includes("?")) {
+                txtBox.value = txtBox.value + quesMark.repeat(rangeOfBlankTile); //
+                txtBox.value = txtBox.value;
+            }
+        }
+        document.querySelector(".fillterWrapper").classList.add("hide")
+        let selectedDictionary = document.querySelector(".select_dropDown2").value;
+        if (history.pushState) {
+            var newurl =
+                window.location.protocol +
+                "//" +
+                window.location.host +
+                window.location.pathname +
+                "?" +
+                "search" +
+                "=" +
+                txtBox.value.toLowerCase() +
+                "&" +
+                "dictionary" +
+                "=" +
+                selectedDictionary +
+                "&" +
+                "prefix" +
+                "=" +
+                startsWith.value +
+                "&" +
+                "contains" +
+                "=" +
+                mustInclude.value +
+                "&" +
+                "suffix" +
+                "=" +
+                endsWith.value +
+                "&" +
+                "exclude" +
+                "=" +
+                exculdeWith.value +
+                "&" +
+                "include" +
+                "=" +
+                inculdeWith.value +
+                "&" +
+                "length" +
+                "=" +
+                wordLength.value;
+            window.history.pushState({ path: newurl }, "", newurl);
+
+            const params = new URLSearchParams(window.location.search);
+            serachValue = params.get("search");
+            prefixValue = params.get("prefix");
+            containsValue = params.get("contains");
+            suffixValue = params.get("suffix");
+            exculdeValue = params.get("exclude");
+            includeValue = params.get("include");
+            lengthValue = params.get("length");
+            dictonary = params.get("dictionary");
+
+            gtag("event", "page_view", {
+                page_location: window.location.pathname + location.search,
+            });
+        }
+        const paramName = 'search';
+        if (new URLSearchParams(window.location.search).has(paramName)) {
+            const additionalData = {
+                url: "{{site.url}}",
+                range: "{{page.blanktilerange}}"
+            }
+            var loadJs = document.querySelector(".loaded-js");
+            if (loadJs == null) {
+                loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
+                    .then((data) => {
+                        console.log("CSS loaded:", data);
+                    })
+                    .then(() => {
+                        // Load the JavaScript file after the CSS file has loaded
+                        loadResource("/assets/js/other-lang-wordScrabble.js", additionalData, true, "text/javascript")
+                            .then((data) => {
+                                console.log("JavaScript loaded:", data);
+                                getData(txtBox.value.toLowerCase());
+                            })
+                            .catch((error) => {
+                                console.error("Error loading JavaScript:", error);
+                            });
+                    })
+                    .catch((error) => {
+                        console.error("Error loading CSS:", error);
+                    });
+            }
+        }
+    } else {
+       console.log("Please Enter Valid Letters.");
+    }
+});
+// Now you can use the loadScript function with additional data
+function checkQueryParam() {
+    const urlParams = new URLSearchParams(window.location.search);
+    const paramName = 'search';
+    if (urlParams.has(paramName)) {
+        const additionalData = {
+            url: "{{site.url}}",
+            range: "{{page.blanktilerange}}"
+        };
+        loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
+            .then((data) => {
+                console.log("CSS loaded:", data);
+            })
+            .then(() => {
+                // Load the JavaScript file after the CSS file has loaded
+                loadResource("/assets/js/other-lang-wordScrabble.js", additionalData, true, "text/javascript")
+                    .then((data) => {
+                        console.log("JavaScript loaded:", data);
+                        getData(txtBox.value.toLowerCase());
+                    })
+                    .catch((error) => {
+                        console.error("Error loading JavaScript:", error);
+                    });
+            })
+            .catch((error) => {
+                console.error("Error loading CSS:", error);
+            });
+    }
+}
+checkQueryParam();
+
+

data/assets/js/scrabble-words.js

@@ -183,7 +183,7 @@ const getData = async (serachValue) => {
     </div>`;
         /// loader
         const response = await fetch(
-            `http://127.0.0.1:9000/getWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`
+            `/.netlify/functions/getWords?name=${serachValue}&selecteddictionary=${selectedDictionary}`
         );
         const data = await response.json();
         main.innerHTML = "";

data/assets/js/wordfinder-home.js

@@ -57,16 +57,20 @@ Array.from(filterInputs).forEach((item) => {
             imgElement.src = "/assets/images/close-btn.svg"
             tooltipElement.style.setProperty('--tooltip-padding', '0');
             tooltipElement.style.setProperty('--tooltip-border-style', 'none');
-        }
-        item.nextElementSibling.addEventListener("click", () => {
-            e.target.value = ""
-            imgElement.src = "/assets/images/questionmark.svg"
-            setTimeout(() => {
-                item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
-            }, 100);
-            tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
-            tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
-        })
+        }      
+    })
+
+    item.nextElementSibling.addEventListener("click", () => {
+        const parentElement = item.parentElement;
+        const imgElement = parentElement.querySelector('img');
+        const tooltipElement = parentElement.querySelector('.filter-tooltip');
+        item.value = ""
+        imgElement.src = "/assets/images/questionmark.svg"
+        setTimeout(() => {
+            item.nextElementSibling.setAttribute("data-tip", item.nextElementSibling.id)
+        }, 100);
+        tooltipElement.style.setProperty('--tooltip-padding', '0.5rem');
+        tooltipElement.style.setProperty('--tooltip-border-style', 'soild');
     })
 })
 

data/assets/js/wordfinder.js

@@ -78,6 +78,7 @@ const getData = async (serachValue) => {
     try {
         document.querySelector(".main-header").style.background = "#fff"
         document.querySelector(".heading-h2").style.display = "none"
+        document.querySelector(".sortingFilters").style.display = "none"
         if (featureContainer) {
             featureContainer.remove()
         }
@@ -225,7 +226,11 @@ if (lengthValue === "1") {
     sortingFilter.addEventListener("change", logSubmit);
 }
 
+let moreData = []
+let data_index = 25;
 function getWords(data) {
+    data_index = 25
+    moreData = []
     main.innerHTML = "";
     lengthSelect.innerHTML = ""
     document.querySelector(".sortingFilters").style.display = "flex"
@@ -237,7 +242,6 @@ function getWords(data) {
     } else {
         let newWordsLength = 0;
         let dataArr = [];
-        // for (let i = serachValue.length; i >= 1; i--) {
         for (let i = 15; i > 0; i--) {
             let newdata = data.filter((item) => item.length === i);
             if (prefixValue) {
@@ -245,6 +249,9 @@ function getWords(data) {
                     item2.startsWith(prefixValue.toLowerCase())
                 );
                 startsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                startsWith.nextElementSibling.removeAttribute("data-tip")
+                startsWith.nextElementSibling.style.setProperty('--tooltip-padding', '0');
+                startsWith.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                 startsWith.classList.add("tick");
                 startsWith.value = prefixValue;
             } else {
@@ -255,6 +262,9 @@ function getWords(data) {
                     item.includes(containsValue.toLowerCase())
                 );
                 mustInclude.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                mustInclude.nextElementSibling.removeAttribute("data-tip")
+                mustInclude.nextElementSibling.style.setProperty('--tooltip-padding', '0');
+                mustInclude.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                 mustInclude.classList.add("tick");
                 mustInclude.value = containsValue;
             } else {
@@ -265,6 +275,9 @@ function getWords(data) {
                     item.endsWith(suffixValue.toLowerCase())
                 );
                 endsWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                endsWith.nextElementSibling.removeAttribute("data-tip")
+                endsWith.nextElementSibling.style.setProperty('--tooltip-padding', '0');
+                endsWith.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                 endsWith.classList.add("tick");
                 endsWith.value = suffixValue;
             } else {
@@ -288,6 +301,9 @@ function getWords(data) {
                     }
                 });
                 exculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                exculdeWith.nextElementSibling.removeAttribute("data-tip")
+                exculdeWith.nextElementSibling.style.setProperty('--tooltip-padding', '0');
+                exculdeWith.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                 exculdeWith.classList.add("tick");
                 exculdeWith.value = exculdeValue;
                 newdata = data;
@@ -312,6 +328,9 @@ function getWords(data) {
                     }
                 });
                 inculdeWith.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                inculdeWith.nextElementSibling.removeAttribute("data-tip")
+                inculdeWith.nextElementSibling.style.setProperty('--tooltip-padding', '0');
+                inculdeWith.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                 inculdeWith.classList.add("tick");
                 inculdeWith.value = includeValue;
                 newdata = data;
@@ -321,6 +340,9 @@ function getWords(data) {
             if (lengthValue) {
                 newdata = newdata.filter((item) => item.length == lengthValue);
                 wordLength.nextElementSibling.querySelector("img").src = "/assets/images/close-btn.svg"
+                wordLength.nextElementSibling.removeAttribute("data-tip")
+                wordLength.nextElementSibling.style.setProperty('--tooltip-padding', '0');
+                wordLength.nextElementSibling.style.setProperty('--tooltip-border-style', 'none');
                 wordLength.classList.add("tick");
                 wordLength.value = lengthValue;
             } else {
@@ -331,7 +353,8 @@ function getWords(data) {
             } else {
                 newWordsLength += newdata.length;
                 newdata = sortWords(newdata);
-                const result = newdata.map((item) => {
+                moreData.push(newdata)
+                let result = newdata.map((item) => {
                     let itemHtml = "";
                     if (serachValue) {
                         var text1 = serachValue.replace("?", "");
@@ -389,14 +412,19 @@ function getWords(data) {
                         lengthSelect.add(option);
                         lengthSelect.style.display = "block"
                     }
+
+                    result = result.slice(0, 25)
+
                     main.innerHTML += `
-          <div class="allGroupWords wordlistContainer" id="alpha_${i}">
-                  <h3 class="wordListHeading lead">${i} Letter Words</h3>
-              <div class="wordList">
-                   ${result.join("")}
-              </div>
-          </div>
-          `;
+                          <div class="allGroupWords wordlistContainer" id="alpha_${i}">
+                            <h3 class="wordListHeading lead">${i} Letter Words</h3>
+                              <div class="wordList">${result.join("")}</div>
+                               <div class="w-100 text-center btn-container">
+                                <button onclick="showMoreWords(this)" type="button" class="my-4 showmore_btn" id="${i}">More Words</button>
+                               </div>
+                          </div>`
+
+                    showMoreLimit()
                 }
             }
         }
@@ -437,6 +465,118 @@ function getWords(data) {
         }
     }
 }
+async function getMoreWords() {
+    let flattenedArray = moreData.flat();
+    let uniqueArray = [...new Set(flattenedArray)];
+    // console.log(uniqueArray);
+    return uniqueArray
+}
+
+let previousDataIndex = null
+let previousID = null;
+let storepreviousIndex = []
+async function showMoreWords(e) {
+    try {
+        let showmore = e.parentElement.children[0];
+        let id = showmore.id;
+
+        if (previousID !== null && parseInt(previousID) !== parseInt(id)) {
+            data_index = 25
+            console.log(storepreviousIndex);
+            const filteredIndexes = storepreviousIndex.filter(item => item.id === id);
+            if (filteredIndexes.length > 0) {
+                const lastItem = filteredIndexes[filteredIndexes.length - 1];
+                data_index = lastItem.data_index + 25;
+                lastItem.data_index = data_index;
+            }
+            console.log(filteredIndexes);
+
+        }
+        previousID = id;
+        storepreviousIndex.push({
+            data_index,
+            id
+        })
+        console.log("Current data_index:", data_index);
+
+        document.getElementById(id).innerHTML = `Loading...`;
+        let content_area = document.getElementById("alpha_" + id).getElementsByClassName("wordList")[0];
+        const result = await getMoreWords();
+        let full_words = result.filter((item) => item.length === Number(id));
+
+        if (data_index < full_words.length) {
+            for (let d = data_index; d < data_index + 25; d++) {
+                if (full_words[d] != undefined) {
+                    let itemHtml = "";
+                    if (serachValue) {
+                        var text1 = serachValue.replace("?", "");
+                        var text2 = full_words[d];
+                        var text3 = full_words[d];
+                        let chars = text1.split("");
+                        let indexs = [];
+                        chars.map((i) => {
+                            let findIndexes = findIndex(text3, i);
+                            if (findIndexes.length > 0) {
+                                text3 = text3.split("");
+                                text3[findIndexes] = "$";
+                                text3 = text3.join("");
+                                indexs = [...indexs, ...findIndexes];
+                            }
+                        });
+                        text2.split("").map((itemValue, index) => {
+                            let check = indexs.find((i) => i === index);
+                            if (check !== undefined) {
+                                itemHtml += `${itemValue}`;
+                            } else {
+                                itemHtml += `<span class='highlight'>${itemValue}</span>`;
+                            }
+                        });
+                    } else {
+                        itemHtml = full_words[d]
+                    }
+                    let ScrabbleLetterScore = ScrabbleScore();
+                    let points = 0;
+                    full_words[d] = full_words[d].toLowerCase();
+                    for (let i = 0; i < full_words[d].length; i++) {
+                        points += ScrabbleLetterScore[full_words[d][i]] || 0; // for unknown characters
+                    }
+
+                    let span = document.createElement("span");
+                    span.setAttribute("class", "points");
+                    span.setAttribute("value", `${points}`);
+                    span.innerHTML = `${points}`;
+
+                    let a = document.createElement("a");
+                    a.setAttribute("class", "anchor__style");
+                    a.setAttribute("target", "_blank");
+                    a.setAttribute("href", "/word-meaning?search=" + full_words[d].replace(/<\/?[^>]+>/gi, ''));
+                    a.setAttribute("data-original-title", `Lookup ${full_words[d].replace(/<\/?[^>]+>/gi, '')} in Dictionary`)
+                    a.innerHTML = ` ${itemHtml} `;
+                    a.appendChild(span)
+                    content_area.appendChild(a);
+                }
+            }
+            document.getElementById(id).innerHTML = `More Words`;
+            data_index += 25;
+        } else {
+            document.getElementById(id).style.display = "none";
+        }
+    } catch (error) {
+        console.error("Error fetching or processing data:", error);
+    }
+}
+
+function showMoreLimit() {
+    let tableFooter = document.querySelectorAll(".btn-container")
+    let showmore = document.querySelectorAll(".showmore_btn");
+    for (let i = 0; i < showmore.length; i++) {
+        let data_of_button = document.getElementById("alpha_" + showmore[i].getAttribute("id"));
+        let final_data = data_of_button.getElementsByClassName("anchor__style");
+        if (final_data.length < 25) {
+            tableFooter[i].style.display = "none";
+        }
+    }
+}
 function sortWords(data) {
     if (sortingFilter.selectedIndex == 0) {
         return data;