lichess-org · ornicar · Jan 12, 2025 · Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/modules/coreI18n/src/main/key.scala b/modules/coreI18n/src/main/key.scala
@@ -2396,6 +2396,7 @@ object I18nKey:
     val `allSyncMembersRemainOnTheSamePosition`: I18nKey = "study:allSyncMembersRemainOnTheSamePosition"
     val `shareChanges`: I18nKey = "study:shareChanges"
     val `playing`: I18nKey = "study:playing"
+    val `showResults`: I18nKey = "study:showResults"
     val `showEvalBar`: I18nKey = "study:showEvalBar"
     val `first`: I18nKey = "study:first"
     val `previous`: I18nKey = "study:previous"

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="showResults">Results</string>
   <string name="showEvalBar">Evaluation bars</string>
   <string name="first">First</string>
   <string name="previous">Previous</string>

diff --git a/ui/@types/lichess/i18n.d.ts b/ui/@types/lichess/i18n.d.ts
@@ -4867,6 +4867,8 @@ interface I18n {
     shareChanges: string;
     /** Evaluation bars */
     showEvalBar: string;
+    /** Results */
+    showResults: string;
     /** Spectator */
     spectator: string;
     /** Start */

diff --git a/ui/analyse/css/study/panel/_multiboard.scss b/ui/analyse/css/study/panel/_multiboard.scss
@@ -47,12 +47,14 @@
   }
 
   .playing,
-  .eval {
+  .eval,
+  .results {
     cursor: pointer;
   }
 
   .playing input,
-  .eval input {
+  .eval input,
+  .results input {
     vertical-align: middle;
     margin-inline-end: 3px;
   }
@@ -164,3 +166,8 @@
     border-radius: 4px 0 0 4px;
   }
 }
+
+.empty-boards-note {
+  padding: 1em;
+  color: $c-font-dim;
+}
diff --git a/ui/analyse/src/study/multiBoard.ts b/ui/analyse/src/study/multiBoard.ts
@@ -1,8 +1,8 @@
 import * as licon from 'common/licon';
 import { otbClockIsRunning, formatMs } from 'common/clock';
 import { fenColor } from 'common/miniBoard';
-import { type MaybeVNode, type VNode, bind, onInsert } from 'common/snabbdom';
-import { opposite as CgOpposite, uciToMove } from 'chessground/util';
+import { type MaybeVNode, type VNode, bind, dataIcon, onInsert } from 'common/snabbdom';
+import { opposite as cgOpposite, uciToMove } from 'chessground/util';
 import type { ChapterId, ChapterPreview, StudyPlayer } from './interfaces';
 import type StudyCtrl from './studyCtrl';
 import { type CloudEval, type MultiCloudEval, renderEvalToggle, renderScore } from './multiCloudEval';
@@ -12,11 +12,13 @@ import { type StudyChapters, gameLinkAttrs, gameLinksListener } from './studyCha
 import { playerFed } from './playerBars';
 import { userTitle } from 'common/userLink';
 import { h } from 'snabbdom';
-import { storage } from 'common/storage';
+import { storage, storedBooleanProp, StoredProp } from 'common/storage';
 import { Chessground as makeChessground } from 'chessground';
+import { EMPTY_BOARD_FEN } from 'chessops/fen';
 
 export class MultiBoardCtrl {
   playing: Toggle;
+  showResults: StoredProp<boolean>;
   teamSelect: Prop<string> = prop('');
   page: number = 1;
   maxPerPageStorage = storage.make('study.multiBoard.maxPerPage');
@@ -28,6 +30,7 @@ export class MultiBoardCtrl {
     readonly redraw: () => void,
   ) {
     this.playing = toggle(false, this.redraw);
+    this.showResults = storedBooleanProp('study.showResults', true);
     if (this.initialTeamSelect) this.onChapterChange(this.initialTeamSelect);
   }
 
@@ -102,16 +105,24 @@ export function view(ctrl: MultiBoardCtrl, study: StudyCtrl): MaybeVNode {
         ctrl.multiCloudEval &&
           h('label.eval', [renderEvalToggle(ctrl.multiCloudEval), i18n.study.showEvalBar]),
         renderPlayingToggle(ctrl),
+        renderShowResultsToggle(ctrl),
       ]),
     ]),
+    !ctrl.showResults()
+      ? h(
+          'div.empty-boards-note.text',
+          { attrs: dataIcon(licon.InfoCircle) },
+          'Since you chose to hide the results, all the preview boards are empty to avoid spoilers.',
+        )
+      : undefined,
     h(
       'div.now-playing',
       {
         hook: {
           insert: gameLinksListener(study.chapterSelect),
         },
       },
-      pager.currentPageResults.map(makePreview(baseUrl, study.vm.chapterId, cloudEval)),
+      pager.currentPageResults.map(makePreview(baseUrl, study.vm.chapterId, cloudEval, ctrl.showResults())),
     ),
   ]);
 }
@@ -176,6 +187,15 @@ const renderPlayingToggle = (ctrl: MultiBoardCtrl): MaybeVNode =>
     i18n.study.playing,
   ]);
 
+const renderShowResultsToggle = (ctrl: MultiBoardCtrl): MaybeVNode =>
+  h('label.results', [
+    h('input', {
+      attrs: { type: 'checkbox', checked: ctrl.showResults() },
+      hook: bind('change', e => ctrl.showResults((e.target as HTMLInputElement).checked), ctrl.redraw),
+    }),
+    i18n.study.showResults,
+  ]);
+
 const previewToCgConfig = (cp: ChapterPreview): CgConfig => ({
   fen: cp.fen,
   lastMove: uciToMove(cp.lastMove),
@@ -184,37 +204,36 @@ const previewToCgConfig = (cp: ChapterPreview): CgConfig => ({
 });
 
 const makePreview =
-  (roundPath: string, current: ChapterId, cloudEval?: MultiCloudEval) => (preview: ChapterPreview) => {
+  (roundPath: string, current: ChapterId, cloudEval?: MultiCloudEval, showResults?: boolean) =>
+  (preview: ChapterPreview) => {
     const orientation = preview.orientation || 'white';
     return h(
-      `a.mini-game.is2d.chap-${preview.id}`,
+      `a.mini-game.is2d.chap-${preview.id}${showResults ? '' : '.no-spoilers'}`,
       {
         class: { active: preview.id === current },
         attrs: gameLinkAttrs(roundPath, preview),
       },
       [
-        boardPlayer(preview, CgOpposite(orientation)),
+        boardPlayer(preview, cgOpposite(orientation), showResults),
         h('span.cg-gauge', [
-          cloudEval && verticalEvalGauge(preview, cloudEval),
+          showResults ? cloudEval && verticalEvalGauge(preview, cloudEval) : undefined,
           h(
             'span.mini-game__board',
             h('span.cg-wrap', {
               hook: {
                 insert(vnode) {
                   const el = vnode.elm as HTMLElement;
                   vnode.data!.cg = makeChessground(el, {
-                    ...previewToCgConfig(preview),
                     coordinates: false,
                     viewOnly: true,
                     orientation,
-                    drawable: {
-                      enabled: false,
-                      visible: false,
-                    },
+                    drawable: { enabled: false, visible: false },
+                    ...(showResults ? previewToCgConfig(preview) : { fen: EMPTY_BOARD_FEN }),
                   });
                   vnode.data!.fen = preview.fen;
                 },
                 postpatch(old, vnode) {
+                  if (!showResults) return;
                   if (old.data!.fen !== preview.fen) {
                     old.data!.cg?.set(previewToCgConfig(preview));
                   }
@@ -225,7 +244,7 @@ const makePreview =
             }),
           ),
         ]),
-        boardPlayer(preview, orientation),
+        boardPlayer(preview, orientation, showResults),
       ],
     );
   };
@@ -300,12 +319,12 @@ const computeTimeLeft = (preview: ChapterPreview, color: Color): number | undefi
   } else return;
 };
 
-const boardPlayer = (preview: ChapterPreview, color: Color) => {
+const boardPlayer = (preview: ChapterPreview, color: Color, showResults?: boolean) => {
   const outcome = preview.status && preview.status !== '*' ? preview.status : undefined;
   const player = preview.players?.[color],
     score = outcome?.split('-')[color === 'white' ? 0 : 1];
   return h('span.mini-game__player', [
     player && renderUser(player),
-    score ? h('span.mini-game__result', score) : renderClock(preview, color),
+    showResults ? (score ? h('span.mini-game__result', score) : renderClock(preview, color)) : undefined,
   ]);
 };
diff --git a/ui/analyse/src/study/relay/relayGames.ts b/ui/analyse/src/study/relay/relayGames.ts
@@ -12,6 +12,7 @@ export const gamesList = (study: StudyCtrl, relay: RelayCtrl) => {
   const chapters = study.chapters.list.all();
   const cloudEval = study.multiCloudEval?.thisIfShowEval();
   const roundPath = relay.roundPath();
+  const showResults = study.multiBoard.showResults();
   return h(
     'div.relay-games',
     {
@@ -45,7 +46,7 @@ export const gamesList = (study: StudyCtrl, relay: RelayCtrl) => {
               class: { 'relay-game--current': c.id === study.data.chapter.id },
             },
             [
-              cloudEval && verticalEvalGauge(c, cloudEval),
+              showResults ? cloudEval && verticalEvalGauge(c, cloudEval) : undefined,
               h(
                 'span.relay-game__players',
                 players.map((p, i) => {
@@ -58,7 +59,7 @@ export const gamesList = (study: StudyCtrl, relay: RelayCtrl) => {
                             playerFed(p.fed),
                             h('span.name', [userTitle(p), p.name]),
                           ]),
-                          h(s === '1' ? 'good' : s === '0' ? 'bad' : 'status', [s]),
+                          showResults ? h(s === '1' ? 'good' : s === '0' ? 'bad' : 'status', [s]) : null,
                         ]
                       : [h('span.mini-game__user', h('span.name', 'Unknown player'))],
                   );

diff --git a/ui/analyse/src/study/studyCtrl.ts b/ui/analyse/src/study/studyCtrl.ts
@@ -243,7 +243,11 @@ export default class StudyCtrl {
     this.practice = practiceData && new StudyPracticeCtrl(ctrl, data, practiceData);
 
     if (this.vm.mode.sticky && !this.isGamebookPlay()) this.ctrl.userJump(this.data.position.path);
-    else if (this.data.chapter.relayPath && !defined(this.ctrl.requestInitialPly))
+    else if (
+      this.data.chapter.relayPath &&
+      !defined(this.ctrl.requestInitialPly) &&
+      !(this.relay && !this.multiBoard.showResults())
+    )
       this.ctrl.userJump(this.data.chapter.relayPath);
 
     this.configureAnalysis();
@@ -361,7 +365,9 @@ export default class StudyCtrl {
     } else {
       nextPath = sameChapter
         ? prevPath
-        : this.data.chapter.relayPath || this.chapters.localPaths[this.vm.chapterId] || treePath.root;
+        : this.relay && !this.multiBoard.showResults()
+          ? treePath.root
+          : this.data.chapter.relayPath || this.chapters.localPaths[this.vm.chapterId] || treePath.root;
     }
 
     // path could be gone (because of subtree deletion), go as far as possible