From ada0c9f150860931fc0a9323730dcec07ac832a1 Mon Sep 17 00:00:00 2001 From: Andrio Celos Date: Wed, 5 Oct 2022 16:37:15 +1100 Subject: [PATCH] Add more visual feedback for hover, selected and unavailable cards --- TableturfBattleClient/src/CardButton.ts | 9 +++++ TableturfBattleClient/src/Pages/GamePage.ts | 24 +++++++----- TableturfBattleClient/src/Pages/LobbyPage.ts | 2 +- TableturfBattleClient/tableturf.css | 41 +++++++++++++++----- 4 files changed, 56 insertions(+), 20 deletions(-) diff --git a/TableturfBattleClient/src/CardButton.ts b/TableturfBattleClient/src/CardButton.ts index 09b16ee..b76ed00 100644 --- a/TableturfBattleClient/src/CardButton.ts +++ b/TableturfBattleClient/src/CardButton.ts @@ -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'); + } } diff --git a/TableturfBattleClient/src/Pages/GamePage.ts b/TableturfBattleClient/src/Pages/GamePage.ts index 5db7665..7814430 100644 --- a/TableturfBattleClient/src/Pages/GamePage.ts +++ b/TableturfBattleClient/src/Pages/GamePage.ts @@ -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; } } }); diff --git a/TableturfBattleClient/src/Pages/LobbyPage.ts b/TableturfBattleClient/src/Pages/LobbyPage.ts index d631046..9c7dd02 100644 --- a/TableturfBattleClient/src/Pages/LobbyPage.ts +++ b/TableturfBattleClient/src/Pages/LobbyPage.ts @@ -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); } diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css index 99657ee..0bc6596 100644 --- a/TableturfBattleClient/tableturf.css +++ b/TableturfBattleClient/tableturf.css @@ -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 {