ui/analyse refactoring

lichess-org · Mar 28, 2022 · 9fadded · 9fadded
1 parent 508e434
commit 9fadded
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 73 deletions.
diff --git a/ui/analyse/src/ctrl.ts b/ui/analyse/src/ctrl.ts
@@ -137,7 +137,7 @@ export default class AnalyseCtrl {
 
     {
       const loc = window.location,
-        hashPly = loc.hash === '#last' ? this.tree.lastPly() : parseInt(loc.hash.substr(1));
+        hashPly = loc.hash === '#last' ? this.tree.lastPly() : parseInt(loc.hash.slice(1));
       if (hashPly) {
         // remove location hash - https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh/5298684#5298684
         window.history.replaceState(null, '', loc.pathname + loc.search);
@@ -266,8 +266,7 @@ export default class AnalyseCtrl {
 
   private uciToLastMove(uci?: Uci): Key[] | undefined {
     if (!uci) return;
-    if (uci[1] === '@') return [uci.substr(2, 2), uci.substr(2, 2)] as Key[];
-    return [uci.substr(0, 2), uci.substr(2, 2)] as Key[];
+    return [uci.slice(uci[1] === '@' ? 2 : 0, 2), uci.slice(2, 2)] as Key[];
   }
 
   private showGround(): void {

diff --git a/ui/analyse/src/study/interfaces.ts b/ui/analyse/src/study/interfaces.ts
@@ -12,7 +12,7 @@ import { GlyphCtrl } from './studyGlyph';
 import { CommentForm } from './commentForm';
 import { TopicsCtrl } from './topics';
 import RelayCtrl from './relay/relayCtrl';
-import { ServerEvalCtrl } from './serverEval';
+import ServerEval from './serverEval';
 import { MultiBoardCtrl } from './multiBoard';
 import { StudyShareCtrl } from './studyShare';
 import { TagsCtrl } from './studyTags';
@@ -35,7 +35,7 @@ export interface StudyCtrl {
   commentForm: CommentForm;
   glyphForm: GlyphCtrl;
   topics: TopicsCtrl;
-  serverEval: ServerEvalCtrl;
+  serverEval: ServerEval;
   share: StudyShareCtrl;
   tags: TagsCtrl;
   studyDesc: DescriptionCtrl;

diff --git a/ui/analyse/src/study/serverEval.ts b/ui/analyse/src/study/serverEval.ts
@@ -1,4 +1,4 @@
-import { defined, Prop, prop } from 'common';
+import { defined, prop } from 'common';
 import { bind, onInsert } from 'common/snabbdom';
 import spinner from 'common/spinner';
 import Highcharts from 'highcharts';
@@ -9,62 +9,45 @@ interface HighchartsHTMLElement extends HTMLElement {
   highcharts: Highcharts.ChartObject;
 }
 
-export interface ServerEvalCtrl {
-  requested: Prop<boolean>;
-  root: AnalyseCtrl;
-  chapterId(): string;
-  request(): void;
-  onMergeAnalysisData(): void;
-  chartEl: Prop<HighchartsHTMLElement | null>;
-  reset(): void;
-  lastPly: Prop<number | false>;
-}
-
-export function ctrl(root: AnalyseCtrl, chapterId: () => string): ServerEvalCtrl {
-  const requested = prop(false),
-    lastPly = prop<number | false>(false),
-    chartEl = prop<HighchartsHTMLElement | null>(null);
+export default class ServerEval {
+  requested = prop(false);
+  lastPly = prop<number | false>(false);
+  chartEl = prop<HighchartsHTMLElement | null>(null);
 
-  function unselect(chart: Highcharts.ChartObject) {
-    chart.getSelectedPoints().forEach(p => p.select(false));
+  constructor(readonly root: AnalyseCtrl, readonly chapterId: () => string) {
+    lichess.pubsub.on('analysis.change', (_fen: string, _path: string, mainlinePly: number | false) => {
+      if (!lichess.advantageChart || this.lastPly() === mainlinePly) return;
+      const lp = this.lastPly(typeof mainlinePly === 'undefined' ? this.lastPly() : mainlinePly),
+        el = this.chartEl(),
+        chart = el && el.highcharts;
+      if (chart) {
+        if (lp === false) this.unselect(chart);
+        else {
+          const point = chart.series[0].data[lp - 1 - root.tree.root.ply];
+          if (defined(point)) point.select();
+          else this.unselect(chart);
+        }
+      } else this.lastPly(false);
+    });
   }
 
-  lichess.pubsub.on('analysis.change', (_fen: string, _path: string, mainlinePly: number | false) => {
-    if (!lichess.advantageChart || lastPly() === mainlinePly) return;
-    const lp = lastPly(typeof mainlinePly === 'undefined' ? lastPly() : mainlinePly),
-      el = chartEl(),
-      chart = el && el.highcharts;
-    if (chart) {
-      if (lp === false) unselect(chart);
-      else {
-        const point = chart.series[0].data[lp - 1 - root.tree.root.ply];
-        if (defined(point)) point.select();
-        else unselect(chart);
-      }
-    } else lastPly(false);
-  });
+  unselect = (chart: Highcharts.ChartObject) => chart.getSelectedPoints().forEach(p => p.select(false));
 
-  return {
-    root,
-    reset() {
-      requested(false);
-      lastPly(false);
-    },
-    chapterId,
-    onMergeAnalysisData() {
-      if (lichess.advantageChart) lichess.advantageChart.update(root.data);
-    },
-    request() {
-      root.socket.send('requestAnalysis', chapterId());
-      requested(true);
-    },
-    requested,
-    lastPly,
-    chartEl,
+  reset = () => {
+    this.requested(false);
+    this.lastPly(false);
+  };
+
+  onMergeAnalysisData = () => {
+    if (lichess.advantageChart) lichess.advantageChart.update(this.root.data);
+  };
+  request = () => {
+    this.root.socket.send('requestAnalysis', this.chapterId());
+    this.requested(true);
   };
 }
 
-export function view(ctrl: ServerEvalCtrl): VNode {
+export function view(ctrl: ServerEval): VNode {
   const analysis = ctrl.root.data.analysis;
 
   if (!ctrl.root.showComputer()) return disabled();
@@ -89,28 +72,21 @@ export function view(ctrl: ServerEvalCtrl): VNode {
   );
 }
 
-function disabled(): VNode {
-  return h('div.study__server-eval.disabled.padded', 'You disabled computer analysis.');
-}
+const disabled = () => h('div.study__server-eval.disabled.padded', 'You disabled computer analysis.');
 
-function requested(): VNode {
-  return h('div.study__server-eval.requested.padded', spinner());
-}
+const requested = () => h('div.study__server-eval.requested.padded', spinner());
 
-function requestButton(ctrl: ServerEvalCtrl) {
-  const root = ctrl.root;
+function requestButton(ctrl: ServerEval) {
+  const root = ctrl.root,
+    noarg = root.trans.noarg;
   return h(
     'div.study__message',
     root.mainline.length < 5
-      ? h('p', root.trans.noarg('theChapterIsTooShortToBeAnalysed'))
+      ? h('p', noarg('theChapterIsTooShortToBeAnalysed'))
       : !root.study!.members.canContribute()
-      ? [root.trans.noarg('onlyContributorsCanRequestAnalysis')]
+      ? [noarg('onlyContributorsCanRequestAnalysis')]
       : [
-          h('p', [
-            root.trans.noarg('getAFullComputerAnalysis'),
-            h('br'),
-            root.trans.noarg('makeSureTheChapterIsComplete'),
-          ]),
+          h('p', [noarg('getAFullComputerAnalysis'), h('br'), noarg('makeSureTheChapterIsComplete')]),
           h(
             'a.button.text',
             {
@@ -120,7 +96,7 @@ function requestButton(ctrl: ServerEvalCtrl) {
               },
               hook: bind('click', ctrl.request, root.redraw),
             },
-            root.trans.noarg('requestAComputerAnalysis')
+            noarg('requestAComputerAnalysis')
           ),
         ]
   );

diff --git a/ui/analyse/src/study/studyCtrl.ts b/ui/analyse/src/study/studyCtrl.ts
@@ -15,7 +15,7 @@ import { ctrl as topicsCtrl, TopicsCtrl } from './topics';
 import { ctrl as notifCtrl } from './notif';
 import { ctrl as shareCtrl } from './studyShare';
 import { ctrl as tagsCtrl } from './studyTags';
-import { ctrl as serverEvalCtrl } from './serverEval';
+import ServerEval from './serverEval';
 import * as tours from './studyTour';
 import * as xhr from './studyXhr';
 import { path as treePath } from 'tree';
@@ -193,7 +193,7 @@ export default function (
     redraw
   );
 
-  const serverEval = serverEvalCtrl(ctrl, () => vm.chapterId);
+  const serverEval = new ServerEval(ctrl, () => vm.chapterId);
 
   const topics: TopicsCtrl = topicsCtrl(
     topics => send('setTopics', topics),