word-games-theme 0.6.7 → 0.6.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0729dfba8dc6c5335074239cae6a6c006c932587cde285e27f600fa81edacf6d'
-  data.tar.gz: b3ff4ff1d467d768cc01e3eae8510599612b99a3cf12517239b03525104aed98
+  metadata.gz: 15f1e58caabfb91fab765215a3eeb52620b74cf3d3c6881c1e641a46d3c83d5c
+  data.tar.gz: c743df6174042db5daeece5026be01d13352f50069346d45047dbb93729c4b37
 SHA512:
-  metadata.gz: 607c150da62f35009b0f2dd6272e23e8f9c5165211eb5c0e7db9b2df55c97f339dec12e86d1b257df704eb137a16b20f6983f9e86159768ccba50f0a1e46fc80
-  data.tar.gz: 6c439e00f208679d5324c531c42a25b46f9f3928747354707743438d1963937638e54fba9c46c1d39713a006910b3043fab08ddc8aca4120a146d8e8c5ee84b2
+  metadata.gz: 0d653de85ce68e41a12b2a0ff1112ea0b7058a4b4ecb4c9e625021b03fa1737cee7ac3dd0581f3f2615c782dfe03b4ea286e5e34a664e84ea1b800f8ad94e65e
+  data.tar.gz: 430bebe6104c3bb07cfd90268730daa28e00889448f2800f0a9714ebba9d4fa4c999b3a66c1489adce121c23d71c6db38fdce8ccf8e1b5a8648c4d68255add71

data/_includes/wordle-solver/wordle-solver.html

@@ -2,23 +2,28 @@
     <div class="row">
         <div class="col-md-10 mx-auto ws">
             <div style="font-size: 15px;" class="alert errMessage" role="alert"></div>
-
             <form name="verify">
                 <div class="form-group">
+
                     <label for="greenLetters" class="my-1 p-0 wordleSolver-label">Enter green letters at correct
                         position</label>
                     <div class="col-md-6 p-0">
                         <div class="d-flex">
                             <input data-id="0" type="text" autocomplete="off" tabIndex="0"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greenLetters">
+                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
+                                id="greenLetters">
                             <input data-id="1" type="text" autocomplete="off" tabIndex="1"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greenLetters">
+                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
+                                id="greenLetters">
                             <input data-id="2" type="text" autocomplete="off" tabIndex="2"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greenLetters">
+                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
+                                id="greenLetters">
                             <input data-id="3" type="text" autocomplete="off" tabIndex="3"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greenLetters">
+                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
+                                id="greenLetters">
                             <input data-id="4" type="text" autocomplete="off" tabIndex="4"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greenLetters">
+                                class="wordleSolver-field greenLetters greenWithIndex form-control px-5" maxlength="1"
+                                id="greenLetters">
                         </div>
                     </div>
                 </div>
@@ -27,48 +32,57 @@
                     <div class="col-md-6 p-0">
                         <div class="d-flex">
                             <input type="text" autocomplete="off" tabIndex="1"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="yellowLetters"
-                                tabIndex="5">
-                            <input type="text" autocomplete="off" class="wordleSolver-field form-control px-5"
-                                maxlength="1" id="yellowLetters" tabIndex="6">
-                            <input type="text" autocomplete="off" class="wordleSolver-field form-control px-5"
-                                maxlength="1" id="yellowLetters" tabIndex="7">
-                            <input type="text" autocomplete="off" class="wordleSolver-field form-control px-5"
-                                maxlength="1" id="yellowLetters" tabIndex="8">
-                            <input type="text" autocomplete="off" class="wordleSolver-field form-control px-5"
-                                maxlength="1" id="yellowLetters" tabIndex="9">
+                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
+                                id="yellowLetters" tabIndex="5">
+                            <input type="text" autocomplete="off"
+                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
+                                id="yellowLetters" tabIndex="6">
+                            <input type="text" autocomplete="off"
+                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
+                                id="yellowLetters" tabIndex="7">
+                            <input type="text" autocomplete="off"
+                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
+                                id="yellowLetters" tabIndex="8">
+                            <input type="text" autocomplete="off"
+                                class="wordleSolver-field yellowLetters form-control px-5" maxlength="1"
+                                id="yellowLetters" tabIndex="9">
                         </div>
                     </div>
                 </div>
                 <div class="form-group">
                     <label for="greyLetters" class="my-1 p-0 wordleSolver-label">Enter letters in grey below</label>
-                    <div class="col-md-6 p-0">
+                    <div class="col-md-6 p-0 wrapper">
                         <div class="d-flex">
-                            <input type="text" class="wordleSolver-field form-control px-5" maxlength="1"
+                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                 id="greyLetters" value="" autocomplete="off" tabIndex="10">
-                            <input type="text" class="wordleSolver-field form-control px-5" maxlength="1"
+                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                 id="greyLetters" value="" autocomplete="off" tabIndex="11">
-                            <input type="text" class="wordleSolver-field form-control px-5" maxlength="1"
+                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                 id="greyLetters" value="" autocomplete="off" tabIndex="12">
-                            <input type="text" class="wordleSolver-field form-control px-5" maxlength="1"
+                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                 id="greyLetters" value="" autocomplete="off" tabIndex="13">
-                            <input type="text" class="wordleSolver-field form-control px-5" maxlength="1"
+                            <input type="text" class="wordleSolver-field greyLetters form-control px-5" maxlength="1"
                                 id="greyLetters" value="" autocomplete="off" tabIndex="14">
                         </div>
                         <div class="d-flex mt-2">
                             <input type="text" autocomplete="off" tabIndex="15"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greyLetters">
+                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                             <input type="text" autocomplete="off" tabIndex="16"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greyLetters">
+                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                             <input type="text" autocomplete="off" tabIndex="17"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greyLetters">
+                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                             <input type="text" autocomplete="off" tabIndex="18"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greyLetters">
+                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                             <input type="text" autocomplete="off" tabIndex="19"
-                                class="wordleSolver-field form-control px-5" maxlength="1" id="greyLetters">
+                                class="wordleSolver-field greyLetters form-control px-5" maxlength="1" id="greyLetters">
                         </div>
                     </div>
+
+
                 </div>
+                <button type="button" data-toggle="tooltip" data-placement="top" title="Add more greyletters fields"
+                    id="addMore"><i class="bi bi-plus"></i>
+                </button>
                 <div class="form-group text-right">
                     <div class="col-md-4 p-0" style="margin: 0 0 0 auto;">
                         <button type="submit" id="wordlesolver_submit" class="btn wordlesolver-btn mt-3">Update</button>
@@ -85,11 +99,14 @@
     </div>
 </div>
 
+
+
+
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"
     integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
 <script>
     $(document).on('keypress', 'input', function (e) {
-        if (e.which === 8 || e.which === 9 || (e.which >= 65 && e.which <= 90) || e.which === 32) {
+        if (e.which === 32) {
             e.preventDefault();
             var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
 

data/assets/css/wordleSolver.css

@@ -30,6 +30,14 @@
   box-shadow: unset !important;
   border-color: #ced4da !important;
 }
+#addMore {
+  font-size: 25px;
+  background-color: transparent;
+  border: none;
+  width: 100%;
+  text-align: right;
+  padding-right: 2px;
+}
 
 .wordlesolver-btn {
   padding: 8px 25px;

data/assets/js/wordleSolver.js

@@ -13,6 +13,30 @@ let wordlesolver_submit = document.getElementById('wordlesolver_submit')
 let newWordsLength = 0
 
 let errMessage = document.querySelector('.errMessage')
+let wrapper = document.querySelector('.wrapper')
+let addMore = document.querySelector('#addMore')
+
+addMore.addEventListener('click', (e) => {
+  e.preventDefault()
+  let div = document.createElement('div')
+  div.classList.add('d-flex')
+  div.classList.add('mt-2')
+
+  for (let i = 20; i <= 24; i++) {
+    let input = document.createElement('input')
+    input.type = 'text'
+    input.setAttribute('maxlength', '1')
+    input.setAttribute('autocomplete', 'off')
+    if (i <= 24) {
+      input.setAttribute('tabIndex', i)
+    }
+    let classes = ['wordleSolver-field', 'greyLetters', 'form-control', 'px-5']
+    input.classList.add(...classes)
+    input.id = 'greyLetters'
+    div.append(input)
+    wrapper.append(div)
+  }
+})
 
 const wordleSolver = async (value, value2, value3, greenWithIndex) => {
   try {
@@ -36,6 +60,8 @@ const wordleSolver = async (value, value2, value3, greenWithIndex) => {
       wordleSolvererrorMsg.classList.add('alert-danger')
       wordleSolvererrorMsg.innerHTML = 'Sorry!! No words found'
     } else {
+      wordleSolvererrorMsg.classList.remove('alert-danger')
+      wordleSolvererrorMsg.innerHTML = ''
       wordleSolverData.innerHTML = ''
       newWordsLength = ''
       newWordsLength += data.length
@@ -86,52 +112,71 @@ const wordleSolver = async (value, value2, value3, greenWithIndex) => {
   }
 }
 
-let arr = []
-let greenWithIndex = []
 for (let g = 0; g < greenLetters.length; g++) {
   const elem = greenLetters[g]
   elem.addEventListener('input', (e) => {
     if (e.target.value) {
       e.target.classList.add('ws-fcs')
-      arr.push(e.target.value)
-      greenWithIndex.push({
-        value: e.target.value,
-        index: e.target.dataset.id,
-      })
     } else {
       e.target.classList.remove('ws-fcs')
     }
   })
 }
-
-let arr2 = []
 for (let y = 0; y < yellowLetters.length; y++) {
   const elem = yellowLetters[y]
   elem.addEventListener('input', (e) => {
     if (e.target.value) {
       e.target.classList.add('ws-fcs2')
-      arr2.push(e.target.value)
     } else {
       e.target.classList.remove('ws-fcs2')
     }
   })
 }
-
-let arr3 = []
 for (let e = 0; e < greyLetters.length; e++) {
   const elem = greyLetters[e]
   elem.addEventListener('input', (e) => {
     if (e.target.value) {
       e.target.classList.add('ws-fcs3')
-      arr3.push(e.target.value)
     } else {
       e.target.classList.remove('ws-fcs3')
     }
   })
 }
 
+const getLetters = (object) => {
+  let letters = []
+  if (typeof object === 'string') {
+    object = document.querySelectorAll(object)
+  }
+  for (let item of object) {
+    if (item.value.trim().length === 1) {
+      letters.push(item.value.toLowerCase())
+    }
+  }
+  return letters
+}
+const getIndexs = (object) => {
+  let index = []
+  if (typeof object === 'string') {
+    object = document.querySelectorAll(object)
+  }
+  for (let item of object) {
+    if (item.value.trim().length === 1) {
+      index.push({
+        value: item.value.toLowerCase(),
+        index: item.dataset.id,
+      })
+    }
+  }
+  return index
+}
+
 function handleSubmit(e) {
   e.preventDefault()
+  let greenLetter = getLetters('.greenLetters')
+  let yellowLetters = getLetters('.yellowLetters')
+  let greyLetters = getLetters('.greyLetters')
+  let greenWithIndex = getIndexs('.greenWithIndex')
   if (
     greenLetters[0].value !== '' ||
     greenLetters[1].value !== '' ||
@@ -141,13 +186,12 @@ function handleSubmit(e) {
   ) {
     errMessage.innerHTML = ''
     errMessage.classList.remove('alert-danger')
-    wordleSolver(arr, arr2, arr3, greenWithIndex)
+    wordleSolver(greenLetter, yellowLetters, greyLetters, greenWithIndex)
   } else {
     errMessage.innerHTML = 'You must enter at least 1 green letter'
     errMessage.classList.add('alert-danger')
   }
 }
-
 form.addEventListener('submit', handleSubmit)
 
 // Scrabble Point Array

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: word-games-theme
 version: !ruby/object:Gem::Version
-  version: 0.6.7
+  version: 0.6.9
 platform: ruby
 authors:
 - manpreet-appscms
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-01-16 00:00:00.000000000 Z
+date: 2022-01-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll