Leahnaya/TableturfBattleApp
1
0
Fork 0
mirror of https://github.com/AndrioCelos/TableturfBattleApp.git synced 2026-08-20 10:02:12 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

Adjust card rendering

Browse Source
This commit is contained in:
Andrio Celos
2024-03-08 11:00:41 +11:00
parent 6409983705
commit bd1bdd9966
2 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
TableturfBattleClient/index.html
View File

@@ -32,6 +32,9 @@
<div id="noJSPage">This application requires JavaScript.</div>
<svg id="cardDisplayAssets">
<defs>
<clipPath id="cardBorder">
<rect x="19" y="20" width="404" height="576" rx="18" ry="18"/>
</clipPath>
<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'/>

31
TableturfBattleClient/src/CardDisplay.ts
View File

@@ -39,7 +39,7 @@ class CardDisplay implements ICardElement {
this.element = element;
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 635 885');
svg.setAttribute('viewBox', '0 0 442 616');
svg.setAttribute('alt', card.name);
this.svg = svg;
element.appendChild(svg);
@@ -57,14 +57,13 @@ class CardDisplay implements ICardElement {
image.setAttribute('height', '100%');
svg.appendChild(image);
if (level == 0) {
svg.insertAdjacentHTML('beforeend', `<image href="assets/external/CardInk.webp" width="635" height="885" clip-path="url(#myClip)"/>`);
} else {
if (level > 0) {
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="635" height="885" clip-path="url(#myClip)" filter="url(#ink1-${this.idNumber})"/>
<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="635" height="885" clip-path="url(#myClip)" filter="url(#ink2-${this.idNumber})"/>
<image href="assets/external/CardInk-2.webp" width="100%" height="100%" clip-path="url(#cardBorder)" filter="url(#ink2-${this.idNumber})"/>
<image href="assets/external/CardFrame_01.webp" width="100%" height="100%" clip-path="url(#cardBorder)"/>
`);
}
@@ -81,7 +80,7 @@ class CardDisplay implements ICardElement {
// Grid
const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.setAttribute('class', 'cardGrid');
g.setAttribute('transform', 'translate(380 604) rotate(6.5) scale(0.283)');
g.setAttribute('transform', 'translate(264 420) rotate(6.5) scale(0.197)');
svg.appendChild(g);
CardDisplay.CreateSvgCardGrid(card, g);
@@ -90,12 +89,12 @@ class CardDisplay implements ICardElement {
const text1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text1.setAttribute('class', 'cardDisplayName');
text1.setAttribute('x', '50%');
text1.setAttribute('y', '168');
text1.setAttribute('y', '19%');
text1.setAttribute('text-anchor', 'middle');
text1.setAttribute('font-size', '76');
text1.setAttribute('font-size', '53');
text1.setAttribute('font-weight', 'bold');
text1.setAttribute('stroke', 'black');
text1.setAttribute('stroke-width', '15');
text1.setAttribute('stroke-width', '10.5');
text1.setAttribute('stroke-linejoin', 'round');
text1.setAttribute('paint-order', 'stroke');
text1.setAttribute('word-spacing', '-10');
@@ -114,7 +113,7 @@ class CardDisplay implements ICardElement {
}
if (card.line1 != null && card.line2 != null) {
const tspan1 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan1.setAttribute('y', '122');
tspan1.setAttribute('y', '13.8%');
tspan1.appendChild(document.createTextNode(card.line1));
text1.appendChild(tspan1);
@@ -122,14 +121,14 @@ class CardDisplay implements ICardElement {
// Add a space in the middle, to be included when copying the card name.
const tspanBr = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspanBr.setAttribute('x', '50%');
tspanBr.setAttribute('y', '169');
tspanBr.setAttribute('y', '19%');
tspanBr.appendChild(document.createTextNode(' '));
text1.appendChild(tspanBr);
}
const tspan2 = document.createElementNS('http://www.w3.org/2000/svg', 'tspan');
tspan2.setAttribute('x', '50%');
tspan2.setAttribute('y', '216');
tspan2.setAttribute('y', '24.4%');
tspan2.appendChild(document.createTextNode(card.line2));
text1.appendChild(tspan2);
} else
@@ -138,15 +137,15 @@ class CardDisplay implements ICardElement {
svg.appendChild(text1);
// Size
svg.insertAdjacentHTML('beforeend', `<image class='cardSizeBackground' href='assets/external/Game Assets/CardCost_0${card.rarity}.png' width='80' height='80' transform='translate(12 798) rotate(-45) scale(1.33)'/>`);
svg.insertAdjacentHTML('beforeend', `<text fill='white' stroke='${card.rarity == Rarity.Common ? '#482BB4' : card.rarity == Rarity.Rare ? '#8B7E25' : '#481EF9'}' paint-order='stroke' stroke-width='5' font-size='48' y='816' x='87' text-anchor='middle'>${card.size}</text>`);
svg.insertAdjacentHTML('beforeend', `<image class='cardSizeBackground' href='assets/external/Game Assets/CardCost_0${card.rarity}.png' width='74.1' height='74.1' transform='translate(8.4 555) rotate(-45)'/>`);
svg.insertAdjacentHTML('beforeend', `<text fill='white' stroke='${card.rarity == Rarity.Common ? '#482BB4' : card.rarity == Rarity.Rare ? '#8B7E25' : '#481EF9'}' paint-order='stroke' stroke-width='5' font-size='33.4' x='13.7%' y='92.2%' text-anchor='middle'>${card.size}</text>`);
this.sizeElement = svg.lastElementChild as SVGTextElement;
// Special cost
const g2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
this.specialCostGroup = g2;
g2.setAttribute('class', 'specialCost');
g2.setAttribute('transform', 'translate(170 806) scale(0.32)');
g2.setAttribute('transform', 'translate(118 561) scale(0.222)');
svg.appendChild(g2);
this.setSpecialCost(card.specialCost);