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

Add more visual feedback for hover, selected and unavailable cards

Browse Source
This commit is contained in:
Andrio Celos
2022-10-05 16:37:15 +11:00
parent ff9039f245
commit ada0c9f150
4 changed files with 56 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
TableturfBattleClient/src/CardButton.ts
View File

@@ -95,4 +95,13 @@ class CardButton {
else
this.element.classList.add('disabled');
}
get checked() { return this.inputElement.checked; }
set checked(value: boolean) {
this.inputElement.checked = value;
if (this.inputElement.checked)
this.element.classList.add('checked');
else
this.element.classList.remove('checked');
}
}

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

@@ -80,14 +80,14 @@ function setupControlsForPlay() {
canPlayCard[i] = board.canPlayCard(currentGame.me.playerIndex, currentGame.me.hand[i], false);
canPlayCardAsSpecialAttack[i] = currentGame.players[currentGame.me.playerIndex].specialPoints >= currentGame.me.hand[i].specialCost
&& board.canPlayCard(currentGame.me.playerIndex, currentGame.me.hand[i], true);
handButtons[i].inputElement.disabled = !canPlayCard[i];
handButtons[i].enabled = canPlayCard[i];
}
specialButton.disabled = !canPlayCardAsSpecialAttack.includes(true);
board.autoHighlight = true;
} else {
for (const button of handButtons) {
button.inputElement.disabled = true;
button.enabled = false;
passButton.disabled = true;
specialButton.disabled = true;
}
@@ -188,7 +188,11 @@ function updateHand(cards: any[]) {
button.inputElement.name = 'handCard';
handButtons.push(button);
button.inputElement.addEventListener('change', e => {
if (button.inputElement.checked) {
if (button.checked) {
for (const button2 of handButtons) {
if (button2 != button)
button2.element.classList.remove('checked');
}
if (passButton.checked) {
if (canPlay) {
canPlay = false;
@@ -232,12 +236,12 @@ passButton.addEventListener('change', e => {
board.cardPlaying = null;
board.specialAttack = false;
for (const el of handButtons) {
el.inputElement.disabled = false;
el.inputElement.checked = false;
el.enabled = true;
el.checked = false;
}
} else {
for (let i = 0; i < 4; i++) {
handButtons[i].inputElement.disabled = !canPlayCard[i];
handButtons[i].enabled = canPlayCard[i];
}
}
});
@@ -247,15 +251,15 @@ specialButton.addEventListener('change', e => {
passButton.checked = false;
board.autoHighlight = true;
for (let i = 0; i < 4; i++) {
handButtons[i].inputElement.disabled = !canPlayCardAsSpecialAttack[i];
handButtons[i].enabled = canPlayCardAsSpecialAttack[i];
if (!canPlayCardAsSpecialAttack[i])
handButtons[i].inputElement.checked = false;
handButtons[i].checked = false;
}
} else {
for (let i = 0; i < 4; i++) {
handButtons[i].inputElement.disabled = !canPlayCard[i];
handButtons[i].enabled = canPlayCard[i];
if (!canPlayCard[i])
handButtons[i].inputElement.checked = false;
handButtons[i].checked = false;
}
}
});

2
TableturfBattleClient/src/Pages/LobbyPage.ts
View File

@@ -82,7 +82,7 @@ cardDatabase.loadAsync().then(cards => {
for (const card of cards) {
const button = new CardButton('checkbox', card);
cardButtons.push(button);
button.inputElement.checked = lastDeck != null && lastDeck.includes(card.number);
button.checked = lastDeck != null && lastDeck.includes(card.number);
button.inputElement.addEventListener('input', updateDeckCount);
cardList.appendChild(button.element);
}

41
TableturfBattleClient/tableturf.css
View File

@@ -67,7 +67,7 @@ footer {
font-family: 'Splatoon 1', 'Arial Black', sans-serif;
font-weight: 599;
display: inline-block;
border: 1px solid;
border: 1px solid var(--colour);
border-radius: 0.5em;
width: 10em;
margin: 5px;
@@ -75,15 +75,15 @@ footer {
}
.card.common {
border-color: #5931FF;
--colour: rgb(89, 49, 255);
}
.card.rare {
border-color: yellow;
--colour: rgb(231, 180, 39);
}
.card.fresh {
border-color: white;
--colour: white;
}
.cardHeader {
@@ -114,17 +114,17 @@ footer {
}
.card.common .cardName {
color: rgb(89, 49, 255);
color: var(--colour);
}
.card.rare .cardName {
background: yellow;
background: -webkit-linear-gradient(0, rgb(255, 242, 129) 0%, rgb(255, 255, 224) 15%, rgb(231, 180, 39) 50%, rgb(255, 255, 224) 85%, rgb(255, 242, 129) 100%);
background: var(--colour);
background: linear-gradient(90deg, rgb(255, 242, 129) 0%, rgb(255, 255, 224) 15%, rgb(231, 180, 39) 50%, rgb(255, 255, 224) 85%, rgb(255, 242, 129) 100%);
background-clip: text;
color: transparent;
}
.card.fresh .cardName {
background: white;
background: -webkit-linear-gradient(-30deg, rgba(253, 217, 169, 1) 0%, rgba(200, 58, 141, 1) 50%, rgba(55, 233, 207, 1) 100%);
background: var(--colour);
background: linear-gradient(120deg, rgba(253, 217, 169, 1) 0%, rgba(200, 58, 141, 1) 50%, rgba(55, 233, 207, 1) 100%);
background-clip: text;
color: transparent;
flex-grow: 0;
@@ -169,6 +169,29 @@ footer {
margin-right: 0.3em;
}
.card::before {
/* If it exists */
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -2;
opacity: 0.25;
}
.card:hover:not(.checked):not(.disabled)::before {
content: '';
background: grey;
}
.card.checked::before {
content: '';
background: var(--colour);
}
.card.disabled {
opacity: 0.5;
}
/* Board */
#gameBoard {