Merge pull request #20 from JLambertazzo/feature/route-distance

Add bingo distances to Map It button
JLambertazzo · Jan 11, 2024 · f353832 · f353832
2 parents d7df1a7 + cbe2ac6
commit f353832
Show file tree

Hide file tree

Showing 20 changed files with 392 additions and 412 deletions.
diff --git a/dist/easier/index.html b/dist/easier/index.html
@@ -60,7 +60,7 @@
         </table>
     </main>
     <div class="sticky bottom-0 right-0">
-        <button id="map-button" disabled class="absolute right-8 bottom-8 w-16 h-16 sm:w-24 sm:h-24 bg-blue-700 active:bg-blue-800 shadow-xl hover:shadow-lg active:shadow-sm text-gray-100 rounded-full text-base font-light sm:text-2xl sm:font-bold disabled:bg-gray-400 disabled:text-gray-600 disabled:opacity-40 disabled:border-dashed border-none border-gray-600 border-2 tracking-tighter">Map It</button>
+        <button id="map-button" disabled class="absolute right-8 bottom-8 w-16 h-16 sm:w-24 sm:h-24 bg-blue-700 active:bg-blue-800 shadow-xl hover:shadow-lg active:shadow-sm text-gray-100 rounded-full text-base font-light sm:text-2xl sm:font-bold disabled:bg-gray-400 disabled:text-gray-600 disabled:opacity-40 disabled:border-dashed border-none border-gray-600 border-2 tracking-tighter"><div class="flex flex-col"><span>Map It</span><span id="distance-txt" class="text-xs font-extralight sm:font-light sm:text-sm"></span></div></button>
     </div>
 </body>
 </html>
diff --git a/dist/easier/routes.js b/dist/easier/routes.js
@@ -1,20 +1,20 @@
 const routes = [
-    {ids: [1,2,3,4,5], url: 'https://t.ly/pGrv'},
-    {ids: [6,7,8,9,10], url: 'https://t.ly/fyJB'},
-    {ids: [11,12,13,14,15], url: 'https://t.ly/R2AH7'},
-    {ids: [16,17,18,19,20], url: 'https://t.ly/OQl7'},
-    {ids: [21,22,23,24,25], url: 'https://t.ly/3l1w'},
-    {ids: [1,6,11,16,21], url: 'https://t.ly/5bsF'},
-    {ids: [2,7,12,17,22], url: 'https://t.ly/YgcA'},
-    {ids: [3,8,13,18,23], url: 'https://t.ly/PNBp'},
-    {ids: [4,9,14,19,24], url: 'https://t.ly/4scx'},
-    {ids: [5,10,15,20,25], url: 'https://t.ly/a2uY'},
-    {ids: [1,7,13,19,25], url: 'https://t.ly/n0uj'},
-    {ids: [5,9,13,17,21], url: 'https://t.ly/yRjz'},
-    {ids: [1,2,3,6,8,11,12,13], url: 'https://t.ly/sHLy'},
-    {ids: [3,4,5,8,10,13,14,15], url: 'https://t.ly/erR8'},
-    {ids: [12,13,17,18,19,22,23,24], url: 'https://t.ly/LhWq'},
-    {ids: [11,12,13,16,18,21,22,23], url: 'https://t.ly/G4FH'}
+    {ids: [1,2,3,4,5], url: 'https://t.ly/pGrv', dist: '30.3 km'},
+    {ids: [6,7,8,9,10], url: 'https://t.ly/fyJB', dist: '24.43 km'},
+    {ids: [11,12,13,14,15], url: 'https://t.ly/R2AH7', dist: '14.57 km'},
+    {ids: [16,17,18,19,20], url: 'https://t.ly/OQl7', dist: '27.1 km'},
+    {ids: [21,22,23,24,25], url: 'https://t.ly/3l1w', dist: '41.9 km'},
+    {ids: [1,6,11,16,21], url: 'https://t.ly/5bsF', dist: '30.2 km'},
+    {ids: [2,7,12,17,22], url: 'https://t.ly/YgcA', dist: '24.67 km'},
+    {ids: [3,8,13,18,23], url: 'https://t.ly/PNBp', dist: '24.44 km'},
+    {ids: [4,9,14,19,24], url: 'https://t.ly/4scx', dist: '26 km'},
+    {ids: [5,10,15,20,25], url: 'https://t.ly/a2uY', dist: '25.8 km'},
+    {ids: [1,7,13,19,25], url: 'https://t.ly/n0uj', dist: '34.2 km'},
+    {ids: [5,9,13,17,21], url: 'https://t.ly/yRjz', dist: '26.4 km'},
+    {ids: [1,2,3,6,8,11,12,13], url: 'https://t.ly/sHLy', dist: '34.9 km'},
+    {ids: [3,4,5,8,10,13,14,15], url: 'https://t.ly/erR8', dist: '52.1 km'},
+    {ids: [12,13,17,18,19,22,23,24], url: 'https://t.ly/LhWq', dist: '31.4 km'},
+    {ids: [11,12,13,16,18,21,22,23], url: 'https://t.ly/G4FH', dist: '37.3 km'}
 ]
 
-const hardcodeRoute = {ids: new Array(25).fill(0).map((_, i) => i + 1), url: 'https://bit.ly/wpg-bingo-hardcore-easier'}
+const hardcodeRoute = {ids: new Array(25).fill(0).map((_, i) => i + 1), url: 'https://bit.ly/wpg-bingo-hardcore-easier', dist: '131 km'}
diff --git a/dist/easier/script.js b/dist/easier/script.js
@@ -28,11 +28,12 @@ const getRandomBingoIds = () => routes[Math.floor(Math.random() * routes.length)
 const clearSelectedCards = () =>
   document.querySelectorAll('.bingo-card').forEach((card) => card.classList.remove('bingo-selected-card'))
 
-const applySelectedRoute = ({ids, url}) => {
+const applySelectedRoute = ({ids, url, dist}) => {
   ids.forEach((id) => {
       document.querySelector(`#card-${id}`).classList.add('bingo-selected-card')
   })
   document.querySelector('#map-button').onclick = () => window.open(url, '_blank')
+  document.querySelector('#distance-txt').innerText = dist
 }
 
 const enableMapButton = () => {

diff --git a/dist/harder/index.html b/dist/harder/index.html
@@ -60,7 +60,7 @@
         </table>
     </main>
     <div class="sticky bottom-0 right-0">
-        <button id="map-button" disabled class="absolute right-8 bottom-8 w-16 h-16 sm:w-24 sm:h-24 bg-blue-700 active:bg-blue-800 shadow-xl hover:shadow-lg active:shadow-sm text-gray-100 rounded-full text-base font-light sm:text-2xl sm:font-bold disabled:bg-gray-400 disabled:text-gray-600 disabled:opacity-40 disabled:border-dashed border-none border-gray-600 border-2 tracking-tighter">Map It</button>
+        <button id="map-button" disabled class="absolute right-8 bottom-8 w-16 h-16 sm:w-24 sm:h-24 bg-blue-700 active:bg-blue-800 shadow-xl hover:shadow-lg active:shadow-sm text-gray-100 rounded-full text-base font-light sm:text-2xl sm:font-bold disabled:bg-gray-400 disabled:text-gray-600 disabled:opacity-40 disabled:border-dashed border-none border-gray-600 border-2 tracking-tighter"><div class="flex flex-col"><span>Map It</span><span id="distance-txt" class="text-xs font-extralight sm:font-light sm:text-sm"></span></div></button>
     </div>
 </body>
 </html>
diff --git a/dist/harder/routes.js b/dist/harder/routes.js
@@ -1,21 +1,21 @@
 const routes = [
-    {ids: [1,2,3,4,5], url: 'https://bit.ly/wpg-bingo-first-row'},
-    {ids: [6,7,8,9,10], url: 'https://bit.ly/wpg-bingo-second-row'},
-    {ids: [11,12,13,14,15], url: 'https://bit.ly/wpg-bingo-third-row'},
-    {ids: [16,17,18,19,20], url: 'https://bit.ly/wpg-bingo-fourth-row'},
-    {ids: [21,22,23,24,25], url: 'https://bit.ly/wpg-bingo-fifth-row'},
-    {ids: [1,6,11,16,21], url: 'https://bit.ly/wpg-bingo-first-column'},
-    {ids: [2,7,12,17,22], url: 'https://bit.ly/wpg-bingo-second-column'},
-    {ids: [3,8,13,18,23], url: 'https://bit.ly/wpg-bingo-third-column'},
-    {ids: [4,9,14,19,24], url: 'https://bit.ly/wpg-bingo-fourth-column'},
-    {ids: [5,10,15,20,25], url: 'https://bit.ly/wpg-bingo-fifth-column-fix'},
-    {ids: [1,7,13,19,25], url: 'https://bit.ly/wpg-bingo-diagonal-left'},
-    {ids: [5,9,13,17,21], url: 'https://bit.ly/wpg-bingo-diagonal-right-fixed'},
-    {ids: [15], url: 'https://bit.ly/wpg-bingo-west-loop'},
-    {ids: [13,22,23], url: 'https://bit.ly/wpg-bingo-north-loop'},
-    {ids: [22], url: 'https://bit.ly/wpg-bingo-east-loop'},
-    {ids: [2,8,9,11,13], url: 'https://bit.ly/wpg-bingo-south-loop'},
-    {ids: [3,5], url: 'https://bit.ly/wpg-bingo-fountain-uni-loop'},
+    {ids: [1,2,3,4,5], url: 'https://bit.ly/wpg-bingo-first-row', dist: '30.8 km'},
+    {ids: [6,7,8,9,10], url: 'https://bit.ly/wpg-bingo-second-row', dist: '17.26 km'},
+    {ids: [11,12,13,14,15], url: 'https://bit.ly/wpg-bingo-third-row', dist: '21.29 km'},
+    {ids: [16,17,18,19,20], url: 'https://bit.ly/wpg-bingo-fourth-row', dist: '18.34 km'},
+    {ids: [21,22,23,24,25], url: 'https://bit.ly/wpg-bingo-fifth-row', dist: '31.1 km'},
+    {ids: [1,6,11,16,21], url: 'https://bit.ly/wpg-bingo-first-column', dist: '20.41 km'},
+    {ids: [2,7,12,17,22], url: 'https://bit.ly/wpg-bingo-second-column', dist: '20.18 km'},
+    {ids: [3,8,13,18,23], url: 'https://bit.ly/wpg-bingo-third-column', dist: '29.3 km'},
+    {ids: [4,9,14,19,24], url: 'https://bit.ly/wpg-bingo-fourth-column', dist: '45.3 km'},
+    {ids: [5,10,15,20,25], url: 'https://bit.ly/wpg-bingo-fifth-column-fix', dist: '30.5 km'},
+    {ids: [1,7,13,19,25], url: 'https://bit.ly/wpg-bingo-diagonal-left', dist: '27.3 km'},
+    {ids: [5,9,13,17,21], url: 'https://bit.ly/wpg-bingo-diagonal-right-fixed', dist: '26.5 km'},
+    {ids: [15], url: 'https://bit.ly/wpg-bingo-west-loop', dist: '27.1 km'},
+    {ids: [13,22,23], url: 'https://bit.ly/wpg-bingo-north-loop', dist: '25.1 km'},
+    {ids: [22], url: 'https://bit.ly/wpg-bingo-east-loop', dist: '19.07 km'},
+    {ids: [2,8,9,11,13], url: 'https://bit.ly/wpg-bingo-south-loop', dist: '32.4 km'},
+    {ids: [3,5], url: 'https://bit.ly/wpg-bingo-fountain-uni-loop', dist: '21.26 km'},
 ]
 
-const hardcodeRoute = {ids: new Array(25).fill(0).map((_, i) => i + 1), url: 'https://bit.ly/wpg-bingo-harder-hardcore-fix'}
+const hardcodeRoute = {ids: new Array(25).fill(0).map((_, i) => i + 1), url: 'https://bit.ly/wpg-bingo-harder-hardcore-fix', dist: '137 km'}
diff --git a/dist/harder/script.js b/dist/harder/script.js
@@ -28,11 +28,12 @@ const getRandomBingoIds = () => routes[Math.floor(Math.random() * routes.length)
 const clearSelectedCards = () =>
     document.querySelectorAll('.bingo-card').forEach((card) => card.classList.remove('bingo-selected-card'))
 
-const applySelectedRoute = ({ids, url}) => {
+const applySelectedRoute = ({ids, url, dist}) => {
     ids.forEach((id) => {
         document.querySelector(`#card-${id}`).classList.add('bingo-selected-card')
     })
     document.querySelector('#map-button').onclick = () => window.open(url, '_blank')
+    document.querySelector('#distance-txt').innerText = dist
 }
 
 const enableMapButton = () => {

diff --git a/dist/history/index.html b/dist/history/index.html
@@ -60,6 +60,6 @@
         </table>
     </main>
     <div class="sticky bottom-0 right-0">
-        <button id="map-button" disabled class="absolute right-8 bottom-8 w-16 h-16 sm:w-24 sm:h-24 bg-blue-700 active:bg-blue-800 shadow-xl hover:shadow-lg active:shadow-sm text-gray-100 rounded-full text-base font-light sm:text-2xl sm:font-bold disabled:bg-gray-400 disabled:text-gray-600 disabled:opacity-40 disabled:border-dashed border-none border-gray-600 border-2 tracking-tighter">Map It</button>
+        <button id="map-button" disabled class="absolute right-8 bottom-8 w-16 h-16 sm:w-24 sm:h-24 bg-blue-700 active:bg-blue-800 shadow-xl hover:shadow-lg active:shadow-sm text-gray-100 rounded-full text-base font-light sm:text-2xl sm:font-bold disabled:bg-gray-400 disabled:text-gray-600 disabled:opacity-40 disabled:border-dashed border-none border-gray-600 border-2 tracking-tighter"><div class="flex flex-col"><span>Map It</span><span id="distance-txt" class="text-xs font-extralight sm:font-light sm:text-sm"></span></div></button>
 </body>
 </html>
diff --git a/dist/history/routes.js b/dist/history/routes.js
@@ -1,20 +1,20 @@
 const routes = [
-    {ids: [1,2,3,4,5], url: 'https://bit.ly/history-r1'},
-    {ids: [6,7,8,9,10], url: 'https://bit.ly/history-r2'},
-    {ids: [11,12,13,14,15], url: 'https://bit.ly/history-r3-fix'},
-    {ids: [16,17,18,19,20], url: 'https://bit.ly/history-r4'},
-    {ids: [21,22,23,24,25], url: 'https://bit.ly/history-r5'},
-    {ids: [26,27,28,29,30], url: 'https://bit.ly/history-r6'},
-    {ids: [1,6,11,16,21,26], url: 'https://bit.ly/history-c1'},
-    {ids: [2,7,12,17,22,27], url: 'https://bit.ly/history-c2'},
-    {ids: [3,8,13,18,23,28], url: 'https://bit.ly/history-c3'},
-    {ids: [4,9,14,19,24,29], url: 'https://bit.ly/history-c4'},
-    {ids: [5,10,15,20,25,30], url: 'https://bit.ly/history-c5'},
-    {ids: [7,12,8,18,13], url: 'https://bit.ly/history-central-loop'},
-    {ids: [8,16,21,26,27], url: 'https://bit.ly/history-east-loop'},
-    {ids: [1,6,11,17,22,8], url: 'https://bit.ly/history-southeast-loop'},
-    {ids: [14,9,15,20], url: 'https://bit.ly/history-west-loop'},
-    {ids: [28,29,23,8,16,27], url: 'https://bit.ly/history-north-loop'}
+    {ids: [1,2,3,4,5], url: 'https://bit.ly/history-r1', dist: "19.33 km"},
+    {ids: [6,7,8,9,10], url: 'https://bit.ly/history-r2', dist: "37.8 km"},
+    {ids: [11,12,13,14,15], url: 'https://bit.ly/history-r3-fix', dist: "30 km"},
+    {ids: [16,17,18,19,20], url: 'https://bit.ly/history-r4', dist: "13.69 km"},
+    {ids: [21,22,23,24,25], url: 'https://bit.ly/history-r5', dist: "31.4 km"},
+    {ids: [26,27,28,29,30], url: 'https://bit.ly/history-r6', dist: "32.7 km"},
+    {ids: [1,6,11,16,21,26], url: 'https://bit.ly/history-c1', dist: "31.4 km"},
+    {ids: [2,7,12,17,22,27], url: 'https://bit.ly/history-c2', dist: "28.1 km"},
+    {ids: [3,8,13,18,23,28], url: 'https://bit.ly/history-c3', dist: "32.2 km"},
+    {ids: [4,9,14,19,24,29], url: 'https://bit.ly/history-c4', dist: "54.3 km"},
+    {ids: [5,10,15,20,25,30], url: 'https://bit.ly/history-c5', dist: "33.2 km"},
+    {ids: [7,12,8,18,13], url: 'https://bit.ly/history-central-loop', dist: "7.25 km"},
+    {ids: [8,16,21,26,27], url: 'https://bit.ly/history-east-loop', dist: "36.5 km"},
+    {ids: [1,6,11,17,22,8], url: 'https://bit.ly/history-southeast-loop', dist: "29.8 km"},
+    {ids: [14,9,15,20], url: 'https://bit.ly/history-west-loop', dist: "25.7 km"},
+    {ids: [28,29,23,8,16,27], url: 'https://bit.ly/history-north-loop', dist: "23.19 km"}
 ]
 
-const hardcodeRoute = {ids: new Array(30).fill(0).map((_, i) => i + 1), url: 'https://bit.ly/history-hardcore'}
+const hardcodeRoute = {ids: new Array(30).fill(0).map((_, i) => i + 1), url: 'https://bit.ly/history-hardcore', dist: "142 km"}
diff --git a/dist/history/script.js b/dist/history/script.js
@@ -28,11 +28,12 @@ const getRandomBingoIds = () => routes[Math.floor(Math.random() * routes.length)
 const clearSelectedCards = () =>
     document.querySelectorAll('.bingo-card').forEach((card) => card.classList.remove('bingo-selected-card'))
 
-const applySelectedRoute = ({ids, url}) => {
+const applySelectedRoute = ({ids, url, dist}) => {
     ids.forEach((id) => {
         document.querySelector(`#card-${id}`).classList.add('bingo-selected-card')
     })
     document.querySelector('#map-button').onclick = () => window.open(url, '_blank')
+    document.querySelector('#distance-txt').innerText = dist
 }
 
 const enableMapButton = () => {