From 69f2f348798e1ac36b9f858aaaaa74b596ea2a0c Mon Sep 17 00:00:00 2001 From: DuckySoLucky Date: Tue, 26 Dec 2023 14:43:04 +0100 Subject: [PATCH 1/3] feat: add proper color support to armo --- public/resources/ts/globals.d.ts | 1 + public/resources/ts/stats-defer.ts | 14 ++++++++++---- src/stats/items/processing.js | 6 ++++++ 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/public/resources/ts/globals.d.ts b/public/resources/ts/globals.d.ts index f7012ea8a6..78341fc7cd 100644 --- a/public/resources/ts/globals.d.ts +++ b/public/resources/ts/globals.d.ts @@ -126,6 +126,7 @@ interface DisplayItem { recombobulated: boolean | null; dungeon: boolean | null; shiny: boolean | null; + color: string | null; } interface ItemSlot { diff --git a/public/resources/ts/stats-defer.ts b/public/resources/ts/stats-defer.ts index 73e7410ff9..bf70751b8b 100644 --- a/public/resources/ts/stats-defer.ts +++ b/public/resources/ts/stats-defer.ts @@ -258,17 +258,23 @@ function fillLore(element: HTMLElement) { const itemNameString = ((item as Item).tag?.display?.Name ?? item.display_name ?? "???") as string; const colorCode = itemNameString.match(/^§([0-9a-fklmnor])/i); - if (colorCode && colorCode[1]) { + + itemName.className = `item-name piece-${item.rarity || "common"}-bg nice-colors-dark`; + if (item.color !== undefined) { + itemName.style.backgroundColor = `#${item.color}`; + } else if (colorCode && colorCode[1]) { itemName.style.backgroundColor = `var(--§${colorCode[1]})`; } else { itemName.style.backgroundColor = `var(--§${(RARITY_COLORS as RarityColors)[item.rarity || "common"]})`; } - itemName.className = `item-name piece-${item.rarity || "common"}-bg nice-colors-dark`; - const itemNameHtml = renderLore((item as Item).tag?.display?.Name ?? item.display_name ?? "???"); + + const itemNameHtml = renderLore(itemNameString); const isMulticolor = (itemNameHtml.match(/<\/span>/g) || []).length > 1; - itemNameContent.dataset.multicolor = String(isMulticolor); + itemNameContent.innerHTML = isMulticolor ? itemNameHtml : itemNameString.replace(/§([0-9a-fklmnor])/gi, "") ?? "???"; + + itemNameContent.dataset.multicolor = String(isMulticolor); if (element.hasAttribute("data-pet-index")) { itemNameContent.dataset.multicolor = "false"; diff --git a/src/stats/items/processing.js b/src/stats/items/processing.js index 243cba192d..a0bdbe4b7e 100644 --- a/src/stats/items/processing.js +++ b/src/stats/items/processing.js @@ -255,6 +255,12 @@ export async function processItems(base64, source, customTextures = false, packs item.extra.skin = `PET_SKIN_${item.tag.ExtraAttributes.petInfo.skin}`; } + if (item.tag?.display?.color) { + const hex = item.tag.display.color.toString(16).padStart(6, "0"); + + item.color = hex.toUpperCase() + } + // Set custom texture for colored leather armor if (typeof item.id === "number" && item.id >= 298 && item.id <= 301) { const color = item.tag?.display?.color?.toString(16).padStart(6, "0") ?? "955e3b"; From fc1961c1a2db492fa7a32dcf7c2a965f69a41285 Mon Sep 17 00:00:00 2001 From: DuckySoLucky Date: Tue, 26 Dec 2023 14:45:22 +0100 Subject: [PATCH 2/3] style: pnpm run prettier:fix --- public/resources/ts/stats-defer.ts | 5 ++--- src/stats/items/processing.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/public/resources/ts/stats-defer.ts b/public/resources/ts/stats-defer.ts index bf70751b8b..ffe1d5cf31 100644 --- a/public/resources/ts/stats-defer.ts +++ b/public/resources/ts/stats-defer.ts @@ -268,12 +268,11 @@ function fillLore(element: HTMLElement) { itemName.style.backgroundColor = `var(--§${(RARITY_COLORS as RarityColors)[item.rarity || "common"]})`; } - const itemNameHtml = renderLore(itemNameString); const isMulticolor = (itemNameHtml.match(/<\/span>/g) || []).length > 1; - + itemNameContent.innerHTML = isMulticolor ? itemNameHtml : itemNameString.replace(/§([0-9a-fklmnor])/gi, "") ?? "???"; - + itemNameContent.dataset.multicolor = String(isMulticolor); if (element.hasAttribute("data-pet-index")) { diff --git a/src/stats/items/processing.js b/src/stats/items/processing.js index a0bdbe4b7e..5ffe351078 100644 --- a/src/stats/items/processing.js +++ b/src/stats/items/processing.js @@ -258,7 +258,7 @@ export async function processItems(base64, source, customTextures = false, packs if (item.tag?.display?.color) { const hex = item.tag.display.color.toString(16).padStart(6, "0"); - item.color = hex.toUpperCase() + item.color = hex.toUpperCase(); } // Set custom texture for colored leather armor From 7b6133494eb6cef402fe6019eacdc90bad26645d Mon Sep 17 00:00:00 2001 From: DuckySoLucky Date: Tue, 26 Dec 2023 16:30:50 +0100 Subject: [PATCH 3/3] feat: change scrollbar's color too --- public/resources/scss/shared.scss | 5 ++++- public/resources/scss/stats.scss | 22 +++++++++++----------- public/resources/ts/stats-defer.ts | 2 ++ 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/public/resources/scss/shared.scss b/public/resources/scss/shared.scss index a38a6b7c0f..4c1825b749 100644 --- a/public/resources/scss/shared.scss +++ b/public/resources/scss/shared.scss @@ -54,6 +54,9 @@ /* Normal Background */ --bg: url(/resources/img/bg.webp); + /* Scrollbar color */ + --scrollbar-color: #0bca51; + color-scheme: dark; &.light { @@ -1013,7 +1016,7 @@ body { *::-webkit-scrollbar-thumb { border-radius: 12px; - background-color: var(--icon-hex); + background-color: var(--scrollbar-color); } body::-webkit-scrollbar { diff --git a/public/resources/scss/stats.scss b/public/resources/scss/stats.scss index 16d7f1e551..1acbefd8b2 100644 --- a/public/resources/scss/stats.scss +++ b/public/resources/scss/stats.scss @@ -1343,7 +1343,7 @@ a.additional-player-stat:hover { } .piece-admin-bg, -.style-scrollbar .piece-admin-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-admin-bg { background-color: var(--§4); } .piece-admin-bg + .item-lore { @@ -1354,7 +1354,7 @@ a.additional-player-stat:hover { } .piece-supreme-bg, -.style-scrollbar .piece-supreme-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-supreme-bg { background-color: var(--§4); } .piece-supreme-bg + .item-lore { @@ -1365,7 +1365,7 @@ a.additional-player-stat:hover { } .piece-very_special-bg, -.style-scrollbar .piece-very_special-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-very_special-bg { background-color: var(--§c); } .piece-very_special-bg + .item-lore { @@ -1376,7 +1376,7 @@ a.additional-player-stat:hover { } .piece-special-bg, -.style-scrollbar .piece-special-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-special-bg { background-color: var(--§c); } .piece-special-bg + .item-lore { @@ -1387,7 +1387,7 @@ a.additional-player-stat:hover { } .piece-divine-bg, -.style-scrollbar .piece-divine-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-divine-bg { background-color: var(--§b); } .piece-divine-bg + .item-lore { @@ -1398,7 +1398,7 @@ a.additional-player-stat:hover { } .piece-mythic-bg, -.style-scrollbar .piece-mythic-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-mythic-bg { background-color: var(--§d); } .piece-mythic-bg + .item-lore { @@ -1409,7 +1409,7 @@ a.additional-player-stat:hover { } .piece-legendary-bg, -.style-scrollbar .piece-legendary-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-legendary-bg { background-color: var(--§6); } .piece-legendary-bg + .item-lore { @@ -1420,7 +1420,7 @@ a.additional-player-stat:hover { } .piece-epic-bg, -.style-scrollbar .piece-epic-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-epic-bg { background-color: var(--§5); } .piece-epic-bg + .item-lore { @@ -1431,7 +1431,7 @@ a.additional-player-stat:hover { } .piece-rare-bg, -.style-scrollbar .piece-rare-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-rare-bg { background-color: var(--§9); } .piece-rare-bg + .item-lore { @@ -1442,7 +1442,7 @@ a.additional-player-stat:hover { } .piece-uncommon-bg, -.style-scrollbar .piece-uncommon-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-uncommon-bg { background-color: var(--§a); } .piece-uncommon-bg + .item-lore { @@ -1453,7 +1453,7 @@ a.additional-player-stat:hover { } .piece-common-bg, -.style-scrollbar .piece-common-bg + .item-lore::-webkit-scrollbar-thumb { +.style-scrollbar .piece-common-bg { background-color: var(--§f); } .piece-common-bg + .item-lore { diff --git a/public/resources/ts/stats-defer.ts b/public/resources/ts/stats-defer.ts index ffe1d5cf31..789d7e6fbc 100644 --- a/public/resources/ts/stats-defer.ts +++ b/public/resources/ts/stats-defer.ts @@ -273,6 +273,8 @@ function fillLore(element: HTMLElement) { itemNameContent.innerHTML = isMulticolor ? itemNameHtml : itemNameString.replace(/§([0-9a-fklmnor])/gi, "") ?? "???"; + statsContent.style.setProperty("--scrollbar-color", itemName.style.backgroundColor); + itemNameContent.dataset.multicolor = String(isMulticolor); if (element.hasAttribute("data-pet-index")) {