lichess-org · ornicar · Jan 24, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024
diff --git a/app/views/study/jsI18n.scala b/app/views/study/jsI18n.scala
@@ -55,6 +55,7 @@ object jsI18n:
       allSyncMembersRemainOnTheSamePosition,
       shareChanges,
       playing,
+      showEvalBar,
       first,
       previous,
       next,

diff --git a/modules/i18n/src/main/I18nKeys.scala b/modules/i18n/src/main/I18nKeys.scala
@@ -1179,6 +1179,7 @@ object I18nKeys:
     val `allSyncMembersRemainOnTheSamePosition` = I18nKey("study:allSyncMembersRemainOnTheSamePosition")
     val `shareChanges` = I18nKey("study:shareChanges")
     val `playing` = I18nKey("study:playing")
+    val `showEvalBar` = I18nKey("study:showEvalBar")
     val `first` = I18nKey("study:first")
     val `previous` = I18nKey("study:previous")
     val `next` = I18nKey("study:next")

diff --git a/translation/source/study.xml b/translation/source/study.xml
@@ -53,6 +53,7 @@
   <string name="allSyncMembersRemainOnTheSamePosition">All SYNC members remain on the same position</string>
   <string name="shareChanges">Share changes with spectators and save them on the server</string>
   <string name="playing">Playing</string>
+  <string name="showEvalBar">Evaluation bars</string>
   <string name="first">First</string>
   <string name="previous">Previous</string>
   <string name="next">Next</string>

diff --git a/ui/analyse/css/study/panel/_multiboard.scss b/ui/analyse/css/study/panel/_multiboard.scss
@@ -11,13 +11,17 @@
     padding: 2em;
   }
 
-  .top {
+  &__top {
     @extend %flex-between;
 
-    padding: 0.4em 1.5em;
+    padding: 0.4em 1em 0.4em 0.4em;
+  }
+  &__options {
+    @extend %flex-center;
+    gap: 1em;
   }
 
-  .pager {
+  &__pager {
     @extend %flex-center;
 
     .page {
@@ -31,11 +35,13 @@
     padding: 0.6em 1em;
   }
 
-  .playing {
+  .playing,
+  .eval {
     cursor: pointer;
   }
 
-  .playing input {
+  .playing input,
+  .eval input {
     vertical-align: middle;
     margin-#{$end-direction}: 3px;
   }

diff --git a/ui/analyse/src/study/multiBoard.ts b/ui/analyse/src/study/multiBoard.ts
@@ -11,7 +11,8 @@ import { ChapterPreview, ChapterPreviewPlayer, Position, StudyChapterMeta } from
 import StudyCtrl from './studyCtrl';
 import { EvalHitMulti } from '../interfaces';
 import { povChances } from 'ceval/src/winningChances';
-import { defined } from 'common';
+import { Prop, defined } from 'common';
+import { storedBooleanPropWithEffect } from 'common/storage';
 
 interface CloudEval extends EvalHitMulti {
   chances: number;
@@ -22,6 +23,7 @@ export class MultiBoardCtrl {
   page = 1;
   pager?: Paginator<ChapterPreview>;
   playing = false;
+  showEval: Prop<boolean>;
 
   private cloudEvals: Map<Fen, CloudEval> = new Map();
 
@@ -31,7 +33,12 @@ export class MultiBoardCtrl {
     readonly trans: Trans,
     private readonly send: SocketSend,
     private readonly variant: () => VariantKey,
-  ) {}
+  ) {
+    this.showEval = storedBooleanPropWithEffect('analyse.multiboard.showEval', true, () => {
+      redraw();
+      this.requestCloudEvals();
+    });
+  }
 
   addNode = (pos: Position, node: Tree.Node) => {
     const cp = this.pager?.currentPageResults.find(cp => cp.id == pos.chapterId);
@@ -78,12 +85,11 @@ export class MultiBoardCtrl {
   };
 
   private requestCloudEvals = () => {
-    if (this.pager?.currentPageResults.length) {
+    if (this.pager?.currentPageResults.length && this.showEval())
       this.send('evalGetMulti', {
         fens: this.pager?.currentPageResults.map(c => c.fen),
         ...(this.variant() != 'standard' ? { variant: this.variant() } : {}),
       });
-    }
   };
 
   reloadEventually = debounce(this.reload, 1000);
@@ -145,9 +151,12 @@ export function view(ctrl: MultiBoardCtrl, study: StudyCtrl): VNode | undefined
 
 function renderPager(pager: Paginator<ChapterPreview>, study: StudyCtrl): MaybeVNodes {
   const ctrl = study.multiBoard;
-  const cloudEval = study.ctrl.ceval?.enabled() ? ctrl.getCloudEval : undefined;
+  const cloudEval = ctrl.showEval() && study.ctrl.ceval?.enabled() ? ctrl.getCloudEval : undefined;
   return [
-    h('div.top', [renderPagerNav(pager, ctrl), renderPlayingToggle(ctrl)]),
+    h('div.study__multiboard__top', [
+      renderPagerNav(pager, ctrl),
+      h('div.study__multiboard__options', [renderEvalToggle(ctrl), renderPlayingToggle(ctrl)]),
+    ]),
     h('div.now-playing', pager.currentPageResults.map(makePreview(study, cloudEval))),
   ];
 }
@@ -162,11 +171,21 @@ function renderPlayingToggle(ctrl: MultiBoardCtrl): VNode {
   ]);
 }
 
+function renderEvalToggle(ctrl: MultiBoardCtrl): VNode {
+  return h('label.eval', [
+    h('input', {
+      attrs: { type: 'checkbox', checked: ctrl.showEval() },
+      hook: bind('change', e => ctrl.showEval((e.target as HTMLInputElement).checked)),
+    }),
+    ctrl.trans.noarg('showEvalBar'),
+  ]);
+}
+
 function renderPagerNav(pager: Paginator<ChapterPreview>, ctrl: MultiBoardCtrl): VNode {
   const page = ctrl.page,
     from = Math.min(pager.nbResults, (page - 1) * pager.maxPerPage + 1),
     to = Math.min(pager.nbResults, page * pager.maxPerPage);
-  return h('div.pager', [
+  return h('div.study__multiboard__pager', [
     pagerButton(ctrl.trans.noarg('first'), licon.JumpFirst, () => ctrl.setPage(1), page > 1, ctrl),
     pagerButton(ctrl.trans.noarg('previous'), licon.JumpPrev, ctrl.prevPage, page > 1, ctrl),
     h('span.page', `${from}-${to} / ${pager.nbResults}`),