Add: countdown timer to lap limited multiplayer race events

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.2.0] - 2021-01-19
+### Added
+- Add countdown timer to lap limited multiplayer race events
+- Support latest rFactor2 release
+
 ## [2.1.0] - 2021-01-10
 ### Added
 - Remember selected server filters

README.md

@@ -23,6 +23,7 @@ In this repository you can find small modifications for the new rFactor 2 UI
 - highlight current track in setup popup
 - disable opacity change animation
 - remember selected multiplayer server filters
+- add countdown timer to lap limited multiplayer race events
 
 # How to patch UI files
 - Compile Better ui: `npm run build.all`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rf2-better-ui",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --live-reload=false",

projects/rf2-better-ui/src/app/app.module.ts

@@ -12,6 +12,7 @@ import { GarageHandlerComponent } from './components/garage-handler/garage-handl
 import { EventHandlerComponent } from './components/event-handler/event-handler.component';
 import { SessionsHandlerComponent } from './components/sessions-handler/sessions-handler.component';
 import { MultiplayerHandlerComponent } from './components/multiplayer-handler/multiplayer-handler.component';
+import { RaceCountdownTimerComponent } from './components/race-countdown-timer/race-countdown-timer.component';
 
 @NgModule({
   imports: [
@@ -27,7 +28,8 @@ import { MultiplayerHandlerComponent } from './components/multiplayer-handler/mu
     GarageHandlerComponent,
     EventHandlerComponent,
     SessionsHandlerComponent,
-    MultiplayerHandlerComponent
+    MultiplayerHandlerComponent,
+    RaceCountdownTimerComponent
   ],
   providers: []
 })
@@ -59,6 +61,9 @@ export class AppModule implements DoBootstrap {
 
     const multiplayerHandlerWebComponent = createCustomElement(MultiplayerHandlerComponent, {injector});
     customElements.define("rf-multiplayer-handler", multiplayerHandlerWebComponent);
+
+    const raceCountDownTimerWebComponent = createCustomElement(RaceCountdownTimerComponent, {injector});
+    customElements.define("rf-race-countdown-timer", raceCountDownTimerWebComponent);
   }
 
   ngDoBootstrap(appRef: ApplicationRef): void {

projects/rf2-better-ui/src/app/components/event-handler/event-handler.component.ts

@@ -13,9 +13,14 @@ export class EventHandlerComponent implements OnInit, OnDestroy {
   private observer: MutationObserver;
 
   ngOnInit(): void {
+    waitForElement('nav em').then((e: Element) => {
+      const countDown: HTMLElement = document.createElement('rf-race-countdown-timer');
+      e.parentElement.appendChild(countDown);
+    });
+
     // add rf-chat component to the DOM
     waitForElement('.camera-wrapper').then(() => {
-      this.tabHolder = document.querySelector("div[ng-if='eventCtrl.gameState.navigationState']");
+      this.tabHolder = document.querySelector('div[ng-if=\'eventCtrl.gameState.navigationState\']');
       this.injectChat();
       this.observeTabChange();
     });

projects/rf2-better-ui/src/app/components/garage-handler/garage-handler.component.ts

@@ -22,6 +22,11 @@ export class GarageHandlerComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    waitForElement('nav em').then((e: Element) => {
+      const countDown: HTMLElement = document.createElement('rf-race-countdown-timer');
+      e.parentElement.appendChild(countDown);
+    });
+
     this.listItems = document.querySelectorAll('main section div.thumbnail');
 
     this.findSetupButtons();

projects/rf2-better-ui/src/app/components/race-countdown-timer/race-countdown-timer.component.html

@@ -0,0 +1 @@
+<em *ngIf="timeLeft$ | async as time">{{time}}s</em>

projects/rf2-better-ui/src/app/components/race-countdown-timer/race-countdown-timer.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RaceCountdownTimerComponent } from './race-countdown-timer.component';
+
+describe('RaceCountdownTimerComponent', () => {
+  let component: RaceCountdownTimerComponent;
+  let fixture: ComponentFixture<RaceCountdownTimerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ RaceCountdownTimerComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RaceCountdownTimerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/rf2-better-ui/src/app/components/race-countdown-timer/race-countdown-timer.component.ts

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, timer } from 'rxjs';
+import { filter, map, switchMap } from 'rxjs/operators';
+import { SessionInfo } from '../../interfaces/session-info';
+import { GamePhase } from '../../interfaces/game-phase';
+
+@Component({
+  selector: 'rf-race-countdown-timer',
+  templateUrl: './race-countdown-timer.component.html',
+  styleUrls: ['./race-countdown-timer.component.scss']
+})
+export class RaceCountdownTimerComponent implements OnInit {
+
+  public timeLeft$: Observable<number>;
+
+  constructor(private http: HttpClient) {
+  }
+
+  ngOnInit(): void {
+    this.timeLeft$ = timer(1, 1000).pipe(
+      switchMap(() => this.http.get<SessionInfo>('/rest/watch/sessionInfo')),
+      filter((info: SessionInfo) => info.session.startsWith('RACE') // race session
+        && info.gamePhase === GamePhase.BEFORE // before formation lap start
+        && info.maximumLaps < 1500), // lap limited race
+      map((info: SessionInfo) => Math.round(info.endEventTime - info.currentEventTime))
+    );
+  }
+
+}

projects/rf2-better-ui/src/app/interfaces/game-phase.ts

@@ -0,0 +1,12 @@
+export enum GamePhase {
+  BEFORE,
+  RECONNAISSANCE,
+  WALKTHROUGH,
+  FORMATION,
+  COUNTDOWN,
+  GREEN,
+  SAFETY_CAR,
+  RED,
+  CHECKERED,
+  INVALID
+}

projects/rf2-better-ui/src/app/interfaces/session-info.ts

@@ -0,0 +1,40 @@
+import { GamePhase } from './game-phase';
+
+export interface SessionInfo {
+  trackName: string;
+  session: string;
+  currentEventTime: number;
+  endEventTime: number;
+  maximumLaps: number;
+  lapDistance: number;
+  numberOfVehicles: number;
+  gamePhase: GamePhase;
+  yellowFlagState: string;
+  sectorFlag: string[];
+  startLightFrame: number;
+  numRedLights: number;
+  inRealtime: boolean;
+  playerName: string;
+  playerFileName: string;
+  darkCloud: number;
+  raining: number;
+  ambientTemp: number;
+  trackTemp: number;
+  windSpeed: {
+    x: number;
+    y: number;
+    z: number;
+    velocity: number;
+  };
+
+  minPathWetness: number;
+  averagePathWetness: number;
+  maxPathWetness: number;
+  gameMode: string;
+  passwordProtected: boolean;
+  serverPort: number;
+  maxPlayers: number;
+  serverName: string;
+  startEventTime: number;
+  raceCompletion: any;
+}