relocate gamebook hint button

public/stylesheets/gamebook.play.css

@@ -36,13 +36,19 @@
   padding: 12px;
   min-height: 2.5em;
 }
-.gb_play .comment .hint {
+.gb_play .comment div.hint {
   padding: 10px 12px;
   background: #3893E8;
   color: #fff;
+  cursor: pointer;
   border-radius: 0 0 5px 5px;
   z-index: 2;
 }
+.gb_play .comment a.hint {
+  padding: 0 0 10px 12px;
+  color: #3893E8;
+  font-size: 0.8em;
+}
 
 .gb_play .floor {
   margin-top: 20px;

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

@@ -19,11 +19,6 @@ export function playButtons(root: AnalyseCtrl): VNode | undefined {
         attrs: dataIcon('I'),
         hook: bind('click', () => root.userJump(''), ctrl.redraw)
       }, 'Back') : null,
-      myTurn && state.hint ? h('a.button.text.hint', {
-        class: { active: state.showHint },
-        attrs: dataIcon(''),
-        hook: bind('click', ctrl.hint, ctrl.redraw)
-      }, 'Get a hint') : null,
       myTurn ? h('a.button.text.solution', {
         attrs: dataIcon('G'),
         hook: bind('click', ctrl.solution, ctrl.redraw)

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

@@ -20,7 +20,7 @@ export function render(ctrl: GamebookPlayCtrl): VNode {
   }, [
     comment ? h('div.comment', [
       h('div.content', { hook: richHTML(comment) }),
-      state.showHint ? h('div.hint', { hook: richHTML(state.hint!) }) : undefined
+      hintZone(ctrl)
     ]) : undefined,
     h('div.floor', [
       renderFeedback(ctrl, state),
@@ -35,6 +35,17 @@ export function render(ctrl: GamebookPlayCtrl): VNode {
   ]);
 }
 
+function hintZone(ctrl: GamebookPlayCtrl) {
+  const state = ctrl.state,
+  clickHook = () => ({
+    hook: bind('click', ctrl.hint, ctrl.redraw)
+  });
+  if (state.showHint) return h('div', clickHook(), [
+    h('div.hint', { hook: richHTML(state.hint!) })
+  ]);
+  if (state.hint) return h('a.hint', clickHook(), 'Get a hint');
+}
+
 function renderFeedback(ctrl: GamebookPlayCtrl, state: State) {
   const fb = state.feedback;
   if (fb === 'bad') return h('div.feedback.act.bad' + (state.comment ? '.com' : ''), {