Add score computation

CONTRIBUTING.md

@@ -0,0 +1,45 @@
+# How to contribute.
+
+## Required tools
+
+- node.js
+- npm
+- on mac-os, you have to install xcode command line developer tools (run xcode-select --install)
+- gcloud
+- docker
+- the IDE of your choice
+
+## Project setup
+
+- run `npm install`
+- add default keys definitions
+  - `cp apps/fxc-front/src/app/keys.ts.dist apps/fxc-front/src/app/keys.ts`
+  - `cp libs/common/src/lib/keys.ts.dist libs/common/src/lib/keys.ts`
+
+### Simplistic configuration
+
+**redis server**
+
+- `cd docker; docker compose up -d redis`
+
+**pubsub**
+
+- `cd docker; docker compose up -d pubsub`
+
+**datastore**
+
+For the moment, it does not work with docker compose. But if you install the cloud-datastore-emulator, you will have a working configuration.
+
+**_Installation_**
+
+- `gcloud components install cloud-datastore-emulator`
+
+**_run the data store:_**
+
+- `gcloud beta emulators datastore start --data-dir=MY_DATA_DIR`
+
+**_before npm run dev:_**
+
+- open another shell.
+- define the required environment variables:`eval $(gcloud beta emulators datastore --data-dir=MY_DATA_DIR env-init)`
+- you can then run the application locally in this shell with `npm run dev`

apps/fxc-front/src/app/components/2d/map-element.ts

@@ -11,7 +11,7 @@ import { getApiKeyAndHost } from '../../apikey';
 import * as msg from '../../logic/messages';
 import { setApiLoading, setTimeSec } from '../../redux/app-slice';
 import { setCurrentLocation, setCurrentZoom } from '../../redux/location-slice';
-import { setIsFreeDrawing, setRoute } from '../../redux/planner-slice';
+import { setPlannerIsFreeDrawing, setPlannerRoute } from '../../redux/planner-slice';
 import * as sel from '../../redux/selectors';
 import { RootState, store } from '../../redux/store';
 import { setCurrentTrackId } from '../../redux/track-slice';
@@ -327,7 +327,7 @@ export class MapElement extends connect(store)(LitElement) {
     (e.currentTarget as SVGRectElement).releasePointerCapture(this.pointerEventId);
     this.pointerEventId = undefined;
     this.freeDrawPath = '';
-    store.dispatch(setIsFreeDrawing(false));
+    store.dispatch(setPlannerIsFreeDrawing(false));
     this.pathPoints = simplify(this.pathPoints, 30);
     let encodedRoute = '';
     if (this.pathPoints.length >= 2 && this.map) {
@@ -343,12 +343,12 @@ export class MapElement extends connect(store)(LitElement) {
         }),
       );
     }
-    store.dispatch(setRoute(encodedRoute));
+    store.dispatch(setPlannerRoute(encodedRoute));
     this.pathPoints.length = 0;
   }
 
   private handleDrawing() {
-    store.dispatch(setIsFreeDrawing(true));
+    store.dispatch(setPlannerIsFreeDrawing(true));
   }
 
   // Center the map on the user location:

apps/fxc-front/src/app/components/2d/path-element.ts

@@ -16,7 +16,7 @@ import { drawRoute } from '../../logic/messages';
 import { LEAGUES } from '../../logic/score/league/leagues';
 import { Measure } from '../../logic/score/measure';
 import { CircuitType, Score } from '../../logic/score/scorer';
-import { setDistance, setEnabled, setRoute, setScore } from '../../redux/planner-slice';
+import { setDistance, setPlannerEnabled, setPlannerRoute, setPlannerScore } from '../../redux/planner-slice';
 import { RootState, store } from '../../redux/store';
 import { PlannerElement } from './planner-element';
 
@@ -203,7 +203,7 @@ export class PathElement extends connect(store)(LitElement) {
 
     scores.sort((score1, score2) => score2.points - score1.points);
     const score = scores[0];
-    store.dispatch(setScore(score));
+    store.dispatch(setPlannerScore(score));
 
     let optimizedPath = score.indexes.map((index) => new google.maps.LatLng(points[index].lat, points[index].lon));
     if (score.circuit == CircuitType.FlatTriangle || score.circuit == CircuitType.FaiTriangle) {
@@ -288,7 +288,7 @@ export class PathElement extends connect(store)(LitElement) {
   private handlePathUpdates(): void {
     if (this.line && !this.doNotSyncState) {
       pushCurrentState();
-      store.dispatch(setRoute(google.maps.geometry.encoding.encodePath(this.line.getPath())));
+      store.dispatch(setPlannerRoute(google.maps.geometry.encoding.encodePath(this.line.getPath())));
     }
     this.optimize();
   }
@@ -323,12 +323,12 @@ export class PathElement extends connect(store)(LitElement) {
       el.addEventListener('download', async () => {
         await this.openDownloadModal();
       });
-      el.addEventListener('reset', () => store.dispatch(setRoute('')));
+      el.addEventListener('reset', () => store.dispatch(setPlannerRoute('')));
       el.addEventListener('draw-route', () => {
         drawRoute.emit();
-        store.dispatch(setRoute(''));
+        store.dispatch(setPlannerRoute(''));
       });
-      el.addEventListener('close', () => store.dispatch(setEnabled(false)));
+      el.addEventListener('close', () => store.dispatch(setPlannerEnabled(false)));
     }
   }
 

apps/fxc-front/src/app/components/2d/planner-element.ts

@@ -8,6 +8,10 @@ import { Score } from '../../logic/score/scorer';
 import * as units from '../../logic/units';
 import { decrementSpeed, incrementSpeed, setSpeed } from '../../redux/planner-slice';
 import { RootState, store } from '../../redux/store';
+import { scoreTrack } from '../../logic/track';
+// introduce here a circular dependency. Issue to solve later
+import * as common from '@flyxc/common';
+import { currentLeague, currentTrack } from '../../redux/selectors';
 
 const ICON_MINUS =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEX///9xe4e/5menAAAAE0lEQVQImWP438DQAEP7kNj/GwCK4wo9HA2mvgAAAABJRU5ErkJggg==';
@@ -32,6 +36,8 @@ export class PlannerElement extends connect(store)(LitElement) {
   private hideDetails = store.getState().browser.isSmallScreen;
   @state()
   private isFreeDrawing = false;
+  @state()
+  private track: common.RuntimeTrack | undefined;
 
   private duration?: number;
   private readonly closeHandler = () => this.dispatchEvent(new CustomEvent('close'));
@@ -48,6 +54,7 @@ export class PlannerElement extends connect(store)(LitElement) {
     this.units = state.units;
     this.duration = ((this.distance / this.speed) * 60) / 1000;
     this.isFreeDrawing = state.planner.isFreeDrawing;
+    this.track = currentTrack(state);
   }
 
   static get styles(): CSSResult {
@@ -125,6 +132,11 @@ export class PlannerElement extends connect(store)(LitElement) {
         .collapsible {
           display: ${this.hideDetails ? 'none' : 'block'};
         }
+        @media (max-width: 767px) {
+          .hidden-on-mobile {
+            display: none;
+          }
+        }
         .active {
           background-color: lightgray;
         }
@@ -136,6 +148,14 @@ export class PlannerElement extends connect(store)(LitElement) {
         <div @click=${this.closeHandler} class="hoverable">
           <div><i class="las la-times-circle"></i> Close</div>
         </div>
+        ${when(
+          this.track,
+          () => html` <div @click="${this.scoreTrack}">
+            <div>
+              <b>🆕<i class="las la-trophy"></i>Score🆕</b>
+            </div>
+          </div>`,
+        )}
         <div>
           <div>${this.score.circuit}</div>
           <div class="large">
@@ -144,6 +164,7 @@ export class PlannerElement extends connect(store)(LitElement) {
         </div>
         <div class="collapsible">
           <div>Points = ${this.getMultiplier()}</div>
+          <div class="hidden-on-mobile">${store.getState().planner.leagueName}</div>
           <div class="large">${this.score.points.toFixed(1)}</div>
         </div>
         <div class="collapsible">
@@ -259,4 +280,11 @@ export class PlannerElement extends connect(store)(LitElement) {
   private wheelSpeed(e: WheelEvent): void {
     store.dispatch(e.deltaY > 0 ? incrementSpeed() : decrementSpeed());
   }
+
+  // compute score on the current selected track
+  private scoreTrack() {
+    if (this.track) {
+      scoreTrack(this.track, currentLeague(store.getState()));
+    }
+  }
 }

apps/fxc-front/src/app/components/ui/main-menu.ts

@@ -23,7 +23,7 @@ import {
   setReturnUrl,
   updateTrackers,
 } from '../../redux/live-track-slice';
-import { setEnabled } from '../../redux/planner-slice';
+import { setPlannerEnabled } from '../../redux/planner-slice';
 import * as sel from '../../redux/selectors';
 import * as skyways from '../../redux/skyways-slice';
 import { RootState, store } from '../../redux/store';
@@ -196,7 +196,7 @@ export class MainMenu extends connect(store)(LitElement) {
     if (!this.plannerEnabled) {
       await menuController.close();
     }
-    store.dispatch(setEnabled(!this.plannerEnabled));
+    store.dispatch(setPlannerEnabled(!this.plannerEnabled));
   }
 
   private async handleSun() {
@@ -645,6 +645,7 @@ export class TrackItems extends connect(store)(LitElement) {
         pushCurrentState();
         addUrlParamValues(ParamNames.groupId, ids);
         el.value = '';
+        await menuController.close();
       }
     }
   }

apps/fxc-front/src/app/components/ui/track-modal.ts

@@ -11,6 +11,7 @@ import * as app from '../../redux/app-slice';
 import * as sel from '../../redux/selectors';
 import { RootState, store } from '../../redux/store';
 import * as trackSlice from '../../redux/track-slice';
+import { scoreTrack } from '../../logic/track';
 
 @customElement('track-modal')
 export class TrackModal extends connect(store)(LitElement) {
@@ -45,6 +46,11 @@ export class TrackModal extends connect(store)(LitElement) {
               >
                 <i class="las la-user-astronaut la-2x" style=${`color: ${sel.trackColors(this.state)[track.id]}`}></i
                 >${track.name}
+                <span slot="end" @click=${() => this.handleScore(track)}>
+                  <i slot="end" class="la-1x">score</i>
+                  <!-- also suggest la-tachometer-alt, la-award icons-->
+                  <i slot="end" class="las la-trophy la-2x"></i>
+                </span>
                 <i
                   slot="end"
                   title="close"
@@ -70,6 +76,12 @@ export class TrackModal extends connect(store)(LitElement) {
     return this;
   }
 
+  private async handleScore(track: RuntimeTrack) {
+    scoreTrack(track);
+    await this.dismiss();
+    await menuController.close();
+  }
+
   private async handleClose(e: Event, track: RuntimeTrack) {
     e.preventDefault();
     e.stopPropagation();