From dfbe5dd139100a2e69f1dfb24413957afe016231 Mon Sep 17 00:00:00 2001 From: yafred <12477220+yafred@users.noreply.github.com> Date: Wed, 23 Apr 2025 14:37:43 +0200 Subject: [PATCH 1/2] add tour into and players (lazy load) for nvui --- ui/analyse/src/interfaces.ts | 4 +- ui/analyse/src/plugins/analyse.nvui.ts | 42 ++++++++++++++++++++- ui/analyse/src/study/relay/relayTourView.ts | 20 +++++----- ui/analyse/src/view/main.ts | 2 +- 4 files changed, 54 insertions(+), 14 deletions(-) diff --git a/ui/analyse/src/interfaces.ts b/ui/analyse/src/interfaces.ts index 82399c843b782..bed529d0dc02c 100644 --- a/ui/analyse/src/interfaces.ts +++ b/ui/analyse/src/interfaces.ts @@ -11,8 +11,10 @@ import type { ExternalEngineInfo } from 'lib/ceval/ceval'; import type { Coords, MoveEvent } from 'lib/prefs'; import type { EnhanceOpts } from 'lib/richText'; +import type * as studyDeps from './study/studyDeps'; + export interface NvuiPlugin { - render(): VNode; + render(deps?: typeof studyDeps): VNode; } export interface AnalyseApi { diff --git a/ui/analyse/src/plugins/analyse.nvui.ts b/ui/analyse/src/plugins/analyse.nvui.ts index 43fecd91e63eb..95f1d0888acf9 100644 --- a/ui/analyse/src/plugins/analyse.nvui.ts +++ b/ui/analyse/src/plugins/analyse.nvui.ts @@ -47,11 +47,16 @@ import { setupPosition } from 'chessops/variant'; import { plyToTurn } from 'lib/game/chess'; import { Chessground as makeChessground } from 'chessground'; import { pubsub } from 'lib/pubsub'; -import { renderResult } from '../view/components'; +import { renderResult, viewContext, type RelayViewContext } from '../view/components'; import { view as chapterNewFormView } from '../study/chapterNewForm'; import { view as chapterEditFormView } from '../study/chapterEditForm'; import renderClocks from '../view/clocks'; +import type * as studyDeps from '../study/studyDeps'; +import type RelayCtrl from '../study/relay/relayCtrl'; +import { playersView } from '../study/relay/relayPlayers'; +import { showInfo as tourOverview } from '../study/relay/relayTourView'; + const throttled = (sound: string) => throttle(100, () => site.sound.play(sound)); const selectSound = throttled('select'); const borderSound = throttled('outOfBound'); @@ -73,7 +78,7 @@ export function initModule(ctrl: AnalyseController): NvuiPlugin { site.mousetrap.bind('c', () => notify.set(renderEvalAndDepth(ctrl))); return { - render(): VNode { + render(deps?: typeof studyDeps): VNode { notify.redraw = ctrl.redraw; const d = ctrl.data, style = moveStyle.get(), @@ -87,6 +92,7 @@ export function initModule(ctrl: AnalyseController): NvuiPlugin { }); return h('main.analyse', [ h('div.nvui', [ + ...(deps && ctrl.study?.relay ? tourDetails(ctrl, ctrl.study, ctrl.study.relay, deps) : []), studyDetails(ctrl), h('h1', 'Textual representation'), h('h2', 'Game info'), @@ -590,6 +596,38 @@ const redirectToSelectedHook = bind('change', (e: InputEvent) => { if (url) window.location.href = url; }); +function tourDetails( + ctrl: AnalyseController, + study: studyDeps.StudyCtrl, + relay: RelayCtrl, + deps: typeof studyDeps, +): VNode[] { + const ctx: RelayViewContext = { ...viewContext(ctrl, deps), study, deps, relay, allowVideo: false }; + const tour = ctx.relay.data.tour; + ctx.relay.redraw = ctrl.redraw; + + return [ + h('h1', 'Tour details'), + h('h2', 'Overview'), + h('div', tourOverview(tour.info, tour.dates)), + h('h2', 'Players'), + h( + 'button', + { + hook: onInsert((el: HTMLButtonElement) => { + const toggle = () => { + ctx.relay.tab('players'); + ctrl.redraw(); + }; + onInsertHandler(toggle, el); + }), + }, + 'Load player list', + ), + ctx.relay.tab() === 'players' ? h('div', playersView(ctx.relay.players, ctx.relay.data.tour)) : h('div'), + ]; +} + function studyDetails(ctrl: AnalyseController): MaybeVNode { const study = ctrl.study; const relayGroups = study?.relay?.data.group; diff --git a/ui/analyse/src/study/relay/relayTourView.ts b/ui/analyse/src/study/relay/relayTourView.ts index 32ff803c1e58a..3516830c3224a 100644 --- a/ui/analyse/src/study/relay/relayTourView.ts +++ b/ui/analyse/src/study/relay/relayTourView.ts @@ -126,22 +126,22 @@ const players = (ctx: RelayViewContext) => [ playersView(ctx.relay.players, ctx.relay.data.tour), ]; -const showInfo = (i: RelayTourInfo, dates?: RelayTourDates) => { +export const showInfo = (i: RelayTourInfo, dates?: RelayTourDates) => { const contents = [ - ['dates', dates && showDates(dates), 'objects.spiral-calendar'], - ['format', i.format, 'objects.crown'], - ['tc', i.tc, 'objects.mantelpiece-clock'], - ['location', i.location, 'travel-places.globe-showing-europe-africa'], - ['players', i.players, 'activity.sparkles'], - ['website', i.website, null, i18n.broadcast.officialWebsite], - ['standings', i.standings, null, i18n.broadcast.standings], + ['dates', dates && showDates(dates), 'objects.spiral-calendar', 'Dates'], + ['format', i.format, 'objects.crown', 'Format'], + ['tc', i.tc, 'objects.mantelpiece-clock', 'Time control'], + ['location', i.location, 'travel-places.globe-showing-europe-africa', 'Location'], + ['players', i.players, 'activity.sparkles', 'Star players'], + ['website', i.website, null, null, i18n.broadcast.officialWebsite], + ['standings', i.standings, null, null, i18n.broadcast.standings], ] .map( - ([key, value, icon, linkName]) => + ([key, value, icon, textAlternative, linkName]) => key && value && h('div.relay-tour__info__' + key, [ - icon && h('img', { attrs: { src: site.asset.flairSrc(icon) } }), + icon && h('img', { attrs: { src: site.asset.flairSrc(icon), alt: textAlternative! } }), linkName ? h('a', { attrs: { href: value, target: '_blank', rel: 'nofollow noreferrer' } }, linkName) : value, diff --git a/ui/analyse/src/view/main.ts b/ui/analyse/src/view/main.ts index 2fecf8045c928..a4ec9da8fe27c 100644 --- a/ui/analyse/src/view/main.ts +++ b/ui/analyse/src/view/main.ts @@ -25,7 +25,7 @@ import { renderChat } from 'lib/chat/renderChat'; export default function (deps?: typeof studyDeps) { return function (ctrl: AnalyseCtrl): VNode { - if (ctrl.nvui) return ctrl.nvui.render(); + if (ctrl.nvui) return ctrl.nvui.render(deps); else if (deps && ctrl.study?.relay) return relayView(ctrl, ctrl.study, ctrl.study.relay, deps); else return analyseView(ctrl, deps); }; From bed2a44ed94e144dd28b2fe04ab614935529bc31 Mon Sep 17 00:00:00 2001 From: yafred <12477220+yafred@users.noreply.github.com> Date: Thu, 24 Apr 2025 03:48:03 +0200 Subject: [PATCH 2/2] keep tour details at the bottom of the page - nvui --- ui/analyse/src/plugins/analyse.nvui.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/analyse/src/plugins/analyse.nvui.ts b/ui/analyse/src/plugins/analyse.nvui.ts index 95f1d0888acf9..a7a72feef96d3 100644 --- a/ui/analyse/src/plugins/analyse.nvui.ts +++ b/ui/analyse/src/plugins/analyse.nvui.ts @@ -92,7 +92,6 @@ export function initModule(ctrl: AnalyseController): NvuiPlugin { }); return h('main.analyse', [ h('div.nvui', [ - ...(deps && ctrl.study?.relay ? tourDetails(ctrl, ctrl.study, ctrl.study.relay, deps) : []), studyDetails(ctrl), h('h1', 'Textual representation'), h('h2', 'Game info'), @@ -249,6 +248,7 @@ export function initModule(ctrl: AnalyseController): NvuiPlugin { .map(command => `${command.cmd}: ${command.help}`), ].reduce(addBreaks, []), ), + ...(deps && ctrl.study?.relay ? tourDetails(ctrl, ctrl.study, ctrl.study.relay, deps) : []), ]), ]); },