diff --git a/Pictures/Legacy/ExaltChalLimitedAscensions.png b/Pictures/Legacy/ExaltChalLimitedAscensions.png index ac8bdfbc5..895e34211 100644 Binary files a/Pictures/Legacy/ExaltChalLimitedAscensions.png and b/Pictures/Legacy/ExaltChalLimitedAscensions.png differ diff --git a/Pictures/Legacy/ExaltChalNoOcteracts.png b/Pictures/Legacy/ExaltChalNoOcteracts.png index fb8da29b5..7a0d9a102 100644 Binary files a/Pictures/Legacy/ExaltChalNoOcteracts.png and b/Pictures/Legacy/ExaltChalNoOcteracts.png differ diff --git a/Pictures/Legacy/ExaltChalOneChallengeCap.png b/Pictures/Legacy/ExaltChalOneChallengeCap.png index 57accaf96..661c18bcd 100644 Binary files a/Pictures/Legacy/ExaltChalOneChallengeCap.png and b/Pictures/Legacy/ExaltChalOneChallengeCap.png differ diff --git a/Pictures/Legacy/TalismanChronos.png b/Pictures/Legacy/TalismanChronos.png index 77e3f3813..53c7e89de 100644 Binary files a/Pictures/Legacy/TalismanChronos.png and b/Pictures/Legacy/TalismanChronos.png differ diff --git a/Pictures/Legacy/TalismanExemption.png b/Pictures/Legacy/TalismanExemption.png index 499a9af6e..003ddedaf 100644 Binary files a/Pictures/Legacy/TalismanExemption.png and b/Pictures/Legacy/TalismanExemption.png differ diff --git a/Pictures/Legacy/TalismanMetaphysics.png b/Pictures/Legacy/TalismanMetaphysics.png index 859e887e4..b67a8e21c 100644 Binary files a/Pictures/Legacy/TalismanMetaphysics.png and b/Pictures/Legacy/TalismanMetaphysics.png differ diff --git a/Pictures/Legacy/TalismanMidas.png b/Pictures/Legacy/TalismanMidas.png index 75817f4c0..34bba9bcf 100644 Binary files a/Pictures/Legacy/TalismanMidas.png and b/Pictures/Legacy/TalismanMidas.png differ diff --git a/Pictures/Legacy/TalismanMortuus.png b/Pictures/Legacy/TalismanMortuus.png index 574af351e..6c516ca9b 100644 Binary files a/Pictures/Legacy/TalismanMortuus.png and b/Pictures/Legacy/TalismanMortuus.png differ diff --git a/Pictures/Legacy/TalismanP2W.png b/Pictures/Legacy/TalismanP2W.png index d71920b0b..cc15869e9 100644 Binary files a/Pictures/Legacy/TalismanP2W.png and b/Pictures/Legacy/TalismanP2W.png differ diff --git a/Pictures/Legacy/TalismanPolymath.png b/Pictures/Legacy/TalismanPolymath.png index 27d707cba..77ee138ac 100644 Binary files a/Pictures/Legacy/TalismanPolymath.png and b/Pictures/Legacy/TalismanPolymath.png differ diff --git a/Pictures/Monotonous/Ambrosia.png b/Pictures/Monotonous/Ambrosia.png index 60a857e2e..667c2df9f 100644 Binary files a/Pictures/Monotonous/Ambrosia.png and b/Pictures/Monotonous/Ambrosia.png differ diff --git a/Pictures/Simplified/Ambrosia.png b/Pictures/Simplified/Ambrosia.png index 60a857e2e..667c2df9f 100644 Binary files a/Pictures/Simplified/Ambrosia.png and b/Pictures/Simplified/Ambrosia.png differ diff --git a/Synergism.css b/Synergism.css index 17e130f0c..96d1d2f9f 100644 --- a/Synergism.css +++ b/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%; } diff --git a/index.html b/index.html index ffd7798bd..0ed15b6e7 100644 --- a/index.html +++ b/index.html @@ -703,12 +703,12 @@ @@ -4207,133 +4207,133 @@

Artists

- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
- +
diff --git a/src/Campaign.ts b/src/Campaign.ts index aa362aa9e..97196d704 100644 --- a/src/Campaign.ts +++ b/src/Campaign.ts @@ -1516,9 +1516,9 @@ export const campaignIconHTMLUpdates = () => { export const campaignIconHTMLUpdate = (key: CampaignKeys) => { const icon = document.querySelector(`#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> DOMCacheGetOrSet('campaignTokenRewardText').innerHTML = i18next.t( `campaigns.tokens.rewardTexts.${key}`, reward ) } + ) } DOMCacheGetOrSet('campaignTokenRewardIcons').appendChild(tokenIcon) diff --git a/src/EventListeners.ts b/src/EventListeners.ts index 518759c12..b01b63f65 100644 --- a/src/EventListeners.ts +++ b/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)) diff --git a/src/UpdateVisuals.ts b/src/UpdateVisuals.ts index 095f0f70b..e756df0ea 100644 --- a/src/UpdateVisuals.ts +++ b/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' } } }