From f9217a6d9e5f9384cdf68a9e514ae36fd2f15ee6 Mon Sep 17 00:00:00 2001 From: Mathis Dedial Date: Mon, 22 Apr 2024 23:14:59 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20Show=20elapsed=20and=20total=20t?= =?UTF-8?q?ime=20for=20guess?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 ++ src/app/app.component.html | 10 +++--- src/app/app.component.ts | 39 ++++++++++----------- src/app/controls/controls.component.css | 10 +++++- src/app/controls/controls.component.html | 19 +++++++--- src/app/controls/controls.component.spec.ts | 22 ------------ src/app/controls/controls.component.ts | 17 +++++---- 7 files changed, 61 insertions(+), 59 deletions(-) create mode 100644 .vscode/settings.json delete mode 100644 src/app/controls/controls.component.spec.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..23fd35f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "editor.formatOnSave": true +} \ No newline at end of file diff --git a/src/app/app.component.html b/src/app/app.component.html index 501cae9..cc5af6b 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -2,8 +2,9 @@

Fuel Gage Trainer

for Robinson R44

-

Practice makes perfect! If you are like me and reading the fuel gages on the R44 - takes a lot longer than it should, this tool is for you. +

+ Practice makes perfect! If you are like me and reading the fuel gages on + the R44 takes a lot longer than it should, this tool is for you.

The gages assume R44s with bladder tanks.

@@ -12,8 +13,9 @@

for Robinson R44

class="controls" [totalCapacity]="totalCapacity" [state]="fuelGagesState" - [totalQuantity$]="totalQuantity$" - [guess$]="guess$" + [totalQuantity]="totalQuantity" + [guess]="guess" + [time]="time" (restartButtonClicked$)="restartButtonClicked()" (guessSubmitted$)="guessSubmitted($event)" > diff --git a/src/app/app.component.ts b/src/app/app.component.ts index aaa4fbd..e40b41f 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,13 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FuelTank } from './fuel-gages/fuel-tank.model'; -import { - BehaviorSubject, - Observable, - Subject, - combineLatest, - map, - timer, -} from 'rxjs'; +import { Subscription, combineLatest, interval, timer } from 'rxjs'; import { FuelGagesState } from './fuel-gages/fuel-gages.state'; @Component({ @@ -21,25 +14,24 @@ export class AppComponent implements OnInit { .map((tank) => tank.getCapacity()) .reduce((a, b) => a + b, 0); - totalQuantity$: Observable; - guess$: Subject; + totalQuantity: number = 0; + guess: number = 0; fuelGagesState = FuelGagesState.HIDDEN; + time = 0; + timeSubscription: Subscription | null = null; constructor() { const quantityObservables = []; for (const tank of this.tanks) { quantityObservables.push(tank.getQuantity$()); } - this.totalQuantity$ = combineLatest(quantityObservables).pipe( - map((quantities) => { - let sum = 0; - for (let quantity of quantities) { - sum += quantity; - } - return sum; - }), - ); - this.guess$ = new BehaviorSubject(0); + combineLatest(quantityObservables).subscribe((quantities) => { + let sum = 0; + for (let quantity of quantities) { + sum += quantity; + } + this.totalQuantity = sum; + }); } ngOnInit(): void { @@ -60,12 +52,17 @@ export class AppComponent implements OnInit { // FIXME: Instead of a timer, can we get an event when the CSS transition has completed? timer(2000).subscribe((_value) => { this.fuelGagesState = FuelGagesState.HIDDEN; + this.time = 0; + this.timeSubscription = interval(1000).subscribe((_value) => { + ++this.time; + }); }); } private reveal(guess: number): void { + this.timeSubscription?.unsubscribe(); this.fuelGagesState = FuelGagesState.VISIBLE; - this.guess$.next(guess); + this.guess = guess; } guessSubmitted(guess: number): void { diff --git a/src/app/controls/controls.component.css b/src/app/controls/controls.component.css index 31956fd..424a1ed 100644 --- a/src/app/controls/controls.component.css +++ b/src/app/controls/controls.component.css @@ -37,6 +37,11 @@ color: var(--beige-dark); } +.result-guess .value, +.result-total .value { + font-weight: 400; +} + .button { display: flex; flex-direction: row; @@ -64,7 +69,10 @@ color: var(--beige); } -.guess { +.timer { + color: var(--beige-dark); + font-weight: 600; + font-size: 24px; } .guess > .inputs { diff --git a/src/app/controls/controls.component.html b/src/app/controls/controls.component.html index aaa8b15..1607598 100644 --- a/src/app/controls/controls.component.html +++ b/src/app/controls/controls.component.html @@ -1,12 +1,20 @@
+
+ Your Guess + {{ guess | number: "1.0-0" }} l +
Total - {{ totalQuantity$ | async | number: "1.0-0" }} l + {{ totalQuantity | number: "1.0-0" }} l
-
- Your Guess - {{ guess$ | async | number: "1.0-0" }} l +
+ Error + {{ error | number: "1.0-0" }} l +
+
+ Time Taken + {{ time }} s
@@ -14,6 +22,7 @@ Start over
+
{{ time }} s
{{ state === "RESETTING" ? "Resetting..." : "Enter your guess:" }} @@ -22,7 +31,7 @@ diff --git a/src/app/controls/controls.component.spec.ts b/src/app/controls/controls.component.spec.ts deleted file mode 100644 index 9ca0e5f..0000000 --- a/src/app/controls/controls.component.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ControlsComponent } from './controls.component'; - -describe('ControlsComponent', () => { - let component: ControlsComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ControlsComponent], - }).compileComponents(); - - fixture = TestBed.createComponent(ControlsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/controls/controls.component.ts b/src/app/controls/controls.component.ts index 5f657e1..1acba43 100644 --- a/src/app/controls/controls.component.ts +++ b/src/app/controls/controls.component.ts @@ -10,7 +10,6 @@ import { ViewChild, } from '@angular/core'; import { FuelGagesState } from '../fuel-gages/fuel-gages.state'; -import { Observable, of } from 'rxjs'; @Component({ selector: 'app-controls', @@ -21,19 +20,21 @@ import { Observable, of } from 'rxjs'; export class ControlsComponent implements OnChanges { @Input() totalCapacity: number = 0; @Input() state: FuelGagesState = FuelGagesState.RESETTING; - @Input() totalQuantity$: Observable = of(0); - @Input() guess$: Observable = of(0); + @Input() totalQuantity: number = 0; + @Input() guess: number = 0; + @Input() time: number = 0; @Output() restartButtonClicked$: EventEmitter = new EventEmitter(); @Output() guessSubmitted$: EventEmitter = new EventEmitter(); @ViewChild('guessInput') guessInput: ElementRef = {} as ElementRef; - guess = ''; + guessModel = ''; + error = 0; ngOnChanges(changes: SimpleChanges): void { if (changes['state']) { switch (changes['state'].currentValue) { case FuelGagesState.RESETTING: - this.guess = ''; + this.guessModel = ''; break; case FuelGagesState.HIDDEN: // TODO: what is the correct lifecycle method to use to avoid setTimeout? @@ -41,6 +42,10 @@ export class ControlsComponent implements OnChanges { break; } } + + if (changes['totalQuantity'] || changes['guess']) { + this.error = this.guess - this.totalQuantity; + } } restartButtonClicked(): void { @@ -48,7 +53,7 @@ export class ControlsComponent implements OnChanges { } guessSubmitted(): void { - const guess = Number.parseInt(this.guess); + const guess = Number.parseInt(this.guessModel); if (!Number.isNaN(guess) && 0 <= guess && guess <= this.totalCapacity) { this.guessSubmitted$.emit(guess); }