improve gamebook UI

public/stylesheets/gamebook.play.css

@@ -1,5 +1,5 @@
 .gb_play .lichess_game .lichess_ground {
-  margin-bottom: -40px;
+  margin-bottom: -140px;
 }
 .gb_play .gamebook {
   height: 100%;
@@ -9,64 +9,49 @@
   font-size: 1.3em;
 }
 .gb_play .comment {
+  flex: 1 1 auto;
   background: #fff;
   border-radius: 10px;
-  padding: 10px;
   position: relative;
   border: 1px solid #aaa;
-  overflow-y: auto;
+  display: flex;
 }
-.gb_play .say {
-  margin: -9px 0 0 40%;
+.gb_play .comment:after {
+  position: absolute;
+  content: '';
+  bottom: -9px;
+  left: 40%;
   width: 15px;
   height: 15px;
   background: #fff;
   border-right: 1.5px solid #aaa;
   border-bottom: 1px solid #aaa;
   transform: skew(-45deg) rotate(45deg);
+  z-index: 1;
 }
-.gb_play .comment:after {
-  background: #fff;
+.gb_play .comment .content {
+  z-index: 2;
+  overflow-y: auto;
+  padding: 10px 12px;
 }
 .gb_play .mascot {
-  margin: 0.2em 0;
+  margin: 8px 0 -7px 0;
   cursor: pointer;
 }
+.gb_play .soapbox {
+  margin-top: 20px;
+  height: 120px;
+  background: #e0e0e0;
+  border: 1px solid #ccc;
+}
 .gb_play .turn {
   text-transform: uppercase;
-  height: 40px;
-  line-height: 40px;
-  padding: 0 20px;
-  background: #e0e0e0;
-  margin: 0 auto;
-  border: 1px solid #ccc;
-  border-top: 0;
-}
-.gb_play .act {
-  border: 1px solid #ccc;
+  line-height: 120px;
   text-align: center;
-  background: #e0e0e0;
-  display: flex;
-  flex-flow: row;
-  font-size: 0.8em;
+  font-size: 1.5em;
+  color: #3893E8;
 }
-.gb_play .act > * {
-  flex: 0 0 50%;
-  display: flex;
-  flex-flow: column;
-  padding: 1em 0;
-  opacity: 0.8;
-}
-.gb_play .act a:hover {
-  background: #3893E8;
-  color: #fff;
-  opacity: 1;
-}
-.gb_play .act i {
-  font-size: 2.3em;
-  padding-bottom: 0.3em;
-  opacity: 0.7;
-}
-.gb_play .act a:hover i {
-  opacity: 0.9;
+
+.gb_buttons .button {
+  margin-left: 10px;
 }

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

@@ -0,0 +1,21 @@
+import { h } from 'snabbdom'
+import { VNode } from 'snabbdom/vnode'
+import { bind, dataIcon } from '../../util';
+import AnalyseCtrl from '../../ctrl';
+import { shareButton } from '../studyView';
+
+export default function(root: AnalyseCtrl): VNode {
+  const study = root.study!,
+  gb: Tree.Gamebook = root.node.gamebook || {};
+  return h('div.study_buttons', [
+    shareButton(study),
+    h('div.gb_buttons', [
+      gb.hint ? h('a.button.text', {
+        attrs: dataIcon('')
+      }, 'Get a hint') : null,
+      h('a.button.text', {
+        attrs: dataIcon('G')
+      }, 'View the solution')
+    ])
+  ]);
+}

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

@@ -18,10 +18,9 @@ export function render(ctrl: GamebookPlayCtrl): VNode {
   return h('div.gamebook', {
     hook: { insert: _ => window.lichess.loadCss('/assets/stylesheets/gamebook.play.css') }
   }, [
-    h('div.comment', {
+    h('div.comment', h('div.content', {
       hook: comment && innerHTML(comment.text, text => enrichText(text, true))
-    }),
-    h('div.say'),
+    })),
     h('img.mascot', {
       attrs: {
         width: 120,
@@ -31,16 +30,8 @@ export function render(ctrl: GamebookPlayCtrl): VNode {
       },
       hook: bind('click', ctrl.mascot.switch, ctrl.redraw)
     }),
-    h('div.act', [
-      gb.hint ? h('a.hint', [
-        h('i', { attrs: dataIcon('') }),
-        'Get a hint'
-      ]) : h('span.hint'),
-      h('a.solution', [
-        h('i', { attrs: dataIcon('G') }),
-        'View the solution'
-      ])
-    ]),
-    h('span.turn', isMyMove ? 'Your turn' : 'Opponent turn')
+    h('div.soapbox', [
+      h('div.turn', isMyMove ? 'Your turn' : 'Opponent turn')
+    ])
   ]);
 }

ui/analyse/src/study/studyCtrl.ts

@@ -99,7 +99,8 @@ export default function(data: StudyData, ctrl: AnalyseCtrl, tagTypes: TagTypes,
     req.ch = vm.chapterId;
     return req;
   }
-  if (vm.mode.sticky) ctrl.userJump(data.position.path);
+  // remain on initial position if gamebook player
+  if (vm.mode.sticky && !(data.chapter.gamebook && !members.canContribute())) ctrl.userJump(data.position.path);
 
   function configureAnalysis() {
     if (ctrl.embed) return;
@@ -196,6 +197,7 @@ export default function(data: StudyData, ctrl: AnalyseCtrl, tagTypes: TagTypes,
     if (!data.chapter.gamebook || members.canContribute()) return gamebookPlay = undefined;
     if (gamebookPlay && gamebookPlay.chapterId === vm.chapterId) return;
     gamebookPlay = new GamebookPlayCtrl(ctrl, vm.chapterId, redraw);
+    vm.mode.sticky = false;
   }
   instanciateGamebookPlay();
 

ui/analyse/src/study/studyView.ts

@@ -14,6 +14,7 @@ import { view as studyShareView } from './studyShare';
 import { view as notifView } from './notif';
 import { view as tagsView } from './studyTags';
 import * as practiceView from './practice/studyPracticeView';
+import gamebookPlayButtons from './gamebook/gamebookPlayButtons';
 import AnalyseCtrl from '../ctrl';
 import { StudyCtrl, Tab } from './interfaces';
 import { MaybeVNodes } from '../interfaces';
@@ -38,13 +39,7 @@ function buttons(root: AnalyseCtrl): VNode {
         class: {on: ctrl.vm.mode.write },
         hook: bind('click', ctrl.toggleWrite)
       }, [ h('i.is'), 'Record' ]) : null,
-      h('a.button.share.hint--top', {
-        attrs: { 'data-hint': 'Share & export' },
-        class: { active: ctrl.share.open() },
-        hook: bind('click', ctrl.share.toggle, ctrl.redraw)
-      }, [
-        h('i', { attrs: dataIcon('z') })
-      ]),
+      shareButton(ctrl),
       ...(canContribute ? [
         h('a.button.comment.hint--top', {
           attrs: { 'data-hint': 'Comment this position' },
@@ -72,7 +67,7 @@ function buttons(root: AnalyseCtrl): VNode {
         ])
       ] : [])
     ]),
-    ctrl.gamebookPlay() ? null : h('span.button.help.hint--top', {
+    h('span.button.help.hint--top', {
       attrs: { 'data-hint': 'Need help? Get the tour!' },
       hook: bind('click', ctrl.startTour)
     }, [
@@ -81,6 +76,16 @@ function buttons(root: AnalyseCtrl): VNode {
   ]);
 }
 
+export function shareButton(ctrl: StudyCtrl) {
+  return h('a.button.share.hint--top', {
+    attrs: { 'data-hint': 'Share & export' },
+    class: { active: ctrl.share.open() },
+    hook: bind('click', ctrl.share.toggle, ctrl.redraw)
+  }, [
+    h('i', { attrs: dataIcon('z') })
+  ]);
+}
+
 function metadata(ctrl: StudyCtrl): VNode | undefined {
   const chapter = ctrl.currentChapter();
   const d = ctrl.data;
@@ -160,7 +165,7 @@ export function underboard(ctrl: AnalyseCtrl): MaybeVNodes {
   if (ctrl.studyPractice) return [practiceView.underboard(ctrl.study!)];
   const study = ctrl.study!;
   if (study.gamebookPlay()) return [
-    buttons(ctrl),
+    gamebookPlayButtons(ctrl),
     metadata(study)
   ];
   const commentForm = commentFormView(study.commentForm);