Pseudo-Corp · awWhy · Jan 26, 2024 · Feb 14, 2024
diff --git a/Synergism.css b/Synergism.css
@@ -560,6 +560,10 @@ body button:active {
     width: 32px;
 }
 
+#resetrow > div {
+    margin: auto 5px auto 2px;
+}
+
 #resetinfo {
     text-align: left; /* Keeps text from bouncing around */
     font-variant-numeric: tabular-nums;
@@ -568,15 +572,6 @@ body button:active {
     white-space: pre-line;
 }
 
-#resetrewards > div {
-    display: flex;
-    align-items: center;
-}
-
-#resetrewards > div > div {
-    margin: auto 5px auto 2px;
-}
-
 #tabrow {
     text-align: center;
     width: 100%;
@@ -981,12 +976,15 @@ p#promocodeinfo {
     align-items: center;
     gap: 10px;
     min-height: 35px;
+    pointer-events: none;
 }
 
 .buildingSpacer {
     height: 35px;
 }
 
+.buttonRow > div > button { pointer-events: auto; }
+
 .buttonRow > div > p {
     margin-top: 0.25em;
 }

diff --git a/SynergismMobile.css b/SynergismMobile.css
@@ -2,18 +2,48 @@
   .mobileShow { display: unset; }
   .mobileHide { display: none; }
 
-  /* For testing: */
-  /* header { display: none; }
-  html { min-width: unset; } */
-
-  /* html { min-width: unset; } */ /* Uncomment after fixing scroll on all tabs */
+  html { min-width: unset; } /* This breaking scroll on non finished tabs */
   body { margin-bottom: 60px; }
 
-  /* Buggy: (but everything can be fixed with just adding minimum-scale=1.0 to viewport meta)
-    Doesn't fit properly with current header and html min-width;
-    Moves on scrolling and chaning tabs;
-  */
-  /* .navbar {
+  #ascensionStats { min-width: unset; }
+
+  .subHeader {
+    flex-direction: column;
+    min-width: unset;
+  }
+
+  .resetInformationContainer {
+    align-items: center;
+    margin-top: 10px;
+    width: unset;
+  }
+
+  .resetsContainer {
+    flex-direction: column;
+    align-items: center;
+    width: 100vw;
+  }
+
+  .resetsButtons {
+    justify-content: center;
+    flex-wrap: wrap;
+    row-gap: 5px;
+  }
+
+  #resetrow {
+    justify-content: center;
+    flex-wrap: wrap;
+    row-gap: 5px;
+    margin-top: 5px;
+    min-height: 32px;
+  }
+
+  #resetinfo {
+    text-align: center;
+    max-width: 90vw;
+  }
+
+  .navbar {
     align-self: normal;
     position: fixed;
     bottom: 0;
@@ -44,7 +74,7 @@
     flex-grow: 1;
   }
 
-  #tabrow button:hover { background-color: var(--hover-color); } */
+  #tabrow button:hover { background-color: var(--hover-color); }
 
   #multiplier > .desc { color: unset; }
   #accelerator > .stats { color: unset; }
@@ -64,6 +94,7 @@
   }
 
   .buttonRow {
+    width: -webkit-fill-available;
     row-gap: 6px;
     margin: 0 0 20px;
   }
@@ -76,8 +107,6 @@
       "total total toggle"
       "coins coins toggle"
       "cost cost toggle";
-    align-items: center;
-    justify-content: space-between;
     border: 2px solid #49494a;
     background-color: #121212;
     color: #49494a;
@@ -86,6 +115,7 @@
     gap: 8px 2px;
     min-width: 20em;
     transition-duration: var(--transition-extra);
+    pointer-events: auto;
   }
 
   .buttonRow > div > .desc > span:first-of-type {
@@ -104,7 +134,6 @@
     color: inherit;
     background-color: unset;
     font-size: min(1em, 20px);
-    width: unset;
     min-height: unset;
     border: none;
     padding: 0;
@@ -207,7 +236,18 @@
   .buildingPurchaseAvailable { cursor: pointer; }
   .buildingPurchaseAvailable > .buildingPurchaseBtn:hover { background-color: unset; }
 
-  .resetautomation { margin-top: 40px !important; }
+  .resetautomation {
+    text-align: center;
+    margin-top: 40px !important;
+  }
+
+  #ascendConstantUpgrades,
+  #crystalupgrades,
   #buildingtext { width: unset; }
   #taxinfo { margin: 0; }
+
+  @supports not (width: -webkit-fill-available) {
+    /* Based if browser replaces scroll, width: calc(100vw - 10px); might end up being better */
+    .buttonRow { width: 100vw; }
+  }
 }
diff --git a/index.html b/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0">
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
     <meta content="utf-8" http-equiv="encoding">
     <meta property="og:title" content="Synergism">
@@ -209,16 +209,12 @@
                         <img class="resetbtn singularity" id="singularitybtn" alt="Enter the Singularity!" src="Pictures/Default/Singularity.png" loading="lazy">
                     </div>
                     <div id="resetrow">
-                        <div id="resetrewards" style="display: block;">
-                            <div>
-                                <img id="resetofferings1" alt="Offering" src="Pictures/Default/Offering.png" style="display: none;" loading="lazy">
-                                <div id="resetofferings2" style="color: gold"></div>
-                                <img id="resetcurrency1" alt="Diamond" src="Pictures/Default/Diamond.png" style="display: none;" loading="lazy">
-                                <div id="resetcurrency2" style="color:gold"></div>
-                                <img id="resetobtainium" alt="Obtainium" src="Pictures/Default/Obtainium.png" style="display: none;" loading="lazy">
-                                <div id="resetobtainium2" style="color:pink;"></div>
-                            </div>
-                        </div>
+                        <img id="resetofferings1" alt="Offering" src="Pictures/Default/Offering.png" style="display: none;" loading="lazy">
+                        <div id="resetofferings2" style="color: gold"></div>
+                        <img id="resetcurrency1" alt="Diamond" src="Pictures/Default/Diamond.png" style="display: none;" loading="lazy">
+                        <div id="resetcurrency2" style="color:gold"></div>
+                        <img id="resetobtainium" alt="Obtainium" src="Pictures/Default/Obtainium.png" style="display: none;" loading="lazy">
+                        <div id="resetobtainium2" style="color:pink;"></div>
                     </div>
                 </div>
                 <div id="resetinfo"></div>

diff --git a/src/EventListeners.ts b/src/EventListeners.ts
@@ -128,7 +128,6 @@ import {
   upgradedescriptions
 } from './Upgrades'
 import { Globals as G } from './Variables'
-import { isLargeScreen } from './Utility'
 
 /* STYLE GUIDE */
 /*
@@ -244,28 +243,16 @@ export const generateEventHandlers = () => {
   }
   // Part 3: Building Purchasers + Upgrades
   // Accelerator, Multiplier, Accelerator Boost
-  DOMCacheGetOrSet('buyaccelerator').addEventListener('click', () => buyAccelerator())
-  DOMCacheGetOrSet('accelerator').addEventListener('click', () => {
-    if (isLargeScreen()) return
-    buyAccelerator()
-  })
-  DOMCacheGetOrSet('buymultiplier').addEventListener('click', () => buyMultiplier())
-  DOMCacheGetOrSet('multiplier').addEventListener('click', () => {
-    if (isLargeScreen()) return
-    buyMultiplier()
-  })
-  DOMCacheGetOrSet('buyacceleratorboost').addEventListener('click', () => boostAccelerator())
-  DOMCacheGetOrSet('acceleratorboost').addEventListener('click', () => {
-    if (isLargeScreen()) return
-    boostAccelerator()
-  })
+  DOMCacheGetOrSet('accelerator').addEventListener('click', () => buyAccelerator())
+  DOMCacheGetOrSet('multiplier').addEventListener('click', () => buyMultiplier())
+  DOMCacheGetOrSet('acceleratorboost').addEventListener('click', () => boostAccelerator())
 
   // Coin, Diamond and Mythos Buildings
   const buildingTypesAlternate2 = ['coin', 'diamond', 'mythos']
   const buildingTypesAlternate3 = ['Coin', 'Diamonds', 'Mythos'] as const // TODO: A cleaner way to implement this dumb shit
   for (let index = 0; index < 3; index++) {
     for (let index2 = 1; index2 <= 5; index2++) {
-      DOMCacheGetOrSet(`buy${buildingTypesAlternate2[index]}${index2}`).addEventListener(
+      DOMCacheGetOrSet(`${buildingTypesAlternate2[index]}${index2}`).addEventListener(
         'click',
         () =>
           buyProducer(
@@ -274,14 +261,6 @@ export const generateEventHandlers = () => {
             index === 0 ? index2 : index2 * (index2 + 1) / 2
           )
       )
-      DOMCacheGetOrSet(`${buildingTypesAlternate2[index]}${index2}`).addEventListener('click', () => {
-        if (isLargeScreen()) return
-        buyProducer(
-          ordinals[index2 as OneToFive],
-          buildingTypesAlternate3[index],
-          index === 0 ? index2 : index2 * (index2 + 1) / 2
-        )
-      })
     }
   }
 
@@ -293,26 +272,18 @@ export const generateEventHandlers = () => {
 
   // Particle Buildings
   for (let index = 0; index < 5; index++) {
-    DOMCacheGetOrSet(`buyparticles${index + 1}`).addEventListener('click', () =>
+    DOMCacheGetOrSet(`particles${index + 1}`).addEventListener('click', () =>
       buyParticleBuilding(
         index + 1 as OneToFive
       ))
-    DOMCacheGetOrSet(`particles${index + 1}`).addEventListener('click', () => {
-      if (isLargeScreen()) return
-      buyParticleBuilding(index + 1 as OneToFive)
-    })
   }
 
   // Tesseract Buildings
   for (let index = 0; index < 5; index++) {
-    DOMCacheGetOrSet(`buyTesseracts${index + 1}`).addEventListener(
+    DOMCacheGetOrSet(`tesseracts${index + 1}`).addEventListener(
       'click',
       () => buyTesseractBuilding(index + 1 as OneToFive)
     )
-    DOMCacheGetOrSet(`tesseracts${index + 1}`).addEventListener('click', () => {
-      if (isLargeScreen()) return
-      buyTesseractBuilding(index + 1 as OneToFive)
-    })
     DOMCacheGetOrSet(`tesseractAutoToggle${index + 1}`).addEventListener('click', (event: MouseEvent) => {
       event.stopPropagation()
       toggleAutoTesseracts(index + 1)

diff --git a/src/Toggles.ts b/src/Toggles.ts
@@ -21,7 +21,6 @@ export const toggleSettings = (toggle: HTMLElement) => {
     player.toggles[+toggleId] = true
   }
   const format = toggle.getAttribute('format')
-  const statusData = toggle.dataset.status
 
   if (format === '$' || format === '[$]') {
     const text = player.toggles[+toggleId] ? i18next.t('general.on') : i18next.t('general.off')
@@ -45,7 +44,7 @@ export const toggleSettings = (toggle: HTMLElement) => {
       ? i18next.t('general.autoOnBracket')
       : i18next.t('general.autoOffBracket')
   }
-  if (statusData !== undefined) {
+  if (toggle.dataset.status !== undefined) {
     toggle.dataset.status = player.toggles[+toggleId] ? 'on' : 'off'
   } else {
     toggle.style.border = `2px solid ${player.toggles[+toggleId] ? 'green' : 'red'}`
@@ -213,7 +212,6 @@ export const toggleauto = () => {
   for (const toggle of toggles) {
     const format = toggle.getAttribute('format')
     const toggleId = toggle.getAttribute('toggleId') ?? 1
-    const statusData = toggle.dataset.status
 
     if (format === '$') {
       const text = player.toggles[+toggleId] ? i18next.t('general.on') : i18next.t('general.off')
@@ -238,7 +236,7 @@ export const toggleauto = () => {
         : i18next.t('general.autoOffBracket')
     }
 
-    if (statusData !== undefined) {
+    if (toggle.dataset.status !== undefined) {
       toggle.dataset.status = player.toggles[+toggleId] ? 'on' : 'off'
     } else {
       toggle.style.border = `2px solid ${player.toggles[+toggleId] ? 'green' : 'red'}`

diff --git a/src/Utility.ts b/src/Utility.ts
@@ -170,8 +170,6 @@ export function limitRange (number: number, min: number, max: number): number {
   return number
 }
 
-export const isLargeScreen = () => window.innerWidth > 767 && window.screen.width > 767
-
 export const createDeferredPromise = <T>() => {
   let resolve!: (unknown: T) => void
   let reject!: (err: Error) => void