gamebook UI WIP

public/stylesheets/gamebook.editor.css

@@ -1,25 +1,25 @@
-.is_gamebook_editor .lichess_game .lichess_ground {
+.gb_editor .lichess_game .lichess_ground {
   margin-bottom: -517px;
 }
-.is_gamebook_editor .gamebook {
+.gb_editor .gamebook_wrap {
   height: 500px;
 }
-.gamebook .editor {
+.gb_editor .gamebook {
   background: #e0e0e0;
   display: flex;
   flex-flow: column;
 }
-.gamebook .editor .deviation,
-.gamebook .editor .hint {
+.gb_editor .gamebook .deviation,
+.gb_editor .gamebook .hint {
   padding-top: 8px;
   display: flex;
   flex-flow: column;
 }
-.gamebook .editor label {
+.gb_editor .gamebook label {
   display: block;
   padding: 0 0 8px 10px;
 }
-.gamebook .editor textarea {
+.gb_editor .gamebook textarea {
   resize: vertical;
   width: 100%;
   box-sizing: border-box;
@@ -27,23 +27,23 @@
   border-width: 1px 0;
   padding: 5px;
 }
-.gamebook .editor .hint textarea {
+.gb_editor .gamebook .hint textarea {
   height: 5em;
 }
-.gamebook .editor .legend {
+.gb_editor .gamebook .legend {
   padding: 8px 10px;
   border-bottom: 1px solid #ccc;
 }
-.gamebook .editor .legend::before {
+.gb_editor .gamebook .legend::before {
   display: block;
   float: left;
   font-size: 2.5em;
   margin: 2px 8px 0 0;
   opacity: 0.5;
 }
-.gamebook .editor .todo {
+.gb_editor .gamebook .todo {
   border-left: 5px solid #dc322f;
 }
-.gamebook .editor .done {
+.gb_editor .gamebook .done {
   border-left: 5px solid #759900;
 }

public/stylesheets/gamebook.player.css

@@ -0,0 +1,2 @@
+.gb_player .gamebook {
+}

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

@@ -66,12 +66,12 @@ export function render(ctrl: AnalyseCtrl): VNode {
       'Or promote it as the mainline if it is the right move.')
   ];
 
-  return h('div.gamebook', {
+  return h('div.gamebook_wrap', {
     hook: {
       insert: _ => window.lichess.loadCss('/assets/stylesheets/gamebook.editor.css')
     }
   }, [
-    h('div.editor', content)
+    h('div.gamebook', content)
   ]);
 }
 

ui/analyse/src/study/gamebook/player/gamebookPlayerView.ts

@@ -14,9 +14,7 @@ export function render(ctrl: GamebookPlayerCtrl): VNode {
   comment = (root.node.comments || [])[0];
 
   return h('div.gamebook', {
-    hook: {
-      insert: _ => window.lichess.loadCss('/assets/stylesheets/gamebook.player.css')
-    }
+    hook: { insert: _ => window.lichess.loadCss('/assets/stylesheets/gamebook.player.css') }
   }, [
     h('div.player', [
       h('div.turn', isMyMove ? 'Your move' : 'Opponent move'),

ui/analyse/src/view.ts

@@ -164,9 +164,9 @@ function navClick(ctrl: AnalyseCtrl, action: 'prev' | 'next') {
 }
 
 function buttons(ctrl: AnalyseCtrl) {
-  const canJumpPrev = ctrl.path !== '';
-  const canJumpNext = !!ctrl.node.children[0];
-  const menuIsOpen = ctrl.actionMenu.open;
+  const canJumpPrev = ctrl.path !== '',
+  canJumpNext = !!ctrl.node.children[0],
+  menuIsOpen = ctrl.actionMenu.open;
   return h('div.game_control', {
     hook: bind('mousedown', e => {
       const action = dataAct(e);
@@ -249,8 +249,7 @@ export default function(ctrl: AnalyseCtrl): VNode {
   studyStateClass = chapter ? chapter.id + ctrl.study!.vm.loading : 'nostudy',
   gamebookPlayer = ctrl.gamebookPlayer(),
   gamebookPlayerView = gamebookPlayer && gbPlayer.render(gamebookPlayer),
-  gamebookEditorView = gbEditor.running(ctrl) ? gbEditor.render(ctrl) : undefined,
-  isGamebook = !!(gamebookPlayerView || gamebookEditorView);
+  gamebookEditorView = gbEditor.running(ctrl) ? gbEditor.render(ctrl) : undefined;
   return h('div.analyse.cg-512', [
     h('div.' + studyStateClass, {
       hook: {
@@ -262,8 +261,8 @@ export default function(ctrl: AnalyseCtrl): VNode {
       class: {
         'gauge_displayed': ctrl.showEvalGauge(),
         'no_computer': !ctrl.showComputer(),
-        'is_gamebook': isGamebook,
-        'is_gamebook_editor': !!gamebookEditorView
+        'gb_editor': !!gamebookEditorView,
+        'gb_player': !!gamebookPlayerView
       }
     }, [
       h('div.lichess_game', {
@@ -272,19 +271,19 @@ export default function(ctrl: AnalyseCtrl): VNode {
         }
       }, [
         visualBoard(ctrl),
-        h('div.lichess_ground', [
+        h('div.lichess_ground', gamebookPlayerView || [
           menuIsOpen ? null : renderClocks(ctrl),
           menuIsOpen ? null : crazyView(ctrl, ctrl.topColor(), 'top'),
           ...(menuIsOpen ? [actionMenu(ctrl)] : [
             cevalView.renderCeval(ctrl),
             showCevalPvs ? cevalView.renderPvs(ctrl) : null,
             renderAnalyse(ctrl, concealOf),
-            isGamebook ? undefined : forkView(ctrl, concealOf),
+            gamebookEditorView ? null : forkView(ctrl, concealOf),
             retroView(ctrl) || practiceView(ctrl) || explorerView(ctrl)
           ]),
           menuIsOpen ? null : crazyView(ctrl, ctrl.bottomColor(), 'bottom'),
           buttons(ctrl),
-          gamebookEditorView || gamebookPlayerView
+          gamebookEditorView
         ])
       ])
     ]),