word-games-theme 2.7.1 → 2.7.3

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/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,26 @@ 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   
+                                style="background: black;
+                                padding: 1rem 2rem;
+                                border-radius: 50px;
+                                color: #fff;
+                                font-size: 15px;
+                                border: none;"
+                                onclick="showMoreWords(this)" type="button" class="my-4 showmore_btn" id="${i}">More Words</button>
+                               </div>
+                          </div>`
+
+                    showMoreLimit()
                 }
             }
         }
@@ -437,6 +472,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;

data/assets/js/xletter-result.js

@@ -265,7 +265,12 @@ selectedDictionary.addEventListener("change", ((e) => {
 form.addEventListener('submit', logSubmit);
 sortingFilter.addEventListener("change", logSubmit);
 
+
+let moreData = []
+let data_index = 25;
 function x_with_letters(data) {
+    data_index = 25
+    moreData = []
     document.querySelector(".sortingFilters").style.display = "flex"
     main.innerHTML = ""
     if (typeof data === 'string') {
@@ -374,8 +379,9 @@ function x_with_letters(data) {
         } else {
             newWordsLength += filterData.length
             filterData = sortWords(filterData);
+            moreData.push(filterData)
             let itemLength = ''
-            const result = filterData.map((item) => {
+            let result = filterData.map((item) => {
                 let itemHtml = "";
                 itemLength = item.length
                 let ScrabbleLetterScore = ScrabbleScore()
@@ -434,20 +440,33 @@ function x_with_letters(data) {
             home_page_search_result.href = homePageSearchResult
             home_page_search_result.innerHTML = `See words of any length with letters ${serachValue.split("")}`
 
+            result = result.slice(0, 25)
+
             main.innerHTML += `
-            <div class="allGroupWords">
+            <div class="allGroupWords" id="alpha_${itemLength}">
                     <h3 class="wordListHeading lead">${itemLength} Letter Words</h3>
                 <div class="wordList">
                      ${result.join("")}
                 </div>
+                <div class="w-100 text-center btn-container">
+                  <button 
+                  style="background: black;
+                  padding: 1rem 2rem;
+                  border-radius: 50px;
+                  color: #fff;
+                  font-size: 15px;
+                  border: none;"
+                  onclick="showMoreWords(this)" type="button" class="my-4 showmore_btn" id="${itemLength}">More Words</button>
+                </div>
             </div>
             `;
+            showMoreLimit()
         }
         if (serachValue) {
-        wordCount.innerHTML = `<strong>Found ${newWordsLength} words with letters with ${serachValue.split(
-            ''
-        )}</strong>`
-        }else{
+            wordCount.innerHTML = `<strong>Found ${newWordsLength} words with letters with ${serachValue.split(
+                ''
+            )}</strong>`
+        } else {
 
             let startwithMsg = ""
             let endwithMsg = ""
@@ -477,6 +496,94 @@ function x_with_letters(data) {
     }
 }
 
+async function getMoreWords() {
+    let flattenedArray = moreData.flat();
+    let uniqueArray = [...new Set(flattenedArray)];
+    return uniqueArray
+}
+async function showMoreWords(e) {
+    try {
+        let showmore = e.parentElement.children[0];
+        let id = showmore.id;
+
+        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));
+
+        console.log(data_index);
+
+        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 {
+            data_index = 25
+            document.getElementById(id).style.display = "none";
+        }
+    } catch (error) {
+        console.error("Error fetching or processing data:", error);
+    }
+}
+function showMoreLimit() {
+    let tableFooter = document.querySelector(".btn-container");
+    let wordList = document.querySelector(".wordList");
+    let final_data = wordList.getElementsByClassName("anchor__style");
+    if (final_data.length < 25) {
+        tableFooter.style.display = "none";
+    }
+}
+
 function sortWords(data) {
     if (sortingFilter.selectedIndex == 0) {
         return data;
@@ -518,3 +625,18 @@ function sortWords(data) {
         return tempArr;
     }
 }
+
+
+function findIndex(str, char) {
+    const strLength = str.length;
+    const indexes = [];
+    let newStr = str;
+
+    while (newStr && newStr.indexOf(char) > -1) {
+        indexes.push(newStr.indexOf(char) + strLength - newStr.length);
+        newStr = newStr.substring(newStr.indexOf(char) + 5);
+        newStr = newStr.substring(newStr.indexOf(char) + 5);
+    }
+
+    return indexes;
+}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: word-games-theme
 version: !ruby/object:Gem::Version
-  version: 2.7.1
+  version: 2.7.3
 platform: ruby
 authors:
 - manpreet-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-04-08 00:00:00.000000000 Z
+date: 2024-04-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll