Fix and tweak player bar and player clocks

Not happy with this, rework later
WandererXII · Jul 2, 2024 · fdd7079 · fdd7079
1 parent 9da597b
commit fdd7079
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 10 deletions.
diff --git a/ui/analyse/css/_player-clock.scss b/ui/analyse/css/_player-clock.scss
@@ -10,11 +10,8 @@ $clock-height: 20px;
     }
   }
   @include breakpoint($mq-col1) {
-    .analyse__controls {
-      margin-top: $clock-height;
-    }
     .analyse__board {
-      margin: 1.6rem 0;
+      margin: 16px 0 20px 0;
     }
   }
 }
@@ -25,6 +22,7 @@ $clock-height: 20px;
   display: flex;
   position: absolute;
   right: 0;
+  text-shadow: none;
 
   height: $clock-height;
 
@@ -36,15 +34,15 @@ $clock-height: 20px;
     top: #{-$clock-height};
     z-index: 2; // over the board coords
     .time {
-      border-top-right-radius: 3px;
+      border-top-right-radius: $box-radius-size;
     }
   }
   &.bottom {
     @extend %box-shadow;
     @extend %box-radius-bottom;
     bottom: #{-$clock-height};
     .time {
-      border-bottom-right-radius: 3px;
+      border-bottom-right-radius: $box-radius-size;
     }
   }
   & > div {
@@ -61,6 +59,20 @@ $clock-height: 20px;
   tenths {
     font-size: 80%;
   }
+
+  @include breakpoint($mq-col1) {
+    background: none;
+    &.top {
+      left: 0;
+      right: unset;
+    }
+    &.bottom {
+      box-shadow: none;
+    }
+    .time {
+      border-radius: $box-radius-size;
+    }
+  }
   @include breakpoint($mq-col2) {
     @include hand-width(right);
     margin-right: 1px;

diff --git a/ui/analyse/css/study/_player.scss b/ui/analyse/css/study/_player.scss
@@ -71,4 +71,16 @@ $player-height: 1.6rem;
     margin-left: 0.5em;
     font-weight: normal;
   }
+
+  @include breakpoint($mq-col1) {
+    &-top,
+    &-bot {
+      background: none;
+      box-shadow: none;
+      border-radius: $box-radius-size;
+      .analyse__clock {
+        border-radius: $box-radius-size;
+      }
+    }
+  }
 }
diff --git a/ui/analyse/src/clocks.ts b/ui/analyse/src/clocks.ts
@@ -32,8 +32,8 @@ export default function renderClocks(ctrl: AnalyseCtrl, withNames: boolean): [VN
   const showTenths = true; // let's see
 
   return [
-    renderClock('sente', centis[0], sentePlayer, isSenteTurn, sentePov ? 'bottom' : 'top', showTenths),
-    renderClock('gote', centis[1], gotePlayer, !isSenteTurn, sentePov ? 'top' : 'bottom', showTenths),
+    renderClock('sente', centis[0], sentePlayer, isSenteTurn, sentePov ? 'bottom' : 'top', showTenths, showNames),
+    renderClock('gote', centis[1], gotePlayer, !isSenteTurn, sentePov ? 'top' : 'bottom', showTenths, showNames),
   ];
 }
 
@@ -43,14 +43,15 @@ function renderClock(
   player: game.Player | undefined,
   active: boolean,
   cls: string,
-  showTenths: boolean
+  showTenths: boolean,
+  showNames: boolean
 ): VNode {
   return h(
     `div.analyse__clock.${cls}`,
     {
       class: { active },
     },
-    [playerName(color, player), h('div.time', clockContent(centis, showTenths))]
+    [showNames ? playerName(color, player) : undefined, h('div.time', clockContent(centis, showTenths))]
   );
 }