From 38e1d20a5d1d5c3a0a523ce59e1bcd5b3bb890c1 Mon Sep 17 00:00:00 2001 From: Andrio Celos Date: Tue, 10 Oct 2023 21:35:29 +1100 Subject: [PATCH] Change CardButton and StageButton grids to SVG --- TableturfBattleClient/src/CardButton.ts | 26 ++----- TableturfBattleClient/src/CardDisplay.ts | 66 +++++++++--------- TableturfBattleClient/src/StageButton.ts | 87 ++++++++++++------------ TableturfBattleClient/tableturf.css | 24 +++---- 4 files changed, 92 insertions(+), 111 deletions(-) diff --git a/TableturfBattleClient/src/CardButton.ts b/TableturfBattleClient/src/CardButton.ts index b4058b6..95f52c3 100644 --- a/TableturfBattleClient/src/CardButton.ts +++ b/TableturfBattleClient/src/CardButton.ts @@ -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'); diff --git a/TableturfBattleClient/src/CardDisplay.ts b/TableturfBattleClient/src/CardDisplay.ts index 9cc8931..1b828e1 100644 --- a/TableturfBattleClient/src/CardDisplay.ts +++ b/TableturfBattleClient/src/CardDisplay.ts @@ -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', ``); - svg.insertAdjacentHTML('beforeend', `${size}`); + svg.insertAdjacentHTML('beforeend', `${card.size}`); // 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); + } + } + } + } + } } diff --git a/TableturfBattleClient/src/StageButton.ts b/TableturfBattleClient/src/StageButton.ts index 77f94b6..adb87db 100644 --- a/TableturfBattleClient/src/StageButton.ts +++ b/TableturfBattleClient/src/StageButton.ts @@ -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]); } } } diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css index e041ee5..cfdd859 100644 --- a/TableturfBattleClient/tableturf.css +++ b/TableturfBattleClient/tableturf.css @@ -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);