(el => {
el.onblur = () => submit(el.value, el);
el.onkeydown = e => {
@@ -90,17 +87,12 @@ function renderPgnTags(tags: TagsForm, trans: Trans, hideRatings?: boolean): VNo
});
});
},
- postpatch: (_, vnode) => {
- tags.selectedType((vnode.elm as HTMLInputElement).value);
- },
+ postpatch: (_, vnode) => tags.selectedType((vnode.elm as HTMLInputElement).value),
},
},
[
h('option', trans.noarg('newTag')),
- ...tags.types.map(t => {
- if (!existingTypes.includes(t)) return option(t, '', t);
- return undefined;
- }),
+ ...tags.types.map(t => (!existingTypes.includes(t) ? option(t, '', t) : undefined)),
],
),
editable('', (value, el) => {
diff --git a/ui/analyse/src/study/studyView.ts b/ui/analyse/src/study/studyView.ts
index 04b839053b911..0b6487816fa0c 100644
--- a/ui/analyse/src/study/studyView.ts
+++ b/ui/analyse/src/study/studyView.ts
@@ -2,9 +2,9 @@ import * as commentForm from './commentForm';
import * as glyphForm from './studyGlyph';
import * as practiceView from './practice/studyPracticeView';
import AnalyseCtrl from '../ctrl';
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import * as licon from 'common/licon';
-import { iconTag, bind, dataIcon, MaybeVNodes } from 'common/snabbdom';
+import { iconTag, bind, dataIcon, MaybeVNodes, looseH as h } from 'common/snabbdom';
import { playButtons as gbPlayButtons, overrideButton as gbOverrideButton } from './gamebook/gamebookButtons';
import { rounds as relayTourRounds } from './relay/relayTourView';
import { Tab, ToolTab } from './interfaces';
@@ -48,7 +48,7 @@ function toolButton(opts: ToolButtonOpts): VNode {
opts.ctrl.redraw,
),
},
- [opts.count ? h('count.data-count', { attrs: { 'data-count': opts.count } }) : null, opts.icon],
+ [opts.count && h('count.data-count', { attrs: { 'data-count': opts.count } }), opts.icon],
);
}
@@ -60,34 +60,27 @@ function buttons(root: AnalyseCtrl): VNode {
return h('div.study__buttons', [
h('div.left-buttons.tabs-horiz', { attrs: { role: 'tablist' } }, [
// distinct classes (sync, write) allow snabbdom to differentiate buttons
- showSticky
- ? h(
- 'a.mode.sync',
- {
- attrs: { title: noarg('allSyncMembersRemainOnTheSamePosition') },
- class: { on: ctrl.vm.mode.sticky },
- hook: bind('click', ctrl.toggleSticky),
- },
- [ctrl.vm.behind ? h('span.behind', '' + ctrl.vm.behind) : h('i.is'), 'SYNC'],
- )
- : null,
- ctrl.members.canContribute()
- ? h(
- 'a.mode.write',
- {
- attrs: { title: noarg('shareChanges') },
- class: { on: ctrl.vm.mode.write },
- hook: bind('click', ctrl.toggleWrite),
- },
- [h('i.is'), 'REC'],
- )
- : null,
- toolButton({
- ctrl,
- tab: 'tags',
- hint: noarg('pgnTags'),
- icon: iconTag(licon.Tag),
- }),
+ showSticky &&
+ h(
+ 'a.mode.sync',
+ {
+ attrs: { title: noarg('allSyncMembersRemainOnTheSamePosition') },
+ class: { on: ctrl.vm.mode.sticky },
+ hook: bind('click', ctrl.toggleSticky),
+ },
+ [ctrl.vm.behind ? h('span.behind', '' + ctrl.vm.behind) : h('i.is'), 'SYNC'],
+ ),
+ ctrl.members.canContribute() &&
+ h(
+ 'a.mode.write',
+ {
+ attrs: { title: noarg('shareChanges') },
+ class: { on: ctrl.vm.mode.write },
+ hook: bind('click', ctrl.toggleWrite),
+ },
+ [h('i.is'), 'REC'],
+ ),
+ toolButton({ ctrl, tab: 'tags', hint: noarg('pgnTags'), icon: iconTag(licon.Tag) }),
toolButton({
ctrl,
tab: 'comments',
@@ -98,15 +91,14 @@ function buttons(root: AnalyseCtrl): VNode {
},
count: (root.node.comments || []).length,
}),
- canContribute
- ? toolButton({
- ctrl,
- tab: 'glyphs',
- hint: noarg('annotateWithGlyphs'),
- icon: h('i.glyph-icon'),
- count: (root.node.glyphs || []).length,
- })
- : null,
+ canContribute &&
+ toolButton({
+ ctrl,
+ tab: 'glyphs',
+ hint: noarg('annotateWithGlyphs'),
+ icon: h('i.glyph-icon'),
+ count: (root.node.glyphs || []).length,
+ }),
toolButton({
ctrl,
tab: 'serverEval',
@@ -114,24 +106,14 @@ function buttons(root: AnalyseCtrl): VNode {
icon: iconTag(licon.BarChart),
count: root.data.analysis && '✓',
}),
- toolButton({
- ctrl,
- tab: 'multiBoard',
- hint: 'Multiboard',
- icon: iconTag(licon.Multiboard),
- }),
- toolButton({
- ctrl,
- tab: 'share',
- hint: noarg('shareAndExport'),
- icon: iconTag(licon.NodeBranching),
- }),
- !ctrl.relay && !ctrl.data.chapter.gamebook
- ? h('span.help', {
- attrs: { title: 'Need help? Get the tour!', ...dataIcon(licon.InfoCircle) },
- hook: bind('click', ctrl.startTour),
- })
- : null,
+ toolButton({ ctrl, tab: 'multiBoard', hint: 'Multiboard', icon: iconTag(licon.Multiboard) }),
+ toolButton({ ctrl, tab: 'share', hint: noarg('shareAndExport'), icon: iconTag(licon.NodeBranching) }),
+ !ctrl.relay &&
+ !ctrl.data.chapter.gamebook &&
+ h('span.help', {
+ attrs: { title: 'Need help? Get the tour!', ...dataIcon(licon.InfoCircle) },
+ hook: bind('click', ctrl.startTour),
+ }),
]),
h('div.right', [gbOverrideButton(ctrl)]),
]);
@@ -184,41 +166,32 @@ export function side(ctrl: StudyCtrl): VNode {
{
class: { active: tourShown },
hook: bind('mousedown', () => tourShow(true), ctrl.redraw),
- attrs: {
- ...dataIcon(licon.RadioTower),
- role: 'tab',
- },
+ attrs: { ...dataIcon(licon.RadioTower), role: 'tab' },
},
'Broadcast',
);
const chaptersTab =
- tourShow && ctrl.looksNew() && !ctrl.members.canContribute()
- ? null
- : makeTab(
- 'chapters',
- ctrl.trans.pluralSame(ctrl.relay ? 'nbGames' : 'nbChapters', ctrl.chapters.list().length),
- );
+ (tourShow && ctrl.looksNew() && !ctrl.members.canContribute()) ||
+ makeTab(
+ 'chapters',
+ ctrl.trans.pluralSame(ctrl.relay ? 'nbGames' : 'nbChapters', ctrl.chapters.list().length),
+ );
const tabs = h('div.tabs-horiz', { attrs: { role: 'tablist' } }, [
tourTab,
chaptersTab,
- !tourTab || ctrl.members.canContribute() || ctrl.data.admin
- ? makeTab('members', ctrl.trans.pluralSame('nbMembers', ctrl.members.size()))
- : null,
+ (!tourTab || ctrl.members.canContribute() || ctrl.data.admin) &&
+ makeTab('members', ctrl.trans.pluralSame('nbMembers', ctrl.members.size())),
h('span.search.narrow', {
- attrs: {
- ...dataIcon(licon.Search),
- title: 'Search',
- },
+ attrs: { ...dataIcon(licon.Search), title: 'Search' },
hook: bind('click', () => ctrl.search.open(true)),
}),
- ctrl.members.isOwner()
- ? h('span.more.narrow', {
- attrs: { ...dataIcon(licon.Hamburger), title: 'Edit study' },
- hook: bind('click', () => ctrl.form.open(!ctrl.form.open()), ctrl.redraw),
- })
- : null,
+ ctrl.members.isOwner() &&
+ h('span.more.narrow', {
+ attrs: { ...dataIcon(licon.Hamburger), title: 'Edit study' },
+ hook: bind('click', () => ctrl.form.open(!ctrl.form.open()), ctrl.redraw),
+ }),
]);
const content = tourShown
diff --git a/ui/analyse/src/study/topics.ts b/ui/analyse/src/study/topics.ts
index f1947fa081b74..d0010d93c7350 100644
--- a/ui/analyse/src/study/topics.ts
+++ b/ui/analyse/src/study/topics.ts
@@ -21,21 +21,15 @@ export default class TopicsCtrl {
export const view = (ctrl: StudyCtrl): VNode =>
h('div.study__topics', [
- ...ctrl.topics.getTopics().map(topic =>
- h(
- 'a.topic',
- {
- attrs: { href: `/study/topic/${encodeURIComponent(topic)}/hot` },
- },
- topic,
+ ...ctrl.topics
+ .getTopics()
+ .map(topic =>
+ h('a.topic', { attrs: { href: `/study/topic/${encodeURIComponent(topic)}/hot` } }, topic),
),
- ),
ctrl.members.canContribute()
? h(
'a.manage',
- {
- hook: bind('click', () => ctrl.topics.open(true), ctrl.redraw),
- },
+ { hook: bind('click', () => ctrl.topics.open(true), ctrl.redraw) },
ctrl.trans.noarg('manageTopics'),
)
: null,
@@ -66,18 +60,10 @@ export const formView = (ctrl: TopicsCtrl, userId?: string): VNode =>
[
h(
'textarea',
- {
- hook: onInsert(elm => setupTagify(elm as HTMLTextAreaElement, userId)),
- },
+ { hook: onInsert(elm => setupTagify(elm as HTMLTextAreaElement, userId)) },
ctrl.getTopics().join(', ').replace(/[<>]/g, ''),
),
- h(
- 'button.button',
- {
- type: 'submit',
- },
- ctrl.trans.noarg('save'),
- ),
+ h('button.button', { type: 'submit' }, ctrl.trans.noarg('save')),
],
),
],
@@ -90,10 +76,7 @@ export const formView = (ctrl: TopicsCtrl, userId?: string): VNode =>
function setupTagify(elm: HTMLInputElement | HTMLTextAreaElement, userId?: string) {
lichess.asset.loadCssPath('tagify');
lichess.asset.loadIife('npm/tagify/tagify.min.js').then(() => {
- const tagi = (tagify = new (window.Tagify as typeof Tagify)(elm, {
- pattern: /.{2,}/,
- maxTags: 30,
- }));
+ const tagi = (tagify = new (window.Tagify as typeof Tagify)(elm, { pattern: /.{2,}/, maxTags: 30 }));
let abortCtrl: AbortController | undefined; // for aborting the call
tagi.on('input', e => {
const term = (e.detail as Tagify.TagData).value.trim();
diff --git a/ui/analyse/src/treeView/columnView.ts b/ui/analyse/src/treeView/columnView.ts
index f19b9a84dc2f9..60eba42bdf6c2 100644
--- a/ui/analyse/src/treeView/columnView.ts
+++ b/ui/analyse/src/treeView/columnView.ts
@@ -1,6 +1,6 @@
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import { isEmpty } from 'common';
-import { MaybeVNodes } from 'common/snabbdom';
+import { LooseVNodes, looseH as h } from 'common/snabbdom';
import { fixCrazySan } from 'chess';
import { path as treePath, ops as treeOps } from 'tree';
import * as moveView from '../view/moveView';
@@ -29,16 +29,10 @@ interface Opts extends BaseOpts {
function emptyMove(conceal?: Conceal): VNode {
const c: { conceal?: true; hide?: true } = {};
if (conceal) c[conceal] = true;
- return h(
- 'move.empty',
- {
- class: c,
- },
- '...',
- );
+ return h('move.empty', { class: c }, '...');
}
-function renderChildrenOf(ctx: Ctx, node: Tree.Node, opts: Opts): MaybeVNodes | undefined {
+function renderChildrenOf(ctx: Ctx, node: Tree.Node, opts: Opts): LooseVNodes | undefined {
const cs = node.children.filter(x => ctx.showComputer || !x.comp),
main = cs[0];
if (!main) return;
@@ -52,54 +46,41 @@ function renderChildrenOf(ctx: Ctx, node: Tree.Node, opts: Opts): MaybeVNodes |
nonEmpty,
);
if (!cs[1] && isEmpty(commentTags) && !main.forceVariation)
- return ((isWhite ? [moveView.renderIndex(main.ply, false)] : []) as MaybeVNodes).concat(
- renderMoveAndChildrenOf(ctx, main, {
- parentPath: opts.parentPath,
- isMainline: true,
- conceal,
- }) || [],
- );
- const mainChildren = main.forceVariation
- ? undefined
- : renderChildrenOf(ctx, main, {
- parentPath: opts.parentPath + main.id,
- isMainline: true,
- conceal,
- });
- const passOpts = {
- parentPath: opts.parentPath,
- isMainline: !main.forceVariation,
- conceal,
- };
- return (isWhite ? [moveView.renderIndex(main.ply, false)] : ([] as MaybeVNodes))
- .concat(
- main.forceVariation
- ? []
- : [renderMoveOf(ctx, main, passOpts), isWhite ? emptyMove(passOpts.conceal) : null],
- )
- .concat([
- h(
- 'interrupt',
- commentTags.concat(
- renderLines(ctx, main.forceVariation ? cs : cs.slice(1), {
- parentPath: opts.parentPath,
- isMainline: passOpts.isMainline,
- conceal,
- noConceal: !conceal,
- }),
- ),
+ return [
+ isWhite && moveView.renderIndex(main.ply, false),
+ ...renderMoveAndChildrenOf(ctx, main, { parentPath: opts.parentPath, isMainline: true, conceal }),
+ ];
+ const mainChildren =
+ !main.forceVariation &&
+ renderChildrenOf(ctx, main, { parentPath: opts.parentPath + main.id, isMainline: true, conceal });
+
+ const passOpts = { parentPath: opts.parentPath, isMainline: !main.forceVariation, conceal };
+
+ return [
+ isWhite && moveView.renderIndex(main.ply, false),
+ !main.forceVariation && renderMoveOf(ctx, main, passOpts),
+ isWhite && !main.forceVariation && emptyMove(conceal),
+ h(
+ 'interrupt',
+ commentTags.concat(
+ renderLines(ctx, main.forceVariation ? cs : cs.slice(1), {
+ parentPath: opts.parentPath,
+ isMainline: passOpts.isMainline,
+ conceal,
+ noConceal: !conceal,
+ }),
),
- ] as MaybeVNodes)
- .concat(
- isWhite && mainChildren ? [moveView.renderIndex(main.ply, false), emptyMove(passOpts.conceal)] : [],
- )
- .concat(mainChildren || []);
+ ),
+ isWhite && mainChildren && moveView.renderIndex(main.ply, false),
+ isWhite && mainChildren && emptyMove(conceal),
+ ...(mainChildren || []),
+ ];
}
if (!cs[1]) return renderMoveAndChildrenOf(ctx, main, opts);
return renderInlined(ctx, cs, opts) || [renderLines(ctx, cs, opts)];
}
-function renderInlined(ctx: Ctx, nodes: Tree.Node[], opts: Opts): MaybeVNodes | undefined {
+function renderInlined(ctx: Ctx, nodes: Tree.Node[], opts: Opts): LooseVNodes | undefined {
// only 2 branches
if (!nodes[1] || nodes[2]) return;
// only if second branch has no sub-branches
@@ -115,9 +96,7 @@ function renderInlined(ctx: Ctx, nodes: Tree.Node[], opts: Opts): MaybeVNodes |
function renderLines(ctx: Ctx, nodes: Tree.Node[], opts: Opts): VNode {
return h(
'lines',
- {
- class: { single: !nodes[1] },
- },
+ { class: { single: !nodes[1] } },
nodes.map(n => {
return (
retroLine(ctx, n) ||
@@ -144,49 +123,26 @@ function renderMainlineMoveOf(ctx: Ctx, node: Tree.Node, opts: Opts): VNode {
const path = opts.parentPath + node.id,
classes = nodeClasses(ctx, node, path);
if (opts.conceal) classes[opts.conceal as string] = true;
- return h(
- 'move',
- {
- attrs: { p: path },
- class: classes,
- },
- moveView.renderMove(ctx, node),
- );
+ return h('move', { attrs: { p: path }, class: classes }, moveView.renderMove(ctx, node));
}
function renderVariationMoveOf(ctx: Ctx, node: Tree.Node, opts: Opts): VNode {
const withIndex = opts.withIndex || node.ply % 2 === 1,
path = opts.parentPath + node.id,
- content: MaybeVNodes = [withIndex ? moveView.renderIndex(node.ply, true) : null, fixCrazySan(node.san!)],
+ content: LooseVNodes = [withIndex && moveView.renderIndex(node.ply, true), fixCrazySan(node.san!)],
classes = nodeClasses(ctx, node, path);
if (opts.conceal) classes[opts.conceal as string] = true;
if (node.glyphs) node.glyphs.forEach(g => content.push(moveView.renderGlyph(g)));
- return h(
- 'move',
- {
- attrs: { p: path },
- class: classes,
- },
- content,
- );
+ return h('move', { attrs: { p: path }, class: classes }, content);
}
-function renderMoveAndChildrenOf(ctx: Ctx, node: Tree.Node, opts: Opts): MaybeVNodes {
+function renderMoveAndChildrenOf(ctx: Ctx, node: Tree.Node, opts: Opts): LooseVNodes {
const path = opts.parentPath + node.id;
- if (opts.truncate === 0)
- return [
- h(
- 'move',
- {
- attrs: { p: path },
- },
- [h('index', '[...]')],
- ),
- ];
+ if (opts.truncate === 0) return [h('move', { attrs: { p: path } }, [h('index', '[...]')])];
return [
renderMoveOf(ctx, node, opts),
...renderInlineCommentsOf(ctx, node, path),
- opts.inline ? renderInline(ctx, opts.inline, opts) : null,
+ opts.inline && renderInline(ctx, opts.inline, opts),
...(renderChildrenOf(ctx, node, {
parentPath: path,
isMainline: opts.isMainline,
@@ -215,7 +171,7 @@ function renderMainlineCommentsOf(
conceal: Conceal,
withColor: boolean,
path: string,
-): MaybeVNodes {
+): LooseVNodes {
if (!ctx.ctrl.showComments || isEmpty(node.comments)) return [];
const colorClass = withColor ? (node.ply % 2 === 0 ? '.black ' : '.white ') : '';
@@ -242,29 +198,18 @@ export default function (ctrl: AnalyseCtrl, concealOf?: ConcealOf): VNode {
ctrl,
truncateComments: false,
concealOf: concealOf || emptyConcealOf,
- showComputer: ctrl.showComputer() && !ctrl.retro,
+ showComputer: ctrl.showComputer() && !ctrl.retro?.isSolving(),
showGlyphs: !!ctrl.study || ctrl.showComputer(),
showEval: ctrl.showComputer(),
currentPath: findCurrentPath(ctrl),
};
//I hardcoded the root path, I'm not sure if there's a better way for that to be done
const commentTags = renderMainlineCommentsOf(ctx, root, false, false, '');
- return h(
- 'div.tview2.tview2-column',
- {
- hook: mainHook(ctrl),
- },
- (
- [
- isEmpty(commentTags) ? null : h('interrupt', commentTags),
- root.ply & 1 ? moveView.renderIndex(root.ply, false) : null,
- root.ply & 1 ? emptyMove() : null,
- ] as MaybeVNodes
- ).concat(
- renderChildrenOf(ctx, root, {
- parentPath: '',
- isMainline: true,
- }) || [],
- ),
- );
+
+ return h('div.tview2.tview2-column', { hook: mainHook(ctrl) }, [
+ !isEmpty(commentTags) && h('interrupt', commentTags),
+ root.ply & 1 && moveView.renderIndex(root.ply, false),
+ root.ply & 1 && emptyMove(),
+ ...(renderChildrenOf(ctx, root, { parentPath: '', isMainline: true }) || []),
+ ]);
}
diff --git a/ui/analyse/src/treeView/common.ts b/ui/analyse/src/treeView/common.ts
index a9cd232528517..27703b2eeec95 100644
--- a/ui/analyse/src/treeView/common.ts
+++ b/ui/analyse/src/treeView/common.ts
@@ -20,10 +20,7 @@ export function mainHook(ctrl: AnalyseCtrl): Hooks {
const ctxMenuCallback = (e: MouseEvent) => {
const path = eventPath(e);
if (path !== null) {
- contextMenu(e, {
- path,
- root: ctrl,
- });
+ contextMenu(e, { path, root: ctrl });
}
ctrl.redraw();
return false;
diff --git a/ui/analyse/src/treeView/contextMenu.ts b/ui/analyse/src/treeView/contextMenu.ts
index f0395a9f62902..32c0e857c00f2 100644
--- a/ui/analyse/src/treeView/contextMenu.ts
+++ b/ui/analyse/src/treeView/contextMenu.ts
@@ -1,6 +1,6 @@
import * as licon from 'common/licon';
-import { bind, onInsert } from 'common/snabbdom';
-import { h, VNode } from 'snabbdom';
+import { bind, onInsert, looseH as h } from 'common/snabbdom';
+import { VNode } from 'snabbdom';
import AnalyseCtrl from '../ctrl';
import * as studyView from '../study/studyView';
import { patch, nodeFullName } from '../view/util';
@@ -28,11 +28,7 @@ const elementId = 'analyse-cm';
function getPosition(e: MouseEvent | TouchEvent): Coords | null {
let pos = e as PageOrClientPos;
if ('touches' in e && e.touches.length > 0) pos = e.touches[0];
- if (pos.pageX || pos.pageY)
- return {
- x: pos.pageX!,
- y: pos.pageY!,
- };
+ if (pos.pageX || pos.pageY) return { x: pos.pageX!, y: pos.pageY! };
else if (pos.clientX || pos.clientY)
return {
x: pos.clientX! + document.body.scrollLeft + document.documentElement!.scrollLeft,
@@ -57,14 +53,7 @@ function positionMenu(menu: HTMLElement, coords: Coords): void {
}
function action(icon: string, text: string, handler: () => void): VNode {
- return h(
- 'a',
- {
- attrs: { 'data-icon': icon },
- hook: bind('click', handler),
- },
- text,
- );
+ return h('a', { attrs: { 'data-icon': icon }, hook: bind('click', handler) }, text);
}
function view(opts: Opts, coords: Coords): VNode {
@@ -85,23 +74,23 @@ function view(opts: Opts, coords: Coords): VNode {
},
[
h('p.title', nodeFullName(node)),
- onMainline
- ? null
- : action(licon.UpTriangle, trans('promoteVariation'), () => ctrl.promote(opts.path, false)),
- onMainline ? null : action(licon.Checkmark, trans('makeMainLine'), () => ctrl.promote(opts.path, true)),
+
+ !onMainline &&
+ action(licon.UpTriangle, trans('promoteVariation'), () => ctrl.promote(opts.path, false)),
+
+ !onMainline && action(licon.Checkmark, trans('makeMainLine'), () => ctrl.promote(opts.path, true)),
+
action(licon.Trash, trans('deleteFromHere'), () => ctrl.deleteNode(opts.path)),
- ]
- .concat(ctrl.study ? studyView.contextMenu(ctrl.study, opts.path, node) : [])
- .concat([
- onMainline
- ? action(licon.InternalArrow, trans('forceVariation'), () => ctrl.forceVariation(opts.path, true))
- : null,
- ])
- .concat([
- action(licon.Clipboard, trans('copyVariationPgn'), () =>
- navigator.clipboard.writeText(renderVariationPgn(opts.root.tree.getNodeList(opts.path))),
- ),
- ]),
+
+ ...(ctrl.study ? studyView.contextMenu(ctrl.study, opts.path, node) : []),
+
+ onMainline &&
+ action(licon.InternalArrow, trans('forceVariation'), () => ctrl.forceVariation(opts.path, true)),
+
+ action(licon.Clipboard, trans('copyVariationPgn'), () =>
+ navigator.clipboard.writeText(renderVariationPgn(opts.root.tree.getNodeList(opts.path))),
+ ),
+ ],
);
}
diff --git a/ui/analyse/src/treeView/inlineView.ts b/ui/analyse/src/treeView/inlineView.ts
index 0761b60024005..1834e60c6a856 100644
--- a/ui/analyse/src/treeView/inlineView.ts
+++ b/ui/analyse/src/treeView/inlineView.ts
@@ -112,11 +112,7 @@ function renderInline(ctx: Ctx, node: Tree.Node, opts: Opts): VNode {
if (retro) return h('interrupt', h('lines', retro));
return h(
'inline',
- renderMoveAndChildrenOf(ctx, node, {
- withIndex: true,
- parentPath: opts.parentPath,
- isMainline: false,
- }),
+ renderMoveAndChildrenOf(ctx, node, { withIndex: true, parentPath: opts.parentPath, isMainline: false }),
);
}
@@ -127,36 +123,23 @@ function renderMoveOf(ctx: Ctx, node: Tree.Node, opts: Opts): VNode {
fixCrazySan(node.san!),
];
if (node.glyphs && ctx.showGlyphs) node.glyphs.forEach(g => content.push(moveView.renderGlyph(g)));
- return h(
- 'move',
- {
- attrs: { p: path },
- class: nodeClasses(ctx, node, path),
- },
- content,
- );
+ return h('move', { attrs: { p: path }, class: nodeClasses(ctx, node, path) }, content);
}
export default function (ctrl: AnalyseCtrl): VNode {
const ctx: Ctx = {
ctrl,
truncateComments: false,
- showComputer: ctrl.showComputer() && !ctrl.retro,
+ showComputer: ctrl.showComputer() && !ctrl.retro?.isSolving(),
showGlyphs: !!ctrl.study || ctrl.showComputer(),
showEval: !!ctrl.study || ctrl.showComputer(),
currentPath: findCurrentPath(ctrl),
};
- return h(
- 'div.tview2.tview2-inline',
- {
- hook: mainHook(ctrl),
- },
- [
- ...renderInlineCommentsOf(ctx, ctrl.tree.root, ''),
- ...(renderChildrenOf(ctx, ctrl.tree.root, {
- parentPath: '',
- isMainline: true,
- }) || []),
- ],
- );
+ return h('div.tview2.tview2-inline', { hook: mainHook(ctrl) }, [
+ ...renderInlineCommentsOf(ctx, ctrl.tree.root, ''),
+ ...(renderChildrenOf(ctx, ctrl.tree.root, {
+ parentPath: '',
+ isMainline: true,
+ }) || []),
+ ]);
}
diff --git a/ui/analyse/src/view/actionMenu.ts b/ui/analyse/src/view/actionMenu.ts
index a9099c75f2d44..5f58884e982dc 100644
--- a/ui/analyse/src/view/actionMenu.ts
+++ b/ui/analyse/src/view/actionMenu.ts
@@ -2,8 +2,8 @@ import { isEmpty } from 'common';
import * as licon from 'common/licon';
import { domDialog } from 'common/dialog';
import { isTouchDevice } from 'common/device';
-import { bind, dataIcon, MaybeVNodes } from 'common/snabbdom';
-import { h, VNode } from 'snabbdom';
+import { bind, dataIcon, MaybeVNodes, looseH as h } from 'common/snabbdom';
+import { VNode } from 'snabbdom';
import { AutoplayDelay } from '../autoplay';
import { toggle, ToggleSettings } from 'common/controls';
import AnalyseCtrl from '../ctrl';
@@ -16,14 +16,8 @@ interface AutoplaySpeed {
}
const baseSpeeds: AutoplaySpeed[] = [
- {
- name: 'fast',
- delay: 1000,
- },
- {
- name: 'slow',
- delay: 5000,
- },
+ { name: 'fast', delay: 1000 },
+ { name: 'slow', delay: 5000 },
];
const realtimeSpeed: AutoplaySpeed = {
@@ -52,10 +46,7 @@ function autoplayButtons(ctrl: AnalyseCtrl): VNode {
return h(
'a.button',
{
- class: {
- active,
- 'button-empty': !active,
- },
+ class: { active, 'button-empty': !active },
hook: bind('click', () => ctrl.togglePlay(speed.delay), ctrl.redraw),
},
ctrl.trans.noarg(speed.name),
@@ -84,10 +75,7 @@ function studyButton(ctrl: AnalyseCtrl) {
return h(
'form',
{
- attrs: {
- method: 'post',
- action: '/study/as',
- },
+ attrs: { method: 'post', action: '/study/as' },
hook: bind('submit', e => {
const pgnInput = (e.target as HTMLElement).querySelector('input[name=pgn]') as HTMLInputElement;
if (pgnInput && (ctrl.synthetic || ctrl.persistence?.isDirty)) {
@@ -96,21 +84,12 @@ function studyButton(ctrl: AnalyseCtrl) {
}),
},
[
- !ctrl.synthetic ? hiddenInput('gameId', ctrl.data.game.id) : null,
+ !ctrl.synthetic && hiddenInput('gameId', ctrl.data.game.id),
hiddenInput('pgn', ''),
hiddenInput('orientation', ctrl.bottomColor()),
hiddenInput('variant', ctrl.data.game.variant.key),
hiddenInput('fen', ctrl.tree.root.fen),
- h(
- 'button',
- {
- attrs: {
- type: 'submit',
- 'data-icon': licon.StudyBoard,
- },
- },
- ctrl.trans.noarg('toStudy'),
- ),
+ h('button', { attrs: { type: 'submit', 'data-icon': licon.StudyBoard } }, ctrl.trans.noarg('toStudy')),
],
);
}
@@ -126,61 +105,50 @@ export function view(ctrl: AnalyseCtrl): VNode {
h('div.action-menu__tools', [
h(
'a',
- {
- hook: bind('click', ctrl.flip),
- attrs: {
- 'data-icon': licon.ChasingArrows,
- title: 'Hotkey: f',
- },
- },
+ { hook: bind('click', ctrl.flip), attrs: { 'data-icon': licon.ChasingArrows, title: 'Hotkey: f' } },
noarg('flipBoard'),
),
- ctrl.ongoing
- ? null
- : h(
- 'a',
- {
- attrs: {
- href: d.userAnalysis
- ? '/editor?' +
- new URLSearchParams({
- fen: ctrl.node.fen,
- variant: d.game.variant.key,
- color: ctrl.chessground.state.orientation,
- })
- : `/${d.game.id}/edit?fen=${ctrl.node.fen}`,
- 'data-icon': licon.Pencil,
- rel: 'nofollow',
- },
- },
- noarg('boardEditor'),
- ),
- canContinue
- ? h(
- 'a',
- {
- hook: bind('click', () =>
- domDialog({ cash: $('.continue-with.g_' + d.game.id), show: 'modal' }),
- ),
- attrs: dataIcon(licon.Swords),
+ !ctrl.ongoing &&
+ h(
+ 'a',
+ {
+ attrs: {
+ href: d.userAnalysis
+ ? '/editor?' +
+ new URLSearchParams({
+ fen: ctrl.node.fen,
+ variant: d.game.variant.key,
+ color: ctrl.chessground.state.orientation,
+ })
+ : `/${d.game.id}/edit?fen=${ctrl.node.fen}`,
+ 'data-icon': licon.Pencil,
+ rel: 'nofollow',
},
- noarg('continueFromHere'),
- )
- : null,
+ },
+ noarg('boardEditor'),
+ ),
+ canContinue &&
+ h(
+ 'a',
+ {
+ hook: bind('click', () => domDialog({ cash: $('.continue-with.g_' + d.game.id), show: 'modal' })),
+ attrs: dataIcon(licon.Swords),
+ },
+ noarg('continueFromHere'),
+ ),
studyButton(ctrl),
- ctrl.persistence?.isDirty
- ? h(
- 'a',
- {
- attrs: {
- title: noarg('clearSavedMoves'),
- 'data-icon': licon.Trash,
- },
- hook: bind('click', ctrl.persistence.clear),
+ ctrl.persistence?.isDirty &&
+ h(
+ 'a',
+ {
+ attrs: {
+ title: noarg('clearSavedMoves'),
+ 'data-icon': licon.Trash,
},
- noarg('clearSavedMoves'),
- )
- : null,
+ hook: bind('click', ctrl.persistence.clear),
+ },
+ noarg('clearSavedMoves'),
+ ),
]),
];
@@ -240,30 +208,28 @@ export function view(ctrl: AnalyseCtrl): VNode {
},
ctrl,
),
- isTouchDevice()
- ? null
- : ctrlToggle(
- {
- name: 'showVariationArrows',
- title: 'Variation navigation arrows',
- id: 'variationArrows',
- checked: ctrl.variationArrowsProp(),
- change: ctrl.toggleVariationArrows,
- },
- ctrl,
- ),
- ctrl.ongoing
- ? null
- : ctrlToggle(
- {
- name: 'Annotations on board',
- title: 'Display analysis symbols on the board',
- id: 'move-annotation',
- checked: ctrl.showMoveAnnotation(),
- change: ctrl.toggleMoveAnnotation,
- },
- ctrl,
- ),
+ !isTouchDevice() &&
+ ctrlToggle(
+ {
+ name: 'showVariationArrows',
+ title: 'Variation navigation arrows',
+ id: 'variationArrows',
+ checked: ctrl.variationArrowsProp(),
+ change: ctrl.toggleVariationArrows,
+ },
+ ctrl,
+ ),
+ !ctrl.ongoing &&
+ ctrlToggle(
+ {
+ name: 'Annotations on board',
+ title: 'Display analysis symbols on the board',
+ id: 'move-annotation',
+ checked: ctrl.showMoveAnnotation(),
+ change: ctrl.toggleMoveAnnotation,
+ },
+ ctrl,
+ ),
];
return h('div.action-menu', [
@@ -271,33 +237,32 @@ export function view(ctrl: AnalyseCtrl): VNode {
...displayConfig,
...cevalConfig,
...(ctrl.mainline.length > 4 ? [h('h2', noarg('replayMode')), autoplayButtons(ctrl)] : []),
- canContinue
- ? h('div.continue-with.none.g_' + d.game.id, [
- h(
- 'a.button',
- {
- attrs: {
- href: d.userAnalysis
- ? '/?fen=' + ctrl.encodeNodeFen() + '#ai'
- : contRoute(d, 'ai') + '?fen=' + ctrl.node.fen,
- rel: 'nofollow',
- },
+ canContinue &&
+ h('div.continue-with.none.g_' + d.game.id, [
+ h(
+ 'a.button',
+ {
+ attrs: {
+ href: d.userAnalysis
+ ? '/?fen=' + ctrl.encodeNodeFen() + '#ai'
+ : contRoute(d, 'ai') + '?fen=' + ctrl.node.fen,
+ rel: 'nofollow',
},
- noarg('playWithTheMachine'),
- ),
- h(
- 'a.button',
- {
- attrs: {
- href: d.userAnalysis
- ? '/?fen=' + ctrl.encodeNodeFen() + '#friend'
- : contRoute(d, 'friend') + '?fen=' + ctrl.node.fen,
- rel: 'nofollow',
- },
+ },
+ noarg('playWithTheMachine'),
+ ),
+ h(
+ 'a.button',
+ {
+ attrs: {
+ href: d.userAnalysis
+ ? '/?fen=' + ctrl.encodeNodeFen() + '#friend'
+ : contRoute(d, 'friend') + '?fen=' + ctrl.node.fen,
+ rel: 'nofollow',
},
- noarg('playWithAFriend'),
- ),
- ])
- : null,
+ },
+ noarg('playWithAFriend'),
+ ),
+ ]),
]);
}
diff --git a/ui/analyse/src/view/clocks.ts b/ui/analyse/src/view/clocks.ts
index 174bc3583d9c9..74a2bb4afcc1b 100644
--- a/ui/analyse/src/view/clocks.ts
+++ b/ui/analyse/src/view/clocks.ts
@@ -34,13 +34,7 @@ export default function renderClocks(ctrl: AnalyseCtrl): [VNode, VNode] | undefi
}
const renderClock = (centis: number | undefined, active: boolean, cls: string, showTenths: boolean): VNode =>
- h(
- 'div.analyse__clock.' + cls,
- {
- class: { active },
- },
- clockContent(centis, showTenths),
- );
+ h('div.analyse__clock.' + cls, { class: { active } }, clockContent(centis, showTenths));
function clockContent(centis: number | undefined, showTenths: boolean): Array {
if (!centis && centis !== 0) return ['-'];
diff --git a/ui/analyse/src/view/moveView.ts b/ui/analyse/src/view/moveView.ts
index e3c307ead0864..49dab721ead25 100644
--- a/ui/analyse/src/view/moveView.ts
+++ b/ui/analyse/src/view/moveView.ts
@@ -11,13 +11,7 @@ export interface Ctx {
}
export const renderGlyph = (glyph: Tree.Glyph): VNode =>
- h(
- 'glyph',
- {
- attrs: { title: glyph.name },
- },
- glyph.symbol,
- );
+ h('glyph', { attrs: { title: glyph.name } }, glyph.symbol);
const renderEval = (e: string): VNode => h('eval', e.replace('-', '−'));
diff --git a/ui/analyse/src/view/roundTraining.ts b/ui/analyse/src/view/roundTraining.ts
index 32989434f1ba6..ca89738fbea85 100644
--- a/ui/analyse/src/view/roundTraining.ts
+++ b/ui/analyse/src/view/roundTraining.ts
@@ -17,13 +17,11 @@ interface Advice {
const renderPlayer = (ctrl: AnalyseCtrl, color: Color): VNode => {
const p = game.getPlayer(ctrl.data, color);
if (p.user)
- return h(
- 'a.user-link.ulpt',
- {
- attrs: { href: '/@/' + p.user.username },
- },
- [p.user.username, ' ', ratingDiff(p)],
- );
+ return h('a.user-link.ulpt', { attrs: { href: '/@/' + p.user.username } }, [
+ p.user.username,
+ ' ',
+ ratingDiff(p),
+ ]);
return h(
'span',
p.name ||
@@ -56,11 +54,7 @@ function playerTable(ctrl: AnalyseCtrl, color: Color): VNode {
ctrl.trans.noarg('accuracy'),
' ',
h('a', {
- attrs: {
- 'data-icon': licon.InfoCircle,
- href: '/page/accuracy',
- target: '_blank',
- },
+ attrs: { 'data-icon': licon.InfoCircle, href: '/page/accuracy', target: '_blank' },
}),
]),
]),
diff --git a/ui/analyse/src/view/util.ts b/ui/analyse/src/view/util.ts
index 3637affc6944a..030f3b104ae57 100644
--- a/ui/analyse/src/view/util.ts
+++ b/ui/analyse/src/view/util.ts
@@ -21,13 +21,4 @@ export function titleNameToId(titleName: string): string {
}
export const option = (value: string, current: string | undefined, name: string) =>
- h(
- 'option',
- {
- attrs: {
- value: value,
- selected: value === current,
- },
- },
- name,
- );
+ h('option', { attrs: { value: value, selected: value === current } }, name);
diff --git a/ui/analyse/src/view/view.ts b/ui/analyse/src/view/view.ts
index 4d8d295d7267f..c7fee1c2655ab 100644
--- a/ui/analyse/src/view/view.ts
+++ b/ui/analyse/src/view/view.ts
@@ -2,13 +2,13 @@ import { view as cevalView } from 'ceval';
import { parseFen } from 'chessops/fen';
import { defined } from 'common';
import * as licon from 'common/licon';
-import { bind, bindNonPassive, onInsert, dataIcon } from 'common/snabbdom';
+import { bind, bindNonPassive, onInsert, dataIcon, looseH as h } from 'common/snabbdom';
import { bindMobileMousedown, isMobile } from 'common/device';
import { playable } from 'game';
import * as router from 'game/router';
import * as materialView from 'game/view/material';
import statusView from 'game/view/status';
-import { h, VNode, VNodeChildren } from 'snabbdom';
+import { VNode, VNodeChildren } from 'snabbdom';
import { path as treePath } from 'tree';
import { render as trainingView } from './roundTraining';
import { view as actionMenu } from './actionMenu';
@@ -53,10 +53,7 @@ function makeConcealOf(ctrl: AnalyseCtrl): ConcealOf | undefined {
}
const jumpButton = (icon: string, effect: string, enabled: boolean): VNode =>
- h('button.fbt', {
- class: { disabled: !enabled },
- attrs: { 'data-act': effect, 'data-icon': icon },
- });
+ h('button.fbt', { class: { disabled: !enabled }, attrs: { 'data-act': effect, 'data-icon': icon } });
const dataAct = (e: Event): string | null => {
const target = e.target as HTMLElement;
@@ -84,18 +81,15 @@ function inputs(ctrl: AnalyseCtrl): VNode | undefined {
h('div.pair', [
h('label.name', 'FEN'),
h('input.copyable.autoselect.analyse__underboard__fen', {
- attrs: {
- spellcheck: 'false',
- enterkeyhint: 'done',
- },
+ attrs: { spellcheck: 'false', enterkeyhint: 'done' },
hook: {
insert: vnode => {
const el = vnode.elm as HTMLInputElement;
el.value = defined(ctrl.fenInput) ? ctrl.fenInput : ctrl.node.fen;
- el.addEventListener('change', _ => {
+ el.addEventListener('change', () => {
if (el.value !== ctrl.node.fen && el.reportValidity()) ctrl.changeFen(el.value.trim());
});
- el.addEventListener('input', _ => {
+ el.addEventListener('input', () => {
ctrl.fenInput = el.value;
el.setCustomValidity(parseFen(el.value.trim()).isOk ? '' : 'Invalid FEN');
});
@@ -137,19 +131,18 @@ function inputs(ctrl: AnalyseCtrl): VNode | undefined {
},
},
}),
- isMobile()
- ? null
- : h(
- 'button.button.button-thin.action.text',
- {
- attrs: dataIcon(licon.PlayTriangle),
- hook: bind('click', _ => {
- const pgn = $('.copyables .pgn textarea').val() as string;
- if (pgn !== pgnExport.renderFullTxt(ctrl)) ctrl.changePgn(pgn, true);
- }),
- },
- ctrl.trans.noarg('importPgn'),
- ),
+ !isMobile() &&
+ h(
+ 'button.button.button-thin.action.text',
+ {
+ attrs: dataIcon(licon.PlayTriangle),
+ hook: bind('click', _ => {
+ const pgn = $('.copyables .pgn textarea').val() as string;
+ if (pgn !== pgnExport.renderFullTxt(ctrl)) ctrl.changePgn(pgn, true);
+ }),
+ },
+ ctrl.trans.noarg('importPgn'),
+ ),
]),
]),
]);
@@ -183,11 +176,7 @@ function controls(ctrl: AnalyseCtrl) {
ctrl.studyPractice
? [
h('button.fbt', {
- attrs: {
- title: noarg('analysis'),
- 'data-act': 'analysis',
- 'data-icon': licon.Microscope,
- },
+ attrs: { title: noarg('analysis'), 'data-act': 'analysis', 'data-icon': licon.Microscope },
}),
]
: [
@@ -202,19 +191,17 @@ function controls(ctrl: AnalyseCtrl) {
active: ctrl.explorer.enabled(),
},
}),
- ctrl.ceval.possible && ctrl.ceval.allowed() && !ctrl.isGamebook()
- ? h('button.fbt', {
- attrs: {
- title: noarg('practiceWithComputer'),
- 'data-act': 'practice',
- 'data-icon': licon.Bullseye,
- },
- class: {
- hidden: menuIsOpen || !!ctrl.retro,
- active: !!ctrl.practice,
- },
- })
- : null,
+ ctrl.ceval.possible &&
+ ctrl.ceval.allowed() &&
+ !ctrl.isGamebook() &&
+ h('button.fbt', {
+ attrs: {
+ title: noarg('practiceWithComputer'),
+ 'data-act': 'practice',
+ 'data-icon': licon.Bullseye,
+ },
+ class: { hidden: menuIsOpen || !!ctrl.retro, active: !!ctrl.practice },
+ }),
],
),
h('div.jumps', [
@@ -227,11 +214,7 @@ function controls(ctrl: AnalyseCtrl) {
? h('div.noop')
: h('button.fbt', {
class: { active: menuIsOpen },
- attrs: {
- title: noarg('menu'),
- 'data-act': 'menu',
- 'data-icon': licon.Hamburger,
- },
+ attrs: { title: noarg('menu'), 'data-act': 'menu', 'data-icon': licon.Hamburger },
}),
],
);
@@ -306,14 +289,14 @@ export default function (deps?: typeof studyDeps) {
const renderAnalyse = (ctrl: AnalyseCtrl, concealOf?: ConcealOf) =>
h('div.analyse__moves.areplay', [
h(`div.areplay__v${ctrl.treeVersion}`, [renderTreeView(ctrl, concealOf), ...renderResult(ctrl)]),
- !ctrl.practice && !deps?.gbEdit.running(ctrl) ? renderNextChapter(ctrl) : null,
+ !ctrl.practice && !deps?.gbEdit.running(ctrl) && renderNextChapter(ctrl),
]);
return function (ctrl: AnalyseCtrl): VNode {
if (ctrl.nvui) return ctrl.nvui.render();
const concealOf = makeConcealOf(ctrl),
study = ctrl.study,
- showCevalPvs = !(ctrl.retro && ctrl.retro.isSolving()) && !ctrl.practice,
+ showCevalPvs = !ctrl.retro?.isSolving() && !ctrl.practice,
menuIsOpen = ctrl.actionMenu(),
gamebookPlay = ctrl.gamebookPlay(),
gamebookPlayView = gamebookPlay && deps?.gbPlay.render(gamebookPlay),
@@ -367,8 +350,8 @@ export default function (deps?: typeof studyDeps) {
},
},
[
- ctrl.keyboardHelp ? keyboardView(ctrl) : null,
- study ? deps?.studyView.overboard(study) : null,
+ ctrl.keyboardHelp && keyboardView(ctrl),
+ study && deps?.studyView.overboard(study),
tour ||
h(
addChapterId(study, 'div.analyse__board.main-board'),
@@ -396,44 +379,42 @@ export default function (deps?: typeof studyDeps) {
},
[
...(playerStrips || []),
- playerBars ? playerBars[ctrl.bottomIsWhite() ? 1 : 0] : null,
+ playerBars?.[ctrl.bottomIsWhite() ? 1 : 0],
chessground.render(ctrl),
- playerBars ? playerBars[ctrl.bottomIsWhite() ? 0 : 1] : null,
+ playerBars?.[ctrl.bottomIsWhite() ? 0 : 1],
ctrl.promotion.view(ctrl.data.game.variant.key === 'antichess'),
],
),
- gaugeOn && !tour ? cevalView.renderGauge(ctrl) : null,
- menuIsOpen || tour ? null : crazyView(ctrl, ctrl.topColor(), 'top'),
+ gaugeOn && !tour && cevalView.renderGauge(ctrl),
+ !menuIsOpen && !tour && crazyView(ctrl, ctrl.topColor(), 'top'),
gamebookPlayView ||
- (tour
- ? null
- : h(addChapterId(study, 'div.analyse__tools'), [
- ...(menuIsOpen
- ? [actionMenu(ctrl)]
- : [
- ...cevalView.renderCeval(ctrl),
- showCevalPvs ? cevalView.renderPvs(ctrl) : null,
- renderAnalyse(ctrl, concealOf),
- gamebookEditView,
- forkView(ctrl, concealOf),
- retroView(ctrl) || practiceView(ctrl) || explorerView(ctrl),
- ]),
- ])),
- menuIsOpen || tour ? null : crazyView(ctrl, ctrl.bottomColor(), 'bottom'),
- gamebookPlayView || tour ? null : controls(ctrl),
- tour
- ? null
- : h(
- 'div.analyse__underboard',
- {
- hook:
- ctrl.synthetic || playable(ctrl.data)
- ? undefined
- : onInsert(elm => serverSideUnderboard(elm, ctrl)),
- },
- study ? deps?.studyView.underboard(ctrl) : [inputs(ctrl)],
- ),
- tour ? null : trainingView(ctrl),
+ (!tour &&
+ h(addChapterId(study, 'div.analyse__tools'), [
+ ...(menuIsOpen
+ ? [actionMenu(ctrl)]
+ : [
+ ...cevalView.renderCeval(ctrl),
+ showCevalPvs && cevalView.renderPvs(ctrl),
+ renderAnalyse(ctrl, concealOf),
+ gamebookEditView,
+ forkView(ctrl, concealOf),
+ retroView(ctrl) || practiceView(ctrl) || explorerView(ctrl),
+ ]),
+ ])),
+ !menuIsOpen && !tour && crazyView(ctrl, ctrl.bottomColor(), 'bottom'),
+ !gamebookPlayView && !tour && controls(ctrl),
+ !tour &&
+ h(
+ 'div.analyse__underboard',
+ {
+ hook:
+ ctrl.synthetic || playable(ctrl.data)
+ ? undefined
+ : onInsert(elm => serverSideUnderboard(elm, ctrl)),
+ },
+ study ? deps?.studyView.underboard(ctrl) : [inputs(ctrl)],
+ ),
+ !tour && trainingView(ctrl),
ctrl.studyPractice
? deps?.studyPracticeView.side(study!)
: h(
@@ -449,28 +430,26 @@ export default function (deps?: typeof studyDeps) {
: study
? [deps?.studyView.side(study)]
: [
- ctrl.forecast ? forecastView(ctrl, ctrl.forecast) : null,
- !ctrl.synthetic && playable(ctrl.data)
- ? h(
- 'div.back-to-game',
- h(
- 'a.button.button-empty.text',
- {
- attrs: {
- href: router.game(ctrl.data, ctrl.data.player.color),
- 'data-icon': licon.Back,
- },
+ ctrl.forecast && forecastView(ctrl, ctrl.forecast),
+ !ctrl.synthetic &&
+ playable(ctrl.data) &&
+ h(
+ 'div.back-to-game',
+ h(
+ 'a.button.button-empty.text',
+ {
+ attrs: {
+ href: router.game(ctrl.data, ctrl.data.player.color),
+ 'data-icon': licon.Back,
},
- ctrl.trans.noarg('backToGame'),
- ),
- )
- : null,
+ },
+ ctrl.trans.noarg('backToGame'),
+ ),
+ ),
],
),
study && study.relay && deps?.relayManager(study.relay),
- h('div.chat__members.none', {
- hook: onInsert(lichess.watchers),
- }),
+ h('div.chat__members.none', { hook: onInsert(lichess.watchers) }),
],
);
};
diff --git a/ui/board/src/menu.ts b/ui/board/src/menu.ts
index b82b0d749bfc7..3780782fd56b3 100644
--- a/ui/board/src/menu.ts
+++ b/ui/board/src/menu.ts
@@ -9,10 +9,7 @@ import * as controls from 'common/controls';
export const toggleButton = (toggle: Toggle, title: string) =>
h('button.fbt.board-menu-toggle', {
class: { active: toggle() },
- attrs: {
- title,
- 'data-icon': licon.Hamburger,
- },
+ attrs: { title, 'data-icon': licon.Hamburger },
hook: onInsert(bindMobileMousedown(toggle.toggle)),
});
@@ -25,9 +22,7 @@ export const menu = (
toggle()
? h(
'div.board-menu',
- {
- hook: onInsert(onClickAway(() => toggle(false))),
- },
+ { hook: onInsert(onClickAway(() => toggle(false))) },
content(new BoardMenu(trans, redraw)),
)
: undefined;
@@ -45,10 +40,7 @@ export class BoardMenu {
'button.button.text',
{
class: { active },
- attrs: {
- title: 'Hotkey: f',
- ...dataIcon(licon.ChasingArrows),
- },
+ attrs: { title: 'Hotkey: f', ...dataIcon(licon.ChasingArrows) },
hook: onInsert(bindMobileMousedown(onChange)),
},
name,
diff --git a/ui/ceval/package.json b/ui/ceval/package.json
index e02a1c75d86c1..307264068efd4 100644
--- a/ui/ceval/package.json
+++ b/ui/ceval/package.json
@@ -16,7 +16,7 @@
"license": "AGPL-3.0-or-later",
"dependencies": {
"@badrap/result": "^0.2.13",
- "chessops": "^0.12.7",
+ "chessops": "^0.13.0",
"common": "workspace:*",
"idb-keyval": "^6.2.1",
"snabbdom": "^3.5.1",
diff --git a/ui/ceval/src/engines/externalEngine.ts b/ui/ceval/src/engines/externalEngine.ts
index 5c14ac7c3c273..427a6f9debad9 100644
--- a/ui/ceval/src/engines/externalEngine.ts
+++ b/ui/ceval/src/engines/externalEngine.ts
@@ -85,8 +85,8 @@ export class ExternalEngine implements CevalEngine {
this.state = CevalState.Initial;
this.status?.();
- } catch (err: unknown) {
- if ((err as Error).name !== 'AbortError') {
+ } catch (err: any) {
+ if (err.name !== 'AbortError') {
console.error(err);
this.state = CevalState.Failed;
this.status?.({ error: String(err) });
diff --git a/ui/ceval/src/util.ts b/ui/ceval/src/util.ts
index 18401ec58c74b..6a2b0dc317f00 100644
--- a/ui/ceval/src/util.ts
+++ b/ui/ceval/src/util.ts
@@ -43,10 +43,13 @@ export function showEngineError(engine: string, error: string) {
domDialog({
class: 'engine-error',
htmlText:
- `${lichess.escapeHtml(engine)} error
` +
- `${lichess.escapeHtml(error)}Things to try
` +
- '- Decrease memory slider in engine settings
- Clear site settings for lichess.org
' +
- '- Select another engine
- Update your browser
',
+ `${lichess.escapeHtml(engine)} error
` + error.includes('Status 503')
+ ? `Your external engine does not appear to be connected.
+ Please check the network and restart your provider if possible.
`
+ : `${lichess.escapeHtml(error)}Things to try
+ - Decrease memory slider in engine settings
+ - Clear site settings for lichess.org
+ - Select another engine
- Update your browser
`,
}).then((dlg: Dialog) => {
const select = () =>
setTimeout(() => {
diff --git a/ui/ceval/src/view/main.ts b/ui/ceval/src/view/main.ts
index a56f10814a392..e5de83eff48d4 100644
--- a/ui/ceval/src/view/main.ts
+++ b/ui/ceval/src/view/main.ts
@@ -1,10 +1,10 @@
import * as winningChances from '../winningChances';
import * as licon from 'common/licon';
import { stepwiseScroll } from 'common/scroll';
-import { bind, MaybeVNodes } from 'common/snabbdom';
+import { bind, LooseVNodes, looseH as h } from 'common/snabbdom';
import { defined, notNull } from 'common';
import { Eval, ParentCtrl, NodeEvals, CevalState } from '../types';
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import { Position } from 'chessops/chess';
import { lichessRules } from 'chessops/compat';
import { makeSanAndPlay } from 'chessops/san';
@@ -81,14 +81,8 @@ function localInfo(ctrl: ParentCtrl, ev?: Tree.ClientEval | false): EvalInfo {
function threatButton(ctrl: ParentCtrl): VNode | null {
if (ctrl.getCeval().download || (ctrl.disableThreatMode && ctrl.disableThreatMode())) return null;
return h('button.show-threat', {
- class: {
- active: ctrl.threatMode(),
- hidden: !!ctrl.getNode().check,
- },
- attrs: {
- 'data-icon': licon.Target,
- title: ctrl.trans.noarg('showThreat') + ' (x)',
- },
+ class: { active: ctrl.threatMode(), hidden: !!ctrl.getNode().check },
+ attrs: { 'data-icon': licon.Target, title: ctrl.trans.noarg('showThreat') + ' (x)' },
hook: bind('click', ctrl.toggleThreatMode),
});
}
@@ -102,21 +96,13 @@ function engineName(ctrl: CevalCtrl): VNode[] {
engineTech === 'EXTERNAL'
? h(
'span.technology.good',
- {
- attrs: {
- title: 'Engine running outside of the browser',
- },
- },
+ { attrs: { title: 'Engine running outside of the browser' } },
engineTech,
)
: engine.requires?.includes('simd')
? h(
'span.technology.good',
- {
- attrs: {
- title: 'Multi-threaded WebAssembly with SIMD',
- },
- },
+ { attrs: { title: 'Multi-threaded WebAssembly with SIMD' } },
engineTech,
)
: engine.requires?.includes('sharedMem')
@@ -156,19 +142,13 @@ export function renderGauge(ctrl: ParentCtrl): VNode | undefined {
ev = winningChances.povChances('white', bestEv);
gaugeLast = ev;
} else ev = gaugeLast;
- return h(
- 'div.eval-gauge',
- {
- class: {
- empty: ev === null,
- reverse: ctrl.getOrientation() === 'black',
- },
- },
- [h('div.black', { attrs: { style: `height: ${100 - (ev + 1) * 50}%` } }), ...gaugeTicks],
- );
+ return h('div.eval-gauge', { class: { empty: ev === null, reverse: ctrl.getOrientation() === 'black' } }, [
+ h('div.black', { attrs: { style: `height: ${100 - (ev + 1) * 50}%` } }),
+ ...gaugeTicks,
+ ]);
}
-export function renderCeval(ctrl: ParentCtrl): MaybeVNodes {
+export function renderCeval(ctrl: ParentCtrl): LooseVNodes {
const ceval = ctrl.getCeval(),
trans = ctrl.trans;
if (!ceval.allowed() || !ceval.possible) return [];
@@ -202,30 +182,29 @@ export function renderCeval(ctrl: ParentCtrl): MaybeVNodes {
}
if (download) percent = Math.min(100, Math.round((100 * download.bytes) / download.total));
- const progressBar: VNode | null =
- enabled || download
- ? h(
- 'div.bar',
- h('span', {
- class: { threat: enabled && threatMode },
- attrs: { style: `width: ${percent}%` },
- hook: {
- postpatch: (old, vnode) => {
- if (old.data!.percent > percent || !!old.data!.threatMode != threatMode) {
- const el = vnode.elm as HTMLElement;
- const p = el.parentNode as HTMLElement;
- p.removeChild(el);
- p.appendChild(el);
- }
- vnode.data!.percent = percent;
- vnode.data!.threatMode = threatMode;
- },
- },
- }),
- )
- : null;
-
- const body: Array = enabled
+ const progressBar: VNode | undefined =
+ (enabled || download) &&
+ h(
+ 'div.bar',
+ h('span', {
+ class: { threat: enabled && threatMode },
+ attrs: { style: `width: ${percent}%` },
+ hook: {
+ postpatch: (old, vnode) => {
+ if (old.data!.percent > percent || !!old.data!.threatMode != threatMode) {
+ const el = vnode.elm as HTMLElement;
+ const p = el.parentNode as HTMLElement;
+ p.removeChild(el);
+ p.appendChild(el);
+ }
+ vnode.data!.percent = percent;
+ vnode.data!.threatMode = threatMode;
+ },
+ },
+ }),
+ );
+
+ const body: LooseVNodes = enabled
? [
h('pearl', [pearl]),
h('div.engine', [
@@ -243,7 +222,7 @@ export function renderCeval(ctrl: ParentCtrl): MaybeVNodes {
]),
]
: [
- pearl ? h('pearl', [pearl]) : null,
+ pearl && h('pearl', [pearl]),
h('help', [
...engineName(ceval),
h('br'),
@@ -251,28 +230,17 @@ export function renderCeval(ctrl: ParentCtrl): MaybeVNodes {
]),
];
- const switchButton: VNode | null =
- ctrl.mandatoryCeval && ctrl.mandatoryCeval()
- ? null
- : h(
- 'div.switch',
- {
- attrs: { title: trans.noarg('toggleLocalEvaluation') + ' (L)' },
- },
- [
- h('input#analyse-toggle-ceval.cmn-toggle.cmn-toggle--subtle', {
- attrs: {
- type: 'checkbox',
- checked: enabled,
- disabled: !ceval.analysable,
- },
- hook: bind('change', ctrl.toggleCeval),
- }),
- h('label', { attrs: { for: 'analyse-toggle-ceval' } }),
- ],
- );
+ const switchButton: VNode | false =
+ !ctrl.mandatoryCeval?.() &&
+ h('div.switch', { attrs: { title: trans.noarg('toggleLocalEvaluation') + ' (L)' } }, [
+ h('input#analyse-toggle-ceval.cmn-toggle.cmn-toggle--subtle', {
+ attrs: { type: 'checkbox', checked: enabled, disabled: !ceval.analysable },
+ hook: bind('change', ctrl.toggleCeval),
+ }),
+ h('label', { attrs: { for: 'analyse-toggle-ceval' } }),
+ ]);
- const settingsGear: VNode | null = h('button.settings-gear', {
+ const settingsGear = h('button.settings-gear', {
attrs: { 'data-icon': licon.Gear, title: 'Engine settings' },
class: { active: ctrl.getCeval().showEnginePrefs() }, // must use ctrl.getCeval() rather than ceval here
hook: bind(
@@ -284,13 +252,13 @@ export function renderCeval(ctrl: ParentCtrl): MaybeVNodes {
});
return [
- h(
- 'div.ceval' + (enabled ? '.enabled' : ''),
- {
- class: { computing: ceval.computing() },
- },
- [switchButton, ...body, threatButton(ctrl), settingsGear, progressBar],
- ),
+ h('div.ceval' + (enabled ? '.enabled' : ''), { class: { computing: ceval.computing() } }, [
+ switchButton,
+ ...body,
+ threatButton(ctrl),
+ settingsGear,
+ progressBar,
+ ]),
renderCevalSettings(ctrl),
];
}
@@ -473,17 +441,7 @@ function renderPvMoves(pos: Position, pv: Uci[]): VNode[] {
}
key += '|' + uci;
vnodes.push(
- h(
- 'span.pv-san',
- {
- key,
- attrs: {
- 'data-move-index': i,
- 'data-board': `${fen}|${uci}`,
- },
- },
- san,
- ),
+ h('span.pv-san', { key, attrs: { 'data-move-index': i, 'data-board': `${fen}|${uci}` } }, san),
);
}
return vnodes;
@@ -523,10 +481,7 @@ const analysisDisabled = (ctrl: ParentCtrl): VNode | undefined =>
h('span', ctrl.trans.noarg('computerAnalysisDisabled')),
h(
'button',
- {
- hook: bind('click', () => ctrl.toggleComputer?.(), ctrl.redraw),
- attrs: { type: 'button' },
- },
+ { hook: bind('click', () => ctrl.toggleComputer?.(), ctrl.redraw), attrs: { type: 'button' } },
ctrl.trans.noarg('enable'),
),
]);
diff --git a/ui/ceval/src/view/settings.ts b/ui/ceval/src/view/settings.ts
index cde754987aca6..caf639e1cb304 100644
--- a/ui/ceval/src/view/settings.ts
+++ b/ui/ceval/src/view/settings.ts
@@ -1,10 +1,10 @@
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import { ParentCtrl } from '../types';
import CevalCtrl from '../ctrl';
import { fewerCores } from '../util';
import { rangeConfig } from 'common/controls';
import { hasFeature, isChrome } from 'common/device';
-import { onInsert, bind, dataIcon } from 'common/snabbdom';
+import { onInsert, bind, dataIcon, looseH as h } from 'common/snabbdom';
import * as Licon from 'common/licon';
import { onClickAway, isReadonlyProp } from 'common';
@@ -60,130 +60,109 @@ export function renderCevalSettings(ctrl: ParentCtrl): VNode | null {
},
[
...engineSelection(ctrl),
- isReadonlyProp(ceval.searchMs)
- ? null
- : (id => {
- return h(
- 'div.setting',
- {
- attrs: { title: 'Set time to evaluate fresh positions' },
- },
- [
- h('label', 'Search time'),
- h('input#' + id, {
- attrs: { type: 'range', min: 0, max: searchTicks.length - 1, step: 1 },
- hook: rangeConfig(searchTick, n => {
- ceval.searchMs(searchTicks[n][0]);
- ctrl.restartCeval?.();
- }),
- }),
- h('div.range_value', searchTicks[searchTick()][1]),
- ],
- );
- })('engine-search-ms'),
- isReadonlyProp(ceval.multiPv)
- ? null
- : (id => {
- const max = 5;
- return h(
- 'div.setting',
- {
- attrs: {
- title: 'Set number of evaluation lines and move arrows on the board',
- },
+ !isReadonlyProp(ceval.searchMs) &&
+ (id => {
+ return h('div.setting', { attrs: { title: 'Set time to evaluate fresh positions' } }, [
+ h('label', 'Search time'),
+ h('input#' + id, {
+ attrs: { type: 'range', min: 0, max: searchTicks.length - 1, step: 1 },
+ hook: rangeConfig(searchTick, n => {
+ ceval.searchMs(searchTicks[n][0]);
+ ctrl.restartCeval?.();
+ }),
+ }),
+ h('div.range_value', searchTicks[searchTick()][1]),
+ ]);
+ })('engine-search-ms'),
+ !isReadonlyProp(ceval.multiPv) &&
+ (id => {
+ const max = 5;
+ return h(
+ 'div.setting',
+ { attrs: { title: 'Set number of evaluation lines and move arrows on the board' } },
+ [
+ h('label', { attrs: { for: id } }, noarg('multipleLines')),
+ h('input#' + id, {
+ attrs: { type: 'range', min: 0, max, step: 1 },
+ hook: rangeConfig(
+ () => ceval.multiPv(),
+ (pvs: number) => {
+ ceval.multiPv(pvs);
+ ctrl.clearCeval?.();
+ },
+ ),
+ }),
+ h('div.range_value', `${ceval.multiPv()} / ${max}`),
+ ],
+ );
+ })('analyse-multipv'),
+ (hasFeature('sharedMem') || ceval.engines.external) &&
+ (id => {
+ return h(
+ 'div.setting',
+ {
+ attrs: {
+ title:
+ fewerCores() && !ceval.engines.external
+ ? 'More threads will use more battery for better analysis'
+ : "Set this below your CPU's thread count\nThe ticks mark a good safe choice",
},
- [
- h('label', { attrs: { for: id } }, noarg('multipleLines')),
+ },
+ [
+ h('label', { attrs: { for: id } }, 'Threads'),
+ h('span', [
h('input#' + id, {
- attrs: { type: 'range', min: 0, max, step: 1 },
- hook: rangeConfig(
- () => ceval.multiPv(),
- (pvs: number) => {
- ceval.multiPv(pvs);
- ctrl.clearCeval?.();
- },
- ),
+ attrs: {
+ type: 'range',
+ min: minThreads,
+ max: maxThreads,
+ step: 1,
+ disabled: maxThreads <= minThreads,
+ },
+ hook: rangeConfig(() => ceval.threads(), clickThreads),
}),
- h('div.range_value', `${ceval.multiPv()} / ${max}`),
- ],
- );
- })('analyse-multipv'),
- hasFeature('sharedMem') || ceval.engines.external
- ? (id => {
- return h(
- 'div.setting',
- {
- attrs: {
- title:
- fewerCores() && !ceval.engines.external
- ? 'More threads will use more battery for better analysis'
- : "Set this below your CPU's thread count\nThe ticks mark a good safe choice",
- },
- },
- [
- h('label', { attrs: { for: id } }, 'Threads'),
- h('span', [
- h('input#' + id, {
- attrs: {
- type: 'range',
- min: minThreads,
- max: maxThreads,
- step: 1,
- disabled: maxThreads <= minThreads,
- },
- hook: rangeConfig(() => ceval.threads(), clickThreads),
- }),
- h(
- 'div.tick',
- {
- hook: {
- update: (_, v) => setupTick(v, ceval),
- insert: v => {
- setupTick(v, ceval);
- observer = new ResizeObserver(() => setupTick(v, ceval));
- observer.observe(v.elm!.parentElement!);
- },
- destroy: () => observer?.disconnect(),
+ h(
+ 'div.tick',
+ {
+ hook: {
+ update: (_, v) => setupTick(v, ceval),
+ insert: v => {
+ setupTick(v, ceval);
+ observer = new ResizeObserver(() => setupTick(v, ceval));
+ observer.observe(v.elm!.parentElement!);
},
+ destroy: () => observer?.disconnect(),
},
- ceval.engines.external ? null : [threadsTick('up'), threadsTick('down')],
- ),
- ]),
- h('div.range_value', `${ceval.threads()} / ${maxThreads}`),
- ],
- );
- })('analyse-threads')
- : null,
+ },
+ !ceval.engines.external && [threadsTick('up'), threadsTick('down')],
+ ),
+ ]),
+ h('div.range_value', `${ceval.threads()} / ${maxThreads}`),
+ ],
+ );
+ })('analyse-threads'),
(id =>
- h(
- 'div.setting',
- {
+ h('div.setting', { attrs: { title: 'Higher values may improve performance' } }, [
+ h('label', { attrs: { for: id } }, noarg('memory')),
+ h('input#' + id, {
attrs: {
- title: 'Higher values may improve performance',
+ type: 'range',
+ min: 4,
+ max: Math.floor(Math.log2(engCtrl.active?.maxHash ?? 4)),
+ step: 1,
+ disabled: ceval.maxHash() <= 16,
},
- },
- [
- h('label', { attrs: { for: id } }, noarg('memory')),
- h('input#' + id, {
- attrs: {
- type: 'range',
- min: 4,
- max: Math.floor(Math.log2(engCtrl.active?.maxHash ?? 4)),
- step: 1,
- disabled: ceval.maxHash() <= 16,
+ hook: rangeConfig(
+ () => Math.floor(Math.log2(ceval.hashSize())),
+ v => {
+ ceval.setHashSize(Math.pow(2, v));
+ ctrl.restartCeval?.();
},
- hook: rangeConfig(
- () => Math.floor(Math.log2(ceval.hashSize())),
- v => {
- ceval.setHashSize(Math.pow(2, v));
- ctrl.restartCeval?.();
- },
- ),
- }),
+ ),
+ }),
- h('div.range_value', formatHashSize(ceval.hashSize())),
- ],
- ))('analyse-memory'),
+ h('div.range_value', formatHashSize(ceval.hashSize())),
+ ]))('analyse-memory'),
],
),
)
@@ -214,34 +193,22 @@ function engineSelection(ctrl: ParentCtrl) {
'Engine:',
h(
'select.select-engine',
- {
- hook: bind('change', e => ceval.selectEngine((e.target as HTMLSelectElement).value)),
- },
+ { hook: bind('change', e => ceval.selectEngine((e.target as HTMLSelectElement).value)) },
[
...engines.map(engine =>
- h(
- 'option',
- {
- attrs: {
- value: engine.id,
- selected: active?.id == engine.id,
- },
- },
- engine.name,
- ),
+ h('option', { attrs: { value: engine.id, selected: active?.id == engine.id } }, engine.name),
),
],
),
- external
- ? h('button.delete', {
- attrs: { ...dataIcon(Licon.X), title: 'Delete external engine' },
- hook: bind('click', e => {
- (e.currentTarget as HTMLElement).blur();
- if (confirm('Remove external engine?'))
- ceval.engines.deleteExternal(external.id).then(ok => ok && ctrl.redraw?.());
- }),
- })
- : null,
+ external &&
+ h('button.delete', {
+ attrs: { ...dataIcon(Licon.X), title: 'Delete external engine' },
+ hook: bind('click', e => {
+ (e.currentTarget as HTMLElement).blur();
+ if (confirm('Remove external engine?'))
+ ceval.engines.deleteExternal(external.id).then(ok => ok && ctrl.redraw?.());
+ }),
+ }),
]),
h('br'),
];
diff --git a/ui/challenge/src/view.ts b/ui/challenge/src/view.ts
index 8f0ca1e4e5c51..a8ccf4c875c9b 100644
--- a/ui/challenge/src/view.ts
+++ b/ui/challenge/src/view.ts
@@ -26,10 +26,7 @@ function allChallenges(ctrl: Ctrl, d: ChallengeData, nb: number): VNode {
'div.challenges',
{
class: { many: nb > 3 },
- hook: {
- insert: userPowertips,
- postpatch: userPowertips,
- },
+ hook: { insert: userPowertips, postpatch: userPowertips },
},
d.in.map(challenge(ctrl, 'in')).concat(d.out.map(challenge(ctrl, 'out'))),
);
@@ -44,31 +41,21 @@ function challenge(ctrl: Ctrl, dir: ChallengeDirection) {
return h(
`div.challenge.${dir}.c-${c.id}`,
{
- class: {
- declined: !!c.declined,
- },
+ class: { declined: !!c.declined },
},
[
h('div.content', [
- h(
- 'div.content__text',
- {
- attrs: { id: `challenge-text-${c.id}` },
- },
- [
- h('span.head', [renderUser(opponent, ctrl.showRatings), renderLag(opponent)]),
- h('span.desc', [
- h('span.is.color-icon.' + myColor),
+ h('div.content__text', { attrs: { id: `challenge-text-${c.id}` } }, [
+ h('span.head', [renderUser(opponent, ctrl.showRatings), renderLag(opponent)]),
+ h('span.desc', [
+ h('span.is.color-icon.' + myColor),
+ ' • ',
+ [ctrl.trans()(c.rated ? 'rated' : 'casual'), timeControl(c.timeControl), c.variant.name].join(
' • ',
- [ctrl.trans()(c.rated ? 'rated' : 'casual'), timeControl(c.timeControl), c.variant.name].join(
- ' • ',
- ),
- ]),
- ],
- ),
- h('i.perf', {
- attrs: { 'data-icon': c.perf.icon },
- }),
+ ),
+ ]),
+ ]),
+ h('i.perf', { attrs: { 'data-icon': c.perf.icon } }),
]),
fromPosition
? h('div.position.mini-board.cg-wrap.is2d', {
@@ -89,32 +76,19 @@ function challenge(ctrl: Ctrl, dir: ChallengeDirection) {
function inButtons(ctrl: Ctrl, c: Challenge): VNode[] {
const trans = ctrl.trans();
return [
- h(
- 'form',
- {
+ h('form', { attrs: { method: 'post', action: `/challenge/${c.id}/accept` } }, [
+ h('button.button.accept', {
attrs: {
- method: 'post',
- action: `/challenge/${c.id}/accept`,
+ type: 'submit',
+ 'aria-describedby': `challenge-text-${c.id}`,
+ 'data-icon': licon.Checkmark,
+ title: trans('accept'),
},
- },
- [
- h('button.button.accept', {
- attrs: {
- type: 'submit',
- 'aria-describedby': `challenge-text-${c.id}`,
- 'data-icon': licon.Checkmark,
- title: trans('accept'),
- },
- hook: onClick(ctrl.onRedirect),
- }),
- ],
- ),
+ hook: onClick(ctrl.onRedirect),
+ }),
+ ]),
h('button.button.decline', {
- attrs: {
- type: 'submit',
- 'data-icon': licon.X,
- title: trans('decline'),
- },
+ attrs: { type: 'submit', 'data-icon': licon.X, title: trans('decline') },
hook: onClick(() => ctrl.decline(c.id, 'generic')),
}),
h(
@@ -140,18 +114,11 @@ function outButtons(ctrl: Ctrl, c: Challenge) {
h('div.owner', [
h('span.waiting', ctrl.trans()('waiting')),
h('a.view', {
- attrs: {
- 'data-icon': licon.Eye,
- href: '/' + c.id,
- title: trans('viewInFullSize'),
- },
+ attrs: { 'data-icon': licon.Eye, href: '/' + c.id, title: trans('viewInFullSize') },
}),
]),
h('button.button.decline', {
- attrs: {
- 'data-icon': licon.X,
- title: trans('cancel'),
- },
+ attrs: { 'data-icon': licon.X, title: trans('cancel') },
hook: onClick(() => ctrl.cancel(c.id)),
}),
];
@@ -174,28 +141,10 @@ const renderUser = (u: ChallengeUser | undefined, showRating: boolean): VNode =>
: h('span', 'Open challenge');
const renderLag = (u?: ChallengeUser) =>
- u &&
- h(
- 'signal',
- u.lag === undefined
- ? []
- : [1, 2, 3, 4].map(i =>
- h('i', {
- class: { off: u.lag! < i },
- }),
- ),
- );
+ u && h('signal', u.lag === undefined ? [] : [1, 2, 3, 4].map(i => h('i', { class: { off: u.lag! < i } })));
const empty = (): VNode =>
- h(
- 'div.empty.text',
- {
- attrs: {
- 'data-icon': licon.InfoCircle,
- },
- },
- 'No challenges.',
- );
+ h('div.empty.text', { attrs: { 'data-icon': licon.InfoCircle } }, 'No challenges.');
const onClick = (f: (e: Event) => void) => ({
insert: (vnode: VNode) => {
diff --git a/ui/chart/src/acpl.ts b/ui/chart/src/acpl.ts
index 1d13c5d4d696f..dfe80e579cb3c 100644
--- a/ui/chart/src/acpl.ts
+++ b/ui/chart/src/acpl.ts
@@ -200,14 +200,14 @@ const glyphProperties = (node: Tree.Node): { advice?: Advice; color?: string } =
const toBlurArray = (player: Player) => player.blurs?.bits?.split('') ?? [];
-function christmasTree(chart: Chart, mainline: Tree.Node[], hoverColors: string[]) {
+function christmasTree(chart: AcplChart, mainline: Tree.Node[], hoverColors: string[]) {
$('div.advice-summary').on('mouseenter', 'div.symbol', function (this: HTMLElement) {
const symbol = this.getAttribute('data-symbol');
const playerColorBit = this.getAttribute('data-color') == 'white' ? 1 : 0;
const acplDataset = chart.data.datasets[0];
if (symbol == '??' || symbol == '?!' || symbol == '?') {
- acplDataset.hoverBackgroundColor = hoverColors;
- acplDataset.borderColor = hoverColors;
+ acplDataset.pointHoverBackgroundColor = hoverColors;
+ acplDataset.pointBorderColor = hoverColors;
const points = mainline
.map((node, i) =>
node.glyphs?.some(glyph => glyph.symbol == symbol) && (node.ply & 1) == playerColorBit
@@ -220,9 +220,9 @@ function christmasTree(chart: Chart, mainline: Tree.Node[], hoverColors: string[
}
});
$('div.advice-summary').on('mouseleave', 'div.symbol', function (this: HTMLElement) {
- if (chart.getActiveElements().length) chart.setActiveElements([]);
- chart.data.datasets[0].hoverBackgroundColor = orangeAccent;
- chart.data.datasets[0].borderColor = orangeAccent;
+ chart.setActiveElements([]);
+ chart.data.datasets[0].pointHoverBackgroundColor = orangeAccent;
+ chart.data.datasets[0].pointBorderColor = orangeAccent;
chart.update('none');
});
}
diff --git a/ui/chart/src/interface.ts b/ui/chart/src/interface.ts
index 40fec664afa4a..731ffcaae9c6d 100644
--- a/ui/chart/src/interface.ts
+++ b/ui/chart/src/interface.ts
@@ -1,6 +1,6 @@
import { Chart } from 'chart.js';
-export interface PlyChart extends Chart {
+export interface PlyChart extends Chart<'line'> {
selectPly(ply: number, isMainline: boolean): void;
}
diff --git a/ui/chat/src/discussion.ts b/ui/chat/src/discussion.ts
index 567f1cd39138a..ab72cbe71b618 100644
--- a/ui/chat/src/discussion.ts
+++ b/ui/chat/src/discussion.ts
@@ -27,11 +27,7 @@ export default function (ctrl: ChatCtrl): Array {
h(
`ol.mchat__messages.chat-v-${ctrl.vm.domVersion}${hasMod ? '.as-mod' : ''}`,
{
- attrs: {
- role: 'log',
- 'aria-live': 'polite',
- 'aria-atomic': 'false',
- },
+ attrs: { role: 'log', 'aria-live': 'polite', 'aria-atomic': 'false' },
hook: {
insert(vnode) {
const $el = $(vnode.elm as HTMLElement).on('click', 'a.jump', (e: Event) => {
@@ -65,10 +61,7 @@ function renderInput(ctrl: ChatCtrl): VNode | undefined {
if (!ctrl.vm.writeable) return;
if ((ctrl.data.loginRequired && !ctrl.data.userId) || ctrl.data.restricted)
return h('input.mchat__say', {
- attrs: {
- placeholder: ctrl.trans('loginToChat'),
- disabled: true,
- },
+ attrs: { placeholder: ctrl.trans('loginToChat'), disabled: true },
});
let placeholder: string;
if (ctrl.vm.timeout) placeholder = ctrl.trans('youHaveBeenTimedOut');
@@ -191,13 +184,7 @@ function updateText(parseMoves: boolean) {
function renderText(t: string, parseMoves: boolean) {
if (enhance.isMoreThanText(t)) {
const hook = updateText(parseMoves);
- return h('t', {
- lichessChat: t,
- hook: {
- create: hook,
- update: hook,
- },
- });
+ return h('t', { lichessChat: t, hook: { create: hook, update: hook } });
}
return h('t', t);
}
@@ -238,10 +225,7 @@ function renderLine(ctrl: ChatCtrl, line: Line): VNode {
: [
myUserId && line.u && myUserId != line.u
? h('action.flag', {
- attrs: {
- 'data-icon': licon.CautionTriangle,
- title: 'Report',
- },
+ attrs: { 'data-icon': licon.CautionTriangle, title: 'Report' },
})
: null,
userNode,
diff --git a/ui/chat/src/moderation.ts b/ui/chat/src/moderation.ts
index 6edab12bc2e42..f0c46d06c62e6 100644
--- a/ui/chat/src/moderation.ts
+++ b/ui/chat/src/moderation.ts
@@ -23,11 +23,7 @@ export function moderationCtrl(opts: ModerationOpts): ModerationCtrl {
opts.redraw();
});
} else {
- data = {
- id: username.toLowerCase(),
- name: username,
- text,
- };
+ data = { id: username.toLowerCase(), name: username, text };
}
opts.redraw();
};
@@ -46,11 +42,7 @@ export function moderationCtrl(opts: ModerationOpts): ModerationCtrl {
close,
async timeout(reason: ModerationReason, text: string) {
if (data) {
- const body = {
- userId: data.id,
- reason: reason.key,
- text,
- };
+ const body = { userId: data.id, reason: reason.key, text };
if (new URLSearchParams(window.location.search).get('mod') === 'true') {
await timeout(opts.resourceId, body);
window.location.reload(); // to load new state since it won't be sent over the socket
@@ -172,12 +164,7 @@ export function moderationView(ctrl?: ModerationCtrl): VNode[] | undefined {
return h('tr', [
h('td.reason', e.reason),
h('td.mod', e.mod),
- h(
- 'td',
- h('time.timeago', {
- attrs: { datetime: e.date },
- }),
- ),
+ h('td', h('time.timeago', { attrs: { datetime: e.date } })),
]);
}),
),
@@ -187,17 +174,8 @@ export function moderationView(ctrl?: ModerationCtrl): VNode[] | undefined {
return [
h('div.top', { key: 'mod-' + data.id }, [
- h(
- 'span.text',
- {
- attrs: { 'data-icon': licon.Agent },
- },
- [userLink(data)],
- ),
- h('a', {
- attrs: { 'data-icon': licon.X },
- hook: bind('click', ctrl.close),
- }),
+ h('span.text', { attrs: { 'data-icon': licon.Agent } }, [userLink(data)]),
+ h('a', { attrs: { 'data-icon': licon.X }, hook: bind('click', ctrl.close) }),
]),
h('div.mchat__content.moderation', [
h('i.line-text.block', ['"', data.text, '"']),
diff --git a/ui/chat/src/note.ts b/ui/chat/src/note.ts
index be3ad908c5d82..94c528253735a 100644
--- a/ui/chat/src/note.ts
+++ b/ui/chat/src/note.ts
@@ -27,16 +27,9 @@ export function noteCtrl(opts: NoteOpts): NoteCtrl {
export function noteView(ctrl: NoteCtrl, autofocus: boolean): VNode {
const text = ctrl.text();
- if (text == undefined)
- return h('div.loading', {
- hook: {
- insert: ctrl.fetch,
- },
- });
+ if (text == undefined) return h('div.loading', { hook: { insert: ctrl.fetch } });
return h('textarea.mchat__note', {
- attrs: {
- placeholder: ctrl.trans('typePrivateNotesHere'),
- },
+ attrs: { placeholder: ctrl.trans('typePrivateNotesHere') },
hook: {
insert(vnode) {
const el = vnode.elm as HTMLTextAreaElement;
diff --git a/ui/chat/src/preset.ts b/ui/chat/src/preset.ts
index 8acdaa75d246f..f62669c8e36a0 100644
--- a/ui/chat/src/preset.ts
+++ b/ui/chat/src/preset.ts
@@ -72,16 +72,9 @@ export function presetView(ctrl: PresetCtrl): VNode | undefined {
return h(
'span',
{
- class: {
- disabled,
- },
- attrs: {
- title: p.text,
- disabled,
- },
- hook: bind('click', () => {
- !disabled && ctrl.post(p);
- }),
+ class: { disabled },
+ attrs: { title: p.text, disabled },
+ hook: bind('click', () => !disabled && ctrl.post(p)),
},
p.key,
);
diff --git a/ui/chat/src/view.ts b/ui/chat/src/view.ts
index 61a6f4a2e3862..7ff8824148bb8 100644
--- a/ui/chat/src/view.ts
+++ b/ui/chat/src/view.ts
@@ -12,14 +12,7 @@ import ChatCtrl from './ctrl';
export default function (ctrl: ChatCtrl): VNode {
return h(
'section.mchat' + (ctrl.opts.alwaysEnabled ? '' : '.mchat-optional'),
- {
- class: {
- 'mchat-mod': !!ctrl.moderation,
- },
- hook: {
- destroy: ctrl.destroy,
- },
- },
+ { class: { 'mchat-mod': !!ctrl.moderation }, hook: { destroy: ctrl.destroy } },
moderationView(ctrl.moderation) || normalView(ctrl),
);
}
@@ -30,10 +23,7 @@ function renderPalantir(ctrl: ChatCtrl) {
return p.instance
? p.instance.render(h)
: h('div.mchat__tab.palantir.palantir-slot', {
- attrs: {
- 'data-icon': licon.Handset,
- title: 'Voice chat',
- },
+ attrs: { 'data-icon': licon.Handset, title: 'Voice chat' },
hook: bind('click', () => {
if (!p.loaded) {
p.loaded = true;
@@ -88,11 +78,7 @@ function tabName(ctrl: ChatCtrl, tab: Tab) {
ctrl.opts.alwaysEnabled
? undefined
: h('input', {
- attrs: {
- type: 'checkbox',
- title: ctrl.trans.noarg('toggleTheChat'),
- checked: ctrl.vm.enabled,
- },
+ attrs: { type: 'checkbox', title: ctrl.trans.noarg('toggleTheChat'), checked: ctrl.vm.enabled },
hook: bind('change', (e: Event) => {
ctrl.setEnabled((e.target as HTMLInputElement).checked);
}),
diff --git a/ui/chess/src/promotion.ts b/ui/chess/src/promotion.ts
index 7b5ff0d9cbb9a..9827c110a5737 100644
--- a/ui/chess/src/promotion.ts
+++ b/ui/chess/src/promotion.ts
@@ -23,18 +23,7 @@ const PROMOTABLE_ROLES: cg.Role[] = ['queen', 'knight', 'rook', 'bishop'];
export function promote(g: CgApi, key: Key, role: cg.Role): void {
const piece = g.state.pieces.get(key);
if (piece && piece.role == 'pawn') {
- g.setPieces(
- new Map([
- [
- key,
- {
- color: piece.color,
- role,
- promoted: true,
- },
- ],
- ]),
- );
+ g.setPieces(new Map([[key, { color: piece.color, role, promoted: true }]]));
}
}
@@ -136,11 +125,7 @@ export class PromotionCtrl {
g.setAutoShapes([
{
orig: dest,
- piece: {
- color: cgUtil.opposite(g.state.turnColor),
- role,
- opacity: 0.8,
- },
+ piece: { color: cgUtil.opposite(g.state.turnColor), role, opacity: 0.8 },
brush: '',
} as DrawShape,
]),
@@ -166,9 +151,7 @@ export class PromotionCtrl {
return h(
'square',
{
- attrs: {
- style: 'top: ' + top + '%;left: ' + left + '%',
- },
+ attrs: { style: 'top: ' + top + '%;left: ' + left + '%' },
hook: bind('click', e => {
e.stopPropagation();
this.finish(serverRole);
diff --git a/ui/common/css/component/_markdown.scss b/ui/common/css/component/_markdown.scss
index c9394cdacf4be..5e0356657041a 100644
--- a/ui/common/css/component/_markdown.scss
+++ b/ui/common/css/component/_markdown.scss
@@ -1,4 +1,12 @@
-@mixin rendered-markdown($element-margin: 1em, $img-max-height: 50vh) {
+@mixin rendered-markdown(
+ $element-margin: 1em,
+ $img-max-height: 50vh,
+ $table: true,
+ $list: true,
+ $img: true,
+ $h1: true,
+ $h2: true
+) {
@extend %break-word;
strong {
@@ -10,51 +18,55 @@
}
p,
- ol,
- ul,
- table,
pre {
margin: $element-margin 0;
}
- ol,
- ul {
- padding-#{$start-direction}: 0.5em;
- }
+ @if $list {
+ ol,
+ ul {
+ margin: $element-margin 0;
+ padding-#{$start-direction}: 0.5em;
+ }
- li ol,
- li ul {
- margin: 0;
- padding-#{$start-direction}: 2em;
- }
+ li ol,
+ li ul {
+ margin: 0;
+ padding-#{$start-direction}: 2em;
+ }
- ol > li {
- list-style: decimal inside;
- }
+ ol > li {
+ list-style: decimal inside;
+ }
- ul > li {
- list-style: disc inside;
- }
+ ul > li {
+ list-style: disc inside;
+ }
- li p {
- display: inline-block;
- vertical-align: top;
- margin-top: 0;
+ li p {
+ display: inline-block;
+ vertical-align: top;
+ margin-top: 0;
+ }
}
- /* should not be used */
- h1 {
- font-size: 1em;
- margin: 0;
+ @if $h1 {
+ /* should not be used */
+ h1 {
+ font-size: 1em;
+ margin: 0;
+ }
}
- h2 {
- &:not(:first-child) {
- margin-top: calc(0.9 * #{$element-margin});
+ @if $h2 {
+ h2 {
+ &:not(:first-child) {
+ margin-top: calc(0.9 * #{$element-margin});
+ }
+ border-bottom: 1px solid $c-brag;
+ line-height: 1.5em;
+ padding-bottom: calc(0.25 * #{$element-margin});
}
- border-bottom: 1px solid $c-brag;
- line-height: 1.5em;
- padding-bottom: calc(0.25 * #{$element-margin});
}
h3 {
@@ -72,23 +84,30 @@
@include fluid-size('font-size', 17px, 23px);
}
- img {
- display: block;
- max-width: 100%;
- max-height: $img-max-height;
- margin: auto;
+ @if $img {
+ img {
+ display: block;
+ max-width: 100%;
+ max-height: $img-max-height;
+ margin: auto;
+ }
}
- th,
- td {
- &[align='left'] {
- text-align: left;
- }
- &[align='center'] {
- text-align: center;
+ @if $table {
+ table {
+ margin: $element-margin 0;
}
- &[align='right'] {
- text-align: right;
+ th,
+ td {
+ &[align='left'] {
+ text-align: left;
+ }
+ &[align='center'] {
+ text-align: center;
+ }
+ &[align='right'] {
+ text-align: right;
+ }
}
}
}
diff --git a/ui/common/css/form/_form3.scss b/ui/common/css/form/_form3.scss
index 3ba1be72ad2b5..ff883d93d37ef 100644
--- a/ui/common/css/form/_form3.scss
+++ b/ui/common/css/form/_form3.scss
@@ -82,7 +82,7 @@ textarea.form-control {
.form-check {
@extend %flex-column;
- justify-content: center;
+ // justify-content: center;
div {
display: flex;
}
diff --git a/ui/common/css/vendor/chessground/_themes.scss b/ui/common/css/vendor/chessground/_themes.scss
index 2e0bd6264d4a5..36c155de3fbb9 100644
--- a/ui/common/css/vendor/chessground/_themes.scss
+++ b/ui/common/css/vendor/chessground/_themes.scss
@@ -102,7 +102,7 @@ $board-themes-2d: (
coord-color-black: #6d6655,
),
'newspaper': (
- file-ext: 'png',
+ file-ext: 'svg',
coord-color-white: #fff,
coord-color-black: #8d8d8d,
),
diff --git a/ui/common/src/controls.ts b/ui/common/src/controls.ts
index 8ce3c79a095e7..242734af2a736 100644
--- a/ui/common/src/controls.ts
+++ b/ui/common/src/controls.ts
@@ -17,19 +17,11 @@ export function toggle(t: ToggleSettings, trans: Trans, redraw: () => void) {
const fullId = 'abset-' + t.id;
return h(
'div.setting.' + fullId + (t.cls ? '.' + t.cls : ''),
- t.title
- ? {
- attrs: { title: trans.noarg(t.title) },
- }
- : {},
+ t.title ? { attrs: { title: trans.noarg(t.title) } } : {},
[
h('div.switch', [
h('input#' + fullId + '.cmn-toggle', {
- attrs: {
- type: 'checkbox',
- checked: t.checked,
- disabled: !!t.disabled,
- },
+ attrs: { type: 'checkbox', checked: t.checked, disabled: !!t.disabled },
hook: bind('change', e => t.change((e.target as HTMLInputElement).checked), redraw),
}),
h('label', { attrs: { for: fullId } }),
diff --git a/ui/common/src/dialog.ts b/ui/common/src/dialog.ts
index 55d2d7a784c79..1964cbad0e6b2 100644
--- a/ui/common/src/dialog.ts
+++ b/ui/common/src/dialog.ts
@@ -1,5 +1,5 @@
import { VNode, Attrs } from 'snabbdom';
-import { onInsert, lh as h, MaybeVNodes } from './snabbdom';
+import { onInsert, looseH as h, LooseVNodes } from './snabbdom';
import { isTouchDevice } from './device';
import * as xhr from './xhr';
import * as licon from './licon';
@@ -43,7 +43,7 @@ export interface DomDialogOpts extends DialogOpts {
}
export interface SnabDialogOpts extends DialogOpts {
- vnodes?: MaybeVNodes; // snabDialog automatically shows as 'modal' on redraw unless..
+ vnodes?: LooseVNodes; // snabDialog automatically shows as 'modal' on redraw unless..
onInsert?: (dialog: Dialog) => void; // if supplied, call show() or showModal() manually
}
diff --git a/ui/common/src/linkPopup.ts b/ui/common/src/linkPopup.ts
index 80378c179a9c8..bd54a9f72a96b 100644
--- a/ui/common/src/linkPopup.ts
+++ b/ui/common/src/linkPopup.ts
@@ -10,8 +10,9 @@ export const onClick = (a: HTMLLinkElement, trans: Trans): boolean => {
if (isPassList(url)) return true;
domDialog({
+ class: 'link-popup',
cssPath: 'linkPopup',
- htmlText: ``,
}).then(dlg => {
$('.cancel', dlg.view).on('click', dlg.close);
$('a', dlg.view).on('click', () => setTimeout(dlg.close, 1000));
diff --git a/ui/common/src/mini-board.ts b/ui/common/src/mini-board.ts
index ef1daf42cd1e0..591a3be335e6f 100644
--- a/ui/common/src/mini-board.ts
+++ b/ui/common/src/mini-board.ts
@@ -35,8 +35,5 @@ export const fenColor = (fen: string) => (fen.includes(' w') ? 'white' : 'black'
export const renderClock = (color: Color, time: number) =>
h(`span.mini-game__clock.mini-game__clock--${color}`, {
- attrs: {
- 'data-time': time,
- 'data-managed': 1,
- },
+ attrs: { 'data-time': time, 'data-managed': 1 },
});
diff --git a/ui/common/src/snabbdom.ts b/ui/common/src/snabbdom.ts
index 7e1ba781c7196..746a199fac3d0 100644
--- a/ui/common/src/snabbdom.ts
+++ b/ui/common/src/snabbdom.ts
@@ -38,27 +38,23 @@ export const dataIcon = (icon: string): Attrs => ({
export const iconTag = (icon: string) => snabH('i', { attrs: dataIcon(icon) });
+export type LooseVNodes = (MaybeVNode | boolean)[];
type LooseVNode = VNodeChildElement | boolean;
type VNodeKids = LooseVNode | LooseVNode[];
-function filterKids(children: VNodeKids): VNodeChildElement[] {
- return (
- typeof children === 'boolean'
- ? []
- : Array.isArray(children)
- ? children.filter(x => typeof x !== 'boolean')
- : [children]
- ) as VNodeChildElement[];
-}
+// '' may be falsy but it's a valid VNode
+const kidFilter = (x: any): boolean => (x && x !== true) || x === '';
+
+const filterKids = (children: VNodeKids): VNodeChildElement[] =>
+ (Array.isArray(children) ? children : [children]).filter(kidFilter) as VNodeChildElement[];
/* obviate need for some ternary expressions in renders. Allows
- lh('div', [ kids && h('div', 'kid') ])
- lh('div', [ noKids || h('div', 'kid') ])
+ looseH('div', [ kids && h('div', 'kid') ])
instead of
h('div', [ isKid ? h('div', 'kid') : null ])
'true' values are filtered out of children array same as 'false' (for || case)
*/
-export function lh(sel: string, dataOrKids?: VNodeData | null | VNodeKids, kids?: VNodeKids): VNode {
+export function looseH(sel: string, dataOrKids?: VNodeData | null | VNodeKids, kids?: VNodeKids): VNode {
if (kids) return snabH(sel, dataOrKids as VNodeData, filterKids(kids));
if (!dataOrKids) return snabH(sel);
if (Array.isArray(dataOrKids) || (typeof dataOrKids === 'object' && 'sel' in dataOrKids))
diff --git a/ui/common/src/spinner.ts b/ui/common/src/spinner.ts
index 90f39f6ded85a..f2304e94b62bf 100644
--- a/ui/common/src/spinner.ts
+++ b/ui/common/src/spinner.ts
@@ -19,23 +19,12 @@ const pathAttrs = [
];
export const spinnerVdom = (box = '-2 -2 54 54'): VNode =>
- h(
- 'div.spinner',
- {
- 'aria-label': 'loading',
- },
- [
- h('svg', { attrs: { viewBox: box } }, [
- h(
- 'g',
- {
- attrs: {
- mask: 'url(#mask)',
- fill: 'none',
- },
- },
- pathAttrs.map(attrs => h('path', { attrs })),
- ),
- ]),
- ],
- );
+ h('div.spinner', { 'aria-label': 'loading' }, [
+ h('svg', { attrs: { viewBox: box } }, [
+ h(
+ 'g',
+ { attrs: { mask: 'url(#mask)', fill: 'none' } },
+ pathAttrs.map(attrs => h('path', { attrs })),
+ ),
+ ]),
+ ]);
diff --git a/ui/common/src/userLink.ts b/ui/common/src/userLink.ts
index 4c9e197c64cdf..0b77488ec7351 100644
--- a/ui/common/src/userLink.ts
+++ b/ui/common/src/userLink.ts
@@ -35,27 +35,14 @@ export const userLink = (u: AnyUser): VNode =>
'a',
{
// can't be inlined because of thunks
- class: {
- 'user-link': true,
- ulpt: u.name != 'ghost',
- online: !!u.online,
- },
- attrs: {
- href: `/@/${u.name}`,
- ...u.attrs,
- },
+ class: { 'user-link': true, ulpt: u.name != 'ghost', online: !!u.online },
+ attrs: { href: `/@/${u.name}`, ...u.attrs },
},
- [userLine(u), ...fullName(u), userRating(u)],
+ [userLine(u), ...fullName(u), u.rating && ` ${userRating(u)} `],
);
export const userFlair = (u: HasFlair): VNode | undefined =>
- u.flair
- ? h('img.uflair', {
- attrs: {
- src: lichess.asset.flairSrc(u.flair),
- },
- })
- : undefined;
+ u.flair ? h('img.uflair', { attrs: { src: lichess.asset.flairSrc(u.flair) } }) : undefined;
export const userLine = (u: HasLine): VNode | undefined =>
u.line !== false
diff --git a/ui/coordinateTrainer/src/side.ts b/ui/coordinateTrainer/src/side.ts
index 97ca91b79de5c..308d238642554 100644
--- a/ui/coordinateTrainer/src/side.ts
+++ b/ui/coordinateTrainer/src/side.ts
@@ -41,12 +41,7 @@ const filesAndRanksSelection = (ctrl: CoordinateTrainerCtrl): VNodes =>
}),
h(
`label.file_${fileLetter}`,
- {
- attrs: {
- for: `coord_file_${fileLetter}`,
- title: fileLetter,
- },
- },
+ { attrs: { for: `coord_file_${fileLetter}`, title: fileLetter } },
fileLetter,
),
]),
@@ -74,16 +69,7 @@ const filesAndRanksSelection = (ctrl: CoordinateTrainerCtrl): VNodes =>
keyup: ctrl.onRadioInputKeyUp,
},
}),
- h(
- `label.rank_${rank}`,
- {
- attrs: {
- for: `coord_rank_${rank}`,
- title: rank,
- },
- },
- rank,
- ),
+ h(`label.rank_${rank}`, { attrs: { for: `coord_rank_${rank}`, title: rank } }, rank),
]),
),
),
@@ -194,12 +180,7 @@ const configurationButtons = (ctrl: CoordinateTrainerCtrl): VNodes => [
}),
h(
`label.color_${key}`,
- {
- attrs: {
- for: `coord_color_${key}`,
- title: ctrl.trans.noarg(i18n),
- },
- },
+ { attrs: { for: `coord_color_${key}`, title: ctrl.trans.noarg(i18n) } },
h('i'),
),
]),
@@ -222,14 +203,8 @@ const scoreCharts = (ctrl: CoordinateTrainerCtrl): VNode =>
? h('div.color-chart', [
h('p', ctrl.trans.vdom(transKey, h('strong', `${average(scoreList).toFixed(2)}`))),
h('svg.sparkline', {
- attrs: {
- height: '80px',
- 'stroke-width': '3',
- id: `${color}-sparkline`,
- },
- hook: {
- insert: vnode => ctrl.updateChart(vnode.elm as SVGSVGElement, color),
- },
+ attrs: { height: '80px', 'stroke-width': '3', id: `${color}-sparkline` },
+ hook: { insert: vnode => ctrl.updateChart(vnode.elm as SVGSVGElement, color) },
}),
])
: null,
@@ -247,16 +222,7 @@ const timeBox = (ctrl: CoordinateTrainerCtrl): VNode =>
]);
const backButton = (ctrl: CoordinateTrainerCtrl): VNode =>
- h(
- 'div.back',
- h(
- 'a.back-button',
- {
- hook: bind('click', ctrl.stop),
- },
- `« ${ctrl.trans('back')}`,
- ),
- );
+ h('div.back', h('a.back-button', { hook: bind('click', ctrl.stop) }, `« ${ctrl.trans('back')}`));
const settings = (ctrl: CoordinateTrainerCtrl): VNode => {
const { trans, redraw, showCoordinates, showPieces } = ctrl;
diff --git a/ui/coordinateTrainer/src/view.ts b/ui/coordinateTrainer/src/view.ts
index 40830e717b0d6..5bc776889378b 100644
--- a/ui/coordinateTrainer/src/view.ts
+++ b/ui/coordinateTrainer/src/view.ts
@@ -1,36 +1,35 @@
-import { h, VNode, VNodeStyle } from 'snabbdom';
-import { bind, MaybeVNode } from 'common/snabbdom';
+import { VNode, VNodeStyle } from 'snabbdom';
+import { bind, looseH as h } from 'common/snabbdom';
import { renderVoiceBar } from 'voice';
import chessground from './chessground';
import CoordinateTrainerCtrl, { DURATION } from './ctrl';
import { CoordModifier } from './interfaces';
import side from './side';
-const textOverlay = (ctrl: CoordinateTrainerCtrl): VNode | null => {
- return ctrl.playing && ctrl.mode() === 'findSquare'
- ? h(
- 'svg.coords-svg',
- { attrs: { viewBox: '0 0 100 100' } },
- ['current', 'next'].map((modifier: CoordModifier) =>
- h(
- `g.${modifier}`,
- {
- key: `${ctrl.score}-${modifier}`,
- style:
- modifier === 'current'
- ? ({
- remove: {
- opacity: 0,
- transform: 'translate(-8px, 60px)',
- },
- } as unknown as VNodeStyle)
- : undefined,
- },
- h('text', modifier === 'current' ? ctrl.currentKey : ctrl.nextKey),
- ),
+const textOverlay = (ctrl: CoordinateTrainerCtrl): VNode | false => {
+ return (
+ ctrl.playing &&
+ ctrl.mode() === 'findSquare' &&
+ h(
+ 'svg.coords-svg',
+ { attrs: { viewBox: '0 0 100 100' } },
+ ['current', 'next'].map((modifier: CoordModifier) =>
+ h(
+ `g.${modifier}`,
+ {
+ key: `${ctrl.score}-${modifier}`,
+ style:
+ modifier === 'current'
+ ? ({
+ remove: { opacity: 0, transform: 'translate(-8px, 60px)' },
+ } as unknown as VNodeStyle)
+ : undefined,
+ },
+ h('text', modifier === 'current' ? ctrl.currentKey : ctrl.nextKey),
),
- )
- : null;
+ ),
+ )
+ );
};
const explanation = (ctrl: CoordinateTrainerCtrl): VNode => {
@@ -50,60 +49,47 @@ const explanation = (ctrl: CoordinateTrainerCtrl): VNode => {
const table = (ctrl: CoordinateTrainerCtrl): VNode => {
return h('div.table', [
- ctrl.hasPlayed ? null : explanation(ctrl),
- ctrl.playing
- ? null
- : h(
- 'button.start.button.button-fat',
- {
- hook: bind('click', ctrl.start),
- },
- ctrl.trans('startTraining'),
- ),
+ !ctrl.hasPlayed && explanation(ctrl),
+ !ctrl.playing &&
+ h('button.start.button.button-fat', { hook: bind('click', ctrl.start) }, ctrl.trans('startTraining')),
]);
};
const progress = (ctrl: CoordinateTrainerCtrl): VNode => {
return h(
'div.progress',
- ctrl.hasPlayed
- ? h('div.progress__bar', { style: { width: `${100 * (1 - ctrl.timeLeft / DURATION)}%` } })
- : null,
+ ctrl.hasPlayed &&
+ h('div.progress__bar', { style: { width: `${100 * (1 - ctrl.timeLeft / DURATION)}%` } }),
);
};
-const coordinateInput = (ctrl: CoordinateTrainerCtrl): MaybeVNode => {
+const coordinateInput = (ctrl: CoordinateTrainerCtrl): VNode | false => {
const coordinateInput = [
- ctrl.coordinateInputMethod() === 'buttons'
- ? h(
- 'div.files-ranks',
- 'abcdefgh12345678'.split('').map((fileOrRank: string) =>
- h(
- 'button.file-rank',
- {
- on: {
- click: () => {
- if (ctrl.playing) {
- ctrl.keyboardInput.value += fileOrRank;
- ctrl.checkKeyboardInput();
- }
- },
+ ctrl.coordinateInputMethod() === 'buttons' &&
+ h(
+ 'div.files-ranks',
+ 'abcdefgh12345678'.split('').map((fileOrRank: string) =>
+ h(
+ 'button.file-rank',
+ {
+ on: {
+ click: () => {
+ if (ctrl.playing) {
+ ctrl.keyboardInput.value += fileOrRank;
+ ctrl.checkKeyboardInput();
+ }
},
},
- fileOrRank,
- ),
+ },
+ fileOrRank,
),
- )
- : null,
+ ),
+ ),
h('div.voice-container', renderVoiceBar(ctrl.voice, ctrl.redraw, 'coords')),
h('div.keyboard-container', [
h('span', [
h('input.keyboard', {
- hook: {
- insert: vnode => {
- ctrl.keyboardInput = vnode.elm as HTMLInputElement;
- },
- },
+ hook: { insert: vnode => (ctrl.keyboardInput = vnode.elm as HTMLInputElement) },
on: { keyup: ctrl.onKeyboardInputKeyUp },
}),
ctrl.playing ? h('span', 'Enter the coordinate') : h('strong', 'Press to start'),
@@ -115,25 +101,17 @@ const coordinateInput = (ctrl: CoordinateTrainerCtrl): MaybeVNode => {
),
]),
];
- return ctrl.mode() === 'nameSquare' ? h('div.coordinate-input', [...coordinateInput]) : null;
+ return ctrl.mode() === 'nameSquare' && h('div.coordinate-input', [...coordinateInput]);
};
const view = (ctrl: CoordinateTrainerCtrl): VNode =>
- h(
- 'div.trainer',
- {
- class: {
- wrong: ctrl.wrong,
- },
- },
- [
- side(ctrl),
- h('div.main-board', chessground(ctrl)),
- textOverlay(ctrl),
- table(ctrl),
- progress(ctrl),
- coordinateInput(ctrl),
- ],
- );
+ h('div.trainer', { class: { wrong: ctrl.wrong } }, [
+ side(ctrl),
+ h('div.main-board', chessground(ctrl)),
+ textOverlay(ctrl),
+ table(ctrl),
+ progress(ctrl),
+ coordinateInput(ctrl),
+ ]);
export default view;
diff --git a/ui/dasher/src/background.ts b/ui/dasher/src/background.ts
index 829a03199d917..8402c0f9211da 100644
--- a/ui/dasher/src/background.ts
+++ b/ui/dasher/src/background.ts
@@ -57,10 +57,7 @@ export class BackgroundCtrl {
applyBackground(this.data, this.list);
this.redraw();
return xhr
- .text('/pref/bg', {
- body: xhr.form({ bg: c }),
- method: 'post',
- })
+ .text('/pref/bg', { body: xhr.form({ bg: c }), method: 'post' })
.then(this.reloadAllTheThings, this.announceFail);
},
);
@@ -68,10 +65,7 @@ export class BackgroundCtrl {
setImage = (i: string) => {
this.data.image = i;
xhr
- .textRaw('/pref/bgImg', {
- body: xhr.form({ bgImg: i }),
- method: 'post',
- })
+ .textRaw('/pref/bgImg', { body: xhr.form({ bgImg: i }), method: 'post' })
.then(res => (res.ok ? res.text() : Promise.reject(res.text())))
.then(this.reloadAllTheThings, err => err.then(this.announceFail));
applyBackground(this.data, this.list);
@@ -106,11 +100,7 @@ function imageInput(ctrl: BackgroundCtrl) {
return h('div.image', [
h('p', ctrl.trans.noarg('backgroundImageUrl')),
h('input', {
- attrs: {
- type: 'text',
- placeholder: 'https://',
- value: ctrl.getImage(),
- },
+ attrs: { type: 'text', placeholder: 'https://', value: ctrl.getImage() },
hook: {
insert: vnode => {
$(vnode.elm as HTMLElement).on(
@@ -207,9 +197,7 @@ function galleryInput(ctrl: BackgroundCtrl) {
gallery.images.map(img => {
const assetUrl = lichess.asset.url(img, { noVersion: true });
const divClass = ctrl.data.image.endsWith(assetUrl) ? '.selected' : '';
- return h(`div#${urlId(assetUrl)}${divClass}`, {
- hook: bind('click', () => setImg(assetUrl)),
- });
+ return h(`div#${urlId(assetUrl)}${divClass}`, { hook: bind('click', () => setImg(assetUrl)) });
}),
),
),
diff --git a/ui/dasher/src/board.ts b/ui/dasher/src/board.ts
index b7e782c563b44..9232e996e9fbe 100644
--- a/ui/dasher/src/board.ts
+++ b/ui/dasher/src/board.ts
@@ -30,10 +30,7 @@ export class BoardCtrl {
setIs3d = (v: boolean) => {
this.data.is3d = v;
xhr
- .text('/pref/is3d', {
- body: xhr.form({ is3d: v }),
- method: 'post',
- })
+ .text('/pref/is3d', { body: xhr.form({ is3d: v }), method: 'post' })
.then(lichess.reload, _ => lichess.announce({ msg: 'Failed to save geometry preference' }));
this.redraw();
};
@@ -78,13 +75,7 @@ export function view(ctrl: BoardCtrl): VNode {
: [
h('p', [ctrl.trans.noarg('boardSize'), ': ', domZoom, '%']),
h('input.range', {
- attrs: {
- type: 'range',
- min: 0,
- max: 100,
- step: 1,
- value: ctrl.readZoom(),
- },
+ attrs: { type: 'range', min: 0, max: 100, step: 1, value: ctrl.readZoom() },
hook: {
insert(vnode) {
const input = vnode.elm as HTMLInputElement;
diff --git a/ui/dasher/src/langs.ts b/ui/dasher/src/langs.ts
index 2184ad7d4118a..ef370a045401f 100644
--- a/ui/dasher/src/langs.ts
+++ b/ui/dasher/src/langs.ts
@@ -30,19 +30,12 @@ export const view = (ctrl: LangsCtrl): VNode =>
header(ctrl.trans.noarg('language'), ctrl.close),
h(
'form',
- {
- attrs: { method: 'post', action: '/translation/select' },
- },
+ { attrs: { method: 'post', action: '/translation/select' } },
ctrl.list().map(langView(ctrl.data.current, ctrl.accepted)),
),
h(
'a.help.text',
- {
- attrs: {
- href: 'https://crowdin.com/project/lichess',
- 'data-icon': licon.Heart,
- },
- },
+ { attrs: { href: 'https://crowdin.com/project/lichess', 'data-icon': licon.Heart } },
'Help translate Lichess',
),
]);
@@ -52,13 +45,6 @@ const langView =
([code, name]: Lang) =>
h(
'button' + (current === code ? '.current' : '') + (accepted.has(code) ? '.accepted' : ''),
- {
- attrs: {
- type: 'submit',
- name: 'lang',
- value: code,
- title: code,
- },
- },
+ { attrs: { type: 'submit', name: 'lang', value: code, title: code } },
name,
);
diff --git a/ui/dasher/src/links.ts b/ui/dasher/src/links.ts
index e31b025a7def7..d7ba3ab266cff 100644
--- a/ui/dasher/src/links.ts
+++ b/ui/dasher/src/links.ts
@@ -34,24 +34,9 @@ export default function (ctrl: DasherCtrl): VNode {
!d.streamer ? null : h('a.text', linkCfg('/streamer/edit', licon.Mic), noarg('streamerManager')),
- h(
- 'form.logout',
- {
- attrs: { method: 'post', action: '/logout' },
- },
- [
- h(
- 'button.text',
- {
- attrs: {
- type: 'submit',
- 'data-icon': licon.Power,
- },
- },
- noarg('logOut'),
- ),
- ],
- ),
+ h('form.logout', { attrs: { method: 'post', action: '/logout' } }, [
+ h('button.text', { attrs: { type: 'submit', 'data-icon': licon.Power } }, noarg('logOut')),
+ ]),
])
: null;
}
@@ -73,11 +58,7 @@ export default function (ctrl: DasherCtrl): VNode {
h(
'button.text',
{
- attrs: {
- 'data-icon': licon.DiscBigOutline,
- title: 'Keyboard: z',
- type: 'button',
- },
+ attrs: { 'data-icon': licon.DiscBigOutline, title: 'Keyboard: z', type: 'button' },
hook: bind('click', () => lichess.pubsub.emit('zen')),
},
noarg('zenMode'),
@@ -93,11 +74,7 @@ export default function (ctrl: DasherCtrl): VNode {
}
const linkCfg = (href: string, icon: string, more?: Attrs) => ({
- attrs: {
- href,
- 'data-icon': icon,
- ...(more || {}),
- },
+ attrs: { href, 'data-icon': icon, ...(more || {}) },
});
function modeCfg(ctrl: DasherCtrl, m: Mode): any {
diff --git a/ui/dasher/src/piece.ts b/ui/dasher/src/piece.ts
index 4a53b96acb786..3e8c5f85efd2e 100644
--- a/ui/dasher/src/piece.ts
+++ b/ui/dasher/src/piece.ts
@@ -30,10 +30,7 @@ export class PieceCtrl {
applyPiece(t, d.list, this.dimension() === 'd3');
const field = `pieceSet${this.dimension() === 'd3' ? '3d' : ''}`;
xhr
- .text(`/pref/${field}`, {
- body: xhr.form({ [field]: t }),
- method: 'post',
- })
+ .text(`/pref/${field}`, { body: xhr.form({ [field]: t }), method: 'post' })
.catch(() => lichess.announce({ msg: 'Failed to save piece set preference' }));
this.redraw();
};
@@ -64,11 +61,7 @@ const pieceView = (current: Piece, set: (t: Piece) => void, is3d: boolean) => (t
hook: bind('click', () => set(t)),
class: { active: current === t },
},
- [
- h('piece', {
- attrs: { style: `background-image:url(${lichess.asset.url(pieceImage(t, is3d))})` },
- }),
- ],
+ [h('piece', { attrs: { style: `background-image:url(${lichess.asset.url(pieceImage(t, is3d))})` } })],
);
function applyPiece(t: Piece, list: Piece[], is3d: boolean) {
diff --git a/ui/dasher/src/ping.ts b/ui/dasher/src/ping.ts
index f6dc89ddf4b77..7da9e721782f0 100644
--- a/ui/dasher/src/ping.ts
+++ b/ui/dasher/src/ping.ts
@@ -48,27 +48,16 @@ const showMillis = (name: string, m?: number) => [
];
export const view = (ctrl: PingCtrl): VNode =>
- h(
- 'a.status',
- {
- attrs: { href: '/lag' },
- hook: { insert: ctrl.connect, destroy: ctrl.disconnect },
- },
- [
- signalBars(ctrl),
- h(
- 'span.ping',
- {
- attrs: { title: 'PING: ' + ctrl.trans.noarg('networkLagBetweenYouAndLichess') },
- },
- showMillis('PING', ctrl.ping),
- ),
- h(
- 'span.server',
- {
- attrs: { title: 'SERVER: ' + ctrl.trans.noarg('timeToProcessAMoveOnLichessServer') },
- },
- showMillis('SERVER', ctrl.server),
- ),
- ],
- );
+ h('a.status', { attrs: { href: '/lag' }, hook: { insert: ctrl.connect, destroy: ctrl.disconnect } }, [
+ signalBars(ctrl),
+ h(
+ 'span.ping',
+ { attrs: { title: 'PING: ' + ctrl.trans.noarg('networkLagBetweenYouAndLichess') } },
+ showMillis('PING', ctrl.ping),
+ ),
+ h(
+ 'span.server',
+ { attrs: { title: 'SERVER: ' + ctrl.trans.noarg('timeToProcessAMoveOnLichessServer') } },
+ showMillis('SERVER', ctrl.server),
+ ),
+ ]);
diff --git a/ui/dasher/src/sound.ts b/ui/dasher/src/sound.ts
index 567a86ae49898..7001c2307579a 100644
--- a/ui/dasher/src/sound.ts
+++ b/ui/dasher/src/sound.ts
@@ -31,10 +31,7 @@ export class SoundCtrl {
() => 1000,
(soundSet: string) =>
xhr
- .text('/pref/soundSet', {
- body: xhr.form({ soundSet }),
- method: 'post',
- })
+ .text('/pref/soundSet', { body: xhr.form({ soundSet }), method: 'post' })
.catch(() => lichess.announce({ msg: 'Failed to save sound preference' })),
);
diff --git a/ui/dasher/src/theme.ts b/ui/dasher/src/theme.ts
index 7176774cc218a..44733b9b36808 100644
--- a/ui/dasher/src/theme.ts
+++ b/ui/dasher/src/theme.ts
@@ -30,10 +30,7 @@ export class ThemeCtrl {
applyTheme(t, d.list, this.dimension() === 'd3');
const field = `theme${this.dimension() === 'd3' ? '3d' : ''}`;
xhr
- .text(`/pref/${field}`, {
- body: xhr.form({ [field]: t }),
- method: 'post',
- })
+ .text(`/pref/${field}`, { body: xhr.form({ [field]: t }), method: 'post' })
.catch(() => lichess.announce({ msg: 'Failed to save theme preference' }));
this.redraw();
};
diff --git a/ui/dasher/src/util.ts b/ui/dasher/src/util.ts
index cf3c41f97f00e..4fc1dc258f316 100644
--- a/ui/dasher/src/util.ts
+++ b/ui/dasher/src/util.ts
@@ -7,9 +7,6 @@ export type Close = () => void;
export const header = (name: string, close: Close) =>
h(
'button.head.text',
- {
- attrs: { 'data-icon': licon.LessThan, type: 'button' },
- hook: bind('click', close),
- },
+ { attrs: { 'data-icon': licon.LessThan, type: 'button' }, hook: bind('click', close) },
name,
);
diff --git a/ui/dgt/package.json b/ui/dgt/package.json
index fc1413dda53aa..844babe0cc04c 100644
--- a/ui/dgt/package.json
+++ b/ui/dgt/package.json
@@ -6,7 +6,7 @@
"author": "Thibault Duplessis",
"license": "AGPL-3.0-or-later",
"dependencies": {
- "chessops": "^0.12.7"
+ "chessops": "^0.13.0"
},
"scripts": {
"compile": "tsc",
diff --git a/ui/dgt/src/config.ts b/ui/dgt/src/config.ts
index 5e2c7961097f3..c905a5743eac3 100644
--- a/ui/dgt/src/config.ts
+++ b/ui/dgt/src/config.ts
@@ -3,7 +3,7 @@ export default function () {
voiceSelector = document.getElementById('dgt-speech-voice') as HTMLSelectElement;
(function populateVoiceList() {
- if (typeof speechSynthesis === 'undefined') return;
+ if (!voiceSelector || typeof speechSynthesis === 'undefined') return;
speechSynthesis.getVoices().forEach((voice, i) => {
const option = document.createElement('option');
option.value = voice.name;
@@ -67,11 +67,13 @@ export default function () {
});
}
- ensureDefaults();
- populateForm();
+ if (form) {
+ ensureDefaults();
+ populateForm();
- form.addEventListener('submit', (e: Event) => {
- e.preventDefault();
- Array.from(new FormData(form).entries()).forEach(([k, v]) => localStorage.setItem(k, v.toString()));
- });
+ form.addEventListener('submit', (e: Event) => {
+ e.preventDefault();
+ Array.from(new FormData(form).entries()).forEach(([k, v]) => localStorage.setItem(k, v.toString()));
+ });
+ }
}
diff --git a/ui/editor/package.json b/ui/editor/package.json
index b36b24dd1e3b9..0eec333dfa059 100644
--- a/ui/editor/package.json
+++ b/ui/editor/package.json
@@ -12,7 +12,7 @@
"author": "Thibault Duplessis",
"license": "AGPL-3.0-or-later",
"dependencies": {
- "chessops": "^0.12.7",
+ "chessops": "^0.13.0",
"common": "workspace:*",
"snabbdom": "^3.5.1"
},
diff --git a/ui/editor/src/chessground.ts b/ui/editor/src/chessground.ts
index f92d74db592aa..834be5e41007e 100644
--- a/ui/editor/src/chessground.ts
+++ b/ui/editor/src/chessground.ts
@@ -12,7 +12,7 @@ export default function (ctrl: EditorCtrl): VNode {
ctrl.chessground = lichess.makeChessground(el, makeConfig(ctrl));
bindEvents(el, ctrl);
},
- destroy: _ => ctrl.chessground!.destroy(),
+ destroy: () => ctrl.chessground!.destroy(),
},
});
}
@@ -120,7 +120,7 @@ function makeConfig(ctrl: EditorCtrl): CgConfig {
return {
fen: ctrl.initialFen,
orientation: ctrl.options.orientation || 'white',
- coordinates: !ctrl.cfg.embed,
+ coordinates: ctrl.options.coordinates !== false,
autoCastle: false,
addPieceZIndex: ctrl.cfg.is3d,
movable: {
diff --git a/ui/editor/src/ctrl.ts b/ui/editor/src/ctrl.ts
index a48e6be98ff1e..e59587ea46747 100644
--- a/ui/editor/src/ctrl.ts
+++ b/ui/editor/src/ctrl.ts
@@ -26,7 +26,7 @@ export default class EditorCtrl {
initialFen: string;
pockets: Material | undefined;
turn: Color;
- unmovedRooks: SquareSet | undefined;
+ castlingRights: SquareSet | undefined;
castlingToggles: CastlingToggles;
epSquare: Square | undefined;
remainingChecks: RemainingChecks | undefined;
@@ -113,7 +113,7 @@ export default class EditorCtrl {
board,
pockets: this.pockets,
turn: this.turn,
- unmovedRooks: this.unmovedRooks || parseCastlingFen(board, this.castlingToggleFen()).unwrap(),
+ castlingRights: this.castlingRights || parseCastlingFen(board, this.castlingToggleFen()).unwrap(),
epSquare: this.epSquare,
remainingChecks: this.remainingChecks,
halfmoves: this.halfmoves,
@@ -195,7 +195,7 @@ export default class EditorCtrl {
}
setCastlingToggle(id: CastlingToggle, value: boolean): void {
- if (this.castlingToggles[id] != value) this.unmovedRooks = undefined;
+ if (this.castlingToggles[id] != value) this.castlingRights = undefined;
this.castlingToggles[id] = value;
this.onChange();
}
@@ -226,7 +226,7 @@ export default class EditorCtrl {
private setSetup = (setup: Setup): void => {
this.pockets = setup.pockets;
this.turn = setup.turn;
- this.unmovedRooks = setup.unmovedRooks;
+ this.castlingRights = setup.castlingRights;
this.epSquare = setup.epSquare;
this.remainingChecks = setup.remainingChecks;
this.halfmoves = setup.halfmoves;
diff --git a/ui/editor/src/view.ts b/ui/editor/src/view.ts
index f674120de1227..2694ca25794e1 100644
--- a/ui/editor/src/view.ts
+++ b/ui/editor/src/view.ts
@@ -14,12 +14,8 @@ import { dataIcon } from 'common/snabbdom';
function castleCheckBox(ctrl: EditorCtrl, id: CastlingToggle, label: string, reversed: boolean): VNode {
const input = h('input', {
- attrs: {
- type: 'checkbox',
- },
- props: {
- checked: ctrl.castlingToggles[id],
- },
+ attrs: { type: 'checkbox' },
+ props: { checked: ctrl.castlingToggles[id] },
on: {
change(e) {
ctrl.setCastlingToggle(id, (e.target as HTMLInputElement).checked);
@@ -34,48 +30,25 @@ function optgroup(name: string, opts: VNode[]): VNode {
}
function studyButton(ctrl: EditorCtrl, state: EditorState): VNode {
- return h(
- 'form',
- {
- attrs: {
- method: 'post',
- action: '/study/as',
+ return h('form', { attrs: { method: 'post', action: '/study/as' } }, [
+ h('input', { attrs: { type: 'hidden', name: 'orientation', value: ctrl.bottomColor() } }),
+ h('input', { attrs: { type: 'hidden', name: 'variant', value: ctrl.rules } }),
+ h('input', { attrs: { type: 'hidden', name: 'fen', value: state.legalFen || '' } }),
+ h(
+ 'button',
+ {
+ attrs: { type: 'submit', 'data-icon': licon.StudyBoard, disabled: !state.legalFen },
+ class: { button: true, 'button-empty': true, text: true, disabled: !state.legalFen },
},
- },
- [
- h('input', { attrs: { type: 'hidden', name: 'orientation', value: ctrl.bottomColor() } }),
- h('input', { attrs: { type: 'hidden', name: 'variant', value: ctrl.rules } }),
- h('input', { attrs: { type: 'hidden', name: 'fen', value: state.legalFen || '' } }),
- h(
- 'button',
- {
- attrs: {
- type: 'submit',
- 'data-icon': licon.StudyBoard,
- disabled: !state.legalFen,
- },
- class: {
- button: true,
- 'button-empty': true,
- text: true,
- disabled: !state.legalFen,
- },
- },
- ctrl.trans.noarg('toStudy'),
- ),
- ],
- );
+ ctrl.trans.noarg('toStudy'),
+ ),
+ ]);
}
function variant2option(key: Rules, name: string, ctrl: EditorCtrl): VNode {
return h(
'option',
- {
- attrs: {
- value: key,
- selected: key == ctrl.rules,
- },
- },
+ { attrs: { value: key, selected: key == ctrl.rules } },
`${ctrl.trans.noarg('variant')} | ${name}`,
);
}
@@ -93,34 +66,19 @@ const allVariants: Array<[Rules, string]> = [
function controls(ctrl: EditorCtrl, state: EditorState): VNode {
const endgamePosition2option = function (pos: Editor.EndgamePosition): VNode {
- return h(
- 'option',
- {
- attrs: {
- value: pos.epd || pos.fen,
- 'data-fen': pos.fen,
- },
- },
- pos.name,
- );
+ return h('option', { attrs: { value: pos.epd || pos.fen, 'data-fen': pos.fen } }, pos.name);
};
const buttonStart = (icon?: string) =>
h(
`a.button.button-empty${icon ? '.text' : ''}`,
- {
- on: { click: ctrl.startPosition },
- attrs: icon ? dataIcon(icon) : {},
- },
+ { on: { click: ctrl.startPosition }, attrs: icon ? dataIcon(icon) : {} },
ctrl.trans.noarg('startPosition'),
);
const buttonClear = (icon?: string) =>
h(
`a.button.button-empty${icon ? '.text' : ''}`,
- {
- on: { click: ctrl.clearBoard },
- attrs: icon ? dataIcon(icon) : {},
- },
+ { on: { click: ctrl.clearBoard }, attrs: icon ? dataIcon(icon) : {} },
ctrl.trans.noarg('clearBoard'),
);
@@ -136,18 +94,13 @@ function controls(ctrl: EditorCtrl, state: EditorState): VNode {
ctrl.setTurn((e.target as HTMLSelectElement).value as Color);
},
},
- props: {
- value: ctrl.turn,
- },
+ props: { value: ctrl.turn },
},
['whitePlays', 'blackPlays'].map(function (key) {
return h(
'option',
{
- attrs: {
- value: key[0] === 'w' ? 'white' : 'black',
- selected: key[0] === ctrl.turn[0],
- },
+ attrs: { value: key[0] === 'w' ? 'white' : 'black', selected: key[0] === ctrl.turn[0] },
},
ctrl.trans(key),
);
@@ -175,9 +128,7 @@ function controls(ctrl: EditorCtrl, state: EditorState): VNode {
ctrl.setEnPassant(parseSquare((e.target as HTMLSelectElement).value));
},
},
- props: {
- value: ctrl.epSquare ? makeSquare(ctrl.epSquare) : '',
- },
+ props: { value: ctrl.epSquare ? makeSquare(ctrl.epSquare) : '' },
},
['', ...[ctrl.turn === 'black' ? 3 : 6].flatMap(r => 'abcdefgh'.split('').map(f => f + r))].map(
key =>
@@ -204,12 +155,7 @@ function controls(ctrl: EditorCtrl, state: EditorState): VNode {
const positionOption = (pos: Editor.OpeningPosition): VNode =>
h(
'option',
- {
- attrs: {
- value: pos.epd || pos.fen,
- 'data-fen': pos.fen,
- },
- },
+ { attrs: { value: pos.epd || pos.fen, 'data-fen': pos.fen } },
pos.eco ? `${pos.eco} ${pos.name}` : pos.name,
);
const epd = state.fen.split(' ').slice(0, 4).join(' ');
@@ -299,11 +245,7 @@ function controls(ctrl: EditorCtrl, state: EditorState): VNode {
h(
'button',
{
- class: {
- button: true,
- 'button-empty': true,
- disabled: !state.playable,
- },
+ class: { button: true, 'button-empty': true, disabled: !state.playable },
on: {
click: () => {
if (state.playable) domDialog({ cash: $('.continue-with'), show: 'modal' });
@@ -323,22 +265,12 @@ function controls(ctrl: EditorCtrl, state: EditorState): VNode {
h('div.continue-with.none', [
h(
'a.button',
- {
- attrs: {
- href: '/?fen=' + state.legalFen + '#ai',
- rel: 'nofollow',
- },
- },
+ { attrs: { href: '/?fen=' + state.legalFen + '#ai', rel: 'nofollow' } },
ctrl.trans.noarg('playWithTheMachine'),
),
h(
'a.button',
- {
- attrs: {
- href: '/?fen=' + state.legalFen + '#friend',
- rel: 'nofollow',
- },
- },
+ { attrs: { href: '/?fen=' + state.legalFen + '#friend', rel: 'nofollow' } },
ctrl.trans.noarg('playWithAFriend'),
),
]),
@@ -352,13 +284,8 @@ function inputs(ctrl: EditorCtrl, fen: string): VNode | undefined {
h('p', [
h('strong', 'FEN'),
h('input.copyable', {
- attrs: {
- spellcheck: 'false',
- enterkeyhint: 'done',
- },
- props: {
- value: fen,
- },
+ attrs: { spellcheck: 'false', enterkeyhint: 'done' },
+ props: { value: fen },
on: {
change(e) {
const el = e.target as HTMLInputElement;
@@ -387,11 +314,7 @@ function inputs(ctrl: EditorCtrl, fen: string): VNode | undefined {
h('p', [
h('strong.name', 'URL'),
h('input.copyable.autoselect', {
- attrs: {
- readonly: true,
- spellcheck: 'false',
- value: ctrl.makeEditorUrl(fen, ctrl.bottomColor()),
- },
+ attrs: { readonly: true, spellcheck: 'false', value: ctrl.makeEditorUrl(fen, ctrl.bottomColor()) },
}),
]),
]);
@@ -413,11 +336,7 @@ function sparePieces(ctrl: EditorCtrl, color: Color, _orientation: Color, positi
return h(
'div',
- {
- attrs: {
- class: ['spare', 'spare-' + position, 'spare-' + color].join(' '),
- },
- },
+ { attrs: { class: ['spare', 'spare-' + position, 'spare-' + color].join(' ') } },
['pointer', ...pieces, 'trash'].map((s: Selected) => {
const className = selectedToClass(s);
const attrs = {
@@ -466,15 +385,7 @@ function onSelectSparePiece(ctrl: EditorCtrl, s: Selected, upEvent: string): (e:
} else {
ctrl.selected('pointer');
- dragNewPiece(
- ctrl.chessground!.state,
- {
- color: s[0],
- role: s[1],
- },
- e,
- true,
- );
+ dragNewPiece(ctrl.chessground!.state, { color: s[0], role: s[1] }, e, true);
document.addEventListener(
upEvent,
@@ -503,19 +414,11 @@ export default function (ctrl: EditorCtrl): VNode {
const state = ctrl.getState();
const color = ctrl.bottomColor();
- return h(
- 'div.board-editor',
- {
- attrs: {
- style: `cursor: ${makeCursor(ctrl.selected())}`,
- },
- },
- [
- sparePieces(ctrl, opposite(color), color, 'top'),
- h('div.main-board', [chessground(ctrl)]),
- sparePieces(ctrl, color, color, 'bottom'),
- controls(ctrl, state),
- inputs(ctrl, state.legalFen || state.fen),
- ],
- );
+ return h('div.board-editor', { attrs: { style: `cursor: ${makeCursor(ctrl.selected())}` } }, [
+ sparePieces(ctrl, opposite(color), color, 'top'),
+ h('div.main-board', [chessground(ctrl)]),
+ sparePieces(ctrl, color, color, 'bottom'),
+ controls(ctrl, state),
+ inputs(ctrl, state.legalFen || state.fen),
+ ]);
}
diff --git a/ui/insight/src/axis.ts b/ui/insight/src/axis.ts
index e09ab12b699ec..2368a01920db0 100644
--- a/ui/insight/src/axis.ts
+++ b/ui/insight/src/axis.ts
@@ -5,12 +5,7 @@ import { Categ, Dimension, Metric } from './interfaces';
const selectData = (onClick: (v: { value: string }) => void, getValue: () => string): VNodeData => ({
hook: {
- insert: vnode =>
- $(vnode.elm).multipleSelect({
- width: 'var(--drop-menu-width)',
- single: true,
- onClick,
- }),
+ insert: vnode => $(vnode.elm).multipleSelect({ width: 'var(--drop-menu-width)', single: true, onClick }),
update: vnode => $(vnode.elm).multipleSelect('setSelects', [getValue()]),
},
});
diff --git a/ui/insight/src/boards.ts b/ui/insight/src/boards.ts
index 52e1fd6c3558e..d5f25628ba580 100644
--- a/ui/insight/src/boards.ts
+++ b/ui/insight/src/boards.ts
@@ -3,42 +3,33 @@ import { h } from 'snabbdom';
import { Game } from './interfaces';
const miniGame = (game: Game) =>
- h(
- 'a',
- {
- attrs: {
- key: game.id,
- href: `/${game.id}/${game.color}`,
- },
- },
- [
- h('span.mini-board.is2d', {
- attrs: { 'data-state': `${game.fen},${game.color},${game.lastMove}` },
- hook: {
- insert(vnode) {
- lichess.miniBoard.init(vnode.elm as HTMLElement);
- },
- update(vnode) {
- lichess.miniBoard.init(vnode.elm as HTMLElement);
- },
+ h('a', { attrs: { key: game.id, href: `/${game.id}/${game.color}` } }, [
+ h('span.mini-board.is2d', {
+ attrs: { 'data-state': `${game.fen},${game.color},${game.lastMove}` },
+ hook: {
+ insert(vnode) {
+ lichess.miniBoard.init(vnode.elm as HTMLElement);
+ },
+ update(vnode) {
+ lichess.miniBoard.init(vnode.elm as HTMLElement);
},
- }),
- h('span.vstext', [
- h('span.vstext__pl', [
- game.user1.name,
- h('br'),
- game.user1.title ? game.user1.title + ' ' : '',
- h('rating', game.user1.rating),
- ]),
- h('span.vstext__op', [
- game.user2.name,
- h('br'),
- h('rating', game.user2.rating),
- game.user2.title ? ' ' + game.user2.title : '',
- ]),
+ },
+ }),
+ h('span.vstext', [
+ h('span.vstext__pl', [
+ game.user1.name,
+ h('br'),
+ game.user1.title ? game.user1.title + ' ' : '',
+ h('rating', game.user1.rating),
]),
- ],
- );
+ h('span.vstext__op', [
+ game.user2.name,
+ h('br'),
+ h('rating', game.user2.rating),
+ game.user2.title ? ' ' + game.user2.title : '',
+ ]),
+ ]),
+ ]);
export default function (ctrl: Ctrl, attrs: any = null) {
if (!ctrl.vm.answer) return;
diff --git a/ui/insight/src/filters.ts b/ui/insight/src/filters.ts
index f7efc22571c95..7f8f33930fdca 100644
--- a/ui/insight/src/filters.ts
+++ b/ui/insight/src/filters.ts
@@ -32,12 +32,7 @@ const select = (ctrl: Ctrl) => (dimension: Dimension) => {
dimension.values.map(value =>
h(
'option',
- {
- attrs: {
- value: value.key,
- selected: ctrl.vm.filters[dimension.key]?.includes(value.key),
- },
- },
+ { attrs: { value: value.key, selected: ctrl.vm.filters[dimension.key]?.includes(value.key) } },
value.name,
),
),
diff --git a/ui/insight/src/info.ts b/ui/insight/src/info.ts
index a58ce8c853964..868dbb09463f4 100644
--- a/ui/insight/src/info.ts
+++ b/ui/insight/src/info.ts
@@ -18,13 +18,7 @@ export default function (ctrl: Ctrl) {
ctrl.own
? h(
'a',
- {
- attrs: {
- href: '/account/preferences/site',
- target: '_blank',
- rel: 'noopener',
- },
- },
+ { attrs: { href: '/account/preferences/site', target: '_blank', rel: 'noopener' } },
shareText,
)
: shareText,
@@ -38,19 +32,14 @@ export default function (ctrl: Ctrl) {
h(
'form.insight-refresh',
{
- attrs: {
- action: `/insights/refresh/${ctrl.env.user.id}`,
- method: 'post',
- },
+ attrs: { action: `/insights/refresh/${ctrl.env.user.id}`, method: 'post' },
hook: onInsert(_el => lichess.refreshInsightForm()),
},
[
h('button.button.text', { attrs: { 'data-icon': licon.Checkmark } }, 'Update insights'),
h(
'div.crunching.none',
- {
- hook: onInsert(el => el.insertAdjacentHTML('afterbegin', lichess.spinnerHtml)),
- },
+ { hook: onInsert(el => el.insertAdjacentHTML('afterbegin', lichess.spinnerHtml)) },
[h('br'), h('p', h('strong', 'Now crunching data just for you!'))],
),
],
diff --git a/ui/insight/src/view.ts b/ui/insight/src/view.ts
index cdce73555521b..e993b75aff0b0 100644
--- a/ui/insight/src/view.ts
+++ b/ui/insight/src/view.ts
@@ -1,4 +1,4 @@
-import { h, thunk } from 'snabbdom';
+import { thunk } from 'snabbdom';
import debounce from 'common/debounce';
import * as licon from 'common/licon';
import axis from './axis';
@@ -11,7 +11,7 @@ import info from './info';
import boards from './boards';
import Ctrl from './ctrl';
import { ViewTab } from './interfaces';
-import { bind } from 'common/snabbdom';
+import { bind, looseH as h } from 'common/snabbdom';
let forceRender = false;
@@ -70,17 +70,13 @@ const viewTabData = (ctrl: Ctrl, view: ViewTab) => ({
hook: bind('click', () => ctrl.setView(view)),
});
-// we can't use css media queries for most sizing decisions due to differences in the
-// landscape vs portrait layouts, sorry for all the js formatting.
function header(ctrl: Ctrl) {
return h('header', widthStyle(mainW()), [
isAtLeastXSmall(mainW())
? h('h2.text', { attrs: { 'data-icon': licon.Target } }, 'Chess Insights')
: isAtLeastXXSmall(mainW())
? h('h2.text', { attrs: { 'data-icon': licon.Target } }, 'Insights')
- : mainW() >= 460
- ? h('h2.text', 'Insights')
- : null,
+ : mainW() >= 460 && h('h2.text', 'Insights'),
axis(ctrl, mainW() < 460 ? { attrs: { style: 'justify-content: space-evenly;' } } : null),
]);
}
@@ -93,10 +89,10 @@ function landscapeView(ctrl: Ctrl) {
h('div.panel-tabs', [
h('a.tab.preset', panelTabData(ctrl, 'preset'), 'Presets'),
h('a.tab.filter', panelTabData(ctrl, 'filter'), 'Filters'),
- Object.keys(ctrl.vm.filters).length ? clearBtn(ctrl) : null,
+ Object.keys(ctrl.vm.filters).length && clearBtn(ctrl),
]),
- ctrl.vm.panel === 'filter' ? filters(ctrl) : null,
- ctrl.vm.panel === 'preset' ? presets(ctrl) : null,
+ ctrl.vm.panel === 'filter' && filters(ctrl),
+ ctrl.vm.panel === 'preset' && presets(ctrl),
help(ctrl),
]),
spacer(),
@@ -122,7 +118,7 @@ function portraitView(ctrl: Ctrl) {
? [header(ctrl), thunk('div.insight__main.box', renderMain, [ctrl, cacheKey(ctrl)])]
: h('div.left-side', [
info(ctrl),
- ctrl.vm.view === 'filters' ? clearBtn(ctrl) : null,
+ ctrl.vm.view === 'filters' && clearBtn(ctrl),
ctrl.vm.view === 'presets' ? presets(ctrl) : filters(ctrl),
]),
),
diff --git a/ui/keyboardMove/src/main.ts b/ui/keyboardMove/src/main.ts
index 9bf89da375888..ff537d7eb59ca 100644
--- a/ui/keyboardMove/src/main.ts
+++ b/ui/keyboardMove/src/main.ts
@@ -154,10 +154,7 @@ export function ctrl(root: RootController, step: Step): KeyboardMove {
export function render(ctrl: KeyboardMove) {
return h('div.keyboard-move', [
h('input', {
- attrs: {
- spellcheck: 'false',
- autocomplete: 'off',
- },
+ attrs: { spellcheck: 'false', autocomplete: 'off' },
hook: onInsert((input: HTMLInputElement) =>
loadKeyboardMove({ input, ctrl }).then((m: KeyboardMoveHandler) => ctrl.registerHandler(m)),
),
diff --git a/ui/lobby/css/_feed.scss b/ui/lobby/css/_feed.scss
new file mode 100644
index 0000000000000..4ede9484ee616
--- /dev/null
+++ b/ui/lobby/css/_feed.scss
@@ -0,0 +1,69 @@
+$c-contours: mix($c-brag, $c-shade, 80%);
+
+.lobby__feed {
+ @extend %box-neat;
+ @include hoverflow;
+ background: $c-bg-box;
+ overflow-y: auto;
+}
+.daily-feed {
+ &__updates {
+ margin-left: 24px;
+ border-#{$start-direction}: 2px solid $c-contours;
+ margin-bottom: 1.5em;
+ }
+
+ &__update {
+ padding-#{$start-direction}: 25px;
+ margin-top: 1.5em;
+
+ table {
+ display: none;
+ }
+
+ > i {
+ font-size: 13px;
+ float: $start-direction;
+ width: 32px;
+ height: 32px;
+ margin-top: -5px;
+ margin-#{$start-direction}: -42px;
+ line-height: 27px;
+ text-align: center;
+ background-color: $c-contours;
+ border: 3px solid $c-bg-box;
+ border-radius: 50%;
+ color: #fff;
+ }
+ &__day {
+ @extend %flex-center;
+ display: inline;
+ font-size: 1.15em;
+ font-weight: bold;
+ color: $c-contours;
+ time {
+ font-size: 1em;
+ opacity: 1;
+ }
+ &:hover {
+ color: $c-brag;
+ }
+ }
+ @include rendered-markdown(
+ $element-margin: 0.6em,
+ $h1: false,
+ $h2: false,
+ $table: false,
+ $img: false,
+ $list: false
+ );
+ h3 {
+ font-size: 1.2em;
+ color: $c-font-dim;
+ border-bottom: $border;
+ }
+ h4 {
+ font-size: 1.15em;
+ }
+ }
+}
diff --git a/ui/lobby/css/_layout.scss b/ui/lobby/css/_layout.scss
index 47ae35a13b9b7..ded5a11c83b1b 100644
--- a/ui/lobby/css/_layout.scss
+++ b/ui/lobby/css/_layout.scss
@@ -2,7 +2,7 @@
--cols: 1; // ui/lobby/src/main.ts
grid-area: main;
display: grid;
- grid-template-areas: 'app' 'table' 'side' 'blog' 'support' 'tv' 'puzzle' 'leader' 'winner' 'tours' 'timeline' 'about';
+ grid-template-areas: 'app' 'table' 'side' 'blog' 'support' 'feed' 'tv' 'puzzle' 'tours' 'leader' 'winner' 'timeline' 'about';
grid-gap: $block-gap;
&__tournaments,
@@ -11,20 +11,26 @@
&__winners {
max-height: 20em;
}
+ // this helps in empty dev mode
+ &__leaderboard,
+ &__winners {
+ min-height: 20em;
+ }
@include breakpoint($mq-col2) {
--cols: 2; // ui/lobby/src/main.ts
grid-template-columns: repeat(2, 1fr);
- grid-template-rows: auto repeat(3, fit-content(0));
+ grid-template-rows: auto repeat(4, fit-content(0)) 20em;
grid-template-areas:
'app app'
'side table'
'blog blog'
'tv puzzle'
'support support'
+ 'feed feed'
'tours tours'
- 'leader winner'
'timeline timeline'
+ 'leader winner'
'about about';
&__support {
@@ -37,16 +43,19 @@
@include breakpoint($mq-col3) {
--cols: 3; // ui/lobby/src/main.ts
grid-template-columns: repeat(3, 1fr);
- grid-template-rows: 12em repeat(2, fit-content(0)) auto auto fit-content(0);
+ grid-template-rows: 12em repeat(2, fit-content(0)) auto fit-content(15em) repeat(2, fit-content(0)) minmax(
+ 0,
+ 1fr
+ );
grid-template-areas:
'table app app'
'side app app'
'tv blog blog'
'tv support support'
- 'puzzle tours tours'
- 'puzzle leader winner'
- '. leader winner'
- 'about about about';
+ 'puzzle feed feed'
+ 'leader tours tours'
+ 'winner tours tours'
+ 'winner about about';
&__start {
margin: 2em 0 0 0;
@@ -68,13 +77,14 @@
@include breakpoint($mq-col4) {
--cols: 4; // ui/lobby/src/main.ts
grid-template-columns: repeat(4, 1fr);
- grid-template-rows: repeat(2, fit-content(0)) auto minmax(0, 1fr);
+ grid-template-rows: repeat(2, fit-content(0)) auto repeat(6, fit-content(0));
grid-template-areas:
'side app app table'
'tv blog blog puzzle'
'tv support support puzzle'
- 'leader winner tours tours'
- 'about about about about';
+ 'feed feed tours tours'
+ 'feed feed leader winner'
+ 'about about leader winner';
&__start {
justify-content: center;
@@ -150,6 +160,10 @@
grid-area: support;
}
+ &__feed {
+ grid-area: feed;
+ }
+
&__about {
grid-area: about;
}
diff --git a/ui/lobby/css/_lobby.scss b/ui/lobby/css/_lobby.scss
index 26d815273e075..e01946cc0f21e 100644
--- a/ui/lobby/css/_lobby.scss
+++ b/ui/lobby/css/_lobby.scss
@@ -7,6 +7,7 @@
@import 'box';
@import 'support';
@import 'about';
+@import 'feed';
@import 'layout';
body {
@@ -107,24 +108,6 @@ body {
.ublog-post-card:hover {
box-shadow: none;
}
- .daily-feed {
- &__update {
- &--fresh {
- outline: 1px solid $c-brag;
- }
- &__day {
- color: $c-brag;
- margin: 0.5em 0 0.6em 0;
- }
- a {
- color: $c-brag;
- }
- time {
- font-size: 1em;
- opacity: 1;
- }
- }
- }
}
.tour-team-icon {
diff --git a/ui/lobby/css/build/_lobby.scss b/ui/lobby/css/build/_lobby.scss
index 2a1c84775c5ea..a66cd79a26ffe 100644
--- a/ui/lobby/css/build/_lobby.scss
+++ b/ui/lobby/css/build/_lobby.scss
@@ -3,6 +3,7 @@
@import '../../../common/css/component/color-icon';
@import '../../../common/css/component/glowing';
@import '../../../common/css/component/tabs-horiz';
+@import '../../../common/css/component/markdown';
@import '../../../common/css/base/scrollbar';
@import '../../../site/css/ublog/card';
@import '../lobby';
diff --git a/ui/lobby/src/view/correspondence.ts b/ui/lobby/src/view/correspondence.ts
index 186e27646beec..8b5c8b806d9e5 100644
--- a/ui/lobby/src/view/correspondence.ts
+++ b/ui/lobby/src/view/correspondence.ts
@@ -23,20 +23,12 @@ function renderSeek(ctrl: LobbyController, seek: Seek): VNode {
tds([
h('span.is.color-icon.' + (seek.color || 'random')),
seek.rating
- ? h(
- 'span.ulpt',
- {
- attrs: { 'data-href': '/@/' + seek.username },
- },
- seek.username,
- )
+ ? h('span.ulpt', { attrs: { 'data-href': '/@/' + seek.username } }, seek.username)
: 'Anonymous',
seek.rating && !ctrl.opts.hideRatings ? seek.rating + (seek.provisional ? '?' : '') : '',
seek.days ? ctrl.trans.pluralSame('nbDays', seek.days) : '∞',
h('span', [
- h('span.varicon', {
- attrs: { 'data-icon': perfIcons[seek.perf.key] },
- }),
+ h('span.varicon', { attrs: { 'data-icon': perfIcons[seek.perf.key] } }),
noarg(seek.mode === 1 ? 'rated' : 'casual'),
]),
]),
@@ -64,12 +56,13 @@ function createSeek(ctrl: LobbyController): VNode | undefined {
export default function (ctrl: LobbyController): MaybeVNodes {
return [
h('table.hooks__list', [
- h('thead', [
+ h(
+ 'thead',
h(
'tr',
['', 'player', 'rating', 'time', 'mode'].map(header => h('th', ctrl.trans(header))),
),
- ]),
+ ),
h(
'tbody',
{
diff --git a/ui/lobby/src/view/playing.ts b/ui/lobby/src/view/playing.ts
index c5b461e620630..bfaff84a5b64e 100644
--- a/ui/lobby/src/view/playing.ts
+++ b/ui/lobby/src/view/playing.ts
@@ -21,38 +21,29 @@ export default function (ctrl: LobbyController) {
return h(
'div.now-playing',
ctrl.data.nowPlaying.map(pov =>
- h(
- 'a.' + pov.variant.key,
- {
- key: `${pov.gameId}${pov.lastMove}`,
- attrs: { href: '/' + pov.fullId },
- },
- [
- h('span.mini-board.cg-wrap.is2d', {
- attrs: {
- 'data-state': `${pov.fen},${pov.orientation || pov.color},${pov.lastMove}`,
- },
- hook: {
- insert(vnode) {
- lichess.miniBoard.init(vnode.elm as HTMLElement);
- },
+ h('a.' + pov.variant.key, { key: `${pov.gameId}${pov.lastMove}`, attrs: { href: '/' + pov.fullId } }, [
+ h('span.mini-board.cg-wrap.is2d', {
+ attrs: { 'data-state': `${pov.fen},${pov.orientation || pov.color},${pov.lastMove}` },
+ hook: {
+ insert(vnode) {
+ lichess.miniBoard.init(vnode.elm as HTMLElement);
},
- }),
- h('span.meta', [
- pov.opponent.ai
- ? ctrl.trans('aiNameLevelAiLevel', 'Stockfish', pov.opponent.ai)
- : pov.opponent.username,
- h(
- 'span.indicator',
- pov.isMyTurn
- ? pov.secondsLeft && pov.hasMoved
- ? timer(pov)
- : [ctrl.trans.noarg('yourTurn')]
- : h('span', '\xa0'),
- ), //
- ]),
- ],
- ),
+ },
+ }),
+ h('span.meta', [
+ pov.opponent.ai
+ ? ctrl.trans('aiNameLevelAiLevel', 'Stockfish', pov.opponent.ai)
+ : pov.opponent.username,
+ h(
+ 'span.indicator',
+ pov.isMyTurn
+ ? pov.secondsLeft && pov.hasMoved
+ ? timer(pov)
+ : [ctrl.trans.noarg('yourTurn')]
+ : h('span', '\xa0'),
+ ), //
+ ]),
+ ]),
),
);
}
diff --git a/ui/lobby/src/view/pools.ts b/ui/lobby/src/view/pools.ts
index 524c44394bacf..d09431ad2ddfa 100644
--- a/ui/lobby/src/view/pools.ts
+++ b/ui/lobby/src/view/pools.ts
@@ -23,31 +23,18 @@ export function render(ctrl: LobbyController) {
.map(pool => {
const active = !!member && member.id === pool.id,
transp = !!member && !active;
- return h(
- 'div',
- {
- class: {
- active,
- transp: !active && transp,
- },
- attrs: { 'data-id': pool.id },
- },
- [
- h('div.clock', `${pool.lim}+${pool.inc}`),
- active && member!.range && !ctrl.opts.hideRatings
- ? h('div.range', member.range.replace('-', '–'))
- : h('div.perf', pool.perf),
- active ? spinner() : null,
- ],
- );
+ return h('div', { class: { active, transp: !active && transp }, attrs: { 'data-id': pool.id } }, [
+ h('div.clock', `${pool.lim}+${pool.inc}`),
+ active && member!.range && !ctrl.opts.hideRatings
+ ? h('div.range', member.range.replace('-', '–'))
+ : h('div.perf', pool.perf),
+ active ? spinner() : null,
+ ]);
})
.concat(
h(
'div.custom',
- {
- class: { transp: !!member },
- attrs: { 'data-id': 'custom' },
- },
+ { class: { transp: !!member }, attrs: { 'data-id': 'custom' } },
ctrl.trans.noarg('custom'),
),
);
diff --git a/ui/lobby/src/view/realTime/chart.ts b/ui/lobby/src/view/realTime/chart.ts
index bf31eb661a6ba..e29378c7dfc58 100644
--- a/ui/lobby/src/view/realTime/chart.ts
+++ b/ui/lobby/src/view/realTime/chart.ts
@@ -41,10 +41,7 @@ function renderPlot(ctrl: LobbyController, hook: Hook) {
].join('.');
return h('span#' + klass, {
key: hook.id,
- attrs: {
- 'data-icon': perfIcons[hook.perf],
- style: `bottom:${percents(bottom)};left:${percents(left)}`,
- },
+ attrs: { 'data-icon': perfIcons[hook.perf], style: `bottom:${percents(bottom)};left:${percents(left)}` },
hook: {
insert(vnode) {
$(vnode.elm as HTMLElement).powerTip({
@@ -94,20 +91,8 @@ function renderXAxis() {
const tags: VNode[] = [];
xMarks.forEach(v => {
const l = clockX(v * 60);
- tags.push(
- h(
- 'span.x.label',
- {
- attrs: { style: 'left:' + percents(l - 1.5) },
- },
- '' + v,
- ),
- );
- tags.push(
- h('div.grid.vert', {
- attrs: { style: 'width:' + percents(l) },
- }),
- );
+ tags.push(h('span.x.label', { attrs: { style: 'left:' + percents(l - 1.5) } }, '' + v));
+ tags.push(h('div.grid.vert', { attrs: { style: 'width:' + percents(l) } }));
});
return tags;
}
@@ -118,20 +103,8 @@ function renderYAxis() {
const tags: VNode[] = [];
yMarks.forEach(function (v) {
const b = ratingY(v);
- tags.push(
- h(
- 'span.y.label',
- {
- attrs: { style: 'bottom:' + percents(b + 1) },
- },
- '' + v,
- ),
- );
- tags.push(
- h('div.grid.horiz', {
- attrs: { style: 'height:' + percents(b + 0.8) },
- }),
- );
+ tags.push(h('span.y.label', { attrs: { style: 'bottom:' + percents(b + 1) } }, '' + v));
+ tags.push(h('div.grid.horiz', { attrs: { style: 'height:' + percents(b + 0.8) } }));
});
return tags;
}
diff --git a/ui/lobby/src/view/realTime/filter.ts b/ui/lobby/src/view/realTime/filter.ts
index a81abdd2dade9..a0e0f36271cf6 100644
--- a/ui/lobby/src/view/realTime/filter.ts
+++ b/ui/lobby/src/view/realTime/filter.ts
@@ -49,17 +49,11 @@ function initialize(ctrl: LobbyController, el: HTMLElement) {
const rangeValues = $rangeInput.val() ? ($rangeInput.val() as string).split('-') : [];
$minInput
- .attr({
- step: '50',
- value: rangeValues[0] || $minInput.attr('min')!,
- })
+ .attr({ step: '50', value: rangeValues[0] || $minInput.attr('min')! })
.on('input', changeRatingRange);
$maxInput
- .attr({
- step: '50',
- value: rangeValues[1] || $maxInput.attr('max')!,
- })
+ .attr({ step: '50', value: rangeValues[1] || $maxInput.attr('max')! })
.on('input', changeRatingRange);
changeRatingRange();
@@ -70,10 +64,7 @@ export function toggle(ctrl: LobbyController, nbFiltered: number) {
return h('i.toggle.toggle-filter', {
class: { gamesFiltered: nbFiltered > 0, active: filter.open },
hook: bind('mousedown', filter.toggle, ctrl.redraw),
- attrs: {
- 'data-icon': filter.open ? licon.X : licon.Gear,
- title: ctrl.trans.noarg('filterGames'),
- },
+ attrs: { 'data-icon': filter.open ? licon.X : licon.Gear, title: ctrl.trans.noarg('filterGames') },
});
}
diff --git a/ui/lobby/src/view/realTime/list.ts b/ui/lobby/src/view/realTime/list.ts
index 49bc719d647ad..aae858ca685fe 100644
--- a/ui/lobby/src/view/realTime/list.ts
+++ b/ui/lobby/src/view/realTime/list.ts
@@ -26,23 +26,11 @@ function renderHook(ctrl: LobbyController, hook: Hook) {
tds([
h('span.is.color-icon.' + (hook.c || 'random')),
hook.rating
- ? h(
- 'span.ulink.ulpt',
- {
- attrs: { 'data-href': '/@/' + hook.u },
- },
- hook.u,
- )
+ ? h('span.ulink.ulpt', { attrs: { 'data-href': '/@/' + hook.u } }, hook.u)
: noarg('anonymous'),
hook.rating && !ctrl.opts.hideRatings ? hook.rating + (hook.prov ? '?' : '') : '',
hook.clock,
- h(
- 'span',
- {
- attrs: { 'data-icon': perfIcons[hook.perf] },
- },
- noarg(hook.ra ? 'rated' : 'casual'),
- ),
+ h('span', { attrs: { 'data-icon': perfIcons[hook.perf] } }, noarg(hook.ra ? 'rated' : 'casual')),
]),
);
}
@@ -75,21 +63,9 @@ export const render = (ctrl: LobbyController, allHooks: Hook[]) => {
const renderedHooks = [
...standards.map(render),
variants.length
- ? h(
- 'tr.variants',
- {
- key: 'variants',
- },
- [
- h(
- 'td',
- {
- attrs: { colspan: 5 },
- },
- '— ' + ctrl.trans('variant') + ' —',
- ),
- ],
- )
+ ? h('tr.variants', { key: 'variants' }, [
+ h('td', { attrs: { colspan: 5 } }, '— ' + ctrl.trans('variant') + ' —'),
+ ])
: null,
...variants.map(render),
];
@@ -103,10 +79,7 @@ export const render = (ctrl: LobbyController, allHooks: Hook[]) => {
h(
'th',
{
- class: {
- sortable: true,
- sort: ctrl.sort === 'rating',
- },
+ class: { sortable: true, sort: ctrl.sort === 'rating' },
hook: bind('click', _ => ctrl.setSort('rating'), ctrl.redraw),
},
[h('i.is'), ctrl.trans('rating')],
@@ -114,10 +87,7 @@ export const render = (ctrl: LobbyController, allHooks: Hook[]) => {
h(
'th',
{
- class: {
- sortable: true,
- sort: ctrl.sort === 'time',
- },
+ class: { sortable: true, sort: ctrl.sort === 'time' },
hook: bind('click', _ => ctrl.setSort('time'), ctrl.redraw),
},
[h('i.is'), ctrl.trans('time')],
diff --git a/ui/lobby/src/view/setup/components/gameModeButtons.ts b/ui/lobby/src/view/setup/components/gameModeButtons.ts
index 3205141548ebc..a82802df75cfb 100644
--- a/ui/lobby/src/view/setup/components/gameModeButtons.ts
+++ b/ui/lobby/src/view/setup/components/gameModeButtons.ts
@@ -16,13 +16,7 @@ export const gameModeButtons = (ctrl: LobbyController): MaybeVNode => {
const disabled = key === 'rated' && setupCtrl.ratedModeDisabled();
return h('div', [
h(`input#sf_mode_${key}.checked_${key === setupCtrl.gameMode()}`, {
- attrs: {
- name,
- type: 'radio',
- value: key,
- checked: key === setupCtrl.gameMode(),
- disabled,
- },
+ attrs: { name, type: 'radio', value: key, checked: key === setupCtrl.gameMode(), disabled },
on: {
change: (e: Event) => setupCtrl.gameMode((e.target as HTMLInputElement).value as GameMode),
},
diff --git a/ui/lobby/src/view/setup/components/ratingDifferenceSliders.ts b/ui/lobby/src/view/setup/components/ratingDifferenceSliders.ts
index 0e09a7656c2d2..6098105a551a7 100644
--- a/ui/lobby/src/view/setup/components/ratingDifferenceSliders.ts
+++ b/ui/lobby/src/view/setup/components/ratingDifferenceSliders.ts
@@ -17,9 +17,7 @@ export const ratingDifferenceSliders = (ctrl: LobbyController) => {
`div.rating-range-config.optional-config${disabled}`,
{
attrs: isProvisional
- ? {
- title: 'Your rating is still provisional, play some rated games to use the rating range.',
- }
+ ? { title: 'Your rating is still provisional, play some rated games to use the rating range.' }
: undefined,
},
[
diff --git a/ui/lobby/src/view/setup/components/timePickerAndSliders.ts b/ui/lobby/src/view/setup/components/timePickerAndSliders.ts
index eeac588af2e2e..8ccd538cecb02 100644
--- a/ui/lobby/src/view/setup/components/timePickerAndSliders.ts
+++ b/ui/lobby/src/view/setup/components/timePickerAndSliders.ts
@@ -1,5 +1,5 @@
import { Prop } from 'common';
-import { h } from 'snabbdom';
+import { looseH as h } from 'common/snabbdom';
import LobbyController from '../../../ctrl';
import { InputValue, TimeMode } from '../../../interfaces';
import { daysVToDays, incrementVToIncrement, sliderTimes, timeModes } from '../../../options';
@@ -16,90 +16,82 @@ const renderBlindModeTimePickers = (ctrl: LobbyController, allowAnonymous: boole
const { trans, setupCtrl } = ctrl;
return [
renderTimeModePicker(ctrl, allowAnonymous),
- setupCtrl.timeMode() === 'realTime'
- ? h('div.time-choice', [
- h('label', { attrs: { for: 'sf_time' } }, trans('minutesPerSide')),
- h(
- 'select#sf_time',
- {
- on: {
- change: (e: Event) => setupCtrl.timeV(parseFloat((e.target as HTMLSelectElement).value)),
- },
- },
- sliderTimes.map((sliderTime, timeV) =>
- option({ key: timeV.toString(), name: showTime(sliderTime) }, setupCtrl.timeV().toString()),
- ),
+ setupCtrl.timeMode() === 'realTime' &&
+ h('div.time-choice', [
+ h('label', { attrs: { for: 'sf_time' } }, trans('minutesPerSide')),
+ h(
+ 'select#sf_time',
+ {
+ on: { change: (e: Event) => setupCtrl.timeV(parseFloat((e.target as HTMLSelectElement).value)) },
+ },
+ sliderTimes.map((sliderTime, timeV) =>
+ option({ key: timeV.toString(), name: showTime(sliderTime) }, setupCtrl.timeV().toString()),
),
- ])
- : null,
- setupCtrl.timeMode() === 'realTime'
- ? h('div.increment-choice', [
- h('label', { attrs: { for: 'sf_increment' } }, trans('incrementInSeconds')),
- h(
- 'select#sf_increment',
- {
- on: {
- change: (e: Event) => setupCtrl.incrementV(parseInt((e.target as HTMLSelectElement).value)),
- },
+ ),
+ ]),
+ setupCtrl.timeMode() === 'realTime' &&
+ h('div.increment-choice', [
+ h('label', { attrs: { for: 'sf_increment' } }, trans('incrementInSeconds')),
+ h(
+ 'select#sf_increment',
+ {
+ on: {
+ change: (e: Event) => setupCtrl.incrementV(parseInt((e.target as HTMLSelectElement).value)),
},
- // 31 because the range below goes from 0 to 30
- Array.from(Array(31).keys()).map(incrementV =>
- option(
- { key: incrementV.toString(), name: incrementVToIncrement(incrementV).toString() },
- setupCtrl.incrementV().toString(),
- ),
+ },
+ // 31 because the range below goes from 0 to 30
+ Array.from(Array(31).keys()).map(incrementV =>
+ option(
+ { key: incrementV.toString(), name: incrementVToIncrement(incrementV).toString() },
+ setupCtrl.incrementV().toString(),
),
),
- ])
- : null,
- setupCtrl.timeMode() === 'correspondence'
- ? h('div.days-choice', [
- h('label', { attrs: { for: 'sf_days' } }, trans('daysPerTurn')),
- h(
- 'select#sf_days',
- {
- on: {
- change: (e: Event) => setupCtrl.daysV(parseInt((e.target as HTMLSelectElement).value)),
- },
- },
- // 7 because the range below goes from 1 to 7
- Array.from(Array(7).keys()).map(daysV =>
- option(
- { key: (daysV + 1).toString(), name: daysVToDays(daysV + 1).toString() },
- setupCtrl.daysV().toString(),
- ),
+ ),
+ ]),
+ setupCtrl.timeMode() === 'correspondence' &&
+ h('div.days-choice', [
+ h('label', { attrs: { for: 'sf_days' } }, trans('daysPerTurn')),
+ h(
+ 'select#sf_days',
+ {
+ on: { change: (e: Event) => setupCtrl.daysV(parseInt((e.target as HTMLSelectElement).value)) },
+ },
+ // 7 because the range below goes from 1 to 7
+ Array.from(Array(7).keys()).map(daysV =>
+ option(
+ { key: (daysV + 1).toString(), name: daysVToDays(daysV + 1).toString() },
+ setupCtrl.daysV().toString(),
),
),
- ])
- : null,
+ ),
+ ]),
];
};
const renderTimeModePicker = (ctrl: LobbyController, allowAnonymous = false) => {
const { trans, setupCtrl } = ctrl;
- return ctrl.me || allowAnonymous
- ? h('div.label-select', [
- h('label', { attrs: { for: 'sf_timeMode' } }, trans('timeControl')),
- h(
- 'select#sf_timeMode',
- {
- on: {
- change: (e: Event) => setupCtrl.timeMode((e.target as HTMLSelectElement).value as TimeMode),
- },
+ return (
+ (ctrl.me || allowAnonymous) &&
+ h('div.label-select', [
+ h('label', { attrs: { for: 'sf_timeMode' } }, trans('timeControl')),
+ h(
+ 'select#sf_timeMode',
+ {
+ on: {
+ change: (e: Event) => setupCtrl.timeMode((e.target as HTMLSelectElement).value as TimeMode),
},
- timeModes(trans).map(timeMode => option(timeMode, setupCtrl.timeMode())),
- ),
- ])
- : null;
+ },
+ timeModes(trans).map(timeMode => option(timeMode, setupCtrl.timeMode())),
+ ),
+ ])
+ );
};
const inputRange = (min: number, max: number, prop: Prop, classes?: Record) =>
h('input.range', {
class: classes,
attrs: { type: 'range', min, max, value: prop() },
- on: {
- input: (e: Event) => prop(parseFloat((e.target as HTMLInputElement).value)),
- },
+ on: { input: (e: Event) => prop(parseFloat((e.target as HTMLInputElement).value)) },
});
export const timePickerAndSliders = (ctrl: LobbyController, allowAnonymous = false) => {
@@ -110,31 +102,29 @@ export const timePickerAndSliders = (ctrl: LobbyController, allowAnonymous = fal
? renderBlindModeTimePickers(ctrl, allowAnonymous)
: [
renderTimeModePicker(ctrl, allowAnonymous),
- setupCtrl.timeMode() === 'realTime'
- ? h('div.time-choice.range', [
- `${trans('minutesPerSide')}: `,
- h('span', showTime(setupCtrl.time())),
- inputRange(0, 38, setupCtrl.timeV, {
- failure: !setupCtrl.validTime() || !setupCtrl.validAiTime(),
- }),
- ])
- : null,
+ setupCtrl.timeMode() === 'realTime' &&
+ h('div.time-choice.range', [
+ `${trans('minutesPerSide')}: `,
+ h('span', showTime(setupCtrl.time())),
+ inputRange(0, 38, setupCtrl.timeV, {
+ failure: !setupCtrl.validTime() || !setupCtrl.validAiTime(),
+ }),
+ ]),
setupCtrl.timeMode() === 'realTime'
? h('div.increment-choice.range', [
`${trans('incrementInSeconds')}: `,
h('span', setupCtrl.increment()),
inputRange(0, 30, setupCtrl.incrementV, { failure: !setupCtrl.validTime() }),
])
- : setupCtrl.timeMode() === 'correspondence'
- ? h(
+ : setupCtrl.timeMode() === 'correspondence' &&
+ h(
'div.correspondence',
h('div.days-choice.range', [
`${trans('daysPerTurn')}: `,
h('span', setupCtrl.days()),
inputRange(1, 7, setupCtrl.daysV),
]),
- )
- : null,
+ ),
],
);
};
diff --git a/ui/lobby/src/view/setup/components/variantPicker.ts b/ui/lobby/src/view/setup/components/variantPicker.ts
index f11d3a1383bdc..5ba0b10f0ff5b 100644
--- a/ui/lobby/src/view/setup/components/variantPicker.ts
+++ b/ui/lobby/src/view/setup/components/variantPicker.ts
@@ -12,9 +12,7 @@ export const variantPicker = (ctrl: LobbyController) => {
h(
'select#sf_variant',
{
- on: {
- change: (e: Event) => setupCtrl.variant((e.target as HTMLSelectElement).value as VariantKey),
- },
+ on: { change: (e: Event) => setupCtrl.variant((e.target as HTMLSelectElement).value as VariantKey) },
hook: onInsert(element => element.focus()),
},
variantsForGameType(baseVariants, setupCtrl.gameType!).map(variant =>
diff --git a/ui/lobby/src/view/tabs.ts b/ui/lobby/src/view/tabs.ts
index dde576661b900..17a79517df30f 100644
--- a/ui/lobby/src/view/tabs.ts
+++ b/ui/lobby/src/view/tabs.ts
@@ -8,10 +8,7 @@ function tab(ctrl: LobbyController, key: Tab, active: Tab, content: MaybeVNodes)
'span',
{
attrs: { role: 'tab' },
- class: {
- active: key === active,
- glowing: key !== active && key === 'pools' && !!ctrl.poolMember,
- },
+ class: { active: key === active, glowing: key !== active && key === 'pools' && !!ctrl.poolMember },
hook: bind('mousedown', _ => ctrl.setTab(key), ctrl.redraw),
},
content,
diff --git a/ui/msg/src/view/actions.ts b/ui/msg/src/view/actions.ts
index 1431f2fa5290e..946e27f8dcd3d 100644
--- a/ui/msg/src/view/actions.ts
+++ b/ui/msg/src/view/actions.ts
@@ -47,11 +47,7 @@ export default function renderActions(ctrl: MsgCtrl, convo: Convo): VNode[] {
nodes.push(
h(`button.${cls}.bad`, {
key: 'delete',
- attrs: {
- 'data-icon': licon.Trash,
- type: 'button',
- title: ctrl.trans.noarg('delete'),
- },
+ attrs: { 'data-icon': licon.Trash, type: 'button', title: ctrl.trans.noarg('delete') },
hook: bind('click', withConfirm(ctrl.delete)),
}),
);
diff --git a/ui/msg/src/view/contact.ts b/ui/msg/src/view/contact.ts
index 86f919a782a7a..e0a866796547e 100644
--- a/ui/msg/src/view/contact.ts
+++ b/ui/msg/src/view/contact.ts
@@ -26,16 +26,10 @@ export default function renderContact(ctrl: MsgCtrl, contact: Contact, active?:
h('div.msg-app__side__contact__body', [
h(
'div.msg-app__side__contact__msg',
- {
- class: { 'msg-app__side__contact__msg--new': isNew },
- },
+ { class: { 'msg-app__side__contact__msg--new': isNew } },
msg.text,
),
- isNew
- ? h('i.msg-app__side__contact__new', {
- attrs: { 'data-icon': licon.BellOutline },
- })
- : null,
+ isNew ? h('i.msg-app__side__contact__new', { attrs: { 'data-icon': licon.BellOutline } }) : null,
]),
]),
],
@@ -43,25 +37,11 @@ export default function renderContact(ctrl: MsgCtrl, contact: Contact, active?:
}
export const userIcon = (user: User, cls: string): VNode =>
- h(
- 'div.user-link.' + cls,
- {
- class: {
- online: user.online,
- },
- },
- userLine(user),
- );
+ h('div.user-link.' + cls, { class: { online: user.online } }, userLine(user));
const renderDate = (msg: LastMsg): VNode =>
h(
'time.timeago',
- {
- key: msg.date.getTime(),
- attrs: {
- title: msg.date.toLocaleString(),
- datetime: msg.date.getTime(),
- },
- },
+ { key: msg.date.getTime(), attrs: { title: msg.date.toLocaleString(), datetime: msg.date.getTime() } },
lichess.timeago(msg.date),
);
diff --git a/ui/msg/src/view/convo.ts b/ui/msg/src/view/convo.ts
index 202a6dc39a597..66530d702d426 100644
--- a/ui/msg/src/view/convo.ts
+++ b/ui/msg/src/view/convo.ts
@@ -10,41 +10,29 @@ import { userLink } from 'common/userLink';
export default function renderConvo(ctrl: MsgCtrl, convo: Convo): VNode {
const user = convo.user;
- return h(
- 'div.msg-app__convo',
- {
- key: user.id,
- },
- [
- h('div.msg-app__convo__head', [
- h('div.msg-app__convo__head__left', [
- h('span.msg-app__convo__head__back', {
- attrs: { 'data-icon': licon.LessThan },
- hook: hookMobileMousedown(ctrl.showSide),
- }),
- userLink({ ...user, moderator: user.id == 'lichess' }),
- ]),
- h('div.msg-app__convo__head__actions', renderActions(ctrl, convo)),
+ return h('div.msg-app__convo', { key: user.id }, [
+ h('div.msg-app__convo__head', [
+ h('div.msg-app__convo__head__left', [
+ h('span.msg-app__convo__head__back', {
+ attrs: { 'data-icon': licon.LessThan },
+ hook: hookMobileMousedown(ctrl.showSide),
+ }),
+ userLink({ ...user, moderator: user.id == 'lichess' }),
]),
- renderMsgs(ctrl, convo),
- h('div.msg-app__convo__reply', [
- convo.relations.out === false || convo.relations.in === false
- ? blocked('This conversation is blocked.')
- : ctrl.data.me.bot
- ? blocked('Bot accounts cannot send nor receive messages.')
- : convo.postable
- ? renderInteract(ctrl, user)
- : blocked(`${user.name} doesn't accept new messages.`),
- ]),
- ],
- );
+ h('div.msg-app__convo__head__actions', renderActions(ctrl, convo)),
+ ]),
+ renderMsgs(ctrl, convo),
+ h('div.msg-app__convo__reply', [
+ convo.relations.out === false || convo.relations.in === false
+ ? blocked('This conversation is blocked.')
+ : ctrl.data.me.bot
+ ? blocked('Bot accounts cannot send nor receive messages.')
+ : convo.postable
+ ? renderInteract(ctrl, user)
+ : blocked(`${user.name} doesn't accept new messages.`),
+ ]),
+ ]);
}
const blocked = (msg: string) =>
- h(
- 'div.msg-app__convo__reply__block.text',
- {
- attrs: { 'data-icon': licon.NotAllowed },
- },
- msg,
- );
+ h('div.msg-app__convo__reply__block.text', { attrs: { 'data-icon': licon.NotAllowed } }, msg);
diff --git a/ui/msg/src/view/interact.ts b/ui/msg/src/view/interact.ts
index 1995607cf8218..256320eefee6b 100644
--- a/ui/msg/src/view/interact.ts
+++ b/ui/msg/src/view/interact.ts
@@ -22,11 +22,7 @@ export default function renderInteract(ctrl: MsgCtrl, user: User): VNode {
renderTextarea(ctrl, user),
h('button.msg-app__convo__post__submit.button', {
class: { connected },
- attrs: {
- type: 'submit',
- 'data-icon': licon.PlayTriangle,
- disabled: !connected,
- },
+ attrs: { type: 'submit', 'data-icon': licon.PlayTriangle, disabled: !connected },
}),
],
);
@@ -34,10 +30,7 @@ export default function renderInteract(ctrl: MsgCtrl, user: User): VNode {
function renderTextarea(ctrl: MsgCtrl, user: User): VNode {
return h('textarea.msg-app__convo__post__text', {
- attrs: {
- rows: 1,
- enterkeyhint: 'send',
- },
+ attrs: { rows: 1, enterkeyhint: 'send' },
hook: {
insert(vnode) {
setupTextarea(vnode.elm as HTMLTextAreaElement, user.id, ctrl);
diff --git a/ui/msg/src/view/main.ts b/ui/msg/src/view/main.ts
index c701cdad41bd1..78ad2e1e4f042 100644
--- a/ui/msg/src/view/main.ts
+++ b/ui/msg/src/view/main.ts
@@ -7,28 +7,20 @@ import * as search from './search';
export default function (ctrl: MsgCtrl): VNode {
const activeId = ctrl.data.convo?.user.id;
- return h(
- 'main.box.msg-app',
- {
- class: {
- [`pane-${ctrl.pane}`]: true,
- },
- },
- [
- h('div.msg-app__side', [
- search.renderInput(ctrl),
- ctrl.search.result
- ? search.renderResults(ctrl, ctrl.search.result)
- : h(
- 'div.msg-app__contacts.msg-app__side__content',
- ctrl.data.contacts.map(t => renderContact(ctrl, t, activeId)),
- ),
- ]),
- ctrl.data.convo
- ? renderConvo(ctrl, ctrl.data.convo)
- : ctrl.loading
- ? h('div.msg-app__convo', { key: ':' }, [h('div.msg-app__convo__head'), spinner()])
- : '',
- ],
- );
+ return h('main.box.msg-app', { class: { [`pane-${ctrl.pane}`]: true } }, [
+ h('div.msg-app__side', [
+ search.renderInput(ctrl),
+ ctrl.search.result
+ ? search.renderResults(ctrl, ctrl.search.result)
+ : h(
+ 'div.msg-app__contacts.msg-app__side__content',
+ ctrl.data.contacts.map(t => renderContact(ctrl, t, activeId)),
+ ),
+ ]),
+ ctrl.data.convo
+ ? renderConvo(ctrl, ctrl.data.convo)
+ : ctrl.loading
+ ? h('div.msg-app__convo', { key: ':' }, [h('div.msg-app__convo__head'), spinner()])
+ : '',
+ ]);
}
diff --git a/ui/msg/src/view/msgs.ts b/ui/msg/src/view/msgs.ts
index 748ca3e74c41d..3b7db5d9a7228 100644
--- a/ui/msg/src/view/msgs.ts
+++ b/ui/msg/src/view/msgs.ts
@@ -10,12 +10,7 @@ import MsgCtrl from '../ctrl';
export default function renderMsgs(ctrl: MsgCtrl, convo: Convo): VNode {
return h(
'div.msg-app__convo__msgs',
- {
- hook: {
- insert: setupMsgs(ctrl, true),
- postpatch: setupMsgs(ctrl, false),
- },
- },
+ { hook: { insert: setupMsgs(ctrl, true), postpatch: setupMsgs(ctrl, false) } },
[
h('div.msg-app__convo__msgs__init'),
h('div.msg-app__convo__msgs__content', [
@@ -24,9 +19,7 @@ export default function renderMsgs(ctrl: MsgCtrl, convo: Convo): VNode {
'button.msg-app__convo__msgs__more.button.button-empty',
{
key: 'more',
- attrs: {
- type: 'button',
- },
+ attrs: { type: 'button' },
hook: bind('click', _ => {
scroller.setMarker();
ctrl.getMore();
@@ -70,21 +63,12 @@ const pad2 = (num: number): string => (num < 10 ? '0' : '') + num;
function groupMsgs(msgs: Msg[]): Daily[] {
let prev: Msg = msgs[0];
if (!prev) return [{ date: new Date(), msgs: [] }];
- const dailies: Daily[] = [
- {
- date: prev.date,
- msgs: [[prev]],
- },
- ];
+ const dailies: Daily[] = [{ date: prev.date, msgs: [[prev]] }];
msgs.slice(1).forEach(msg => {
if (sameDay(msg.date, prev.date)) {
if (msg.user == prev.user) dailies[0].msgs[0].unshift(msg);
else dailies[0].msgs.unshift([msg]);
- } else
- dailies.unshift({
- date: msg.date,
- msgs: [[msg]],
- });
+ } else dailies.unshift({ date: msg.date, msgs: [[msg]] });
prev = msg;
});
return dailies;
diff --git a/ui/msg/src/view/search.ts b/ui/msg/src/view/search.ts
index 7e70713ed69b4..29dda72b9a0c9 100644
--- a/ui/msg/src/view/search.ts
+++ b/ui/msg/src/view/search.ts
@@ -9,10 +9,7 @@ import { hookMobileMousedown } from 'common/device';
export const renderInput = (ctrl: MsgCtrl): VNode =>
h('div.msg-app__side__search', [
h('input', {
- attrs: {
- value: '',
- placeholder: ctrl.trans.noarg('searchOrStartNewDiscussion'),
- },
+ attrs: { value: '', placeholder: ctrl.trans.noarg('searchOrStartNewDiscussion') },
hook: {
insert(vnode) {
const input = vnode.elm as HTMLInputElement;
@@ -63,10 +60,7 @@ export function renderResults(ctrl: MsgCtrl, res: SearchResult): VNode {
function renderUser(ctrl: MsgCtrl, user: User): VNode {
return h(
'div.msg-app__side__contact',
- {
- key: user.id,
- hook: hookMobileMousedown(_ => ctrl.openConvo(user.id)),
- },
+ { key: user.id, hook: hookMobileMousedown(_ => ctrl.openConvo(user.id)) },
[
userIcon(user, 'msg-app__side__contact__icon'),
h('div.msg-app__side__contact__user', [
diff --git a/ui/notify/src/renderers.ts b/ui/notify/src/renderers.ts
index 8d2f6b71f1420..def6bd8ac8f2c 100644
--- a/ui/notify/src/renderers.ts
+++ b/ui/notify/src/renderers.ts
@@ -149,22 +149,10 @@ function generic(n: Notification, url: string | undefined, icon: string, content
return h(
url ? 'a' : 'span',
{
- class: {
- site_notification: true,
- [n.type]: true,
- new: !n.read,
- },
- attrs: {
- key: n.date,
- ...(url ? { href: url } : {}),
- },
+ class: { site_notification: true, [n.type]: true, new: !n.read },
+ attrs: { key: n.date, ...(url ? { href: url } : {}) },
},
- [
- h('i', {
- attrs: { 'data-icon': icon },
- }),
- h('span.content', content),
- ],
+ [h('i', { attrs: { 'data-icon': icon } }), h('span.content', content)],
);
}
@@ -172,12 +160,7 @@ function drawTime(n: Notification) {
const date = new Date(n.date);
return h(
'time.timeago',
- {
- attrs: {
- title: date.toLocaleString(),
- datetime: n.date,
- },
- },
+ { attrs: { title: date.toLocaleString(), datetime: n.date } },
lichess.timeago(date),
);
}
diff --git a/ui/notify/src/view.ts b/ui/notify/src/view.ts
index 393a8de4ca4cb..2403840be0a2b 100644
--- a/ui/notify/src/view.ts
+++ b/ui/notify/src/view.ts
@@ -28,10 +28,7 @@ function renderContent(ctrl: Ctrl, d: NotifyData): VNode[] {
if (nb > 0)
nodes.push(
h('button.delete.button.button-empty', {
- attrs: {
- 'data-icon': licon.Trash,
- title: 'Clear',
- },
+ attrs: { 'data-icon': licon.Trash, title: 'Clear' },
hook: clickHook(ctrl.clear),
}),
);
@@ -40,10 +37,7 @@ function renderContent(ctrl: Ctrl, d: NotifyData): VNode[] {
if (pager.nextPage)
nodes.push(
- h('div.pager.next', {
- attrs: { 'data-icon': licon.DownTriangle },
- hook: clickHook(ctrl.nextPage),
- }),
+ h('div.pager.next', { attrs: { 'data-icon': licon.DownTriangle }, hook: clickHook(ctrl.nextPage) }),
);
if (!('Notification' in window))
@@ -61,13 +55,7 @@ export function asText(n: Notification, trans: Trans): string | undefined {
function notificationDenied(): VNode {
return h(
'a.browser-notification.denied',
- {
- attrs: {
- href: '/faq#browser-notifications',
- target: '_blank',
- rel: 'noopener',
- },
- },
+ { attrs: { href: '/faq#browser-notifications', target: '_blank', rel: 'noopener' } },
'Notification popups disabled by browser setting',
);
}
@@ -92,14 +80,8 @@ function recentNotifications(d: NotifyData, scrolling: boolean): VNode {
return h(
'div',
{
- class: {
- notifications: true,
- scrolling,
- },
- hook: {
- insert: contentLoaded,
- postpatch: contentLoaded,
- },
+ class: { notifications: true, scrolling },
+ hook: { insert: contentLoaded, postpatch: contentLoaded },
},
d.pager.currentPageResults.map(n => asHtml(n, trans)) as VNode[],
);
diff --git a/ui/nvui/package.json b/ui/nvui/package.json
index 5bf11c8322d88..7cab6931c6938 100644
--- a/ui/nvui/package.json
+++ b/ui/nvui/package.json
@@ -24,7 +24,7 @@
"license": "AGPL-3.0-or-later",
"dependencies": {
"chess": "workspace:*",
- "chessops": "^0.12.7",
+ "chessops": "^0.13.0",
"snabbdom": "^3.5.1"
},
"scripts": {
diff --git a/ui/nvui/src/chess.ts b/ui/nvui/src/chess.ts
index 266e931f6b31a..cebf5c9423724 100644
--- a/ui/nvui/src/chess.ts
+++ b/ui/nvui/src/chess.ts
@@ -710,16 +710,7 @@ export function renderMainline(nodes: Tree.Node[], currentPath: Tree.Path, style
node.ply & 1 ? plyToTurn(node.ply) + ' ' : null,
renderSan(node.san, node.uci, style),
];
- res.push(
- h(
- 'move',
- {
- attrs: { p: path },
- class: { active: path === currentPath },
- },
- content,
- ),
- );
+ res.push(h('move', { attrs: { p: path }, class: { active: path === currentPath } }, content));
res.push(renderComments(node, style));
res.push(', ');
if (node.ply % 2 === 0) res.push(h('br'));
diff --git a/ui/nvui/src/notify.ts b/ui/nvui/src/notify.ts
index 1a79402ec433f..33a8744ce77d9 100644
--- a/ui/nvui/src/notify.ts
+++ b/ui/nvui/src/notify.ts
@@ -24,14 +24,5 @@ export class Notify {
: '';
render = () =>
- h(
- 'div.notify',
- {
- attrs: {
- 'aria-live': 'assertive',
- 'aria-atomic': 'true',
- },
- },
- this.currentText(),
- );
+ h('div.notify', { attrs: { 'aria-live': 'assertive', 'aria-atomic': 'true' } }, this.currentText());
}
diff --git a/ui/nvui/src/setting.ts b/ui/nvui/src/setting.ts
index 2dc55d7db0ced..3e8e6973a7f48 100644
--- a/ui/nvui/src/setting.ts
+++ b/ui/nvui/src/setting.ts
@@ -42,16 +42,7 @@ export function renderSetting(setting: Setting, redraw: () => void): VNode
},
setting.choices.map(choice => {
const [key, name] = choice;
- return h(
- 'option',
- {
- attrs: {
- value: '' + key,
- selected: key === v,
- },
- },
- name,
- );
+ return h('option', { attrs: { value: '' + key, selected: key === v } }, name);
}),
);
}
diff --git a/ui/puz/package.json b/ui/puz/package.json
index 3e38a67e4629a..97e66ac779b9f 100644
--- a/ui/puz/package.json
+++ b/ui/puz/package.json
@@ -20,7 +20,7 @@
"author": "Thibault Duplessis",
"license": "AGPL-3.0-or-later",
"dependencies": {
- "chessops": "^0.12.7",
+ "chessops": "^0.13.0",
"common": "workspace:*",
"snabbdom": "^3.5.1"
},
diff --git a/ui/puz/src/view/history.ts b/ui/puz/src/view/history.ts
index bb46ffa86cced..51ee821d682d0 100644
--- a/ui/puz/src/view/history.ts
+++ b/ui/puz/src/view/history.ts
@@ -18,10 +18,7 @@ const toggleButton = (prop: Toggle, title: string): VNode =>
h(
'button.puz-history__filter.button',
{
- class: {
- active: prop(),
- 'button-empty': !prop,
- },
+ class: { active: prop(), 'button-empty': !prop },
hook: onInsert(e => e.addEventListener('click', prop.toggle)),
},
title,
@@ -48,34 +45,28 @@ export default (ctrl: PuzCtrl): VNode => {
(!filters.skip || !filters.skip() || r.puzzle.id === ctrl.run.skipId),
)
.map(round =>
- h(
- 'div.puz-history__round',
- {
- key: round.puzzle.id,
- },
- [
- h('a.puz-history__round__puzzle.mini-board.cg-wrap.is2d', {
- attrs: {
- href: `/training/${round.puzzle.id}`,
- target: '_blank',
- rel: 'noopener',
- },
- hook: onInsert(e => {
- const pos = Chess.fromSetup(parseFen(round.puzzle.fen).unwrap()).unwrap();
- const uci = round.puzzle.line.split(' ')[0];
- pos.play(parseUci(uci)!);
- miniBoard.initWith(e, makeFen(pos.toSetup()), pos.turn, uci);
- }),
+ h('div.puz-history__round', { key: round.puzzle.id }, [
+ h('a.puz-history__round__puzzle.mini-board.cg-wrap.is2d', {
+ attrs: {
+ href: `/training/${round.puzzle.id}`,
+ target: '_blank',
+ rel: 'noopener',
+ },
+ hook: onInsert(e => {
+ const pos = Chess.fromSetup(parseFen(round.puzzle.fen).unwrap()).unwrap();
+ const uci = round.puzzle.line.split(' ')[0];
+ pos.play(parseUci(uci)!);
+ miniBoard.initWith(e, makeFen(pos.toSetup()), pos.turn, uci);
}),
- h('span.puz-history__round__meta', [
- h('span.puz-history__round__result', [
- h(round.win ? 'good' : 'bad', Math.round(round.millis / 1000) + 's'),
- h('rating', round.puzzle.rating),
- ]),
- h('span.puz-history__round__id', '#' + round.puzzle.id),
+ }),
+ h('span.puz-history__round__meta', [
+ h('span.puz-history__round__result', [
+ h(round.win ? 'good' : 'bad', Math.round(round.millis / 1000) + 's'),
+ h('rating', round.puzzle.rating),
]),
- ],
- ),
+ h('span.puz-history__round__id', '#' + round.puzzle.id),
+ ]),
+ ]),
),
),
]);
diff --git a/ui/puz/src/view/util.ts b/ui/puz/src/view/util.ts
index 5335eead2b1c1..4a715b1777014 100644
--- a/ui/puz/src/view/util.ts
+++ b/ui/puz/src/view/util.ts
@@ -25,9 +25,7 @@ export const renderCombo =
]),
h('div.puz-combo__bars', [
h('div.puz-combo__bar', [
- h('div.puz-combo__bar__in', {
- attrs: { style: `width:${run.combo.percent()}%` },
- }),
+ h('div.puz-combo__bar__in', { attrs: { style: `width:${run.combo.percent()}%` } }),
h('div.puz-combo__bar__in-full'),
]),
h(
@@ -35,11 +33,7 @@ export const renderCombo =
[0, 1, 2, 3].map(l =>
h(
'div.puz-combo__level',
- {
- class: {
- active: l < level,
- },
- },
+ { class: { active: l < level } },
h('span', renderBonus(config.combo.levels[l + 1][1])),
),
),
diff --git a/ui/puzzle/package.json b/ui/puzzle/package.json
index b598e6c1ea8b3..196c9122507bb 100644
--- a/ui/puzzle/package.json
+++ b/ui/puzzle/package.json
@@ -16,7 +16,7 @@
"ceval": "workspace:*",
"chart.js": "=4.4.0",
"chess": "workspace:*",
- "chessops": "^0.12.7",
+ "chessops": "^0.13.0",
"common": "workspace:*",
"keyboardMove": "workspace:*",
"nvui": "workspace:*",
diff --git a/ui/puzzle/src/autoShape.ts b/ui/puzzle/src/autoShape.ts
index 8b018dc2977c8..5e98eca04c4c1 100644
--- a/ui/puzzle/src/autoShape.ts
+++ b/ui/puzzle/src/autoShape.ts
@@ -1,16 +1,16 @@
import { winningChances, CevalCtrl } from 'ceval';
import { DrawModifiers, DrawShape } from 'chessground/draw';
-import { Vm } from './interfaces';
import { Api as CgApi } from 'chessground/api';
import { opposite, parseUci, makeSquare } from 'chessops/util';
import { NormalMove } from 'chessops/types';
interface Opts {
- vm: Vm;
+ node: Tree.Node;
+ showComputer(): boolean;
ceval: CevalCtrl;
ground: CgApi;
- nextNodeBest?: Uci;
- threatMode: boolean;
+ nextNodeBest(): Uci | undefined;
+ threatMode(): boolean;
}
function makeAutoShapesFromUci(
@@ -30,16 +30,16 @@ function makeAutoShapesFromUci(
}
export default function (opts: Opts): DrawShape[] {
- const n = opts.vm.node,
+ const n = opts.node,
hovering = opts.ceval.hovering(),
color = n.fen.includes(' w ') ? 'white' : 'black';
let shapes: DrawShape[] = [];
if (hovering && hovering.fen === n.fen)
shapes = shapes.concat(makeAutoShapesFromUci(color, hovering.uci, 'paleBlue'));
- if (opts.vm.showAutoShapes() && opts.vm.showComputer()) {
+ if (opts.showComputer()) {
if (n.eval) shapes = shapes.concat(makeAutoShapesFromUci(color, n.eval.best!, 'paleGreen'));
if (!hovering) {
- let nextBest: Uci | undefined = opts.nextNodeBest;
+ let nextBest: Uci | undefined = opts.nextNodeBest();
if (!nextBest && opts.ceval.enabled() && n.ceval) nextBest = n.ceval.pvs[0].moves[0];
if (nextBest) shapes = shapes.concat(makeAutoShapesFromUci(color, nextBest, 'paleBlue'));
if (
@@ -47,7 +47,7 @@ export default function (opts: Opts): DrawShape[] {
n.ceval &&
n.ceval.pvs &&
n.ceval.pvs[1] &&
- !(opts.threatMode && n.threat && n.threat.pvs[2])
+ !(opts.threatMode() && n.threat && n.threat.pvs[2])
) {
n.ceval.pvs.forEach(function (pv) {
if (pv.moves[0] === nextBest) return;
@@ -62,7 +62,7 @@ export default function (opts: Opts): DrawShape[] {
}
}
}
- if (opts.ceval.enabled() && opts.threatMode && n.threat) {
+ if (opts.ceval.enabled() && opts.threatMode() && n.threat) {
if (n.threat.pvs[1]) {
shapes = shapes.concat(makeAutoShapesFromUci(opposite(color), n.threat.pvs[0].moves[0], 'paleRed'));
n.threat.pvs.slice(1).forEach(function (pv) {
diff --git a/ui/puzzle/src/control.ts b/ui/puzzle/src/control.ts
index ce060c90f69ad..36578220460f2 100644
--- a/ui/puzzle/src/control.ts
+++ b/ui/puzzle/src/control.ts
@@ -1,26 +1,26 @@
import { path as treePath } from 'tree';
-import { KeyboardController } from './interfaces';
+import PuzzleCtrl from './ctrl';
-export function canGoForward(ctrl: KeyboardController): boolean {
- return ctrl.vm.node.children.length > 0;
+export function canGoForward(ctrl: PuzzleCtrl): boolean {
+ return ctrl.node.children.length > 0;
}
-export function next(ctrl: KeyboardController): void {
- const child = ctrl.vm.node.children[0];
+export function next(ctrl: PuzzleCtrl): void {
+ const child = ctrl.node.children[0];
if (!child) return;
- ctrl.userJump(ctrl.vm.path + child.id);
+ ctrl.userJump(ctrl.path + child.id);
}
-export function prev(ctrl: KeyboardController): void {
- ctrl.userJump(treePath.init(ctrl.vm.path));
+export function prev(ctrl: PuzzleCtrl): void {
+ ctrl.userJump(treePath.init(ctrl.path));
}
-export function last(ctrl: KeyboardController): void {
- const toInit = !treePath.contains(ctrl.vm.path, ctrl.vm.initialPath);
- ctrl.userJump(toInit ? ctrl.vm.initialPath : treePath.fromNodeList(ctrl.vm.mainline));
+export function last(ctrl: PuzzleCtrl): void {
+ const toInit = !treePath.contains(ctrl.path, ctrl.initialPath);
+ ctrl.userJump(toInit ? ctrl.initialPath : treePath.fromNodeList(ctrl.mainline));
}
-export function first(ctrl: KeyboardController): void {
- const toInit = ctrl.vm.path !== ctrl.vm.initialPath && treePath.contains(ctrl.vm.path, ctrl.vm.initialPath);
- ctrl.userJump(toInit ? ctrl.vm.initialPath : treePath.root);
+export function first(ctrl: PuzzleCtrl): void {
+ const toInit = ctrl.path !== ctrl.initialPath && treePath.contains(ctrl.path, ctrl.initialPath);
+ ctrl.userJump(toInit ? ctrl.initialPath : treePath.root);
}
diff --git a/ui/puzzle/src/ctrl.ts b/ui/puzzle/src/ctrl.ts
index 32cd87f528f18..0c029d7a5b32a 100644
--- a/ui/puzzle/src/ctrl.ts
+++ b/ui/puzzle/src/ctrl.ts
@@ -6,7 +6,7 @@ import moveTest from './moveTest';
import PuzzleSession from './session';
import PuzzleStreak from './streak';
import throttle from 'common/throttle';
-import { Vm, Controller, PuzzleOpts, PuzzleData, MoveTest, ThemeKey, ReplayEnd } from './interfaces';
+import { PuzzleOpts, PuzzleData, MoveTest, ThemeKey, ReplayEnd, NvuiPlugin, PuzzleRound } from './interfaces';
import { Api as CgApi } from 'chessground/api';
import { build as treeBuild, ops as treeOps, path as treePath, TreeWrapper } from 'tree';
import { Chess, normalizeMove } from 'chessops/chess';
@@ -15,156 +15,204 @@ import { Config as CgConfig } from 'chessground/config';
import { CevalCtrl } from 'ceval';
import { makeVoiceMove, VoiceMove, RootCtrl as VoiceRoot } from 'voice';
import { ctrl as makeKeyboardMove, KeyboardMove, RootController as KeyboardRoot } from 'keyboardMove';
-import { defer } from 'common/defer';
-import { defined, prop, Prop, propWithEffect, toggle } from 'common';
+import { Deferred, defer } from 'common/defer';
+import { defined, prop, Prop, propWithEffect, Toggle, toggle } from 'common';
import { makeSanAndPlay } from 'chessops/san';
import { parseFen, makeFen } from 'chessops/fen';
import { parseSquare, parseUci, makeSquare, makeUci, opposite } from 'chessops/util';
import { pgnToTree, mergeSolution } from './moveTree';
import { PromotionCtrl } from 'chess/promotion';
import { Role, Move, Outcome } from 'chessops/types';
-import { storedBooleanProp } from 'common/storage';
+import { StoredProp, storedBooleanProp, storedBooleanPropWithEffect } from 'common/storage';
import { fromNodeList } from 'tree/dist/path';
import { last } from 'tree/dist/ops';
import { uciToMove } from 'chessground/util';
import { Redraw } from 'common/snabbdom';
+import { ParentCtrl } from 'ceval/src/types';
+
+export default class PuzzleCtrl implements ParentCtrl {
+ data: PuzzleData;
+ next: Deferred = defer();
+ trans: Trans;
+ tree: TreeWrapper;
+ ceval: CevalCtrl;
+ autoNext: StoredProp;
+ rated: StoredProp;
+ ground: Prop = prop(undefined) as Prop;
+ threatMode: Toggle = toggle(false);
+ streak?: PuzzleStreak;
+ streakFailStorage = lichess.storage.make('puzzle.streak.fail');
+ session: PuzzleSession;
+ menu: Toggle;
+ flipped = toggle(false);
+ keyboardMove?: KeyboardMove;
+ voiceMove?: VoiceMove;
+ promotion: PromotionCtrl;
+ keyboardHelp: Prop;
+ cgConfig?: CgConfig;
+ path: Tree.Path;
+ node: Tree.Node;
+ nodeList: Tree.Node[];
+ mainline: Tree.Node[];
+ initialPath: Tree.Path;
+ initialNode: Tree.Node;
+ pov: Color;
+ mode: 'play' | 'view' | 'try';
+ round?: PuzzleRound;
+ justPlayed?: Key;
+ resultSent: boolean;
+ lastFeedback: 'init' | 'fail' | 'win' | 'good' | 'retry';
+ canViewSolution = toggle(false);
+ autoScrollRequested: boolean;
+ autoScrollNow: boolean;
+ voteDisabled?: boolean;
+ isDaily: boolean;
+
+ constructor(
+ readonly opts: PuzzleOpts,
+ readonly redraw: Redraw,
+ readonly nvui?: NvuiPlugin,
+ ) {
+ this.trans = lichess.trans(opts.i18n);
+ this.rated = storedBooleanPropWithEffect('puzzle.rated', true, this.redraw);
+ this.autoNext = storedBooleanProp(
+ `puzzle.autoNext${opts.data.streak ? '.streak' : ''}`,
+ !!opts.data.streak,
+ );
+ this.streak = opts.data.streak ? new PuzzleStreak(opts.data) : undefined;
+ if (this.streak) {
+ opts.data = { ...opts.data, ...this.streak.data.current };
+ this.streakFailStorage.listen(_ => this.failStreak(this.streak!));
+ }
+ this.session = new PuzzleSession(opts.data.angle.key, opts.data.user?.id, !!opts.data.streak);
+ this.menu = toggle(false, redraw);
-export default function (opts: PuzzleOpts, redraw: Redraw): Controller {
- const vm: Vm = {
- next: defer(),
- } as Vm;
- let data: PuzzleData, tree: TreeWrapper, ceval: CevalCtrl;
- const hasStreak = !!opts.data.streak;
- const autoNext = storedBooleanProp(`puzzle.autoNext${hasStreak ? '.streak' : ''}`, hasStreak);
- const rated = storedBooleanProp('puzzle.rated', true);
- const ground = prop(undefined) as Prop;
- const threatMode = prop(false);
- const streak = opts.data.streak ? new PuzzleStreak(opts.data) : undefined;
- const streakFailStorage = lichess.storage.make('puzzle.streak.fail');
- if (streak) {
- opts.data = {
- ...opts.data,
- ...streak.data.current,
- };
- streakFailStorage.listen(_ => failStreak(streak));
- }
- const session = new PuzzleSession(opts.data.angle.key, opts.data.user?.id, hasStreak);
+ this.initiate(opts.data);
+ this.promotion = new PromotionCtrl(
+ this.withGround,
+ () => this.withGround(g => g.set(this.cgConfig!)),
+ redraw,
+ );
- const menu = toggle(false, redraw);
+ this.keyboardHelp = propWithEffect(location.hash === '#keyboard', this.redraw);
+ keyboard(this);
- // required by ceval
- vm.showComputer = () => vm.mode === 'view';
- vm.showAutoShapes = () => true;
+ // If the page loads while being hidden (like when changing settings),
+ // chessground is not displayed, and the first move is not fully applied.
+ // Make sure chessground is fully shown when the page goes back to being visible.
+ document.addEventListener('visibilitychange', () =>
+ lichess.requestIdleCallback(() => this.jump(this.path), 500),
+ );
+
+ lichess.pubsub.on('zen', () => {
+ const zen = $('body').toggleClass('zen').hasClass('zen');
+ window.dispatchEvent(new Event('resize'));
+ if (!$('body').hasClass('zen-auto')) xhr.setZen(zen);
+ });
+ $('body').addClass('playing'); // for zen
+ $('#zentog').on('click', () => lichess.pubsub.emit('zen'));
+ }
- const loadSound = (file: string, volume?: number) => {
+ private loadSound = (file: string, volume?: number) => {
lichess.sound.load(file, `${lichess.sound.baseUrl}/${file}`);
return () => lichess.sound.play(file, volume);
};
- const sound = {
- good: loadSound('lisp/PuzzleStormGood', 0.7),
- end: loadSound('lisp/PuzzleStormEnd', 1),
+ sound = {
+ good: this.loadSound('lisp/PuzzleStormGood', 0.7),
+ end: this.loadSound('lisp/PuzzleStormEnd', 1),
};
- let flipped = false;
-
- function setPath(path: Tree.Path): void {
- vm.path = path;
- vm.nodeList = tree.getNodeList(path);
- vm.node = treeOps.last(vm.nodeList)!;
- vm.mainline = treeOps.mainlineNodeList(tree.root);
- }
-
- let keyboardMove: KeyboardMove | undefined;
- let voiceMove: VoiceMove | undefined;
+ setPath = (path: Tree.Path): void => {
+ this.path = path;
+ this.nodeList = this.tree.getNodeList(path);
+ this.node = treeOps.last(this.nodeList)!;
+ this.mainline = treeOps.mainlineNodeList(this.tree.root);
+ };
- function setChessground(this: Controller, cg: CgApi): void {
- ground(cg);
+ setChessground = (cg: CgApi): void => {
+ this.ground(cg);
const makeRoot = () => ({
data: {
game: { variant: { key: 'standard' } },
- player: { color: vm.pov },
+ player: { color: this.pov },
},
chessground: cg,
- sendMove: playUserMove,
- auxMove: auxMove,
+ sendMove: this.playUserMove,
+ auxMove: this.auxMove,
redraw: this.redraw,
- flipNow: flip,
- userJumpPlyDelta,
- next: nextPuzzle,
- vote,
- solve: viewSolution,
+ flipNow: this.flip,
+ userJumpPlyDelta: this.userJumpPlyDelta,
+ next: this.nextPuzzle,
+ vote: this.vote,
+ solve: this.viewSolution,
});
- if (opts.pref.voiceMove)
- this.voiceMove = voiceMove = makeVoiceMove(makeRoot() as VoiceRoot, this.vm.node.fen);
- if (opts.pref.keyboardMove)
- this.keyboardMove = keyboardMove = makeKeyboardMove(makeRoot() as KeyboardRoot, {
- fen: this.vm.node.fen,
- });
+ if (this.opts.pref.voiceMove) this.voiceMove = makeVoiceMove(makeRoot() as VoiceRoot, this.node.fen);
+ if (this.opts.pref.keyboardMove)
+ this.keyboardMove = makeKeyboardMove(makeRoot() as KeyboardRoot, { fen: this.node.fen });
requestAnimationFrame(() => this.redraw());
- }
+ };
+
+ pref = this.opts.pref;
- function withGround(f: (cg: CgApi) => A): A | undefined {
- const g = ground();
+ withGround = (f: (cg: CgApi) => A): A | undefined => {
+ const g = this.ground();
return g && f(g);
- }
+ };
- function initiate(fromData: PuzzleData): void {
- data = fromData;
- tree = treeBuild(pgnToTree(data.game.pgn.split(' ')));
- const initialPath = treePath.fromNodeList(treeOps.mainlineNodeList(tree.root));
- vm.mode = 'play';
- vm.next = defer();
- vm.round = undefined;
- vm.justPlayed = undefined;
- vm.resultSent = false;
- vm.lastFeedback = 'init';
- vm.initialPath = initialPath;
- vm.initialNode = tree.nodeAtPath(initialPath);
- vm.pov = vm.initialNode.ply % 2 == 1 ? 'black' : 'white';
- vm.isDaily = location.href.endsWith('/daily');
-
- setPath(lichess.blindMode ? initialPath : treePath.init(initialPath));
+ initiate = (fromData: PuzzleData): void => {
+ this.data = fromData;
+ this.tree = treeBuild(pgnToTree(this.data.game.pgn.split(' ')));
+ const initialPath = treePath.fromNodeList(treeOps.mainlineNodeList(this.tree.root));
+ this.mode = 'play';
+ this.next = defer();
+ this.round = undefined;
+ this.justPlayed = undefined;
+ this.resultSent = false;
+ this.lastFeedback = 'init';
+ this.initialPath = initialPath;
+ this.initialNode = this.tree.nodeAtPath(initialPath);
+ this.pov = this.initialNode.ply % 2 == 1 ? 'black' : 'white';
+ this.isDaily = location.href.endsWith('/daily');
+
+ this.setPath(lichess.blindMode ? initialPath : treePath.init(initialPath));
setTimeout(
() => {
- jump(initialPath);
- redraw();
+ this.jump(initialPath);
+ this.redraw();
},
- opts.pref.animation.duration > 0 ? 500 : 0,
+ this.opts.pref.animation.duration > 0 ? 500 : 0,
);
// just to delay button display
- vm.canViewSolution = false;
- if (!vm.canViewSolution) {
- setTimeout(
- () => {
- vm.canViewSolution = true;
- redraw();
- },
- rated() ? 4000 : 1000,
- );
- }
+ setTimeout(
+ () => {
+ this.canViewSolution(true);
+ this.redraw();
+ },
+ this.rated() ? 4000 : 1000,
+ );
- withGround(g => {
+ this.withGround(g => {
g.selectSquare(null);
g.setAutoShapes([]);
g.setShapes([]);
- showGround(g);
+ this.showGround(g);
});
- instanciateCeval();
- }
+ this.instanciateCeval();
+ };
- function position(): Chess {
- const setup = parseFen(vm.node.fen).unwrap();
+ position = (): Chess => {
+ const setup = parseFen(this.node.fen).unwrap();
return Chess.fromSetup(setup).unwrap();
- }
+ };
- function makeCgOpts(): CgConfig {
- const node = vm.node;
+ makeCgOpts = (): CgConfig => {
+ const node = this.node;
const color: Color = node.ply % 2 === 0 ? 'white' : 'black';
- const dests = chessgroundDests(position());
- const nextNode = vm.node.children[0];
- const canMove = vm.mode === 'view' || (color === vm.pov && (!nextNode || nextNode.puzzle == 'fail'));
+ const dests = chessgroundDests(this.position());
+ const nextNode = this.node.children[0];
+ const canMove = this.mode === 'view' || (color === this.pov && (!nextNode || nextNode.puzzle == 'fail'));
const movable = canMove
? {
color: dests.size > 0 ? color : undefined,
@@ -176,7 +224,7 @@ export default function (opts: PuzzleOpts, redraw: Redraw): Controller {
};
const config = {
fen: node.fen,
- orientation: flipped ? opposite(vm.pov) : vm.pov,
+ orientation: this.flipped() ? opposite(this.pov) : this.pov,
turnColor: color,
movable: movable,
premovable: {
@@ -185,63 +233,56 @@ export default function (opts: PuzzleOpts, redraw: Redraw): Controller {
check: !!node.check,
lastMove: uciToMove(node.uci),
};
- if (node.ply >= vm.initialNode.ply) {
- if (vm.mode !== 'view' && color !== vm.pov && !nextNode) {
- config.movable.color = vm.pov;
+ if (node.ply >= this.initialNode.ply) {
+ if (this.mode !== 'view' && color !== this.pov && !nextNode) {
+ config.movable.color = this.pov;
config.premovable.enabled = true;
}
}
- vm.cgConfig = config;
+ this.cgConfig = config;
return config;
- }
+ };
- function showGround(g: CgApi): void {
- g.set(makeCgOpts());
- }
+ showGround = (g: CgApi): void => g.set(this.makeCgOpts());
- function auxMove(orig: Key, dest: Key, role?: Role) {
- if (role) playUserMove(orig, dest, role);
+ auxMove = (orig: Key, dest: Key, role?: Role) => {
+ if (role) this.playUserMove(orig, dest, role);
else
- withGround(g => {
+ this.withGround(g => {
g.move(orig, dest);
g.state.movable.dests = undefined;
g.state.turnColor = opposite(g.state.turnColor);
});
- }
+ };
- function userMove(orig: Key, dest: Key): void {
- vm.justPlayed = orig;
- if (!promotion.start(orig, dest, { submit: playUserMove, show: voiceMove?.promotionHook() }))
- playUserMove(orig, dest);
- voiceMove?.update(vm.node.fen, true);
- keyboardMove?.update({ fen: vm.node.fen });
- }
+ userMove = (orig: Key, dest: Key): void => {
+ this.justPlayed = orig;
+ if (
+ !this.promotion.start(orig, dest, { submit: this.playUserMove, show: this.voiceMove?.promotionHook() })
+ )
+ this.playUserMove(orig, dest);
+ this.voiceMove?.update(this.node.fen, true);
+ this.keyboardMove?.update({ fen: this.node.fen });
+ };
- function playUci(uci: Uci): void {
- sendMove(parseUci(uci)!);
- }
+ playUci = (uci: Uci): void => this.sendMove(parseUci(uci)!);
- function playUciList(uciList: Uci[]): void {
- uciList.forEach(playUci);
- }
+ playUciList = (uciList: Uci[]): void => uciList.forEach(this.playUci);
- function playUserMove(orig: Key, dest: Key, promotion?: Role): void {
- sendMove({
+ playUserMove = (orig: Key, dest: Key, promotion?: Role): void =>
+ this.sendMove({
from: parseSquare(orig)!,
to: parseSquare(dest)!,
promotion,
});
- }
- function sendMove(move: Move): void {
- sendMoveAt(vm.path, position(), move);
- }
+ sendMove = (move: Move): void => this.sendMoveAt(this.path, this.position(), move);
- function sendMoveAt(path: Tree.Path, pos: Chess, move: Move): void {
+ sendMoveAt = (path: Tree.Path, pos: Chess, move: Move): void => {
move = normalizeMove(pos, move);
const san = makeSanAndPlay(pos, move);
const check = pos.isCheck() ? pos.board.kingOf(pos.turn) : undefined;
- addNode(
+ this.addNode(
{
ply: 2 * (pos.fullmoves - 1) + (pos.turn == 'white' ? 0 : 1),
fen: makeFen(pos.toSetup()),
@@ -253,149 +294,149 @@ export default function (opts: PuzzleOpts, redraw: Redraw): Controller {
},
path,
);
- }
+ };
- function addNode(node: Tree.Node, path: Tree.Path): void {
- const newPath = tree.addNode(node, path)!;
- jump(newPath);
- withGround(g => g.playPremove());
+ addNode = (node: Tree.Node, path: Tree.Path): void => {
+ const newPath = this.tree.addNode(node, path)!;
+ this.jump(newPath);
+ this.withGround(g => g.playPremove());
- const progress = moveTest(vm, data.puzzle);
+ const progress = moveTest(this);
if (progress === 'fail') lichess.sound.say('incorrect');
- if (progress) applyProgress(progress);
- reorderChildren(path);
- redraw();
- }
+ if (progress) this.applyProgress(progress);
+ this.reorderChildren(path);
+ this.redraw();
+ };
- function reorderChildren(path: Tree.Path, recursive?: boolean): void {
- const node = tree.nodeAtPath(path);
+ reorderChildren = (path: Tree.Path, recursive?: boolean): void => {
+ const node = this.tree.nodeAtPath(path);
node.children.sort((c1, _) => {
const p = c1.puzzle;
if (p == 'fail') return 1;
if (p == 'good' || p == 'win') return -1;
return 0;
});
- if (recursive) node.children.forEach(child => reorderChildren(path + child.id, true));
- }
+ if (recursive) node.children.forEach(child => this.reorderChildren(path + child.id, true));
+ };
- function instantRevertUserMove(): void {
- withGround(g => {
+ private instantRevertUserMove = (): void => {
+ this.withGround(g => {
g.cancelPremove();
g.selectSquare(null);
});
- jump(treePath.init(vm.path));
- redraw();
- }
+ this.jump(treePath.init(this.path));
+ this.redraw();
+ };
- function revertUserMove(): void {
- if (lichess.blindMode) instantRevertUserMove();
- else setTimeout(instantRevertUserMove, 100);
- }
+ revertUserMove = (): void => {
+ if (lichess.blindMode) this.instantRevertUserMove();
+ else setTimeout(this.instantRevertUserMove, 100);
+ };
- function applyProgress(progress: undefined | 'fail' | 'win' | MoveTest): void {
+ applyProgress = (progress: undefined | 'fail' | 'win' | MoveTest): void => {
if (progress === 'fail') {
- vm.lastFeedback = 'fail';
- revertUserMove();
- if (vm.mode === 'play') {
- if (streak) {
- failStreak(streak);
- streakFailStorage.fire();
+ this.lastFeedback = 'fail';
+ this.revertUserMove();
+ if (this.mode === 'play') {
+ if (this.streak) {
+ this.failStreak(this.streak);
+ this.streakFailStorage.fire();
} else {
- vm.canViewSolution = true;
- vm.mode = 'try';
- sendResult(false);
+ this.canViewSolution(true);
+ this.mode = 'try';
+ this.sendResult(false);
}
}
} else if (progress == 'win') {
- if (streak) sound.good();
- vm.lastFeedback = 'win';
- if (vm.mode != 'view') {
- const sent = vm.mode == 'play' ? sendResult(true) : Promise.resolve();
- vm.mode = 'view';
- withGround(showGround);
- sent.then(_ => (autoNext() ? nextPuzzle() : startCeval()));
+ if (this.streak) this.sound.good();
+ this.lastFeedback = 'win';
+ if (this.mode != 'view') {
+ const sent = this.mode == 'play' ? this.sendResult(true) : Promise.resolve();
+ this.mode = 'view';
+ this.withGround(this.showGround);
+ sent.then(_ => (this.autoNext() ? this.nextPuzzle() : this.startCeval()));
}
} else if (progress) {
- vm.lastFeedback = 'good';
+ this.lastFeedback = 'good';
setTimeout(
() => {
const pos = Chess.fromSetup(parseFen(progress.fen).unwrap()).unwrap();
- sendMoveAt(progress.path, pos, progress.move);
+ this.sendMoveAt(progress.path, pos, progress.move);
},
- opts.pref.animation.duration * (autoNext() ? 1 : 1.5),
+ this.opts.pref.animation.duration * (this.autoNext() ? 1 : 1.5),
);
}
- }
+ };
- function failStreak(streak: PuzzleStreak): void {
- vm.mode = 'view';
+ failStreak = (streak: PuzzleStreak): void => {
+ this.mode = 'view';
streak.onComplete(false);
- setTimeout(viewSolution, 500);
- sound.end();
- }
+ setTimeout(this.viewSolution, 500);
+ this.sound.end();
+ };
- async function sendResult(win: boolean): Promise {
- if (vm.resultSent) return Promise.resolve();
- vm.resultSent = true;
- session.complete(data.puzzle.id, win);
+ sendResult = async (win: boolean): Promise => {
+ if (this.resultSent) return Promise.resolve();
+ this.resultSent = true;
+ this.session.complete(this.data.puzzle.id, win);
const res = await xhr.complete(
- data.puzzle.id,
- data.angle.key,
+ this.data.puzzle.id,
+ this.data.angle.key,
win,
- rated,
- data.replay,
- streak,
- opts.settings.color,
+ this.rated,
+ this.data.replay,
+ this.streak,
+ this.opts.settings.color,
);
const next = res.next;
- if (next?.user && data.user) {
- data.user.rating = next.user.rating;
- data.user.provisional = next.user.provisional;
- vm.round = res.round;
- if (res.round?.ratingDiff) session.setRatingDiff(data.puzzle.id, res.round.ratingDiff);
+ if (next?.user && this.data.user) {
+ this.data.user.rating = next.user.rating;
+ this.data.user.provisional = next.user.provisional;
+ this.round = res.round;
+ if (res.round?.ratingDiff) this.session.setRatingDiff(this.data.puzzle.id, res.round.ratingDiff);
}
if (win) lichess.sound.say('Success!');
if (next) {
- vm.next.resolve(data.replay && res.replayComplete ? data.replay : next);
- if (streak && win) streak.onComplete(true, res.next);
+ this.next.resolve(this.data.replay && res.replayComplete ? this.data.replay : next);
+ if (this.streak && win) this.streak.onComplete(true, res.next);
}
- redraw();
+ this.redraw();
if (!next) {
- if (!data.replay) {
+ if (!this.data.replay) {
alert('No more puzzles available! Try another theme.');
lichess.redirect('/training/themes');
}
}
- }
+ };
- const isPuzzleData = (d: PuzzleData | ReplayEnd): d is PuzzleData => 'puzzle' in d;
+ private isPuzzleData = (d: PuzzleData | ReplayEnd): d is PuzzleData => 'puzzle' in d;
- function nextPuzzle(): void {
- if (streak && vm.lastFeedback != 'win') return;
- if (vm.mode !== 'view') return;
+ nextPuzzle = (): void => {
+ if (this.streak && this.lastFeedback != 'win') return;
+ if (this.mode !== 'view') return;
- ceval.stop();
- vm.next.promise.then(n => {
- if (isPuzzleData(n)) {
- initiate(n);
- redraw();
+ this.ceval.stop();
+ this.next.promise.then(n => {
+ if (this.isPuzzleData(n)) {
+ this.initiate(n);
+ this.redraw();
}
});
- if (data.replay && vm.round === undefined) {
- lichess.redirect(`/training/dashboard/${data.replay.days}`);
+ if (this.data.replay && this.round === undefined) {
+ lichess.redirect(`/training/dashboard/${this.data.replay.days}`);
}
- if (!streak && !data.replay) {
- const path = router.withLang(`/training/${data.angle.key}`);
+ if (!this.streak && !this.data.replay) {
+ const path = router.withLang(`/training/${this.data.angle.key}`);
if (location.pathname != path) history.replaceState(null, '', path);
}
- }
+ };
- function instanciateCeval(): void {
- if (ceval) ceval.destroy();
- ceval = new CevalCtrl({
- redraw,
+ instanciateCeval = (): void => {
+ this.ceval?.destroy();
+ this.ceval = new CevalCtrl({
+ redraw: this.redraw,
variant: {
short: 'Std',
name: 'Standard',
@@ -403,285 +444,184 @@ export default function (opts: PuzzleOpts, redraw: Redraw): Controller {
},
initialFen: undefined, // always standard starting position
possible: true,
- emit: function (ev, work) {
- tree.updateAt(work.path, function (node) {
+ emit: (ev, work) => {
+ this.tree.updateAt(work.path, node => {
if (work.threatMode) {
const threat = ev as Tree.LocalEval;
if (!node.threat || node.threat.depth <= threat.depth) node.threat = threat;
} else if (!node.ceval || node.ceval.depth <= ev.depth) node.ceval = ev;
- if (work.path === vm.path) {
- setAutoShapes();
- redraw();
+ if (work.path === this.path) {
+ this.setAutoShapes();
+ this.redraw();
}
});
},
- setAutoShapes: setAutoShapes,
+ setAutoShapes: this.setAutoShapes,
});
- }
+ };
- function setAutoShapes(): void {
- withGround(g => {
+ setAutoShapes = (): void =>
+ this.withGround(g =>
g.setAutoShapes(
computeAutoShapes({
- vm: vm,
- ceval: ceval,
+ ...this,
ground: g,
- threatMode: threatMode(),
- nextNodeBest: nextNodeBest(),
+ node: this.node,
}),
- );
- });
- }
+ ),
+ );
- function canUseCeval(): boolean {
- return vm.mode === 'view' && !outcome();
- }
+ canUseCeval = (): boolean => this.mode === 'view' && !this.outcome();
- function startCeval(): void {
- if (ceval.enabled() && canUseCeval()) doStartCeval();
- }
-
- const doStartCeval = throttle(800, function () {
- ceval.start(vm.path, vm.nodeList, threatMode());
- });
+ startCeval = (): void => {
+ if (this.ceval.enabled() && this.canUseCeval()) this.doStartCeval();
+ };
- const nextNodeBest = () => treeOps.withMainlineChild(vm.node, n => n.eval?.best);
+ private doStartCeval = throttle(800, () => this.ceval.start(this.path, this.nodeList, this.threatMode()));
- const getCeval = () => ceval;
+ nextNodeBest = () => treeOps.withMainlineChild(this.node, n => n.eval?.best);
- function toggleCeval(): void {
- ceval.toggle();
- setAutoShapes();
- startCeval();
- if (!ceval.enabled()) threatMode(false);
- vm.autoScrollRequested = true;
- redraw();
- }
+ toggleCeval = (): void => {
+ this.ceval.toggle();
+ this.setAutoShapes();
+ this.startCeval();
+ if (!this.ceval.enabled()) this.threatMode(false);
+ this.autoScrollRequested = true;
+ this.redraw();
+ };
- function restartCeval(): void {
- ceval.stop();
- startCeval();
- redraw();
- }
+ restartCeval = (): void => {
+ this.ceval.stop();
+ this.startCeval();
+ this.redraw();
+ };
- function toggleThreatMode(): void {
- if (vm.node.check) return;
- if (!ceval.enabled()) ceval.toggle();
- if (!ceval.enabled()) return;
- threatMode(!threatMode());
- setAutoShapes();
- startCeval();
- redraw();
- }
+ toggleThreatMode = (): void => {
+ if (this.node.check) return;
+ if (!this.ceval.enabled()) this.ceval.toggle();
+ if (!this.ceval.enabled()) return;
+ this.threatMode.toggle();
+ this.setAutoShapes();
+ this.startCeval();
+ this.redraw();
+ };
- function outcome(): Outcome | undefined {
- return position().outcome();
- }
+ outcome = (): Outcome | undefined => this.position().outcome();
- function jump(path: Tree.Path): void {
- const pathChanged = path !== vm.path,
- isForwardStep = pathChanged && path.length === vm.path.length + 2;
- setPath(path);
- withGround(showGround);
+ jump = (path: Tree.Path): void => {
+ const pathChanged = path !== this.path,
+ isForwardStep = pathChanged && path.length === this.path.length + 2;
+ this.setPath(path);
+ this.withGround(this.showGround);
if (pathChanged) {
if (isForwardStep) {
- lichess.sound.saySan(vm.node.san);
- lichess.sound.move(vm.node);
+ lichess.sound.saySan(this.node.san);
+ lichess.sound.move(this.node);
}
- threatMode(false);
- ceval.stop();
- startCeval();
+ this.threatMode(false);
+ this.ceval.stop();
+ this.startCeval();
}
- promotion.cancel();
- vm.justPlayed = undefined;
- vm.autoScrollRequested = true;
- keyboardMove?.update({ fen: vm.node.fen });
- voiceMove?.update(vm.node.fen, true);
- lichess.pubsub.emit('ply', vm.node.ply);
- }
+ this.promotion.cancel();
+ this.justPlayed = undefined;
+ this.autoScrollRequested = true;
+ this.keyboardMove?.update({ fen: this.node.fen });
+ this.voiceMove?.update(this.node.fen, true);
+ lichess.pubsub.emit('ply', this.node.ply);
+ };
- function userJump(path: Tree.Path): void {
- if (tree.nodeAtPath(path)?.puzzle == 'fail' && vm.mode != 'view') return;
- withGround(g => g.selectSquare(null));
- jump(path);
- }
+ userJump = (path: Tree.Path): void => {
+ if (this.tree.nodeAtPath(path)?.puzzle == 'fail' && this.mode != 'view') return;
+ this.withGround(g => g.selectSquare(null));
+ this.jump(path);
+ };
- function userJumpPlyDelta(plyDelta: Ply) {
+ userJumpPlyDelta = (plyDelta: Ply) => {
// ensure we are jumping to a valid ply
- let maxValidPly = vm.mainline.length - 1;
- if (last(vm.mainline)?.puzzle == 'fail' && vm.mode != 'view') maxValidPly -= 1;
- const newPly = Math.min(Math.max(vm.node.ply + plyDelta, 0), maxValidPly);
- userJump(fromNodeList(vm.mainline.slice(0, newPly + 1)));
- }
+ let maxValidPly = this.mainline.length - 1;
+ if (last(this.mainline)?.puzzle == 'fail' && this.mode != 'view') maxValidPly -= 1;
+ const newPly = Math.min(Math.max(this.node.ply + plyDelta, 0), maxValidPly);
+ this.userJump(fromNodeList(this.mainline.slice(0, newPly + 1)));
+ };
- function viewSolution(): void {
- sendResult(false);
- vm.mode = 'view';
- mergeSolution(tree, vm.initialPath, data.puzzle.solution, vm.pov);
- reorderChildren(vm.initialPath, true);
+ viewSolution = (): void => {
+ this.sendResult(false);
+ this.mode = 'view';
+ mergeSolution(this.tree, this.initialPath, this.data.puzzle.solution, this.pov);
+ this.reorderChildren(this.initialPath, true);
// try to play the solution next move
- const next = vm.node.children[0];
- if (next && next.puzzle === 'good') userJump(vm.path + next.id);
+ const next = this.node.children[0];
+ if (next && next.puzzle === 'good') this.userJump(this.path + next.id);
else {
- const firstGoodPath = treeOps.takePathWhile(vm.mainline, node => node.puzzle != 'good');
- if (firstGoodPath) userJump(firstGoodPath + tree.nodeAtPath(firstGoodPath).children[0].id);
+ const firstGoodPath = treeOps.takePathWhile(this.mainline, node => node.puzzle != 'good');
+ if (firstGoodPath) this.userJump(firstGoodPath + this.tree.nodeAtPath(firstGoodPath).children[0].id);
}
- vm.autoScrollRequested = true;
- vm.voteDisabled = true;
- redraw();
- startCeval();
+ this.autoScrollRequested = true;
+ this.voteDisabled = true;
+ this.redraw();
+ this.startCeval();
setTimeout(() => {
- vm.voteDisabled = false;
- redraw();
+ this.voteDisabled = false;
+ this.redraw();
}, 500);
- }
+ };
- const skip = () => {
- if (!streak || !streak.data.skip || vm.mode != 'play') return;
- streak.skip();
- userJump(treePath.fromNodeList(vm.mainline));
- const moveIndex = treePath.size(vm.path) - treePath.size(vm.initialPath);
- const solution = data.puzzle.solution[moveIndex];
- playUci(solution);
- playBestMove();
+ skip = () => {
+ if (!this.streak || !this.streak.data.skip || this.mode != 'play') return;
+ this.streak.skip();
+ this.userJump(treePath.fromNodeList(this.mainline));
+ const moveIndex = treePath.size(this.path) - treePath.size(this.initialPath);
+ const solution = this.data.puzzle.solution[moveIndex];
+ this.playUci(solution);
+ this.playBestMove();
};
- const flip = () => {
- flipped = !flipped;
- withGround(g => g.toggleOrientation());
- redraw();
+ flip = () => {
+ this.flipped.toggle();
+ this.withGround(g => g.toggleOrientation());
+ this.redraw();
};
- const vote = (v: boolean) => {
- if (!vm.voteDisabled) {
- xhr.vote(data.puzzle.id, v);
- nextPuzzle();
+ vote = (v: boolean) => {
+ if (!this.voteDisabled) {
+ xhr.vote(this.data.puzzle.id, v);
+ this.nextPuzzle();
}
};
- const voteTheme = (theme: ThemeKey, v: boolean) => {
- if (vm.round) {
- vm.round.themes = vm.round.themes || {};
- if (v === vm.round.themes[theme]) {
- delete vm.round.themes[theme];
- xhr.voteTheme(data.puzzle.id, theme, undefined);
+ voteTheme = (theme: ThemeKey, v: boolean) => {
+ if (this.round) {
+ this.round.themes = this.round.themes || {};
+ if (v === this.round.themes[theme]) {
+ delete this.round.themes[theme];
+ xhr.voteTheme(this.data.puzzle.id, theme, undefined);
} else {
- if (v || data.puzzle.themes.includes(theme)) vm.round.themes[theme] = v;
- else delete vm.round.themes[theme];
- xhr.voteTheme(data.puzzle.id, theme, v);
+ if (v || this.data.puzzle.themes.includes(theme)) this.round.themes[theme] = v;
+ else delete this.round.themes[theme];
+ xhr.voteTheme(this.data.puzzle.id, theme, v);
}
- redraw();
+ this.redraw();
}
};
- initiate(opts.data);
-
- const promotion = new PromotionCtrl(withGround, () => withGround(g => g.set(vm.cgConfig)), redraw);
-
- function playBestMove(): void {
- const uci = nextNodeBest() || (vm.node.ceval && vm.node.ceval.pvs[0].moves[0]);
- if (uci) playUci(uci);
- }
-
- const keyboardHelp = propWithEffect(location.hash === '#keyboard', redraw);
- keyboard({
- vm,
- userJump,
- getCeval,
- toggleCeval,
- toggleThreatMode,
- redraw,
- playBestMove,
- flip,
- flipped: () => flipped,
- nextPuzzle,
- keyboardHelp,
- });
-
- // If the page loads while being hidden (like when changing settings),
- // chessground is not displayed, and the first move is not fully applied.
- // Make sure chessground is fully shown when the page goes back to being visible.
- document.addEventListener('visibilitychange', () => lichess.requestIdleCallback(() => jump(vm.path), 500));
-
- lichess.pubsub.on('zen', () => {
- const zen = $('body').toggleClass('zen').hasClass('zen');
- window.dispatchEvent(new Event('resize'));
- if (!$('body').hasClass('zen-auto')) {
- xhr.setZen(zen);
- }
- });
- $('body').addClass('playing'); // for zen
- $('#zentog').on('click', () => lichess.pubsub.emit('zen'));
-
- return {
- vm,
- getData() {
- return data;
- },
- getTree() {
- return tree;
- },
- setChessground,
- ground,
- makeCgOpts,
- voiceMove,
- keyboardMove,
- keyboardHelp,
- userJump,
- viewSolution,
- nextPuzzle,
- vote,
- voteTheme,
- getCeval,
- pref: opts.pref,
- settings: opts.settings,
- trans: lichess.trans(opts.i18n),
- autoNext,
- autoNexting: () => vm.lastFeedback == 'win' && autoNext(),
- rated,
- toggleRated: () => {
- rated(!rated());
- redraw();
- },
- outcome,
- toggleCeval,
- toggleThreatMode,
- threatMode,
- currentEvals() {
- return { client: vm.node.ceval };
- },
- nextNodeBest,
- userMove,
- playUci,
- playUciList,
- showEvalGauge() {
- return vm.showComputer() && ceval.enabled() && !outcome();
- },
- getOrientation() {
- return withGround(g => g.state.orientation)!;
- },
- getNode() {
- return vm.node;
- },
- showComputer: vm.showComputer,
- promotion,
- redraw,
- ongoing: false,
- playBestMove,
- session,
- allThemes: opts.themes && {
- dynamic: opts.themes.dynamic.split(' '),
- static: new Set(opts.themes.static.split(' ')),
- },
- streak,
- skip,
- flip,
- flipped: () => flipped,
- showRatings: opts.showRatings,
- menu,
- restartCeval: restartCeval,
- clearCeval: restartCeval,
+ playBestMove = (): void => {
+ const uci = this.nextNodeBest() || (this.node.ceval && this.node.ceval.pvs[0].moves[0]);
+ if (uci) this.playUci(uci);
+ };
+ autoNexting = () => this.lastFeedback == 'win' && this.autoNext();
+ currentEvals = () => ({ client: this.node.ceval });
+ showEvalGauge = () => this.showComputer() && this.ceval.enabled() && !this.outcome();
+ getOrientation = () => this.withGround(g => g.state.orientation)!;
+ allThemes = this.opts.themes && {
+ dynamic: this.opts.themes.dynamic.split(' '),
+ static: new Set(this.opts.themes.static.split(' ')),
};
+ toggleRated = () => this.rated(!this.rated());
+ // implement cetal ParentCtrl:
+ getCeval = () => this.ceval;
+ ongoing = false;
+ getNode = () => this.node;
+ showComputer = () => this.mode === 'view';
}
diff --git a/ui/puzzle/src/interfaces.ts b/ui/puzzle/src/interfaces.ts
index 325e43912e555..44d709e5a3656 100644
--- a/ui/puzzle/src/interfaces.ts
+++ b/ui/puzzle/src/interfaces.ts
@@ -1,123 +1,23 @@
-import PuzzleSession from './session';
-import { Api as CgApi } from 'chessground/api';
-import { CevalCtrl, NodeEvals } from 'ceval';
-import { Config as CgConfig } from 'chessground/config';
-import { Deferred } from 'common/defer';
-import { Outcome, Move } from 'chessops/types';
-import { Prop, Toggle } from 'common';
-import { StoredProp } from 'common/storage';
-import { TreeWrapper } from 'tree';
+import { Move } from 'chessops/types';
import { VNode } from 'snabbdom';
-import PuzzleStreak from './streak';
-import { PromotionCtrl } from 'chess/promotion';
-import { KeyboardMove } from 'keyboardMove';
-import { VoiceMove } from 'voice';
import * as Prefs from 'common/prefs';
import perfIcons from 'common/perfIcons';
-import { Redraw } from 'common/snabbdom';
+import PuzzleCtrl from './ctrl';
export type PuzzleId = string;
-export interface KeyboardController {
- vm: Vm;
- redraw: Redraw;
- userJump(path: Tree.Path): void;
- getCeval(): CevalCtrl;
- toggleCeval(): void;
- toggleThreatMode(): void;
- playBestMove(): void;
- flip(): void;
- flipped(): boolean;
- nextPuzzle(): void;
- keyboardHelp: Prop;
-}
-
export type ThemeKey = string;
export interface AllThemes {
dynamic: ThemeKey[];
static: Set;
}
-export interface Controller extends KeyboardController {
- nextNodeBest(): string | undefined;
- disableThreatMode?: Prop;
- outcome(): Outcome | undefined;
- mandatoryCeval?: Prop;
- showEvalGauge: Prop;
- currentEvals(): NodeEvals;
- ongoing: boolean;
- playUci(uci: string): void;
- playUciList(uciList: string[]): void;
- getOrientation(): Color;
- threatMode: Prop;
- getNode(): Tree.Node;
- showComputer(): boolean;
- trans: Trans;
- getData(): PuzzleData;
- getTree(): TreeWrapper;
- ground: Prop;
- setChessground(cg: CgApi): void;
- makeCgOpts(): CgConfig;
- viewSolution(): void;
- nextPuzzle(): void;
- vote(v: boolean): void;
- voteTheme(theme: ThemeKey, v: boolean): void;
- pref: PuzzlePrefs;
- settings: PuzzleSettings;
- userMove(orig: Key, dest: Key): void;
- promotion: PromotionCtrl;
- autoNext: StoredProp;
- autoNexting: () => boolean;
- rated: StoredProp;
- toggleRated: () => void;
- session: PuzzleSession;
- allThemes?: AllThemes;
- showRatings: boolean;
- keyboardMove?: KeyboardMove;
- voiceMove?: VoiceMove;
-
- streak?: PuzzleStreak;
- skip(): void;
-
- path?: Tree.Path;
- autoScrollRequested?: boolean;
-
- nvui?: NvuiPlugin;
- menu: Toggle;
- restartCeval(): void;
- clearCeval(): void;
-}
-
export interface NvuiPlugin {
- render(ctrl: Controller): VNode;
+ render(ctrl: PuzzleCtrl): VNode;
}
export type ReplayEnd = PuzzleReplay;
-export interface Vm {
- path: Tree.Path;
- nodeList: Tree.Node[];
- node: Tree.Node;
- mainline: Tree.Node[];
- pov: Color;
- mode: 'play' | 'view' | 'try';
- round?: PuzzleRound;
- next: Deferred;
- justPlayed?: Key;
- resultSent: boolean;
- lastFeedback: 'init' | 'fail' | 'win' | 'good' | 'retry';
- initialPath: Tree.Path;
- initialNode: Tree.Node;
- canViewSolution: boolean;
- autoScrollRequested: boolean;
- autoScrollNow: boolean;
- voteDisabled?: boolean;
- cgConfig: CgConfig;
- showComputer(): boolean;
- showAutoShapes(): boolean;
- isDaily: boolean;
-}
-
export type PuzzleDifficulty = 'easiest' | 'easier' | 'normal' | 'harder' | 'hardest';
export interface PuzzleSettings {
diff --git a/ui/puzzle/src/keyboard.ts b/ui/puzzle/src/keyboard.ts
index 59ec666fd01da..6c9b8187e9274 100644
--- a/ui/puzzle/src/keyboard.ts
+++ b/ui/puzzle/src/keyboard.ts
@@ -1,8 +1,8 @@
import * as control from './control';
-import { Controller, KeyboardController } from './interfaces';
+import PuzzleCtrl from './ctrl';
import { snabDialog } from 'common/dialog';
-export default (ctrl: KeyboardController) =>
+export default (ctrl: PuzzleCtrl) =>
lichess.mousetrap
.bind(['left', 'k'], () => {
control.prev(ctrl);
@@ -23,8 +23,8 @@ export default (ctrl: KeyboardController) =>
.bind('l', ctrl.toggleCeval)
.bind('x', ctrl.toggleThreatMode)
.bind('space', () => {
- if (ctrl.vm.mode === 'view') {
- if (ctrl.getCeval().enabled()) ctrl.playBestMove();
+ if (ctrl.mode === 'view') {
+ if (ctrl.ceval.enabled()) ctrl.playBestMove();
else ctrl.toggleCeval();
}
})
@@ -33,7 +33,7 @@ export default (ctrl: KeyboardController) =>
.bind('f', ctrl.flip)
.bind('n', ctrl.nextPuzzle);
-export const view = (ctrl: Controller) =>
+export const view = (ctrl: PuzzleCtrl) =>
snabDialog({
class: 'help',
htmlUrl: '/training/help',
diff --git a/ui/puzzle/src/main.ts b/ui/puzzle/src/main.ts
index 11691331e8a7b..f439c2d7cdecd 100644
--- a/ui/puzzle/src/main.ts
+++ b/ui/puzzle/src/main.ts
@@ -1,5 +1,5 @@
import { attributesModule, classModule, init } from 'snabbdom';
-import makeCtrl from './ctrl';
+import PuzzleCtrl from './ctrl';
import menuHover from 'common/menuHover';
import view from './view/main';
import { PuzzleOpts, NvuiPlugin } from './interfaces';
@@ -8,8 +8,8 @@ const patch = init([classModule, attributesModule]);
export async function initModule(opts: PuzzleOpts) {
const element = document.querySelector('main.puzzle') as HTMLElement;
- const ctrl = makeCtrl(opts, redraw);
- ctrl.nvui = lichess.blindMode ? await lichess.asset.loadEsm('puzzle.nvui') : undefined;
+ const nvui = lichess.blindMode ? await lichess.asset.loadEsm('puzzle.nvui') : undefined;
+ const ctrl = new PuzzleCtrl(opts, redraw, nvui);
const blueprint = view(ctrl);
element.innerHTML = '';
diff --git a/ui/puzzle/src/moveTest.ts b/ui/puzzle/src/moveTest.ts
index 0dee8f4ad1888..282a509832b7d 100644
--- a/ui/puzzle/src/moveTest.ts
+++ b/ui/puzzle/src/moveTest.ts
@@ -1,7 +1,8 @@
import { altCastles } from 'chess';
import { parseUci } from 'chessops/util';
import { path as pathOps } from 'tree';
-import { Vm, Puzzle, MoveTest } from './interfaces';
+import { MoveTest } from './interfaces';
+import PuzzleCtrl from './ctrl';
type MoveTestReturn = undefined | 'fail' | 'win' | MoveTest;
@@ -11,36 +12,36 @@ function isAltCastle(str: string): str is AltCastle {
return str in altCastles;
}
-export default function moveTest(vm: Vm, puzzle: Puzzle): MoveTestReturn {
- if (vm.mode === 'view') return;
- if (!pathOps.contains(vm.path, vm.initialPath)) return;
+export default function moveTest(ctrl: PuzzleCtrl): MoveTestReturn {
+ if (ctrl.mode === 'view') return;
+ if (!pathOps.contains(ctrl.path, ctrl.initialPath)) return;
- const playedByColor = vm.node.ply % 2 === 1 ? 'white' : 'black';
- if (playedByColor !== vm.pov) return;
+ const playedByColor = ctrl.node.ply % 2 === 1 ? 'white' : 'black';
+ if (playedByColor !== ctrl.pov) return;
- const nodes = vm.nodeList.slice(pathOps.size(vm.initialPath) + 1).map(node => ({
+ const nodes = ctrl.nodeList.slice(pathOps.size(ctrl.initialPath) + 1).map(node => ({
uci: node.uci,
castle: node.san!.startsWith('O-O'),
checkmate: node.san!.endsWith('#'),
}));
for (const i in nodes) {
- if (nodes[i].checkmate) return (vm.node.puzzle = 'win');
+ if (nodes[i].checkmate) return (ctrl.node.puzzle = 'win');
const uci = nodes[i].uci!,
- solUci = puzzle.solution[i];
+ solUci = ctrl.data.puzzle.solution[i];
if (uci != solUci && (!nodes[i].castle || !isAltCastle(uci) || altCastles[uci] != solUci))
- return (vm.node.puzzle = 'fail');
+ return (ctrl.node.puzzle = 'fail');
}
- const nextUci = puzzle.solution[nodes.length];
- if (!nextUci) return (vm.node.puzzle = 'win');
+ const nextUci = ctrl.data.puzzle.solution[nodes.length];
+ if (!nextUci) return (ctrl.node.puzzle = 'win');
// from here we have a next move
- vm.node.puzzle = 'good';
+ ctrl.node.puzzle = 'good';
return {
move: parseUci(nextUci)!,
- fen: vm.node.fen,
- path: vm.path,
+ fen: ctrl.node.fen,
+ path: ctrl.path,
};
}
diff --git a/ui/puzzle/src/plugins/nvui.ts b/ui/puzzle/src/plugins/nvui.ts
index 468788d4da605..2b74fa80afa62 100644
--- a/ui/puzzle/src/plugins/nvui.ts
+++ b/ui/puzzle/src/plugins/nvui.ts
@@ -1,5 +1,4 @@
import { h, VNode } from 'snabbdom';
-import { Controller } from '../interfaces';
import { puzzleBox, renderDifficultyForm, userBox } from '../view/side';
import theme from '../view/theme';
import {
@@ -31,6 +30,7 @@ import * as control from '../control';
import { bind, onInsert } from 'common/snabbdom';
import { Api } from 'chessground/api';
import throttle from 'common/throttle';
+import PuzzleCtrl from '../ctrl';
const throttled = (sound: string) => throttle(100, () => lichess.sound.play(sound));
const selectSound = throttled('select');
@@ -45,7 +45,7 @@ export function initModule() {
positionStyle = positionSetting(),
boardStyle = boardSetting();
return {
- render(ctrl: Controller): VNode {
+ render(ctrl: PuzzleCtrl): VNode {
notify.redraw = ctrl.redraw;
const ground =
ctrl.ground() ||
@@ -58,11 +58,11 @@ export function initModule() {
ctrl.ground(ground);
return h(
- `main.puzzle.puzzle--nvui.puzzle-${ctrl.getData().replay ? 'replay' : 'play'}${
+ `main.puzzle.puzzle--nvui.puzzle-${ctrl.data.replay ? 'replay' : 'play'}${
ctrl.streak ? '.puzzle--streak' : ''
}`,
h('div.nvui', [
- h('h1', `Puzzle: ${ctrl.vm.pov} to play.`),
+ h('h1', `Puzzle: ${ctrl.pov} to play.`),
h('h2', 'Puzzle info'),
puzzleBox(ctrl),
theme(ctrl),
@@ -70,26 +70,15 @@ export function initModule() {
h('h2', 'Moves'),
h(
'p.moves',
- {
- attrs: {
- role: 'log',
- 'aria-live': 'off',
- },
- },
- renderMainline(ctrl.vm.mainline, ctrl.vm.path, moveStyle.get()),
+ { attrs: { role: 'log', 'aria-live': 'off' } },
+ renderMainline(ctrl.mainline, ctrl.path, moveStyle.get()),
),
h('h2', 'Pieces'),
h('div.pieces', renderPieces(ground.state.pieces, moveStyle.get())),
h('h2', 'Puzzle status'),
h(
'div.status',
- {
- attrs: {
- role: 'status',
- 'aria-live': 'polite',
- 'aria-atomic': 'true',
- },
- },
+ { attrs: { role: 'status', 'aria-live': 'polite', 'aria-atomic': 'true' } },
renderStatus(ctrl),
),
h('div.replay', renderReplay(ctrl)),
@@ -97,12 +86,7 @@ export function initModule() {
h('h2', 'Last move'),
h(
'p.lastMove',
- {
- attrs: {
- 'aria-live': 'assertive',
- 'aria-atomic': 'true',
- },
- },
+ { attrs: { 'aria-live': 'assertive', 'aria-atomic': 'true' } },
lastMove(ctrl, moveStyle.get()),
),
h('h2', 'Move form'),
@@ -118,21 +102,16 @@ export function initModule() {
},
[
h('label', [
- ctrl.vm.mode === 'view' ? 'Command input' : `Find the best move for ${ctrl.vm.pov}.`,
+ ctrl.mode === 'view' ? 'Command input' : `Find the best move for ${ctrl.pov}.`,
h('input.move.mousetrap', {
- attrs: {
- name: 'move',
- type: 'text',
- autocomplete: 'off',
- autofocus: true,
- },
+ attrs: { name: 'move', type: 'text', autocomplete: 'off', autofocus: true },
}),
]),
],
),
notify.render(),
h('h2', 'Actions'),
- ctrl.vm.mode === 'view' ? afterActions(ctrl) : playActions(ctrl),
+ ctrl.mode === 'view' ? afterActions(ctrl) : playActions(ctrl),
h('h2', 'Board'),
h(
'div.board',
@@ -140,15 +119,15 @@ export function initModule() {
hook: onInsert(el => {
const $board = $(el);
const $buttons = $board.find('button');
- const steps = () => ctrl.getTree().getNodeList(ctrl.vm.path);
+ const steps = () => ctrl.tree.getNodeList(ctrl.path);
const uciSteps = () => steps().filter(hasUci);
const fenSteps = () => steps().map(step => step.fen);
- const opponentColor = ctrl.vm.pov === 'white' ? 'black' : 'white';
+ const opponentColor = ctrl.pov === 'white' ? 'black' : 'white';
$board.on(
'click',
selectionHandler(() => opponentColor, selectSound),
);
- $board.on('keydown', arrowKeyHandler(ctrl.vm.pov, borderSound));
+ $board.on('keydown', arrowKeyHandler(ctrl.pov, borderSound));
$board.on('keypress', boardCommandsHandler());
$buttons.on(
'keypress',
@@ -157,7 +136,7 @@ export function initModule() {
$buttons.on(
'keypress',
possibleMovesHandler(
- ctrl.vm.pov,
+ ctrl.pov,
() => ground.state.turnColor,
ground.getFen,
() => ground.state.pieces,
@@ -172,23 +151,14 @@ export function initModule() {
},
renderBoard(
ground.state.pieces,
- ctrl.vm.pov,
+ ctrl.pov,
pieceStyle.get(),
prefixStyle.get(),
positionStyle.get(),
boardStyle.get(),
),
),
- h(
- 'div.boardstatus',
- {
- attrs: {
- 'aria-live': 'polite',
- 'aria-atomic': 'true',
- },
- },
- '',
- ),
+ h('div.boardstatus', { attrs: { 'aria-live': 'polite', 'aria-atomic': 'true' } }, ''),
h('h2', 'Settings'),
h('label', ['Move notation', renderSetting(moveStyle, ctrl.redraw)]),
h('h3', 'Board settings'),
@@ -196,7 +166,7 @@ export function initModule() {
h('label', ['Piece prefix style', renderSetting(prefixStyle, ctrl.redraw)]),
h('label', ['Show position', renderSetting(positionStyle, ctrl.redraw)]),
h('label', ['Board layout', renderSetting(boardStyle, ctrl.redraw)]),
- ...(!ctrl.getData().replay && !ctrl.streak
+ ...(!ctrl.data.replay && !ctrl.streak
? [h('h3', 'Puzzle Settings'), renderDifficultyForm(ctrl)]
: []),
h('h2', 'Keyboard shortcuts'),
@@ -263,15 +233,15 @@ function hasUci(step: Tree.Node): step is StepWithUci {
return step.uci !== undefined;
}
-function lastMove(ctrl: Controller, style: Style): string {
- const node = ctrl.vm.node;
+function lastMove(ctrl: PuzzleCtrl, style: Style): string {
+ const node = ctrl.node;
if (node.ply === 0) return 'Initial position';
// make sure consecutive moves are different so that they get re-read
return renderSan(node.san || '', node.uci, style) + (node.ply % 2 === 0 ? '' : ' ');
}
function onSubmit(
- ctrl: Controller,
+ ctrl: PuzzleCtrl,
notify: (txt: string) => void,
style: () => Style,
$input: Cash,
@@ -282,10 +252,10 @@ function onSubmit(
if (isShortCommand(input)) input = '/' + input;
if (input[0] === '/') onCommand(ctrl, notify, input.slice(1), style());
else {
- const uci = inputToLegalUci(input, ctrl.vm.node.fen, ground);
+ const uci = inputToLegalUci(input, ctrl.node.fen, ground);
if (uci) {
ctrl.playUci(uci);
- switch (ctrl.vm.lastFeedback) {
+ switch (ctrl.lastFeedback) {
case 'fail':
notify(ctrl.trans.noarg('notTheMove'));
break;
@@ -304,12 +274,12 @@ function onSubmit(
};
}
-function isYourMove(ctrl: Controller) {
- return ctrl.vm.node.children.length === 0 || ctrl.vm.node.children[0].puzzle === 'fail';
+function isYourMove(ctrl: PuzzleCtrl) {
+ return ctrl.node.children.length === 0 || ctrl.node.children[0].puzzle === 'fail';
}
-function browseHint(ctrl: Controller): string[] {
- if (ctrl.vm.mode !== 'view' && !isYourMove(ctrl)) return ['You browsed away from the latest position.'];
+function browseHint(ctrl: PuzzleCtrl): string[] {
+ if (ctrl.mode !== 'view' && !isYourMove(ctrl)) return ['You browsed away from the latest position.'];
else return [];
}
@@ -319,7 +289,7 @@ function isShortCommand(input: string): boolean {
return shortCommands.includes(input.split(' ')[0].toLowerCase());
}
-function onCommand(ctrl: Controller, notify: (txt: string) => void, c: string, style: Style): void {
+function onCommand(ctrl: PuzzleCtrl, notify: (txt: string) => void, c: string, style: Style): void {
const lowered = c.toLowerCase();
const pieces = ctrl.ground()!.state.pieces;
if (lowered === 'l' || lowered === 'last') notify($('.lastMove').text());
@@ -332,9 +302,9 @@ function onCommand(ctrl: Controller, notify: (txt: string) => void, c: string, s
);
}
-function viewOrAdvanceSolution(ctrl: Controller, notify: (txt: string) => void): void {
- if (ctrl.vm.mode === 'view') {
- const node = ctrl.vm.node,
+function viewOrAdvanceSolution(ctrl: PuzzleCtrl, notify: (txt: string) => void): void {
+ if (ctrl.mode === 'view') {
+ const node = ctrl.node,
next = nextNode(node),
nextNext = nextNode(next);
if (isInSolution(next) || (isInSolution(node) && isInSolution(nextNext))) {
@@ -359,26 +329,26 @@ function nextNode(node?: Tree.Node): Tree.Node | undefined {
else return;
}
-function renderStreak(ctrl: Controller): VNode[] {
+function renderStreak(ctrl: PuzzleCtrl): VNode[] {
if (!ctrl.streak) return [];
return [h('h2', 'Puzzle streak'), h('p', ctrl.streak.data.index || ctrl.trans.noarg('streakDescription'))];
}
-function renderStatus(ctrl: Controller): string {
- if (ctrl.vm.mode !== 'view') return 'Solving';
+function renderStatus(ctrl: PuzzleCtrl): string {
+ if (ctrl.mode !== 'view') return 'Solving';
else if (ctrl.streak) return `GAME OVER. Your streak: ${ctrl.streak.data.index}`;
- else if (ctrl.vm.lastFeedback === 'win') return 'Puzzle solved!';
+ else if (ctrl.lastFeedback === 'win') return 'Puzzle solved!';
else return 'Puzzle complete.';
}
-function renderReplay(ctrl: Controller): string {
- const replay = ctrl.getData().replay;
+function renderReplay(ctrl: PuzzleCtrl): string {
+ const replay = ctrl.data.replay;
if (!replay) return '';
- const i = replay.i + (ctrl.vm.mode === 'play' ? 0 : 1);
- return `Replaying ${ctrl.trans.noarg(ctrl.getData().angle.key)} puzzles: ${i} of ${replay.of}`;
+ const i = replay.i + (ctrl.mode === 'play' ? 0 : 1);
+ return `Replaying ${ctrl.trans.noarg(ctrl.data.angle.key)} puzzles: ${i} of ${replay.of}`;
}
-function playActions(ctrl: Controller): VNode {
+function playActions(ctrl: PuzzleCtrl): VNode {
if (ctrl.streak)
return button(
ctrl.trans.noarg('skip'),
@@ -389,8 +359,8 @@ function playActions(ctrl: Controller): VNode {
else return h('div.actions_play', button('View the solution', ctrl.viewSolution));
}
-function afterActions(ctrl: Controller): VNode {
- const win = ctrl.vm.lastFeedback === 'win';
+function afterActions(ctrl: PuzzleCtrl): VNode {
+ const win = ctrl.lastFeedback === 'win';
return h(
'div.actions_after',
ctrl.streak && !win
@@ -399,40 +369,28 @@ function afterActions(ctrl: Controller): VNode {
);
}
-const renderVoteTutorial = (ctrl: Controller): VNode[] =>
- ctrl.session.isNew() && ctrl.getData().user?.provisional
+const renderVoteTutorial = (ctrl: PuzzleCtrl): VNode[] =>
+ ctrl.session.isNew() && ctrl.data.user?.provisional
? [h('p', ctrl.trans.noarg('didYouLikeThisPuzzle')), h('p', ctrl.trans.noarg('voteToLoadNextOne'))]
: [];
-function renderVote(ctrl: Controller): VNode[] {
- if (!ctrl.getData().user || ctrl.autoNexting()) return [];
+function renderVote(ctrl: PuzzleCtrl): VNode[] {
+ if (!ctrl.data.user || ctrl.autoNexting()) return [];
return [
...renderVoteTutorial(ctrl),
- button('Thumbs up', () => ctrl.vote(true), undefined, ctrl.vm.voteDisabled),
- button('Thumbs down', () => ctrl.vote(false), undefined, ctrl.vm.voteDisabled),
+ button('Thumbs up', () => ctrl.vote(true), undefined, ctrl.voteDisabled),
+ button('Thumbs down', () => ctrl.vote(false), undefined, ctrl.voteDisabled),
];
}
function anchor(text: string, href: string): VNode {
- return h(
- 'a',
- {
- attrs: { href },
- },
- text,
- );
+ return h('a', { attrs: { href } }, text);
}
function button(text: string, action: (e: Event) => void, title?: string, disabled?: boolean): VNode {
return h(
'button',
- {
- hook: bind('click', action),
- attrs: {
- ...(title ? { title } : {}),
- disabled: !!disabled,
- },
- },
+ { hook: bind('click', action), attrs: { ...(title ? { title } : {}), disabled: !!disabled } },
text,
);
}
diff --git a/ui/puzzle/src/view/after.ts b/ui/puzzle/src/view/after.ts
index 66efd770142bd..df0a1f6aac20d 100644
--- a/ui/puzzle/src/view/after.ts
+++ b/ui/puzzle/src/view/after.ts
@@ -1,66 +1,47 @@
import * as licon from 'common/licon';
-import { MaybeVNodes, bind, dataIcon } from 'common/snabbdom';
-import { Controller } from '../interfaces';
-import { h, VNode } from 'snabbdom';
+import { MaybeVNodes, bind, dataIcon, looseH as h } from 'common/snabbdom';
+import { VNode } from 'snabbdom';
import * as router from 'common/router';
+import PuzzleCtrl from '../ctrl';
-const renderVote = (ctrl: Controller): VNode =>
+const renderVote = (ctrl: PuzzleCtrl): VNode =>
h(
'div.puzzle__vote',
- ctrl.autoNexting()
- ? []
- : [
- ctrl.session.isNew() && ctrl.getData().user?.provisional
- ? h('div.puzzle__vote__help', [
- h('p', ctrl.trans.noarg('didYouLikeThisPuzzle')),
- h('p', ctrl.trans.noarg('voteToLoadNextOne')),
- ])
- : null,
- h(
- 'div.puzzle__vote__buttons',
- {
- class: {
- enabled: !ctrl.vm.voteDisabled,
- },
- },
- [
- h('div.vote.vote-up', {
- hook: bind('click', () => ctrl.vote(true)),
- }),
- h('div.vote.vote-down', {
- hook: bind('click', () => ctrl.vote(false)),
- }),
- ],
- ),
- ],
+ {},
+ !ctrl.autoNexting() && [
+ ctrl.session.isNew() &&
+ ctrl.data.user?.provisional &&
+ h('div.puzzle__vote__help', [
+ h('p', ctrl.trans.noarg('didYouLikeThisPuzzle')),
+ h('p', ctrl.trans.noarg('voteToLoadNextOne')),
+ ]),
+ h('div.puzzle__vote__buttons', { class: { enabled: !ctrl.voteDisabled } }, [
+ h('div.vote.vote-up', { hook: bind('click', () => ctrl.vote(true)) }),
+ h('div.vote.vote-down', { hook: bind('click', () => ctrl.vote(false)) }),
+ ]),
+ ],
);
-const renderContinue = (ctrl: Controller) =>
- h(
- 'a.continue',
- {
- hook: bind('click', ctrl.nextPuzzle),
- },
- [h('i', { attrs: dataIcon(licon.PlayTriangle) }), ctrl.trans.noarg('continueTraining')],
- );
+const renderContinue = (ctrl: PuzzleCtrl) =>
+ h('a.continue', { hook: bind('click', ctrl.nextPuzzle) }, [
+ h('i', { attrs: dataIcon(licon.PlayTriangle) }),
+ ctrl.trans.noarg('continueTraining'),
+ ]);
-const renderStreak = (ctrl: Controller): MaybeVNodes => [
+const renderStreak = (ctrl: PuzzleCtrl): MaybeVNodes => [
h('div.complete', [
h('span.game-over', 'GAME OVER'),
h('span', ctrl.trans.vdom('yourStreakX', h('strong', ctrl.streak?.data.index))),
]),
- h(
- 'a.continue',
- {
- attrs: { href: router.withLang('/streak') },
- },
- [h('i', { attrs: dataIcon(licon.PlayTriangle) }), ctrl.trans('newStreak')],
- ),
+ h('a.continue', { attrs: { href: router.withLang('/streak') } }, [
+ h('i', { attrs: dataIcon(licon.PlayTriangle) }),
+ ctrl.trans('newStreak'),
+ ]),
];
-export default function (ctrl: Controller): VNode {
- const data = ctrl.getData();
- const win = ctrl.vm.lastFeedback == 'win';
+export default function (ctrl: PuzzleCtrl): VNode {
+ const data = ctrl.data;
+ const win = ctrl.lastFeedback == 'win';
return h(
'div.puzzle__feedback.after',
ctrl.streak && !win
@@ -72,21 +53,19 @@ export default function (ctrl: Controller): VNode {
h('a', {
attrs: {
'data-icon': licon.Bullseye,
- href: `/analysis/${ctrl.vm.node.fen.replace(/ /g, '_')}?color=${ctrl.vm.pov}#practice`,
+ href: `/analysis/${ctrl.node.fen.replace(/ /g, '_')}?color=${ctrl.pov}#practice`,
title: ctrl.trans.noarg('playWithTheMachine'),
target: '_blank',
rel: 'noopener',
},
}),
- data.user && !ctrl.autoNexting()
- ? h(
- 'a',
- {
- hook: bind('click', ctrl.nextPuzzle),
- },
- ctrl.trans.noarg(ctrl.streak ? 'continueTheStreak' : 'continueTraining'),
- )
- : undefined,
+ data.user &&
+ !ctrl.autoNexting() &&
+ h(
+ 'a',
+ { hook: bind('click', ctrl.nextPuzzle) },
+ ctrl.trans.noarg(ctrl.streak ? 'continueTheStreak' : 'continueTraining'),
+ ),
]),
],
);
diff --git a/ui/puzzle/src/view/boardMenu.ts b/ui/puzzle/src/view/boardMenu.ts
index ee69dfb0bc53f..467474172d60a 100644
--- a/ui/puzzle/src/view/boardMenu.ts
+++ b/ui/puzzle/src/view/boardMenu.ts
@@ -1,9 +1,9 @@
import { h } from 'snabbdom';
import { menu as menuDropdown } from 'board/menu';
-import { Controller } from '../interfaces';
import { boolPrefXhrToggle } from 'common/controls';
+import PuzzleCtrl from '../ctrl';
-export default function (ctrl: Controller) {
+export default function (ctrl: PuzzleCtrl) {
return menuDropdown(ctrl.trans, ctrl.redraw, ctrl.menu, menu => [
h('section', [menu.flip(ctrl.trans.noarg('flipBoard'), ctrl.flipped(), ctrl.flip)]),
h('section', [
diff --git a/ui/puzzle/src/view/chessground.ts b/ui/puzzle/src/view/chessground.ts
index 3274e1f544e7c..1bba0f5543e3b 100644
--- a/ui/puzzle/src/view/chessground.ts
+++ b/ui/puzzle/src/view/chessground.ts
@@ -1,20 +1,20 @@
import resizeHandle from 'common/resize';
import { Config as CgConfig } from 'chessground/config';
-import { Controller } from '../interfaces';
import { h, VNode } from 'snabbdom';
import * as Prefs from 'common/prefs';
+import PuzzleCtrl from '../ctrl';
-export default function (ctrl: Controller): VNode {
+export default function (ctrl: PuzzleCtrl): VNode {
return h('div.cg-wrap', {
hook: {
insert: vnode =>
ctrl.setChessground(lichess.makeChessground(vnode.elm as HTMLElement, makeConfig(ctrl))),
- destroy: _ => ctrl.ground()!.destroy(),
+ destroy: () => ctrl.ground()!.destroy(),
},
});
}
-export function makeConfig(ctrl: Controller): CgConfig {
+export function makeConfig(ctrl: PuzzleCtrl): CgConfig {
const opts = ctrl.makeCgOpts();
return {
fen: opts.fen,
@@ -42,7 +42,7 @@ export function makeConfig(ctrl: Controller): CgConfig {
events: {
move: ctrl.userMove,
insert(elements) {
- resizeHandle(elements, Prefs.ShowResizeHandle.Always, ctrl.vm.node.ply);
+ resizeHandle(elements, Prefs.ShowResizeHandle.Always, ctrl.node.ply);
},
},
premovable: {
diff --git a/ui/puzzle/src/view/feedback.ts b/ui/puzzle/src/view/feedback.ts
index 0c75f5d65c609..ef16b5b368af5 100644
--- a/ui/puzzle/src/view/feedback.ts
+++ b/ui/puzzle/src/view/feedback.ts
@@ -1,60 +1,41 @@
import { bind, MaybeVNode } from 'common/snabbdom';
import { h, VNode } from 'snabbdom';
-import { Controller } from '../interfaces';
import afterView from './after';
+import PuzzleCtrl from '../ctrl';
-const viewSolution = (ctrl: Controller): VNode =>
+const viewSolution = (ctrl: PuzzleCtrl): VNode =>
ctrl.streak
- ? h(
- 'div.view_solution.skip',
- {
- class: { show: !!ctrl.streak?.data.skip },
- },
- [
- h(
- 'a.button.button-empty',
- {
- hook: bind('click', ctrl.skip),
- attrs: {
- title: ctrl.trans.noarg('streakSkipExplanation'),
- },
- },
- ctrl.trans.noarg('skip'),
- ),
- ],
- )
- : h(
- 'div.view_solution',
- {
- class: { show: ctrl.vm.canViewSolution },
- },
- [
- h(
- 'a.button.button-empty',
- {
- hook: bind('click', ctrl.viewSolution),
- },
- ctrl.trans.noarg('viewTheSolution'),
- ),
- ],
- );
+ ? h('div.view_solution.skip', { class: { show: !!ctrl.streak?.data.skip } }, [
+ h(
+ 'a.button.button-empty',
+ { hook: bind('click', ctrl.skip), attrs: { title: ctrl.trans.noarg('streakSkipExplanation') } },
+ ctrl.trans.noarg('skip'),
+ ),
+ ])
+ : h('div.view_solution', { class: { show: ctrl.canViewSolution() } }, [
+ h(
+ 'a.button.button-empty',
+ { hook: bind('click', ctrl.viewSolution) },
+ ctrl.trans.noarg('viewTheSolution'),
+ ),
+ ]);
-const initial = (ctrl: Controller): VNode =>
+const initial = (ctrl: PuzzleCtrl): VNode =>
h('div.puzzle__feedback.play', [
h('div.player', [
- h('div.no-square', h('piece.king.' + ctrl.vm.pov)),
+ h('div.no-square', h('piece.king.' + ctrl.pov)),
h('div.instruction', [
h('strong', ctrl.trans.noarg('yourTurn')),
h(
'em',
- ctrl.trans.noarg(ctrl.vm.pov === 'white' ? 'findTheBestMoveForWhite' : 'findTheBestMoveForBlack'),
+ ctrl.trans.noarg(ctrl.pov === 'white' ? 'findTheBestMoveForWhite' : 'findTheBestMoveForBlack'),
),
]),
]),
viewSolution(ctrl),
]);
-const good = (ctrl: Controller): VNode =>
+const good = (ctrl: PuzzleCtrl): VNode =>
h('div.puzzle__feedback.good', [
h('div.player', [
h('div.icon', '✓'),
@@ -66,7 +47,7 @@ const good = (ctrl: Controller): VNode =>
viewSolution(ctrl),
]);
-const fail = (ctrl: Controller): VNode =>
+const fail = (ctrl: PuzzleCtrl): VNode =>
h('div.puzzle__feedback.fail', [
h('div.player', [
h('div.icon', '✗'),
@@ -78,9 +59,9 @@ const fail = (ctrl: Controller): VNode =>
viewSolution(ctrl),
]);
-export default function (ctrl: Controller): MaybeVNode {
- if (ctrl.vm.mode === 'view') return afterView(ctrl);
- switch (ctrl.vm.lastFeedback) {
+export default function (ctrl: PuzzleCtrl): MaybeVNode {
+ if (ctrl.mode === 'view') return afterView(ctrl);
+ switch (ctrl.lastFeedback) {
case 'init':
return initial(ctrl);
case 'good':
diff --git a/ui/puzzle/src/view/main.ts b/ui/puzzle/src/view/main.ts
index 54f4ef4a14418..960e9006e4999 100644
--- a/ui/puzzle/src/view/main.ts
+++ b/ui/puzzle/src/view/main.ts
@@ -6,9 +6,8 @@ import chessground from './chessground';
import feedbackView from './feedback';
import * as licon from 'common/licon';
import { stepwiseScroll } from 'common/scroll';
-import { Controller } from '../interfaces';
-import { h, VNode } from 'snabbdom';
-import { onInsert, bindNonPassive } from 'common/snabbdom';
+import { VNode } from 'snabbdom';
+import { onInsert, bindNonPassive, looseH as h } from 'common/snabbdom';
import { bindMobileMousedown } from 'common/device';
import { render as treeView } from './tree';
import { view as cevalView } from 'ceval';
@@ -16,10 +15,10 @@ import { renderVoiceBar } from 'voice';
import { render as renderKeyboardMove } from 'keyboardMove';
import { toggleButton as boardMenuToggleButton } from 'board/menu';
import boardMenu from './boardMenu';
-
import * as Prefs from 'common/prefs';
+import PuzzleCtrl from '../ctrl';
-const renderAnalyse = (ctrl: Controller): VNode => h('div.puzzle__moves.areplay', [treeView(ctrl)]);
+const renderAnalyse = (ctrl: PuzzleCtrl): VNode => h('div.puzzle__moves.areplay', [treeView(ctrl)]);
function dataAct(e: Event): string | null {
const target = e.target as HTMLElement;
@@ -27,19 +26,13 @@ function dataAct(e: Event): string | null {
}
function jumpButton(icon: string, effect: string, disabled: boolean, glowing = false): VNode {
- return h('button.fbt', {
- class: { disabled, glowing },
- attrs: {
- 'data-act': effect,
- 'data-icon': icon,
- },
- });
+ return h('button.fbt', { class: { disabled, glowing }, attrs: { 'data-act': effect, 'data-icon': icon } });
}
-function controls(ctrl: Controller): VNode {
- const node = ctrl.vm.node;
+function controls(ctrl: PuzzleCtrl): VNode {
+ const node = ctrl.node;
const nextNode = node.children[0];
- const notOnLastMove = ctrl.vm.mode == 'play' && nextNode && nextNode.puzzle != 'fail';
+ const notOnLastMove = ctrl.mode == 'play' && nextNode && nextNode.puzzle != 'fail';
return h('div.puzzle__controls.analyse-controls', [
h(
'div.jumps',
@@ -68,16 +61,16 @@ function controls(ctrl: Controller): VNode {
let cevalShown = false;
-export default function (ctrl: Controller): VNode {
+export default function (ctrl: PuzzleCtrl): VNode {
if (ctrl.nvui) return ctrl.nvui.render(ctrl);
- const showCeval = ctrl.vm.showComputer(),
+ const showCeval = ctrl.showComputer(),
gaugeOn = ctrl.showEvalGauge();
if (cevalShown !== showCeval) {
- if (!cevalShown) ctrl.vm.autoScrollNow = true;
+ if (!cevalShown) ctrl.autoScrollNow = true;
cevalShown = showCeval;
}
return h(
- `main.puzzle.puzzle-${ctrl.getData().replay ? 'replay' : 'play'}${ctrl.streak ? '.puzzle--streak' : ''}`,
+ `main.puzzle.puzzle-${ctrl.data.replay ? 'replay' : 'play'}${ctrl.streak ? '.puzzle--streak' : ''}`,
{
class: { 'gauge-on': gaugeOn },
hook: {
@@ -132,40 +125,34 @@ export default function (ctrl: Controller): VNode {
// so the siblings are only updated when ceval is added
h(
'div.ceval-wrap',
- {
- class: { none: !showCeval },
- },
+ { class: { none: !showCeval } },
showCeval ? [...cevalView.renderCeval(ctrl), cevalView.renderPvs(ctrl)] : [],
),
renderAnalyse(ctrl),
feedbackView(ctrl),
]),
controls(ctrl),
- ctrl.keyboardMove ? renderKeyboardMove(ctrl.keyboardMove) : null,
+ ctrl.keyboardMove && renderKeyboardMove(ctrl.keyboardMove),
session(ctrl),
- ctrl.keyboardHelp() ? keyboard.view(ctrl) : null,
+ ctrl.keyboardHelp() && keyboard.view(ctrl),
],
);
}
-function session(ctrl: Controller) {
+function session(ctrl: PuzzleCtrl) {
const rounds = ctrl.session.get().rounds,
- current = ctrl.getData().puzzle.id;
+ current = ctrl.data.puzzle.id;
return h('div.puzzle__session', [
...rounds.map(round => {
const rd =
- round.ratingDiff && ctrl.showRatings
- ? round.ratingDiff > 0
- ? '+' + round.ratingDiff
- : round.ratingDiff
- : null;
+ round.ratingDiff && ctrl.opts.showRatings && round.ratingDiff > 0
+ ? '+' + round.ratingDiff
+ : round.ratingDiff;
return h(
`a.result-${round.result}${rd ? '' : '.result-empty'}`,
{
key: round.id,
- class: {
- current: current == round.id,
- },
+ class: { current: current == round.id },
attrs: {
href: `/training/${ctrl.session.theme}/${round.id}`,
...(ctrl.streak ? { target: '_blank', rel: 'noopener' } : {}),
@@ -175,24 +162,10 @@ function session(ctrl: Controller) {
);
}),
rounds.find(r => r.id == current)
- ? ctrl.streak
- ? null
- : h('a.session-new', {
- key: 'new',
- attrs: {
- href: `/training/${ctrl.session.theme}`,
- },
- })
+ ? !ctrl.streak && h('a.session-new', { key: 'new', attrs: { href: `/training/${ctrl.session.theme}` } })
: h(
'a.result-cursor.current',
- {
- key: current,
- attrs: ctrl.streak
- ? {}
- : {
- href: `/training/${ctrl.session.theme}/${current}`,
- },
- },
+ { key: current, attrs: ctrl.streak ? {} : { href: `/training/${ctrl.session.theme}/${current}` } },
ctrl.streak?.data.index,
),
]);
diff --git a/ui/puzzle/src/view/side.ts b/ui/puzzle/src/view/side.ts
index ef981ab4485d4..177cc095724c9 100644
--- a/ui/puzzle/src/view/side.ts
+++ b/ui/puzzle/src/view/side.ts
@@ -1,41 +1,37 @@
-import { Controller, Puzzle, PuzzleGame, PuzzleDifficulty } from '../interfaces';
+import { Puzzle, PuzzleGame, PuzzleDifficulty } from '../interfaces';
import * as licon from 'common/licon';
-import { dataIcon, onInsert, MaybeVNode } from 'common/snabbdom';
-import { h, VNode } from 'snabbdom';
+import { dataIcon, onInsert, MaybeVNode, looseH as h } from 'common/snabbdom';
+import { VNode } from 'snabbdom';
import { numberFormat } from 'common/number';
import perfIcons from 'common/perfIcons';
import * as router from 'common/router';
import { userLink } from 'common/userLink';
import PuzzleStreak from '../streak';
+import PuzzleCtrl from '../ctrl';
-export function puzzleBox(ctrl: Controller): VNode {
- const data = ctrl.getData();
+export function puzzleBox(ctrl: PuzzleCtrl): VNode {
+ const data = ctrl.data;
return h('div.puzzle__side__metas', [
puzzleInfos(ctrl, data.puzzle),
gameInfos(ctrl, data.game, data.puzzle),
]);
}
-const angleImg = (ctrl: Controller): string => {
- const angle = ctrl.getData().angle;
+const angleImg = (ctrl: PuzzleCtrl): string => {
+ const angle = ctrl.data.angle;
const name = angle.opening ? 'opening' : angle.key.startsWith('mateIn') ? 'mate' : angle.key;
return lichess.asset.url(`images/puzzle-themes/${name}.svg`);
};
-const puzzleInfos = (ctrl: Controller, puzzle: Puzzle): VNode =>
+const puzzleInfos = (ctrl: PuzzleCtrl, puzzle: Puzzle): VNode =>
h('div.infos.puzzle', [
- h('img.infos__angle-img', {
- attrs: {
- src: angleImg(ctrl),
- alt: ctrl.getData().angle.name,
- },
- }),
+ h('img.infos__angle-img', { attrs: { src: angleImg(ctrl), alt: ctrl.data.angle.name } }),
h('div', [
h(
'p',
ctrl.trans.vdom(
'puzzleId',
- ctrl.streak && ctrl.vm.mode === 'play'
+ ctrl.streak && ctrl.mode === 'play'
? h('span.hidden', ctrl.trans.noarg('hidden'))
: h(
'a',
@@ -49,22 +45,21 @@ const puzzleInfos = (ctrl: Controller, puzzle: Puzzle): VNode =>
),
),
),
- ctrl.showRatings
- ? h(
- 'p',
- ctrl.trans.vdom(
- 'ratingX',
- !ctrl.streak && ctrl.vm.mode === 'play'
- ? h('span.hidden', ctrl.trans.noarg('hidden'))
- : h('strong', puzzle.rating),
- ),
- )
- : null,
+ ctrl.opts.showRatings &&
+ h(
+ 'p',
+ ctrl.trans.vdom(
+ 'ratingX',
+ !ctrl.streak && ctrl.mode === 'play'
+ ? h('span.hidden', ctrl.trans.noarg('hidden'))
+ : h('strong', puzzle.rating),
+ ),
+ ),
h('p', ctrl.trans.vdomPlural('playedXTimes', puzzle.plays, h('strong', numberFormat(puzzle.plays)))),
]),
]);
-function gameInfos(ctrl: Controller, game: PuzzleGame, puzzle: Puzzle): VNode {
+function gameInfos(ctrl: PuzzleCtrl, game: PuzzleGame, puzzle: Puzzle): VNode {
const gameName = `${game.clock} • ${game.perf.name}`;
return h('div.infos', { attrs: dataIcon(perfIcons[game.perf.key]) }, [
h('div', [
@@ -72,25 +67,15 @@ function gameInfos(ctrl: Controller, game: PuzzleGame, puzzle: Puzzle): VNode {
'p',
ctrl.trans.vdom(
'fromGameLink',
- ctrl.vm.mode == 'play'
+ ctrl.mode == 'play'
? h('span', gameName)
- : h(
- 'a',
- {
- attrs: { href: `/${game.id}/${ctrl.vm.pov}#${puzzle.initialPly}` },
- },
- gameName,
- ),
+ : h('a', { attrs: { href: `/${game.id}/${ctrl.pov}#${puzzle.initialPly}` } }, gameName),
),
),
h(
'div.players',
game.players.map(p => {
- const user = {
- ...p,
- rating: ctrl.showRatings ? p.rating : undefined,
- line: false,
- };
+ const user = { ...p, rating: ctrl.opts.showRatings ? p.rating : undefined, line: false };
return h('div.player.color-icon.is.text.' + p.color, userLink(user));
}),
),
@@ -103,69 +88,57 @@ const renderStreak = (streak: PuzzleStreak, noarg: TransNoArg) =>
'div.puzzle__side__streak',
streak.data.index == 0
? h('div.puzzle__side__streak__info', [
- h(
- 'h1.text',
- {
- attrs: dataIcon(licon.ArrowThruApple),
- },
- 'Puzzle Streak',
- ),
+ h('h1.text', { attrs: dataIcon(licon.ArrowThruApple) }, 'Puzzle Streak'),
h('p', noarg('streakDescription')),
])
: h(
'div.puzzle__side__streak__score.text',
- {
- attrs: dataIcon(licon.ArrowThruApple),
- },
+ { attrs: dataIcon(licon.ArrowThruApple) },
streak.data.index,
),
);
-export const userBox = (ctrl: Controller): VNode => {
- const data = ctrl.getData(),
+export const userBox = (ctrl: PuzzleCtrl): VNode => {
+ const data = ctrl.data,
noarg = ctrl.trans.noarg;
if (!data.user)
return h('div.puzzle__side__user', [
h('p', noarg('toGetPersonalizedPuzzles')),
h('a.button', { attrs: { href: router.withLang('/signup') } }, noarg('signUp')),
]);
- const diff = ctrl.vm.round?.ratingDiff,
+ const diff = ctrl.round?.ratingDiff,
ratedId = 'puzzle-toggle-rated';
return h('div.puzzle__side__user', [
- !data.replay && !ctrl.streak && data.user
- ? h('div.puzzle__side__config__toggle', [
- h('div.switch', [
- h(`input#${ratedId}.cmn-toggle.cmn-toggle--subtle`, {
- attrs: {
- type: 'checkbox',
- checked: ctrl.rated(),
- disabled: ctrl.vm.lastFeedback != 'init',
- },
- hook: {
- insert: vnode => (vnode.elm as HTMLElement).addEventListener('change', ctrl.toggleRated),
- },
- }),
- h('label', { attrs: { for: ratedId } }),
- ]),
- h('label', { attrs: { for: ratedId } }, noarg('rated')),
- ])
- : undefined,
+ !data.replay &&
+ !ctrl.streak &&
+ data.user &&
+ h('div.puzzle__side__config__toggle', [
+ h('div.switch', [
+ h(`input#${ratedId}.cmn-toggle.cmn-toggle--subtle`, {
+ attrs: { type: 'checkbox', checked: ctrl.rated(), disabled: ctrl.lastFeedback != 'init' },
+ hook: {
+ insert: vnode => (vnode.elm as HTMLElement).addEventListener('change', ctrl.toggleRated),
+ },
+ }),
+ h('label', { attrs: { for: ratedId } }),
+ ]),
+ h('label', { attrs: { for: ratedId } }, noarg('rated')),
+ ]),
h(
'div.puzzle__side__user__rating',
ctrl.rated()
- ? ctrl.showRatings
- ? h('strong', [
+ ? ctrl.opts.showRatings &&
+ h('strong', [
data.user.rating - (diff || 0),
...(diff && diff > 0 ? [' ', h('good.rp', '+' + diff)] : []),
...(diff && diff < 0 ? [' ', h('bad.rp', '−' + -diff)] : []),
])
- : null
: h('p.puzzle__side__user__rating__casual', noarg('yourPuzzleRatingWillNotChange')),
),
]);
};
-export const streakBox = (ctrl: Controller) =>
+export const streakBox = (ctrl: PuzzleCtrl) =>
h('div.puzzle__side__user', renderStreak(ctrl.streak!, ctrl.trans.noarg));
const difficulties: [PuzzleDifficulty, number][] = [
@@ -181,20 +154,15 @@ const colors = [
['white', 'asWhite'],
];
-export function replay(ctrl: Controller): MaybeVNode {
- const replay = ctrl.getData().replay;
+export function replay(ctrl: PuzzleCtrl): MaybeVNode {
+ const replay = ctrl.data.replay;
if (!replay) return;
- const i = replay.i + (ctrl.vm.mode == 'play' ? 0 : 1);
+ const i = replay.i + (ctrl.mode == 'play' ? 0 : 1);
return h('div.puzzle__side__replay', [
- h(
- 'a',
- {
- attrs: {
- href: `/training/dashboard/${replay.days}`,
- },
- },
- ['« ', `Replaying ${ctrl.trans.noarg(ctrl.getData().angle.key)} puzzles`],
- ),
+ h('a', { attrs: { href: `/training/dashboard/${replay.days}` } }, [
+ '« ',
+ `Replaying ${ctrl.trans.noarg(ctrl.data.angle.key)} puzzles`,
+ ]),
h('div.puzzle__side__replay__bar', {
attrs: {
style: `--p:${replay.of ? Math.round((100 * i) / replay.of) : 1}%`,
@@ -204,23 +172,20 @@ export function replay(ctrl: Controller): MaybeVNode {
]);
}
-export function config(ctrl: Controller): MaybeVNode {
+export function config(ctrl: PuzzleCtrl): MaybeVNode {
const autoNextId = 'puzzle-toggle-autonext',
noarg = ctrl.trans.noarg,
- data = ctrl.getData();
+ data = ctrl.data;
return h('div.puzzle__side__config', [
h('div.puzzle__side__config__toggle', [
h('div.switch', [
h(`input#${autoNextId}.cmn-toggle.cmn-toggle--subtle`, {
- attrs: {
- type: 'checkbox',
- checked: ctrl.autoNext(),
- },
+ attrs: { type: 'checkbox', checked: ctrl.autoNext() },
hook: {
insert: vnode =>
(vnode.elm as HTMLElement).addEventListener('change', () => {
ctrl.autoNext(!ctrl.autoNext());
- if (ctrl.autoNext() && ctrl.vm.resultSent && !ctrl.streak) {
+ if (ctrl.autoNext() && ctrl.resultSent && !ctrl.streak) {
ctrl.nextPuzzle();
}
}),
@@ -234,23 +199,12 @@ export function config(ctrl: Controller): MaybeVNode {
]);
}
-export const renderDifficultyForm = (ctrl: Controller): VNode =>
+export const renderDifficultyForm = (ctrl: PuzzleCtrl): VNode =>
h(
'form.puzzle__side__config__difficulty',
- {
- attrs: {
- action: `/training/difficulty/${ctrl.getData().angle.key}`,
- method: 'post',
- },
- },
+ { attrs: { action: `/training/difficulty/${ctrl.data.angle.key}`, method: 'post' } },
[
- h(
- 'label',
- {
- attrs: { for: 'puzzle-difficulty' },
- },
- ctrl.trans.noarg('difficultyLevel'),
- ),
+ h('label', { attrs: { for: 'puzzle-difficulty' } }, ctrl.trans.noarg('difficultyLevel')),
h(
'select#puzzle-difficulty.puzzle__difficulty__selector',
{
@@ -265,7 +219,7 @@ export const renderDifficultyForm = (ctrl: Controller): VNode =>
{
attrs: {
value: key,
- selected: key == ctrl.settings.difficulty,
+ selected: key == ctrl.opts.settings.difficulty,
title:
!!delta &&
ctrl.trans.pluralSame(
@@ -281,7 +235,7 @@ export const renderDifficultyForm = (ctrl: Controller): VNode =>
],
);
-export const renderColorForm = (ctrl: Controller): VNode =>
+export const renderColorForm = (ctrl: PuzzleCtrl): VNode =>
h(
'div.puzzle__side__config__color',
h(
@@ -289,12 +243,9 @@ export const renderColorForm = (ctrl: Controller): VNode =>
colors.map(([key, i18n]) =>
h('div', [
h(
- `a.label.color-${key}${key === (ctrl.settings.color || 'random') ? '.active' : ''}`,
+ `a.label.color-${key}${key === (ctrl.opts.settings.color || 'random') ? '.active' : ''}`,
{
- attrs: {
- href: `/training/${ctrl.getData().angle.key}/${key}`,
- title: ctrl.trans.noarg(i18n),
- },
+ attrs: { href: `/training/${ctrl.data.angle.key}/${key}`, title: ctrl.trans.noarg(i18n) },
},
h('i'),
),
diff --git a/ui/puzzle/src/view/theme.ts b/ui/puzzle/src/view/theme.ts
index 60caaad1f53ab..909c4c9b53a76 100644
--- a/ui/puzzle/src/view/theme.ts
+++ b/ui/puzzle/src/view/theme.ts
@@ -1,38 +1,26 @@
import * as licon from 'common/licon';
import * as router from 'common/router';
-import { MaybeVNode, bind, dataIcon } from 'common/snabbdom';
-import { Controller } from '../interfaces';
-import { h, VNode } from 'snabbdom';
+import { MaybeVNode, bind, dataIcon, looseH as h } from 'common/snabbdom';
+import { VNode } from 'snabbdom';
import { renderColorForm } from './side';
+import PuzzleCtrl from '../ctrl';
const studyUrl = 'https://lichess.org/study/viiWlKjv';
-export default function theme(ctrl: Controller): MaybeVNode {
- const data = ctrl.getData(),
+export default function theme(ctrl: PuzzleCtrl): MaybeVNode {
+ const data = ctrl.data,
angle = data.angle;
- const showEditor = ctrl.vm.mode == 'view' && !ctrl.autoNexting();
+ const showEditor = ctrl.mode == 'view' && !ctrl.autoNexting();
if (data.replay) return showEditor ? h('div.puzzle__side__theme', editor(ctrl)) : null;
const puzzleMenu = (v: VNode): VNode =>
h('a', { attrs: { href: router.withLang(`/training/${angle.opening ? 'openings' : 'themes'}`) } }, v);
- return ctrl.streak
- ? null
- : ctrl.vm.isDaily
+ return !ctrl.streak && ctrl.isDaily
? h(
'div.puzzle__side__theme.puzzle__side__theme--daily',
puzzleMenu(h('h2', ctrl.trans.noarg('dailyPuzzle'))),
)
: h('div.puzzle__side__theme', [
- puzzleMenu(
- h(
- 'h2',
- {
- class: {
- long: angle.name.length > 20,
- },
- },
- ['« ', angle.name],
- ),
- ),
+ puzzleMenu(h('h2', { class: { long: angle.name.length > 20 } }, ['« ', angle.name])),
angle.opening
? h('a', { attrs: { href: `/opening/${angle.opening.key}` } }, [
'Learn more about ',
@@ -43,30 +31,22 @@ export default function theme(ctrl: Controller): MaybeVNode {
angle.chapter &&
h(
'a.puzzle__side__theme__chapter.text',
- {
- attrs: {
- href: `${studyUrl}/${angle.chapter}`,
- target: '_blank',
- rel: 'noopener',
- },
- },
+ { attrs: { href: `${studyUrl}/${angle.chapter}`, target: '_blank', rel: 'noopener' } },
[' ', ctrl.trans.noarg('example')],
),
]),
showEditor
? h('div.puzzle__themes', editor(ctrl))
- : !data.replay && !ctrl.streak && angle.opening
- ? renderColorForm(ctrl)
- : null,
+ : !data.replay && !ctrl.streak && angle.opening && renderColorForm(ctrl),
]);
}
const invisibleThemes = new Set(['master', 'masterVsMaster', 'superGM']);
-const editor = (ctrl: Controller): VNode[] => {
- const data = ctrl.getData(),
+const editor = (ctrl: PuzzleCtrl): VNode[] => {
+ const data = ctrl.data,
trans = ctrl.trans.noarg,
- votedThemes = ctrl.vm.round?.themes || {};
+ votedThemes = ctrl.round?.themes || {};
const visibleThemes: string[] = data.puzzle.themes
.filter(t => !invisibleThemes.has(t))
.concat(Object.keys(votedThemes).filter(t => votedThemes[t] && !data.puzzle.themes.includes(t)))
@@ -85,50 +65,25 @@ const editor = (ctrl: Controller): VNode[] => {
}),
},
visibleThemes.map(key =>
- h(
- 'div.puzzle__themes__list__entry',
- {
- class: {
- strike: votedThemes[key] === false,
- },
- },
- [
+ h('div.puzzle__themes__list__entry', { class: { strike: votedThemes[key] === false } }, [
+ h('a', { attrs: { href: `/training/${key}`, title: trans(`${key}Description`) } }, trans(key)),
+ allThemes &&
h(
- 'a',
- {
- attrs: {
- href: `/training/${key}`,
- title: trans(`${key}Description`),
- },
- },
- trans(key),
+ 'div.puzzle__themes__votes',
+ allThemes.static.has(key)
+ ? [h('div.puzzle__themes__lock', h('i', { attrs: dataIcon(licon.Padlock) }))]
+ : [
+ h('span.puzzle__themes__vote.vote-up', {
+ class: { active: votedThemes[key] },
+ attrs: { 'data-theme': key },
+ }),
+ h('span.puzzle__themes__vote.vote-down', {
+ class: { active: votedThemes[key] === false },
+ attrs: { 'data-theme': key },
+ }),
+ ],
),
- !allThemes
- ? null
- : h(
- 'div.puzzle__themes__votes',
- allThemes.static.has(key)
- ? [
- h(
- 'div.puzzle__themes__lock',
- h('i', {
- attrs: dataIcon(licon.Padlock),
- }),
- ),
- ]
- : [
- h('span.puzzle__themes__vote.vote-up', {
- class: { active: votedThemes[key] },
- attrs: { 'data-theme': key },
- }),
- h('span.puzzle__themes__vote.vote-down', {
- class: { active: votedThemes[key] === false },
- attrs: { 'data-theme': key },
- }),
- ],
- ),
- ],
- ),
+ ]),
),
),
...(availableThemes
@@ -147,37 +102,15 @@ const editor = (ctrl: Controller): VNode[] => {
},
},
[
- h(
- 'option',
- {
- attrs: { value: '', selected: true },
- },
- trans('addAnotherTheme'),
- ),
+ h('option', { attrs: { value: '', selected: true } }, trans('addAnotherTheme')),
...availableThemes.map(theme =>
- h(
- 'option',
- {
- attrs: {
- value: theme,
- title: trans(`${theme}Description`),
- },
- },
- trans(theme),
- ),
+ h('option', { attrs: { value: theme, title: trans(`${theme}Description`) } }, trans(theme)),
),
],
),
h(
'a.puzzle__themes__study.text',
- {
- attrs: {
- 'data-icon': licon.InfoCircle,
- href: studyUrl,
- target: '_blank',
- rel: 'noopener',
- },
- },
+ { attrs: { 'data-icon': licon.InfoCircle, href: studyUrl, target: '_blank', rel: 'noopener' } },
'About puzzle themes',
),
]
diff --git a/ui/puzzle/src/view/tree.ts b/ui/puzzle/src/view/tree.ts
index 1f5a5be8023af..9aaf8def95f54 100644
--- a/ui/puzzle/src/view/tree.ts
+++ b/ui/puzzle/src/view/tree.ts
@@ -1,13 +1,13 @@
-import { h, VNode, Classes } from 'snabbdom';
+import { VNode, Classes } from 'snabbdom';
import { defined } from 'common';
import throttle from 'common/throttle';
import { renderEval as normalizeEval } from 'ceval';
import { path as treePath } from 'tree';
-import { Controller } from '../interfaces';
-import { MaybeVNode, MaybeVNodes } from 'common/snabbdom';
+import { MaybeVNode, LooseVNodes, looseH as h } from 'common/snabbdom';
+import PuzzleCtrl from '../ctrl';
interface Ctx {
- ctrl: Controller;
+ ctrl: PuzzleCtrl;
}
interface RenderOpts {
@@ -21,18 +21,18 @@ interface Glyph {
symbol: string;
}
-const autoScroll = throttle(150, (ctrl: Controller, el) => {
+const autoScroll = throttle(150, (ctrl: PuzzleCtrl, el) => {
const cont = el.parentNode;
const target = el.querySelector('.active');
if (!target) {
- cont.scrollTop = ctrl.vm.path === treePath.root ? 0 : 99999;
+ cont.scrollTop = ctrl.path === treePath.root ? 0 : 99999;
return;
}
cont.scrollTop = target.offsetTop - cont.offsetHeight / 2 + target.offsetHeight;
});
function pathContains(ctx: Ctx, path: Tree.Path): boolean {
- return treePath.contains(ctx.ctrl.vm.path, path);
+ return treePath.contains(ctx.ctrl.path, path);
}
function plyToTurn(ply: number): number {
@@ -43,7 +43,7 @@ export function renderIndex(ply: number, withDots: boolean): VNode {
return h('index', plyToTurn(ply) + (withDots ? (ply % 2 === 1 ? '.' : '...') : ''));
}
-function renderChildrenOf(ctx: Ctx, node: Tree.Node, opts: RenderOpts): MaybeVNodes {
+function renderChildrenOf(ctx: Ctx, node: Tree.Node, opts: RenderOpts): LooseVNodes {
const cs = node.children,
main = cs[0];
if (!main) return [];
@@ -51,31 +51,19 @@ function renderChildrenOf(ctx: Ctx, node: Tree.Node, opts: RenderOpts): MaybeVNo
const isWhite = main.ply % 2 === 1;
if (!cs[1])
return [
- isWhite ? renderIndex(main.ply, false) : null,
- ...renderMoveAndChildrenOf(ctx, main, {
- parentPath: opts.parentPath,
- isMainline: true,
- }),
+ isWhite && renderIndex(main.ply, false),
+ ...renderMoveAndChildrenOf(ctx, main, { parentPath: opts.parentPath, isMainline: true }),
];
const mainChildren = renderChildrenOf(ctx, main, {
parentPath: opts.parentPath + main.id,
isMainline: true,
}),
- passOpts = {
- parentPath: opts.parentPath,
- isMainline: true,
- };
+ passOpts = { parentPath: opts.parentPath, isMainline: true };
return [
- isWhite ? renderIndex(main.ply, false) : null,
+ isWhite && renderIndex(main.ply, false),
renderMoveOf(ctx, main, passOpts),
- isWhite ? emptyMove() : null,
- h(
- 'interrupt',
- renderLines(ctx, cs.slice(1), {
- parentPath: opts.parentPath,
- isMainline: true,
- }),
- ),
+ isWhite && emptyMove(),
+ h('interrupt', renderLines(ctx, cs.slice(1), { parentPath: opts.parentPath, isMainline: true })),
...(isWhite && mainChildren ? [renderIndex(main.ply, false), emptyMove()] : []),
...mainChildren,
];
@@ -86,17 +74,11 @@ function renderChildrenOf(ctx: Ctx, node: Tree.Node, opts: RenderOpts): MaybeVNo
function renderLines(ctx: Ctx, nodes: Tree.Node[], opts: RenderOpts): VNode {
return h(
'lines',
- {
- class: { single: !!nodes[1] },
- },
+ { class: { single: !!nodes[1] } },
nodes.map(function (n) {
return h(
'line',
- renderMoveAndChildrenOf(ctx, n, {
- parentPath: opts.parentPath,
- isMainline: false,
- withIndex: true,
- }),
+ renderMoveAndChildrenOf(ctx, n, { parentPath: opts.parentPath, isMainline: false, withIndex: true }),
);
}),
);
@@ -109,64 +91,37 @@ function renderMoveOf(ctx: Ctx, node: Tree.Node, opts: RenderOpts): VNode {
function renderMainlineMoveOf(ctx: Ctx, node: Tree.Node, opts: RenderOpts): VNode {
const path = opts.parentPath + node.id;
const classes: Classes = {
- active: path === ctx.ctrl.vm.path,
- current: path === ctx.ctrl.vm.initialPath,
- hist: node.ply < ctx.ctrl.vm.initialNode.ply,
+ active: path === ctx.ctrl.path,
+ current: path === ctx.ctrl.initialPath,
+ hist: node.ply < ctx.ctrl.initialNode.ply,
};
if (node.puzzle) classes[node.puzzle] = true;
- return h(
- 'move',
- {
- attrs: { p: path },
- class: classes,
- },
- renderMove(ctx, node),
- );
+ return h('move', { attrs: { p: path }, class: classes }, renderMove(ctx, node));
}
function renderGlyph(glyph: Glyph): VNode {
- return h(
- 'glyph',
- {
- attrs: { title: glyph.name },
- },
- glyph.symbol,
- );
+ return h('glyph', { attrs: { title: glyph.name } }, glyph.symbol);
}
function puzzleGlyph(ctx: Ctx, node: Tree.Node): MaybeVNode {
switch (node.puzzle) {
case 'good':
case 'win':
- return renderGlyph({
- name: ctx.ctrl.trans.noarg('bestMove'),
- symbol: '✓',
- });
+ return renderGlyph({ name: ctx.ctrl.trans.noarg('bestMove'), symbol: '✓' });
case 'fail':
- return renderGlyph({
- name: ctx.ctrl.trans.noarg('puzzleFailed'),
- symbol: '✗',
- });
+ return renderGlyph({ name: ctx.ctrl.trans.noarg('puzzleFailed'), symbol: '✗' });
case 'retry':
- return renderGlyph({
- name: ctx.ctrl.trans.noarg('goodMove'),
- symbol: '?!',
- });
+ return renderGlyph({ name: ctx.ctrl.trans.noarg('goodMove'), symbol: '?!' });
default:
return;
}
}
-export function renderMove(ctx: Ctx, node: Tree.Node): MaybeVNodes {
+function renderMove(ctx: Ctx, node: Tree.Node): LooseVNodes {
const ev = node.eval || node.ceval;
return [
node.san,
- ev &&
- (defined(ev.cp)
- ? renderEval(normalizeEval(ev.cp))
- : defined(ev.mate)
- ? renderEval('#' + ev.mate)
- : undefined),
+ ev && (defined(ev.cp) ? renderEval(normalizeEval(ev.cp)) : defined(ev.mate) && renderEval('#' + ev.mate)),
puzzleGlyph(ctx, node),
];
}
@@ -174,29 +129,20 @@ export function renderMove(ctx: Ctx, node: Tree.Node): MaybeVNodes {
function renderVariationMoveOf(ctx: Ctx, node: Tree.Node, opts: RenderOpts): VNode {
const withIndex = opts.withIndex || node.ply % 2 === 1;
const path = opts.parentPath + node.id;
- const active = path === ctx.ctrl.vm.path;
- const classes: Classes = {
- active,
- parent: !active && pathContains(ctx, path),
- };
+ const active = path === ctx.ctrl.path;
+ const classes: Classes = { active, parent: !active && pathContains(ctx, path) };
if (node.puzzle) classes[node.puzzle] = true;
- return h(
- 'move',
- {
- attrs: { p: path },
- class: classes,
- },
- [withIndex ? renderIndex(node.ply, true) : null, node.san, puzzleGlyph(ctx, node)],
- );
+ return h('move', { attrs: { p: path }, class: classes }, [
+ withIndex && renderIndex(node.ply, true),
+ node.san,
+ puzzleGlyph(ctx, node),
+ ]);
}
-function renderMoveAndChildrenOf(ctx: Ctx, node: Tree.Node, opts: RenderOpts): MaybeVNodes {
+function renderMoveAndChildrenOf(ctx: Ctx, node: Tree.Node, opts: RenderOpts): LooseVNodes {
return [
renderMoveOf(ctx, node, opts),
- ...renderChildrenOf(ctx, node, {
- parentPath: opts.parentPath + node.id,
- isMainline: opts.isMainline,
- }),
+ ...renderChildrenOf(ctx, node, { parentPath: opts.parentPath + node.id, isMainline: opts.isMainline }),
];
}
@@ -213,12 +159,9 @@ function eventPath(e: Event): Tree.Path | null {
return target.getAttribute('p') || (target.parentNode as HTMLElement).getAttribute('p');
}
-export function render(ctrl: Controller): VNode {
- const root = ctrl.getTree().root;
- const ctx = {
- ctrl: ctrl,
- showComputer: false,
- };
+export function render(ctrl: PuzzleCtrl): VNode {
+ const root = ctrl.tree.root;
+ const ctx = { ctrl: ctrl, showComputer: false };
return h(
'div.tview2.tview2-column',
{
@@ -234,23 +177,20 @@ export function render(ctrl: Controller): VNode {
});
},
postpatch: (_, vnode) => {
- if (ctrl.vm.autoScrollNow) {
+ if (ctrl.autoScrollNow) {
autoScroll(ctrl, vnode.elm as HTMLElement);
- ctrl.vm.autoScrollNow = false;
+ ctrl.autoScrollNow = false;
+ ctrl.autoScrollRequested = false;
+ } else if (ctrl.autoScrollRequested) {
+ if (ctrl.path !== treePath.root) autoScroll(ctrl, vnode.elm as HTMLElement);
ctrl.autoScrollRequested = false;
- } else if (ctrl.vm.autoScrollRequested) {
- if (ctrl.vm.path !== treePath.root) autoScroll(ctrl, vnode.elm as HTMLElement);
- ctrl.vm.autoScrollRequested = false;
}
},
},
},
[
...(root.ply % 2 === 1 ? [renderIndex(root.ply, false), emptyMove()] : []),
- ...renderChildrenOf(ctx, root, {
- parentPath: '',
- isMainline: true,
- }),
+ ...renderChildrenOf(ctx, root, { parentPath: '', isMainline: true }),
],
);
}
diff --git a/ui/racer/package.json b/ui/racer/package.json
index 4c45c4322d04c..a5bc0af91a9d7 100644
--- a/ui/racer/package.json
+++ b/ui/racer/package.json
@@ -13,7 +13,7 @@
"license": "AGPL-3.0-or-later",
"dependencies": {
"chess": "workspace:*",
- "chessops": "^0.12.7",
+ "chessops": "^0.13.0",
"common": "workspace:*",
"puz": "workspace:*",
"snabbdom": "^3.5.1"
diff --git a/ui/racer/src/view/board.ts b/ui/racer/src/view/board.ts
index c028ac4b882ea..934d0f057065e 100644
--- a/ui/racer/src/view/board.ts
+++ b/ui/racer/src/view/board.ts
@@ -23,11 +23,7 @@ const renderGround = (ctrl: RacerCtrl): VNode =>
makeCgConfig(
ctrl.isRacing() && ctrl.isPlayer()
? makeCgOpts(ctrl.run, true, ctrl.flipped)
- : {
- fen: INITIAL_BOARD_FEN,
- orientation: ctrl.run.pov,
- movable: { color: ctrl.run.pov },
- },
+ : { fen: INITIAL_BOARD_FEN, orientation: ctrl.run.pov, movable: { color: ctrl.run.pov } },
ctrl.pref,
ctrl.userMove,
),
@@ -39,15 +35,9 @@ const renderGround = (ctrl: RacerCtrl): VNode =>
const renderCountdown = (seconds: number) =>
h('div.racer__countdown', [
h('div.racer__countdown__lights', [
- h('light.red', {
- class: { active: seconds > 4 },
- }),
- h('light.orange', {
- class: { active: seconds == 3 || seconds == 4 },
- }),
- h('light.green', {
- class: { active: seconds <= 2 },
- }),
+ h('light.red', { class: { active: seconds > 4 } }),
+ h('light.orange', { class: { active: seconds == 3 || seconds == 4 } }),
+ h('light.green', { class: { active: seconds <= 2 } }),
]),
h('div.racer__countdown__seconds', seconds),
]);
diff --git a/ui/racer/src/view/main.ts b/ui/racer/src/view/main.ts
index 85ca1be37cbf1..9d90e687548e4 100644
--- a/ui/racer/src/view/main.ts
+++ b/ui/racer/src/view/main.ts
@@ -3,8 +3,8 @@ import RacerCtrl from '../ctrl';
import renderClock from 'puz/view/clock';
import renderHistory from 'puz/view/history';
import * as licon from 'common/licon';
-import { MaybeVNodes, bind } from 'common/snabbdom';
-import { h, VNode } from 'snabbdom';
+import { MaybeVNodes, bind, looseH as h } from 'common/snabbdom';
+import { VNode } from 'snabbdom';
import { playModifiers, renderCombo } from 'puz/view/util';
import { renderRace } from './race';
import { renderBoard } from './board';
@@ -13,12 +13,7 @@ import { povMessage } from 'puz/run';
export default function (ctrl: RacerCtrl): VNode {
return h(
'div.racer.racer-app.racer--play',
- {
- class: {
- ...playModifiers(ctrl.run),
- [`racer--${ctrl.status()}`]: true,
- },
- },
+ { class: { ...playModifiers(ctrl.run), [`racer--${ctrl.status()}`]: true } },
[
renderBoard(ctrl),
h('div.puz-side', selectScreen(ctrl)),
@@ -46,7 +41,7 @@ const selectScreen = (ctrl: RacerCtrl): MaybeVNodes => {
),
povMsg,
]),
- ctrl.knowsSkip() ? null : renderSkip(ctrl),
+ !ctrl.knowsSkip() && renderSkip(ctrl),
]),
comboZone(ctrl),
]
@@ -92,12 +87,8 @@ const renderSkip = (ctrl: RacerCtrl) =>
h(
'button.racer__skip.button.button-red',
{
- class: {
- disabled: !ctrl.canSkip(),
- },
- attrs: {
- title: ctrl.trans.noarg('skipExplanation'),
- },
+ class: { disabled: !ctrl.canSkip() },
+ attrs: { title: ctrl.trans.noarg('skipExplanation') },
hook: bind('click', ctrl.skip),
},
ctrl.trans.noarg('skip'),
@@ -125,14 +116,8 @@ const renderControls = (ctrl: RacerCtrl): VNode =>
h(
'div.puz-side__control',
h('a.puz-side__control__flip.button', {
- class: {
- active: ctrl.flipped,
- 'button-empty': !ctrl.flipped,
- },
- attrs: {
- 'data-icon': licon.ChasingArrows,
- title: ctrl.trans.noarg('flipBoard') + ' (Keyboard: f)',
- },
+ class: { active: ctrl.flipped, 'button-empty': !ctrl.flipped },
+ attrs: { 'data-icon': licon.ChasingArrows, title: ctrl.trans.noarg('flipBoard') + ' (Keyboard: f)' },
hook: bind('click', ctrl.flip),
}),
);
@@ -155,47 +140,33 @@ const renderLink = (ctrl: RacerCtrl) =>
},
}),
h('button.copy.button', {
- attrs: {
- title: 'Copy URL',
- 'data-rel': `racer-url-${ctrl.race.id}`,
- 'data-icon': licon.Link,
- },
+ attrs: { title: 'Copy URL', 'data-rel': `racer-url-${ctrl.race.id}`, 'data-icon': licon.Link },
}),
]),
]);
const renderStart = (ctrl: RacerCtrl) =>
- ctrl.isOwner() && !ctrl.vm.startsAt
- ? h(
- 'div.puz-side__start',
- h(
- 'button.button.button-fat',
- {
- class: {
- disabled: ctrl.players().length < 2,
- },
- hook: bind('click', ctrl.start),
- attrs: {
- disabled: ctrl.players().length < 2,
- },
- },
- ctrl.trans.noarg('startTheRace'),
- ),
- )
- : null;
-
-const renderJoin = (ctrl: RacerCtrl) =>
+ ctrl.isOwner() &&
+ !ctrl.vm.startsAt &&
h(
- 'div.puz-side__join',
+ 'div.puz-side__start',
h(
'button.button.button-fat',
{
- hook: bind('click', ctrl.join),
+ class: { disabled: ctrl.players().length < 2 },
+ hook: bind('click', ctrl.start),
+ attrs: { disabled: ctrl.players().length < 2 },
},
- ctrl.trans.noarg('joinTheRace'),
+ ctrl.trans.noarg('startTheRace'),
),
);
+const renderJoin = (ctrl: RacerCtrl) =>
+ h(
+ 'div.puz-side__join',
+ h('button.button.button-fat', { hook: bind('click', ctrl.join) }, ctrl.trans.noarg('joinTheRace')),
+ );
+
const yourRank = (ctrl: RacerCtrl) => {
const score = ctrl.myScore();
if (!score) return;
@@ -207,53 +178,31 @@ const yourRank = (ctrl: RacerCtrl) => {
const waitForRematch = (noarg: TransNoArg) =>
h(
`a.racer__new-race.button.button-fat.button-navaway.disabled`,
- {
- attrs: { disabled: true },
- },
+ { attrs: { disabled: true } },
noarg('waitForRematch'),
);
const lobbyNext = (ctrl: RacerCtrl) =>
- h(
- 'form',
- {
- attrs: {
- action: '/racer/lobby',
- method: 'post',
- },
- },
- [
- h(
- `button.racer__new-race.button.button-navaway${ctrl.race.lobby ? '.button-fat' : '.button-empty'}`,
- ctrl.trans.noarg('nextRace'),
- ),
- ],
- );
+ h('form', { attrs: { action: '/racer/lobby', method: 'post' } }, [
+ h(
+ `button.racer__new-race.button.button-navaway${ctrl.race.lobby ? '.button-fat' : '.button-empty'}`,
+ ctrl.trans.noarg('nextRace'),
+ ),
+ ]);
const friendNext = (ctrl: RacerCtrl) =>
h('div.racer__post__next', [
h(
`a.racer__rematch.button.button-fat.button-navaway`,
- {
- attrs: { href: `/racer/${ctrl.race.id}/rematch` },
- },
+ { attrs: { href: `/racer/${ctrl.race.id}/rematch` } },
ctrl.trans.noarg('joinRematch'),
),
h(
'form.racer__post__next__new',
- {
- attrs: {
- action: '/racer',
- method: 'post',
- },
- },
+ { attrs: { action: '/racer', method: 'post' } },
h(
'button.racer__post__next__button.button.button-empty',
- {
- attrs: {
- type: 'submit',
- },
- },
+ { attrs: { type: 'submit' } },
ctrl.trans.noarg('createNewGame'),
),
),
diff --git a/ui/racer/src/view/race.ts b/ui/racer/src/view/race.ts
index e606422229988..d5bfc5b55447d 100644
--- a/ui/racer/src/view/race.ts
+++ b/ui/racer/src/view/race.ts
@@ -26,11 +26,7 @@ export const renderRace = (ctrl: RacerCtrl) => {
});
return h(
'div.racer__race',
- {
- attrs: {
- style: `height:${players.length * trackHeight + 14}px`,
- },
- },
+ { attrs: { style: `height:${players.length * trackHeight + 14}px` } },
h('div.racer__race__tracks', tracks),
);
};
@@ -75,12 +71,4 @@ const renderTrack = (
export const playerLink = (player: PlayerWithScore, isMe: boolean) =>
player.id
? userLink({ ...player, line: false })
- : h(
- 'anonymous',
- {
- attrs: {
- title: 'Anonymous player',
- },
- },
- [player.name, isMe ? ' (you)' : undefined],
- );
+ : h('anonymous', { attrs: { title: 'Anonymous player' } }, [player.name, isMe ? ' (you)' : undefined]);
diff --git a/ui/round/src/clock/clockView.ts b/ui/round/src/clock/clockView.ts
index c8b305d419df0..e3c0221df7287 100644
--- a/ui/round/src/clock/clockView.ts
+++ b/ui/round/src/clock/clockView.ts
@@ -4,7 +4,8 @@ import * as game from 'game';
import RoundController from '../ctrl';
import { bind, justIcon } from '../util';
import { ClockElements, ClockController, Millis } from './clockCtrl';
-import { h, Hooks } from 'snabbdom';
+import { Hooks } from 'snabbdom';
+import { looseH as h } from 'common/snabbdom';
import { Position } from '../interfaces';
export function renderClock(ctrl: RoundController, player: game.Player, position: Position) {
@@ -28,28 +29,12 @@ export function renderClock(ctrl: RoundController, player: game.Player, position
// the player.color class ensures that when the board is flipped, the clock is redrawn. solves bug where clock
// would be incorrectly latched to red color: https://github.com/lichess-org/lila/issues/10774
`div.rclock.rclock-${position}.rclock-${player.color}`,
- {
- class: {
- outoftime: millis <= 0,
- running: isRunning,
- emerg: millis < clock.emergMs,
- },
- },
+ { class: { outoftime: millis <= 0, running: isRunning, emerg: millis < clock.emergMs } },
clock.opts.nvui
- ? [
- h('div.time', {
- attrs: { role: 'timer' },
- hook: timeHook,
- }),
- ]
+ ? [h('div.time', { attrs: { role: 'timer' }, hook: timeHook })]
: [
clock.showBar && game.bothPlayersHavePlayed(ctrl.data) ? showBar(ctrl, player.color) : undefined,
- h('div.time', {
- class: {
- hour: millis > 3600 * 1000,
- },
- hook: timeHook,
- }),
+ h('div.time', { class: { hour: millis > 3600 * 1000 }, hook: timeHook }),
renderBerserk(ctrl, player.color, position),
isPlayer ? goBerserk(ctrl) : button.moretime(ctrl),
tourRank(ctrl, player.color, position),
@@ -141,10 +126,7 @@ const goBerserk = (ctrl: RoundController) => {
if (!game.berserkableBy(ctrl.data)) return;
if (ctrl.goneBerserk[ctrl.data.player.color]) return;
return h('button.fbt.go-berserk', {
- attrs: {
- title: 'GO BERSERK! Half the time, no increment, bonus point',
- 'data-icon': licon.Berserk,
- },
+ attrs: { title: 'GO BERSERK! Half the time, no increment, bonus point', 'data-icon': licon.Berserk },
hook: bind('click', ctrl.goBerserk),
});
};
@@ -152,13 +134,9 @@ const goBerserk = (ctrl: RoundController) => {
const tourRank = (ctrl: RoundController, color: Color, position: Position) => {
const d = ctrl.data,
ranks = d.tournament?.ranks || d.swiss?.ranks;
- return ranks && !showBerserk(ctrl, color)
- ? h(
- 'div.tour-rank.' + position,
- {
- attrs: { title: 'Current tournament rank' },
- },
- '#' + ranks[color],
- )
- : null;
+ return (
+ ranks &&
+ !showBerserk(ctrl, color) &&
+ h('div.tour-rank.' + position, { attrs: { title: 'Current tournament rank' } }, '#' + ranks[color])
+ );
};
diff --git a/ui/round/src/corresClock/corresClockView.ts b/ui/round/src/corresClock/corresClockView.ts
index 242a55ee68a11..f38cd4e9d75d1 100644
--- a/ui/round/src/corresClock/corresClockView.ts
+++ b/ui/round/src/corresClock/corresClockView.ts
@@ -1,4 +1,4 @@
-import { h } from 'snabbdom';
+import { looseH as h } from 'common/snabbdom';
import { Millis } from '../clock/clockCtrl';
import { Position } from '../interfaces';
import { CorresClockController } from './corresClockCtrl';
@@ -47,20 +47,10 @@ export default function (
direction = document.dir == 'rtl' && millis < 86400 * 1000 ? 'ltr' : undefined;
return h(
'div.rclock.rclock-correspondence.rclock-' + position,
- {
- class: {
- outoftime: millis <= 0,
- running: runningColor === color,
- },
- },
+ { class: { outoftime: millis <= 0, running: runningColor === color } },
[
- ctrl.data.showBar
- ? h('div.bar', [
- h('span', {
- attrs: { style: `width: ${ctrl.timePercent(color)}%` },
- }),
- ])
- : null,
+ ctrl.data.showBar &&
+ h('div.bar', [h('span', { attrs: { style: `width: ${ctrl.timePercent(color)}%` } })]),
h('div.time', {
attrs: direction && { style: `direction: ${direction}` },
hook: {
@@ -68,7 +58,7 @@ export default function (
postpatch: (_, vnode) => update(vnode.elm as HTMLElement),
},
}),
- isPlayer ? null : moretime(ctrl.root),
+ !isPlayer && moretime(ctrl.root),
],
);
}
diff --git a/ui/round/src/crazy/crazyView.ts b/ui/round/src/crazy/crazyView.ts
index 598eb10393b7c..877d89121dee5 100644
--- a/ui/round/src/crazy/crazyView.ts
+++ b/ui/round/src/crazy/crazyView.ts
@@ -43,11 +43,7 @@ export default function pocket(ctrl: RoundController, color: Color, position: Po
'div.pocket-c2',
h('piece.' + role + '.' + color, {
class: { premove: activeColor && preDropRole === role },
- attrs: {
- 'data-role': role,
- 'data-color': color,
- 'data-nb': nb,
- },
+ attrs: { 'data-role': role, 'data-color': color, 'data-nb': nb },
}),
),
);
diff --git a/ui/round/src/plugins/nvui.ts b/ui/round/src/plugins/nvui.ts
index 253f81be3fbf0..dcbd8ed97f9da 100644
--- a/ui/round/src/plugins/nvui.ts
+++ b/ui/round/src/plugins/nvui.ts
@@ -1,4 +1,5 @@
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
+import { looseH as h } from 'common/snabbdom';
import RoundController from '../ctrl';
import { renderClock } from '../clock/clockView';
import { renderTableWatch, renderTablePlay, renderTableEnd } from '../view/table';
@@ -80,221 +81,182 @@ export function initModule(): NvuiPlugin {
);
if (variantNope) setTimeout(() => notify.set(variantNope), 3000);
}
- return h(
- 'div.nvui',
- {
- hook: onInsert(_ => setTimeout(() => notify.set(gameText(ctrl)), 2000)),
- },
- [
- h('h1', gameText(ctrl)),
- h('h2', 'Game info'),
- ...['white', 'black'].map((color: Color) =>
- h('p', [color + ' player: ', playerHtml(ctrl, ctrl.playerByColor(color))]),
- ),
- h('p', `${d.game.rated ? 'Rated' : 'Casual'} ${d.game.perf}`),
- d.clock ? h('p', `Clock: ${d.clock.initial / 60} + ${d.clock.increment}`) : null,
- h('h2', 'Moves'),
- h(
- 'p.moves',
- {
- attrs: {
- role: 'log',
- 'aria-live': 'off',
- },
- },
- renderMoves(d.steps.slice(1), style),
- ),
- h('h2', 'Pieces'),
- h('div.pieces', renderPieces(ctrl.chessground.state.pieces, style)),
- h('h2', 'Game status'),
- h(
- 'div.status',
- {
- attrs: {
- role: 'status',
- 'aria-live': 'assertive',
- 'aria-atomic': 'true',
- },
- },
- [ctrl.data.game.status.name === 'started' ? 'Playing' : renderResult(ctrl)],
- ),
- h('h2', 'Last move'),
- h(
- 'p.lastMove',
- {
- attrs: {
- 'aria-live': 'assertive',
- 'aria-atomic': 'true',
- },
- },
- // make sure consecutive moves are different so that they get re-read
- renderSan(step.san, step.uci, style) + (ctrl.ply % 2 === 0 ? '' : ' '),
- ),
- ...(ctrl.isPlaying()
- ? [
- h('h2', 'Move form'),
- h(
- 'form',
- {
- hook: onInsert(el => {
- const $form = $(el as HTMLFormElement),
- $input = $form.find('.move').val('');
- $input[0]!.focus();
- nvui.submitMove = createSubmitHandler(ctrl, notify.set, moveStyle.get, $input);
- $form.on('submit', () => nvui.submitMove?.());
- }),
- },
- [
- h('label', [
- d.player.color === d.game.player ? 'Your move' : 'Waiting',
- h('input.move.mousetrap', {
- attrs: {
- name: 'move',
- type: 'text',
- autocomplete: 'off',
- autofocus: true,
- disabled: !!variantNope,
- title: variantNope,
- },
- }),
- ]),
- ],
- ),
- ]
- : []),
- h('h2', 'Your clock'),
- h('div.botc', anyClock(ctrl, 'bottom')),
- h('h2', 'Opponent clock'),
- h('div.topc', anyClock(ctrl, 'top')),
- notify.render(),
- h('h2', 'Actions'),
- ...(ctrl.data.player.spectator
- ? renderTableWatch(ctrl)
- : game.playable(ctrl.data)
- ? renderTablePlay(ctrl)
- : renderTableEnd(ctrl)),
- h('h2', 'Board'),
+ return h('div.nvui', { hook: onInsert(_ => setTimeout(() => notify.set(gameText(ctrl)), 2000)) }, [
+ h('h1', gameText(ctrl)),
+ h('h2', 'Game info'),
+ ...['white', 'black'].map((color: Color) =>
+ h('p', [color + ' player: ', playerHtml(ctrl, ctrl.playerByColor(color))]),
+ ),
+ h('p', `${d.game.rated ? 'Rated' : 'Casual'} ${d.game.perf}`),
+ d.clock ? h('p', `Clock: ${d.clock.initial / 60} + ${d.clock.increment}`) : null,
+ h('h2', 'Moves'),
+ h('p.moves', { attrs: { role: 'log', 'aria-live': 'off' } }, renderMoves(d.steps.slice(1), style)),
+ h('h2', 'Pieces'),
+ h('div.pieces', renderPieces(ctrl.chessground.state.pieces, style)),
+ h('h2', 'Game status'),
+ h('div.status', { attrs: { role: 'status', 'aria-live': 'assertive', 'aria-atomic': 'true' } }, [
+ ctrl.data.game.status.name === 'started' ? 'Playing' : renderResult(ctrl),
+ ]),
+ h('h2', 'Last move'),
+ h(
+ 'p.lastMove',
+ { attrs: { 'aria-live': 'assertive', 'aria-atomic': 'true' } },
+ // make sure consecutive moves are different so that they get re-read
+ renderSan(step.san, step.uci, style) + (ctrl.ply % 2 === 0 ? '' : ' '),
+ ),
+ ctrl.isPlaying() && h('h2', 'Move form'),
+ ctrl.isPlaying() &&
h(
- 'div.board',
+ 'form',
{
hook: onInsert(el => {
- const $board = $(el as HTMLElement);
- $board.on('keypress', () => console.log(ctrl));
- // NOTE: This is the only line different from analysis board listener setup
- const $buttons = $board.find('button');
- $buttons.on(
- 'click',
- selectionHandler(() => ctrl.data.opponent.color, selectSound),
- );
- $buttons.on('keydown', arrowKeyHandler(ctrl.data.player.color, borderSound));
- $buttons.on('keypress', boardCommandsHandler());
- $buttons.on(
- 'keypress',
- lastCapturedCommandHandler(
- () => ctrl.data.steps.map(step => step.fen),
- pieceStyle.get(),
- prefixStyle.get(),
- ),
- );
- $buttons.on(
- 'keypress',
- possibleMovesHandler(
- ctrl.data.player.color,
- () => ctrl.chessground.state.turnColor,
- ctrl.chessground.getFen,
- () => ctrl.chessground.state.pieces,
- ctrl.data.game.variant.key,
- () => ctrl.chessground.state.movable.dests,
- () => ctrl.data.steps,
- ),
- );
- $buttons.on('keypress', positionJumpHandler());
- $buttons.on('keypress', pieceJumpingHandler(selectSound, errorSound));
+ const $form = $(el as HTMLFormElement),
+ $input = $form.find('.move').val('');
+ $input[0]!.focus();
+ nvui.submitMove = createSubmitHandler(ctrl, notify.set, moveStyle.get, $input);
+ $form.on('submit', () => nvui.submitMove?.());
}),
},
- renderBoard(
- ctrl.chessground.state.pieces,
- ctrl.data.player.color,
- pieceStyle.get(),
- prefixStyle.get(),
- positionStyle.get(),
- boardStyle.get(),
- ),
+ [
+ h('label', [
+ d.player.color === d.game.player ? 'Your move' : 'Waiting',
+ h('input.move.mousetrap', {
+ attrs: {
+ name: 'move',
+ type: 'text',
+ autocomplete: 'off',
+ autofocus: true,
+ disabled: !!variantNope,
+ title: variantNope,
+ },
+ }),
+ ]),
+ ],
),
- h(
- 'div.boardstatus',
- {
- attrs: {
- 'aria-live': 'polite',
- 'aria-atomic': 'true',
- },
- },
- '',
+
+ h('h2', 'Your clock'),
+ h('div.botc', anyClock(ctrl, 'bottom')),
+ h('h2', 'Opponent clock'),
+ h('div.topc', anyClock(ctrl, 'top')),
+ notify.render(),
+ h('h2', 'Actions'),
+ ...(ctrl.data.player.spectator
+ ? renderTableWatch(ctrl)
+ : game.playable(ctrl.data)
+ ? renderTablePlay(ctrl)
+ : renderTableEnd(ctrl)),
+ h('h2', 'Board'),
+ h(
+ 'div.board',
+ {
+ hook: onInsert(el => {
+ const $board = $(el as HTMLElement);
+ $board.on('keypress', () => console.log(ctrl));
+ // NOTE: This is the only line different from analysis board listener setup
+ const $buttons = $board.find('button');
+ $buttons.on(
+ 'click',
+ selectionHandler(() => ctrl.data.opponent.color, selectSound),
+ );
+ $buttons.on('keydown', arrowKeyHandler(ctrl.data.player.color, borderSound));
+ $buttons.on('keypress', boardCommandsHandler());
+ $buttons.on(
+ 'keypress',
+ lastCapturedCommandHandler(
+ () => ctrl.data.steps.map(step => step.fen),
+ pieceStyle.get(),
+ prefixStyle.get(),
+ ),
+ );
+ $buttons.on(
+ 'keypress',
+ possibleMovesHandler(
+ ctrl.data.player.color,
+ () => ctrl.chessground.state.turnColor,
+ ctrl.chessground.getFen,
+ () => ctrl.chessground.state.pieces,
+ ctrl.data.game.variant.key,
+ () => ctrl.chessground.state.movable.dests,
+ () => ctrl.data.steps,
+ ),
+ );
+ $buttons.on('keypress', positionJumpHandler());
+ $buttons.on('keypress', pieceJumpingHandler(selectSound, errorSound));
+ }),
+ },
+ renderBoard(
+ ctrl.chessground.state.pieces,
+ ctrl.data.player.color,
+ pieceStyle.get(),
+ prefixStyle.get(),
+ positionStyle.get(),
+ boardStyle.get(),
),
- // h('p', takes(ctrl.data.steps.map(data => data.fen))),
- h('h2', 'Settings'),
- h('label', ['Move notation', renderSetting(moveStyle, ctrl.redraw)]),
- h('h3', 'Board settings'),
- h('label', ['Piece style', renderSetting(pieceStyle, ctrl.redraw)]),
- h('label', ['Piece prefix style', renderSetting(prefixStyle, ctrl.redraw)]),
- h('label', ['Show position', renderSetting(positionStyle, ctrl.redraw)]),
- h('label', ['Board layout', renderSetting(boardStyle, ctrl.redraw)]),
- h('h2', 'Commands'),
- h('p', [
- 'Type these commands in the move input.',
- h('br'),
- 'c: Read clocks.',
- h('br'),
- 'l: Read last move.',
- h('br'),
- 'o: Read name and rating of the opponent.',
- h('br'),
- commands.piece.help,
- h('br'),
- commands.scan.help,
- h('br'),
- 'abort: Abort game.',
- h('br'),
- 'resign: Resign game.',
- h('br'),
- 'draw: Offer or accept draw.',
- h('br'),
- 'takeback: Offer or accept take back.',
- h('br'),
- ]),
- h('h2', 'Board mode commands'),
- h('p', [
- 'Use these commands when focused on the board itself.',
- h('br'),
- 'o: announce current position.',
- h('br'),
- "c: announce last move's captured piece.",
- h('br'),
- 'l: announce last move.',
- h('br'),
- 't: announce clocks.',
- h('br'),
- 'm: announce possible moves for the selected piece.',
- h('br'),
- 'shift+m: announce possible moves for the selected pieces which capture..',
- h('br'),
- 'arrow keys: move left, right, up or down.',
- h('br'),
- 'kqrbnp/KQRBNP: move forward/backward to a piece.',
- h('br'),
- '1-8: move to rank 1-8.',
- h('br'),
- 'Shift+1-8: move to file a-h.',
- h('br'),
- ]),
- h('h2', 'Promotion'),
- h('p', [
- 'Standard PGN notation selects the piece to promote to. Example: a8=n promotes to a knight.',
- h('br'),
- 'Omission results in promotion to queen',
- ]),
- ],
- );
+ ),
+ h('div.boardstatus', { attrs: { 'aria-live': 'polite', 'aria-atomic': 'true' } }, ''),
+ // h('p', takes(ctrl.data.steps.map(data => data.fen))),
+ h('h2', 'Settings'),
+ h('label', ['Move notation', renderSetting(moveStyle, ctrl.redraw)]),
+ h('h3', 'Board settings'),
+ h('label', ['Piece style', renderSetting(pieceStyle, ctrl.redraw)]),
+ h('label', ['Piece prefix style', renderSetting(prefixStyle, ctrl.redraw)]),
+ h('label', ['Show position', renderSetting(positionStyle, ctrl.redraw)]),
+ h('label', ['Board layout', renderSetting(boardStyle, ctrl.redraw)]),
+ h('h2', 'Commands'),
+ h('p', [
+ 'Type these commands in the move input.',
+ h('br'),
+ 'c: Read clocks.',
+ h('br'),
+ 'l: Read last move.',
+ h('br'),
+ 'o: Read name and rating of the opponent.',
+ h('br'),
+ commands.piece.help,
+ h('br'),
+ commands.scan.help,
+ h('br'),
+ 'abort: Abort game.',
+ h('br'),
+ 'resign: Resign game.',
+ h('br'),
+ 'draw: Offer or accept draw.',
+ h('br'),
+ 'takeback: Offer or accept take back.',
+ h('br'),
+ ]),
+ h('h2', 'Board mode commands'),
+ h('p', [
+ 'Use these commands when focused on the board itself.',
+ h('br'),
+ 'o: announce current position.',
+ h('br'),
+ "c: announce last move's captured piece.",
+ h('br'),
+ 'l: announce last move.',
+ h('br'),
+ 't: announce clocks.',
+ h('br'),
+ 'm: announce possible moves for the selected piece.',
+ h('br'),
+ 'shift+m: announce possible moves for the selected pieces which capture..',
+ h('br'),
+ 'arrow keys: move left, right, up or down.',
+ h('br'),
+ 'kqrbnp/KQRBNP: move forward/backward to a piece.',
+ h('br'),
+ '1-8: move to rank 1-8.',
+ h('br'),
+ 'Shift+1-8: move to file a-h.',
+ h('br'),
+ ]),
+ h('h2', 'Promotion'),
+ h('p', [
+ 'Standard PGN notation selects the piece to promote to. Example: a8=n promotes to a knight.',
+ h('br'),
+ 'Omission results in promotion to queen',
+ ]),
+ ]);
},
};
}
@@ -417,9 +379,7 @@ function playerHtml(ctrl: RoundController, player: game.Player) {
? h('span', [
h(
'a',
- {
- attrs: { href: '/@/' + user.username },
- },
+ { attrs: { href: '/@/' + user.username } },
user.title ? `${user.title} ${user.username}` : user.username,
),
rating ? ` ${rating}` : ``,
diff --git a/ui/round/src/tourStanding.ts b/ui/round/src/tourStanding.ts
index 6c612a25f1c02..d8aa65d59d9da 100644
--- a/ui/round/src/tourStanding.ts
+++ b/ui/round/src/tourStanding.ts
@@ -21,51 +21,26 @@ export const tourStandingCtrl = (
name: name,
},
view(): VNode {
- return h(
- 'div',
- {
- hook: onInsert(_ => lichess.asset.loadCssPath('round.tour-standing')),
- },
- [
- team
- ? h(
- 'h3.text',
- {
- attrs: { 'data-icon': licon.Group },
- },
- team.name,
- )
- : null,
- h('table.slist', [
- h(
- 'tbody',
- players.map((p: TourPlayer, i: number) => {
- return h('tr.' + p.n, [
- h('td.name', [
- h('span.rank', '' + (i + 1)),
- h(
- 'a.user-link.ulpt',
- {
- attrs: { href: `/@/${p.n}` },
- },
- (p.t ? p.t + ' ' : '') + p.n,
- ),
- ]),
- h(
- 'td.total',
- p.f
- ? {
- class: { 'is-gold': true },
- attrs: { 'data-icon': licon.Fire },
- }
- : {},
- '' + p.s,
- ),
- ]);
- }),
- ),
- ]),
- ],
- );
+ return h('div', { hook: onInsert(_ => lichess.asset.loadCssPath('round.tour-standing')) }, [
+ team ? h('h3.text', { attrs: { 'data-icon': licon.Group } }, team.name) : null,
+ h('table.slist', [
+ h(
+ 'tbody',
+ players.map((p: TourPlayer, i: number) => {
+ return h('tr.' + p.n, [
+ h('td.name', [
+ h('span.rank', '' + (i + 1)),
+ h('a.user-link.ulpt', { attrs: { href: `/@/${p.n}` } }, (p.t ? p.t + ' ' : '') + p.n),
+ ]),
+ h(
+ 'td.total',
+ p.f ? { class: { 'is-gold': true }, attrs: { 'data-icon': licon.Fire } } : {},
+ '' + p.s,
+ ),
+ ]);
+ }),
+ ),
+ ]),
+ ]);
},
});
diff --git a/ui/round/src/view/button.ts b/ui/round/src/view/button.ts
index 6bb3af79e1766..667e651bf131a 100644
--- a/ui/round/src/view/button.ts
+++ b/ui/round/src/view/button.ts
@@ -1,4 +1,4 @@
-import { h, VNode, Hooks } from 'snabbdom';
+import { VNode, Hooks } from 'snabbdom';
import * as licon from 'common/licon';
import { spinnerVdom as spinner } from 'common/spinner';
import * as util from '../util';
@@ -8,7 +8,7 @@ import { game as gameRoute } from 'game/router';
import { RoundData } from '../interfaces';
import { ClockData } from '../clock/clockCtrl';
import RoundController from '../ctrl';
-import { MaybeVNodes } from 'common/snabbdom';
+import { LooseVNodes, looseH as h } from 'common/snabbdom';
export interface ButtonState {
enabled: boolean;
@@ -23,25 +23,26 @@ function poolUrl(clock: ClockData, blocking?: game.PlayerUser) {
return '/#pool/' + clock.initial / 60 + '+' + clock.increment + (blocking ? '/' + blocking.id : '');
}
-function analysisButton(ctrl: RoundController): VNode | null {
+function analysisButton(ctrl: RoundController): VNode | false {
const d = ctrl.data,
url = gameRoute(d, analysisBoardOrientation(d)) + '#' + ctrl.ply;
- return game.replayable(d)
- ? h(
- 'a.fbt',
- {
- attrs: { href: url },
- hook: util.bind('click', _ => {
- // force page load in case the URL is the same
- if (location.pathname === url.split('#')[0]) location.reload();
- }),
- },
- ctrl.noarg('analysis'),
- )
- : null;
+ return (
+ game.replayable(d) &&
+ h(
+ 'a.fbt',
+ {
+ attrs: { href: url },
+ hook: util.bind('click', _ => {
+ // force page load in case the URL is the same
+ if (location.pathname === url.split('#')[0]) location.reload();
+ }),
+ },
+ ctrl.noarg('analysis'),
+ )
+ );
}
-function rematchButtons(ctrl: RoundController): MaybeVNodes {
+function rematchButtons(ctrl: RoundController): LooseVNodes {
const d = ctrl.data,
me = !!d.player.offeringRematch,
disabled = !me && !d.opponent.onGame && (!!d.clock || !d.player.user || !d.opponent.user),
@@ -49,27 +50,19 @@ function rematchButtons(ctrl: RoundController): MaybeVNodes {
noarg = ctrl.noarg;
if (!game.rematchable(d)) return [];
return [
- them
- ? h(
- 'button.rematch-decline',
- {
- attrs: {
- 'data-icon': licon.X,
- title: noarg('decline'),
- },
- hook: util.bind('click', () => ctrl.socket.send('rematch-no')),
- },
- ctrl.nvui ? noarg('decline') : '',
- )
- : null,
+ them &&
+ h(
+ 'button.rematch-decline',
+ {
+ attrs: { 'data-icon': licon.X, title: noarg('decline') },
+ hook: util.bind('click', () => ctrl.socket.send('rematch-no')),
+ },
+ ctrl.nvui ? noarg('decline') : '',
+ ),
h(
'button.fbt.rematch.white',
{
- class: {
- me,
- glowing: them,
- disabled,
- },
+ class: { me, glowing: them, disabled },
attrs: {
title: them ? noarg('yourOpponentWantsToPlayANewGameWithYou') : me ? noarg('rematchOfferSent') : '',
},
@@ -109,11 +102,8 @@ export function standard(
return h(
'button.fbt.' + socketMsg,
{
- attrs: {
- disabled: !enabled(),
- title: ctrl.noarg(hintFn()),
- },
- hook: util.bind('click', _ => {
+ attrs: { disabled: !enabled(), title: ctrl.noarg(hintFn()) },
+ hook: util.bind('click', () => {
if (enabled()) onclick ? onclick() : ctrl.socket.sendLoading(socketMsg);
}),
},
@@ -129,24 +119,20 @@ export function opponentGone(ctrl: RoundController) {
h('p', { hook: onSuggestionHook }, ctrl.noarg('opponentLeftChoices')),
h(
'button.button',
- {
- hook: util.bind('click', () => ctrl.socket.sendLoading('resign-force')),
- },
+ { hook: util.bind('click', () => ctrl.socket.sendLoading('resign-force')) },
ctrl.noarg('forceResignation'),
),
h(
'button.button',
- {
- hook: util.bind('click', () => ctrl.socket.sendLoading('draw-force')),
- },
+ { hook: util.bind('click', () => ctrl.socket.sendLoading('draw-force')) },
ctrl.noarg('forceDraw'),
),
])
- : gone
- ? h('div.suggestion', [
- h('p', ctrl.trans.vdomPlural('opponentLeftCounter', gone, h('strong', '' + gone))),
- ])
- : null;
+ : gone &&
+ h(
+ 'div.suggestion',
+ h('p', ctrl.trans.vdomPlural('opponentLeftCounter', gone, h('strong', '' + gone))),
+ );
}
const fbtCancel = (ctrl: RoundController, f: (v: boolean) => void) =>
@@ -184,89 +170,70 @@ export const claimThreefold = (ctrl: RoundController, condition: (d: RoundData)
title: ctrl.noarg(condition(ctrl.data)?.overrideHint || 'claimADraw'),
disabled: !condition(ctrl.data).enabled,
},
- class: {
- disabled: !condition(ctrl.data).enabled,
- },
+ class: { disabled: !condition(ctrl.data).enabled },
},
h('span', '½'),
);
export function threefoldSuggestion(ctrl: RoundController) {
- return ctrl.data.game.threefold
- ? h('div.suggestion', [
- h(
- 'p',
- {
- hook: onSuggestionHook,
- },
- ctrl.noarg('threefoldRepetition'),
- ),
- ])
- : null;
+ return (
+ ctrl.data.game.threefold &&
+ h('div.suggestion', [h('p', { hook: onSuggestionHook }, ctrl.noarg('threefoldRepetition'))])
+ );
}
-export function backToTournament(ctrl: RoundController): VNode | undefined {
+export function backToTournament(ctrl: RoundController) {
const d = ctrl.data;
- return d.tournament?.running
- ? h('div.follow-up', [
- h(
- 'a.text.fbt.strong.glowing',
- {
- attrs: {
- 'data-icon': licon.PlayTriangle,
- href: '/tournament/' + d.tournament.id,
- },
- hook: util.bind('click', ctrl.setRedirecting),
- },
- ctrl.noarg('backToTournament'),
- ),
- h(
- 'form',
- {
- attrs: {
- method: 'post',
- action: '/tournament/' + d.tournament.id + '/withdraw',
- },
- },
- [h('button.text.fbt.weak', util.justIcon(licon.Pause), 'Pause')],
- ),
- analysisButton(ctrl),
- ])
- : undefined;
+ return (
+ d.tournament?.running &&
+ h('div.follow-up', [
+ h(
+ 'a.text.fbt.strong.glowing',
+ {
+ attrs: { 'data-icon': licon.PlayTriangle, href: '/tournament/' + d.tournament.id },
+ hook: util.bind('click', ctrl.setRedirecting),
+ },
+ ctrl.noarg('backToTournament'),
+ ),
+ h('form', { attrs: { method: 'post', action: '/tournament/' + d.tournament.id + '/withdraw' } }, [
+ h('button.text.fbt.weak', util.justIcon(licon.Pause), 'Pause'),
+ ]),
+ analysisButton(ctrl),
+ ])
+ );
}
-export function backToSwiss(ctrl: RoundController): VNode | undefined {
+export function backToSwiss(ctrl: RoundController) {
const d = ctrl.data;
- return d.swiss?.running
- ? h('div.follow-up', [
- h(
- 'a.text.fbt.strong.glowing',
- {
- attrs: {
- 'data-icon': licon.PlayTriangle,
- href: '/swiss/' + d.swiss.id,
- },
- hook: util.bind('click', ctrl.setRedirecting),
- },
- ctrl.noarg('backToTournament'),
- ),
- analysisButton(ctrl),
- ])
- : undefined;
+ return (
+ d.swiss?.running &&
+ h('div.follow-up', [
+ h(
+ 'a.text.fbt.strong.glowing',
+ {
+ attrs: { 'data-icon': licon.PlayTriangle, href: '/swiss/' + d.swiss.id },
+ hook: util.bind('click', ctrl.setRedirecting),
+ },
+ ctrl.noarg('backToTournament'),
+ ),
+ analysisButton(ctrl),
+ ])
+ );
}
export function moretime(ctrl: RoundController) {
- return game.moretimeable(ctrl.data)
- ? h('a.moretime', {
- attrs: {
- title: ctrl.data.clock
- ? ctrl.trans('giveNbSeconds', ctrl.data.clock.moretime)
- : ctrl.noarg('giveMoreTime'),
- 'data-icon': licon.PlusButton,
- },
- hook: util.bind('click', ctrl.socket.moreTime),
- })
- : null;
+ return (
+ game.moretimeable(ctrl.data) &&
+ h('a.moretime', {
+ attrs: {
+ title: ctrl.data.clock
+ ? ctrl.trans('giveNbSeconds', ctrl.data.clock.moretime)
+ : ctrl.noarg('giveMoreTime'),
+ 'data-icon': licon.PlusButton,
+ },
+ hook: util.bind('click', ctrl.socket.moreTime),
+ })
+ );
}
export function followUp(ctrl: RoundController): VNode {
@@ -284,75 +251,39 @@ export function followUp(ctrl: RoundController): VNode {
rematchZone = rematchable || d.game.rematch ? rematchButtons(ctrl) : [];
return h('div.follow-up', [
...rematchZone,
- d.tournament
- ? h(
- 'a.fbt',
- {
- attrs: { href: '/tournament/' + d.tournament.id },
- },
- ctrl.noarg('viewTournament'),
- )
- : null,
- d.swiss
- ? h(
- 'a.fbt',
- {
- attrs: { href: '/swiss/' + d.swiss.id },
- },
- ctrl.noarg('viewTournament'),
- )
- : null,
- newable
- ? h(
- 'a.fbt',
- {
- attrs: {
- href:
- d.game.source === 'pool' ? poolUrl(d.clock!, d.opponent.user) : '/?hook_like=' + d.game.id,
- },
+ d.tournament &&
+ h('a.fbt', { attrs: { href: '/tournament/' + d.tournament.id } }, ctrl.noarg('viewTournament')),
+ d.swiss && h('a.fbt', { attrs: { href: '/swiss/' + d.swiss.id } }, ctrl.noarg('viewTournament')),
+ newable &&
+ h(
+ 'a.fbt',
+ {
+ attrs: {
+ href: d.game.source === 'pool' ? poolUrl(d.clock!, d.opponent.user) : '/?hook_like=' + d.game.id,
},
- ctrl.noarg('newOpponent'),
- )
- : null,
+ },
+ ctrl.noarg('newOpponent'),
+ ),
analysisButton(ctrl),
]);
}
-export function watcherFollowUp(ctrl: RoundController): VNode | null {
+export function watcherFollowUp(ctrl: RoundController) {
const d = ctrl.data,
content = [
- d.game.rematch
- ? h(
- 'a.fbt.text',
- {
- attrs: {
- href: `/${d.game.rematch}/${d.opponent.color}`,
- },
- },
- ctrl.noarg('viewRematch'),
- )
- : null,
- d.tournament
- ? h(
- 'a.fbt',
- {
- attrs: { href: '/tournament/' + d.tournament.id },
- },
- ctrl.noarg('viewTournament'),
- )
- : null,
- d.swiss
- ? h(
- 'a.fbt',
- {
- attrs: { href: '/swiss/' + d.swiss.id },
- },
- ctrl.noarg('viewTournament'),
- )
- : null,
+ d.game.rematch &&
+ h(
+ 'a.fbt.text',
+ { attrs: { href: `/${d.game.rematch}/${d.opponent.color}` } },
+ ctrl.noarg('viewRematch'),
+ ),
+ d.tournament &&
+ h('a.fbt', { attrs: { href: '/tournament/' + d.tournament.id } }, ctrl.noarg('viewTournament')),
+
+ d.swiss && h('a.fbt', { attrs: { href: '/swiss/' + d.swiss.id } }, ctrl.noarg('viewTournament')),
analysisButton(ctrl),
];
- return content.find(x => !!x) ? h('div.follow-up', content) : null;
+ return content.find(x => !!x) && h('div.follow-up', content);
}
const onSuggestionHook: Hooks = util.onInsert(el => lichess.pubsub.emit('round.suggestion', el.textContent));
diff --git a/ui/round/src/view/expiration.ts b/ui/round/src/view/expiration.ts
index b06ccaaae574a..6d9415d249e3f 100644
--- a/ui/round/src/view/expiration.ts
+++ b/ui/round/src/view/expiration.ts
@@ -19,12 +19,7 @@ export default function (ctrl: RoundController): MaybeVNode {
const side = myTurn != ctrl.flip ? 'bottom' : 'top';
return h(
'div.expiration.expiration-' + side,
- {
- class: {
- emerg,
- 'bar-glider': myTurn,
- },
- },
+ { class: { emerg, 'bar-glider': myTurn } },
ctrl.trans.vdomPlural('nbSecondsToPlayTheFirstMove', secondsLeft, h('strong', '' + secondsLeft)),
);
}
diff --git a/ui/round/src/view/main.ts b/ui/round/src/view/main.ts
index 030a13b23fa2b..2a69ef6faaaaf 100644
--- a/ui/round/src/view/main.ts
+++ b/ui/round/src/view/main.ts
@@ -3,7 +3,8 @@ import * as util from '../util';
import crazyView from '../crazy/crazyView';
import RoundController from '../ctrl';
import { stepwiseScroll } from 'common/scroll';
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
+import { looseH as h } from 'common/snabbdom';
import { render as renderKeyboardMove } from 'keyboardMove';
import { render as renderGround } from '../ground';
import { renderTable } from './table';
@@ -48,8 +49,8 @@ export function main(ctrl: RoundController): VNode {
},
[renderGround(ctrl), ctrl.promotion.view(ctrl.data.game.variant.key === 'antichess')],
),
- ctrl.voiceMove ? renderVoiceBar(ctrl.voiceMove.ui, ctrl.redraw) : null,
- ctrl.keyboardHelp ? keyboard.view(ctrl) : null,
+ ctrl.voiceMove && renderVoiceBar(ctrl.voiceMove.ui, ctrl.redraw),
+ ctrl.keyboardHelp && keyboard.view(ctrl),
crazyView(ctrl, topColor, 'top') || materialDiffs[0],
...renderTable(ctrl),
crazyView(ctrl, bottomColor, 'bottom') || materialDiffs[1],
diff --git a/ui/round/src/view/replay.ts b/ui/round/src/view/replay.ts
index f544742edada1..5600fc46c6322 100644
--- a/ui/round/src/view/replay.ts
+++ b/ui/round/src/view/replay.ts
@@ -8,10 +8,10 @@ import RoundController from '../ctrl';
import throttle from 'common/throttle';
import viewStatus from 'game/view/status';
import { game as gameRoute } from 'game/router';
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import { Step } from '../interfaces';
import { toggleButton as boardMenuToggleButton } from 'board/menu';
-import { MaybeVNodes } from 'common/snabbdom';
+import { LooseVNodes, looseH as h } from 'common/snabbdom';
import boardMenu from './boardMenu';
const scrollMax = 99999,
@@ -42,34 +42,15 @@ const autoScroll = throttle(100, (movesEl: HTMLElement, ctrl: RoundController) =
}),
);
-const renderDrawOffer = () =>
- h(
- 'draw',
- {
- attrs: {
- title: 'Draw offer',
- },
- },
- '½?',
- );
+const renderDrawOffer = () => h('draw', { attrs: { title: 'Draw offer' } }, '½?');
const renderMove = (step: Step, curPly: number, orEmpty: boolean, drawOffers: Set) =>
step
- ? h(
- moveTag,
- {
- class: {
- a1t: step.ply === curPly,
- },
- },
- [
- step.san[0] === 'P' ? step.san.slice(1) : step.san,
- drawOffers.has(step.ply) ? renderDrawOffer() : undefined,
- ],
- )
- : orEmpty
- ? h(moveTag, '…')
- : undefined;
+ ? h(moveTag, { class: { a1t: step.ply === curPly } }, [
+ step.san[0] === 'P' ? step.san.slice(1) : step.san,
+ drawOffers.has(step.ply) ? renderDrawOffer() : undefined,
+ ])
+ : orEmpty && h(moveTag, '…');
export function renderResult(ctrl: RoundController): VNode | undefined {
let result: string | undefined;
@@ -102,7 +83,7 @@ export function renderResult(ctrl: RoundController): VNode | undefined {
return;
}
-function renderMoves(ctrl: RoundController): MaybeVNodes {
+function renderMoves(ctrl: RoundController): LooseVNodes {
const steps = ctrl.data.steps,
firstPly = round.firstPly(ctrl.data),
lastPly = round.lastPly(ctrl.data),
@@ -119,7 +100,7 @@ function renderMoves(ctrl: RoundController): MaybeVNodes {
}
for (let i = startAt; i < steps.length; i += 2) pairs.push([steps[i], steps[i + 1]]);
- const els: MaybeVNodes = [],
+ const els: LooseVNodes = [],
curPly = ctrl.ply;
for (let i = 0; i < pairs.length; i++) {
els.push(h(indexTag, i + indexOffset + ''));
@@ -131,24 +112,23 @@ function renderMoves(ctrl: RoundController): MaybeVNodes {
return els;
}
-export function analysisButton(ctrl: RoundController): VNode | undefined {
+export function analysisButton(ctrl: RoundController) {
const forecastCount = ctrl.data.forecastCount;
- return game.userAnalysable(ctrl.data)
- ? h(
- 'a.fbt.analysis',
- {
- class: {
- text: !!forecastCount,
- },
- attrs: {
- title: ctrl.noarg('analysis'),
- href: gameRoute(ctrl.data, ctrl.data.player.color) + '/analysis#' + ctrl.ply,
- 'data-icon': licon.Microscope,
- },
+ return (
+ game.userAnalysable(ctrl.data) &&
+ h(
+ 'a.fbt.analysis',
+ {
+ class: { text: !!forecastCount },
+ attrs: {
+ title: ctrl.noarg('analysis'),
+ href: gameRoute(ctrl.data, ctrl.data.player.color) + '/analysis#' + ctrl.ply,
+ 'data-icon': licon.Microscope,
},
- forecastCount ? ['' + forecastCount] : [],
- )
- : undefined;
+ },
+ forecastCount ? ['' + forecastCount] : [],
+ )
+ );
}
function renderButtons(ctrl: RoundController) {
@@ -180,11 +160,7 @@ function renderButtons(ctrl: RoundController) {
const enabled = ctrl.ply !== b[1] && (b[1] as number) >= firstPly && (b[1] as number) <= lastPly;
return h('button.fbt', {
class: { glowing: i === 3 && ctrl.isLate() },
- attrs: {
- disabled: !enabled,
- 'data-icon': b[0],
- 'data-ply': enabled ? b[1] : '-',
- },
+ attrs: { disabled: !enabled, 'data-icon': b[0], 'data-ply': enabled ? b[1] : '-' },
});
}),
boardMenuToggleButton(ctrl.menu, ctrl.noarg('menu')),
@@ -194,26 +170,23 @@ function renderButtons(ctrl: RoundController) {
function initMessage(ctrl: RoundController) {
const d = ctrl.data;
- return (ctrl.replayEnabledByPref() || !isCol1()) &&
+ return (
+ (ctrl.replayEnabledByPref() || !isCol1()) &&
game.playable(d) &&
d.game.turns === 0 &&
- !d.player.spectator
- ? h('div.message', util.justIcon(licon.InfoCircle), [
- h('div', [
- ctrl.trans(d.player.color === 'white' ? 'youPlayTheWhitePieces' : 'youPlayTheBlackPieces'),
- ...(d.player.color === 'white' ? [h('br'), h('strong', ctrl.trans('itsYourTurn'))] : []),
- ]),
- ])
- : null;
+ !d.player.spectator &&
+ h('div.message', util.justIcon(licon.InfoCircle), [
+ h('div', [
+ ctrl.trans(d.player.color === 'white' ? 'youPlayTheWhitePieces' : 'youPlayTheBlackPieces'),
+ ...(d.player.color === 'white' ? [h('br'), h('strong', ctrl.trans('itsYourTurn'))] : []),
+ ]),
+ ])
+ );
}
const col1Button = (ctrl: RoundController, dir: number, icon: string, disabled: boolean) =>
h('button.fbt', {
- attrs: {
- disabled: disabled,
- 'data-icon': icon,
- 'data-ply': ctrl.ply + dir,
- },
+ attrs: { disabled: disabled, 'data-icon': icon, 'data-ply': ctrl.ply + dir },
hook: util.bind('mousedown', e => {
e.preventDefault();
ctrl.userJump(ctrl.ply + dir);
@@ -221,7 +194,7 @@ const col1Button = (ctrl: RoundController, dir: number, icon: string, disabled:
}),
});
-export function render(ctrl: RoundController): VNode | undefined {
+export function render(ctrl: RoundController) {
const d = ctrl.data,
moves =
ctrl.replayEnabledByPref() &&
@@ -249,18 +222,19 @@ export function render(ctrl: RoundController): VNode | undefined {
renderMoves(ctrl),
);
const renderMovesOrResult = moves ? moves : renderResult(ctrl);
- return ctrl.nvui
- ? undefined
- : h(rmovesTag, [
- renderButtons(ctrl),
- boardMenu(ctrl),
- initMessage(ctrl) ||
- (isCol1()
- ? h('div.col1-moves', [
- col1Button(ctrl, -1, licon.JumpPrev, ctrl.ply == round.firstPly(d)),
- renderMovesOrResult,
- col1Button(ctrl, 1, licon.JumpNext, ctrl.ply == round.lastPly(d)),
- ])
- : renderMovesOrResult),
- ]);
+ return (
+ !ctrl.nvui &&
+ h(rmovesTag, [
+ renderButtons(ctrl),
+ boardMenu(ctrl),
+ initMessage(ctrl) ||
+ (isCol1()
+ ? h('div.col1-moves', [
+ col1Button(ctrl, -1, licon.JumpPrev, ctrl.ply == round.firstPly(d)),
+ renderMovesOrResult,
+ col1Button(ctrl, 1, licon.JumpNext, ctrl.ply == round.lastPly(d)),
+ ])
+ : renderMovesOrResult),
+ ])
+ );
}
diff --git a/ui/round/src/view/table.ts b/ui/round/src/view/table.ts
index 1a5c1db43a30d..239e8d64ed042 100644
--- a/ui/round/src/view/table.ts
+++ b/ui/round/src/view/table.ts
@@ -1,5 +1,4 @@
import * as licon from 'common/licon';
-import { h } from 'snabbdom';
import { Position } from '../interfaces';
import { bind } from '../util';
import * as game from 'game';
@@ -11,7 +10,7 @@ import renderExpiration from './expiration';
import * as renderUser from './user';
import * as button from './button';
import RoundController from '../ctrl';
-import { MaybeVNodes } from 'common/snabbdom';
+import { LooseVNodes, looseH as h } from 'common/snabbdom';
import { toggleButton as boardMenuToggleButton } from 'board/menu';
function renderPlayer(ctrl: RoundController, position: Position) {
@@ -30,9 +29,9 @@ const isLoading = (ctrl: RoundController): boolean => ctrl.loading || ctrl.redir
const loader = () => h('i.ddloader');
-const renderTableWith = (ctrl: RoundController, buttons: MaybeVNodes) => [
+const renderTableWith = (ctrl: RoundController, buttons: LooseVNodes) => [
replay.render(ctrl),
- buttons.find(x => !!x) ? h('div.rcontrols', buttons) : null,
+ buttons.find(x => !!x) && h('div.rcontrols', buttons),
];
export const renderTableEnd = (ctrl: RoundController) =>
@@ -117,19 +116,13 @@ export const renderTablePlay = (ctrl: RoundController) => {
replay.analysisButton(ctrl),
boardMenuToggleButton(ctrl.menu, ctrl.noarg('menu')),
],
- buttons: MaybeVNodes = loading
+ buttons = loading
? [loader()]
: [promptVNode, button.opponentGone(ctrl), button.threefoldSuggestion(ctrl)];
return [
replay.render(ctrl),
h('div.rcontrols', [
- h(
- 'div.ricons',
- {
- class: { confirm: !!(ctrl.drawConfirm || ctrl.resignConfirm) },
- },
- icons,
- ),
+ h('div.ricons', { class: { confirm: !!(ctrl.drawConfirm || ctrl.resignConfirm) } }, icons),
...buttons,
]),
];
@@ -138,16 +131,16 @@ export const renderTablePlay = (ctrl: RoundController) => {
function whosTurn(ctrl: RoundController, color: Color, position: Position) {
const d = ctrl.data;
if (status.finished(d) || status.aborted(d)) return;
- return h('div.rclock.rclock-turn.rclock-' + position, [
- d.game.player === color
- ? h(
- 'div.rclock-turn__text',
- d.player.spectator
- ? ctrl.trans(d.game.player + 'Plays')
- : ctrl.trans(d.game.player === d.player.color ? 'yourTurn' : 'waitingForOpponent'),
- )
- : null,
- ]);
+ return h(
+ 'div.rclock.rclock-turn.rclock-' + position,
+ d.game.player === color &&
+ h(
+ 'div.rclock-turn__text',
+ d.player.spectator
+ ? ctrl.trans(d.game.player + 'Plays')
+ : ctrl.trans(d.game.player === d.player.color ? 'yourTurn' : 'waitingForOpponent'),
+ ),
+ );
}
function anyClock(ctrl: RoundController, position: Position) {
@@ -158,7 +151,7 @@ function anyClock(ctrl: RoundController, position: Position) {
else return whosTurn(ctrl, player.color, position);
}
-export const renderTable = (ctrl: RoundController): MaybeVNodes => [
+export const renderTable = (ctrl: RoundController): LooseVNodes => [
h('div.round__app__table'),
renderExpiration(ctrl),
renderPlayer(ctrl, 'top'),
diff --git a/ui/round/src/view/user.ts b/ui/round/src/view/user.ts
index b32d481b83406..faf5ba10f85cb 100644
--- a/ui/round/src/view/user.ts
+++ b/ui/round/src/view/user.ts
@@ -1,4 +1,4 @@
-import { h } from 'snabbdom';
+import { looseH as h } from 'common/snabbdom';
import * as licon from 'common/licon';
import { Player } from 'game';
import { Position } from '../interfaces';
@@ -43,29 +43,19 @@ export function userHtml(ctrl: RoundController, player: Player, position: Positi
online: false,
line: false,
}),
- rating ? h('rating', rating + (player.provisional ? '?' : '')) : null,
- rating ? ratingDiff(player) : null,
- player.engine
- ? h('span', {
- attrs: {
- 'data-icon': licon.CautionCircle,
- title: ctrl.noarg('thisAccountViolatedTos'),
- },
- })
- : undefined,
+ rating && h('rating', rating + (player.provisional ? '?' : '')),
+ rating && ratingDiff(player),
+ player.engine &&
+ h('span', {
+ attrs: { 'data-icon': licon.CautionCircle, title: ctrl.noarg('thisAccountViolatedTos') },
+ }),
],
);
}
const connecting = !player.onGame && ctrl.firstSeconds;
return h(
`div.ruser-${position}.ruser.user-link`,
- {
- class: {
- online: player.onGame,
- offline: !player.onGame,
- connecting,
- },
- },
+ { class: { online: player.onGame, offline: !player.onGame, connecting } },
[
h('i.line', {
attrs: {
diff --git a/ui/simul/src/view/created.ts b/ui/simul/src/view/created.ts
index a9f83b17fdf96..5e8fd64aef8c8 100644
--- a/ui/simul/src/view/created.ts
+++ b/ui/simul/src/view/created.ts
@@ -1,13 +1,13 @@
-import { h } from 'snabbdom';
+import { VNode } from 'snabbdom';
import * as licon from 'common/licon';
-import { bind, MaybeVNode } from 'common/snabbdom';
+import { bind, looseH as h } from 'common/snabbdom';
import SimulCtrl from '../ctrl';
import { Applicant } from '../interfaces';
import xhr from '../xhr';
import * as util from './util';
import { domDialog } from 'common/dialog';
-export default function (showText: (ctrl: SimulCtrl) => MaybeVNode) {
+export default function (showText: (ctrl: SimulCtrl) => VNode | false) {
return (ctrl: SimulCtrl) => {
const candidates = ctrl.candidates().sort(byName),
accepted = ctrl.accepted().sort(byName),
@@ -15,14 +15,7 @@ export default function (showText: (ctrl: SimulCtrl) => MaybeVNode) {
canJoin = ctrl.data.canJoin;
const variantIconFor = (a: Applicant) => {
const variant = ctrl.data.variants.find(v => a.variant == v.key);
- return (
- variant &&
- h('td.variant', {
- attrs: {
- 'data-icon': variant.icon,
- },
- })
- );
+ return variant && h('td.variant', { attrs: { 'data-icon': variant.icon } });
};
return [
h('div.box__top', [
@@ -35,18 +28,13 @@ export default function (showText: (ctrl: SimulCtrl) => MaybeVNode) {
: ctrl.containsMe()
? h(
'a.button',
- {
- hook: bind('click', () => xhr.withdraw(ctrl.data.id)),
- },
+ { hook: bind('click', () => xhr.withdraw(ctrl.data.id)) },
ctrl.trans('withdraw'),
)
: h(
'a.button.text' + (canJoin ? '' : '.disabled'),
{
- attrs: {
- disabled: !canJoin,
- 'data-icon': licon.PlayTriangle,
- },
+ attrs: { disabled: !canJoin, 'data-icon': licon.PlayTriangle },
hook: canJoin
? bind('click', () => {
if (ctrl.data.variants.length === 1)
@@ -81,18 +69,12 @@ export default function (showText: (ctrl: SimulCtrl) => MaybeVNode) {
showText(ctrl),
ctrl.acceptedContainsMe()
? h('p.instructions', 'You have been selected! Hold still, the simul is about to begin.')
- : isHost && ctrl.data.applicants.length < 6
- ? h('p.instructions', 'Share this page URL to let people enter the simul!')
- : null,
+ : isHost &&
+ ctrl.data.applicants.length < 6 &&
+ h('p.instructions', 'Share this page URL to let people enter the simul!'),
h(
'div.halves',
- {
- hook: {
- postpatch(_old, vnode) {
- lichess.powertip.manualUserIn(vnode.elm as HTMLElement);
- },
- },
- },
+ { hook: { postpatch: (_old, vnode) => lichess.powertip.manualUserIn(vnode.elm as HTMLElement) } },
[
h(
'div.half.candidates',
@@ -102,13 +84,7 @@ export default function (showText: (ctrl: SimulCtrl) => MaybeVNode) {
'thead',
h(
'tr',
- h(
- 'th',
- {
- attrs: { colspan: 3 },
- },
- [h('strong', candidates.length), ' candidate players'],
- ),
+ h('th', { attrs: { colspan: 3 } }, [h('strong', candidates.length), ' candidate players']),
),
),
h(
@@ -116,28 +92,17 @@ export default function (showText: (ctrl: SimulCtrl) => MaybeVNode) {
candidates.map(applicant => {
return h(
'tr',
- {
- key: applicant.player.id,
- class: {
- me: ctrl.opts.userId === applicant.player.id,
- },
- },
+ { key: applicant.player.id, class: { me: ctrl.opts.userId === applicant.player.id } },
[
h('td', util.player(applicant.player, ctrl)),
variantIconFor(applicant),
h(
'td.action',
- isHost
- ? [
- h('a.button', {
- attrs: {
- 'data-icon': licon.Checkmark,
- title: 'Accept',
- },
- hook: bind('click', () => xhr.accept(applicant.player.id)(ctrl.data.id)),
- }),
- ]
- : [],
+ isHost &&
+ h('a.button', {
+ attrs: { 'data-icon': licon.Checkmark, title: 'Accept' },
+ hook: bind('click', () => xhr.accept(applicant.player.id)(ctrl.data.id)),
+ }),
),
],
);
@@ -151,44 +116,29 @@ export default function (showText: (ctrl: SimulCtrl) => MaybeVNode) {
h('thead', [
h(
'tr',
- h(
- 'th',
- {
- attrs: { colspan: 3 },
- },
- [h('strong', accepted.length), ' accepted players'],
- ),
+ h('th', { attrs: { colspan: 3 } }, [h('strong', accepted.length), ' accepted players']),
),
- isHost && candidates.length && !accepted.length
- ? [h('tr.help', h('th', 'Now you get to accept some players, then start the simul'))]
- : [],
+ isHost &&
+ candidates.length > 0 &&
+ !accepted.length &&
+ h('tr.help', h('th', 'Now you get to accept some players, then start the simul')),
]),
h(
'tbody',
accepted.map(applicant => {
return h(
'tr',
- {
- key: applicant.player.id,
- class: {
- me: ctrl.opts.userId === applicant.player.id,
- },
- },
+ { key: applicant.player.id, class: { me: ctrl.opts.userId === applicant.player.id } },
[
h('td', util.player(applicant.player, ctrl)),
variantIconFor(applicant),
h(
'td.action',
- isHost
- ? [
- h('a.button.button-red', {
- attrs: {
- 'data-icon': licon.X,
- },
- hook: bind('click', () => xhr.reject(applicant.player.id)(ctrl.data.id)),
- }),
- ]
- : [],
+ isHost &&
+ h('a.button.button-red', {
+ attrs: { 'data-icon': licon.X },
+ hook: bind('click', () => xhr.reject(applicant.player.id)(ctrl.data.id)),
+ }),
),
],
);
@@ -198,21 +148,12 @@ export default function (showText: (ctrl: SimulCtrl) => MaybeVNode) {
]),
],
),
- ctrl.data.quote
- ? h('blockquote.pull-quote', [h('p', ctrl.data.quote.text), h('footer', ctrl.data.quote.author)])
- : null,
+ ctrl.data.quote &&
+ h('blockquote.pull-quote', [h('p', ctrl.data.quote.text), h('footer', ctrl.data.quote.author)]),
h(
'div.continue-with.none',
ctrl.data.variants.map(variant =>
- h(
- 'button.button',
- {
- attrs: {
- 'data-variant': variant.key,
- },
- },
- variant.name,
- ),
+ h('button.button', { attrs: { 'data-variant': variant.key } }, variant.name),
),
),
];
@@ -222,41 +163,31 @@ export default function (showText: (ctrl: SimulCtrl) => MaybeVNode) {
const byName = (a: Applicant, b: Applicant) => (a.player.name > b.player.name ? 1 : -1);
const randomButton = (ctrl: SimulCtrl) =>
- ctrl.candidates().length
- ? h(
- 'a.button.text',
- {
- attrs: {
- 'data-icon': licon.Checkmark,
- },
- hook: bind('click', () => {
- const candidates = ctrl.candidates();
- const randomCandidate = candidates[Math.floor(Math.random() * candidates.length)];
- xhr.accept(randomCandidate.player.id)(ctrl.data.id);
- }),
- },
- 'Accept random candidate',
- )
- : null;
+ ctrl.candidates().length > 0 &&
+ h(
+ 'a.button.text',
+ {
+ attrs: { 'data-icon': licon.Checkmark },
+ hook: bind('click', () => {
+ const candidates = ctrl.candidates();
+ const randomCandidate = candidates[Math.floor(Math.random() * candidates.length)];
+ xhr.accept(randomCandidate.player.id)(ctrl.data.id);
+ }),
+ },
+ 'Accept random candidate',
+ );
const startOrCancel = (ctrl: SimulCtrl, accepted: Applicant[]) =>
accepted.length > 1
? h(
'a.button.button-green.text',
- {
- attrs: {
- 'data-icon': licon.PlayTriangle,
- },
- hook: bind('click', () => xhr.start(ctrl.data.id)),
- },
+ { attrs: { 'data-icon': licon.PlayTriangle }, hook: bind('click', () => xhr.start(ctrl.data.id)) },
`Start (${accepted.length})`,
)
: h(
'a.button.button-red.text',
{
- attrs: {
- 'data-icon': licon.X,
- },
+ attrs: { 'data-icon': licon.X },
hook: bind('click', () => {
if (confirm('Delete this simul?')) xhr.abort(ctrl.data.id);
}),
diff --git a/ui/simul/src/view/main.ts b/ui/simul/src/view/main.ts
index 4155b72494b6a..c4685843ada53 100644
--- a/ui/simul/src/view/main.ts
+++ b/ui/simul/src/view/main.ts
@@ -1,5 +1,4 @@
-import { h } from 'snabbdom';
-import { onInsert } from 'common/snabbdom';
+import { onInsert, looseH as h } from 'common/snabbdom';
import SimulCtrl from '../ctrl';
import * as util from './util';
import created from './created';
@@ -10,49 +9,23 @@ import pairings from './pairings';
export default function (ctrl: SimulCtrl) {
const handler = ctrl.data.isRunning ? started : ctrl.data.isFinished ? finished : created(showText);
- return h(
- 'main.simul',
- {
- class: {
- 'simul-created': ctrl.data.isCreated,
- },
- },
- [
- h('aside.simul__side', {
- hook: onInsert(el => {
- $(el).replaceWith(ctrl.opts.$side);
- if (ctrl.opts.chat) {
- ctrl.opts.chat.data.hostIds = [ctrl.data.host.id];
- lichess.makeChat(ctrl.opts.chat);
- }
- }),
+ return h('main.simul', { class: { 'simul-created': ctrl.data.isCreated } }, [
+ h('aside.simul__side', {
+ hook: onInsert(el => {
+ $(el).replaceWith(ctrl.opts.$side);
+ if (ctrl.opts.chat) {
+ ctrl.opts.chat.data.hostIds = [ctrl.data.host.id];
+ lichess.makeChat(ctrl.opts.chat);
+ }
}),
- h(
- 'div.simul__main.box',
- {
- hook: {
- postpatch() {
- lichess.miniGame.initAll();
- },
- },
- },
- handler(ctrl),
- ),
- h('div.chat__members.none', {
- hook: onInsert(lichess.watchers),
- }),
- ],
- );
+ }),
+ h('div.simul__main.box', { hook: { postpatch: () => lichess.miniGame.initAll() } }, handler(ctrl)),
+ h('div.chat__members.none', { hook: onInsert(lichess.watchers) }),
+ ]);
}
const showText = (ctrl: SimulCtrl) =>
- ctrl.data.text.length > 0
- ? h('div.simul-text', [
- h('p', {
- hook: richHTML(ctrl.data.text),
- }),
- ])
- : undefined;
+ ctrl.data.text.length > 0 && h('div.simul-text', [h('p', { hook: richHTML(ctrl.data.text) })]);
const started = (ctrl: SimulCtrl) => [
h('div.box__top', util.title(ctrl)),
diff --git a/ui/simul/src/view/pairings.ts b/ui/simul/src/view/pairings.ts
index bb29210675c6f..1416468da4a84 100644
--- a/ui/simul/src/view/pairings.ts
+++ b/ui/simul/src/view/pairings.ts
@@ -17,9 +17,7 @@ const miniPairing = (ctrl: SimulCtrl) => (pairing: Pairing) => {
return h(
`span.mini-game.mini-game-${game.id}.mini-game--init.is2d`,
{
- class: {
- host: ctrl.data.host.gameId === game.id,
- },
+ class: { host: ctrl.data.host.gameId === game.id },
attrs: {
'data-state': `${game.fen},${game.orient},${game.lastMove}`,
'data-live': game.clock ? game.id : '',
@@ -28,30 +26,18 @@ const miniPairing = (ctrl: SimulCtrl) => (pairing: Pairing) => {
},
[
h('span.mini-game__player', [
- h(
- 'a.mini-game__user.ulpt',
- {
- attrs: {
- href: `/@/${player.name}`,
- },
- },
- [
- h(
- 'span.name',
- player.title ? [h('span.utitle', player.title), ' ', player.name, flair] : [player.name, flair],
- ),
- ...(ctrl.opts.showRatings ? [' ', h('span.rating', player.rating)] : []),
- ],
- ),
+ h('a.mini-game__user.ulpt', { attrs: { href: `/@/${player.name}` } }, [
+ h(
+ 'span.name',
+ player.title ? [h('span.utitle', player.title), ' ', player.name, flair] : [player.name, flair],
+ ),
+ ...(ctrl.opts.showRatings ? [' ', h('span.rating', player.rating)] : []),
+ ]),
game.clock
? renderClock(opposite(game.orient), game.clock[opposite(game.orient)])
: h('span.mini-game__result', game.winner ? (game.winner == game.orient ? 0 : 1) : '½'),
]),
- h('a.cg-wrap', {
- attrs: {
- href: `/${game.id}/${game.orient}`,
- },
- }),
+ h('a.cg-wrap', { attrs: { href: `/${game.id}/${game.orient}` } }),
h('span.mini-game__player', [
h('span'),
game.clock
diff --git a/ui/simul/src/view/util.ts b/ui/simul/src/view/util.ts
index 338a7de64ffc8..f26f453662957 100644
--- a/ui/simul/src/view/util.ts
+++ b/ui/simul/src/view/util.ts
@@ -9,9 +9,7 @@ export function player(p: Player, ctrl: SimulCtrl) {
'a.ulpt.user-link.' + (p.online || ctrl.data.host.id != p.id ? 'online' : 'offline'),
{
attrs: { href: '/@/' + p.name },
- hook: {
- destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement),
- },
+ hook: { destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement) },
},
[
userLine({ line: true, ...p }),
diff --git a/ui/site/css/_dailyFeed.scss b/ui/site/css/_dailyFeed.scss
index 5d9707e84d3b9..cee3ed7ccbbab 100644
--- a/ui/site/css/_dailyFeed.scss
+++ b/ui/site/css/_dailyFeed.scss
@@ -24,7 +24,7 @@ $c-contours: mix($c-brag, $c-shade, 80%);
height: 50px;
margin-top: -12px;
margin-#{$start-direction}: -72px;
- line-height: 39px;
+ line-height: 42px;
text-align: center;
background-color: $c-contours;
border: 3px solid $c-bg-box;
@@ -49,11 +49,14 @@ $c-contours: mix($c-brag, $c-shade, 80%);
}
&__markup {
- @include rendered-markdown;
- h2 {
- color: $c-bad;
- text-decoration: line-through;
- }
+ @include rendered-markdown(
+ $element-margin: 1em,
+ $h1: false,
+ $h2: false,
+ $table: false,
+ $img: false,
+ $list: false
+ );
h3 {
font-size: 1.3em;
color: $c-font-dim;
diff --git a/ui/site/css/_linkPopup.scss b/ui/site/css/_linkPopup.scss
index e67971bc86a78..9b99c833e59f8 100644
--- a/ui/site/css/_linkPopup.scss
+++ b/ui/site/css/_linkPopup.scss
@@ -1,11 +1,10 @@
.link-popup {
- @extend %box-neat;
font-size: 1.1em;
padding: 0 !important;
max-width: 600px;
&__content {
- @extend %flex-center-nowrap;
+ @extend %flex-center-nowrap, %box-radius-top;
background: $c-bg-zebra;
padding: 2em;
diff --git a/ui/site/css/_video.scss b/ui/site/css/_video.scss
index c6d3a847ca0e6..7739ea66ff206 100644
--- a/ui/site/css/_video.scss
+++ b/ui/site/css/_video.scss
@@ -257,11 +257,6 @@
}
#video {
- .not_found {
- margin-top: 200px;
- text-align: center;
- }
-
.not_much {
margin-top: 100px;
text-align: center;
diff --git a/ui/site/css/team/_show.scss b/ui/site/css/team/_show.scss
index 5803e9f49c2ec..66638df850a12 100644
--- a/ui/site/css/team/_show.scss
+++ b/ui/site/css/team/_show.scss
@@ -61,6 +61,7 @@ $section-margin-more: 5vh;
.user-link {
display: inline-block;
vertical-align: bottom;
+ padding-#{$end-direction}: 0.25em;
}
}
diff --git a/ui/site/css/ublog/_post.scss b/ui/site/css/ublog/_post.scss
index 74b8478e62316..61e6cc0218fb1 100644
--- a/ui/site/css/ublog/_post.scss
+++ b/ui/site/css/ublog/_post.scss
@@ -32,6 +32,10 @@
&__date {
unicode-bidi: embed;
}
+ input[type='number'] {
+ width: 6em;
+ margin-right: 1em;
+ }
}
&__topics {
@extend %flex-wrap;
diff --git a/ui/site/src/component/socket.ts b/ui/site/src/component/socket.ts
index 3c59df0c1e8e5..10303eb10d6f6 100644
--- a/ui/site/src/component/socket.ts
+++ b/ui/site/src/component/socket.ts
@@ -62,9 +62,10 @@ export default class StrongSocket {
tryOtherUrl = false;
autoReconnect = true;
nbConnects = 0;
- storage: LichessStorage = makeStorage.make('surl17');
+ storage: LichessStorage = makeStorage.make('surl17', 30 * 60 * 1000);
private _sign?: string;
private resendWhenOpen: [string, any, any][] = [];
+ private baseUrls = document.body.dataset.socketDomains!.split(',');
static defaultOptions: Options = {
idle: false,
@@ -121,13 +122,7 @@ export default class StrongSocket {
try {
const ws = (this.ws = new WebSocket(fullUrl));
ws.onerror = e => this.onError(e);
- ws.onclose = () => {
- this.pubsub.emit('socket.close');
- if (this.autoReconnect) {
- this.debug('Will autoreconnect in ' + this.options.autoReconnectDelay);
- this.scheduleConnect(this.options.autoReconnectDelay);
- }
- };
+ ws.onclose = e => this.onClose(e, fullUrl);
ws.onopen = () => {
this.debug('connected to ' + fullUrl);
this.onSuccess();
@@ -148,7 +143,7 @@ export default class StrongSocket {
this.handle(m);
};
} catch (e) {
- this.onError(e);
+ this.onClose({ code: 4000, reason: String(e) } as CloseEvent, fullUrl);
}
this.scheduleConnect(this.options.pingMaxLag);
};
@@ -197,7 +192,11 @@ export default class StrongSocket {
this.connectSchedule = setTimeout(() => {
document.body.classList.add('offline');
document.body.classList.remove('online');
- this.tryOtherUrl = true;
+ if (!this.tryOtherUrl) {
+ // if this was set earlier, we've already logged the error
+ this.tryOtherUrl = true;
+ lichess.log(`socket.ts: Timeout ${delay}ms, rotating to ${this.baseUrl()}`);
+ }
this.connect();
}, delay);
};
@@ -294,6 +293,17 @@ export default class StrongSocket {
onError = (e: unknown) => {
this.options.debug = true;
this.debug(`error: ${e} ${JSON.stringify(e)}`); // e not always from lila
+ };
+
+ onClose = (e: CloseEvent, url: string) => {
+ this.pubsub.emit('socket.close');
+ if (this.autoReconnect) {
+ this.debug('Will autoreconnect in ' + this.options.autoReconnectDelay);
+ this.scheduleConnect(this.options.autoReconnectDelay);
+ }
+ if (e.wasClean && e.code < 1002) return;
+
+ lichess.log(`socket.ts: Unclean close ${e.code} ${url} ${e.reason}`);
this.tryOtherUrl = true;
clearTimeout(this.pingSchedule);
};
@@ -319,12 +329,16 @@ export default class StrongSocket {
};
baseUrl = () => {
- const baseUrls = document.body.dataset.socketDomains!.split(',');
let url = this.storage.get();
- if (!url || this.tryOtherUrl) {
- url = baseUrls[Math.floor(Math.random() * baseUrls.length)];
+ if (!url) {
+ url = this.baseUrls[Math.floor(Math.random() * this.baseUrls.length)];
+ this.storage.set(url);
+ } else if (this.tryOtherUrl) {
+ const i = this.baseUrls.findIndex(u => u === url);
+ url = this.baseUrls[(i + 1) % this.baseUrls.length];
this.storage.set(url);
}
+ this.tryOtherUrl = false;
return url;
};
diff --git a/ui/site/src/component/sound.ts b/ui/site/src/component/sound.ts
index 29ebfe82132ab..c5825f0819086 100644
--- a/ui/site/src/component/sound.ts
+++ b/ui/site/src/component/sound.ts
@@ -19,7 +19,7 @@ export default new (class implements SoundI {
music?: SoundMove;
primerEvents = ['touchend', 'pointerup', 'pointerdown', 'mousedown', 'keydown'];
primer = () =>
- this.ctx.resume().then(() => {
+ this.ctx?.resume().then(() => {
setTimeout(() => $('#warn-no-autoplay').removeClass('shown'), 500);
for (const e of this.primerEvents) window.removeEventListener(e, this.primer, { capture: true });
});
@@ -29,6 +29,7 @@ export default new (class implements SoundI {
}
async load(name: Name, path?: Path): Promise {
+ if (!this.ctx) return;
if (path) this.paths.set(name, path);
else path = this.paths.get(name) ?? this.resolvePath(name);
if (!path) return;
@@ -39,9 +40,9 @@ export default new (class implements SoundI {
const arrayBuffer = await result.arrayBuffer();
const audioBuffer = await new Promise((resolve, reject) => {
- if (this.ctx.decodeAudioData.length === 1)
- this.ctx.decodeAudioData(arrayBuffer).then(resolve).catch(reject);
- else this.ctx.decodeAudioData(arrayBuffer, resolve, reject);
+ if (this.ctx?.decodeAudioData.length === 1)
+ this.ctx?.decodeAudioData(arrayBuffer).then(resolve).catch(reject);
+ else this.ctx?.decodeAudioData(arrayBuffer, resolve, reject);
});
const sound = new Sound(this.ctx, audioBuffer);
this.sounds.set(path, sound);
@@ -147,7 +148,7 @@ export default new (class implements SoundI {
publish = () => pubsub.emit('sound_set', this.theme);
changeSet = (s: string) => {
- if (isIOS()) this.ctx.resume();
+ if (isIOS()) this.ctx?.resume();
this.theme = s;
this.publish();
};
@@ -196,6 +197,7 @@ export default new (class implements SoundI {
}
async resumeWithTest(): Promise {
+ if (!this.ctx) return false;
if (this.ctx.state !== 'running' && this.ctx.state !== 'suspended') {
// in addition to 'closed', iOS has 'interrupted'. who knows what else is out there
if (this.ctx.state !== 'closed') this.ctx.close();
@@ -205,7 +207,7 @@ export default new (class implements SoundI {
}
}
// if suspended, try audioContext.resume() with a timeout (sometimes it never resolves)
- if (this.ctx.state === 'suspended')
+ if (this.ctx?.state === 'suspended')
await new Promise(resolve => {
const resumeTimer = setTimeout(() => {
$('#warn-no-autoplay').addClass('shown');
@@ -219,7 +221,7 @@ export default new (class implements SoundI {
})
.catch(resolve);
});
- if (this.ctx.state !== 'running') return false;
+ if (this.ctx?.state !== 'running') return false;
$('#warn-no-autoplay').removeClass('shown');
return true;
}
@@ -257,6 +259,10 @@ class Sound {
}
}
-function makeAudioContext(): AudioContext {
- return window.webkitAudioContext ? new window.webkitAudioContext() : new AudioContext();
+function makeAudioContext(): AudioContext | undefined {
+ return window.webkitAudioContext
+ ? new window.webkitAudioContext()
+ : typeof AudioContext !== 'undefined'
+ ? new AudioContext()
+ : undefined;
}
diff --git a/ui/site/src/component/storage.ts b/ui/site/src/component/storage.ts
index eaf055651a9a2..c22af8cbcd076 100644
--- a/ui/site/src/component/storage.ts
+++ b/ui/site/src/component/storage.ts
@@ -14,25 +14,41 @@ const builder = (storage: Storage): LichessStorageHelper => {
}),
),
remove: (k: string) => storage.removeItem(k),
- make: (k: string) => ({
- get: () => api.get(k),
- set: (v: any) => api.set(k, v),
- fire: (v?: string) => api.fire(k, v),
- remove: () => api.remove(k),
- listen: (f: (e: LichessStorageEvent) => void) =>
- window.addEventListener('storage', e => {
- if (e.key !== k || e.storageArea !== storage || e.newValue === null) return;
- let parsed: LichessStorageEvent | null;
- try {
- parsed = JSON.parse(e.newValue);
- } catch (_) {
- return;
- }
- // check sri, because Safari fires events also in the original
- // document when there are multiple tabs
- if (parsed?.sri && parsed.sri !== sri) f(parsed);
- }),
- }),
+ make: (k: string, ttl?: number) => {
+ const bdKey = ttl && `${k}--bd`;
+ const remove = () => {
+ api.remove(k);
+ if (bdKey) api.remove(bdKey);
+ };
+ return {
+ get: () => {
+ if (!bdKey) return api.get(k);
+ const birthday = Number(api.get(bdKey));
+ if (!birthday) api.set(bdKey, String(Date.now()));
+ else if (Date.now() - birthday > ttl) remove();
+ return api.get(k);
+ },
+ set: (v: any) => {
+ api.set(k, v);
+ if (bdKey) api.set(bdKey, String(Date.now()));
+ },
+ fire: (v?: string) => api.fire(k, v),
+ remove,
+ listen: (f: (e: LichessStorageEvent) => void) =>
+ window.addEventListener('storage', e => {
+ if (e.key !== k || e.storageArea !== storage || e.newValue === null) return;
+ let parsed: LichessStorageEvent | null;
+ try {
+ parsed = JSON.parse(e.newValue);
+ } catch (_) {
+ return;
+ }
+ // check sri, because Safari fires events also in the original
+ // document when there are multiple tabs
+ if (parsed?.sri && parsed.sri !== sri) f(parsed);
+ }),
+ };
+ },
boolean: (k: string) => ({
get: () => api.get(k) == '1',
getOrDefault: (defaultValue: boolean) => {
diff --git a/ui/site/src/component/timeago.ts b/ui/site/src/component/timeago.ts
index 86edc5e8b2ef9..5af7f27a93bb6 100644
--- a/ui/site/src/component/timeago.ts
+++ b/ui/site/src/component/timeago.ts
@@ -8,7 +8,7 @@ interface ElementWithDate extends Element {
}
// past, future, divisor, at least
-const units: [string | undefined, string, number, number][] = [
+const agoUnits: [string | undefined, string, number, number][] = [
['nbYearsAgo', 'inNbYears', 60 * 60 * 24 * 365, 1],
['nbMonthsAgo', 'inNbMonths', (60 * 60 * 24 * 365) / 12, 1],
['nbWeeksAgo', 'inNbWeeks', 60 * 60 * 24 * 7, 1],
@@ -24,13 +24,21 @@ const toDate = (input: DateLike): Date =>
input instanceof Date ? input : new Date(isNaN(input as any) ? input : parseInt(input as any));
// format the diff second to *** time ago
-const formatDiff = (seconds: number): string => {
+const formatAgo = (seconds: number): string => {
const absSeconds = Math.abs(seconds);
const strIndex = seconds < 0 ? 1 : 0;
- const unit = units.find(unit => absSeconds >= unit[2] * unit[3] && unit[strIndex])!;
+ const unit = agoUnits.find(unit => absSeconds >= unit[2] * unit[3] && unit[strIndex])!;
return siteTrans.pluralSame(unit[strIndex]!, Math.floor(absSeconds / unit[2]));
};
+// format the diff second to *** time remaining
+const formatRemaining = (seconds: number): string =>
+ seconds < 1
+ ? siteTrans.noarg('completed')
+ : seconds < 3600
+ ? siteTrans.pluralSame('nbMinutesRemaining', Math.floor(seconds / 60))
+ : siteTrans.pluralSame('nbHoursRemaining', Math.floor(seconds / 3600));
+
export const formatter = memoize(() =>
window.Intl
? // for many users, using the islamic calendar is not practical on the internet
@@ -48,7 +56,7 @@ export const formatter = memoize(() =>
: (d: Date) => d.toLocaleString(),
);
-export const format = (date: DateLike) => formatDiff((Date.now() - toDate(date).getTime()) / 1000);
+export const format = (date: DateLike) => formatAgo((Date.now() - toDate(date).getTime()) / 1000);
export const findAndRender = (parent?: HTMLElement) =>
requestAnimationFrame(() => {
@@ -67,9 +75,12 @@ export const findAndRender = (parent?: HTMLElement) =>
cl.add('set');
if (abs || cl.contains('once')) cl.remove('timeago');
}
- if (!abs) {
+ if (cl.contains('remaining')) {
+ const diff = (node.lichessDate.getTime() - now) / 1000;
+ node.textContent = formatRemaining(diff);
+ } else if (!abs) {
const diff = (now - node.lichessDate.getTime()) / 1000;
- node.textContent = formatDiff(diff);
+ node.textContent = formatAgo(diff);
if (Math.abs(diff) > 9999) cl.remove('timeago'); // ~3h
}
});
diff --git a/ui/storm/package.json b/ui/storm/package.json
index 5b8060d40d557..c040283336cb2 100644
--- a/ui/storm/package.json
+++ b/ui/storm/package.json
@@ -13,7 +13,7 @@
"license": "AGPL-3.0-or-later",
"dependencies": {
"chess": "workspace:*",
- "chessops": "^0.12.7",
+ "chessops": "^0.13.0",
"common": "workspace:*",
"puz": "workspace:*",
"snabbdom": "^3.5.1"
diff --git a/ui/storm/src/view/end.ts b/ui/storm/src/view/end.ts
index a49dc5d380c7e..959dc58078c04 100644
--- a/ui/storm/src/view/end.ts
+++ b/ui/storm/src/view/end.ts
@@ -1,11 +1,10 @@
import StormCtrl from '../ctrl';
import { getNow } from 'puz/util';
import renderHistory from 'puz/view/history';
-import { h, VNode } from 'snabbdom';
import { numberSpread } from 'common/number';
-import { onInsert } from 'common/snabbdom';
+import { onInsert, LooseVNodes, looseH as h } from 'common/snabbdom';
-const renderEnd = (ctrl: StormCtrl): VNode[] => [...renderSummary(ctrl), renderHistory(ctrl)];
+const renderEnd = (ctrl: StormCtrl): LooseVNodes => [...renderSummary(ctrl), renderHistory(ctrl)];
const newHighI18n = {
day: 'newDailyHighscore',
@@ -14,32 +13,27 @@ const newHighI18n = {
allTime: 'newAllTimeHighscore',
};
-const renderSummary = (ctrl: StormCtrl): VNode[] => {
+const renderSummary = (ctrl: StormCtrl): LooseVNodes => {
const run = ctrl.runStats();
const high = ctrl.vm.response?.newHigh;
const accuracy = (100 * (run.moves - run.errors)) / run.moves;
const noarg = ctrl.trans.noarg;
const scoreSteps = Math.min(run.score, 50);
return [
- ...(high
- ? [
- h(
- 'div.storm--end__high.storm--end__high-daily.bar-glider',
- h('div.storm--end__high__content', [
- h('div.storm--end__high__text', [
- h('strong', noarg(newHighI18n[high.key])),
- high.prev ? h('span', ctrl.trans('previousHighscoreWasX', high.prev)) : null,
- ]),
- ]),
- ),
- ]
- : []),
+ high &&
+ h(
+ 'div.storm--end__high.storm--end__high-daily.bar-glider',
+ h('div.storm--end__high__content', [
+ h('div.storm--end__high__text', [
+ h('strong', noarg(newHighI18n[high.key])),
+ high.prev ? h('span', ctrl.trans('previousHighscoreWasX', high.prev)) : null,
+ ]),
+ ]),
+ ),
h('div.storm--end__score', [
h(
'span.storm--end__score__number',
- {
- hook: onInsert(el => numberSpread(el, scoreSteps, Math.round(scoreSteps * 50), 0)(run.score)),
- },
+ { hook: onInsert(el => numberSpread(el, scoreSteps, Math.round(scoreSteps * 50), 0)(run.score)) },
'0',
),
h('p', noarg('puzzlesSolved')),
@@ -61,9 +55,7 @@ const renderSummary = (ctrl: StormCtrl): VNode[] => {
]),
h(
'a.storm-play-again.button',
- {
- attrs: ctrl.run.endAt! < getNow() - 900 ? { href: '/storm' } : {},
- },
+ { attrs: ctrl.run.endAt! < getNow() - 900 ? { href: '/storm' } : {} },
noarg('playAgain'),
),
];
diff --git a/ui/storm/src/view/main.ts b/ui/storm/src/view/main.ts
index 69dbf7a8c26f5..727d6111c13b6 100644
--- a/ui/storm/src/view/main.ts
+++ b/ui/storm/src/view/main.ts
@@ -2,25 +2,19 @@ import config from '../config';
import renderClock from 'puz/view/clock';
import renderEnd from './end';
import StormCtrl from '../ctrl';
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import { makeCgOpts, povMessage } from 'puz/run';
import { makeConfig as makeCgConfig } from 'puz/view/chessground';
import { getNow } from 'puz/util';
import { playModifiers, renderCombo } from 'puz/view/util';
import * as licon from 'common/licon';
-import { onInsert } from 'common/snabbdom';
+import { onInsert, looseH as h } from 'common/snabbdom';
export default function (ctrl: StormCtrl): VNode {
if (ctrl.vm.dupTab) return renderReload(ctrl, 'thisRunWasOpenedInAnotherTab');
if (ctrl.vm.lateStart) return renderReload(ctrl, 'thisRunHasExpired');
if (!ctrl.run.endAt)
- return h(
- 'div.storm.storm-app.storm--play',
- {
- class: playModifiers(ctrl.run),
- },
- renderPlay(ctrl),
- );
+ return h('div.storm.storm-app.storm--play', { class: playModifiers(ctrl.run) }, renderPlay(ctrl));
return h('main.storm.storm--end', renderEnd(ctrl));
}
@@ -50,8 +44,8 @@ const renderPlay = (ctrl: StormCtrl): VNode[] => {
run.clock.startAt ? renderSolved(ctrl) : renderStart(ctrl),
h('div.puz-clock', [
renderClock(run, ctrl.endNow, true),
- !!malus && malus.at > now - 900 ? h('div.puz-clock__malus', '-' + malus.seconds) : null,
- !!bonus && bonus.at > now - 900 ? h('div.puz-clock__bonus', '+' + bonus.seconds) : null,
+ !!malus && malus.at > now - 900 && h('div.puz-clock__malus', '-' + malus.seconds),
+ !!bonus && bonus.at > now - 900 && h('div.puz-clock__bonus', '+' + bonus.seconds),
...(run.clock.started() ? [] : [h('span.puz-clock__pov', ctrl.trans.noarg(povMessage(run)))]),
]),
h('div.puz-side__table', [renderControls(ctrl), renderCombo(config, renderBonus)(run)]),
@@ -65,28 +59,15 @@ const renderSolved = (ctrl: StormCtrl): VNode =>
const renderControls = (ctrl: StormCtrl): VNode =>
h('div.puz-side__control', [
h('a.puz-side__control__flip.button', {
- class: {
- active: ctrl.flipped,
- 'button-empty': !ctrl.flipped,
- },
- attrs: {
- 'data-icon': licon.ChasingArrows,
- title: ctrl.trans.noarg('flipBoard') + ' (Keyboard: f)',
- },
+ class: { active: ctrl.flipped, 'button-empty': !ctrl.flipped },
+ attrs: { 'data-icon': licon.ChasingArrows, title: ctrl.trans.noarg('flipBoard') + ' (Keyboard: f)' },
hook: onInsert(el => el.addEventListener('click', ctrl.flip)),
}),
h('a.puz-side__control__reload.button.button-empty', {
- attrs: {
- href: '/storm',
- 'data-icon': licon.Trash,
- title: ctrl.trans('newRun'),
- },
+ attrs: { href: '/storm', 'data-icon': licon.Trash, title: ctrl.trans('newRun') },
}),
h('a.puz-side__control__end.button.button-empty', {
- attrs: {
- 'data-icon': licon.FlagOutline,
- title: ctrl.trans('endRun'),
- },
+ attrs: { 'data-icon': licon.FlagOutline, title: ctrl.trans('endRun') },
hook: onInsert(el => el.addEventListener('click', ctrl.endNow)),
}),
]);
@@ -100,11 +81,5 @@ const renderReload = (ctrl: StormCtrl, msgKey: string) =>
h('div.storm.storm--reload.box.box-pad', [
h('i', { attrs: { 'data-icon': licon.Storm } }),
h('p', ctrl.trans.noarg(msgKey)),
- h(
- 'a.storm--dup__reload.button',
- {
- attrs: { href: '/storm' },
- },
- ctrl.trans.noarg('clickToReload'),
- ),
+ h('a.storm--dup__reload.button', { attrs: { href: '/storm' } }, ctrl.trans.noarg('clickToReload')),
]);
diff --git a/ui/swiss/src/pagination.ts b/ui/swiss/src/pagination.ts
index 80a204314b9ed..e7218a6555e56 100644
--- a/ui/swiss/src/pagination.ts
+++ b/ui/swiss/src/pagination.ts
@@ -9,11 +9,7 @@ export const maxPerPage = 10;
function button(text: string, icon: string, click: () => void, enable: boolean, ctrl: SwissCtrl): VNode {
return h('button.fbt.is', {
- attrs: {
- 'data-icon': icon,
- disabled: !enable,
- title: text,
- },
+ attrs: { 'data-icon': icon, disabled: !enable, title: text },
hook: bind('mousedown', click, ctrl.redraw),
});
}
@@ -21,10 +17,7 @@ function button(text: string, icon: string, click: () => void, enable: boolean,
function scrollToMeButton(ctrl: SwissCtrl): VNode | undefined {
return ctrl.data.me
? h('button.fbt' + (ctrl.focusOnMe ? '.active' : ''), {
- attrs: {
- 'data-icon': licon.Target,
- title: 'Scroll to your player',
- },
+ attrs: { 'data-icon': licon.Target, title: 'Scroll to your player' },
hook: bind('mousedown', ctrl.toggleFocusOnMe, ctrl.redraw),
})
: undefined;
diff --git a/ui/swiss/src/search.ts b/ui/swiss/src/search.ts
index 9d7d9360949f4..44a581e99732a 100644
--- a/ui/swiss/src/search.ts
+++ b/ui/swiss/src/search.ts
@@ -6,10 +6,7 @@ import TournamentController from './ctrl';
export function button(ctrl: TournamentController): VNode {
return h('button.fbt', {
class: { active: ctrl.searching },
- attrs: {
- 'data-icon': ctrl.searching ? licon.X : licon.Search,
- title: 'Search tournament players',
- },
+ attrs: { 'data-icon': ctrl.searching ? licon.X : licon.Search, title: 'Search tournament players' },
hook: bind('click', ctrl.toggleSearch, ctrl.redraw),
});
}
@@ -18,9 +15,7 @@ export function input(ctrl: TournamentController): VNode {
return h(
'div.search',
h('input', {
- attrs: {
- spellcheck: 'false',
- },
+ attrs: { spellcheck: 'false' },
hook: onInsert((el: HTMLInputElement) => {
lichess.asset
.userComplete({
diff --git a/ui/swiss/src/view/boards.ts b/ui/swiss/src/view/boards.ts
index 78f5f3002ba5a..eeaa95f6ecc7c 100644
--- a/ui/swiss/src/view/boards.ts
+++ b/ui/swiss/src/view/boards.ts
@@ -19,10 +19,7 @@ const renderBoard =
`div.swiss__board.mini-game.mini-game-${board.id}.mini-game--init.is2d`,
{
key: board.id,
- attrs: {
- 'data-state': `${board.fen},${board.orientation},${board.lastMove}`,
- 'data-live': board.id,
- },
+ attrs: { 'data-state': `${board.fen},${board.orientation},${board.lastMove}`, 'data-live': board.id },
hook: {
insert(vnode) {
lichess.powertip.manualUserIn(vnode.elm as HTMLElement);
@@ -31,11 +28,7 @@ const renderBoard =
},
[
boardPlayer(board, opposite(board.orientation), opts),
- h('a.cg-wrap', {
- attrs: {
- href: `/${board.id}/${board.orientation}`,
- },
- }),
+ h('a.cg-wrap', { attrs: { href: `/${board.id}/${board.orientation}` } }),
boardPlayer(board, board.orientation, opts),
],
);
diff --git a/ui/swiss/src/view/header.ts b/ui/swiss/src/view/header.ts
index a5567c11f0be3..a89bbf442a2d3 100644
--- a/ui/swiss/src/view/header.ts
+++ b/ui/swiss/src/view/header.ts
@@ -15,9 +15,7 @@ function clock(ctrl: SwissCtrl): VNode | undefined {
if (next.in > oneDayInSeconds)
return h('div.clock', [
h('time.timeago.shy', {
- attrs: {
- datetime: Date.now() + next.in * 1000,
- },
+ attrs: { datetime: Date.now() + next.in * 1000 },
hook: {
insert(vnode) {
(vnode.elm as HTMLElement).setAttribute('datetime', '' + (Date.now() + next.in * 1000));
@@ -30,9 +28,7 @@ function clock(ctrl: SwissCtrl): VNode | undefined {
'span.shy',
ctrl.data.status == 'created' ? ctrl.trans.noarg('startingIn') : ctrl.trans.noarg('nextRound'),
),
- h('span.time.text', {
- hook: startClock(next.in + 1),
- }),
+ h('span.time.text', { hook: startClock(next.in + 1) }),
]);
}
@@ -51,17 +47,7 @@ export default function (ctrl: SwissCtrl): VNode {
'h1',
greatPlayer
? [
- h(
- 'a',
- {
- attrs: {
- href: greatPlayer.url,
- target: '_blank',
- rel: 'noopener',
- },
- },
- greatPlayer.name,
- ),
+ h('a', { attrs: { href: greatPlayer.url, target: '_blank', rel: 'noopener' } }, greatPlayer.name),
' Tournament',
]
: [ctrl.data.name],
diff --git a/ui/swiss/src/view/main.ts b/ui/swiss/src/view/main.ts
index bf1c50190db5f..6121b64da8801 100644
--- a/ui/swiss/src/view/main.ts
+++ b/ui/swiss/src/view/main.ts
@@ -1,7 +1,7 @@
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import * as licon from 'common/licon';
import { spinnerVdom as spinner } from 'common/spinner';
-import { dataIcon, bind, onInsert, MaybeVNodes } from 'common/snabbdom';
+import { dataIcon, bind, onInsert, LooseVNodes, looseH as h } from 'common/snabbdom';
import { numberRow } from './util';
import SwissCtrl from '../ctrl';
import * as pagination from '../pagination';
@@ -17,59 +17,46 @@ export default function (ctrl: SwissCtrl) {
const d = ctrl.data;
const content =
d.status == 'created' ? created(ctrl) : d.status == 'started' ? started(ctrl) : finished(ctrl);
- return h(
- 'main.' + ctrl.opts.classes,
- {
- hook: {
- postpatch() {
- lichess.miniGame.initAll();
- },
- },
- },
- [
- h('aside.swiss__side', {
- hook: onInsert(el => {
- $(el).replaceWith(ctrl.opts.$side);
- ctrl.opts.chat && lichess.makeChat(ctrl.opts.chat);
- }),
- }),
- h('div.swiss__underchat', {
- hook: onInsert(el => {
- $(el).replaceWith($('.swiss__underchat.none').removeClass('none'));
- }),
+ return h('main.' + ctrl.opts.classes, { hook: { postpatch: () => lichess.miniGame.initAll() } }, [
+ h('aside.swiss__side', {
+ hook: onInsert(el => {
+ $(el).replaceWith(ctrl.opts.$side);
+ ctrl.opts.chat && lichess.makeChat(ctrl.opts.chat);
}),
- playerInfo(ctrl) || stats(ctrl) || boards.top(d.boards, ctrl.opts),
- h('div.swiss__main', [h('div.box.swiss__main-' + d.status, content), boards.many(d.boards, ctrl.opts)]),
- ctrl.opts.chat
- ? h('div.chat__members.none', {
- hook: onInsert(lichess.watchers),
- })
- : null,
- ],
- );
+ }),
+ h('div.swiss__underchat', {
+ hook: onInsert(el => $(el).replaceWith($('.swiss__underchat.none').removeClass('none'))),
+ }),
+ playerInfo(ctrl) || stats(ctrl) || boards.top(d.boards, ctrl.opts),
+ h('div.swiss__main', [h('div.box.swiss__main-' + d.status, content), boards.many(d.boards, ctrl.opts)]),
+ ctrl.opts.chat && h('div.chat__members.none', { hook: onInsert(lichess.watchers) }),
+ ]);
}
-function created(ctrl: SwissCtrl): MaybeVNodes {
+function created(ctrl: SwissCtrl): LooseVNodes {
const pag = pagination.players(ctrl);
return [
header(ctrl),
nextRound(ctrl),
controls(ctrl, pag),
standing(ctrl, pag, 'created'),
- ctrl.data.quote
- ? h('blockquote.pull-quote', [h('p', ctrl.data.quote.text), h('footer', ctrl.data.quote.author)])
- : undefined,
+ ctrl.data.quote &&
+ h('blockquote.pull-quote', [h('p', ctrl.data.quote.text), h('footer', ctrl.data.quote.author)]),
];
}
-const notice = (ctrl: SwissCtrl): VNode | undefined => {
+const notice = (ctrl: SwissCtrl) => {
const d = ctrl.data;
- return d.me && !d.me.absent && d.status == 'started' && d.nextRound
- ? h('div.swiss__notice.bar-glider', ctrl.trans('standByX', d.me.name))
- : undefined;
+ return (
+ d.me &&
+ !d.me.absent &&
+ d.status == 'started' &&
+ d.nextRound &&
+ h('div.swiss__notice.bar-glider', ctrl.trans('standByX', d.me.name))
+ );
};
-function started(ctrl: SwissCtrl): MaybeVNodes {
+function started(ctrl: SwissCtrl): LooseVNodes {
const pag = pagination.players(ctrl);
return [
header(ctrl),
@@ -80,7 +67,7 @@ function started(ctrl: SwissCtrl): MaybeVNodes {
];
}
-function finished(ctrl: SwissCtrl): MaybeVNodes {
+function finished(ctrl: SwissCtrl): LooseVNodes {
const pag = pagination.players(ctrl);
return [
h('div.podium-wrap', [confetti(ctrl.data), header(ctrl), podium(ctrl)]),
@@ -98,21 +85,12 @@ function nextRound(ctrl: SwissCtrl): VNode | undefined {
return h(
'form.schedule-next-round',
{
- class: {
- required: !ctrl.data.nextRound,
- },
- attrs: {
- action: `/api/swiss/${ctrl.data.id}/schedule-next-round`,
- method: 'post',
- },
+ class: { required: !ctrl.data.nextRound },
+ attrs: { action: `/api/swiss/${ctrl.data.id}/schedule-next-round`, method: 'post' },
},
[
h('input', {
- attrs: {
- name: 'date',
- placeholder: 'Schedule the next round',
- value: ctrl.data.nextRound?.at || '',
- },
+ attrs: { name: 'date', placeholder: 'Schedule the next round', value: ctrl.data.nextRound?.at || '' },
hook: onInsert((el: HTMLInputElement) =>
flatpickr(el, {
minDate: 'today',
@@ -137,24 +115,14 @@ function joinButton(ctrl: SwissCtrl): VNode | undefined {
if (!ctrl.opts.userId)
return h(
'a.fbt.text.highlight',
- {
- attrs: {
- href: '/login?referrer=' + window.location.pathname,
- 'data-icon': licon.PlayTriangle,
- },
- },
+ { attrs: { href: '/login?referrer=' + window.location.pathname, 'data-icon': licon.PlayTriangle } },
ctrl.trans('signIn'),
);
if (d.joinTeam)
return h(
'a.fbt.text.highlight',
- {
- attrs: {
- href: `/team/${d.joinTeam}`,
- 'data-icon': licon.Group,
- },
- },
+ { attrs: { href: `/team/${d.joinTeam}`, 'data-icon': licon.Group } },
ctrl.trans.noarg('joinTeam'),
);
@@ -185,20 +153,14 @@ function joinButton(ctrl: SwissCtrl): VNode | undefined {
? spinner()
: h(
'button.fbt.text.highlight',
- {
- attrs: dataIcon(licon.PlayTriangle),
- hook: bind('click', _ => ctrl.join(), ctrl.redraw),
- },
+ { attrs: dataIcon(licon.PlayTriangle), hook: bind('click', _ => ctrl.join(), ctrl.redraw) },
ctrl.trans.noarg('join'),
)
: ctrl.joinSpinner
? spinner()
: h(
'button.fbt.text',
- {
- attrs: dataIcon(licon.FlagOutline),
- hook: bind('click', ctrl.withdraw, ctrl.redraw),
- },
+ { attrs: dataIcon(licon.FlagOutline), hook: bind('click', ctrl.withdraw, ctrl.redraw) },
ctrl.trans.noarg('withdraw'),
);
@@ -207,110 +169,86 @@ function joinButton(ctrl: SwissCtrl): VNode | undefined {
function joinTheGame(ctrl: SwissCtrl) {
const gameId = ctrl.data.me?.gameId;
- return gameId
- ? h(
- 'a.swiss__ur-playing.button.is.is-after',
- {
- attrs: { href: '/' + gameId },
- },
- [ctrl.trans('youArePlaying'), h('br'), ctrl.trans('joinTheGame')],
- )
- : undefined;
+ return (
+ gameId &&
+ h('a.swiss__ur-playing.button.is.is-after', { attrs: { href: '/' + gameId } }, [
+ ctrl.trans('youArePlaying'),
+ h('br'),
+ ctrl.trans('joinTheGame'),
+ ])
+ );
}
-function confetti(data: SwissData): VNode | undefined {
- return data.me && data.isRecentlyFinished && lichess.once('tournament.end.canvas.' + data.id)
- ? h('canvas#confetti', {
- hook: {
- insert: _ => lichess.asset.loadIife('javascripts/confetti.js'),
- },
- })
- : undefined;
+function confetti(data: SwissData) {
+ return (
+ data.me &&
+ data.isRecentlyFinished &&
+ lichess.once('tournament.end.canvas.' + data.id) &&
+ h('canvas#confetti', {
+ hook: {
+ insert: _ => lichess.asset.loadIife('javascripts/confetti.js'),
+ },
+ })
+ );
}
-function stats(ctrl: SwissCtrl): VNode | undefined {
+function stats(ctrl: SwissCtrl) {
const s = ctrl.data.stats,
noarg = ctrl.trans.noarg,
slots = ctrl.data.round * ctrl.data.nbPlayers;
- return s
- ? h('div.swiss__stats', [
- h('h2', noarg('tournamentComplete')),
- h('table', [
- ctrl.opts.showRatings ? numberRow(noarg('averageElo'), s.averageRating, 'raw') : null,
- numberRow(noarg('gamesPlayed'), s.games),
- numberRow(noarg('whiteWins'), [s.whiteWins, slots], 'percent'),
- numberRow(noarg('blackWins'), [s.blackWins, slots], 'percent'),
- numberRow(noarg('drawRate'), [s.draws, slots], 'percent'),
- numberRow('Byes', [s.byes, slots], 'percent'),
- numberRow('Absences', [s.absences, slots], 'percent'),
- ]),
- h('div.swiss__stats__links', [
- h(
- 'a',
- {
- attrs: {
- href: `/swiss/${ctrl.data.id}/round/1`,
- },
- },
- ctrl.trans('viewAllXRounds', ctrl.data.round),
- ),
- h('br'),
- h(
- 'a.text',
- {
- attrs: {
- 'data-icon': licon.Download,
- href: `/swiss/${ctrl.data.id}.trf`,
- download: true,
- },
- },
- 'Download TRF file',
- ),
- h(
- 'a.text',
- {
- attrs: {
- 'data-icon': licon.Download,
- href: `/api/swiss/${ctrl.data.id}/games`,
- download: true,
- },
- },
- 'Download all games',
- ),
- h(
- 'a.text',
- {
- attrs: {
- 'data-icon': licon.Download,
- href: `/api/swiss/${ctrl.data.id}/results`,
- download: true,
- },
- },
- 'Download results as NDJSON',
- ),
- h(
- 'a.text',
- {
- attrs: {
- 'data-icon': licon.Download,
- href: `/api/swiss/${ctrl.data.id}/results?as=csv`,
- download: true,
- },
- },
- 'Download results as CSV',
- ),
- h('br'),
- h(
- 'a.text',
- {
- attrs: {
- 'data-icon': licon.InfoCircle,
- href: 'https://lichess.org/api#tag/Swiss-tournaments',
- },
- },
- 'Swiss API documentation',
- ),
- ]),
- ])
- : undefined;
+ if (!s) return undefined;
+ return h('div.swiss__stats', [
+ h('h2', noarg('tournamentComplete')),
+ h('table', [
+ ctrl.opts.showRatings ? numberRow(noarg('averageElo'), s.averageRating, 'raw') : null,
+ numberRow(noarg('gamesPlayed'), s.games),
+ numberRow(noarg('whiteWins'), [s.whiteWins, slots], 'percent'),
+ numberRow(noarg('blackWins'), [s.blackWins, slots], 'percent'),
+ numberRow(noarg('drawRate'), [s.draws, slots], 'percent'),
+ numberRow('Byes', [s.byes, slots], 'percent'),
+ numberRow('Absences', [s.absences, slots], 'percent'),
+ ]),
+ h('div.swiss__stats__links', [
+ h(
+ 'a',
+ { attrs: { href: `/swiss/${ctrl.data.id}/round/1` } },
+ ctrl.trans('viewAllXRounds', ctrl.data.round),
+ ),
+ h('br'),
+ h(
+ 'a.text',
+ { attrs: { 'data-icon': licon.Download, href: `/swiss/${ctrl.data.id}.trf`, download: true } },
+ 'Download TRF file',
+ ),
+ h(
+ 'a.text',
+ { attrs: { 'data-icon': licon.Download, href: `/api/swiss/${ctrl.data.id}/games`, download: true } },
+ 'Download all games',
+ ),
+ h(
+ 'a.text',
+ {
+ attrs: { 'data-icon': licon.Download, href: `/api/swiss/${ctrl.data.id}/results`, download: true },
+ },
+ 'Download results as NDJSON',
+ ),
+ h(
+ 'a.text',
+ {
+ attrs: {
+ 'data-icon': licon.Download,
+ href: `/api/swiss/${ctrl.data.id}/results?as=csv`,
+ download: true,
+ },
+ },
+ 'Download results as CSV',
+ ),
+ h('br'),
+ h(
+ 'a.text',
+ { attrs: { 'data-icon': licon.InfoCircle, href: 'https://lichess.org/api#tag/Swiss-tournaments' } },
+ 'Swiss API documentation',
+ ),
+ ]),
+ ]);
}
diff --git a/ui/swiss/src/view/playerInfo.ts b/ui/swiss/src/view/playerInfo.ts
index a0426052a28b8..b444f7d239d33 100644
--- a/ui/swiss/src/view/playerInfo.ts
+++ b/ui/swiss/src/view/playerInfo.ts
@@ -1,7 +1,7 @@
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import * as licon from 'common/licon';
import { spinnerVdom as spinner } from 'common/spinner';
-import { bind, dataIcon } from 'common/snabbdom';
+import { bind, dataIcon, looseH as h } from 'common/snabbdom';
import { player as renderPlayer, numberRow } from './util';
import { Pairing } from '../interfaces';
import { isOutcome } from '../util';
@@ -20,83 +20,64 @@ export default function (ctrl: SwissCtrl): VNode | undefined {
const avgOp: number | undefined = games
? Math.round(data.sheet.reduce((r, p) => r + ((p as any).rating || 1), 0) / games)
: undefined;
- return h(
- tag,
- {
- hook: {
- insert: setup,
- postpatch(_, vnode) {
- setup(vnode);
- },
- },
- },
- [
- h('a.close', {
- attrs: dataIcon(licon.X),
- hook: bind('click', () => ctrl.showPlayerInfo(data), ctrl.redraw),
- }),
- h('div.stats', [
- h('h2', [h('span.rank', data.rank + '. '), renderPlayer(data, true, false)]),
- h('table', [
- numberRow('Points', data.points, 'raw'),
- numberRow('Tie break', data.tieBreak, 'raw'),
- ...(games
- ? [
- data.performance && ctrl.opts.showRatings
- ? numberRow(noarg('performance'), data.performance + (games < 3 ? '?' : ''), 'raw')
- : null,
- numberRow(noarg('winRate'), [wins, games], 'percent'),
- ctrl.opts.showRatings ? numberRow(noarg('averageOpponent'), avgOp, 'raw') : null,
- ]
- : []),
- ]),
+ return h(tag, { hook: { insert: setup, postpatch: (_, vnode) => setup(vnode) } }, [
+ h('a.close', {
+ attrs: dataIcon(licon.X),
+ hook: bind('click', () => ctrl.showPlayerInfo(data), ctrl.redraw),
+ }),
+ h('div.stats', [
+ h('h2', [h('span.rank', data.rank + '. '), renderPlayer(data, true, false)]),
+ h('table', [
+ numberRow('Points', data.points, 'raw'),
+ numberRow('Tie break', data.tieBreak, 'raw'),
+ ...(games
+ ? [
+ data.performance &&
+ ctrl.opts.showRatings &&
+ numberRow(noarg('performance'), data.performance + (games < 3 ? '?' : ''), 'raw'),
+ numberRow(noarg('winRate'), [wins, games], 'percent'),
+ ctrl.opts.showRatings && numberRow(noarg('averageOpponent'), avgOp, 'raw'),
+ ]
+ : []),
]),
- h('div', [
- h(
- 'table.pairings.sublist',
- {
- hook: bind('click', e => {
- const href = ((e.target as HTMLElement).parentNode as HTMLElement).getAttribute('data-href');
- if (href) window.open(href, '_blank', 'noopener');
- }),
- },
- data.sheet.map((p, i) => {
- const round = ctrl.data.round - i;
- if (isOutcome(p))
- return h(
- 'tr.' + p,
- {
- key: round,
- },
- [
- h('th', '' + round),
- h('td.outcome', { attrs: { colspan: 3 } }, p),
- h('td', p == 'absent' ? '-' : p == 'bye' ? '1' : '½'),
- ],
- );
- const res = result(p);
- return h(
- 'tr.glpt.' + (res === '1' ? '.win' : res === '0' ? '.loss' : ''),
- {
- key: round,
- attrs: { 'data-href': '/' + p.g + (p.c ? '' : '/black') },
- hook: {
- destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement),
- },
- },
- [
- h('th', '' + round),
- h('td', fullName(p.user)),
- ctrl.opts.showRatings ? h('td', '' + p.rating) : null,
- h('td.is.color-icon.' + (p.c ? 'white' : 'black')),
- h('td.result', res),
- ],
- );
+ ]),
+ h('div', [
+ h(
+ 'table.pairings.sublist',
+ {
+ hook: bind('click', e => {
+ const href = ((e.target as HTMLElement).parentNode as HTMLElement).getAttribute('data-href');
+ if (href) window.open(href, '_blank', 'noopener');
}),
- ),
- ]),
- ],
- );
+ },
+ data.sheet.map((p, i) => {
+ const round = ctrl.data.round - i;
+ if (isOutcome(p))
+ return h('tr.' + p, { key: round }, [
+ h('th', '' + round),
+ h('td.outcome', { attrs: { colspan: 3 } }, p),
+ h('td', p == 'absent' ? '-' : p == 'bye' ? '1' : '½'),
+ ]);
+ const res = result(p);
+ return h(
+ 'tr.glpt.' + (res === '1' ? '.win' : res === '0' ? '.loss' : ''),
+ {
+ key: round,
+ attrs: { 'data-href': '/' + p.g + (p.c ? '' : '/black') },
+ hook: { destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement) },
+ },
+ [
+ h('th', '' + round),
+ h('td', fullName(p.user)),
+ ctrl.opts.showRatings && h('td', '' + p.rating),
+ h('td.is.color-icon.' + (p.c ? 'white' : 'black')),
+ h('td.result', res),
+ ],
+ );
+ }),
+ ),
+ ]),
+ ]);
}
function result(p: Pairing): string {
diff --git a/ui/swiss/src/view/podium.ts b/ui/swiss/src/view/podium.ts
index ee701aa471b23..e2f57b61d00e0 100644
--- a/ui/swiss/src/view/podium.ts
+++ b/ui/swiss/src/view/podium.ts
@@ -13,17 +13,12 @@ const podiumStats = (p: PodiumPlayer, ctrl: SwissCtrl): VNode =>
]);
function podiumPosition(p: PodiumPlayer, pos: string, ctrl: SwissCtrl): VNode | undefined {
- return p
- ? h(
- 'div.' + pos,
- {
- class: {
- lame: !!p.lame,
- },
- },
- [h('div.trophy'), userLink({ ...p.user, line: false }), podiumStats(p, ctrl)],
- )
- : undefined;
+ if (!p) return undefined;
+ return h('div.' + pos, { class: { lame: !!p.lame } }, [
+ h('div.trophy'),
+ userLink({ ...p.user, line: false }),
+ podiumStats(p, ctrl),
+ ]);
}
export default function podium(ctrl: SwissCtrl) {
diff --git a/ui/swiss/src/view/standing.ts b/ui/swiss/src/view/standing.ts
index 7a0c321198280..aff1597b5711b 100644
--- a/ui/swiss/src/view/standing.ts
+++ b/ui/swiss/src/view/standing.ts
@@ -11,22 +11,14 @@ function playerTr(ctrl: SwissCtrl, player: Player) {
'tr',
{
key: userId,
- class: {
- me: ctrl.data.me?.id == userId,
- active: ctrl.playerInfoId === userId,
- },
+ class: { me: ctrl.data.me?.id == userId, active: ctrl.playerInfoId === userId },
hook: bind('click', _ => ctrl.showPlayerInfo(player), ctrl.redraw),
},
[
h(
'td.rank',
player.absent && ctrl.data.status != 'finished'
- ? h('i', {
- attrs: {
- 'data-icon': licon.Pause,
- title: 'Absent',
- },
- })
+ ? h('i', { attrs: { 'data-icon': licon.Pause, title: 'Absent' } })
: [player.rank],
),
h('td.player', renderPlayer(player, false, ctrl.opts.showRatings)),
@@ -44,13 +36,7 @@ function playerTr(ctrl: SwissCtrl, player: Player) {
? h(p, title('Late'), '½')
: h(
'a.glpt.' + (p.o ? 'ongoing' : p.w === true ? 'win' : p.w === false ? 'loss' : 'draw'),
- {
- attrs: {
- key: p.g,
- href: `/${p.g}`,
- },
- hook: onInsert(lichess.powertip.manualGame),
- },
+ { attrs: { key: p.g, href: `/${p.g}` }, hook: onInsert(lichess.powertip.manualGame) },
p.o ? '*' : p.w === true ? '1' : p.w === false ? '0' : '½',
),
)
@@ -76,26 +62,11 @@ export default function standing(ctrl: SwissCtrl, pag: Pager, klass?: string): V
if (pag.currentPageResults) lastBody = tableBody;
return h(
'table.slist.swiss__standing' + (klass ? '.' + klass : ''),
- {
- class: {
- loading: !pag.currentPageResults,
- long: ctrl.data.round > 10,
- xlong: ctrl.data.round > 20,
- },
- },
- [
- h(
- 'tbody',
- {
- hook: {
- insert: preloadUserTips,
- update(_, vnode) {
- preloadUserTips(vnode);
- },
- },
- },
- tableBody,
- ),
- ],
+ { class: { loading: !pag.currentPageResults, long: ctrl.data.round > 10, xlong: ctrl.data.round > 20 } },
+ h(
+ 'tbody',
+ { hook: { insert: preloadUserTips, update: (_, vnode) => preloadUserTips(vnode) } },
+ tableBody,
+ ),
);
}
diff --git a/ui/swiss/src/view/util.ts b/ui/swiss/src/view/util.ts
index 9f0ded4880111..6d5bc034fdb73 100644
--- a/ui/swiss/src/view/util.ts
+++ b/ui/swiss/src/view/util.ts
@@ -8,9 +8,7 @@ export function player(p: BasePlayer, asLink: boolean, withRating: boolean) {
'a.ulpt.user-link' + (((p.user.title || '') + p.user.name).length > 15 ? '.long' : ''),
{
attrs: asLink ? { href: '/@/' + p.user.name } : { 'data-href': '/@/' + p.user.name },
- hook: {
- destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement),
- },
+ hook: { destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement) },
},
[
h('span.name', fullName(p.user)),
diff --git a/ui/tournament/src/pagination.ts b/ui/tournament/src/pagination.ts
index eaa5b0ce5742b..eb23a8d2d7061 100644
--- a/ui/tournament/src/pagination.ts
+++ b/ui/tournament/src/pagination.ts
@@ -15,11 +15,7 @@ function button(
ctrl: TournamentController,
): VNode {
return h('button.fbt.is', {
- attrs: {
- 'data-icon': icon,
- disabled: !enable,
- title: text,
- },
+ attrs: { 'data-icon': icon, disabled: !enable, title: text },
hook: bind('mousedown', click, ctrl.redraw),
});
}
@@ -27,10 +23,7 @@ function button(
function scrollToMeButton(ctrl: TournamentController): VNode | undefined {
if (ctrl.data.me)
return h('button.fbt' + (ctrl.focusOnMe ? '.active' : ''), {
- attrs: {
- 'data-icon': licon.Target,
- title: 'Scroll to your player',
- },
+ attrs: { 'data-icon': licon.Target, title: 'Scroll to your player' },
hook: bind('mousedown', ctrl.toggleFocusOnMe, ctrl.redraw),
});
return undefined;
diff --git a/ui/tournament/src/search.ts b/ui/tournament/src/search.ts
index badc6db1f101e..125900a146c53 100644
--- a/ui/tournament/src/search.ts
+++ b/ui/tournament/src/search.ts
@@ -6,10 +6,7 @@ import TournamentController from './ctrl';
export function button(ctrl: TournamentController): VNode {
return h('button.fbt', {
class: { active: ctrl.searching },
- attrs: {
- 'data-icon': ctrl.searching ? licon.X : licon.Search,
- title: 'Search tournament players',
- },
+ attrs: { 'data-icon': ctrl.searching ? licon.X : licon.Search, title: 'Search tournament players' },
hook: bind('click', ctrl.toggleSearch, ctrl.redraw),
});
}
@@ -18,9 +15,7 @@ export function input(ctrl: TournamentController): VNode {
return h(
'div.search',
h('input', {
- attrs: {
- spellcheck: 'false',
- },
+ attrs: { spellcheck: 'false' },
hook: onInsert((el: HTMLInputElement) => {
lichess.asset
.userComplete({
diff --git a/ui/tournament/src/view/arena.ts b/ui/tournament/src/view/arena.ts
index 0bf96ccdb3d23..174cf52c7d9bc 100644
--- a/ui/tournament/src/view/arena.ts
+++ b/ui/tournament/src/view/arena.ts
@@ -48,12 +48,7 @@ function playerTr(ctrl: TournamentController, player: StandingPlayer) {
h(
'td.rank',
player.withdraw
- ? h('i', {
- attrs: {
- 'data-icon': licon.Pause,
- title: ctrl.trans.noarg('pause'),
- },
- })
+ ? h('i', { attrs: { 'data-icon': licon.Pause, title: ctrl.trans.noarg('pause') } })
: player.rank,
),
h('td.player', [
@@ -122,18 +117,14 @@ export function standing(ctrl: TournamentController, pag: Pagination, klass?: st
if (pag.currentPageResults) lastBody = tableBody;
return h(
'table.slist.tour__standing' + (klass ? '.' + klass : ''),
- {
- class: { loading: !pag.currentPageResults },
- },
+ { class: { loading: !pag.currentPageResults } },
[
h(
'tbody',
{
hook: {
insert: vnode => lichess.powertip.manualUserIn(vnode.elm as HTMLElement),
- update(_, vnode) {
- lichess.powertip.manualUserIn(vnode.elm as HTMLElement);
- },
+ update: (_, vnode) => lichess.powertip.manualUserIn(vnode.elm as HTMLElement),
},
},
tableBody,
diff --git a/ui/tournament/src/view/battle.ts b/ui/tournament/src/view/battle.ts
index 313b97ffe4101..f7c1f99855a23 100644
--- a/ui/tournament/src/view/battle.ts
+++ b/ui/tournament/src/view/battle.ts
@@ -31,11 +31,7 @@ export function joinWithTeamSelector(ctrl: TournamentController) {
...tb.joinWith.map(id =>
h(
'button.button.team-picker__team',
- {
- attrs: {
- 'data-id': id,
- },
- },
+ { attrs: { 'data-id': id } },
renderTeamArray(tb.teams[id]),
),
),
@@ -45,16 +41,7 @@ export function joinWithTeamSelector(ctrl: TournamentController) {
h(
'ul',
shuffleArray(Object.keys(tb.teams)).map((id: string) =>
- h(
- 'li',
- h(
- 'a',
- {
- attrs: { href: '/team/' + id },
- },
- renderTeamArray(tb.teams[id]),
- ),
- ),
+ h('li', h('a', { attrs: { href: '/team/' + id } }, renderTeamArray(tb.teams[id]))),
),
),
]),
@@ -84,16 +71,10 @@ function extraTeams(ctrl: TournamentController): VNode {
'tr',
h(
'td.more-teams',
- {
- attrs: { colspan: 4 },
- },
+ { attrs: { colspan: 4 } },
h(
'a',
- {
- attrs: {
- href: `/tournament/${ctrl.data.id}/teams`,
- },
- },
+ { attrs: { href: `/tournament/${ctrl.data.id}/teams` } },
ctrl.trans('viewAllXTeams', Object.keys(ctrl.data.teamBattle!.teams).length),
),
),
@@ -122,12 +103,8 @@ function teamTr(ctrl: TournamentController, battle: TeamBattle, team: RankedTeam
{
key: p.user.name,
class: { top: i === 0 },
- attrs: {
- 'data-href': '/@/' + p.user.name,
- },
- hook: {
- destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement),
- },
+ attrs: { 'data-href': '/@/' + p.user.name },
+ hook: { destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement) },
},
[...(i === 0 ? [h('username', fullName(p.user)), ' '] : []), '' + p.score],
),
@@ -137,9 +114,7 @@ function teamTr(ctrl: TournamentController, battle: TeamBattle, team: RankedTeam
'tr',
{
key: team.id,
- class: {
- active: ctrl.teamInfo.requested == team.id,
- },
+ class: { active: ctrl.teamInfo.requested == team.id },
hook: bind('click', _ => ctrl.showTeamInfo(team.id), ctrl.redraw),
},
[
diff --git a/ui/tournament/src/view/button.ts b/ui/tournament/src/view/button.ts
index d0fdb704e6ef5..c4a091be90d73 100644
--- a/ui/tournament/src/view/button.ts
+++ b/ui/tournament/src/view/button.ts
@@ -29,41 +29,32 @@ export function join(ctrl: TournamentController): VNode {
const button = h(
'button.fbt.text' + (joinable ? '.highlight' : ''),
{
- attrs: {
- disabled: !joinable,
- 'data-icon': licon.PlayTriangle,
- },
+ attrs: { disabled: !joinable, 'data-icon': licon.PlayTriangle },
hook: bind('click', _ => ctrl.join(), ctrl.redraw),
},
ctrl.trans.noarg('join'),
);
return delay
- ? h(
- 'div.delay-wrap',
- {
- attrs: { title: 'Waiting to be able to re-join the tournament' },
- },
- [
- h(
- 'div.delay',
- {
- hook: {
- insert(vnode) {
- const el = vnode.elm as HTMLElement;
- el.style.animation = `tour-delay ${delay}s linear`;
- setTimeout(() => {
- if (delay === ctrl.data.me!.pauseDelay) {
- ctrl.data.me!.pauseDelay = 0;
- ctrl.redraw();
- }
- }, delay * 1000);
- },
+ ? h('div.delay-wrap', { attrs: { title: 'Waiting to be able to re-join the tournament' } }, [
+ h(
+ 'div.delay',
+ {
+ hook: {
+ insert(vnode) {
+ const el = vnode.elm as HTMLElement;
+ el.style.animation = `tour-delay ${delay}s linear`;
+ setTimeout(() => {
+ if (delay === ctrl.data.me!.pauseDelay) {
+ ctrl.data.me!.pauseDelay = 0;
+ ctrl.redraw();
+ }
+ }, delay * 1000);
},
},
- [button],
- ),
- ],
- )
+ },
+ button,
+ ),
+ ])
: button;
});
}
@@ -72,12 +63,7 @@ export function joinWithdraw(ctrl: TournamentController): VNode | undefined {
if (!ctrl.opts.userId)
return h(
'a.fbt.text.highlight',
- {
- attrs: {
- href: '/login?referrer=' + window.location.pathname,
- 'data-icon': licon.PlayTriangle,
- },
- },
+ { attrs: { href: '/login?referrer=' + window.location.pathname, 'data-icon': licon.PlayTriangle } },
ctrl.trans('signIn'),
);
if (!ctrl.data.isFinished) return ctrl.isIn() ? withdraw(ctrl) : join(ctrl);
diff --git a/ui/tournament/src/view/created.ts b/ui/tournament/src/view/created.ts
index 97f3d1052a96f..2200b57ed1d98 100644
--- a/ui/tournament/src/view/created.ts
+++ b/ui/tournament/src/view/created.ts
@@ -17,11 +17,7 @@ export function main(ctrl: TournamentController): MaybeVNodes {
controls(ctrl, pag),
standing(ctrl, pag, 'created'),
h('blockquote.pull-quote', [h('p', ctrl.data.quote.text), h('footer', ctrl.data.quote.author)]),
- ctrl.opts.$faq
- ? h('div', {
- hook: onInsert(el => $(el).replaceWith(ctrl.opts.$faq)),
- })
- : null,
+ ctrl.opts.$faq ? h('div', { hook: onInsert(el => $(el).replaceWith(ctrl.opts.$faq)) }) : null,
];
}
diff --git a/ui/tournament/src/view/finished.ts b/ui/tournament/src/view/finished.ts
index b771f97852167..bedf9d9360093 100644
--- a/ui/tournament/src/view/finished.ts
+++ b/ui/tournament/src/view/finished.ts
@@ -14,9 +14,7 @@ import { MaybeVNodes } from 'common/snabbdom';
function confetti(data: TournamentData): VNode | undefined {
if (data.me && data.isRecentlyFinished && lichess.once('tournament.end.canvas.' + data.id))
return h('canvas#confetti', {
- hook: {
- insert: _ => lichess.asset.loadIife('javascripts/confetti.js'),
- },
+ hook: { insert: _ => lichess.asset.loadIife('javascripts/confetti.js') },
});
return undefined;
}
@@ -47,11 +45,7 @@ function stats(ctrl: TournamentController): VNode | undefined {
? [
h(
'a',
- {
- attrs: {
- href: `/tournament/${data.id}/teams`,
- },
- },
+ { attrs: { href: `/tournament/${data.id}/teams` } },
trans('viewAllXTeams', Object.keys(data.teamBattle.teams).length),
),
h('br'),
@@ -59,13 +53,7 @@ function stats(ctrl: TournamentController): VNode | undefined {
: []),
h(
'a.text',
- {
- attrs: {
- 'data-icon': licon.Download,
- href: `/api/tournament/${data.id}/games`,
- download: true,
- },
- },
+ { attrs: { 'data-icon': licon.Download, href: `/api/tournament/${data.id}/games`, download: true } },
'Download all games',
),
data.me &&
@@ -83,11 +71,7 @@ function stats(ctrl: TournamentController): VNode | undefined {
h(
'a.text',
{
- attrs: {
- 'data-icon': licon.Download,
- href: `/api/tournament/${data.id}/results`,
- download: true,
- },
+ attrs: { 'data-icon': licon.Download, href: `/api/tournament/${data.id}/results`, download: true },
},
'Download results as NDJSON',
),
@@ -105,12 +89,7 @@ function stats(ctrl: TournamentController): VNode | undefined {
h('br'),
h(
'a.text',
- {
- attrs: {
- 'data-icon': licon.InfoCircle,
- href: 'https://lichess.org/api#tag/Arena-tournaments',
- },
- },
+ { attrs: { 'data-icon': licon.InfoCircle, href: 'https://lichess.org/api#tag/Arena-tournaments' } },
'Arena API documentation',
),
]),
diff --git a/ui/tournament/src/view/header.ts b/ui/tournament/src/view/header.ts
index d8ba6b94bc302..1ed6946b21059 100644
--- a/ui/tournament/src/view/header.ts
+++ b/ui/tournament/src/view/header.ts
@@ -15,12 +15,7 @@ const hasFreq = (freq: 'shield' | 'marathon', d: TournamentData) => d.schedule?.
function clock(d: TournamentData): VNode | undefined {
if (d.isFinished) return;
- if (d.secondsToFinish)
- return h('div.clock', [
- h('div.time', {
- hook: startClock(d.secondsToFinish),
- }),
- ]);
+ if (d.secondsToFinish) return h('div.clock', [h('div.time', { hook: startClock(d.secondsToFinish) })]);
if (d.secondsToStart) {
if (d.secondsToStart > oneDayInSeconds)
return h('div.clock', [
@@ -41,9 +36,7 @@ function clock(d: TournamentData): VNode | undefined {
]);
return h('div.clock.clock-created', [
h('span.shy', 'Starting in'),
- h('span.time.text', {
- hook: startClock(d.secondsToStart),
- }),
+ h('span.time.text', { hook: startClock(d.secondsToStart) }),
]);
}
return undefined;
@@ -53,13 +46,8 @@ function image(d: TournamentData): VNode | undefined {
if (d.isFinished) return;
if (hasFreq('shield', d) || hasFreq('marathon', d)) return;
const s = d.spotlight;
- if (s && s.iconImg)
- return h('img.img', {
- attrs: { src: lichess.asset.url('images/' + s.iconImg) },
- });
- return h('i.img', {
- attrs: dataIcon(s?.iconFont || licon.Trophy),
- });
+ if (s && s.iconImg) return h('img.img', { attrs: { src: lichess.asset.url('images/' + s.iconImg) } });
+ return h('i.img', { attrs: dataIcon(s?.iconFont || licon.Trophy) });
}
function title(ctrl: TournamentController) {
@@ -67,13 +55,7 @@ function title(ctrl: TournamentController) {
if (hasFreq('marathon', d)) return h('h1', [h('i.fire-trophy', licon.Globe), d.fullName]);
if (hasFreq('shield', d))
return h('h1', [
- h(
- 'a.shield-trophy',
- {
- attrs: { href: '/tournament/shields' },
- },
- perfIcons[d.perf.key],
- ),
+ h('a.shield-trophy', { attrs: { href: '/tournament/shields' } }, perfIcons[d.perf.key]),
d.fullName,
]);
return h(
@@ -82,13 +64,7 @@ function title(ctrl: TournamentController) {
? [
h(
'a',
- {
- attrs: {
- href: d.greatPlayer.url,
- target: '_blank',
- rel: 'noopener',
- },
- },
+ { attrs: { href: d.greatPlayer.url, target: '_blank', rel: 'noopener' } },
d.greatPlayer.name,
),
' Arena',
diff --git a/ui/tournament/src/view/main.ts b/ui/tournament/src/view/main.ts
index 958c64b5bd7c0..93a86d74eea13 100644
--- a/ui/tournament/src/view/main.ts
+++ b/ui/tournament/src/view/main.ts
@@ -24,26 +24,18 @@ export default function (ctrl: TournamentController) {
}),
}),
h('div.tour__underchat', {
- hook: onInsert(el => {
- $(el).replaceWith($('.tour__underchat.none').removeClass('none'));
- }),
+ hook: onInsert(el => $(el).replaceWith($('.tour__underchat.none').removeClass('none'))),
}),
handler.table(ctrl),
h(
'div.tour__main',
h(
'div.box.' + handler.name,
- {
- class: { 'tour__main-finished': ctrl.data.isFinished },
- },
+ { class: { 'tour__main-finished': ctrl.data.isFinished } },
handler.main(ctrl),
),
),
- ctrl.opts.chat
- ? h('div.chat__members.none', {
- hook: onInsert(lichess.watchers),
- })
- : null,
+ ctrl.opts.chat ? h('div.chat__members.none', { hook: onInsert(lichess.watchers) }) : null,
ctrl.joinWithTeamSelector ? joinWithTeamSelector(ctrl) : null,
]);
}
diff --git a/ui/tournament/src/view/playerInfo.ts b/ui/tournament/src/view/playerInfo.ts
index 87c5ed69753a2..2fee07a7b2854 100644
--- a/ui/tournament/src/view/playerInfo.ts
+++ b/ui/tournament/src/view/playerInfo.ts
@@ -1,7 +1,7 @@
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import * as licon from 'common/licon';
import { spinnerVdom as spinner } from 'common/spinner';
-import { bind, dataIcon } from 'common/snabbdom';
+import { bind, dataIcon, looseH as h } from 'common/snabbdom';
import { numberRow, player as renderPlayer } from './util';
import { fullName } from 'common/userLink';
import { teamName } from './battle';
@@ -41,81 +41,63 @@ export default function (ctrl: TournamentController): VNode {
avgOp = pairingsLen
? Math.round(data.pairings.reduce((a, b) => a + b.op.rating, 0) / pairingsLen)
: undefined;
- return h(
- tag,
- {
- hook: {
- insert: setup,
- postpatch(_, vnode) {
- setup(vnode);
- },
- },
- },
- [
- h('a.close', {
- attrs: dataIcon(licon.X),
- hook: bind('click', () => ctrl.showPlayerInfo(data.player), ctrl.redraw),
- }),
- h('div.stats', [
- playerTitle(data.player),
- data.player.team
- ? h(
- 'team',
- {
- hook: bind('click', () => ctrl.showTeamInfo(data.player.team!), ctrl.redraw),
- },
- [teamName(ctrl.data.teamBattle!, data.player.team)],
- )
- : null,
- h('table', [
- ctrl.opts.showRatings && data.player.performance
- ? numberRow(noarg('performance'), data.player.performance + (nb.game < 3 ? '?' : ''), 'raw')
- : null,
- numberRow(noarg('gamesPlayed'), nb.game),
- ...(nb.game
- ? [
- numberRow(noarg('winRate'), [nb.win, nb.game], 'percent'),
- numberRow(noarg('berserkRate'), [nb.berserk, nb.game], 'percent'),
- ctrl.opts.showRatings ? numberRow(noarg('averageOpponent'), avgOp, 'raw') : null,
- ]
- : []),
+ return h(tag, { hook: { insert: setup, postpatch: (_, vnode) => setup(vnode) } }, [
+ h('a.close', {
+ attrs: dataIcon(licon.X),
+ hook: bind('click', () => ctrl.showPlayerInfo(data.player), ctrl.redraw),
+ }),
+ h('div.stats', [
+ playerTitle(data.player),
+ data.player.team &&
+ h('team', { hook: bind('click', () => ctrl.showTeamInfo(data.player.team!), ctrl.redraw) }, [
+ teamName(ctrl.data.teamBattle!, data.player.team),
]),
+ h('table', [
+ ctrl.opts.showRatings &&
+ data.player.performance &&
+ numberRow(noarg('performance'), data.player.performance + (nb.game < 3 ? '?' : ''), 'raw'),
+ numberRow(noarg('gamesPlayed'), nb.game),
+ ...(nb.game
+ ? [
+ numberRow(noarg('winRate'), [nb.win, nb.game], 'percent'),
+ numberRow(noarg('berserkRate'), [nb.berserk, nb.game], 'percent'),
+ ctrl.opts.showRatings && numberRow(noarg('averageOpponent'), avgOp, 'raw'),
+ ]
+ : []),
]),
- h('div', [
- h(
- 'table.pairings.sublist',
- {
- hook: bind('click', e => {
- const href = ((e.target as HTMLElement).parentNode as HTMLElement).getAttribute('data-href');
- if (href) window.open(href, '_blank', 'noopener');
- }),
- },
- data.pairings.map(function (p, i) {
- const res = result(p.win, p.status);
- return h(
- 'tr.glpt.' + (res === '1' ? ' win' : res === '0' ? ' loss' : ''),
- {
- key: p.id,
- attrs: { 'data-href': '/' + p.id + '/' + p.color },
- hook: {
- destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement),
- },
- },
- [
- h('th', '' + (Math.max(nb.game, pairingsLen) - i)),
- h('td', fullName(p.op)),
- ctrl.opts.showRatings ? h('td', p.op.rating) : null,
- berserkTd(!!p.op.berserk),
- h('td.is.color-icon.' + p.color),
- h('td.result', res),
- berserkTd(p.berserk),
- ],
- );
+ ]),
+ h('div', [
+ h(
+ 'table.pairings.sublist',
+ {
+ hook: bind('click', e => {
+ const href = ((e.target as HTMLElement).parentNode as HTMLElement).getAttribute('data-href');
+ if (href) window.open(href, '_blank', 'noopener');
}),
- ),
- ]),
- ],
- );
+ },
+ data.pairings.map(function (p, i) {
+ const res = result(p.win, p.status);
+ return h(
+ 'tr.glpt.' + (res === '1' ? ' win' : res === '0' ? ' loss' : ''),
+ {
+ key: p.id,
+ attrs: { 'data-href': '/' + p.id + '/' + p.color },
+ hook: { destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement) },
+ },
+ [
+ h('th', '' + (Math.max(nb.game, pairingsLen) - i)),
+ h('td', fullName(p.op)),
+ ctrl.opts.showRatings ? h('td', p.op.rating) : null,
+ berserkTd(!!p.op.berserk),
+ h('td.is.color-icon.' + p.color),
+ h('td.result', res),
+ berserkTd(p.berserk),
+ ],
+ );
+ }),
+ ),
+ ]),
+ ]);
}
const berserkTd = (b: boolean) =>
diff --git a/ui/tournament/src/view/started.ts b/ui/tournament/src/view/started.ts
index b6826aea91a7f..9ebf72195d9b2 100644
--- a/ui/tournament/src/view/started.ts
+++ b/ui/tournament/src/view/started.ts
@@ -10,13 +10,11 @@ import TournamentController from '../ctrl';
import { MaybeVNodes } from 'common/snabbdom';
function joinTheGame(ctrl: TournamentController, gameId: string) {
- return h(
- 'a.tour__ur-playing.button.is.is-after',
- {
- attrs: { href: '/' + gameId },
- },
- [ctrl.trans('youArePlaying'), h('br'), ctrl.trans('joinTheGame')],
- );
+ return h('a.tour__ur-playing.button.is.is-after', { attrs: { href: '/' + gameId } }, [
+ ctrl.trans('youArePlaying'),
+ h('br'),
+ ctrl.trans('joinTheGame'),
+ ]);
}
function notice(ctrl: TournamentController): VNode {
diff --git a/ui/tournament/src/view/table.ts b/ui/tournament/src/view/table.ts
index b61174221a14b..10a1ff0bdada9 100644
--- a/ui/tournament/src/view/table.ts
+++ b/ui/tournament/src/view/table.ts
@@ -1,7 +1,7 @@
-import { h, VNode } from 'snabbdom';
+import { VNode } from 'snabbdom';
import { opposite } from 'chessground/util';
import * as licon from 'common/licon';
-import { bind, onInsert } from 'common/snabbdom';
+import { bind, onInsert, looseH as h } from 'common/snabbdom';
import { player as renderPlayer } from './util';
import { Duel, DuelPlayer, FeaturedGame, TournamentOpts } from '../interfaces';
import { teamName } from './battle';
@@ -13,21 +13,11 @@ function featuredPlayer(game: FeaturedGame, color: Color, opts: TournamentOpts)
h('span.mini-game__user', [
h('strong', '#' + player.rank),
renderPlayer(player, true, opts.showRatings, false),
- player.berserk
- ? h('i', {
- attrs: {
- 'data-icon': licon.Berserk,
- title: 'Berserk',
- },
- })
- : null,
+ player.berserk && h('i', { attrs: { 'data-icon': licon.Berserk, title: 'Berserk' } }),
]),
game.c
? h(`span.mini-game__clock.mini-game__clock--${color}`, {
- attrs: {
- 'data-time': game.c[color],
- 'data-managed': 1,
- },
+ attrs: { 'data-time': game.c[color], 'data-managed': 1 },
})
: h('span.mini-game__result', game.winner ? (game.winner == color ? 1 : 0) : '½'),
]);
@@ -37,19 +27,12 @@ function featured(game: FeaturedGame, opts: TournamentOpts): VNode {
return h(
`div.tour__featured.mini-game.mini-game-${game.id}.mini-game--init.is2d`,
{
- attrs: {
- 'data-state': `${game.fen},${game.orientation},${game.lastMove}`,
- 'data-live': game.id,
- },
+ attrs: { 'data-state': `${game.fen},${game.orientation},${game.lastMove}`, 'data-live': game.id },
hook: onInsert(lichess.powertip.manualUserIn),
},
[
featuredPlayer(game, opposite(game.orientation), opts),
- h('a.cg-wrap', {
- attrs: {
- href: `/${game.id}/${game.orientation}`,
- },
- }),
+ h('a.cg-wrap', { attrs: { href: `/${game.id}/${game.orientation}` } }),
featuredPlayer(game, game.orientation, opts),
],
);
@@ -57,55 +40,36 @@ function featured(game: FeaturedGame, opts: TournamentOpts): VNode {
const duelPlayerMeta = (p: DuelPlayer, ctrl: TournamentController) => [
h('em.rank', '#' + p.k),
- p.t ? h('em.utitle', p.t) : null,
- ctrl.opts.showRatings ? h('em.rating', '' + p.r) : undefined,
+ p.t && h('em.utitle', p.t),
+ ctrl.opts.showRatings && h('em.rating', '' + p.r),
];
function renderDuel(ctrl: TournamentController) {
const battle = ctrl.data.teamBattle,
duelTeams = ctrl.data.duelTeams;
return (d: Duel) =>
- h(
- 'a.glpt.force-ltr',
- {
- key: d.id,
- attrs: { href: '/' + d.id },
- },
- [
- battle && duelTeams
- ? h(
- 'line.t',
- [0, 1].map(i => teamName(battle, duelTeams[d.p[i].n.toLowerCase()])),
- )
- : undefined,
- h('line.a', [h('strong', d.p[0].n), h('span', duelPlayerMeta(d.p[1], ctrl).reverse())]),
- h('line.b', [h('span', duelPlayerMeta(d.p[0], ctrl)), h('strong', d.p[1].n)]),
- ],
- );
+ h('a.glpt.force-ltr', { key: d.id, attrs: { href: '/' + d.id } }, [
+ battle &&
+ duelTeams &&
+ h(
+ 'line.t',
+ [0, 1].map(i => teamName(battle, duelTeams[d.p[i].n.toLowerCase()])),
+ ),
+ h('line.a', [h('strong', d.p[0].n), h('span', duelPlayerMeta(d.p[1], ctrl).reverse())]),
+ h('line.b', [h('span', duelPlayerMeta(d.p[0], ctrl)), h('strong', d.p[1].n)]),
+ ]);
}
const initMiniGame = (node: VNode) => lichess.miniGame.initAll(node.elm as HTMLElement);
export default function (ctrl: TournamentController): VNode {
- return h(
- 'div.tour__table',
- {
- hook: {
- insert: initMiniGame,
- postpatch: initMiniGame,
- },
- },
- [
- ctrl.data.featured ? featured(ctrl.data.featured, ctrl.opts) : null,
- ctrl.data.duels.length
- ? h(
- 'section.tour__duels',
- {
- hook: bind('click', _ => !ctrl.disableClicks),
- },
- [h('h2', 'Top games')].concat(ctrl.data.duels.map(renderDuel(ctrl))),
- )
- : null,
- ],
- );
+ return h('div.tour__table', { hook: { insert: initMiniGame, postpatch: initMiniGame } }, [
+ ctrl.data.featured && featured(ctrl.data.featured, ctrl.opts),
+ ctrl.data.duels.length > 0 &&
+ h(
+ 'section.tour__duels',
+ { hook: bind('click', _ => !ctrl.disableClicks) },
+ [h('h2', 'Top games')].concat(ctrl.data.duels.map(renderDuel(ctrl))),
+ ),
+ ]);
}
diff --git a/ui/tournament/src/view/teamInfo.ts b/ui/tournament/src/view/teamInfo.ts
index e2de7b327f691..5361dd98bfde2 100644
--- a/ui/tournament/src/view/teamInfo.ts
+++ b/ui/tournament/src/view/teamInfo.ts
@@ -20,74 +20,44 @@ export default function (ctrl: TournamentController): VNode | undefined {
const setup = (vnode: VNode) => {
lichess.powertip.manualUserIn(vnode.elm as HTMLElement);
};
- return h(
- tag,
- {
- hook: {
- insert: setup,
- postpatch(_, vnode) {
- setup(vnode);
- },
- },
- },
- [
- h('a.close', {
- attrs: dataIcon(licon.X),
- hook: bind('click', () => ctrl.showTeamInfo(data.id), ctrl.redraw),
- }),
- h('div.stats', [
- h('h2', [teamTag]),
- h('table', [
- numberRow('Players', data.nbPlayers),
- ...(data.rating
- ? [
- ctrl.opts.showRatings ? numberRow(noarg('averageElo'), data.rating, 'raw') : null,
- ...(data.perf
- ? [
- ctrl.opts.showRatings ? numberRow(noarg('averagePerformance'), data.perf, 'raw') : null,
- numberRow(noarg('averageScore'), data.score, 'raw'),
- ]
- : []),
- ]
- : []),
- h(
- 'tr',
- h(
- 'th',
- h(
- 'a',
- {
- attrs: { href: '/team/' + data.id },
- },
- noarg('teamPage'),
- ),
- ),
- ),
- ]),
+ return h(tag, { hook: { insert: setup, postpatch: (_, vnode) => setup(vnode) } }, [
+ h('a.close', {
+ attrs: dataIcon(licon.X),
+ hook: bind('click', () => ctrl.showTeamInfo(data.id), ctrl.redraw),
+ }),
+ h('div.stats', [
+ h('h2', [teamTag]),
+ h('table', [
+ numberRow('Players', data.nbPlayers),
+ ...(data.rating
+ ? [
+ ctrl.opts.showRatings ? numberRow(noarg('averageElo'), data.rating, 'raw') : null,
+ ...(data.perf
+ ? [
+ ctrl.opts.showRatings ? numberRow(noarg('averagePerformance'), data.perf, 'raw') : null,
+ numberRow(noarg('averageScore'), data.score, 'raw'),
+ ]
+ : []),
+ ]
+ : []),
+ h('tr', h('th', h('a', { attrs: { href: '/team/' + data.id } }, noarg('teamPage')))),
]),
- h('div', [
- h(
- 'table.players.sublist',
- data.topPlayers.map((p, i) =>
- h(
- 'tr',
- {
- key: p.name,
- hook: bind('click', () => ctrl.jumpToPageOf(p.name)),
- },
- [
- h('th', '' + (i + 1)),
- h('td', renderPlayer(p, false, ctrl.opts.showRatings, false, i < nbLeaders)),
- h('td.total', [
- p.fire && !ctrl.data.isFinished
- ? h('strong.is-gold', { attrs: dataIcon(licon.Fire) }, '' + p.score)
- : h('strong', '' + p.score),
- ]),
- ],
- ),
- ),
+ ]),
+ h('div', [
+ h(
+ 'table.players.sublist',
+ data.topPlayers.map((p, i) =>
+ h('tr', { key: p.name, hook: bind('click', () => ctrl.jumpToPageOf(p.name)) }, [
+ h('th', '' + (i + 1)),
+ h('td', renderPlayer(p, false, ctrl.opts.showRatings, false, i < nbLeaders)),
+ h('td.total', [
+ p.fire && !ctrl.data.isFinished
+ ? h('strong.is-gold', { attrs: dataIcon(licon.Fire) }, '' + p.score)
+ : h('strong', '' + p.score),
+ ]),
+ ]),
),
- ]),
- ],
- );
+ ),
+ ]),
+ ]);
}
diff --git a/ui/tournament/src/view/util.ts b/ui/tournament/src/view/util.ts
index 09f922f5b18ba..a9a3709623bca 100644
--- a/ui/tournament/src/view/util.ts
+++ b/ui/tournament/src/view/util.ts
@@ -18,9 +18,7 @@ export const player = (
'a.ulpt.user-link' + (((p.title || '') + p.name).length > 15 ? '.long' : ''),
{
attrs: asLink || 'ontouchstart' in window ? { href: '/@/' + p.name } : { 'data-href': '/@/' + p.name },
- hook: {
- destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement),
- },
+ hook: { destroy: vnode => $.powerTip.destroy(vnode.elm as HTMLElement) },
},
[
h(
diff --git a/ui/tournamentCalendar/src/view.ts b/ui/tournamentCalendar/src/view.ts
index 0dd00ef9e30e8..bda2da3367dce 100644
--- a/ui/tournamentCalendar/src/view.ts
+++ b/ui/tournamentCalendar/src/view.ts
@@ -41,16 +41,7 @@ function renderTournament(tour: Tournament, day: Date) {
},
},
[
- h(
- 'span.icon',
- tour.perf
- ? {
- attrs: {
- 'data-icon': iconOf(tour),
- },
- }
- : {},
- ),
+ h('span.icon', tour.perf ? { attrs: { 'data-icon': iconOf(tour) } } : {}),
h('span.body', [tour.fullName]),
],
);
@@ -84,15 +75,7 @@ function renderDay(ctrl: Ctrl) {
const dayEnd = addDays(day, 1);
const tours = ctrl.data.tournaments.filter(t => t.bounds.start < dayEnd && t.bounds.end > day);
return h('day', [
- h(
- 'date',
- {
- attrs: {
- title: format(day, 'EEEE, dd/MM/yyyy'),
- },
- },
- [format(day, 'dd/MM')],
- ),
+ h('date', { attrs: { title: format(day, 'EEEE, dd/MM/yyyy') } }, [format(day, 'dd/MM')]),
h(
'lanes',
makeLanes(tours).map(l => renderLane(l, day)),
@@ -115,9 +98,7 @@ function renderTimeline() {
hours.map(hour =>
h(
'div.timeheader',
- {
- attrs: { style: startDirection() + ': ' + (hour / 24) * 100 + '%' },
- },
+ { attrs: { style: startDirection() + ': ' + (hour / 24) * 100 + '%' } },
timeString(hour),
),
),
diff --git a/ui/tournamentSchedule/src/view.ts b/ui/tournamentSchedule/src/view.ts
index eade564a55786..650c79ae7981d 100644
--- a/ui/tournamentSchedule/src/view.ts
+++ b/ui/tournamentSchedule/src/view.ts
@@ -169,17 +169,7 @@ function renderTournament(ctrl: Ctrl, tour: Tournament) {
},
},
[
- h(
- 'span.icon',
- tour.perf
- ? {
- attrs: {
- 'data-icon': iconOf(tour),
- title: tour.perf.name,
- },
- }
- : {},
- ),
+ h('span.icon', tour.perf ? { attrs: { 'data-icon': iconOf(tour), title: tour.perf.name } } : {}),
h('span.body', [
h('span.name', i18nName(tour)),
h('span.infos', [
@@ -190,13 +180,7 @@ function renderTournament(ctrl: Ctrl, tour: Tournament) {
tour.rated ? ctrl.trans('ratedTournament') : ctrl.trans('casualTournament'),
]),
tour.nbPlayers
- ? h(
- 'span.nb-players',
- {
- attrs: { 'data-icon': licon.User },
- },
- tour.nbPlayers,
- )
+ ? h('span.nb-players', { attrs: { 'data-icon': licon.User } }, tour.nbPlayers)
: null,
]),
]),
@@ -226,9 +210,7 @@ function renderTimeline() {
time.setUTCMinutes(time.getUTCMinutes() + minutesBetween);
}
timeHeaders.push(
- h('div.timeheader.now', {
- attrs: { style: startDirection() + ': ' + leftPos(now) + 'px' },
- }),
+ h('div.timeheader.now', { attrs: { style: startDirection() + ': ' + leftPos(now) + 'px' } }),
);
return h('div.timeline', timeHeaders);
diff --git a/ui/voice/src/move/view.ts b/ui/voice/src/move/view.ts
index 77089443e2beb..f85821cf3aaba 100644
--- a/ui/voice/src/move/view.ts
+++ b/ui/voice/src/move/view.ts
@@ -35,12 +35,7 @@ export function claritySetting(clarity: Prop, redraw: () => void) {
return h('div.voice-setting', [
h('label', { attrs: { for: 'voice-clarity' } }, 'Clarity'),
h('input#voice-clarity', {
- attrs: {
- type: 'range',
- min: 0,
- max: 2,
- step: 1,
- },
+ attrs: { type: 'range', min: 0, max: 2, step: 1 },
hook: rangeConfig(clarity, val => {
clarity(val);
redraw();
diff --git a/ui/voice/src/view.ts b/ui/voice/src/view.ts
index bf917a225bb10..1ba806fac2df6 100644
--- a/ui/voice/src/view.ts
+++ b/ui/voice/src/view.ts
@@ -1,6 +1,5 @@
-import { h } from 'snabbdom';
import * as licon from 'common/licon';
-import { onInsert, bind } from 'common/snabbdom';
+import { onInsert, bind, looseH as h } from 'common/snabbdom';
import { snabDialog, type Dialog } from 'common/dialog';
import * as xhr from 'common/xhr';
import { onClickAway } from 'common';
@@ -26,15 +25,14 @@ export function renderVoiceBar(ctrl: VoiceCtrl, redraw: () => void, cls?: string
hook: bind('click', () => ctrl.showPrefs.toggle(), redraw, false),
}),
]),
- ctrl.showPrefs()
- ? h('div#voice-settings', { hook: onInsert(onClickAway(() => ctrl.showPrefs(false))) }, [
- deviceSelector(ctrl, redraw),
- langSetting(ctrl),
- ...(ctrl.module()?.prefNodes(redraw) ?? []),
- pushTalkSetting(ctrl),
- ])
- : null,
- ctrl.showHelp() ? renderHelpModal(ctrl) : null,
+ ctrl.showPrefs() &&
+ h('div#voice-settings', { hook: onInsert(onClickAway(() => ctrl.showPrefs(false))) }, [
+ deviceSelector(ctrl, redraw),
+ langSetting(ctrl),
+ ...(ctrl.module()?.prefNodes(redraw) ?? []),
+ pushTalkSetting(ctrl),
+ ]),
+ ctrl.showHelp() && renderHelpModal(ctrl),
]);
}
@@ -67,29 +65,28 @@ function pushTalkSetting(ctrl: VoiceCtrl) {
}
function langSetting(ctrl: VoiceCtrl) {
- return supportedLangs.length < 2
- ? null
- : h('div.voice-setting', [
- h('label', { attrs: { for: 'voice-lang' } }, 'Language'),
- h(
- 'select#voice-lang',
- {
- attrs: { name: 'lang' },
- hook: bind('change', e => ctrl.lang((e.target as HTMLSelectElement).value)),
- },
- [
- ...supportedLangs.map(l =>
- h(
- 'option',
- {
- attrs: l[0] === ctrl.lang() ? { value: l[0], selected: '' } : { value: l[0] },
- },
- l[1],
- ),
+ return (
+ supportedLangs.length > 1 &&
+ h('div.voice-setting', [
+ h('label', { attrs: { for: 'voice-lang' } }, 'Language'),
+ h(
+ 'select#voice-lang',
+ {
+ attrs: { name: 'lang' },
+ hook: bind('change', e => ctrl.lang((e.target as HTMLSelectElement).value)),
+ },
+ [
+ ...supportedLangs.map(l =>
+ h(
+ 'option',
+ { attrs: l[0] === ctrl.lang() ? { value: l[0], selected: '' } : { value: l[0] } },
+ l[1],
),
- ],
- ),
- ]);
+ ),
+ ],
+ ),
+ ])
+ );
}
const nullMic: MediaDeviceInfo = {
@@ -109,11 +106,10 @@ function deviceSelector(ctrl: VoiceCtrl, redraw: () => void) {
{
hook: onInsert((el: HTMLSelectElement) => {
el.addEventListener('change', () => ctrl.micId(el.value));
- if (devices === undefined)
- lichess.mic.getMics().then(ds => {
- devices = ds.length ? ds : [nullMic];
- redraw();
- });
+ lichess.mic.getMics().then(ds => {
+ devices = ds.length ? ds : [nullMic];
+ redraw();
+ });
}),
},
devices.map(d =>