Update

angular.json

@@ -34,7 +34,9 @@
               "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "./src/assets/JavaScript/Timer.js"
+            ]
           },
           "configurations": {
             "production": {
@@ -129,5 +131,8 @@
       }
     }
   },
-  "defaultProject": "Tabu"
+  "defaultProject": "Tabu",
+  "cli": {
+    "analytics": "7407060e-d956-49fb-9b06-019fa3c10d74"
+  }
 }

src/app/app-routing.module.ts

@@ -4,6 +4,7 @@ import {OverviewComponent} from './overview/overview.component';
 import {SelectGameComponent} from './select-game/select-game.component';
 import {ErrorComponent} from './error/error.component';
 import {GameComponent} from './game/game.component';
+import {GuesserComponent} from './guesser/guesser.component';
 
 const routes: Routes = [
   {
@@ -24,7 +25,7 @@ const routes: Routes = [
   },
   {
     path: ':sessionName/:team/guesser',
-    component: GameComponent,
+    component: GuesserComponent,
   },
   {
     path: '',

src/app/app.module.ts

@@ -19,6 +19,8 @@ import { ErrorComponent } from './error/error.component';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import { FormsModule } from '@angular/forms';
 import { GameComponent } from './game/game.component';
+import { GuesserComponent } from './guesser/guesser.component';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 
 @NgModule({
   declarations: [
@@ -29,6 +31,7 @@ import { GameComponent } from './game/game.component';
     OverviewComponent,
     ErrorComponent,
     GameComponent,
+    GuesserComponent,
   ],
   imports: [
     HttpClientModule,
@@ -42,7 +45,8 @@ import { GameComponent } from './game/game.component';
     MatInputModule,
     MatCardModule,
     MatProgressSpinnerModule,
-    FormsModule
+    FormsModule,
+    MatSlideToggleModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/error/error.component.ts

@@ -8,7 +8,7 @@ import {Router} from '@angular/router';
 })
 export class ErrorComponent implements OnInit {
 
-  constructor(private router: Router) { }
+  constructor(private router: Router) {}
 
   ngOnInit(): void {
   }

src/app/game/game.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
   <p>Punktestand: {{points}}</p>
+  <div id="app"></div>
   <mat-card>
     <h1>
       {{word}}

src/app/game/game.component.scss

+
+
+body {
+  font-family: sans-serif;
+  display: grid;
+  height: 100vh;
+  place-items: center;
+}
+
+.base-timer {
+  position: relative;
+  width: 300px;
+  height: 300px;
+}
+
+.base-timer__svg {
+  transform: scaleX(-1);
+}
+
+.base-timer__circle {
+  fill: none;
+  stroke: none;
+}
+
+.base-timer__path-elapsed {
+  stroke-width: 7px;
+  stroke: grey;
+}
+
+.base-timer__path-remaining {
+  stroke-width: 7px;
+  stroke-linecap: round;
+  transform: rotate(90deg);
+  transform-origin: center;
+  transition: 1s linear all;
+  fill-rule: nonzero;
+  stroke: currentColor;
+}
+
+.base-timer__path-remaining.green {
+  color: rgb(65, 184, 131);
+}
+
+.base-timer__path-remaining.orange {
+  color: orange;
+}
+
+.base-timer__path-remaining.red {
+  color: red;
+}
+
+.base-timer__label {
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+}
+

src/app/guesser/guesser.component.html

+<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
+  <mat-card class="transparent">
+    <h1>
+      Du musst raten!
+    </h1>
+    <p>Punktestand: {{points}}</p>
+  </mat-card>
+  <br>
+  <mat-progress-spinner color="primary" mode="determinate" value="value">
+  </mat-progress-spinner>
+</div>
+<div id="app"></div>
+
+

src/app/guesser/guesser.component.scss

+.transparent{
+  opacity: 0.9;
+}
+
+.base-timer {
+  position: relative;
+  width: 300px;
+  height: 300px;
+}
+
+.base-timer__svg {
+  transform: scaleX(-1);
+}
+
+.base-timer__circle {
+  fill: none;
+  stroke: none;
+}
+
+.base-timer__path-elapsed {
+  stroke-width: 7px;
+  stroke: grey;
+}
+
+.base-timer__path-remaining {
+  stroke-width: 7px;
+  stroke-linecap: round;
+  transform: rotate(90deg);
+  transform-origin: center;
+  transition: 1s linear all;
+  fill-rule: nonzero;
+  stroke: currentColor;
+}
+
+.base-timer__path-remaining.green {
+  color: rgb(65, 184, 131);
+}
+
+.base-timer__path-remaining.orange {
+  color: orange;
+}
+
+.base-timer__path-remaining.red {
+  color: red;
+}
+
+.base-timer__label {
+  position: absolute;
+  width: 300px;
+  height: 300px;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 48px;
+}
+

src/app/guesser/guesser.component.spec.ts

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

src/app/guesser/guesser.component.ts

+import { Component, OnInit } from '@angular/core';
+
+
+declare function testJS(): any;
+
+@Component({
+  selector: 'app-guesser',
+  templateUrl: './guesser.component.html',
+  styleUrls: ['./guesser.component.scss']
+})
+export class GuesserComponent implements OnInit {
+  points = 0;
+
+  constructor() { }
+
+  ngOnInit(): void {
+    testJS();
+  }
+}

src/app/overview/overview.component.html

 <div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
   <mat-card class="transparent">
-    <h2>Du spielst in Team rot!</h2>
+    <h2>Wähle dein Team</h2>
+    <mat-slide-toggle>Slide me!</mat-slide-toggle>
   </mat-card>
   <br>
   <br>

src/assets/JavaScript/Timer.js

+
+function testJS() {
+  // Credit: Mateusz Rybczonec
+
+  const FULL_DASH_ARRAY = 283;
+  const WARNING_THRESHOLD = 10;
+  const ALERT_THRESHOLD = 5;
+
+  const COLOR_CODES = {
+    info: {
+      color: "green"
+    },
+    warning: {
+      color: "orange",
+      threshold: WARNING_THRESHOLD
+    },
+    alert: {
+      color: "red",
+      threshold: ALERT_THRESHOLD
+    }
+  };
+
+  const TIME_LIMIT = 20;
+  let timePassed = 0;
+  let timeLeft = TIME_LIMIT;
+  let timerInterval = null;
+  let remainingPathColor = COLOR_CODES.info.color;
+
+  document.getElementById("app").innerHTML = `
+<div class="base-timer">
+  <svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+    <g class="base-timer__circle">
+      <circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
+      <path
+        id="base-timer-path-remaining"
+        stroke-dasharray="283"
+        class="base-timer__path-remaining ${remainingPathColor}"
+        d="
+          M 50, 50
+          m -45, 0
+          a 45,45 0 1,0 90,0
+          a 45,45 0 1,0 -90,0
+        "
+      ></path>
+    </g>
+  </svg>
+  <span id="base-timer-label" class="base-timer__label">${formatTime(
+    timeLeft
+  )}</span>
+</div>
+`;
+
+  startTimer();
+
+  function onTimesUp() {
+    clearInterval(timerInterval);
+  }
+
+  function startTimer() {
+    timerInterval = setInterval(() => {
+      timePassed = timePassed += 1;
+      timeLeft = TIME_LIMIT - timePassed;
+      document.getElementById("base-timer-label").innerHTML = formatTime(
+        timeLeft
+      );
+      setCircleDasharray();
+      setRemainingPathColor(timeLeft);
+
+      if (timeLeft === 0) {
+        onTimesUp();
+      }
+    }, 1000);
+  }
+
+  function formatTime(time) {
+    const minutes = Math.floor(time / 60);
+    let seconds = time % 60;
+
+    if (seconds < 10) {
+      seconds = `0${seconds}`;
+    }
+
+    return `${minutes}:${seconds}`;
+  }
+
+  function setRemainingPathColor(timeLeft) {
+    const { alert, warning, info } = COLOR_CODES;
+    if (timeLeft <= alert.threshold) {
+      document
+        .getElementById("base-timer-path-remaining")
+        .classList.remove(warning.color);
+      document
+        .getElementById("base-timer-path-remaining")
+        .classList.add(alert.color);
+    } else if (timeLeft <= warning.threshold) {
+      document
+        .getElementById("base-timer-path-remaining")
+        .classList.remove(info.color);
+      document
+        .getElementById("base-timer-path-remaining")
+        .classList.add(warning.color);
+    }
+  }
+
+  function calculateTimeFraction() {
+    const rawTimeFraction = timeLeft / TIME_LIMIT;
+    return rawTimeFraction - (1 / TIME_LIMIT) * (1 - rawTimeFraction);
+  }
+
+  function setCircleDasharray() {
+    const circleDasharray = `${(
+      calculateTimeFraction() * FULL_DASH_ARRAY
+    ).toFixed(0)} 283`;
+    document
+      .getElementById("base-timer-path-remaining")
+      .setAttribute("stroke-dasharray", circleDasharray);
+  }
+}