HASH c3384dd23f88
DATE 2025-12-06
SUBJECT web: define class color inline
FILES 1 CHANGED
HASH c3384dd23f88
DATE 2025-12-06
SUBJECT web: define class color inline
FILES 1 CHANGED
┌─ web/src/components/WoWClassColors.astro ──────────────────────────────────┐
│ diff --git a/web/src/components/WoWClassColors.astro b/web/src/components/WoWClass │
│ Colors.astro │
│ index b341244..b7ba4f2 100644 │
│ --- a/web/src/components/WoWClassColors.astro │
│ +++ b/web/src/components/WoWClassColors.astro │
│ @@ -1,30 +1,59 @@ │
│ --- │
│ -import { │
│ - SPEC_MAP, │
│ - SPEC_ICON_MAP, │
│ - getClassColor, │
│ - getSpecInfo, │
│ - getSpecIcon, │
│ - createPlayerElement, │
│ -} from "../lib/wow-constants.ts"; │
│ +import { SPEC_MAP, SPEC_ICON_MAP, CLASS_COLORS } from "../lib/wow-constants.ts"; │
│ --- │
│ │
│ -<script │
│ - is:inline │
│ - define:vars={{ │
│ - SPEC_MAP, │
│ - SPEC_ICON_MAP, │
│ - getClassColor, │
│ - getSpecInfo, │
│ - getSpecIcon, │
│ - createPlayerElement, │
│ - }} │
│ -> │
│ +<script is:inline define:vars={{ SPEC_MAP, SPEC_ICON_MAP, CLASS_COLORS }}> │
│ window.WoW = window.WoW || {}; │
│ window.WoW.specMap = SPEC_MAP; │
│ window.WoW.specIconMap = SPEC_ICON_MAP; │
│ - window.WoW.getClassColor = getClassColor; │
│ - window.WoW.getSpecInfo = getSpecInfo; │
│ - window.WoW.getSpecIcon = getSpecIcon; │
│ - window.WoW.createPlayerElement = createPlayerElement; │
│ + │
│ + window.WoW.getClassColor = function (className) { │
│ + const normalizedClass = className.toLowerCase().replace(/\s+/g, "_"); │
│ + return CLASS_COLORS[normalizedClass] || "#FFFFFF"; │
│ + }; │
│ + │
│ + window.WoW.getSpecInfo = function (specId) { │
│ + return SPEC_MAP[specId] || null; │
│ + }; │
│ + │
│ + window.WoW.getSpecIcon = function (className, specName) { │
│ + const key = `${className}|${specName}`; │
│ + return SPEC_ICON_MAP[key] || null; │
│ + }; │
│ + │
│ + window.WoW.createPlayerElement = function (player) { │
│ + const wrapper = document.createElement("span"); │
│ + wrapper.className = "player-link-wrapper"; │
│ + │
│ + const link = document.createElement("a"); │
│ + const region = player.region || "global"; │
│ + const realm = player.realm_name || "unknown"; │
│ + link.href = `/player/${region}/${realm}/${player.name}`; │
│ + link.className = "player-link"; │
│ + │
│ + if (player.spec_id) { │
│ + const specInfo = window.WoW.getSpecInfo(player.spec_id); │
│ + if (specInfo) { │
│ + const icon = document.createElement("img"); │
│ + icon.src = window.WoW.getSpecIcon(specInfo.class, specInfo.spec) || ""; │
│ + icon.alt = specInfo.spec; │
│ + icon.className = "spec-icon"; │
│ + icon.loading = "lazy"; │
│ + link.appendChild(icon); │
│ + } │
│ + } │
│ + │
│ + const nameSpan = document.createElement("span"); │
│ + nameSpan.className = "player-link-name"; │
│ + if (player.class_name) { │
│ + nameSpan.classList.add( │
│ + `text-${player.class_name.toLowerCase().replace(/\s+/g, "-")}`, │
│ + ); │
│ + } │
│ + nameSpan.textContent = player.name; │
│ + link.appendChild(nameSpan); │
│ + │
│ + wrapper.appendChild(link); │
│ + return wrapper; │
│ + }; │
│ </script> │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ...mponents/WoWClassColors.astro ───┐
│ diff --git a/web/src/components/WoWClassColo │
│ rs.astro b/web/src/components/WoWClassColors │
│ .astro │
│ index b341244..b7ba4f2 100644 │
│ --- a/web/src/components/WoWClassColors.astr │
│ o │
│ +++ b/web/src/components/WoWClassColors.astr │
│ o │
│ @@ -1,30 +1,59 @@ │
│ --- │
│ -import { │
│ - SPEC_MAP, │
│ - SPEC_ICON_MAP, │
│ - getClassColor, │
│ - getSpecInfo, │
│ - getSpecIcon, │
│ - createPlayerElement, │
│ -} from "../lib/wow-constants.ts"; │
│ +import { SPEC_MAP, SPEC_ICON_MAP, CLASS_COL │
│ ORS } from "../lib/wow-constants.ts"; │
│ --- │
│ │
│ -<script │
│ - is:inline │
│ - define:vars={{ │
│ - SPEC_MAP, │
│ - SPEC_ICON_MAP, │
│ - getClassColor, │
│ - getSpecInfo, │
│ - getSpecIcon, │
│ - createPlayerElement, │
│ - }} │
│ -> │
│ +<script is:inline define:vars={{ SPEC_MAP, │
│ SPEC_ICON_MAP, CLASS_COLORS }}> │
│ window.WoW = window.WoW || {}; │
│ window.WoW.specMap = SPEC_MAP; │
│ window.WoW.specIconMap = SPEC_ICON_MAP; │
│ - window.WoW.getClassColor = getClassColor; │
│ - window.WoW.getSpecInfo = getSpecInfo; │
│ - window.WoW.getSpecIcon = getSpecIcon; │
│ - window.WoW.createPlayerElement = createPl │
│ ayerElement; │
│ + │
│ + window.WoW.getClassColor = function (clas │
│ sName) { │
│ + const normalizedClass = className.toLow │
│ erCase().replace(/\s+/g, "_"); │
│ + return CLASS_COLORS[normalizedClass] || │
│ "#FFFFFF"; │
│ + }; │
│ + │
│ + window.WoW.getSpecInfo = function (specId │
│ ) { │
│ + return SPEC_MAP[specId] || null; │
│ + }; │
│ + │
│ + window.WoW.getSpecIcon = function (classN │
│ ame, specName) { │
│ + const key = `${className}|${specName}`; │
│ + return SPEC_ICON_MAP[key] || null; │
│ + }; │
│ + │
│ + window.WoW.createPlayerElement = function │
│ (player) { │
│ + const wrapper = document.createElement( │
│ "span"); │
│ + wrapper.className = "player-link-wrappe │
│ r"; │
│ + │
│ + const link = document.createElement("a" │
│ ); │
│ + const region = player.region || "global │
│ "; │
│ + const realm = player.realm_name || "unk │
│ nown"; │
│ + link.href = `/player/${region}/${realm} │
│ /${player.name}`; │
│ + link.className = "player-link"; │
│ + │
│ + if (player.spec_id) { │
│ + const specInfo = window.WoW.getSpecIn │
│ fo(player.spec_id); │
│ + if (specInfo) { │
│ + const icon = document.createElement │
│ ("img"); │
│ + icon.src = window.WoW.getSpecIcon(s │
│ pecInfo.class, specInfo.spec) || ""; │
│ + icon.alt = specInfo.spec; │
│ + icon.className = "spec-icon"; │
│ + icon.loading = "lazy"; │
│ + link.appendChild(icon); │
│ + } │
│ + } │
│ + │
│ + const nameSpan = document.createElement │
│ ("span"); │
│ + nameSpan.className = "player-link-name" │
│ ; │
│ + if (player.class_name) { │
│ + nameSpan.classList.add( │
│ + `text-${player.class_name.toLowerCa │
│ se().replace(/\s+/g, "-")}`, │
│ + ); │
│ + } │
│ + nameSpan.textContent = player.name; │
│ + link.appendChild(nameSpan); │
│ + │
│ + wrapper.appendChild(link); │
│ + return wrapper; │
│ + }; │
│ </script> │
└──────────────────────────────────────────────┘
[ BACK TO LOG ]
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET