gamebook hint & solution

public/stylesheets/gamebook.play.css

@@ -14,6 +14,7 @@
   position: relative;
   border: 1px solid #aaa;
   display: flex;
+  flex-flow: column;
 }
 .gb_play .comment::after {
   position: absolute;
@@ -33,6 +34,13 @@
   overflow-y: auto;
   padding: 10px 12px;
 }
+.gb_play .comment .hint {
+  background: #3893E8;
+  color: #fff;
+  border-radius: 0 0 5px 5px;
+  z-index: 2;
+  padding: 10px 12px;
+}
 @keyframes mascot {
   50% { transform: scale(1.03); }
   100% { transform: scale(1); }

ui/analyse/src/study/gamebook/gamebookPlayButtons.ts

@@ -4,18 +4,23 @@ import { bind, dataIcon } from '../../util';
 import AnalyseCtrl from '../../ctrl';
 import { shareButton } from '../studyView';
 
-export default function(root: AnalyseCtrl): VNode {
+export default function(root: AnalyseCtrl): VNode | undefined {
   const study = root.study!,
-  gb: Tree.Gamebook = root.node.gamebook || {};
+  ctrl = study.gamebookPlay();
+  if (!ctrl) return;
+  const state = ctrl.state,
+  fb = state.feedback;
   return h('div.study_buttons', [
     shareButton(study),
-    h('div.gb_buttons', [
-      gb.hint ? h('a.button.text', {
-        attrs: dataIcon('')
+    fb === 'play' ? h('div.gb_buttons', [
+      state.hint ? h('a.button.text', {
+        attrs: dataIcon(''),
+        hook: bind('click', ctrl.hint, ctrl.redraw)
       }, 'Get a hint') : null,
       h('a.button.text', {
-        attrs: dataIcon('G')
+        attrs: dataIcon('G'),
+        hook: bind('click', ctrl.solution, ctrl.redraw)
       }, 'View the solution')
-    ])
+    ]) : undefined
   ]);
 }

ui/analyse/src/study/gamebook/gamebookPlayCtrl.ts

@@ -10,6 +10,7 @@ export interface State {
   feedback: Feedback;
   comment?: string;
   hint?: string;
+  showHint: boolean;
 }
 
 export default class GamebookPlayCtrl {
@@ -64,6 +65,12 @@ export default class GamebookPlayCtrl {
     if (child) this.root.userJump(this.root.path + child.id);
   }
 
+  hint = () => {
+    if (this.state.hint) this.state.showHint = !this.state.showHint;
+  }
+
+  solution = () => this.next();
+
   canJumpTo = (path: Tree.Path) => treePath.contains(this.root.path, path);
 
   onJump = () => {

ui/analyse/src/study/gamebook/gamebookPlayView.ts

@@ -1,5 +1,6 @@
 import { h } from 'snabbdom'
 import { VNode } from 'snabbdom/vnode'
+import { Hooks } from 'snabbdom/hooks'
 import GamebookPlayCtrl from './gamebookPlayCtrl';
 // import AnalyseCtrl from '../../ctrl';
 import { bind, dataIcon, innerHTML } from '../../util';
@@ -19,17 +20,16 @@ export function render(ctrl: GamebookPlayCtrl): VNode {
 
   const root = ctrl.root,
   state = ctrl.state;
-  // state.feedback = 'bad';
 
-  const comment = state.comment || defaultComments[state.feedback],
-  isMyMove = ['good', 'bad'].indexOf(state.feedback) > -1;
+  const comment = state.comment || defaultComments[state.feedback];
 
   return h('div.gamebook', {
     hook: { insert: _ => window.lichess.loadCss('/assets/stylesheets/gamebook.play.css') }
   }, [
-    h('div.comment', h('div.content', {
-      hook: innerHTML(comment, text => enrichText(text, true))
-    })),
+    h('div.comment', [
+      h('div.content', { hook: richHTML(comment) }),
+      state.showHint ? h('div.hint', { hook: richHTML(state.hint!) }) : undefined,
+    ]),
     h('img.mascot', {
       attrs: {
         width: 120,
@@ -65,3 +65,7 @@ function renderFeedback(ctrl: GamebookPlayCtrl, state: State) {
     h('span', fb === 'play' ? 'Your turn' : 'Opponent turn')
   );
 }
+
+function richHTML(text: string): Hooks {
+  return innerHTML(text, text => enrichText(text, true));
+}