Analysis player clocks match player color

WandererXII · Jun 4, 2024 · 65b5344 · 65b5344
1 parent e83781c
commit 65b5344
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 13 deletions.
diff --git a/ui/analyse/css/_player-clock.scss b/ui/analyse/css/_player-clock.scss
@@ -20,28 +20,37 @@ $clock-height: 20px;
 }
 
 .analyse__clock {
-  @extend %metal;
-
   position: absolute;
   right: 0;
-  padding: 0 0.5em;
+  padding: 0 0.5em 0 0.75em;
 
   height: $clock-height;
 
   font-weight: bold;
   text-align: center;
 
+  border-right: 5px solid transparent;
+
   &.top {
     @extend %box-radius-top;
     top: #{-$clock-height};
     z-index: 2; // over the board coords
   }
   &.bottom {
+    @extend %box-shadow;
     @extend %box-radius-bottom;
     bottom: #{-$clock-height};
   }
+  &.sente {
+    background: $c-bg-sente;
+    color: $c-font-sente;
+  }
+  &.gote {
+    background: $c-bg-gote;
+    color: $c-font-gote;
+  }
   &.active {
-    background: mix($c-primary, $c-bg-box, 30%);
+    border-color: $c-good;
   }
   tenths {
     font-size: 80%;

diff --git a/ui/analyse/src/clocks.ts b/ui/analyse/src/clocks.ts
@@ -18,8 +18,8 @@ export default function renderClocks(ctrl: AnalyseCtrl, withNames: boolean): [VN
   if (!defined(clock) || ctrl.imported) {
     if (showNames && sentePlayer && gotePlayer && (!ctrl.synthetic || ctrl.imported))
       return [
-        renderOnlyName(sentePlayer, isSenteTurn, sentePov ? 'bottom' : 'top'),
-        renderOnlyName(gotePlayer, !isSenteTurn, sentePov ? 'top' : 'bottom'),
+        renderOnlyName('sente', sentePlayer, isSenteTurn, sentePov ? 'bottom' : 'top'),
+        renderOnlyName('gote', gotePlayer, !isSenteTurn, sentePov ? 'top' : 'bottom'),
       ];
     return;
   }
@@ -32,24 +32,25 @@ export default function renderClocks(ctrl: AnalyseCtrl, withNames: boolean): [VN
   const showTenths = true; // let's see
 
   return [
-    renderClock(centis[0], sentePlayer, isSenteTurn, sentePov ? 'bottom' : 'top', showTenths),
-    renderClock(centis[1], gotePlayer, !isSenteTurn, sentePov ? 'top' : 'bottom', showTenths),
+    renderClock('sente', centis[0], sentePlayer, isSenteTurn, sentePov ? 'bottom' : 'top', showTenths),
+    renderClock('gote', centis[1], gotePlayer, !isSenteTurn, sentePov ? 'top' : 'bottom', showTenths),
   ];
 }
 
 function renderClock(
+  color: Color,
   centis: number | undefined,
   player: game.Player | undefined,
   active: boolean,
   cls: string,
   showTenths: boolean
 ): VNode {
   return h(
-    'div.analyse__clock.' + cls,
+    `div.analyse__clock.${color}.${cls}`,
     {
       class: { active },
     },
-    [h('span', {}, playerName(player, true)), h('span', {}, clockContent(centis, showTenths))]
+    [h('span', playerName(player, true)), h('span', {}, clockContent(centis, showTenths))]
   );
 }
 
@@ -89,12 +90,12 @@ function playerName(player: game.Player | undefined, showSeparator: boolean): st
   );
 }
 
-function renderOnlyName(player: game.Player, active: boolean, cls: string) {
+function renderOnlyName(color: Color, player: game.Player, active: boolean, cls: string) {
   return h(
-    'div.analyse__clock.' + cls,
+    `div.analyse__clock.${color}.${cls}`,
     {
       class: { active },
     },
-    [playerName(player, false)]
+    playerName(player, false)
   );
 }
diff --git a/ui/common/css/theme/_dark.scss b/ui/common/css/theme/_dark.scss
@@ -103,3 +103,9 @@ $text-shadow: none;
 
 @mixin theme-style {
 }
+
+$c-bg-sente: $c-bg-zebra;
+$c-font-sente: $c-font;
+
+$c-bg-gote: $c-font;
+$c-font-gote: $c-bg-zebra;
diff --git a/ui/common/css/theme/_default.scss b/ui/common/css/theme/_default.scss
@@ -123,3 +123,9 @@ $box-shadow:
   0 3px 1px -2px rgba(0, 0, 0, 0.2),
   0 1px 5px 0 rgba(0, 0, 0, 0.12);
 // $box-shadow: 0 2px 2px 0 rgba(0,0,0,.157);
+
+$c-bg-sente: $c-font;
+$c-font-sente: $c-bg-zebra;
+
+$c-bg-gote: $c-bg-zebra;
+$c-font-gote: $c-font;
diff --git a/ui/common/css/theme/_transp.scss b/ui/common/css/theme/_transp.scss
@@ -52,3 +52,9 @@ $text-shadow: 0.5px 1px 1px #000;
     }
   }
 }
+
+$c-bg-sente: black;
+$c-font-sente: white;
+
+$c-bg-gote: white;
+$c-font-gonte: black;