Pre and post round screens

.vscode/settings.json

@@ -99,5 +99,6 @@
     "firerules"
   ],
   "markdown.extension.toc.levels": "2..6",
-  "typescript.preferences.quoteStyle": "single"
+  "typescript.preferences.quoteStyle": "single",
+  "typescript.tsdk": "node_modules\\typescript\\lib"
 }

src/app/app-routing.module.ts

@@ -7,7 +7,6 @@ import { HomeComponent } from './pages/home/home.component';
 import { JsonDataTestComponent } from './test-pages/json-data-test/json-data-test.component';
 import { SessionTestComponent } from './test-pages/session-test/session-test.component';
 import { RoundTemplateTestComponent } from './test-pages/round-template-test/round-template-test.component';
-import { PrepareRoundTestComponent } from './test-pages/prepare-round-test/prepare-round-test.component';
 import { JoinSessionComponent } from './pages/join-session/join-session.component';
 import { HostSessionComponent } from './pages/host-session/host-session.component';
 import { TestPagesComponent } from './pages/test-pages/test-pages.component';
@@ -19,7 +18,6 @@ import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.com
 const testRoutes: Routes = [
   {path: 'timer-test', component: TimerTestComponent},
   {path: 'json-data-test', component: JsonDataTestComponent},
-  {path: 'prepare-round-test', component: PrepareRoundTestComponent},
   {path: 'session-test', component: SessionTestComponent},
   {path: 'round-template-test', component: RoundTemplateTestComponent},
   {path: 'flower-test', component: FlowerTestComponent},

src/app/app.module.ts

@@ -25,7 +25,6 @@ import {
 } from './components/joined-students/joined-students.component';
 import { SessionTestComponent } from './test-pages/session-test/session-test.component';
 import { JoinSessionComponent } from './pages/join-session/join-session.component';
-import { PrepareRoundTestComponent } from './test-pages/prepare-round-test/prepare-round-test.component';
 import { SessionLobbyComponent } from './pages/session-lobby/session-lobby.component';
 import { BottomBarComponent } from './components/bottom-bar/bottom-bar.component';
 import { HostSessionComponent } from './pages/host-session/host-session.component';
@@ -37,6 +36,9 @@ import { SharedModule } from './shared.module';
 import { FieldGuideTestComponent } from './test-pages/field-guide-test/field-guide-test.component';
 import { PageNotFoundComponent } from './pages/page-not-found/page-not-found.component';
 import { FlowerLayoutWithBeesComponent } from './components/flower-layout-with-bees/flower-layout-with-bees.component';
+import { LdPreRoundComponent } from './pages/ld-pre-round/ld-pre-round.component';
+import { LdPostRoundComponent } from './pages/ld-post-round/ld-post-round.component';
+import { LdPlayRoundComponent } from './pages/ld-play-round/ld-play-round.component';
 
 const FIREBASE_MODULES = [
   AngularFireModule.initializeApp(environment.firebase),
@@ -59,7 +61,6 @@ const FIREBASE_MODULES = [
     JoinedStudentsComponent,
     SessionTestComponent,
     JoinSessionComponent,
-    PrepareRoundTestComponent,
     BottomBarComponent,
     SessionLobbyComponent,
     HostSessionComponent,
@@ -72,6 +73,9 @@ const FIREBASE_MODULES = [
     FieldGuideTestComponent,
     PageNotFoundComponent,
     FlowerLayoutWithBeesComponent,
+    LdPreRoundComponent,
+    LdPostRoundComponent,
+    LdPlayRoundComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/field-guide-dialog/field-guide-dialog.component.ts

@@ -54,7 +54,9 @@ export class FieldGuideDialogComponent implements OnInit {
       }))
     : null;
 
-  acceptedList = this.bee ? this.bee.flowers_accepted : this.flower ? getBeesForFlower(this.flower) : getBeesForNest(this.nest);
+  acceptedList: (FlowerSpecies | BeeSpecies)[] = this.bee
+    ? this.bee.flowers_accepted
+    : this.flower ? getBeesForFlower(this.flower) : getBeesForNest(this.nest);
 
   ngOnInit(): void {
   }

src/app/components/round-chooser-dialog/round-chooser-dialog.component.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Select a Round</h1>
+<h1 mat-dialog-title>Choose a Round</h1>
 <div mat-dialog-content fxLayout="row" fxLayoutAlign="space-between" class="dialog-content">
   <mat-selection-list [multiple]="false" fxFlex="30" [(ngModel)]="currentSets" class="set-list">
     <div mat-subheader>Round Sets</div>
@@ -10,7 +10,7 @@ <h1 mat-dialog-title>Select a Round</h1>
     <mat-horizontal-stepper #stepper [@.disabled]="true" class="horizontal-stepper-no-padding" *ngFor="let currentSet of currentSets">
       <mat-step *ngFor="let template of currentSet.templates; index as i" [label]="template.name" [completed]="false">
         <div class="template-information" *ngIf="stepper.selectedIndex === i">
-          <app-flower-layout [items]="getFlowers(template.flowerSpecies)" tooltips="true"></app-flower-layout>
+          <app-flower-layout [items]="getFlowers(template.flowerSpecies)" [tooltips]="true"></app-flower-layout>
           <div class="template-description mat-body">
             <h2 class="template-name">{{currentSet.name}}: {{template.name}}</h2>
             <p class="mat-body-2">{{currentSet.description}}</p>

src/app/components/student-round/student-round.component.html

@@ -28,6 +28,45 @@
         </mat-card-actions>
       </mat-card>
 
+      <ng-container *ngSwitchCase="ScreenId.PreRound" class="inactive-bee">
+        <mat-card *ngIf="(roundService.currentBeeSpecies$ | async) as bee">
+            <img
+              class="student-bee"
+              [src]="bee.asset_urls.art_500_wide"
+              [alt]="bee.name"
+            >
+            <mat-card-title>
+              You are a {{bee.name}}
+            </mat-card-title>
+            <mat-card-subtitle>
+              Your nest is {{bee.nest_type.name}}
+            </mat-card-subtitle>
+            <mat-card-actions>
+              <button mat-raised-button color="accent" (click)="onOpenFieldGuide()">View Field Guide</button>
+            </mat-card-actions>
+        </mat-card>
+      </ng-container>
+
+      <ng-container *ngSwitchCase="ScreenId.PostRound">
+        <mat-card>
+          <mat-card-title>You collected {{roundService.totalPollen$ | async}} pollen</mat-card-title>
+          <mat-card-content>
+            <ul>
+              <li *ngFor="let flower of roundService.pollenByFlowerSpeciesFiltered$ | async">{{flower.species.name}}: {{flower.pollenCount}} pollen</li>
+            </ul>
+          </mat-card-content>
+        </mat-card>
+
+      </ng-container>
+
+
+      <mat-card *ngSwitchDefault>
+        <mat-card-title>
+          Loading Round&hellip;
+        </mat-card-title>
+        <mat-spinner></mat-spinner>
+      </mat-card>
+
     </div>
   </ng-container>
 </ng-container>

src/app/components/student-round/student-round.component.scss

@@ -12,3 +12,8 @@
     margin-bottom: 8px;
   }
 }
+
+mat-spinner {
+  margin: auto;
+  margin-top: 16px;
+}

src/app/components/student-round/student-round.component.ts

@@ -8,6 +8,8 @@ import { StudentRoundService } from 'src/app/services/student-round.service';
 import { FieldGuideDialogComponent } from '../field-guide-dialog/field-guide-dialog.component';
 
 enum ScreenId {
+  PreRound,
+  PostRound,
   Play,
   InactiveBee,
   Paused
@@ -25,12 +27,24 @@ export class StudentRoundComponent implements OnInit {
 
   readonly ScreenId = ScreenId;
 
-  currentScreen$: Observable<ScreenId> = this.roundService.currentRunning$.pipe(
-    switchMap(running =>
-      running
-      ? this.roundService.currentBeeActive$.pipe(map(active => active ? ScreenId.Play : ScreenId.InactiveBee))
-      : of(ScreenId.Paused)
-    ),
+  currentScreen$: Observable<ScreenId> = this.roundService.currentRound$.pipe(
+    filter(round => !!round),
+    distinctUntilChanged((x, y) => x.running === y.running && x.status === y.status),
+    switchMap(({status, running}) => {
+      switch (status) {
+        case 'preRound': {
+          return of(ScreenId.PreRound);
+        }
+        case 'postRound': {
+          return of(ScreenId.PostRound);
+        }
+        default: {
+          return running
+          ? this.roundService.currentBeeActive$.pipe(map(active => active ? ScreenId.Play : ScreenId.InactiveBee))
+          : of(ScreenId.Paused);
+        }
+      }
+    }),
     distinctUntilChanged(),
     shareReplay(1)
   );
@@ -53,7 +67,7 @@ export class StudentRoundComponent implements OnInit {
       switchMap(dialog =>
         this.currentScreen$.pipe(
           takeUntil(dialog.afterClosed()),
-          filter(screen => screen !== ScreenId.InactiveBee),
+          filter(screen => screen !== ScreenId.InactiveBee && screen !== ScreenId.PreRound),
           take(1),
           tap(() => dialog.close())
         )

src/app/pages/large-display/large-display.component.html

@@ -5,24 +5,21 @@
 
   <ng-container *ngSwitchCase="ScreenId.DuringTheRound">
     <div class="large-display-content during-the-round">
-      <app-timer-progress-bar
-        *ngIf="teacherRoundService.roundTemplate$ | async as template"
-        [currentTimePrecise]="timerService.currentTimePrecise$ | async"
-        [currentMonth]="timerService.currentMonth$ | async"
-        [startMonth]="template.startTime.month"
-        [endMonth]="template.endTime.month"
-      >
-      </app-timer-progress-bar>
-
-      <app-flower-layout-with-bees [flowers]="flowerLayoutItems$ | async" [bees]="beeLayoutItems$ | async"></app-flower-layout-with-bees>
-
-      <app-timer-progress-spinner
-        *ngIf="teacherRoundService.roundTemplate$ | async as template"
-        [currentTimePrecise]="timerService.currentTimePrecise$ | async"
-        [startTime]="template.startTime"
-        [endTime]="template.endTime"
-      >
-      </app-timer-progress-spinner>
+      <ng-container [ngSwitch]="roundStatus$ | async">
+        <app-ld-play-round  *ngSwitchCase="'playRound'"></app-ld-play-round>
+        <app-ld-pre-round *ngSwitchCase="'preRound'"></app-ld-pre-round>
+        <app-ld-post-round *ngSwitchCase="'postRound'"></app-ld-post-round>
+        <ng-container *ngSwitchDefault>
+          <div class="centered-container">
+            <mat-card>
+              <mat-card-title>
+                Loading Round&hellip;
+              </mat-card-title>
+              <mat-spinner></mat-spinner>
+            </mat-card>
+          </div>
+        </ng-container>
+      </ng-container>
     </div>
 
     <app-bottom-bar>
@@ -31,7 +28,7 @@
       </div>
 
       <div center>
-        <button mat-mini-fab color="accent" (click)="toggleTimerRunning()"
+        <button mat-mini-fab color="accent" (click)="toggleTimerRunning()" [disabled]="(this.roundStatus$ | async) === 'postRound'"
         >
           <mat-icon>
             {{(timerService.running$ | async) ? 'pause' : 'play_arrow'}}

src/app/pages/large-display/large-display.component.scss

@@ -20,33 +20,13 @@
     justify-content: center;
     align-items: center;
   }
-
-  &.during-the-round {
-    background-color: mat-color($primary);
-
-    app-flower-layout {
-      display: block;
-      width: 100%;
-    }
-
-    app-timer-progress-spinner {
-      position: absolute;
-      display: block;
-      left: 40px;
-      top: 40px;
-    }
-
-    app-timer-progress-bar {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      z-index: 1;
-    }
-  }
 }
 
 mat-spinner {
   margin: auto;
   margin-top: 16px;
 }
 
+app-bottom-bar {
+  z-index: 1;
+}

src/app/pages/large-display/large-display.component.ts

@@ -6,8 +6,6 @@ import { take } from 'rxjs/operators';
 import { TeacherRoundService } from '../../services/teacher-round.service';
 import { TeacherSessionService } from '../../services/teacher-session.service';
 import { ActivatedRoute } from '@angular/router';
-import { FlowerLayoutItem } from 'src/app/components/flower-layout/flower-layout.component';
-import { BeeLayoutItem } from 'src/app/components/flower-layout-with-bees/flower-layout-with-bees.component';
 
 /**
  * Over the course of a session, the large display will show several
@@ -33,25 +31,6 @@ export class LargeDisplayComponent implements OnInit {
   // Expose this enum to the template
   readonly ScreenId = ScreenId;
 
-  flowerLayoutItems$: Observable<FlowerLayoutItem[]> = this.teacherRoundService.currentFlowers$.pipe(
-    map(roundFlowers => roundFlowers.map(rf => ({
-      imgSrc: rf.species.asset_urls.art_500_wide,
-      alt: rf.species.name,
-      active: rf.isBlooming,
-      scale: rf.species.relative_size
-    })))
-  );
-
-  beeLayoutItems$: Observable<BeeLayoutItem[]> = this.teacherRoundService.mostRecentValidInteractionWithBeeSpecies$.pipe(
-    map(interactions => interactions.map(({userId, beeSpecies, barcodeValue, isNest}) => ({
-      id: userId,
-      imgSrc: beeSpecies.asset_urls.art_500_wide,
-      scale: beeSpecies.relative_size,
-      alt: beeSpecies.name,
-      currentFlower: isNest ? 0 : barcodeValue
-    })))
-  );
-
   loadingSession$ = new BehaviorSubject<boolean>(true);
 
   currentScreen$: Observable<ScreenId> = this.loadingSession$.pipe(
@@ -68,6 +47,8 @@ export class LargeDisplayComponent implements OnInit {
     ),
   );
 
+  roundStatus$ = this.teacherRoundService.roundStatus$;
+
   constructor(
     public timerService: TimerService,
     public teacherRoundService: TeacherRoundService,

src/app/pages/ld-play-round/ld-play-round.component.html

@@ -0,0 +1,18 @@
+<app-timer-progress-bar
+  *ngIf="teacherRoundService.roundTemplate$ | async as template"
+  [currentTimePrecise]="timerService.currentTimePrecise$ | async"
+  [currentMonth]="timerService.currentMonth$ | async"
+  [startMonth]="template.startTime.month"
+  [endMonth]="template.endTime.month"
+>
+</app-timer-progress-bar>
+
+<app-flower-layout-with-bees [flowers]="flowerLayoutItems$ | async" [bees]="beeLayoutItems$ | async"></app-flower-layout-with-bees>
+
+<app-timer-progress-spinner
+  *ngIf="teacherRoundService.roundTemplate$ | async as template"
+  [currentTimePrecise]="timerService.currentTimePrecise$ | async"
+  [startTime]="template.startTime"
+  [endTime]="template.endTime"
+>
+</app-timer-progress-spinner>

src/app/pages/ld-play-round/ld-play-round.component.scss

@@ -0,0 +1,27 @@
+@use "../../../variables" as *;
+
+:host {
+  background-color: mat-color($primary);
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+app-flower-layout {
+  display: block;
+  width: 100%;
+}
+
+app-timer-progress-spinner {
+  position: absolute;
+  display: block;
+  left: 40px;
+  top: 40px;
+}
+
+app-timer-progress-bar {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  z-index: 1;
+}

src/app/pages/ld-play-round/ld-play-round.component.spec.ts

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