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

Recolour some UI elements to match the player's ink

Browse Source
This commit is contained in:
Andrio Celos
2022-10-28 15:05:50 +11:00
parent 391b11a386
commit fc41531398
5 changed files with 48 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
TableturfBattleClient/src/Player.ts
View File

@@ -5,6 +5,7 @@ interface Player {
colour: Colour;
specialColour: Colour;
specialAccentColour: Colour;
uiBaseColourIsSpecialColour?: boolean;
totalSpecialPoints: number;
passes: number;
}

5
TableturfBattleClient/src/app.ts
View File

@@ -69,7 +69,7 @@ function clearUrlFromGame() {
location.hash = '';
}
function onGameStateChange(game: any, playerData: any) {
function onGameStateChange(game: any, playerData: PlayerData | null) {
if (currentGame == null)
throw new Error('currentGame is null');
clearPlayContainers();
@@ -78,6 +78,9 @@ function onGameStateChange(game: any, playerData: any) {
board.refresh();
}
loadPlayers(game.players);
gamePage.dataset.myPlayerIndex = playerData ? playerData.playerIndex.toString() : '';
gamePage.dataset.uiBaseColourIsSpecialColour = playerData && game.players[playerData.playerIndex].uiBaseColourIsSpecialColour ? 'true' : 'false';
redrawModal.hidden = true;
gamePage.classList.remove('gameEnded');
switch (game.state) {

54
TableturfBattleClient/tableturf.css
View File

@@ -28,6 +28,32 @@ body {
--primary-colour-4 : hsl(155, 95%, 50%);
--special-colour-4 : hsl(120, 95%, 50%);
--special-accent-colour-4: hsl(135, 95%, 85%);
--player-primary-colour: var(--primary-colour-1);
--player-special-colour: var(--special-colour-1);
--player-special-accent-colour: var(--special-accent-colour-1);
--player-ui-base-colour: var(--player-primary-colour);
--player-ui-highlight-colour: var(--player-special-colour);
--player-ui-highlight2-colour: var(--player-special-accent-colour);
}
#gamePage[data-ui-base-colour-is-special-colour="true"] {
--player-ui-base-colour: var(--player-special-colour);
--player-ui-highlight-colour: var(--player-primary-colour);
}
#gamePage[data-my-player-index="1"] {
--player-primary-colour: var(--primary-colour-2);
--player-special-colour: var(--special-colour-2);
--player-special-accent-colour: var(--special-accent-colour-2);
}
#gamePage[data-my-player-index="2"] {
--player-primary-colour: var(--primary-colour-3);
--player-special-colour: var(--special-colour-3);
--player-special-accent-colour: var(--special-accent-colour-3);
}
#gamePage[data-my-player-index="3"] {
--player-primary-colour: var(--primary-colour-4);
--player-special-colour: var(--special-colour-4);
--player-special-accent-colour: var(--special-accent-colour-4);
}
h1, h2, h3, h4, h5, h6 {
@@ -268,8 +294,8 @@ dialog::backdrop {
height: 0.5em;
border: 1px solid grey;
}
.cardGrid td.ink { background: hsl(63, 99%, 49%); border: 1px solid hsl(63, 99%, 49%);}
.cardGrid td.special { background: hsl(38, 100%, 49%); border: 1px solid hsl(38, 100%, 49%);}
.cardGrid td.ink { background: var(--player-primary-colour); border: 1px solid var(--player-primary-colour);}
.cardGrid td.special { background: var(--player-special-colour); border: 1px solid var(--player-special-colour);}
.cardFooter {
display: flex;
@@ -293,7 +319,7 @@ dialog::backdrop {
.cardSpecialPoint {
display: inline-block;
color: transparent;
background: var(--special-colour-1);
background: var(--player-special-colour);
width: 1ch;
height: 1ch;
margin-right: 0.3em;
@@ -458,7 +484,7 @@ dialog::backdrop {
margin: 0.5em;
padding: 0 0.5em;
text-align: center;
background: var(--primary-colour-1);
background: var(--player-ui-base-colour);
text-shadow: 0 0 4px black;
border-radius: 0.5em;
}
@@ -466,9 +492,9 @@ dialog::backdrop {
position: absolute;
left: -333px;
}
#playControls > label:hover { background: var(--special-colour-1); }
#playControls > label:focus-within { outline: 2px solid var(--special-accent-colour-2); }
#playControls > label:is(:active, .checked) { background: var(--special-accent-colour-1); }
#playControls > label:hover { background: var(--player-ui-highlight-colour); }
#playControls > label:focus-within { outline: 2px solid var(--player-ui-highlight2-colour); }
#playControls > label:is(:active, .checked) { background: var(--player-ui-highlight2-colour); }
#playControls > label.disabled { background: grey; }
#showDeckContainer {
@@ -499,7 +525,7 @@ dialog::backdrop {
text-align: center;
}
#showDeckList > li.inHand {
outline: 0.25em solid;
outline: 0.25em solid var(--player-ui-highlight-colour);
}
#showDeckList > li.used {
opacity: 0.35;
@@ -513,13 +539,13 @@ dialog::backdrop {
margin: 1em;
padding: 0 0.5em;
text-align: center;
background: var(--primary-colour-1);
background: var(--player-ui-base-colour);
text-shadow: 0 0 4px black;
border-radius: 0.5em;
}
#showDeckCloseButton:hover { background: var(--special-colour-1); }
#showDeckCloseButton:focus-within { outline: 2px solid var(--special-accent-colour-2); }
#showDeckCloseButton:active { background: var(--special-accent-colour-1); }
#showDeckCloseButton:hover { background: var(--player-ui-highlight-colour); }
#showDeckCloseButton:focus-within { outline: 2px solid var(--player-ui-highlight2-colour); }
#showDeckCloseButton:active { background: var(--player-ui-highlight2-colour); }
.playContainer { text-align: center; }
@@ -547,7 +573,7 @@ dialog::backdrop {
#gameButtonsContainer button {
background: none;
border: none;
color: var(--special-colour-1);
color: var(--player-ui-base-colour);
opacity: 0.5;
font-size: 400%;
width: 1.5em;
@@ -558,7 +584,7 @@ dialog::backdrop {
}
#gameButtonsContainer button:active {
opacity: 1;
color: var(--primary-colour-1);
color: var(--player-ui-highlight-colour);
}
#boardSection {

1
TableturfBattleServer/Game.cs
View File

@@ -135,6 +135,7 @@ public class Game {
2 => new(235, 180, 253),
_ => new(180, 253, 199),
};
this.Players[i].UIBaseColourIsSpecialColour = i != 1;
}
// Choose the stage.

2
TableturfBattleServer/Player.cs
View File

@@ -14,6 +14,8 @@ public class Player {
public Colour SpecialColour { get; set; }
[JsonProperty("specialAccentColour")]
public Colour SpecialAccentColour { get; set; }
[JsonProperty("uiBaseColourIsSpecialColour")]
public bool UIBaseColourIsSpecialColour { get; set; }
[JsonProperty("specialPoints")]
public int SpecialPoints { get; set; }