From ca287ea8ebedd4a2127fe77f874ebecbdef50f7a Mon Sep 17 00:00:00 2001 From: Andrio Celos Date: Fri, 8 Mar 2024 12:34:57 +1100 Subject: [PATCH] Rework card rendering to use the raw CardInk_00 asset --- TableturfBattleClient/src/CardDisplay.ts | 12 ++++++++---- TableturfBattleClient/src/Pages/GalleryPage.ts | 12 ++++++++++-- 2 files changed, 18 insertions(+), 6 deletions(-) diff --git a/TableturfBattleClient/src/CardDisplay.ts b/TableturfBattleClient/src/CardDisplay.ts index adecff7..21002dd 100644 --- a/TableturfBattleClient/src/CardDisplay.ts +++ b/TableturfBattleClient/src/CardDisplay.ts @@ -58,11 +58,15 @@ class CardDisplay implements ICardElement { svg.appendChild(image); if (level > 0) { + const r1 = card.inkColour1.r / 255; + const g1 = card.inkColour1.g / 255; + const b1 = card.inkColour1.b / 255; + const dr = (card.inkColour2.r - card.inkColour1.r) / 255; + const dg = (card.inkColour2.g - card.inkColour1.g) / 255; + const db = (card.inkColour2.b - card.inkColour1.b) / 255; svg.insertAdjacentHTML('beforeend', ` - - - - + + `); } diff --git a/TableturfBattleClient/src/Pages/GalleryPage.ts b/TableturfBattleClient/src/Pages/GalleryPage.ts index 4567058..aab5b2a 100644 --- a/TableturfBattleClient/src/Pages/GalleryPage.ts +++ b/TableturfBattleClient/src/Pages/GalleryPage.ts @@ -396,15 +396,23 @@ galleryCardEditorColour2.addEventListener('change', galleryCardEditorColour_chan function galleryCardEditorColour_change() { const display = galleryCardDisplay!; - const filters = display.svg.getElementsByClassName('inkFilter'); + const filter = display.svg.getElementsByClassName('inkFilter')[0]; const selectedColours = []; for (let i = 0; i < 2; i++) { const value = [galleryCardEditorColour1, galleryCardEditorColour2][i].value; const colour = { r: parseInt(value.substring(1, 3), 16), g: parseInt(value.substring(3, 5), 16), b: parseInt(value.substring(5, 7), 16) }; selectedColours.push(colour); - filters[i].getElementsByTagName('feColorMatrix')[0].setAttribute('values', `${colour.r / 255} 0 0 0 0 0 ${colour.g / 255} 0 0 0 0 0 ${colour.b / 255} 0 0 0 0 0 0.88 0`) } + + const r1 = selectedColours[0].r / 255; + const g1 = selectedColours[0].g / 255; + const b1 = selectedColours[0].b / 255; + const dr = (selectedColours[1].r - selectedColours[0].r) / 255; + const dg = (selectedColours[1].g - selectedColours[0].g) / 255; + const db = (selectedColours[1].b - selectedColours[0].b) / 255; + filter.getElementsByTagName('feColorMatrix')[0].setAttribute('values', `${dr} 0 0 0 ${r1} 0 ${dg} 0 0 ${g1} 0 0 ${db} 0 ${b1} 0 0 0 0.88 0`); + updateSelectedPreset(selectedColours); }