racer join link

app/views/racer.scala

@@ -64,7 +64,8 @@ object racer {
       s.score,
       s.moves,
       s.combo,
-      s.newRun
+      s.newRun,
+      trans.toInviteSomeoneToPlayGiveThisUrl
     ).map(_.key)
   }
 }

modules/racer/src/main/RacerApi.scala

@@ -36,7 +36,6 @@ final class RacerApi(colls: RacerColls, selector: StormSelector, cacheApi: Cache
           owner = player,
           puzzles = puzzles.grouped(2).flatMap(_.headOption).toList
         )
-        .startCountdown
       store.put(race.id, race)
       race
     }

ui/racer/src/ctrl.ts

@@ -11,7 +11,7 @@ import { makeCgOpts, onBadMove, onGoodMove } from 'puz/run';
 import { parseUci } from 'chessops/util';
 import { Promotion, Run } from 'puz/interfaces';
 import { prop, Prop } from 'common';
-import { RacerOpts, RacerData, RacerVm, RacerPrefs, Race, UpdatableData } from './interfaces';
+import { RacerOpts, RacerData, RacerVm, RacerPrefs, Race, UpdatableData, Status } from './interfaces';
 import { Role } from 'chessground/types';
 
 export default class StormCtrl {
@@ -51,8 +51,8 @@ export default class StormCtrl {
     lichess.socket = new lichess.StrongSocket(`/racer/${this.race.id}`, false);
     lichess.pubsub.on('socket.in.racerState', this.serverUpdate);
     this.startCountdown();
-    this.simulate();
-    console.log(this.race);
+    // this.simulate();
+    console.log(this.data);
   }
 
   serverUpdate = (data: UpdatableData) => {
@@ -66,9 +66,12 @@ export default class StormCtrl {
 
   isPlayer = () => this.data.players.filter(p => p.name == this.data.player.name).length > 0;
 
-  canJoin = () => this.data.players.length < 10;
+  raceFull = () => this.data.players.length >= 10;
 
-  isRacing = () => !this.data.finished && this.vm.startsAt && this.vm.startsAt < new Date();
+  status = (): Status =>
+    this.data.finished ? 'post' : this.vm.startsAt && this.vm.startsAt < new Date() ? 'racing' : 'pre';
+
+  isRacing = () => this.status() == 'racing';
 
   join = throttle(1000, () => {
     if (!this.isPlayer()) lichess.pubsub.emit('socket.send', 'racerJoin');

ui/racer/src/interfaces.ts

@@ -1,6 +1,8 @@
 import { Prop } from 'common';
 import { PuzPrefs, Puzzle } from 'puz/interfaces';
 
+export type Status = 'pre' | 'racing' | 'post';
+
 export interface RacerOpts {
   data: RacerData;
   pref: RacerPrefs;

ui/racer/src/view/main.ts

@@ -60,7 +60,13 @@ const renderPlay = (ctrl: RacerCtrl): VNode[] => [
         ]),
         h('div.puz-side', [
           ctrl.run.clock.startAt ? renderSolved(ctrl.run) : renderStart(),
-          ctrl.isPlayer() ? renderClock(ctrl.run, ctrl.endNow) : renderJoin(ctrl),
+          ctrl.status() == 'pre'
+            ? ctrl.raceFull()
+              ? undefined
+              : ctrl.isPlayer()
+              ? renderLink(ctrl)
+              : renderJoin(ctrl)
+            : renderClock(ctrl.run, ctrl.endNow),
           h('div.puz-side__table', [renderCombo(config)(ctrl.run)]),
         ]),
       ]),
@@ -82,19 +88,38 @@ const renderCountdown = (seconds: number) =>
     h('div.racer__countdown__seconds', seconds),
   ]);
 
+const renderLink = (ctrl: RacerCtrl) =>
+  h('div.puz-side__link', [
+    h('p', ctrl.trans.noarg('toInviteSomeoneToPlayGiveThisUrl')),
+    h('div', [
+      h(`input#racer-url-${ctrl.race.id}.copyable.autoselect`, {
+        attrs: {
+          spellcheck: false,
+          readonly: 'readonly',
+          value: `${window.location.protocol}//${window.location.host}/racer/${ctrl.race.id}`,
+        },
+      }),
+      h('button.copy.button', {
+        attrs: {
+          title: 'Copy URL',
+          'data-rel': `racer-url-${ctrl.race.id}`,
+          'data-icon': '"',
+        },
+      }),
+    ]),
+  ]);
+
 const renderJoin = (ctrl: RacerCtrl) =>
-  ctrl.canJoin()
-    ? h(
-        'div.puz-side__join',
-        h(
-          'button.button.button-fat',
-          {
-            hook: bind('click', ctrl.join),
-          },
-          'Join the race!'
-        )
-      )
-    : undefined;
+  h(
+    'div.puz-side__join',
+    h(
+      'button.button.button-fat',
+      {
+        hook: bind('click', ctrl.join),
+      },
+      'Join the race!'
+    )
+  );
 
 const renderStart = () =>
   h(