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

Highlight a placement in deck test by hovering or clicking the list

Browse Source
This commit is contained in:
Andrio Celos 2023-11-30 11:35:17 +11:00
parent acc8cd247a
commit b9a3412ab1
3 changed files with 82 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
TableturfBattleClient/src/Board.ts
View File

@ -247,7 +247,6 @@ class Board {
}
const cell = this.cells[x2][y2];
cell.classList.add('hover');
cell.classList.add(`hover${this.playerIndex + 1}`);
if (!legal)
cell.classList.add('hoverillegal');
if (space == Space.SpecialInactive1)
@ -269,11 +268,26 @@ class Board {
private internalClearHighlight() {
for (const s of this.highlightedCells) {
this.cells[s.x][s.y].setAttribute('class', Space[this.grid[s.x][s.y]] );
this.cells[s.x][s.y].classList.remove('hover', 'hoverillegal', 'hoverspecial');
}
this.highlightedCells.splice(0);
}
setTestHighlight(x: number, y: number, highlight: boolean) {
if (highlight)
this.cells[x][y].classList.add('testHighlight');
else
this.cells[x][y].classList.remove('testHighlight');
}
clearTestHighlight() {
for (let x = 0; x < this.grid.length; x++) {
for (let y = 0; y < this.grid[x].length; y++) {
this.cells[x][y].classList.remove('testHighlight');
}
}
}
enableInkAnimations() {
this.table.classList.add('enableInkAnimation');
}
@ -434,7 +448,9 @@ class Board {
}
setDisplayedSpace(x: number, y: number, newState: Space) {
const isTestHighlight = this.cells[x][y].classList.contains('testHighlight');
this.cells[x][y].setAttribute('class', Space[newState]);
if (isTestHighlight) this.cells[x][y].classList.add('testHighlight');
if (this.cells[x][y].childNodes.length > 0) {
if ((newState & Space.SpecialActive1) != Space.SpecialActive1)
this.clearSpecialAnimation(x, y);

33
TableturfBattleClient/src/Pages/GamePage.ts
View File

@ -59,6 +59,7 @@ const testCardButtonGroup = new CheckButtonGroup<Card>();
const testDeckCardButtons: CardButton[] = [ ];
const testPlacements: { card: Card, placementResults: PlacementResults }[] = [ ];
const testCardListBackdrop = document.getElementById('testCardListBackdrop')!;
let testPlacementButtonClicked = false;
let playHintHtml: string | null = null;
@ -454,6 +455,27 @@ function testCardButton_click(button: CardButton) {
board.table.focus();
}
function testPlacementListItem_click(button: HTMLButtonElement, placement: Placement) {
testPlacementButtonClicked = true;
const highlight = button.classList.toggle('testHighlight');
for (const p of placement.spacesAffected)
board.setTestHighlight(p.space.x, p.space.y, highlight);
}
function testPlacementListItem_pointerenter(button: HTMLButtonElement, placement: Placement) {
testPlacementButtonClicked = false;
if (button.classList.contains('testHighlight')) return;
for (const p of placement.spacesAffected)
board.setTestHighlight(p.space.x, p.space.y, true);
}
function testPlacementListItem_pointerleave(button: HTMLButtonElement, placement: Placement) {
if (testPlacementButtonClicked) return;
if (button.classList.contains('testHighlight')) return;
for (const p of placement.spacesAffected)
board.setTestHighlight(p.space.x, p.space.y, false);
}
testUndoButton.buttonElement.addEventListener('click', () => {
const turn = testPlacements.pop();
if (turn) {
@ -471,6 +493,7 @@ testUndoButton.buttonElement.addEventListener('click', () => {
testBackButton.addEventListener('click', _ => {
showPage(editingDeck ? 'deckEdit' : 'deckList');
board.clearTestHighlight();
});
testDeckButton.buttonElement.addEventListener('click', _ => {
@ -1047,12 +1070,12 @@ board.onsubmit = (x, y) => {
if (result.specialSpacesActivated.length > 0)
setTimeout(() => board.refresh(), 333);
var li = document.createElement('div');
var li = document.createElement('button');
li.innerText = board.cardPlaying.name;
if (testDeckCardButtons.find(b => b.card.number == board.cardPlaying!.number))
li.classList.add('deckCard');
else
li.classList.add('externalCard');
li.classList.add(testDeckCardButtons.find(b => b.card.number == board.cardPlaying!.number) ? 'deckCard' : 'externalCard');
li.addEventListener('click', () => testPlacementListItem_click(li, result.placements[0]));
li.addEventListener('pointerenter', () => testPlacementListItem_pointerenter(li, result.placements[0]));
li.addEventListener('pointerleave', () => testPlacementListItem_pointerleave(li, result.placements[0]));
testPlacementList.insertBefore(li, testPlacementList.firstChild);
for (const button of testDeckCardButtons.concat(testAllCardsList.cardButtons)) {

47
TableturfBattleClient/tableturf.css
View File

@ -743,6 +743,16 @@ rect.special, g.specialCost rect {
position: relative;
}
#gameBoard td.testHighlight::after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: radial-gradient(#ffffff40, #ffffffc0 75%);
}
#gameBoard td.hover::after {
content: '';
position: absolute;
@ -765,14 +775,14 @@ rect.special, g.specialCost rect {
transform: rotate(-20deg);
}
#gameBoard td.hover1:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-1); }
#gameBoard td.hover2:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-2); }
#gameBoard td.hover3:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-3); }
#gameBoard td.hover4:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-4); }
#gameBoard td.hoverspecial.hover1:not(.hoverillegal)::after { --hover-colour: var(--special-colour-1); }
#gameBoard td.hoverspecial.hover2:not(.hoverillegal)::after { --hover-colour: var(--special-colour-2); }
#gameBoard td.hoverspecial.hover3:not(.hoverillegal)::after { --hover-colour: var(--special-colour-3); }
#gameBoard td.hoverspecial.hover4:not(.hoverillegal)::after { --hover-colour: var(--special-colour-4); }
#gamePage[data-my-player-index="0"] #gameBoard td.hover:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-1); }
#gamePage[data-my-player-index="1"] #gameBoard td.hover:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-2); }
#gamePage[data-my-player-index="2"] #gameBoard td.hover:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-3); }
#gamePage[data-my-player-index="3"] #gameBoard td.hover:not(.hoverillegal)::after { --hover-colour: var(--primary-colour-4); }
#gamePage[data-my-player-index="0"] #gameBoard td.hoverspecial:not(.hoverillegal)::after { --hover-colour: var(--special-colour-1); }
#gamePage[data-my-player-index="1"] #gameBoard td.hoverspecial:not(.hoverillegal)::after { --hover-colour: var(--special-colour-2); }
#gamePage[data-my-player-index="2"] #gameBoard td.hoverspecial:not(.hoverillegal)::after { --hover-colour: var(--special-colour-3); }
#gamePage[data-my-player-index="3"] #gameBoard td.hoverspecial:not(.hoverillegal)::after { --hover-colour: var(--special-colour-4); }
#gameBoard td.hoverillegal::after { --hover-colour: grey; }
/* Card list */
@ -1157,13 +1167,28 @@ rect.special, g.specialCost rect {
margin: 1em;
gap: 1em;
}
#testPlacementList div {
#testPlacementList button {
background: #222;
padding: 0.5em;
border: none;
font: inherit;
text-align: initial;
}
#testPlacementList div.deckCard {
#testPlacementList button:hover {
background: #444;
}
#testPlacementList button.testHighlight {
background: #555;
}
#testPlacementList button.deckCard {
background: #246;
}
#testPlacementList button.deckCard:hover {
background: #468;
}
#testPlacementList button.deckCard.testHighlight {
background: #579;
}
#gameButtonsContainer {
grid-column: score-column;
@ -1856,7 +1881,7 @@ button.dragging {
grid-column: 1 / -1;
grid-row: 2;
}
#lobbySelectedStageSection {
grid-row: 1;
grid-column: 2;