study multiboard WIP

modules/study/src/main/JsonView.scala

@@ -132,7 +132,7 @@ object JsonView {
   private[study] implicit val pathWrites: Writes[Path] = Writes[Path] { p =>
     JsString(p.toString)
   }
-  private implicit val colorWriter: Writes[chess.Color] = Writes[chess.Color] { c =>
+  private[study] implicit val colorWriter: Writes[chess.Color] = Writes[chess.Color] { c =>
     JsString(c.name)
   }
   private[study] implicit val fenWriter: Writes[FEN] = Writes[FEN] { f =>

modules/study/src/main/StudyMultiBoard.scala

@@ -25,13 +25,21 @@ final class StudyMultiBoard(
     )
   }
 
-  private val projection = $doc("name" -> true, "tags" -> true, "root" -> true)
+  private val projection = $doc(
+    "name" -> true,
+    "tags" -> true,
+    "root" -> true,
+    "setup.orientation" -> true
+  )
 
   private implicit val previewBSONReader = new BSONDocumentReader[ChapterPreview] {
     def read(doc: BSONDocument) = ChapterPreview(
       id = doc.getAs[Chapter.Id]("_id") err "Preview missing id",
       name = doc.getAs[Chapter.Name]("name") err "Preview missing name",
       players = doc.getAs[Tags]("tags") flatMap ChapterPreview.players,
+      orientation = doc.getAs[Bdoc]("setup") flatMap { setup =>
+        setup.getAs[Color]("orientation")
+      } getOrElse Color.White,
       fen = doc.getAs[Node.Root]("root").err("Preview missing root").lastMainlineNode.fen
     )
   }
@@ -58,6 +66,7 @@ object StudyMultiBoard {
       id: Chapter.Id,
       name: Chapter.Name,
       players: Option[ChapterPreview.Players],
+      orientation: Color,
       fen: FEN
   )
 

public/stylesheets/study.css

@@ -575,6 +575,27 @@ body.base .study_buttons .fbt.active {
   margin-top: 2em;
 }
 
+.multi_board {
+  padding: 4px 0 0 4px;
+  display: flex;
+  flex-flow: row wrap;
+}
+.multi_board .spinner {
+  margin: 50px auto;
+}
+.multi_board > a {
+  padding: 4px;
+  transition: background 0.13s;
+  background: rgba(255, 255, 255, 0.6);
+}
+.multi_board > a:hover {
+  background: rgba(191, 231, 255, 0.7);
+}
+.multi_board .cg-board-wrap {
+  width: 160px;
+  height: 160px;
+}
+
 div.advice_summary {
   margin-top: 42px;
 }

ui/analyse/src/study/interfaces.ts

@@ -182,7 +182,9 @@ export interface ChapterPreview {
     white: ChapterPreviewPlayer
     black: ChapterPreviewPlayer
   }
+  orientation: Color
   fen: string
+  lastMove?: string
 }
 
 export interface ChapterPreviewPlayer {

ui/analyse/src/study/multiBoard.ts

@@ -1,7 +1,9 @@
 import { h } from 'snabbdom'
 import { VNode } from 'snabbdom/vnode'
+import { Chessground } from 'chessground';
 import { ChapterPreview } from './interfaces';
 import { multiBoard as xhrLoad } from './studyXhr';
+import { spinner } from '../util';
 
 interface MultiBoardData {
   previews: [ChapterPreview]
@@ -26,9 +28,32 @@ export class MultiBoardCtrl {
 export function view(ctrl: MultiBoardCtrl): VNode | undefined {
 
   const data = ctrl.getData();
+  if (!data) return h('div.multi_board', spinner());
 
-  if (!data) 
-  console.log(data.previews);
-
-  return h('div.multi_board', 'multiboard!');
+  return h('div.multi_board',
+    data.previews.map(preview => {
+      return h('a.mini_board', [
+        makeCg(preview)
+      ])
+    })
+  );
+}
+
+function makeCg(preview: ChapterPreview) {
+  return h('div.cg-board-wrap', {
+    hook: {
+      insert(vnode) {
+        const lm = preview.lastMove;
+        Chessground(vnode.elm as HTMLElement, {
+          coordinates: false,
+          drawable: { enabled: false, visible: false },
+          resizable: false,
+          viewOnly: true,
+          orientation: preview.orientation,
+          fen: preview.fen,
+          lastMove: lm && ([lm[0] + lm[1], lm[2] + lm[3]] as Key[])
+        });
+      }
+    }
+  }, [ h('div.cg-board') ])
 }