From 0a74d1f9266cc6f96b0f963194f02408ff4f68bd Mon Sep 17 00:00:00 2001
From: Thibault Duplessis <thibault.duplessis@gmail.com>
Date: Fri, 16 Mar 2018 10:14:42 -0500
Subject: [PATCH] keyboard hint in study gamebook

---
 public/stylesheets/gamebook.play.css              | 13 +++++++++++++
 ui/analyse/src/study/gamebook/gamebookPlayView.ts |  8 ++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/public/stylesheets/gamebook.play.css b/public/stylesheets/gamebook.play.css
index 622b544499..1dbb9c5e71 100644
--- a/public/stylesheets/gamebook.play.css
+++ b/public/stylesheets/gamebook.play.css
@@ -138,6 +138,19 @@
 .gb_buttons .button {
   margin-left: 10px;
 }
+.gb_play kbd {
+  padding: 4px 5px;
+  margin: 15px auto 0 auto;
+  font-family: monospace;
+  font-size: 12px;
+  line-height: 10px;
+  color: #444;
+  background-color: #fcfcfc;
+  border: solid 1px #ccc;
+  border-bottom-color: #bbb;
+  border-radius: 3px;
+  box-shadow: inset 0 -1px 0 #bbb;
+}
 
 body.dark .gb_play .comment,
 body.dark .gb_play .comment::after {
diff --git a/ui/analyse/src/study/gamebook/gamebookPlayView.ts b/ui/analyse/src/study/gamebook/gamebookPlayView.ts
index 0e25084726..76e6b9e76e 100644
--- a/ui/analyse/src/study/gamebook/gamebookPlayView.ts
+++ b/ui/analyse/src/study/gamebook/gamebookPlayView.ts
@@ -2,7 +2,7 @@ import { h } from 'snabbdom'
 import { VNode } from 'snabbdom/vnode'
 import { Hooks } from 'snabbdom/hooks'
 import GamebookPlayCtrl from './gamebookPlayCtrl';
-import { bind, dataIcon, enrichText, innerHTML } from '../../util';
+import { bind, dataIcon, iconTag, enrichText, innerHTML } from '../../util';
 import { State } from './gamebookPlayCtrl';
 
 const defaultComments = {
@@ -53,14 +53,14 @@ function renderFeedback(ctrl: GamebookPlayCtrl, state: State) {
   if (fb === 'bad') return h('div.feedback.act.bad' + (state.comment ? '.com' : ''), {
     hook: bind('click', ctrl.retry)
   }, [
-    h('i', { attrs: dataIcon('P') }),
+    iconTag('P'),
     h('span', 'Retry')
   ]);
   if (fb === 'good' && state.comment) return h('div.feedback.act.good.com', {
     hook: bind('click', ctrl.next)
   }, [
-    h('i', { attrs: dataIcon('G') }),
-    h('span', 'Next')
+    h('span.text', { attrs: dataIcon('G') }, 'Next'),
+    h('kbd', '<space>')
   ]);
   if (fb === 'end') return renderEnd(ctrl);
   return h('div.feedback.info.' + fb + (state.init ? '.init' : ''),