diff --git a/TableturfBattleClient/src/Player.ts b/TableturfBattleClient/src/Player.ts index 903a7d7..776e4e3 100644 --- a/TableturfBattleClient/src/Player.ts +++ b/TableturfBattleClient/src/Player.ts @@ -5,6 +5,7 @@ interface Player { colour: Colour; specialColour: Colour; specialAccentColour: Colour; + uiBaseColourIsSpecialColour?: boolean; totalSpecialPoints: number; passes: number; } diff --git a/TableturfBattleClient/src/app.ts b/TableturfBattleClient/src/app.ts index 73b43a1..bbde042 100644 --- a/TableturfBattleClient/src/app.ts +++ b/TableturfBattleClient/src/app.ts @@ -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) { diff --git a/TableturfBattleClient/tableturf.css b/TableturfBattleClient/tableturf.css index 9396202..c95376a 100644 --- a/TableturfBattleClient/tableturf.css +++ b/TableturfBattleClient/tableturf.css @@ -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 { diff --git a/TableturfBattleServer/Game.cs b/TableturfBattleServer/Game.cs index 5af2b66..246d963 100644 --- a/TableturfBattleServer/Game.cs +++ b/TableturfBattleServer/Game.cs @@ -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. diff --git a/TableturfBattleServer/Player.cs b/TableturfBattleServer/Player.cs index 7cc5a53..ccc1e76 100644 --- a/TableturfBattleServer/Player.cs +++ b/TableturfBattleServer/Player.cs @@ -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; }