improve gamebook UI
This commit is contained in:
parent
f895eaf69d
commit
cc803359dd
|
@ -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;
|
||||
}
|
||||
|
|
21
ui/analyse/src/study/gamebook/gamebookPlayButtons.ts
Normal file
21
ui/analyse/src/study/gamebook/gamebookPlayButtons.ts
Normal file
|
@ -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')
|
||||
])
|
||||
]);
|
||||
}
|
|
@ -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')
|
||||
])
|
||||
]);
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in a new issue