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

Fix card name gradients not showing when filtering the gallery

Browse Source
This commit is contained in:
Andrio Celos 2024-03-04 10:07:14 +11:00
parent 6372e79204
commit 282b998d17
3 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
TableturfBattleClient/index.html
View File

@ -30,6 +30,22 @@
</head>
<body>
<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>
<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>
</defs>
</svg>
<div id="preGamePage" hidden>
<div id="logoBanner"><img title="Tableturf Battle" alt="Tableturf Battle logo" id="logo" src="assets/external/logo.png"></div>
<h1>Tableturf Battle</h1>

16
TableturfBattleClient/src/CardDisplay.ts
View File

@ -87,25 +87,9 @@ class CardDisplay implements ICardElement {
text1.setAttribute('fill', '#6038FF');
break;
case Rarity.Rare:
svg.insertAdjacentHTML('beforeend', `
<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>
`);
text1.setAttribute('fill', 'url("#rareGradient")');
break;
case Rarity.Fresh:
svg.insertAdjacentHTML('beforeend', `
<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>
`);
text1.setAttribute('fill', 'url("#freshGradient")');
break;
}

6
TableturfBattleClient/tableturf.css
View File

@ -648,6 +648,12 @@ svg.card text.cardDisplayName {
transform: scaleX(var(--scale));
}
#cardDisplayAssets {
position: absolute;
width: 0;
height: 0;
}
rect.Empty, rect.empty {
fill: #00000080;
stroke: #60606080;