diff --git a/modules/relay/src/main/JsonView.scala b/modules/relay/src/main/JsonView.scala index 2b52cd9648..ab8a6e60a7 100644 --- a/modules/relay/src/main/JsonView.scala +++ b/modules/relay/src/main/JsonView.scala @@ -61,6 +61,7 @@ object JsonView { ) .add("finished" -> rt.round.finished) .add("ongoing" -> (rt.round.hasStarted && !rt.round.finished)) + .add("startsAt" -> rt.round.startedAt.orElse(rt.round.startsAt)) } implicit val tourIdWrites: Writes[RelayTour.Id] = Writes[RelayTour.Id] { id => diff --git a/ui/analyse/css/study/relay/_rounds.scss b/ui/analyse/css/study/relay/_rounds.scss index 3d26979ec1..8827faca66 100644 --- a/ui/analyse/css/study/relay/_rounds.scss +++ b/ui/analyse/css/study/relay/_rounds.scss @@ -11,6 +11,7 @@ $span-width: 1.7em; color: $c-font; margin-left: 1em; align-self: center; + line-height: 2; } > div.active .link { diff --git a/ui/analyse/css/study/relay/_tour.scss b/ui/analyse/css/study/relay/_tour.scss index 451483d873..3409550bb5 100644 --- a/ui/analyse/css/study/relay/_tour.scss +++ b/ui/analyse/css/study/relay/_tour.scss @@ -1,59 +1,71 @@ -.relay-tour__text { - @extend %box-neat; - - background: $c-bg-box; - padding: 3vmin; - max-height: 50vh; - overflow-y: auto; - - .slist { - margin-bottom: 1em; +.relay-tour { + &__round { + @extend %box-radius, %flex-between-nowrap; + background: mix($c-primary, $c-bg-box, 10%); + margin-bottom: 3em; + padding: 1em 2em; + strong { + @extend %roboto; + font-size: 1.2em; + } } + &__text { + @extend %box-neat; - h1 { - @include fluid-size('font-size', 15px, 27px); + background: $c-bg-box; + padding: 3vmin; + max-height: 50vh; + overflow-y: auto; - margin-bottom: 3vh; - } + .slist { + margin-bottom: 1em; + } - h2, - h3, - h4 { - line-height: 2em; - } + h1 { + @include fluid-size('font-size', 15px, 27px); - h2 { - font-size: 1.8em; - } + margin-bottom: 3vh; + } - h3 { - font-size: 1.5em; - line-height: 2em; - } + h2, + h3, + h4 { + line-height: 2em; + } - h4 { - font-size: 1.3em; - } + h2 { + font-size: 1.8em; + } - em { - font-style: italic; - } + h3 { + font-size: 1.5em; + line-height: 2em; + } - ul li { - list-style: disc outside; - margin: 0.5em 0 0 1.5em; - } + h4 { + font-size: 1.3em; + } - ol li { - list-style: decimal inside; - margin: 0.5em 0; - } + em { + font-style: italic; + } - li { - margin-left: 2em; + ul li { + list-style: disc outside; + margin: 0.5em 0 0 1.5em; + } - p { - display: inline; + ol li { + list-style: decimal inside; + margin: 0.5em 0; + } + + li { + margin-left: 2em; + + p { + display: inline; + } } } } diff --git a/ui/analyse/src/study/relay/interfaces.ts b/ui/analyse/src/study/relay/interfaces.ts index 6ac765c392..7b6cb4ae5e 100644 --- a/ui/analyse/src/study/relay/interfaces.ts +++ b/ui/analyse/src/study/relay/interfaces.ts @@ -10,6 +10,7 @@ export interface RelayRound { path: string; finished?: boolean; ongoing?: boolean; + startsAt?: number; } export interface RelayTour { diff --git a/ui/analyse/src/study/relay/relayCtrl.ts b/ui/analyse/src/study/relay/relayCtrl.ts index 8bccebb96e..081f197f1e 100644 --- a/ui/analyse/src/study/relay/relayCtrl.ts +++ b/ui/analyse/src/study/relay/relayCtrl.ts @@ -42,6 +42,8 @@ export default class RelayCtrl { } }; + currentRound = () => this.data.rounds.find(r => this.id == r.id)!; + private convertDate = (r: StudyChapterRelay): StudyChapterRelay => { if (typeof r.secondsSinceLastMove !== 'undefined' && !r.lastMoveAt) { r.lastMoveAt = Date.now() - r.secondsSinceLastMove * 1000; diff --git a/ui/analyse/src/study/relay/relayTourView.ts b/ui/analyse/src/study/relay/relayTourView.ts index 09d87612b3..84cdb39fc7 100644 --- a/ui/analyse/src/study/relay/relayTourView.ts +++ b/ui/analyse/src/study/relay/relayTourView.ts @@ -7,10 +7,30 @@ import { StudyCtrl } from '../interfaces'; export default function (ctrl: AnalyseCtrl): VNode | undefined { const study = ctrl.study; const relay = study?.relay; - if (study && relay?.tourShow.active) + if (study && relay?.tourShow.active) { + const round = relay?.currentRound(); return h('div.relay-tour', [ h('div.relay-tour__text', [ h('h1', relay.data.tour.name), + h('div.relay-tour__round', [ + h('strong', round.name), + ' ', + round.ongoing + ? ctrl.trans.noarg('playingRightNow') + : round.startsAt + ? h( + 'time.timeago', + { + hook: { + insert(vnode) { + (vnode.elm as HTMLElement).setAttribute('datetime', '' + round.startsAt); + }, + }, + }, + lichess.timeago(round.startsAt) + ) + : null, + ]), relay.data.tour.markup ? h('div', { hook: innerHTML(relay.data.tour.markup, () => relay.data.tour.markup!), @@ -19,6 +39,7 @@ export default function (ctrl: AnalyseCtrl): VNode | undefined { ]), multiBoardView(study.multiBoard, study), ]); + } return undefined; }