improved talisman, legacy image fix

Synergism.css

@@ -795,6 +795,20 @@ p#buildinghotkeys2 {
     min-width: 80px;
 }
 
+.upgradesTitle {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+button.currency-icon {
+    background-color: inherit;
+}
+
+#coinupgradestable {
+    display: block;
+}
+
 #shoptogglecoin { grid-column-start: 1; }
 #shoptoggleprestige { grid-column-start: 2; }
 #shoptoggletranscend { grid-column-start: 3; }
@@ -1468,7 +1482,6 @@ img.runeTypeElement:hover {
 
 .talismanContainer {
     flex-direction: column;
-    min-width: 11%;
     min-width: 102px;
     align-items: center;
     white-space: nowrap;
@@ -1478,7 +1491,13 @@ img.runeTypeElement:hover {
 .talismanIcon {
     width: 64px;
     border: 4px solid white;
+    background-color: var(--button-color);
     cursor: pointer;
+    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+}
+
+.talismanIcon:hover {
+    background-color: var(--hover-color);
 }
 
 .talismanLevel {
@@ -1492,9 +1511,9 @@ img.runeTypeElement:hover {
     max-width: 140px;
     color: plum;
     border: 2px solid white;
-    left: 135px;
-    top: 70px;
-    transform: translate(-100%);
+    left: 70px;
+    top: 75px;
+    transform: translate(-50%);
 }
 
 #talismanEffect,
@@ -2956,15 +2975,20 @@ p#ascendHotKeys {
     text-align: center;
 }
 
-#campaignsIcons img {
+.campaignIcon {
     width: 48px;
     height: 48px;
     font-size: 0;
     cursor: pointer;
 }
 
-#campaignsIcons img:hover {
-    background-color: var(--hover-color);
+.campaignIcon.green-background:hover {
+    background-color: color-mix(in srgb, color-mix(in srgb, var(--hover-color) 75%, white), var(--green-text-color));
+}
+
+.campaignIcon:hover {
+    background-color: color-mix(in srgb, var(--hover-color) 50%, var(--button-color));
+    filter: brightness(1.2);
 }
 
 #campaignsDescriptions {
@@ -3749,7 +3773,6 @@ header #obtainiumDisplay { color: pink; }
 .octeractUpgrade,
 .singularityChallenge {
     font-size: 0;
-    cursor: pointer;
 }
 
 .ambrosiaLoadoutBtn {
@@ -3817,12 +3840,28 @@ header #obtainiumDisplay { color: pink; }
     to { transform: rotate(360deg); }
 }
 
-.singularityUpgrade > img,
-.octeractUpgrade > img,
 .singularityChallenge img {
     cursor: pointer;
 }
 
+.upgradeMaximized {
+    filter: brightness(0.6);
+}
+
+.upgradeLocked {
+    filter: grayscale(0.9) brightness(0.5);
+}
+
+.upgradeSoftCapped {
+    filter: invert(0.1) brightness(1.2) saturate(2);
+    cursor: pointer;
+}
+
+.upgradeAvailable {
+    filter: invert(0.1) brightness(1.1) saturate(1.2);
+    cursor: pointer;
+}
+
 #singularityInfo {
     display: grid;
     grid-template-columns: repeat(2, auto);
@@ -4533,7 +4572,7 @@ form input:hover {
     grid-template-columns: repeat(6, 15%);
     grid-template-rows: repeat(3, 15%);
     column-gap: 10px;
-    row-gap: 64px;
+    row-gap: 48px;
     margin: 0;
     width: 38%;
     padding-top: 15px;
@@ -4544,8 +4583,14 @@ form input:hover {
     position: relative;
     height: 64px;
     width: 64px;
-    background: #222;
+    background-color: var(--button-color);
     place-self: center;
+    transition: background-color var(--transition-extra), border-color var(--transition-extra);
+    cursor: pointer;
+}
+
+#upgradeGrid > div:hover {
+    background-color: var(--hover-color);
 }
 
 #upgradeGrid > div > p {
@@ -4566,7 +4611,7 @@ form input:hover {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    border-radius: 50%;
+    clip-path: circle(50%);
     width: 70%;
 }
 
@@ -4608,9 +4653,9 @@ form input:hover {
 
 #pseudoCoinUpgradeDescription {
     display: grid;
-    height: 192px;
+    min-height: 192px;
     grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: 192px;
+    grid-template-rows: auto;
     width: 100%;
 }
 

src/Campaign.ts

@@ -1516,9 +1516,9 @@ export const campaignIconHTMLUpdates = () => {
 export const campaignIconHTMLUpdate = (key: CampaignKeys) => {
   const icon = document.querySelector<HTMLElement>(`#campaignIconGrid > #${key}CampaignIcon`)!
   if (!campaignDatas[key].unlockRequirement()) {
-    icon.style.display = 'none'
+    icon.style.visibility = 'hidden'
   } else {
-    icon.style.display = 'block'
+    icon.style.visibility = 'visible'
   }
 
   icon.classList.remove('green-background', 'purple-background')
@@ -1689,19 +1689,21 @@ export const campaignTokenRewardHTMLUpdate = () => {
       tokenIcon.classList.add('campaignTokenRewardIcon')
 
       if (typeof value.reward() === 'string') {
-        tokenIcon.onclick = () => {
+        tokenIcon.addEventListener('mouseenter', () => {
           DOMCacheGetOrSet('campaignTokenRewardText').innerHTML = i18next.t(`campaigns.tokens.rewardTexts.${key}`, {
             reward: value.reward()
           })
         }
+        )
       } else {
-        tokenIcon.onclick = () => {
+        tokenIcon.addEventListener('mouseenter', () => {
           const reward = value.reward() as Partial<Record<CampaignTokenRewardNames, string>>
           DOMCacheGetOrSet('campaignTokenRewardText').innerHTML = i18next.t(
             `campaigns.tokens.rewardTexts.${key}`,
             reward
           )
         }
+        )
       }
 
       DOMCacheGetOrSet('campaignTokenRewardIcons').appendChild(tokenIcon)

src/EventListeners.ts

@@ -467,7 +467,10 @@ export const generateEventHandlers = () => {
   buyTalismanAll.addEventListener('click', () => buyAllTalismanResources())
 
   for (let index = 0; index < 7; index++) {
-    DOMCacheGetOrSet(`talisman${index + 1}`).addEventListener('click', () => showTalismanEffect(index))
+    const iconTalisman = DOMCacheGetOrSet(`talisman${index + 1}`)
+    iconTalisman.addEventListener('mouseover', () => showTalismanEffect(index))
+    iconTalisman.addEventListener('focus', () => showTalismanEffect(index))
+    iconTalisman.addEventListener('click', () => showTalismanEffect(index))
 
     const levelTalisman = DOMCacheGetOrSet(`leveluptalisman${index + 1}`)
     levelTalisman.addEventListener('mouseover', () => showTalismanPrices(index))

src/UpdateVisuals.ts

@@ -1465,23 +1465,27 @@ export const visualUpdateSingularity = () => {
       const singItem = player.singularityUpgrades[key]
       const el = DOMCacheGetOrSet(`${String(key)}`)
       if (
+        !val
+      ) {
+        el.classList.value = ''
+      } else if (
         singItem.maxLevel !== -1
         && singItem.level >= singItem.computeMaxLevel()
       ) {
-        el.style.filter = val ? 'brightness(.9)' : 'none'
+        el.classList.value = 'upgradeMaximized'
       } else if (
         singItem.getCostTNL() > player.goldenQuarks
         || player.singularityCount < singItem.minimumSingularity
       ) {
-        el.style.filter = val ? 'grayscale(.9) brightness(.8)' : 'none'
+        el.classList.value = 'upgradeLocked'
       } else if (
         singItem.maxLevel === -1
         || singItem.level < singItem.computeMaxLevel()
       ) {
         if (singItem.freeLevels > singItem.level) {
-          el.style.filter = val ? 'blur(1px) invert(.9) saturate(200)' : 'none'
+          el.classList.value = 'upgradeSoftCapped'
         } else {
-          el.style.filter = val ? 'invert(.9) brightness(1.1)' : 'none'
+          el.classList.value = 'upgradeAvailable'
         }
       }
     }
@@ -1494,15 +1498,19 @@ export const visualUpdateSingularity = () => {
     for (const key of keys) {
       const octItem = player.octeractUpgrades[key]
       const el = DOMCacheGetOrSet(`${String(key)}`)
-      if (octItem.maxLevel !== -1 && octItem.level >= octItem.maxLevel) {
-        el.style.filter = val ? 'brightness(.9)' : 'none'
+      if (
+        !val
+      ) {
+        el.classList.value = ''
+      } else if (octItem.maxLevel !== -1 && octItem.level >= octItem.maxLevel) {
+        el.classList.value = 'upgradeMaximized'
       } else if (octItem.getCostTNL() > player.wowOcteracts) {
-        el.style.filter = val ? 'grayscale(.9) brightness(.8)' : 'none'
+        el.classList.value = 'upgradeLocked'
       } else if (octItem.maxLevel === -1 || octItem.level < octItem.maxLevel) {
         if (octItem.freeLevels > octItem.level) {
-          el.style.filter = val ? 'blur(2px) invert(.9) saturate(200)' : 'none'
+          el.classList.value = 'upgradeSoftCapped'
         } else {
-          el.style.filter = val ? 'invert(.9) brightness(1.1)' : 'none'
+          el.classList.value = 'upgradeAvailable'
         }
       }
     }