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

Change CardButton and StageButton grids to SVG

Browse Source
This commit is contained in:
Andrio Celos
2023-10-10 21:35:29 +11:00
parent deb8a673ab
commit 38e1d20a5d
4 changed files with 92 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
TableturfBattleClient/src/CardButton.ts
View File

@@ -16,24 +16,10 @@ class CardButton extends CheckButton {
this.card = card;
let size = 0;
let table = document.createElement('table');
table.classList.add('cardGrid');
for (var y = 0; y < 8; y++) {
let tr = document.createElement('tr');
table.appendChild(tr);
for (var x = 0; x < 8; x++) {
let td = document.createElement('td');
if (card.grid[x][y] == Space.Ink1) {
size++;
td.classList.add('ink');
} else if (card.grid[x][y] == Space.SpecialInactive1) {
size++;
td.classList.add('special');
}
tr.appendChild(td);
}
}
const gridSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
gridSvg.classList.add('cardGrid');
gridSvg.setAttribute('viewBox', '0 0 800 800');
CardDisplay.CreateSvgCardGrid(card, gridSvg);
if (card.imageUrl) {
const bgDiv = document.createElement('div');
@@ -56,7 +42,7 @@ class CardButton extends CheckButton {
el2.innerText = card.name;
row.appendChild(el2);
button.appendChild(table);
button.appendChild(gridSvg);
row = document.createElement('div');
row.className = 'cardFooter';
@@ -65,7 +51,7 @@ class CardButton extends CheckButton {
el2 = document.createElement('div');
el2.classList.add('cardSize');
el2.innerText = size.toString();
el2.innerText = card.size.toString();
row.appendChild(el2);
el2 = document.createElement('div');

66
TableturfBattleClient/src/CardDisplay.ts
View File

@@ -47,38 +47,7 @@ class CardDisplay {
g.setAttribute('transform', 'translate(380 604) rotate(6.5) scale(0.283)');
svg.appendChild(g);
let size = 0;
for (var y = 0; y < 8; y++) {
for (var x = 0; x < 8; x++) {
if (card.grid[x][y] == Space.Empty) {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.classList.add('empty');
rect.setAttribute('x', (100 * x + 3).toString());
rect.setAttribute('y', (100 * y + 3).toString());
rect.setAttribute('width', '94');
rect.setAttribute('height', '94');
g.appendChild(rect);
} else {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
const elements: Element[] = [ rect ];
size++;
rect.classList.add(card.grid[x][y] == Space.SpecialInactive1 ? 'special' : 'ink');
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.png' : 'assets/InkOverlay.png');
elements.push(image);
for (const el of elements) {
el.setAttribute('x', (100 * x).toString());
el.setAttribute('y', (100 * y).toString());
el.setAttribute('width', '100');
el.setAttribute('height', '100');
g.appendChild(el);
}
}
}
}
CardDisplay.CreateSvgCardGrid(card, g);
// Name
const text1 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
@@ -139,7 +108,7 @@ class CardDisplay {
// Size
svg.insertAdjacentHTML('beforeend', `<image 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'>${size}</text>`);
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'>${card.size}</text>`);
// Special cost
const g2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
@@ -162,4 +131,35 @@ class CardDisplay {
this.card = card;
}
static CreateSvgCardGrid(card: Card, parent: SVGElement) {
for (var y = 0; y < 8; y++) {
for (var x = 0; x < 8; x++) {
if (card.grid[x][y] == Space.Empty) {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.classList.add('empty');
rect.setAttribute('x', (100 * x + 3).toString());
rect.setAttribute('y', (100 * y + 3).toString());
rect.setAttribute('width', '94');
rect.setAttribute('height', '94');
parent.appendChild(rect);
} else {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.classList.add(card.grid[x][y] == Space.SpecialInactive1 ? 'special' : 'ink');
const elements: Element[] = [rect];
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', card.grid[x][y] == Space.SpecialInactive1 ? 'assets/SpecialOverlay.png' : 'assets/InkOverlay.png');
elements.push(image);
for (const el of elements) {
el.setAttribute('x', (100 * x).toString());
el.setAttribute('y', (100 * y).toString());
el.setAttribute('width', '100');
el.setAttribute('height', '100');
parent.appendChild(el);
}
}
}
}
}
}

87
TableturfBattleClient/src/StageButton.ts
View File

@@ -2,8 +2,8 @@ class StageButton extends CheckButton {
private static idNumber = 0;
readonly stage: Stage;
readonly cells: HTMLTableCellElement[][];
private readonly startCells: HTMLTableCellElement[] = [ ];
readonly cells: (SVGRectElement | null)[][];
private readonly startCells: [SVGRectElement, SVGImageElement][] = [ ];
constructor(stage: Stage) {
let button = document.createElement('button');
@@ -11,66 +11,65 @@ class StageButton extends CheckButton {
button.classList.add('stage');
super(button);
const gridSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
gridSvg.classList.add('stageGrid');
gridSvg.setAttribute('viewBox', `0 0 ${stage.grid.length * 100} 3000`);
const offset = (3000 - stage.grid[0].length * 100) / 2;
this.stage = stage;
let cols: HTMLTableCellElement[][] = [ ];
for (let x = 0; x < stage.grid.length; x++) {
const cols = [ ];
for (var x = 0; x < stage.grid.length; x++) {
let col = [ ];
for (let y = 0; y < stage.grid[x].length; y++) {
let td = document.createElement('td');
if (stage.grid[x][y] == Space.OutOfBounds)
td.classList.add('OutOfBounds');
else
td.classList.add('Empty');
col.push(td);
for (var y = 0; y < stage.grid[x].length; y++) {
if (stage.grid[x][y] == Space.Empty) {
const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.classList.add('empty');
rect.setAttribute('x', (100 * x).toString());
rect.setAttribute('y', (100 * y + offset).toString());
rect.setAttribute('width', '100');
rect.setAttribute('height', '100');
gridSvg.appendChild(rect);
col.push(rect);
} else
col.push(null);
}
cols.push(col);
}
this.cells = cols;
let table = document.createElement('table');
table.classList.add('stageGrid');
for (let y = 0; y < stage.grid[0].length; y++) {
let tr = document.createElement('tr');
table.appendChild(tr);
for (let x = 0; x < stage.grid.length; x++) {
tr.appendChild(cols[x][y]);
}
}
let row = document.createElement('div');
row.className = 'stageHeader';
button.appendChild(row);
let el2 = document.createElement('div');
el2.classList.add('stageName');
el2.innerText = stage.name;
row.appendChild(el2);
row = document.createElement('div');
row.className = 'stageBody';
button.appendChild(row);
row.appendChild(table);
let el = document.createElement('div');
el.classList.add('stageName');
el.innerText = stage.name;
button.appendChild(el);
button.appendChild(gridSvg);
StageButton.idNumber++;
}
setStartSpaces(numPlayers: number) {
for (const td of this.startCells) {
td.classList.remove('Start1');
td.classList.remove('Start2');
td.classList.remove('Start3');
td.classList.remove('Start4');
td.classList.add('Empty');
for (const el of this.startCells) {
el[0].setAttribute('class', 'empty');
el[1].parentElement!.removeChild(el[1]);
}
this.startCells.splice(0);
const startSpaces = this.stage.getStartSpaces(numPlayers);
for (let i = 0; i < numPlayers; i++) {
const td = this.cells[startSpaces[i].x][startSpaces[i].y];
td.classList.remove('Empty');
td.classList.add(`Start${i + 1}`);
this.startCells.push(td);
const space = startSpaces[i];
const cell = this.cells[space.x][space.y]!;
cell.classList.add(`start${i + 1}`);
const image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
image.setAttribute('href', 'assets/SpecialOverlay.png');
image.setAttribute('x', cell.getAttribute('x')!);
image.setAttribute('y', cell.getAttribute('y')!);
image.setAttribute('width', cell.getAttribute('width')!);
image.setAttribute('height', cell.getAttribute('height')!);
cell.parentElement!.appendChild(image);
this.startCells.push([cell, image]);
}
}
}

24
TableturfBattleClient/tableturf.css
View File

@@ -318,11 +318,10 @@ dialog::backdrop {
box-sizing: border-box;
}
.stageGrid td.Empty { outline: 1px solid grey; outline-offset: -1px; }
.stageGrid td.Start1 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-1); }
.stageGrid td.Start2 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-2); }
.stageGrid td.Start3 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-3); }
.stageGrid td.Start4 { background: url('assets/SpecialOverlay.png') center/cover, var(--special-colour-4); }
.stageGrid rect.start1 { fill: var(--special-colour-1); }
.stageGrid rect.start2 { fill: var(--special-colour-2); }
.stageGrid rect.start3 { fill: var(--special-colour-3); }
.stageGrid rect.start4 { fill: var(--special-colour-4); }
:is(.stage, .stageRandom):is(:hover, :focus-within):not(.checked, .disabled)::before {
content: '';
@@ -480,16 +479,9 @@ dialog::backdrop {
position: relative;
margin: 0 auto;
border-spacing: 0;
width: 12ex;
display: block;
}
.cardGrid td {
width: 1.2ex;
height: 1.2ex;
outline: 1px solid #80808080;
outline-offset: -1px;
}
.cardGrid td { background: #00000080; }
.cardGrid td.ink { background: url('assets/InkOverlay.png') center/cover, var(--player-primary-colour); outline: none; }
.cardGrid td.special { background: url('assets/SpecialOverlay.png') center/cover, var(--player-special-colour); outline: none; }
.cardFooter {
position: relative;
@@ -570,6 +562,10 @@ rect.empty {
stroke: #60606080;
stroke-width: 6;
}
.stageGrid rect.empty {
stroke: grey;
stroke-width: 12;
}
rect.ink {
fill: var(--player-primary-colour);