Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-03-22 01:44:12 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Rework card rendering to use the raw CardInk_00 asset

Browse Source
This commit is contained in:
Andrio Celos 2024-03-08 12:34:57 +11:00
parent bd1bdd9966
commit ca287ea8eb
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
TableturfBattleClient/src/CardDisplay.ts
View File

@ -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', `
<filter id="ink1-${this.idNumber}" class="inkFilter" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="${card.inkColour1.r / 255} 0 0 0 0 0 ${card.inkColour1.g / 255} 0 0 0 0 0 ${card.inkColour1.b / 255} 0 0 0 0 0 0.88 0"/></filter>
<image href="assets/external/CardInk-1.webp" width="100%" height="100%" clip-path="url(#cardBorder)" filter="url(#ink1-${this.idNumber})"/>
<filter id="ink2-${this.idNumber}" class="inkFilter" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="${card.inkColour2.r / 255} 0 0 0 0 0 ${card.inkColour2.g / 255} 0 0 0 0 0 ${card.inkColour2.b / 255} 0 0 0 0 0 0.88 0"/></filter>
<image href="assets/external/CardInk-2.webp" width="100%" height="100%" clip-path="url(#cardBorder)" filter="url(#ink2-${this.idNumber})"/>
<filter id="ink-${this.idNumber}" class="inkFilter" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="${dr} 0 0 0 ${r1} 0 ${dg} 0 0 ${g1} 0 0 ${db} 0 ${b1} 0 0 0 0.88 0"/></filter>
<image href="assets/external/CardInk_00.png" width="100%" height="100%" clip-path="url(#cardBorder)" filter="url(#ink-${this.idNumber})"/>
<image href="assets/external/CardFrame_01.webp" width="100%" height="100%" clip-path="url(#cardBorder)"/>
`);
}

12
TableturfBattleClient/src/Pages/GalleryPage.ts
View File

@ -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);
}