word-games-theme 1.2.1 → 1.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b087476092fd477b54ae7e809b08b8cdebf826d993d833408c328029394d19c6
-  data.tar.gz: f4ca462142755e207eab475258faf23242585263a280fe1fa7bfd3c7c1ea9f34
+  metadata.gz: 2ba461b64b2b6e663800468eb9d2d9be7e6028c3fd41284afe8e603a81684e6a
+  data.tar.gz: 685513c7884497a477dd24c4472f8374de4d7448c9238d86d3e2af849292730f
 SHA512:
-  metadata.gz: a148fee6488effa5163acdfd10214dc4a191c75bcf194f355eb0be6cac85bdf734f7a4d599d827ee4e0f29151bc738ec369bba611096cace35bedcabcb0a6c7b
-  data.tar.gz: 0a2979a6b7b38c47b7e866dd7f38021ae2632c335263a2072ae227c85906efa2a21642bd7d626de6ef1290a069507e825929ad810582dc5ec9c565b975f598dd
+  metadata.gz: 2d560ac8f4a765b73878c1dacdac033b049d73c63b35ffaf72f5629168fb900ec8a4c857d47ad34ab133f6e77f92634e459f125a900c361ccf8c417002347391
+  data.tar.gz: 66a70a6a0fcf24c90cc86247e7f377738fd4486bcf7d204c229a5410bbb9a6924ba328484c1897cdd6a8880f8c322584b8a788a4d1322b3b1108f9b1dedb4ba2

data/_data/wordgames/en/word-game-play.json

@@ -1,8 +1,8 @@
 {
-    "title": "Create your own wordle game, share with your friends and challenge them !",
-    "h1": "Choose a five letter word to create wordle game",
-    "h2": "Enter word and submit to get link to the game for sharing",
-    "meta": "Quickly create wordle game from your word for free and share with your friends.",
+    "title": "Make Your Own Wordle",
+    "h1": "",
+    "h2": "",
+    "meta": "Guess this wordle in 6 tries. You can also share with your friends and challenge them !",
     "featureNo": "02",
     "feature_title": "Features",
     "blogNo": "03",
@@ -11,46 +11,9 @@
     "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": ""
-        }
-    ],
     "jsfilepaths": [
-        "/assets/js/game.js"
+        "/assets/js/game.js",
+        "/assets/js/confetti.js"
     ],
     "cssfilepaths": [
         "/assets/css/game.css"

data/_includes/section/home2.html

@@ -96,7 +96,8 @@
                 </form>
                 {%- if page.wordle == 'solver' -%}
                 <h2 class="m-0 mt-4 text-center" style="font-size:16px">
-                    <a style="color:#000" href="/wordle-solver">Solve wordle quickly using our wordle solver</a>
+                    <a onclick="gtag('event', 'click', {'event_category': 'Link click', 'event_label': 'Try Wordle Solver'});"
+                        style="color:#000" href="/wordle-solver">Solve wordle quickly using our wordle solver</a>
                 </h2>
                 {%- endif -%}
             </div>

data/_includes/word-game/word-game-generator-online.html

@@ -2,11 +2,14 @@
     <div class="col-md-6 mx-auto">
         <div class="create-wordle text-center">
             <div class="wordle-game-generator">
+                <div class="alert-container hide">
+                    <span id="errorMsg"></span>
+                </div>
                 <form id="create-wordle-form">
                     <img src="/assets/images/wordle.png" alt="wordswithletters" style="width:35px; height:35px;">
-                    <h4 class="font-weight-bolder mt-3">Make your own wordle</h4>
+                    <h4 class="font-weight-bolder mt-4">Make your own wordle</h4>
                     <input autocomplete="off" type="text" class="form-control custom-word"
-                        placeholder="Enter custom word up to 5 letters?" name="custom-word" required>
+                        placeholder="Enter Up to 5 Letters?" name="custom-word" required maxlength="5">
                     <button type="submit" class="btn generate-word-game-link">Generate Link</button>
                     <span class="open-popup" data-toggle="modal" data-target="#exampleModal"></span>
                 </form>
@@ -24,12 +27,12 @@
                     <span class="times-icon">&times;</span>
                 </button>
             </div>
-            <div class="modal-body text-center py-5">
-                <h3 class="font-weight-bolder mb-2">Share this Word's Link</h3>
+            <div class="modal-body text-center" style="padding:5rem 0">
+                <h3 class="font-weight-bolder mb-4">Share this Word's Link</h3>
                 <div class="wordle-game-play-links">
                     <a style="font-size: 13px;" class="wordle-game-link"></a>
                     <br><br>
-                    <button type="button" class="btn copy-btn">Copy Link</button>
+                    <button type="button" class="btn copy-btn mt-2">Copy Link</button>
                     <!-- <button type="button" class="btn btn-primary">Play Random Word</button> -->
                 </div>
             </div>

data/_includes/word-game/word-game-play.html

@@ -1,68 +1,191 @@
 <div class="game">
     <div class="game-container">
-        <div class="game-board"></div>
-        <div class="game-keyboard my-5">
+        <div class="d-flex justify-content-center align-items-center">
+            <div style="padding-top:4px; cursor: pointer;" data-toggle="modal" data-target="#how-to-play-wordle">
+                <i style="font-size:20px" class="bi bi-question-circle"></i>
+            </div>
+            <h1 class="text-center font-weight-bolder mb-0 my-4">
+                <a class="word-generator-link" href="/word-game-generator-online"> Make your own wordle </a>
+            </h1>
+
+            <!-- <div data-toggle="modal" data-target="#exampleModal">
+                <i style="font-size:20px" class="bi bi-question-circle"></i>
+            </div> -->
+
+        </div>
+
+
+        <div class="alert-container hide">
+            <span id="errorMsg"></span>
+        </div>
+        <div class="game-board">
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+        </div>
+        <div data-keyboard class="game-keyboard mt-3">
             <div class="game-keyboard-row">
-                <div tabindex="-1" role="button" class="game-keyboard-button">Q</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">W</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">E</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">R</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">T</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button letter-absent">Y</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">U</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">I</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button letter-absent">O</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button letter-elsewhere">P</div>
+                <button role="button" class="key-btn" data-key="Q">Q</button>
+                <button role="button" class="key-btn" data-key="W">W</button>
+                <button role="button" class="key-btn" data-key="E">E</button>
+                <button role="button" class="key-btn" data-key="R">R</button>
+                <button role="button" class="key-btn" data-key="T">T</button>
+                <button role="button" class="key-btn " data-key="Y">Y</button>
+                <button role="button" class="key-btn" data-key="U">U</button>
+                <button role="button" class="key-btn" data-key="I">I</button>
+                <button role="button" class="key-btn" data-key="O">O</button>
+                <button role="button" class="key-btn" data-key="P">P</button>
             </div>
             <div class="game-keyboard-row">
-                <div tabindex="-1" role="button" class="game-keyboard-button">A</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">S</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">D</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">F</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">G</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button letter-absent">H</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">J</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">K</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">L</div>
+                <button role="button" class="key-btn" data-key="A">A</button>
+                <button role="button" class="key-btn" data-key="S">S</button>
+                <button role="button" class="key-btn" data-key="D">D</button>
+                <button role="button" class="key-btn" data-key="F">F</button>
+                <button role="button" class="key-btn" data-key="G">G</button>
+                <button role="button" class="key-btn" data-key="H">H</button>
+                <button role="button" class="key-btn" data-key="J">J</button>
+                <button role="button" class="key-btn" data-key="K">K</button>
+                <button role="button" class="key-btn" data-key="L">L</button>
             </div>
             <div class="game-keyboard-row">
-                <div tabindex="-1" role="button" class="game-keyboard-button game-keyboard-button-wide">Enter</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">Z</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">X</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">C</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">V</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">B</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button letter-absent">N</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button">M</div>
-                <div tabindex="-1" role="button" class="game-keyboard-button game-keyboard-button-wide">⌫</div>
+                <button role="button" class="key-btn backspace" data-delete>⌫</button>
+                <button role="button" class="key-btn" data-key="Z">Z</button>
+                <button role="button" class="key-btn" data-key="X">X</button>
+                <button role="button" class="key-btn" data-key="C">C</button>
+                <button role="button" class="key-btn" data-key="V">V</button>
+                <button role="button" class="key-btn" data-key="B">B</button>
+                <button role="button" class="key-btn letter-absent" data-key="N">N</button>
+                <button role="button" class="key-btn" data-key="M">M</button>
+                <button role="button" class="key-btn enter" data-enter>Enter</button>
             </div>
 
         </div>
+        <span class="open-popup" data-toggle="modal" data-target="#exampleModal"></span>
     </div>
 </div>
 
-<script src="https://code.jquery.com/jquery-3.6.0.min.js"
-    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
-
-<script>
-    let rowLetter = document.getElementsByClassName("row-letter")
-    rowLetter[0].focus()
-    $(document).on('keypress', 'input', function (e) {
-        if (e.which === 32) {
-            e.preventDefault();
-            var $next = $('[tabIndex=' + (+this.tabIndex + 1) + ']');
-
-            if (!$next.length) {
-                $next = $('[tabIndex=1]');
-            }
-            $next.focus().click();
-        }
-    });
-
-
-    function move(first, last) {
-        if (first.value.length) {
-            document.getElementById(last).focus()
-        }
-    }
-</script>
+<div class="modal fade modalWrapper" id="exampleModal">
+    <div class="modal-dialog" style="max-width:400px">
+        <div class="modal-content">
+            <div class="modal-header p-2" style="background-color: #f8f9fa;">
+                <div class="gameResult"></div>
+                <button type="button" class="close" style="position: absolute; right: 0; top:-3px;"
+                    data-dismiss="modal">
+                    <span class="times-icon">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body text-center" style="padding:2rem  0px  4rem 0">
+                <!-- <div class="iconWinLose tick"></div> -->
+                <div class="result-content">
+                    <span id="answer" style="font-size: 20px;">You guessed the word</span>
+                    <div id="result-guess-word" class="guess-word"></div>
+                </div>
+                <div class="wordle-game-play-links pt-4" style="padding:0 30px">
+                    <a class="wordle-game-restart" href="/word-game-generator-online">
+                        RESTART
+                    </a>
+                    <a class="wordle-game-share-link wordle-game-button font-weight-bolder">
+                        <img src="/assets/images/copy.svg" alt="copy-link" style="width:20px; margin:0px 5px;">
+                        Share this Wordle Link</a>
+                    <a class="wordle-game-copy-link wordle-game-button">
+                        <img src="/assets/images/copy.svg" alt="copy-link" style="width:20px; margin:0px 5px;">
+                        Challenge a friend to this word</a>
+
+                </div>
+
+                <div class="pt-4" style="font-size: 14px;">Share it with your friends</div>
+                <div class="social-sharing-icons d-flex">
+                    <a class="facebook-share-link" target="_blank">
+                        <img class="share-icon" src="/assets/images/facebooks.svg" alt="facebook-share">
+                    </a>
+                    <a class="twitter-share-link" target="_blank">
+                        <img class="share-icon" src="/assets/images/twitters.svg" alt="twitter-share">
+                    </a>
+
+                    <a class="whatsapp-share-link" data-action="share/whatsapp/share" target="_blank"><img
+                            class="share-icon" src="/assets/images/whatsapp.svg" alt="whatsapp-share"> </a>
+
+
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<div class="modal fade" id="how-to-play-wordle" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <div class="modal-dialog wordletip" style="top:20px !important">
+        <div class="modal-content">
+            <div class="modal-header px-4 p-2">
+                <h5 class="modal-title" id="exampleModalLabel">How to Play</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body p-2 px-4 py-4" style="font-size: 12px;">
+                <p>Guess the <strong>WORDLE</strong> in six tries.</p>
+                <p>Each guess must be a valid five-letter word. Hit the enter button to submit.</p>
+                <p>After each guess, the color of the tiles will change to show how close your guess was to the
+                    word.</p>
+                <div id="wordle-examples">
+                    <p><strong>Examples</strong></p>
+                    <p><span class="wordle-game-spot wordle-game-correct" title="W"></span><span
+                            class="wordle-game-spot" title="E"></span><span class="wordle-game-spot"
+                            title="A"></span><span class="wordle-game-spot" title="R"></span><span
+                            class="wordle-game-spot" title="Y"></span></p>
+                    <p>The letter <strong>W</strong> is in the word and in the correct spot.</p>
+                    <p><span class="wordle-game-spot" title="P"></span><span
+                            class="wordle-game-spot wordle-game-present" title="I"></span><span class="wordle-game-spot"
+                            title="L"></span><span class="wordle-game-spot" title="L"></span><span
+                            class="wordle-game-spot" title="S"></span></p>
+                    <p>The letter <strong>I</strong> is in the word but in the wrong spot.</p>
+                    <p><span class="wordle-game-spot" title="V"></span><span class="wordle-game-spot"
+                            title="A"></span><span class="wordle-game-spot" title="G"></span><span
+                            class="wordle-game-spot wordle-game-absent" title="U"></span><span class="wordle-game-spot"
+                            title="E"></span></p>
+                    <p>The letter <strong>U</strong> is not in the word in any spot.</p>
+                </div>
+                <p>A new WORDLE can make easily yourself any time! </p>
+
+                <div class="wordl_ani">
+                    <a style="background: #007bff;
+                    color: #fff;
+                    text-decoration: underline;
+                    padding: 14px 15px;
+                    border-radius: 5px;
+                    display: block;
+                    width: 170px;" href="/word-game-generator-online"> Make your own wordle </a>
+
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -3,6 +3,17 @@
         <div class="col-md-10 mx-auto ws">
             <div style="font-size: 15px;" class="alert errMessage" role="alert"></div>
             <form name="verify" class="forms_data">
+
+                <a href="/word-game-generator-online"
+                    onclick="gtag('event', 'click', {'event_category': 'Link click', 'event_label': 'Make Your Own Wordle'});"
+                    class="createWordleLink text-white">
+
+                    <span class="text-white">
+                        Make Your Own Wordle
+                    </span>
+
+                </a>
+
                 <div class="form-group">
                     <label for="greenLetters" class="my-1 p-0 wordleSolver-label">Enter green letters at correct
                         position</label>