deepcrayon
/
lila
1
0
Fork 0
Code Releases Activity

replace explorer db selector with quicktabs

explorer-config-quicktabs
Niklas Fiekas 2021-10-31 17:08:22 +01:00
parent a5cde43803
commit a3d43dfd22
3 changed files with 57 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/analyse/css/explorer/_config.scss
View File

@ -4,12 +4,6 @@
margin: 0.4em $block-gap 0 $block-gap;
}
p.message {
white-space: normal;
padding: 5px 5px 0;
margin: $block-gap 0 0 0;
}
section.save {
text-align: center;
padding: 15px 0 10px 0;
@ -65,8 +59,9 @@
}
.name {
@extend %flex-center;
margin-top: 1em;
> div {
@extend %flex-center;
}
.player-name {
border-radius: $box-radius-size !important;
font-weight: bold;
@ -90,7 +85,6 @@
}
.date {
margin-top: 1em;
label {
@extend %flex-between-nowrap;
}

97
ui/analyse/src/explorer/explorerConfig.ts
View File

@ -21,7 +21,6 @@ type Month = string;
export interface ExplorerConfigData {
open: Prop<boolean>;
advanced: StoredJsonProp<boolean>;
db: StoredProp<ExplorerDb>;
rating: StoredJsonProp<number[]>;
speed: StoredJsonProp<ExplorerSpeed[]>;
@ -46,7 +45,6 @@ export class ExplorerConfigCtrl {
if (variant === 'standard') this.allDbs.unshift('masters');
this.data = {
open: prop(false),
advanced: storedJsonProp('explorer.advanced', () => false),
db: storedProp('explorer.db.' + variant, this.allDbs[0]),
rating: storedJsonProp('explorer.rating', () => allRatings),
speed: storedJsonProp<ExplorerSpeed[]>('explorer.speed', () => allSpeeds),
@ -102,24 +100,6 @@ export class ExplorerConfigCtrl {
export function view(ctrl: ExplorerConfigCtrl): VNode[] {
return [
h('section.db', [
h('label', ctrl.root.trans.noarg('database')),
h(
'div.choices',
ctrl.allDbs.map(s =>
h(
'button',
{
attrs: {
'aria-pressed': `${ctrl.data.db() === s}`,
},
hook: bind('click', _ => ctrl.data.db(s), ctrl.root.redraw),
},
s
)
)
),
]),
ctrl.data.db() === 'masters' ? masterDb(ctrl) : ctrl.data.db() === 'lichess' ? lichessDb(ctrl) : playerDb(ctrl),
h(
'section.save',
@ -142,52 +122,41 @@ const playerDb = (ctrl: ExplorerConfigCtrl) => {
return h('div.player-db', [
ctrl.data.playerName.open() ? playerModal(ctrl) : undefined,
h('section.name', [
h(
'div.choices',
h('label', 'Player'),
h('div', [
h(
`button.player-name${name ? '.active' : ''}`,
'div.choices',
h(
`button.player-name${name ? '.active' : ''}`,
{
hook: bind('click', () => ctrl.data.playerName.open(true), ctrl.root.redraw),
attrs: name ? { title: selectText } : undefined,
},
name || selectText
)
),
' as ',
h(
'button.button-link.text.color',
{
hook: bind('click', () => ctrl.data.playerName.open(true), ctrl.root.redraw),
attrs: name ? { title: selectText } : undefined,
attrs: dataIcon(''),
hook: bind('click', ctrl.toggleColor, ctrl.root.redraw),
},
name || selectText
)
),
' as ',
h(
'button.button-link.text.color',
{
attrs: dataIcon(''),
hook: bind('click', ctrl.toggleColor, ctrl.root.redraw),
},
ctrl.data.color()
),
ctrl.data.color()
),
]),
]),
speedSection(ctrl),
advancedSection(ctrl, [modeSection(ctrl), monthSection(ctrl)]),
modeSection(ctrl),
monthSection(ctrl),
]);
};
const advancedSection = (ctrl: ExplorerConfigCtrl, content: VNode[]): VNode =>
h('div.advanced', [
h(
'button.button-link.toggle',
{
hook: bind('click', () => ctrl.data.advanced(!ctrl.data.advanced()), ctrl.root.redraw),
},
['Advanced settings ', iconTag(ctrl.data.advanced() ? '' : '')]
),
...(ctrl.data.advanced() ? content : []),
]);
const masterDb = (ctrl: ExplorerConfigCtrl) =>
h('div', [
h('p.message', ctrl.root.trans('masterDbExplanation', 2200, minYear, '2019')),
advancedSection(ctrl, [
h('section.date', [
h('label', ['Since', yearInput(ctrl.data.since, () => '', ctrl.root.redraw)]),
h('label', ['Until', yearInput(ctrl.data.until, ctrl.data.since, ctrl.root.redraw)]),
]),
h('section.date', [
h('label', ['Since', yearInput(ctrl.data.since, () => '', ctrl.root.redraw)]),
h('label', ['Until', yearInput(ctrl.data.until, ctrl.data.since, ctrl.root.redraw)]),
]),
]);
@ -205,15 +174,12 @@ const radioButton =
const lichessDb = (ctrl: ExplorerConfigCtrl) =>
h('div', [
h('p.message', 'Rated games sampled from all Lichess players'),
speedSection(ctrl),
advancedSection(ctrl, [
h('section.rating', [
h('label', ctrl.root.trans.noarg('averageElo')),
h('div.choices', allRatings.map(radioButton(ctrl, ctrl.data.rating))),
]),
monthSection(ctrl),
h('section.rating', [
h('label', ctrl.root.trans.noarg('averageElo')),
h('div.choices', allRatings.map(radioButton(ctrl, ctrl.data.rating))),
]),
monthSection(ctrl),
]);
const speedSection = (ctrl: ExplorerConfigCtrl) =>
@ -223,7 +189,10 @@ const speedSection = (ctrl: ExplorerConfigCtrl) =>
]);
const modeSection = (ctrl: ExplorerConfigCtrl) =>
h('section.mode', [h('div.choices', allModes.map(radioButton(ctrl, ctrl.data.mode)))]);
h('section.mode', [
h('label', ctrl.root.trans.noarg('mode')),
h('div.choices', allModes.map(radioButton(ctrl, ctrl.data.mode))),
]);
const monthInput = (prop: StoredProp<Month>, after: () => Month, redraw: Redraw) => {
const validateRange = (input: HTMLInputElement) =>

37
ui/analyse/src/explorer/explorerView.ts
View File

@ -319,11 +319,12 @@ function show(ctrl: AnalyseCtrl): MaybeVNode {
const explorerTitle = (explorer: ExplorerCtrl) => {
const db = explorer.db();
const otherLink = (name: string) =>
const otherLink = (name: string, title: string) =>
h(
'button.button-link',
{
key: name,
attrs: { title },
hook: bind('click', () => explorer.config.data.db(name.toLowerCase() as ExplorerDb), explorer.reload),
},
name
@ -347,30 +348,37 @@ const explorerTitle = (explorer: ExplorerCtrl) => {
},
'Player'
);
const active = (nodes: MaybeVNodes) =>
const active = (nodes: MaybeVNodes, title: string) =>
h(
'span.active.text.' + db,
{
attrs: dataIcon(''),
attrs: { title, ...dataIcon('') },
hook: db == 'player' ? bind('click', explorer.config.toggleColor, explorer.reload) : undefined,
},
nodes
);
const playerName = explorer.config.data.playerName.value();
const masterDbExplanation = explorer.root.trans('masterDbExplanation', 2200, '1952', '2019'),
lichessDbExplanation = 'Rated games samples from all Lichess players';
return h('div.explorer-title', [
db == 'masters'
? active([h('strong', 'Masters'), ' database'])
? active([h('strong', 'Masters'), ' database'], masterDbExplanation)
: explorer.config.allDbs.includes('masters')
? otherLink('Masters')
? otherLink('Masters', masterDbExplanation)
: undefined,
db == 'lichess' ? active([h('strong', 'Lichess'), ' database']) : otherLink('Lichess'),
db == 'lichess'
? active([h('strong', 'Lichess'), ' database'], lichessDbExplanation)
: otherLink('Lichess', lichessDbExplanation),
db == 'player'
? active([
h(`strong${playerName.length > 14 ? '.long' : ''}`, playerName),
' as ',
explorer.config.data.color(),
explorer.isIndexing() ? h('i.ddloader', { attrs: { title: 'Indexing...' } }) : undefined,
])
? active(
[
h(`strong${playerName.length > 14 ? '.long' : ''}`, playerName),
' as ',
explorer.config.data.color(),
explorer.isIndexing() ? h('i.ddloader', { attrs: { title: 'Indexing...' } }) : undefined,
],
'Switch sides'
)
: playerLink(),
]);
};
@ -381,10 +389,7 @@ function showTitle(ctrl: AnalyseCtrl, variant: Variant) {
}
function showConfig(ctrl: AnalyseCtrl): VNode {
return h(
'div.config',
[h('div.title', showTitle(ctrl, ctrl.data.game.variant))].concat(renderConfig(ctrl.explorer.config))
);
return h('div.config', [explorerTitle(ctrl.explorer), ...renderConfig(ctrl.explorer.config)]);
}
function showFailing(ctrl: AnalyseCtrl) {