word-games-theme 0.8.0 → 0.8.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5b383e2d2ca991f0df8c99706aea73184eed922cad3c6207e9144f3795c3a38d
-  data.tar.gz: b70abbe49809438065ff3f2b8e8e9611633a1ab8cbf292c7f6eae8b344a80f9e
+  metadata.gz: 365f974085302d1308d6b085887b28c5e0eea6802bfb87af6560dbe57c91ae19
+  data.tar.gz: fc5713197ce42b4869e1ff9cbfc218cf84413493d04d31de9df16345a3c2d3b4
 SHA512:
-  metadata.gz: 23a74f922f3fd3a6301aa07618809a0894f7089c0fccce5e2e2e919c909b7d73963ee50527fcada52ced63dc40a0c27f6907dac2b140757f73ec228183f167aa
-  data.tar.gz: ee7afc262a84181335b87320eb085c2cb65ffba4df67805e590acb0ffc5f8e0a2eae530b3b9f50035297bb1e5de01c443ae7f713d265906d8e7093095da61e3f
+  metadata.gz: fc89d748df6b1a3dfff361dc4c4713cdc2680fbac866757d12304dcfecff5b3a6044e7bddc190cc50a8a793127cff0eeb48ab5f8c1fbb2219813008514e43423
+  data.tar.gz: 614d760ab3ef31eccf42e790ce52a3e608d1b8dbac5a3743f0d3b1f7509109d79a7fcdf7963d027c65836bd979fd1a2918e0c83278777bd686f9deee38812aa5

data/_data/header/en/data.json

@@ -5,6 +5,10 @@
       "name": "words",
       "url": "/test"
     },
+    {
+      "name": "4 letter words with these letters and a blank",
+      "url": "/4-letter-words-with-these-letters-and-a-blank"
+    },
     {
       "name": "unscramble-letters",
       "url": "/unscramble-letters-to-make-words"

data/_data/wordgames/en/4_letter_words_with_these_letters_and_a_blank.json

@@ -0,0 +1 @@
+{"filewords":{"name":"","data":[{"word":"","x":"","gameName":""}]},"filepath":{},"title":"4 letter words with these letters and a blank- The most useful word finder tool ","h1":"Here's the full list of 4 letter words with these letters and a blank","h2":"Find all 4 letter words with these letters and a blank","meta":"Find words using a combination of letters and blanks words using a combination of letters and blanks without any constrain. Use our advanced word search tool and get your desired result.","featureNo":"02","feature_title":"Features","blogNo":"03","blog_title":"Blog","FaqNo":"04","Faq_title":"FAQ","aboutNo":"05","about_title":"About","featureList":[{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"},{"feature_heading":"","feature_text":"","fa_class":"../assets/images/star.svg"}],"faqList":[{"Question":"","Answer":""}]}

data/_includes/section/home.html

@@ -20,10 +20,14 @@
         <div class="serachSection">
             <div class="position-relative serachBox">
                 <form action="/result" id='form' method="GET">
-
-                    <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
-                        placeholder="Enter up to 15 letters?" class="txtBox" value='' name="search" maxlength="15"
-                        required autocomplete="off">
+                    <div style="position: relative;">
+                        <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
+                            placeholder="Enter up to 15 letters?" class="txtBox" value='' name="search" maxlength="15"
+                            required autocomplete="off">
+                        <span class="focus-border">
+                            <i></i>
+                        </span>
+                    </div>
                     <input style="border-radius: {{CustomColor.inputFieldBorder}}; 
                         background-color: {{CustomColor.inputButtonBg}};" type="submit" class="serachBtn" id="serach"
                         value>

data/_includes/section/home2.html

@@ -19,9 +19,15 @@
         <div class="serachSection">
             <div class="position-relative serachBox">
                 <form action="{{page.url}}/result" id='form' method="GET">
-                    <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
-                        placeholder="Enter up to 15 letters?" class="txtBox" value='' name="search" maxlength="15"
-                        required autocomplete="off">
+                    <div style="position: relative;">
+                        <input style="border-radius: {{CustomColor.inputFieldBorder}}" type="text"
+                            placeholder="Enter up to 15 letters?" class="txtBox" value='' name="search" maxlength="15"
+                            required autocomplete="off">
+                        <span class="focus-border">
+                            <i></i>
+                        </span>
+                    </div>
+
                     <input
                         style="border-radius: {{CustomColor.inputFieldBorder}}; background-color: {{CustomColor.inputButtonBg}};"
                         type="submit" class="serachBtn" id="serach" value>

data/_layouts/default.html

@@ -57,8 +57,10 @@
     <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
     <script>
         let txtBox = document.querySelector('.txtBox')
+        let focusBorder = document.querySelector('.focus-border')
         txtBox.focus()
         txtBox.addEventListener('input', (e) => {
+            focusBorder.classList.remove("focus-border")
             e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, "")
             let rangeOfBlankTile = '{{ page.blanktilerange }}'
             if (rangeOfBlankTile === "") {

data/_layouts/page.html

@@ -59,6 +59,17 @@
 
   <link rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css" />
+  <script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
+  <script>WebFont.load({ google: { families: ['Poppins:400&display=swap'] } })</script>
+  <script>
+      (function () {
+        d = document;
+        c = d.createElement('link');
+        c.href = '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css';
+        c.rel = 'stylesheet';
+        d.head.appendChild(c);
+      })();
+  </script>
   <script data-range="{{page.blanktilerange}}" src="/assets/js/wordScrabble.js"></script>
   <script defer src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
   <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>

data/_layouts/page2.html

@@ -57,7 +57,18 @@
 
     <link rel="stylesheet"
         href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css" />
-    <script src="/assets/js/X-letter.js" data-letter="{{page.letter}}"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/webfont/1.6.28/webfontloader.js"></script>
+    <script>WebFont.load({ google: { families: ['Poppins:400&display=swap'] } })</script>
+    <script>
+            (function () {
+                d = document;
+                c = d.createElement('link');
+                c.href = '//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css';
+                c.rel = 'stylesheet';
+                d.head.appendChild(c);
+            })();
+    </script>
+    <script src="/assets/js/X-letter.js" data-letter="{{page.letter}}" data-ablank="{{page.ablank}}"></script>
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
     {% include Monumetric/Monumetric.html %}

data/assets/css/home.css

@@ -55,6 +55,77 @@ input:-webkit-autofill:active {
   outline: none;
   position: relative;
 }
+
+.txtBox~.focus-border:before,
+.txtBox~.focus-border:after {
+	content: "";
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 0;
+	height: 2px;
+	background-color: #000;
+	transition: .5s;
+	transition-delay: 0.2s;
+  z-index: 9;
+}
+.txtBox~.focus-border:after {
+	top: auto;
+	bottom: 0;
+	right: auto;
+	left: 0;
+	transition-delay: 0.6s;
+}
+.txtBox:focus~.focus-border:before,
+.txtBox:focus~.focus-border:after,
+.has-content.txtBox~.focus-border:before,
+.has-content.txtBox~.focus-border:after {
+	width: 100%;
+	transition: .5s;
+	transition-delay: 0.6s;
+}
+
+.txtBox:focus~.focus-border:after,
+.has-content.txtBox~.focus-border:after {
+	transition-delay: 0.2s;
+}
+
+.txtBox:focus~.focus-border i:before,
+.txtBox:focus~.focus-border i:after,
+.has-content.txtBox~.focus-border i:before,
+.has-content.txtBox~.focus-border i:after {
+	height: 100%;
+	transition: 0.2s;
+}
+
+.txtBox:focus~.focus-border i:after,
+.has-conten.txtBox~.focus-border i:after {
+	transition-delay: 0.4s;
+}
+.txtBox~.focus-border i:before,
+.txtBox~.focus-border i:after {
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 2px;
+	height: 0;
+	background-color: #000;
+	transition: .5s;
+}
+
+.txtBox~.focus-border i:after {
+	left: auto;
+	right: 0;
+	top: auto;
+	bottom: 0;
+	transition-delay: 0.4s;
+}
+
+
+
+
+
 /* ravi */
 .txtBox::placeholder {
   /* Chrome, Firefox, Opera, Safari 10.1+ */

data/assets/js/X-letter.js

@@ -3,6 +3,8 @@
 const getScript=document.currentScript
 const letterLen = getScript.dataset.letter
 
+const ablank = getScript.dataset.ablank
+
 let errorMsg = document.querySelector('.errorMsg')
 let script = document.currentScript
 let wordCount = document.querySelector('.wordCount')
@@ -24,6 +26,16 @@ tab_link_wrapper.style.display = "none"
 let txtBox = document.querySelector('.txtBox')
 txtBox.focus()
 txtBox.value = serachValue
+
+
+if(ablank){
+if(!serachValue.includes("?")){
+  if(serachValue.length < letterLen){
+  serachValue = serachValue + '?'
+  }
+  }
+}
+
 txtBox.addEventListener('input', (e) => {
   let rangeOfBlankTile = script.dataset.range
   e.target.value = e.target.value.replace(/[^a-zA-Z? ]/g, '')
@@ -80,6 +92,7 @@ const getData = async (serachValue) => {
 getData(serachValue.toLowerCase())
 
 function x_with_letters(data) {
+  console.log(data);
   if (typeof data === 'string') {
     errorMsg.innerHTML = 'No words found'
     wordCount.innerHTML = `<strong>Found 0 words with letters ${serachValue.split(
@@ -93,7 +106,7 @@ function x_with_letters(data) {
     if (letterLen) {
       filterData = data.filter((item) => item.length == letterLen)
     }
-  
+
 
     if (prefixValue) {
       filterData = filterData.filter((item2) =>
@@ -316,8 +329,42 @@ function sortPointsby(sortValue, data, i) {
       })
     })
     const result = newArray.map((item) => {
-      return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
-      <li>${item.words}
+      var text1 = serachValue.replace('?', '')
+        var text2 = item.words
+        var text3 = item.words
+        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) + 1)
+            newStr = newStr.substring(newStr.indexOf(char) + 1)
+          }
+          return indexes
+        }
+        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]
+          }
+        })
+        let itemHtml = ''
+        text2.split('').map((itemValue, index) => {
+          let check = indexs.find((i) => i === index)
+          if (check !== undefined) {
+            itemHtml += `${itemValue}`
+          } else {
+            itemHtml += `<span class='highlight'>${itemValue}</span>`
+          }
+        })
+      return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
+      <li>${itemHtml}
     <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
       </li></a>`
     })
@@ -336,7 +383,6 @@ function sortPointsby(sortValue, data, i) {
     `
   }
 }
-
 // sort by aplhabets
 function sortby(sortBool, data, i) {
   if (sortBool) {
@@ -349,8 +395,44 @@ function sortby(sortBool, data, i) {
       for (let i = 0; i < item.length; i++) {
         sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
       }
-      return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
-            <li>${item}
+
+      var text1 = serachValue.replace('?', '')
+      var text2 = item
+      var text3 = item
+      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) + 1)
+          newStr = newStr.substring(newStr.indexOf(char) + 1)
+        }
+        return indexes
+      }
+      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]
+        }
+      })
+      let itemHtml = ''
+      text2.split('').map((itemValue, index) => {
+        let check = indexs.find((i) => i === index)
+        if (check !== undefined) {
+          itemHtml += `${itemValue}`
+        } else {
+          itemHtml += `<span class='highlight'>${itemValue}</span>`
+        }
+      })
+    
+      return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
+            <li>${itemHtml}
         <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
           </li></a>`
     })
@@ -378,8 +460,44 @@ function sortby(sortBool, data, i) {
       for (let i = 0; i < item.length; i++) {
         sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
       }
-      return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item}">
-              <li>${item}
+
+      var text1 = serachValue.replace('?', '')
+      var text2 = item
+      var text3 = item
+      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) + 1)
+          newStr = newStr.substring(newStr.indexOf(char) + 1)
+        }
+        return indexes
+      }
+      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]
+        }
+      })
+      let itemHtml = ''
+      text2.split('').map((itemValue, index) => {
+        let check = indexs.find((i) => i === index)
+        if (check !== undefined) {
+          itemHtml += `${itemValue}`
+        } else {
+          itemHtml += `<span class='highlight'>${itemValue}</span>`
+        }
+      })
+    
+      return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
+              <li>${itemHtml}
           <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
             </li></a>`
     })

data/assets/js/wordScrabble.js

@@ -354,7 +354,7 @@ function sortPointsby(sortValue, data) {
               itemHtml += `<span class='highlight'>${itemValue}</span>`
             }
           })
-          return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
+          return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
           <li>${itemHtml}
         <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
           </li></a>`
@@ -426,7 +426,7 @@ function sortby(sortBool, data) {
               sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
             }
 
-            return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+            return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
             <li>${itemHtml}
         <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
           </li></a>`
@@ -489,7 +489,7 @@ function sortby(sortBool, data) {
               sum += ScrabbleLetterScore[item[i]] || 0 // for unknown characters
             }
 
-            return `<a class="anchor__style" title="Lookup python in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+            return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
             <li>${itemHtml}
         <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
           </li></a>`

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: word-games-theme
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.8.1
 platform: ruby
 authors:
 - manpreet-appscms
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-02-01 00:00:00.000000000 Z
+date: 2022-02-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -76,6 +76,7 @@ files:
 - _data/header/en/data.json
 - _data/theme/colors.json
 - _data/wordfinderstrategy/en/how-to-use-5-letter-word-finder-to-score-high-in-scrabble-words-with-friends.json
+- _data/wordgames/en/4_letter_words_with_these_letters_and_a_blank.json
 - _data/wordgames/en/anagram_word_finder.json
 - _data/wordgames/en/eight_letter_word_finder.json
 - _data/wordgames/en/eleven_letter_word_finder.json