Commit 05b07704 authored by Dennis Willers's avatar Dennis Willers 🏀

Merge remote-tracking branch 'origin/master'

parents 3192fcd4 7f3e6e0e
Pipeline #309 passed with stages
in 5 minutes and 36 seconds
<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
<div id="app"></div>
<div class="TimerLeft" style="margin-top: 10px; margin-right: 48px; margin-left: auto">
<mat-progress-spinner class = "white" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
</mat-progress-spinner>
<mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
</div>
<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 2em;">
<mat-card>
<h1>
<mat-card-title>
{{cardInfo.solution}}
</h1>
</mat-card-title>
</mat-card>
<br>
......@@ -38,11 +44,9 @@
<button mat-raised-button color="warn" (click)="wrongAnswer()">Tabu &#10008;</button>
<br>
<br>
<br>
<mat-card class="transparent">
<mat-card-title>Spielstand</mat-card-title>
<mat-card-content>
<br>
<table>
<tr>
<th>Team rot</th>
......
......@@ -8,63 +8,23 @@ table {
opacity: 0.9;
}
.white{
background-color: white;
}
.timer{
position:relative;
top: -60px;
left: 35px;
font-size: x-large;
font-weight: bold;
}
.FloatLeftAndCenterElement{width:100%;}
.TimerLeft{ top: -150px; float:right;width:100px;}
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;
}
......@@ -15,6 +15,11 @@ export class GameComponent implements OnInit {
sessionName = '';
isWatchdog = false;
isExplainer = false;
TIME_LIMIT = 100;
timePassed = 0;
timeRemaining = 60;
timerInterval = 0;
timeLeft = this.TIME_LIMIT;
cardInfo: CardInfo = {
cardID: -1,
solution: '',
......@@ -67,6 +72,27 @@ export class GameComponent implements OnInit {
this.team = String(params.get('team'));
this.newCard();
});
this.startTimer();
}
onTimesUp(): void{
this.router.navigate([this.sessionName + '/' + this.team]);
}
startTimer(): void {
this.startCountdown();
this.timerInterval = setInterval(() => {
this.timePassed = this.timePassed += 1;
this.timeLeft = (this.TIME_LIMIT - this.timePassed);
if (this.timeLeft === 0) {
this.onTimesUp();
}
}, 593);
}
startCountdown(): void {
setInterval(() => {
this.timeRemaining = this.timeRemaining -= 1;
}, 1000);
}
rightAnswer(): void{
......
......@@ -13,14 +13,16 @@
<th>Team blau</th>
</tr>
<tr>
<th>{{gameStatus.red}}</th>
<th>{{gameStatus.blue}}</th>
<th class = "red">{{gameStatus.red}}</th>
<th class = "blue">{{gameStatus.blue}}</th>
</tr>
</table>
</mat-card-content>
<br>
<mat-progress-spinner class = "center" color="primary" mode="determinate" value={{timeLeft}}>
<mat-progress-spinner class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
</mat-progress-spinner>
<mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
</mat-card>
</div>
......
......@@ -12,3 +12,21 @@ table{
margin-left: auto;
margin-right: auto;
}
.blue{
margin: 5px;
color: rgba(0,0,139);
}
.red{
margin: 5px;
color: rgba(200, 0, 0);
}
.timer{
position:relative;
top: -60px;
left: 0px;
font-size: medium;
font-weight: bold;
}
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {TabuMiddlewareService} from '../dao/TabuMiddlewareService';
import {GameStatus} from '../interface/gameStatus';
import {ActivatedRoute, Router} from '@angular/router';
@Component({
selector: 'app-guesser',
templateUrl: './guesser.component.html',
......@@ -10,7 +9,10 @@ import {GameStatus} from '../interface/gameStatus';
})
export class GuesserComponent implements OnInit {
sessionName = '';
TIME_LIMIT = 20;
TIME_LIMIT = 100;
timePassed = 0;
timeRemaining = 60;
timerInterval = 0;
timeLeft = this.TIME_LIMIT;
gameStatus: GameStatus = {
sessionID: -1,
......@@ -20,12 +22,14 @@ export class GuesserComponent implements OnInit {
activeExplainer: false,
activeWatchdog: false
};
team = '';
constructor(private activatedRoute: ActivatedRoute, private service: TabuMiddlewareService) { }
constructor(private router: Router, private activatedRoute: ActivatedRoute, private service: TabuMiddlewareService) { }
ngOnInit(): void {
this.activatedRoute.paramMap.subscribe(params => {
this.sessionName = String(params.get('sessionName'));
this.team = String(params.get('team'));
this.service.getGamestatus({spielname: this.sessionName}).then(value => {
const status = JSON.parse(value.status);
if (status) {
......@@ -39,5 +43,26 @@ export class GuesserComponent implements OnInit {
console.log(this.gameStatus);
});
});
this.startTimer();
}
onTimesUp(): void{
this.router.navigate([this.sessionName + '/' + this.team]);
}
startTimer(): void {
this.startCountdown();
this.timerInterval = setInterval(() => {
this.timePassed = this.timePassed += 1;
this.timeLeft = (this.TIME_LIMIT - this.timePassed);
if (this.timeLeft === 0) {
this.onTimesUp();
}
}, 593);
}
startCountdown(): void {
setInterval(() => {
this.timeRemaining = this.timeRemaining -= 1;
}, 1000);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment