Add Tag

src/app/app-routing.module.ts

@@ -6,6 +6,7 @@ import {ErrorComponent} from './error/error.component';
 import {GameComponent} from './game/game.component';
 import {GuesserComponent} from './guesser/guesser.component';
 import {ImpressumComponent} from './impressum/impressum.component';
+import {RulesComponent} from './rules/rules.component';
 
 const routes: Routes = [
   {
@@ -16,6 +17,10 @@ const routes: Routes = [
     path: 'impressum',
     component: ImpressumComponent,
   },
+  {
+    path: 'rules',
+    component: RulesComponent,
+  },
   {
     path: ':sessionName',
     component: OverviewComponent,

src/app/app.component.html

-<div fxLayout="column" fxFlexFill style="background-image: url(/assets/background.jpg); background-repeat: repeat;" >
+<div fxLayout="column" class="minimumFullWindowSize" style="background-image: url(/assets/background.jpg); background-repeat: repeat;" >
   <app-header>
   </app-header>
   <div class="{{view}}" fxFlex>

src/app/app.component.scss

@@ -17,3 +17,8 @@ html, body {
   margin-right: 2em;
   margin-top: 5em;
 }
+
+.minimumFullWindowSize{
+  min-height: 100%;
+  display: flex;
+}

src/app/app.module.ts

@@ -26,6 +26,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {IsAllowedToPlay} from './dao/isAllowedToPlay';
 import {SocketDataService} from './dao/socketDataService';
 import { ImpressumComponent } from './impressum/impressum.component';
+import { RulesComponent } from './rules/rules.component';
 
 @NgModule({
   declarations: [
@@ -38,6 +39,7 @@ import { ImpressumComponent } from './impressum/impressum.component';
     GameComponent,
     GuesserComponent,
     ImpressumComponent,
+    RulesComponent,
   ],
   imports: [
     HttpClientModule,

src/app/rules/rules.component.html

+<mat-card class="transparent">
+  <mat-card-title>Spielregeln</mat-card-title>
+</mat-card>
+<br>
+<br>
+<mat-card class="transparent">
+  <mat-card-title>Voraussetzungen</mat-card-title>
+  <mat-card-subtitle>Um Tabooh sinnvoll spielen zu können, müsst ihr</mat-card-subtitle>
+  <mat-card-content>
+    <ul class="stichpunktenTextLinksbündig">
+      <li>
+        mindestens <b>vier Spieler</b> sein.
+      </li>
+      <li>
+        in einem <b>Gruppenanruf</b> und/oder im <b>gleichen Raum</b> sein.
+      </li>
+    </ul>
+  </mat-card-content>
+</mat-card>
+<br>
+<br>
+<mat-card class="transparent">
+  <mat-card-title>Neues Spiel erstellen</mat-card-title>
+  <mat-card-subtitle>Zur Spielvorbereitung solltet ihr wiefolgt vorgehen:</mat-card-subtitle>
+  <mat-card-content>
+    <ol class="stichpunktenTextLinksbündig">
+      <li>
+        <b>Ein Spieler</b> erstellt auf der Startseite mithilfe eines <b>neuen Raumnamens</b> ein <b>Spiel</b><br>
+      </li>
+      <li>
+        <b>Alle Spieler</b> treten dem Spiel durch <b>Eingabe des Raumnamens</b> bei.
+      </li>
+      <li>
+        <b>Jeder Spieler</b> muss entweder dem Team <redfont>Rot</redfont> oder dem Team <bluefont>Blau</bluefont> beitreten.<br>
+        Die Aufteilung der Teams klärt ihr untereinander ab.
+      </li>
+      <li>
+        Das <b>Spiel beginnt</b>, sobald einer aus dem <b>Team</b>, das am Zug ist, <br>
+        den Button <button mat-raised-button color="primary" class="mat-small">Ich erkläre und los!</button> drückt. Damit startet der <b><primaryfont>Erklärer</primaryfont></b> eine <b>neue Spielrunde</b>.
+      </li>
+    </ol>
+  </mat-card-content>
+</mat-card>
+<br>
+<br>
+<mat-card class="transparent">
+  <mat-card-title>Prinzip einer Spielrunde</mat-card-title>
+  <mat-card-subtitle>Tabooh wird in mehreren Spielrunden gespielt</mat-card-subtitle>
+  <mat-card-content>
+    <ul class="stichpunktenTextLinksbündig">
+      <li>
+        Eine <b>Spielrunde</b> dauert <b>eine Minute</b>.
+      </li>
+      <li>
+        In einer <b>Spielrunde</b> gibt es das <primaryfont>aktive</primaryfont> und das <primaryfont>passive</primaryfont> Team.
+      </li>
+      <li>
+        Das <primaryfont>aktive</primaryfont> Team besteht aus einem <b><primaryfont>Erklärer</primaryfont></b> und aus <b>mindestens</b> einem <b><primaryfont>Ratenden</primaryfont></b>.
+      </li>
+      <li>
+        <b>Stimmt</b> euch im Team vor Beginn der Spielrunde <b>ab</b>, wer als nächstes der <b><primaryfont>Erklärer</primaryfont></b> ist.<br>
+        Am besten sollte jeder <b>gleich oft</b> die Rolle des <b><primaryfont>Erklärers</primaryfont></b> besetzt haben.
+      </li>
+      <li>
+        Dem <b><primaryfont>Erklärer</primaryfont></b> wird ein <b>Begriff</b> und <b>fünf <redFont>Tabooh</redFont></b> Wörter angezeigt.<br>
+      </li>
+      <li>
+        Die <b>angezeigten Wörter</b> darf der <b><primaryfont>Erklärer </primaryfont></b> <b><redFont>nicht</redFont> verwenden</b>.<br>
+      </li>
+      <li>
+        Auch <b>Teilwörter</b> darf der <b><primaryfont>Erklärer </primaryfont></b> nicht verwenden.<br>
+        Beispielsweise darf das Wort <b><i>Bahn</i></b> bei <b><i>Hauptbahnhof</i></b> <b><redfont> nicht </redfont></b> <b>erwähnt</b> werden.
+      </li>
+      <li>
+        Sämtliche Konjugationen von <b><redFont>Tabooh</redFont></b> Wörter sind ebenfalls <b><redfont>nicht</redfont> erlaubt</b>.<br>
+        Beispielsweise darf beim <b><redFont>Tabooh</redFont></b> Wort <b><i>Spiel</i></b> auch <b><redFont>nicht</redFont></b> die Wörter<br>
+        <b><i>spielen</i></b>, <b><i>Spieler</i></b>, <b><i>spielte</i></b> oder ähnliches erwähnt werden.
+      </li>
+      <li>
+        <b><redFont>Tabooh</redFont></b> Wörter dürfen <b><redfont>nicht</redfont></b> in eine <b>andere Sprache</b> übersetzt werden.<br>
+        Beispielsweise darf beim Wort <b><i>Spiel</i></b> auch <b><redFont>nicht</redFont></b> das englische Wort <b><i>Play</i></b> verwendet werden.
+      </li>
+      <li>
+        Das <primaryfont>aktive</primaryfont> Team hat das <b>Ziel</b> möglichst <b>viele Punkte</b> zu sammeln.
+      </li>
+      <li>
+        Ein <b>Punkt</b> erhält das <primaryfont>aktive</primaryfont> Team, wenn die <b><primaryfont>Ratenden</primaryfont></b> den <b>Begriff nennen</b>, welches der <b><primaryfont>Erklärer</primaryfont> beschreibt</b>.<br>
+        Erst wenn der <b><primaryfont>Erklärer</primaryfont></b> auf den Button <button mat-raised-button color="primary" class="mat-small">Richtig &#10004;</button> drückt, wird der <b>Punkt gutgeschrieben</b>. <br>
+        Danach erscheint ein <b>neuer Begriff</b> und <b>neue <redfont>Tabooh</redfont></b> Wörter.
+        <br>
+      </li>
+      <li>
+        Falls der <b><primaryfont>Erklärer</primaryfont></b> beim aktuellen Wort hängt, kann er den Begriff <b><warnfont>überspringen</warnfont></b>,<br>
+        indem er auf den Button <button mat-raised-button color="accent" class="mat-small">Überspringen &#187;</button> drückt.
+      </li>
+      <li>
+        Das <primaryfont>passive</primaryfont> Team besteht aus <b>mindestens zwei </b> <b><primaryfont>Aufpasser</primaryfont></b>.
+      </li>
+      <li>
+        <b><primaryfont>Aufpasser</primaryfont></b> sehen <b>dieselben Wörter</b> wie der <b><primaryfont>Erklärer</primaryfont></b>.
+      </li>
+      <li>
+        Das <primaryfont>passive</primaryfont> Team hat das <b>Ziel</b> gesagte <b><redFont>Tabooh</redFont></b> Wörter zu melden,<br>
+        indem ein <b><primaryfont>Aufpasser</primaryfont></b> auf den Button <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> drückt.
+      </li>
+      <li>
+        Ein gemeldetes <b><redFont>Tabooh</redFont></b> Wort führt zu einem <b><redFont>Minuspunkt</redFont></b> für das <primaryfont>aktive</primaryfont> Team.<br>
+        Danach wird ein <b>neuer Begriff</b> und <b>neue <redfont>Tabooh</redfont></b> Wörter angezeigt.
+      </li>
+      <li>
+        Auch der <b><primaryfont>Erklärer</primaryfont></b> hat die Möglichkeit auf den <button mat-raised-button color="warn" class="mat-small">Tabooh &#10008;</button> Button zu drücken.
+      </li>
+      <li>
+        <b>Nach</b> einer <b>Spielrunde</b> ist das <b>andere Team</b> an der <b>Reihe</b>.
+      </li>
+    </ul>
+  </mat-card-content>
+</mat-card>
+<br>
+<br>
+<mat-card class="transparent">
+  <mat-card-title>Spielende</mat-card-title>
+  <mat-card-subtitle>Ihr entscheidet wie das Spiel endet</mat-card-subtitle>
+  <mat-card-content>
+    <b>Gewonnen</b> hat das <b>Team</b>, das die <b>meisten Punkte</b> hat.<br>
+    Es gibt verschiedene Möglichkeiten, wie das Spiel beendet wird. Hier ein paar Vorschläge:
+    <ol class="stichpunktenTextLinksbündig">
+      <li>
+        Ihr spielt <b>alle Begriffe</b> durch <i>(Das könnte etwas dauern...)</i>
+      </li>
+      <li>
+        <b>Alle Spieler</b> waren mindestens <b>einmal </b> <b><primaryfont>Erklärer</primaryfont></b>.<br>
+        Die <b>Spiellänge</b> kann auf mehrere <b><primaryfont>Erklärerrunden</primaryfont></b> erhöht werden.
+      </li>
+      <li>
+        Ihr definiert einen <b>Punktewert</b>, der zuerst erreicht werden soll. Beispielsweise <b>gewinnt</b> das <b>Team</b>,<br>
+        das zuerst die <b>20 Punktemarke</b> erreicht hat. Falls die Marke von dem zuerst angefangenen Team erreicht wurde,<br>
+        darf das <b>andere Team fairness halber</b> versuchen mit einer <b>weiteren Spielrunde</b> den <b>Punktestand</b> zu <b>überbieten</b>.<br>
+        Bei <b>Gleichstand</b> geht es in die <b>Verlängerung</b>.
+      </li>
+    </ol>
+  </mat-card-content>
+</mat-card>
+<br>
+<br>
+<mat-card class="transparent">
+  <mat-card-title>Alles verstanden?</mat-card-title>
+  <mat-card-subtitle>Dann mal los!</mat-card-subtitle>
+  <mat-card-content>
+    <button mat-raised-button color="primary" (click)="goToStartpage()">Zur Startseite</button>
+  </mat-card-content>
+</mat-card>
+<br>
+<br>
+<br>
+

src/app/rules/rules.component.scss

+// Import material theming functions
+@import '~@angular/material/theming';
+
+// Copy the palettes from your selected theme (usually theme.scss).
+$app-primary: mat-palette($mat-deep-purple);
+$app-accent:  mat-palette($mat-light-blue);
+$app-warn:    mat-palette($mat-deep-orange);
+
+// Create your Sass color vars (will be available in all the project)
+$primary: mat-color($app-primary);
+$accent: mat-color($app-accent);
+$warn: mat-color($app-warn);
+
+.stichpunkteZentriert {
+  text-align: center
+}
+
+.stichpunktenTextLinksbündig {
+  display: inline-block;
+  text-align: left;
+}
+
+bluefont{
+  color: rgba(0,0,139);
+}
+
+redfont{
+  color: rgba(200, 0, 0);
+}
+
+primaryfont {
+  color: $primary
+}
+
+warnfont {
+  color: $warn
+}
+
+.mat-small{
+  line-height: 24px;
+  font-size: small;
+}

src/app/rules/rules.component.spec.ts

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

src/app/rules/rules.component.ts

+import { Component, OnInit } from '@angular/core';
+import {Router} from '@angular/router';
+
+@Component({
+  selector: 'app-rules',
+  templateUrl: './rules.component.html',
+  styleUrls: ['./rules.component.scss']
+})
+export class RulesComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit(): void {
+  }
+
+  goToStartpage(): void {
+    this.router.navigate(['']);
+  }
+}

src/app/select-game/select-game.component.html

@@ -21,3 +21,13 @@
     <button [disabled]="buttonJoinGameDisabled" mat-raised-button color="primary" (click)="joinGame(sessionName.value)">Spiel beitreten</button>
   </mat-card-actions>
 </mat-card>
+<br>
+<br>
+<br>
+<mat-card class="transparent">
+  <mat-card-title>Spielregeln</mat-card-title>
+  <mat-card-subtitle>Du kennst Tabooh nicht? Mach dich in weniger als drei Minuten mit den Spielregeln vertraut</mat-card-subtitle>
+  <mat-card-content>
+    <button mat-raised-button color="primary" (click)="goToRules()">Zu den Spielregeln</button>
+  </mat-card-content>
+</mat-card>

src/app/select-game/select-game.component.scss

@@ -7,7 +7,3 @@
 .example-full-width {
   width: 100%;
 }
-
-.transparent {
-  opacity: 0.9;
-}

src/app/select-game/select-game.component.ts

@@ -83,4 +83,8 @@ export class SelectGameComponent implements OnInit {
       });
     }
   }
+
+  goToRules(): void {
+    this.router.navigate(['rules']);
+  }
 }

src/styles.scss

@@ -2,3 +2,7 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.transparent {
+  opacity: 0.9;
+}