Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-07-19 00:31:33 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Correct card name gradient on longer names

Browse Source
This commit is contained in:
Andrio Celos 2024-03-07 10:51:35 +11:00
parent 9d9d560b7a
commit 6409983705
2 changed files with 31 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
TableturfBattleClient/index.html
View File

@ -32,17 +32,17 @@
<div id="noJSPage">This application requires JavaScript.</div>
<svg id="cardDisplayAssets">
<defs>
<linearGradient id='rareGradient' y1='25%' spreadMethod='reflect'>
<stop offset='0%' stop-color='#FEF9C6'/>
<stop offset='50%' stop-color='#DFAF17'/>
<stop offset='100%' stop-color='#FEF9C6'/>
<linearGradient id='rareGradient' gradientUnits="userSpaceOnUse" x1="29.2%" y1='21.5%' x2="55.5%" y2="15.7%" spreadMethod='reflect'>
<stop offset='0%' stop-color='#FBFFCC'/>
<stop offset='100%' stop-color='#E0AE12'/>
</linearGradient>
<linearGradient id='freshGradient' y2='25%'>
<stop offset='0%' stop-color='#FF8EDD'/>
<stop offset='25%' stop-color='#FFEC9F'/>
<stop offset='50%' stop-color='#B84386'/>
<stop offset='75%' stop-color='#2BEFC8'/>
<stop offset='100%' stop-color='#FF8EDD'/>
<linearGradient id='freshGradient' gradientUnits="userSpaceOnUse" x1="17.5%" y1="-2.5%" x2="83.5%" y2="32%">
<stop offset='0%' stop-color='#FF93DD'/>
<stop offset='20%' stop-color='#FEF499'/>
<stop offset='50%' stop-color='#C9448A'/>
<stop offset='75%' stop-color='#1EFBC3'/>
<stop offset='95%' stop-color='#FD97DB'/>
<stop offset='100%' stop-color='#FFBAC2'/>
</linearGradient>
</defs>
</svg>

23
TableturfBattleClient/src/CardDisplay.ts
View File

@ -9,6 +9,25 @@ class CardDisplay implements ICardElement {
private static nextIdNumber = 0;
private static getGradientId(baseId: string, scale: number) {
if (scale >= 20) return baseId;
const roundedScale = Math.round(scale * 20);
if (roundedScale >= 20) return baseId;
const id = `${baseId}${roundedScale}`;
if (document.getElementById(id)) return id;
const baseElement = document.getElementById(baseId);
if (!baseElement)
throw new Error(`Base gradient element '${baseId}' not found.`);
const el = <Element> baseElement!.cloneNode(true);
baseElement.insertAdjacentElement('afterend', el);
el.setAttribute('id', id);
el.setAttribute('gradientTransform', `translate(${-6350 / roundedScale + 317.5} 0) scale(${20 / roundedScale} 1)`);
return id;
}
constructor(card: Card, level: number, elementType: string = 'div') {
this.idNumber = CardDisplay.nextIdNumber++;
this.card = card;
@ -87,10 +106,10 @@ class CardDisplay implements ICardElement {
text1.setAttribute('fill', '#6038FF');
break;
case Rarity.Rare:
text1.setAttribute('fill', 'url("#rareGradient")');
text1.setAttribute('fill', `url("#${CardDisplay.getGradientId('rareGradient', card.textScale)}")`);
break;
case Rarity.Fresh:
text1.setAttribute('fill', 'url("#freshGradient")');
text1.setAttribute('fill', `url("#${CardDisplay.getGradientId('freshGradient', card.textScale)}")`);
break;
}
if (card.line1 != null && card.line2 != null) {