Commit 897c9a99 authored by Dennis Willers's avatar Dennis Willers 🏀

Add Mobile View

parent d80a0345
Pipeline #347 passed with stages
in 5 minutes and 26 seconds
<div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" >
<app-header>
</app-header>
<div fxFlex>
<div class="{{view}}" fxFlex>
<router-outlet></router-outlet>
</div>
<app-footer>
......
......@@ -3,3 +3,17 @@ html, body {
box-sizing: border-box;
margin: 0;
}
.desktopView {
text-align: center;
margin-left: 15em;
margin-right: 15em;
margin-top: 5em;
}
.mobileView {
text-align: center;
margin-left: 2em;
margin-right: 2em;
margin-top: 5em;
}
import {Component, OnInit, Output} from '@angular/core';
import {io} from 'socket.io-client';
import {environment} from '../environments/environment';
import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-root',
......@@ -9,7 +7,17 @@ import {environment} from '../environments/environment';
})
export class AppComponent implements OnInit {
title = 'Tabu';
view = 'desktopView';
isMobileResolution = false;
ngOnInit(): void {
this.isMobileResolution = window.innerWidth < 768;
if (this.isMobileResolution) {
console.log('MobileView');
this.view = 'mobileView';
} else {
console.log('DesktopView');
this.view = 'desktopView';
}
}
}
<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
<mat-card class="transparent">
<h3>
Leider konnte die Seite nicht erreicht werden, bitte überprüfen Sie den Link oder kehren Sie auf die <a (click)="toStartpage()">Startseite</a> zurück
</h3>
</mat-card>
<br>
<mat-progress-spinner color="primary" mode="determinate" value="value">
</mat-progress-spinner>
</div>
<mat-card class="transparent">
<h3>
Leider konnte die Seite nicht erreicht werden, bitte überprüfen Sie den Link oder kehren Sie auf die <a (click)="toStartpage()">Startseite</a> zurück
</h3>
</mat-card>
<br>
<mat-progress-spinner color="primary" mode="determinate" value="value">
</mat-progress-spinner>
<div class="TimerLeft" style="margin-top: 10px; margin-right: 48px; margin-left: auto">
<div *ngIf="isMobileResolution" style="margin-top: -4.25em;">
<mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
</mat-progress-spinner>
<mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
<br>
</div>
<div *ngIf="!isMobileResolution" class="TimerLeft" style="margin-top: -4.25em; margin-right: -11.5em; margin-left: auto">
<mat-progress-spinner style="border-radius: 50%;" 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;">
<div style="text-align: center; margin-top: -3em;">
<mat-card>
<mat-card-title>
{{cardInfo.solution}}
......
......@@ -20,14 +20,13 @@ th{
.timer{
position:relative;
top: -60px;
left: 35px;
font-size: x-large;
font-weight: bold;
}
.TimerLeft
{
top: -150px; float:right;width:100px;
top: -2em; float:right;width:100px;
}
body {
......@@ -47,3 +46,8 @@ body {
color: rgba(200, 0, 0);
}
.center{
margin-left: auto;
margin-right: auto;
}
......@@ -14,6 +14,7 @@ import {takeUntil} from 'rxjs/operators';
styleUrls: ['./game.component.scss']
})
export class GameComponent implements OnInit, OnDestroy {
isMobileResolution = false;
private ngUnsubscribe = new Subject();
subNewCard: any;
......@@ -57,6 +58,7 @@ export class GameComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.isMobileResolution = window.innerWidth < 768;
this.activatedRoute.paramMap.subscribe(params => {
this.sessionName = String(params.get('sessionName')).toLowerCase();
this.team = String(params.get('team'));
......
<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
<mat-card class="transparent">
<mat-card-title> Du musst raten!
<br>
<br>
<br>
Spielstand</mat-card-title>
<mat-card-content>
<br>
<table>
<tr>
<th>Team rot</th>
<th>Team blau</th>
</tr>
<tr>
<th class = "red">{{gameStatus.red}}</th>
<th class = "blue">{{gameStatus.blue}}</th>
</tr>
</table>
</mat-card-content>
<mat-card class="transparent">
<mat-card-title> Du musst raten!
<br>
<mat-progress-spinner style="border-radius: 50%;" class = "center" color="primary" mode="determinate" value={{timeLeft}} aria-label="Rating">
<br>
<br>
Spielstand</mat-card-title>
<mat-card-content>
<br>
<table>
<tr>
<th>Team rot</th>
<th>Team blau</th>
</tr>
<tr>
<th class = "red">{{gameStatus.red}}</th>
<th class = "blue">{{gameStatus.blue}}</th>
</tr>
</table>
</mat-card-content>
<br>
<mat-progress-spinner style="border-radius: 50%;" 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>
</mat-progress-spinner>
<mat-card-content class = "timer">{{timeRemaining}}</mat-card-content>
</mat-card>
This diff is collapsed.
<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
<mat-card class="transparent">
<div class="FloatLeftAndCenterElement">
<div class="newStartButtonLeft">
<button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
<mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
</div>
<div class="CenterText">
<h2>{{membership}}</h2>
</div>
<mat-card class="transparent">
<div class="FloatLeftAndCenterElement">
<div class="newStartButtonLeft">
<button matTooltip="Neues Spiel starten" [disabled]="buttonNewGameDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="startGame()">
<mat-icon color = "white" aria-hidden="false">autorenew</mat-icon></button>
</div>
<button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
<mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
</button>
<button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
<mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
</button>
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
<mat-card-title>Spielstand</mat-card-title>
<mat-card-content>
<br>
<table>
<tr>
<th>Team rot</th>
<th>Team blau</th>
</tr>
<tr>
<th class = "redfont">{{gameStatus.red}}</th>
<th class = "bluefont">{{gameStatus.blue}}</th>
</tr>
</table>
</mat-card-content>
<mat-card-actions>
<br>
<br>
<div *ngIf="isActiveRound" class="spinner-wrapper">
<mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
<mat-spinner diameter="30"></mat-spinner>
</div>
<mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
<br>
<button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
</mat-card-actions>
</mat-card>
</div>
<div class="CenterText">
<h2>{{membership}}</h2>
</div>
</div>
<button mat-raised-button class = "{{red}}" (click)="joinTeam('red')">
<mat-icon color = "warn" aria-hidden="false" aria-label="home icon red">home</mat-icon>
</button>
<button mat-raised-button class = "{{blue}}" (click)="joinTeam('blue')">
<mat-icon style="color: darkblue" aria-hidden="false" aria-label="home icon blue">home</mat-icon>
</button>
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
<mat-card-title>Spielstand</mat-card-title>
<mat-card-content>
<br>
<table>
<tr>
<th>Team rot</th>
<th>Team blau</th>
</tr>
<tr>
<th class = "redfont">{{gameStatus.red}}</th>
<th class = "bluefont">{{gameStatus.blue}}</th>
</tr>
</table>
</mat-card-content>
<mat-card-actions>
<br>
<br>
<div *ngIf="isActiveRound" class="spinner-wrapper">
<mat-card-title class="rightPlace">Warten auf nächste Runde</mat-card-title>
<mat-spinner diameter="30"></mat-spinner>
</div>
<mat-card-title *ngIf="!isActiveRound">{{nextTeam}} ist am Zug:</mat-card-title>
<br>
<button [disabled]="buttonNextRoundDisabled || gameStatus.activeExplainer == 1" mat-raised-button color="primary" (click)="nextRound()">Ich erkläre und los!</button>
</mat-card-actions>
</mat-card>
<div style="text-align: center; margin-left: 15em; margin-right: 15em; margin-top: 5em;">
<mat-card class="transparent">
<h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1>
<h2>Ideal im Lockdown!</h2>
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
<mat-card-title>Spielsuche</mat-card-title>
<mat-card-subtitle>Finde ein Spiel über den Spielnamen oder erstelle ein neues Spiel</mat-card-subtitle>
<mat-card-content>
<form>
<mat-form-field>
<mat-label>Spielname</mat-label>
<input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
</mat-form-field>
</form>
</mat-card-content>
<mat-card-actions>
<button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
<button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
</mat-card-actions>
</mat-card>
</div>
<mat-card class="transparent">
<h1>Willkommen bei Tabu im Online-Multiplayer-Modus</h1>
<h2>Ideal im Lockdown!</h2>
</mat-card>
<br>
<br>
<br>
<mat-card class="transparent">
<mat-card-title>Spielsuche</mat-card-title>
<mat-card-subtitle>Finde ein Spiel über den Spielnamen oder erstelle ein neues Spiel</mat-card-subtitle>
<mat-card-content>
<form>
<mat-form-field>
<mat-label>Spielname</mat-label>
<input #sessionName type="text" matInput (keyup)="checkSpielname(sessionName.value)" (keypress)="keyPressAlphaNumeric($event)" (keyup.enter)="enter(sessionName.value)">
</mat-form-field>
</form>
</mat-card-content>
<mat-card-actions>
<button [disabled]="buttonCreateGameDisabled" mat-raised-button color="primary" (click)="createGame(sessionName.value)">Spiel erstellen</button>
<button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
</mat-card-actions>
</mat-card>
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