diff --git a/src/entrypoints/content/common/styles/_icons.css b/src/entrypoints/content/common/styles/_icons.css index b297780..6ec7a8b 100644 --- a/src/entrypoints/content/common/styles/_icons.css +++ b/src/entrypoints/content/common/styles/_icons.css @@ -24,6 +24,10 @@ See https://github.com/lucide-icons/lucide/blob/main/LICENSE */ mask: url("data:image/svg+xml,") no-repeat center / contain; } +.hte-icon-highlighter::before { + mask: url("data:image/svg+xml,") no-repeat center / contain; +} + .hte-icon-card-yellow, .hte-icon-card-red { &::before { diff --git a/src/entrypoints/content/modules/transfer-age/index.css b/src/entrypoints/content/modules/transfer-age/index.css index 6281d4c..293f70f 100644 --- a/src/entrypoints/content/modules/transfer-age/index.css +++ b/src/entrypoints/content/modules/transfer-age/index.css @@ -4,6 +4,17 @@ float: right; margin-top: -2px; + .hte-transfer-age-toggle { + cursor: pointer; + color: var(--hte-color-gray-4); + display: flex; + align-items: center; + + &:hover, &.hte-transfer-age-active { + color: var(--hte-color-gray-8); + } + } + .hte-transfer-age-label { display: flex; align-items: center; @@ -26,10 +37,20 @@ } } + .hte-transfer-age-thresholds { + display: flex; + gap: 12px; + } + .hte-transfer-age-input { width: 44px; text-align: center; } + + &.hte-transfer-age-disabled .hte-transfer-age-thresholds { + opacity: 0.4; + pointer-events: none; + } } .hte-transfer-age { diff --git a/src/entrypoints/content/modules/transfer-age/index.ts b/src/entrypoints/content/modules/transfer-age/index.ts index b03293f..140a0a8 100644 --- a/src/entrypoints/content/modules/transfer-age/index.ts +++ b/src/entrypoints/content/modules/transfer-age/index.ts @@ -7,7 +7,7 @@ import { querySelector, querySelectorAll, querySelectorIn } from '@/entrypoints/ import { pages } from '@/entrypoints/content/common/utils/pages' import { parsePlayerAge } from '@/entrypoints/content/common/utils/player/utils' import metadata from '@/entrypoints/content/modules/transfer-age/metadata' -import { thresholdsStorage } from '@/entrypoints/content/modules/transfer-age/utils' +import { settingsStorage } from '@/entrypoints/content/modules/transfer-age/utils' const createThresholdControl = ( color: 'orange' | 'red', @@ -27,32 +27,70 @@ const createThresholdControl = ( return { label, input } } -const injectSettingsPanel = (red: number, orange: number): void => { +const clearHighlights = (): void => { + querySelectorAll('.hte-transfer-age', false).forEach((cell) => { + cell.classList.remove( + 'hte-transfer-age', + 'hte-transfer-age-red', + 'hte-transfer-age-orange', + 'hte-transfer-age-green', + ) + }) +} + +const injectSettingsPanel = (enabled: boolean, orange: number, red: number): void => { querySelector('#hte-transfer-age-settings', false)?.remove() const { label: orangeLabel, input: orangeInput } = createThresholdControl('orange', orange) const { label: redLabel, input: redInput } = createThresholdControl('red', red) + const enabledButton = el('span', { className: `hte-transfer-age-toggle${enabled ? ' hte-transfer-age-active' : ''}` }) + enabledButton.append(el('i', { className: 'hte-icon-highlighter' })) + + const thresholdsContainer = el('div', { className: 'hte-transfer-age-thresholds' }) + thresholdsContainer.append(orangeLabel, redLabel) + const panel = el('div', { id: 'hte-transfer-age-settings' }) - panel.append(orangeLabel, redLabel) + panel.classList.toggle('hte-transfer-age-disabled', !enabled) + panel.append(enabledButton, thresholdsContainer) + + let isEnabled = enabled + + const readThresholds = (): { red: number; orange: number } | null => { + const orange = parseInt(orangeInput.value, 10) + const red = parseInt(redInput.value, 10) + + return isNaN(orange) || isNaN(red) ? null : { orange, red } + } const onThresholdChange = () => { - const newOrange = parseInt(orangeInput.value, 10) - const newRed = parseInt(redInput.value, 10) - if (isNaN(newOrange) || isNaN(newRed)) return + const thresholds = readThresholds() + if (!thresholds) return + + void settingsStorage.setValue({ ...thresholds, enabled: isEnabled }) + if (isEnabled) applyHighlights(thresholds.orange, thresholds.red) + } + + const onEnabledChange = () => { + isEnabled = enabledButton.classList.toggle('hte-transfer-age-active') + const thresholds = readThresholds() + + panel.classList.toggle('hte-transfer-age-disabled', !isEnabled) + + if (thresholds) void settingsStorage.setValue({ ...thresholds, enabled: isEnabled }) - void thresholdsStorage.setValue({ red: newRed, orange: newOrange }).then(() => { - applyHighlights(newRed, newOrange) - }) + if (!isEnabled) clearHighlights() + else if (thresholds) applyHighlights(thresholds.orange, thresholds.red) } orangeInput.addEventListener('change', onThresholdChange) redInput.addEventListener('change', onThresholdChange) + enabledButton.addEventListener('click', onEnabledChange) querySelector('#ctl00_ctl00_CPContent_CPMain_ucPager_divWrapper .PagerRight_Default')?.prepend(panel) } -const applyHighlights = (red: number, orange: number): void => { +const applyHighlights = (orange: number, red: number): void => { const players = querySelectorAll('.transferPlayerInformation', false) players.forEach((player) => { @@ -75,9 +113,9 @@ const transferAge: Module = { metadata, pages: [pages.transferSearchResults], run: async () => { - const { red, orange } = await thresholdsStorage.getValue() - injectSettingsPanel(red, orange) - applyHighlights(red, orange) + const { enabled, red, orange } = await settingsStorage.getValue() + injectSettingsPanel(enabled, orange, red) + if (enabled) applyHighlights(orange, red) }, } diff --git a/src/entrypoints/content/modules/transfer-age/utils.ts b/src/entrypoints/content/modules/transfer-age/utils.ts index 616a5b9..7270d35 100644 --- a/src/entrypoints/content/modules/transfer-age/utils.ts +++ b/src/entrypoints/content/modules/transfer-age/utils.ts @@ -1,6 +1,7 @@ -export const DEFAULTS = { orange: 80, red: 90 } as const - -export const thresholdsStorage = storage.defineItem<{ red: number; orange: number }>('local:transfer-age-thresholds', { - fallback: DEFAULTS, - version: 1, -}) +export const settingsStorage = storage.defineItem<{ red: number; orange: number; enabled: boolean }>( + 'local:transfer-age-settings', + { + fallback: { orange: 80, red: 90, enabled: false }, + version: 1, + }, +)