diff --git a/ui/storm/css/_high.scss b/ui/storm/css/_high.scss index a2777547fd..18d75746db 100644 --- a/ui/storm/css/_high.scss +++ b/ui/storm/css/_high.scss @@ -2,6 +2,10 @@ &__periods { display: flex; flex-flow: row wrap; + + @include breakpoint($mq-xx-small) { + flex-flow: row nowrap; + } } &__period { diff --git a/ui/storm/css/_storm.scss b/ui/storm/css/_storm.scss index f0ad364003..3e9d9db52c 100644 --- a/ui/storm/css/_storm.scss +++ b/ui/storm/css/_storm.scss @@ -39,7 +39,7 @@ $mq-col2: $mq-col2-uniboard; } } - &--dup { + &--reload { @extend %flex-column; justify-content: stretch; diff --git a/ui/storm/src/config.ts b/ui/storm/src/config.ts index f929c4f8ac..e17e7e30f5 100644 --- a/ui/storm/src/config.ts +++ b/ui/storm/src/config.ts @@ -13,7 +13,8 @@ const config = { [20, 7], [30, 10] ], - } + }, + timeToStart: 1000 * 60 * 2 }; export default config; diff --git a/ui/storm/src/ctrl.ts b/ui/storm/src/ctrl.ts index 7b0c236945..abab0e4b99 100644 --- a/ui/storm/src/ctrl.ts +++ b/ui/storm/src/ctrl.ts @@ -43,12 +43,19 @@ export default class StormCtrl { moves: 0, errors: 0 }, - signed: prop(undefined) + signed: prop(undefined), + lateStart: false }; this.promotion = makePromotion(this.withGround, this.makeCgOpts, this.redraw); this.checkDupTab(); setTimeout(this.hotkeys, 1000); if (this.data.key) setTimeout(() => sign(this.data.key!).then(this.vm.signed), 1000 * 40); + setTimeout(() => { + if (!this.vm.run.startAt) { + this.vm.lateStart = true; + this.redraw(); + } + }, config.timeToStart + 1000); } clockMillis = (): number | undefined => diff --git a/ui/storm/src/interfaces.ts b/ui/storm/src/interfaces.ts index 032e6277a4..fc85af13a4 100644 --- a/ui/storm/src/interfaces.ts +++ b/ui/storm/src/interfaces.ts @@ -46,6 +46,7 @@ export interface StormVm { } dupTab?: boolean; signed: Prop; + lateStart: boolean; } export interface Round { diff --git a/ui/storm/src/view/main.ts b/ui/storm/src/view/main.ts index 56bb2c44dd..f0f23932bc 100644 --- a/ui/storm/src/view/main.ts +++ b/ui/storm/src/view/main.ts @@ -8,7 +8,8 @@ import { h } from 'snabbdom' import { VNode } from 'snabbdom/vnode'; export default function(ctrl: StormCtrl): VNode { - if (ctrl.vm.dupTab) return renderDupTab(); + if (ctrl.vm.dupTab) return renderReload('This run was opened in another tab!'); + if (ctrl.vm.lateStart) return renderReload('This run has expired!'); if (!ctrl.vm.run.endAt) return h('div.storm.storm-app.storm--play', { class: playModifiers(ctrl) }, renderPlay(ctrl)); @@ -100,10 +101,10 @@ const renderStart = (ctrl: StormCtrl) => ]) ); -const renderDupTab = () => - h('div.storm.storm--dup.box.box-pad', [ +const renderReload = (msg: string) => + h('div.storm.storm--reload.box.box-pad', [ h('i', { attrs: { 'data-icon': '~' } }), - h('p', 'This run was opened in another tab!'), + h('p', msg), h('a.storm--dup__reload.button', { attrs: { href: '/storm' } }, 'Click to reload')