Merge remote-tracking branch 'origin/master' (05b07704) · Commits · Dennis Willers / Tabu

src/app/game/game.component.html

+10 −6

Original line number	Original line	Diff line number	Diff line
	<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">		<div class="TimerLeft" style="margin-top: 10px; margin-right: 48px; margin-left: auto">
	<div id="app"></div>		<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>		<mat-card>
	<h1>		<mat-card-title>
	{{cardInfo.solution}}		{{cardInfo.solution}}
	</h1>		</mat-card-title>
	</mat-card>		</mat-card>

	<br>		<br>
	@@ -38,11 +44,9 @@
	<button mat-raised-button color="warn" (click)="wrongAnswer()">Tabu ✘</button>		<button mat-raised-button color="warn" (click)="wrongAnswer()">Tabu ✘</button>
	<br>		<br>
	<br>		<br>
	<br>
	<mat-card class="transparent">		<mat-card class="transparent">
	<mat-card-title>Spielstand</mat-card-title>		<mat-card-title>Spielstand</mat-card-title>
	<mat-card-content>		<mat-card-content>
	<br>
	<table>		<table>
	<tr>		<tr>
	<th>Team rot</th>		<th>Team rot</th>

+14 −54

Original line number	Original line	Diff line number	Diff line
	@@ -8,63 +8,23 @@ table {
	opacity: 0.9;		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 {		body {
	font-family: sans-serif;		font-family: sans-serif;
	display: grid;		display: grid;
	height: 100vh;		height: 100vh;
	place-items: center;		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;
	}

+26 −0

Original line number	Original line	Diff line number	Diff line
	@@ -15,6 +15,11 @@ export class GameComponent implements OnInit {
	sessionName = '';		sessionName = '';
	isWatchdog = false;		isWatchdog = false;
	isExplainer = false;		isExplainer = false;
			TIME_LIMIT = 100;
			timePassed = 0;
			timeRemaining = 60;
			timerInterval = 0;
			timeLeft = this.TIME_LIMIT;
	cardInfo: CardInfo = {		cardInfo: CardInfo = {
	cardID: -1,		cardID: -1,
	solution: '',		solution: '',
	@@ -67,6 +72,27 @@ export class GameComponent implements OnInit {
	this.team = String(params.get('team'));		this.team = String(params.get('team'));
	this.newCard();		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{		rightAnswer(): void{

+5 −3

Original line number	Original line	Diff line number	Diff line
	@@ -13,14 +13,16 @@
	<th>Team blau</th>		<th>Team blau</th>
	</tr>		</tr>
	<tr>		<tr>
	<th>{{gameStatus.red}}</th>		<th class = "red">{{gameStatus.red}}</th>
	<th>{{gameStatus.blue}}</th>		<th class = "blue">{{gameStatus.blue}}</th>
	</tr>		</tr>
	</table>		</table>
	</mat-card-content>		</mat-card-content>
	<br>		<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-progress-spinner>
			<mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
	</mat-card>		</mat-card>
	</div>		</div>

+18 −0