botPlay UI

Author: ornicar

ui/botPlay/css/play/_layout.scss

@@ -40,10 +40,7 @@ $col1-moves-height: 4em;
     grid-column-gap: $block-gap;
 
     &__table {
-      grid-area: 5 / 2 / 9 / 3;
-    }
-    &__opponent-img {
-      grid-area: 3 / 2 / 4 / 3;
+      grid-area: 4 / 2 / 8 / 3;
     }
 
     .keyboard-move {

ui/botPlay/css/play/_opponent.scss

@@ -1,30 +1,32 @@
 .bot-game__opponent {
   &__head {
     @extend %flex-center-nowrap;
-    gap: 2em;
+    gap: 1em;
+    padding: 0.8em 0.6em 0.8em 1em;
+    position: relative;
   }
 
-  &-img {
+  &__head img {
     max-height: calc(var(---cg-width) / 3);
     max-width: 50%;
     aspect-ratio: 1;
     line-height: 0;
-  }
-
-  &__description {
-    background: $c-bg-zebra;
-    padding: 0.8em 0.6em 0.8em 0.8em;
+    position: absolute;
+    bottom: 0;
+    right: 0;
   }
 
   &__name {
-    @include line-clamp(2);
-    margin-top: 0.3em;
     font-weight: normal;
     color: $c-brag;
     font-size: 1.6em;
-    text-align: center;
   }
   &__rating {
     color: $c-font-dim;
   }
+
+  &__description {
+    background: $c-bg-zebra;
+    padding: 0.8em 0.6em 0.8em 1em;
+  }
 }

ui/botPlay/src/play/view/playView.ts

@@ -26,7 +26,6 @@ export const playView = (ctrl: PlayCtrl) =>
 const viewTable = (ctrl: PlayCtrl) => {
   const diffs = materialDiffs(ctrl);
   return [
-    viewOpponentImage(ctrl.opts.bot),
     viewClockMat(ctrl, 'top', diffs[0]),
     viewOpponent(ctrl.opts.bot),
     viewMoves(ctrl),
@@ -158,14 +157,13 @@ const goThroughMoves = (ctrl: PlayCtrl, e: Event) => {
 };
 
 const viewOpponentImage = (bot: BotInfo) =>
-  h('img.bot-game__opponent-img', {
-    attrs: { src: bot.image && botAssetUrl('image', bot.image) },
-  });
+  bot.image && h('img', { attrs: { src: botAssetUrl('image', bot.image) } });
 
 const viewOpponent = (bot: BotInfo) =>
   h('div.bot-game__opponent', [
     h('div.bot-game__opponent__head', [
-      h('h2.bot-game__opponent__name', bot.name),
+      viewOpponentImage(bot),
+      h('span.bot-game__opponent__name', bot.name),
       h('span.bot-game__opponent__rating', '' + bot.ratings['classical']),
     ]),
     h('div.bot-game__opponent__description', bot.description),