replace explorer db selector with quicktabs
parent
a5cde43803
commit
a3d43dfd22
|
@ -4,12 +4,6 @@
|
||||||
margin: 0.4em $block-gap 0 $block-gap;
|
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 {
|
section.save {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 15px 0 10px 0;
|
padding: 15px 0 10px 0;
|
||||||
|
@ -65,8 +59,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
@extend %flex-center;
|
> div {
|
||||||
margin-top: 1em;
|
@extend %flex-center;
|
||||||
|
}
|
||||||
.player-name {
|
.player-name {
|
||||||
border-radius: $box-radius-size !important;
|
border-radius: $box-radius-size !important;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -90,7 +85,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.date {
|
.date {
|
||||||
margin-top: 1em;
|
|
||||||
label {
|
label {
|
||||||
@extend %flex-between-nowrap;
|
@extend %flex-between-nowrap;
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,7 +21,6 @@ type Month = string;
|
||||||
|
|
||||||
export interface ExplorerConfigData {
|
export interface ExplorerConfigData {
|
||||||
open: Prop<boolean>;
|
open: Prop<boolean>;
|
||||||
advanced: StoredJsonProp<boolean>;
|
|
||||||
db: StoredProp<ExplorerDb>;
|
db: StoredProp<ExplorerDb>;
|
||||||
rating: StoredJsonProp<number[]>;
|
rating: StoredJsonProp<number[]>;
|
||||||
speed: StoredJsonProp<ExplorerSpeed[]>;
|
speed: StoredJsonProp<ExplorerSpeed[]>;
|
||||||
|
@ -46,7 +45,6 @@ export class ExplorerConfigCtrl {
|
||||||
if (variant === 'standard') this.allDbs.unshift('masters');
|
if (variant === 'standard') this.allDbs.unshift('masters');
|
||||||
this.data = {
|
this.data = {
|
||||||
open: prop(false),
|
open: prop(false),
|
||||||
advanced: storedJsonProp('explorer.advanced', () => false),
|
|
||||||
db: storedProp('explorer.db.' + variant, this.allDbs[0]),
|
db: storedProp('explorer.db.' + variant, this.allDbs[0]),
|
||||||
rating: storedJsonProp('explorer.rating', () => allRatings),
|
rating: storedJsonProp('explorer.rating', () => allRatings),
|
||||||
speed: storedJsonProp<ExplorerSpeed[]>('explorer.speed', () => allSpeeds),
|
speed: storedJsonProp<ExplorerSpeed[]>('explorer.speed', () => allSpeeds),
|
||||||
|
@ -102,24 +100,6 @@ export class ExplorerConfigCtrl {
|
||||||
|
|
||||||
export function view(ctrl: ExplorerConfigCtrl): VNode[] {
|
export function view(ctrl: ExplorerConfigCtrl): VNode[] {
|
||||||
return [
|
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),
|
ctrl.data.db() === 'masters' ? masterDb(ctrl) : ctrl.data.db() === 'lichess' ? lichessDb(ctrl) : playerDb(ctrl),
|
||||||
h(
|
h(
|
||||||
'section.save',
|
'section.save',
|
||||||
|
@ -142,52 +122,41 @@ const playerDb = (ctrl: ExplorerConfigCtrl) => {
|
||||||
return h('div.player-db', [
|
return h('div.player-db', [
|
||||||
ctrl.data.playerName.open() ? playerModal(ctrl) : undefined,
|
ctrl.data.playerName.open() ? playerModal(ctrl) : undefined,
|
||||||
h('section.name', [
|
h('section.name', [
|
||||||
h(
|
h('label', 'Player'),
|
||||||
'div.choices',
|
h('div', [
|
||||||
h(
|
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: dataIcon(''),
|
||||||
attrs: name ? { title: selectText } : undefined,
|
hook: bind('click', ctrl.toggleColor, ctrl.root.redraw),
|
||||||
},
|
},
|
||||||
name || selectText
|
ctrl.data.color()
|
||||||
)
|
),
|
||||||
),
|
]),
|
||||||
' as ',
|
|
||||||
h(
|
|
||||||
'button.button-link.text.color',
|
|
||||||
{
|
|
||||||
attrs: dataIcon(''),
|
|
||||||
hook: bind('click', ctrl.toggleColor, ctrl.root.redraw),
|
|
||||||
},
|
|
||||||
ctrl.data.color()
|
|
||||||
),
|
|
||||||
]),
|
]),
|
||||||
speedSection(ctrl),
|
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) =>
|
const masterDb = (ctrl: ExplorerConfigCtrl) =>
|
||||||
h('div', [
|
h('div', [
|
||||||
h('p.message', ctrl.root.trans('masterDbExplanation', 2200, minYear, '2019')),
|
h('section.date', [
|
||||||
advancedSection(ctrl, [
|
h('label', ['Since', yearInput(ctrl.data.since, () => '', ctrl.root.redraw)]),
|
||||||
h('section.date', [
|
h('label', ['Until', yearInput(ctrl.data.until, ctrl.data.since, ctrl.root.redraw)]),
|
||||||
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) =>
|
const lichessDb = (ctrl: ExplorerConfigCtrl) =>
|
||||||
h('div', [
|
h('div', [
|
||||||
h('p.message', 'Rated games sampled from all Lichess players'),
|
|
||||||
speedSection(ctrl),
|
speedSection(ctrl),
|
||||||
advancedSection(ctrl, [
|
h('section.rating', [
|
||||||
h('section.rating', [
|
h('label', ctrl.root.trans.noarg('averageElo')),
|
||||||
h('label', ctrl.root.trans.noarg('averageElo')),
|
h('div.choices', allRatings.map(radioButton(ctrl, ctrl.data.rating))),
|
||||||
h('div.choices', allRatings.map(radioButton(ctrl, ctrl.data.rating))),
|
|
||||||
]),
|
|
||||||
monthSection(ctrl),
|
|
||||||
]),
|
]),
|
||||||
|
monthSection(ctrl),
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const speedSection = (ctrl: ExplorerConfigCtrl) =>
|
const speedSection = (ctrl: ExplorerConfigCtrl) =>
|
||||||
|
@ -223,7 +189,10 @@ const speedSection = (ctrl: ExplorerConfigCtrl) =>
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const modeSection = (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 monthInput = (prop: StoredProp<Month>, after: () => Month, redraw: Redraw) => {
|
||||||
const validateRange = (input: HTMLInputElement) =>
|
const validateRange = (input: HTMLInputElement) =>
|
||||||
|
|
|
@ -319,11 +319,12 @@ function show(ctrl: AnalyseCtrl): MaybeVNode {
|
||||||
|
|
||||||
const explorerTitle = (explorer: ExplorerCtrl) => {
|
const explorerTitle = (explorer: ExplorerCtrl) => {
|
||||||
const db = explorer.db();
|
const db = explorer.db();
|
||||||
const otherLink = (name: string) =>
|
const otherLink = (name: string, title: string) =>
|
||||||
h(
|
h(
|
||||||
'button.button-link',
|
'button.button-link',
|
||||||
{
|
{
|
||||||
key: name,
|
key: name,
|
||||||
|
attrs: { title },
|
||||||
hook: bind('click', () => explorer.config.data.db(name.toLowerCase() as ExplorerDb), explorer.reload),
|
hook: bind('click', () => explorer.config.data.db(name.toLowerCase() as ExplorerDb), explorer.reload),
|
||||||
},
|
},
|
||||||
name
|
name
|
||||||
|
@ -347,30 +348,37 @@ const explorerTitle = (explorer: ExplorerCtrl) => {
|
||||||
},
|
},
|
||||||
'Player'
|
'Player'
|
||||||
);
|
);
|
||||||
const active = (nodes: MaybeVNodes) =>
|
const active = (nodes: MaybeVNodes, title: string) =>
|
||||||
h(
|
h(
|
||||||
'span.active.text.' + db,
|
'span.active.text.' + db,
|
||||||
{
|
{
|
||||||
attrs: dataIcon(''),
|
attrs: { title, ...dataIcon('') },
|
||||||
hook: db == 'player' ? bind('click', explorer.config.toggleColor, explorer.reload) : undefined,
|
hook: db == 'player' ? bind('click', explorer.config.toggleColor, explorer.reload) : undefined,
|
||||||
},
|
},
|
||||||
nodes
|
nodes
|
||||||
);
|
);
|
||||||
const playerName = explorer.config.data.playerName.value();
|
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', [
|
return h('div.explorer-title', [
|
||||||
db == 'masters'
|
db == 'masters'
|
||||||
? active([h('strong', 'Masters'), ' database'])
|
? active([h('strong', 'Masters'), ' database'], masterDbExplanation)
|
||||||
: explorer.config.allDbs.includes('masters')
|
: explorer.config.allDbs.includes('masters')
|
||||||
? otherLink('Masters')
|
? otherLink('Masters', masterDbExplanation)
|
||||||
: undefined,
|
: undefined,
|
||||||
db == 'lichess' ? active([h('strong', 'Lichess'), ' database']) : otherLink('Lichess'),
|
db == 'lichess'
|
||||||
|
? active([h('strong', 'Lichess'), ' database'], lichessDbExplanation)
|
||||||
|
: otherLink('Lichess', lichessDbExplanation),
|
||||||
db == 'player'
|
db == 'player'
|
||||||
? active([
|
? active(
|
||||||
h(`strong${playerName.length > 14 ? '.long' : ''}`, playerName),
|
[
|
||||||
' as ',
|
h(`strong${playerName.length > 14 ? '.long' : ''}`, playerName),
|
||||||
explorer.config.data.color(),
|
' as ',
|
||||||
explorer.isIndexing() ? h('i.ddloader', { attrs: { title: 'Indexing...' } }) : undefined,
|
explorer.config.data.color(),
|
||||||
])
|
explorer.isIndexing() ? h('i.ddloader', { attrs: { title: 'Indexing...' } }) : undefined,
|
||||||
|
],
|
||||||
|
'Switch sides'
|
||||||
|
)
|
||||||
: playerLink(),
|
: playerLink(),
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
@ -381,10 +389,7 @@ function showTitle(ctrl: AnalyseCtrl, variant: Variant) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function showConfig(ctrl: AnalyseCtrl): VNode {
|
function showConfig(ctrl: AnalyseCtrl): VNode {
|
||||||
return h(
|
return h('div.config', [explorerTitle(ctrl.explorer), ...renderConfig(ctrl.explorer.config)]);
|
||||||
'div.config',
|
|
||||||
[h('div.title', showTitle(ctrl, ctrl.data.game.variant))].concat(renderConfig(ctrl.explorer.config))
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function showFailing(ctrl: AnalyseCtrl) {
|
function showFailing(ctrl: AnalyseCtrl) {
|
||||||
|
|
Loading…
Reference in New Issue