use opening from explorer

ui/@types/lichess/index.d.ts

@@ -265,7 +265,6 @@ declare namespace Tree {
     ceval?: ClientEval;
     eval?: ServerEval;
     tbhit: TablebaseHit | undefined | null;
-    opening?: Opening;
     glyphs?: Glyph[];
     clock?: Clock;
     parentClock?: Clock;
@@ -302,11 +301,6 @@ declare namespace Tree {
     shapes?: Shape[]
   }
 
-  export interface Opening {
-    name: string;
-    eco: string;
-  }
-
   type GlyphId = number;
 
   interface Glyph {

ui/analyse/css/build/_analyse.base.scss

@@ -13,7 +13,6 @@
 @import '../../../tree/css/tree';
 @import '../../../ceval/css/ceval';
 @import '../../../ceval/css/eval-gauge';
-@import '../../../chess/css/opening';
 @import '../../../chess/css/control';
 @import '../../../chess/css/promotion';
 @import '../../../chess/css/variant-style';

ui/analyse/css/build/_analyse.embed.scss

@@ -17,7 +17,6 @@
 @import '../../../common/css/component/fbt';
 @import '../../../common/css/form/cmn-toggle';
 @import '../../../tree/css/tree';
-@import '../../../chess/css/opening';
 @import '../../../chess/css/control';
 @import '../../../chess/css/zh-pocket';
 

ui/analyse/src/ctrl.ts

@@ -504,8 +504,8 @@ export default class AnalyseCtrl {
     this.chessground.playPremove();
   }
 
-  addDests(dests: string, path: Tree.Path, opening?: Tree.Opening): void {
-    this.tree.addDests(dests, path, opening);
+  addDests(dests: string, path: Tree.Path): void {
+    this.tree.addDests(dests, path);
     if (path === this.path) {
       this.showGround();
       // this.redraw();

ui/analyse/src/explorer/explorerCtrl.ts

@@ -61,7 +61,7 @@ export default function(root: AnalyseCtrl, opts, allow: boolean): ExplorerCtrl {
     const fen = root.node.fen;
     const request: JQueryPromise<ExplorerData> = (withGames && tablebaseRelevant(effectiveVariant, fen)) ?
       xhr.tablebase(opts.tablebaseEndpoint, effectiveVariant, fen) :
-      xhr.opening(opts.endpoint, effectiveVariant, fen, config.data, withGames);
+      xhr.opening(opts.endpoint, effectiveVariant, root.nodeList[0].fen, root.nodeList.slice(1).map(s => s.uci!), config.data, withGames);
 
     request.then((res: ExplorerData) => {
       cache[fen] = res;
@@ -77,7 +77,7 @@ export default function(root: AnalyseCtrl, opts, allow: boolean): ExplorerCtrl {
   }, 250, true);
 
   const empty = {
-    opening: true,
+    isOpening: true,
     moves: {}
   };
 
@@ -88,7 +88,7 @@ export default function(root: AnalyseCtrl, opts, allow: boolean): ExplorerCtrl {
     if (node.ply > 50 && !tablebaseRelevant(effectiveVariant, node.fen)) {
       cache[node.fen] = empty;
     }
-    const cached = cache[root.node.fen];
+    const cached = cache[node.fen];
     if (cached) {
       movesAway(cached.moves.length ? 0 : movesAway() + 1);
       loading(false);
@@ -135,7 +135,7 @@ export default function(root: AnalyseCtrl, opts, allow: boolean): ExplorerCtrl {
       const masterCache = {};
       return (fen: Fen): JQueryPromise<OpeningData> => {
         if (masterCache[fen]) return $.Deferred().resolve(masterCache[fen]).promise() as JQueryPromise<OpeningData>;
-        return xhr.opening(opts.endpoint, 'standard', fen, {
+        return xhr.opening(opts.endpoint, 'standard', fen, [], {
           db: {
             selected: prop('masters')
           }

ui/analyse/src/explorer/explorerView.ts

@@ -4,7 +4,7 @@ import { view as renderConfig } from './explorerConfig';
 import { bind, dataIcon } from '../util';
 import { winnerOf } from './explorerUtil';
 import AnalyseCtrl from '../ctrl';
-import { isOpening, isTablebase, TablebaseMoveStats, OpeningMoveStats, OpeningGame } from './interfaces';
+import { isOpening, isTablebase, TablebaseMoveStats, OpeningData, OpeningMoveStats, OpeningGame } from './interfaces';
 
 function resultBar(move: OpeningMoveStats): VNode {
   const sum = move.white + move.draws + move.black;
@@ -46,18 +46,26 @@ function moveTableAttributes(ctrl: AnalyseCtrl, fen: Fen) {
   };
 }
 
-function showMoveTable(ctrl: AnalyseCtrl, moves: OpeningMoveStats[], fen: Fen): VNode | null {
-  if (!moves.length) return null;
+function showMoveTable(ctrl: AnalyseCtrl, data: OpeningData): VNode | null {
+  if (!data.moves.length) return null;
   const trans = ctrl.trans.noarg;
   return h('table.moves', [
     h('thead', [
+      data.opening ? h('tr', [
+        h('th.title', {
+          attrs: {
+            colspan: 3,
+            title: `${data.opening.eco} ${data.opening.name}`,
+          }
+        }, [h('strong', data.opening.eco), ' ',  data.opening.name])
+      ]) : null,
       h('tr', [
         h('th.title', trans('move')),
         h('th.title', trans('games')),
         h('th.title', trans('whiteDrawBlack'))
       ])
     ]),
-    h('tbody', moveTableAttributes(ctrl, fen), moves.map(move => {
+    h('tbody', moveTableAttributes(ctrl, data.fen), data.moves.map(move => {
       return h('tr', {
         key: move.uci,
         attrs: {
@@ -237,7 +245,7 @@ function show(ctrl: AnalyseCtrl) {
   const trans = ctrl.trans.noarg,
   data = ctrl.explorer.current();
   if (data && isOpening(data)) {
-    const moveTable = showMoveTable(ctrl, data.moves, data.fen),
+    const moveTable = showMoveTable(ctrl, data),
     recentTable = showGameTable(ctrl, trans('recentGames'), data.recentGames || []),
     topTable = showGameTable(ctrl, trans('topGames'), data.topGames || []);
     if (moveTable || recentTable || topTable) lastShow = h('div.data', [moveTable, topTable, recentTable]);

ui/analyse/src/explorer/explorerXhr.ts

@@ -1,10 +1,10 @@
 import { OpeningData, TablebaseData } from './interfaces';
 
-export function opening(endpoint: string, variant: VariantKey, fen: Fen, config, withGames: boolean): JQueryPromise<OpeningData> {
+export function opening(endpoint: string, variant: VariantKey, fen: Fen, play: string[], config, withGames: boolean): JQueryPromise<OpeningData> {
   let url: string;
   const params: any = {
     fen,
-    moves: 12
+    play: play.join(',')
   };
   if (!withGames) params.topGames = params.recentGames = 0;
   if (config.db.selected() === 'masters') url = '/master';
@@ -19,7 +19,7 @@ export function opening(endpoint: string, variant: VariantKey, fen: Fen, config,
     data: params,
     cache: true
   }).then((data: Partial<OpeningData>) => {
-    data.opening = true;
+    data.isOpening = true;
     data.fen = fen;
     return data as OpeningData;
   });

ui/analyse/src/explorer/interfaces.ts

@@ -40,7 +40,7 @@ export interface ExplorerConfigCtrl {
 export interface ExplorerData {
   fen: Fen;
   moves: MoveStats[];
-  opening?: true;
+  isOpening?: true;
   tablebase?: true;
 }
 
@@ -48,6 +48,12 @@ export interface OpeningData extends ExplorerData {
   moves: OpeningMoveStats[];
   topGames?: OpeningGame[];
   recentGames?: OpeningGame[];
+  opening?: Opening;
+}
+
+export interface Opening {
+  eco: string;
+  name: string;
 }
 
 export interface OpeningGame {
@@ -99,7 +105,7 @@ export interface TablebaseMoveStats extends MoveStats {
 }
 
 export function isOpening(m: ExplorerData): m is OpeningData {
-  return !!m.opening;
+  return !!m.isOpening;
 }
 export function isTablebase(m: ExplorerData): m is TablebaseData {
   return !!m.tablebase;

ui/analyse/src/socket.ts

@@ -87,7 +87,7 @@ export function make(send: SocketSend, ctrl: AnalyseCtrl): Socket {
       clearTimeout(anaDestsTimeout);
       if (!data.ch || data.ch === currentChapterId()) {
         anaDestsCache[data.path] = data;
-        ctrl.addDests(data.dests, data.path, data.opening);
+        ctrl.addDests(data.dests, data.path);
       } else
       console.log('socket handler node got wrong chapter id', data);
     },

ui/analyse/src/study/studyCtrl.ts

@@ -321,7 +321,7 @@ export default function(data: StudyData, ctrl: AnalyseCtrl, tagTypes: TagTypes,
       if (relay) relay.applyChapterRelay(data.chapter, d.relay);
       const newPath = ctrl.tree.addNode(node, position.path);
       if (!newPath) return xhrReload();
-      ctrl.tree.addDests(d.d, newPath, d.o);
+      ctrl.tree.addDests(d.d, newPath);
       if (sticky) data.position.path = newPath;
       if ((sticky && vm.mode.sticky) || (
         position.path === ctrl.path &&

ui/analyse/src/view.ts

@@ -77,7 +77,6 @@ function makeConcealOf(ctrl: AnalyseCtrl): ConcealOf | undefined {
 function renderAnalyse(ctrl: AnalyseCtrl, concealOf?: ConcealOf) {
   return h('div.analyse__moves.areplay', [
     (ctrl.embed && ctrl.study) ? h('div.chapter-name', ctrl.study.currentChapter().name) : null,
-    renderOpeningBox(ctrl),
     renderTreeView(ctrl, concealOf),
   ].concat(renderResult(ctrl)));
 }
@@ -228,17 +227,6 @@ function controls(ctrl: AnalyseCtrl) {
   ]);
 }
 
-function renderOpeningBox(ctrl: AnalyseCtrl) {
-  let opening = ctrl.tree.getOpening(ctrl.nodeList);
-  if (!opening && !ctrl.path) opening = ctrl.data.game.opening;
-  if (opening) return h('div.opening_box', {
-    attrs: { title: opening.eco + ' ' + opening.name }
-  }, [
-    h('strong', opening.eco),
-    ' ' + opening.name
-  ]);
-}
-
 function forceInnerCoords(ctrl: AnalyseCtrl, v: boolean) {
   if (ctrl.data.pref.coords == 2)
     $('body').toggleClass('coords-in', v).toggleClass('coords-out', !v);

ui/chess/css/_opening.scss

@@ -1,6 +0,0 @@
-.opening_box {
-  @extend %roboto, %nowrap-ellipsis;
-  padding: 5px;
-  border-bottom: $border;
-  background: $c-bg-zebra;
-}

ui/tree/src/tree.ts

@@ -10,11 +10,10 @@ export interface TreeWrapper {
   nodeAtPath(path: Tree.Path): Tree.Node;
   getNodeList(path: Tree.Path): Tree.Node[];
   longestValidPath(path: string): Tree.Path;
-  getOpening(nodeList: Tree.Node[]): Tree.Opening | undefined;
   updateAt(path: Tree.Path, update: (node: Tree.Node) => void): MaybeNode;
   addNode(node: Tree.Node, path: Tree.Path): Tree.Path | undefined;
   addNodes(nodes: Tree.Node[], path: Tree.Path): Tree.Path | undefined;
-  addDests(dests: string, path: Tree.Path, opening?: Tree.Opening): MaybeNode;
+  addDests(dests: string, path: Tree.Path): MaybeNode;
   setShapes(shapes: Tree.Shape[], path: Tree.Path): MaybeNode;
   setCommentAt(comment: Tree.Comment, path: Tree.Path): MaybeNode;
   deleteCommentAt(id: string, path: Tree.Path): MaybeNode;
@@ -116,14 +115,6 @@ export function build(root: Tree.Node): TreeWrapper {
     });
   }
 
-  function getOpening(nodeList: Tree.Node[]): Tree.Opening | undefined {
-    var opening: Tree.Opening | undefined;
-    nodeList.forEach(function(node: Tree.Node) {
-      opening = node.opening || opening;
-    });
-    return opening;
-  }
-
   function updateAt(path: Tree.Path, update: (node: Tree.Node) => void): Tree.Node | undefined {
     const node = nodeAtPathOrNull(path);
     if (node) {
@@ -223,14 +214,12 @@ export function build(root: Tree.Node): TreeWrapper {
     nodeAtPath,
     getNodeList,
     longestValidPath: (path: string) => longestValidPathFrom(root, path),
-    getOpening,
     updateAt,
     addNode,
     addNodes,
-    addDests(dests: string, path: Tree.Path, opening?: Tree.Opening) {
+    addDests(dests: string, path: Tree.Path) {
       return updateAt(path, function(node: Tree.Node) {
         node.dests = dests;
-        if (opening) node.opening = opening;
       });
     },
     setShapes(shapes: Tree.Shape[], path: Tree.Path) {