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,
+ },
+)