From 6409983705c3da58624fde0a8af75abfab1b136c Mon Sep 17 00:00:00 2001
From: Andrio Celos <AndrioCelos@users.noreply.github.com>
Date: Thu, 7 Mar 2024 10:51:35 +1100
Subject: [PATCH] Correct card name gradient on longer names

---
 TableturfBattleClient/index.html         | 20 ++++++++++----------
 TableturfBattleClient/src/CardDisplay.ts | 23 +++++++++++++++++++++--
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/TableturfBattleClient/index.html b/TableturfBattleClient/index.html
index 96edf76..f8377db 100644
--- a/TableturfBattleClient/index.html
+++ b/TableturfBattleClient/index.html
@@ -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>
diff --git a/TableturfBattleClient/src/CardDisplay.ts b/TableturfBattleClient/src/CardDisplay.ts
index 7fe05f0..5e6c785 100644
--- a/TableturfBattleClient/src/CardDisplay.ts
+++ b/TableturfBattleClient/src/CardDisplay.ts
@@ -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) {