expire storm runs after 2 minutes

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 {

ui/storm/css/_storm.scss

@@ -39,7 +39,7 @@ $mq-col2: $mq-col2-uniboard;
     }
   }
 
-  &--dup {
+  &--reload {
     @extend %flex-column;
 
     justify-content: stretch;

ui/storm/src/config.ts

@@ -13,7 +13,8 @@ const config = {
       [20, 7],
       [30, 10]
     ],
-  }
+  },
+  timeToStart: 1000 * 60 * 2
 };
 
 export default config;

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 =>

ui/storm/src/interfaces.ts

@@ -46,6 +46,7 @@ export interface StormVm {
   }
   dupTab?: boolean;
   signed: Prop<string | undefined>;
+  lateStart: boolean;
 }
 
 export interface Round {

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')