fix: minor fixes and missed build

JLambertazzo · Feb 25, 2024 · d110aef · d110aef
1 parent b712c8d
commit d110aef
Show file tree

Hide file tree

Showing 11 changed files with 249 additions and 193 deletions.
diff --git a/dist/easier/index.html b/dist/easier/index.html
@@ -41,7 +41,7 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="shortcut icon" href="/img/bike_ico.ico" type="image/x-icon" />
-    <title>WPG Bike Bingo</title>
+    <title>WPG Bike Bingo | Easier Bingo</title>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@@ -57,6 +57,8 @@
                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
+    <h1 class="text-2xl md:text-4xl">Easier Bingo Challenge</h1>
+    <p class="my-2 text-xs md:text-sm text-gray-400">Click a row, column, diagonal, or one of our other pre-defined routes.</p>
     <div class="flex justify-start">
           <button onclick="selectHardcoreBingo()" class="nav-btn">Hardcore Challenge</button>
           <button onclick="selectLoop('north')" class="nav-btn">N</button>
@@ -76,13 +78,13 @@
                 <th></th>
             </tr>
             <tr>
-              <th class="bingo-header"><button onclick="selectDiag('left')" class="drop-btn"><i class="material-icons">south_east</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header"><button onclick="selectDiag('right')" class="drop-btn"><i class="material-icons">south_west</i></button></th>
+              <th class="bingo-header"><button onclick="selectDiag('left')" class="drop-btn"><i class="material-icons -rotate-45">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header"><button onclick="selectDiag('right')" class="drop-btn"><i class="material-icons rotate-45">expand_more</i></button></th>
             </tr>
         </table>
     </main>

diff --git a/dist/harder/index.html b/dist/harder/index.html
@@ -41,7 +41,7 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="shortcut icon" href="/img/bike_ico.ico" type="image/x-icon" />
-    <title>WPG Bike Bingo</title>
+    <title>WPG Bike Bingo | Harder Bingo</title>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@@ -56,6 +56,8 @@
                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
+    <h1 class="text-2xl md:text-4xl">Harder Bingo Challenge</h1>
+    <p class="my-2 text-xs md:text-sm text-gray-400">Click a row, column, diagonal, or one of our other pre-defined routes.</p>
     <div class="flex justify-start">
           <button onclick="selectHardcoreBingo()" class="nav-btn">Hardcore Challenge</button>
           <button onclick="selectLoop('north')" class="nav-btn">N</button>
@@ -75,13 +77,13 @@
                 <th></th>
             </tr>
             <tr>
-              <th class="bingo-header"><button onclick="selectDiag('left')" class="drop-btn"><i class="material-icons">south_east</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header"><button onclick="selectDiag('right')" class="drop-btn"><i class="material-icons">south_west</i></button></th>
+              <th class="bingo-header"><button onclick="selectDiag('left')" class="drop-btn"><i class="material-icons -rotate-45">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header"><button onclick="selectDiag('right')" class="drop-btn"><i class="material-icons rotate-45">expand_more</i></button></th>
             </tr>
         </table>
     </main>

diff --git a/dist/help/index.html b/dist/help/index.html
@@ -41,7 +41,7 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="shortcut icon" href="/img/bike_ico.ico" type="image/x-icon" />
-    <title>WPG Bike Bingo</title>
+    <title>WPG Bike Bingo | About</title>
     <link rel="stylesheet" href="/style.css">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

diff --git a/dist/history/index.html b/dist/history/index.html
@@ -41,7 +41,7 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
     <link rel="shortcut icon" href="/img/bike_ico.ico" type="image/x-icon" />
-    <title>WPG Bike Bingo</title>
+    <title>WPG Bike Bingo | History Bingo</title>
     <link rel="stylesheet" href="/style.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <script defer src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
@@ -56,6 +56,8 @@
                   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <main class="mx-auto w-fit h-fit shadow-lg m-4 p-2 rounded-lg bg-gray-100">
+    <h1 class="text-2xl md:text-4xl">History Bingo Challenge</h1>
+    <p class="my-2 text-xs md:text-sm text-gray-400">Click a row, column, or one of our other pre-defined routes.</p>
     <div class="flex justify-start">
           <button onclick="selectHardcoreBingo()" class="nav-btn">Hardcore Challenge</button>
           <button onclick="selectLoop('north')" class="nav-btn">N</button>
@@ -76,11 +78,11 @@
             </tr>
             <tr>
               <th></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">south</i></button></th>
-              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">south</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('1')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('2')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('3')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('4')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
+              <th class="bingo-header font-light"><button onclick="selectCol('5')" class="drop-btn"><i class="material-icons">expand_more</i></button></th>
             </tr>
         </table>
     </main>

diff --git a/dist/js/route-utils.js b/dist/js/route-utils.js
@@ -7,18 +7,32 @@
  * LOADING BINGOS AND IMAGES
  * This code block runs on page load
  */
-const toCardElement = (card, index) => {
+const toCardImageWithOverlay = (card) => {
   return el(
-    "td",
-    "bingo-card",
-    { id: `card-${index}` },
-    el("img", "card-img", {
+    "div",
+    "relative",
+    {},
+    el("img", "card-img block mx-auto", {
       src: card.img,
       alt: card.name,
       width: 125,
       height: 125,
     }),
-    el("h2", "w-fit text-gray-600 text-left", {}, t(card.name))
+    el(
+      "div",
+      "bingo-overlay",
+      { src: card.img },
+      el("h2", "w-fit text-gray-50 mb-0 mx-auto", {}, t(card.name))
+    )
+  );
+};
+
+const toCardElement = (card, index) => {
+  return el(
+    "td",
+    "bingo-card",
+    { id: `card-${index}` },
+    toCardImageWithOverlay(card)
   );
 };
 
@@ -35,7 +49,7 @@ const getSelectArrow = (row) =>
         "button",
         "drop-btn",
         { onclick: `selectRow("${row}")` },
-        el("i", "material-icons", {}, t("east"))
+        el("i", "material-icons", {}, t("chevron_right"))
       )
     )
   );
@@ -57,8 +71,8 @@ const appendRow = (selector) => (row) => {
 
 document.addEventListener("DOMContentLoaded", () => {
   cards.map(toCardRow).forEach(appendRow("#bingo-container"));
-  [...document.querySelectorAll(".card-img")].forEach((el) =>
-    el.addEventListener("click", imgPopup(el.src))
+  [...document.querySelectorAll(".bingo-overlay")].forEach((el) =>
+    el.addEventListener("click", imgPopup(el.getAttribute("src")))
   );
 });
 // ======= END OF LOADING CODE =======