Merge remote-tracking branch 'origin/master'

tidal-harvest/src/app/app.component.html

@@ -1,12 +1,12 @@
 <div class="content">
-    <header>
-        <h1>TidalHarvest</h1>
-        <p>Das Spiel für die ganze Familie.</p>
-    </header>
+<!--    <header>-->
+<!--        <h1>TidalHarvest</h1>-->
+<!--        <p>Das Spiel für die ganze Familie.</p>-->
+<!--    </header>-->
 
-  <div class="game">
+<!--  <div class="game">-->
       <th-ui></th-ui>
-  </div>
+<!--  </div>-->
 
 </div>
 

tidal-harvest/src/app/app.component.scss

@@ -2,14 +2,18 @@ header {
     text-align: center;
 }
 
-.game {
-    width: 3200px;
-    height: 600px;
-    //border: 1px solid #47b928;
-    display: block;
-    box-shadow: 0 0 40px 15px black;
-    //background-color: #faf7f2;
-    color: black;
-    margin: auto;
-    background-color: #eac168;
+//.game {
+//    width: 3200px;
+//    height: 600px;
+//    //border: 1px solid #47b928;
+//    display: block;
+//    box-shadow: 0 0 40px 15px black;
+//    //background-color: #faf7f2;
+//    color: black;
+//    margin: auto;
+//    background-color: #eac168;
+//}
+
+th-ui {
+    width: 100%;
 }

tidal-harvest/src/app/core/service/ui.service.ts

@@ -1,5 +1,5 @@
 import {Injectable} from '@angular/core';
-import {Observable} from "rxjs";
+import {Observable, ReplaySubject} from "rxjs";
 import {Matrix} from "../model/Matrix";
 import {FieldType} from "../model/field/FieldType";
 import {Game} from "../game/Game";
@@ -12,6 +12,18 @@ export class UiService {
 
     game: Game = new Game();
 
+    flood: ReplaySubject<boolean[][]> = new ReplaySubject<boolean[][]>();
+    floodMatrix: boolean[][] = [];
+
+    constructor() {
+        for (let i = 0; i < 50; i++) {
+            this.floodMatrix[i] = []
+            for (let j = 0; j < 50; j++) {
+                this.floodMatrix[i][j] = true;
+            }
+        }
+    }
+
     public getMatrix(): Observable<Matrix> {
         return this.game.matrix();
     }
@@ -23,4 +35,13 @@ export class UiService {
     public selectCropType(type: CropKey, x: number, y: number) {
         this.game.selectCrop(type, x, y);
     }
+
+    public getFloodMatrix(): Observable<boolean[][]> {
+        this.flood.next(this.floodMatrix)
+        return this.flood;
+    }
+
+    public triggerFlood(): void {
+        this.flood.next(this.floodMatrix)
+    }
 }

tidal-harvest/src/app/ui/grid/grid.component.html

@@ -1,7 +1,10 @@
+<div class="ship-container">
+    <th-ship></th-ship>
+</div>
 <div class="row" *ngFor="let item of [].constructor(matrix.x); let i = index">
     <div class="field" *ngFor="let item of [].constructor(matrix.y); let j = index">
         <th-grid-tile
-            class="{{matrix.content[i][j].fieldType === FieldType.WATER_SOURCE ? 'water-source' : ''}}"
+            class="{{matrix.content[i][j].fieldType === FieldType.WATER_SOURCE ? 'water-source' : ''}} {{floodMatrix != undefined && floodMatrix != null && floodMatrix[i][j] ? 'flooded' : ''}}"
             (tileClick)="onFieldClick($event)"
             [field]="matrix.content[i][j]"
             [placing]="placing"

tidal-harvest/src/app/ui/grid/grid.component.scss

@@ -1,22 +1,48 @@
 .row {
     padding: 0;
     margin: 0;
-    display: block;
+    display: flex;
     height: 54px;
 }
 
-.field {
-    display: inline-block;
-}
-
 th-grid-tile {
     height: 54px;
     width: 54px;
     overflow: hidden;
-    display: inline-block;
+    display: block;
     font-size: 10px;
     font-weight: bold;
     padding: 0;
     color: #e3e3e3;
     background-color: #eac168;
+
+    &.flooded {
+        background-color: #0767bf;
+    }
+}
+
+@keyframes cruise {
+    0% {
+        margin-top: -50px;
+    }
+
+    100% {
+        margin-top: 1000px;
+    }
+}
+
+
+
+.ship-container {
+    position: absolute;
+    height: 1000px;
+    z-index: 3;
+
+    th-ship {
+        position: absolute;
+        margin-top: -50px;
+        animation-name: cruise;
+        animation-duration: 60s;
+        animation-timing-function: linear;
+    }
 }

tidal-harvest/src/app/ui/grid/grid.component.ts

@@ -2,6 +2,7 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {Matrix} from "../../core/model/Matrix";
 import {Coordinates} from "../../core/model/Coordinates";
 import {FieldType} from "../../core/model/field/FieldType";
+import {UiService} from "../../core/service/ui.service";
 
 @Component({
   selector: 'th-grid',
@@ -13,9 +14,28 @@ export class GridComponent {
     @Input() placing?: FieldType;
     @Output() fieldClick: EventEmitter<Coordinates> = new EventEmitter<Coordinates>();
 
+    floodMatrix?: boolean[][];
+
+    constructor(
+        private service: UiService
+    ) {
+        this.service.getFloodMatrix().subscribe(data => {
+            this.floodMatrix = data;
+            console.log("got flooded");
+            this.floodEvent();
+        });
+    }
+
+
     onFieldClick(c: Coordinates) {
         this.fieldClick.emit(c);
     }
 
+    floodEvent() {
+        setTimeout(() => {
+            this.floodMatrix = undefined;
+        }, 5000);
+    }
+
     protected readonly FieldType = FieldType;
 }

tidal-harvest/src/app/ui/grid/grid.module.ts

@@ -11,6 +11,7 @@ import { WaterChannelComponent } from './tile/water-channel/water-channel.compon
 import {SharedModule} from "../shared/shared.module";
 import { SiloComponent } from './tile/silo/silo.component';
 import { WaterSourceComponent } from './tile/water-source/water-source.component';
+import { ShipComponent } from './ship/ship.component';
 
 
 @NgModule({
@@ -23,7 +24,8 @@ import { WaterSourceComponent } from './tile/water-source/water-source.component
         TileBackgroundImgComponent,
         WaterChannelComponent,
         SiloComponent,
-        WaterSourceComponent
+        WaterSourceComponent,
+        ShipComponent,
     ],
     exports: [
         GridComponent

tidal-harvest/src/app/ui/grid/ship/ship.component.html

@@ -0,0 +1 @@
+<img src="assets/ship.png" alt="ship" (click)="onShipClick()">

tidal-harvest/src/app/ui/grid/ship/ship.component.scss

@@ -0,0 +1,20 @@
+img {
+  width: 80px;
+  animation-name: cruise2;
+  animation-duration: 10s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  cursor: pointer;
+}
+
+@keyframes cruise2 {
+  0% {
+    transform: translateX(-10px);
+  }
+  50% {
+    transform: translateX(10px);
+  }
+  100% {
+    transform: translateX(-10px);
+  }
+}

tidal-harvest/src/app/ui/grid/ship/ship.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ShipComponent } from './ship.component';
+
+describe('ShipComponent', () => {
+  let component: ShipComponent;
+  let fixture: ComponentFixture<ShipComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [ShipComponent]
+    });
+    fixture = TestBed.createComponent(ShipComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tidal-harvest/src/app/ui/grid/ship/ship.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'th-ship',
+  templateUrl: './ship.component.html',
+  styleUrls: ['./ship.component.scss']
+})
+export class ShipComponent {
+
+  onShipClick() {
+    alert("SHOP!!");
+  }
+}

tidal-harvest/src/app/ui/grid/tile/tile.component.html

@@ -1,4 +1,5 @@
 <th-field-popup *ngIf="showPopup" [field]="field" (close)="showPopup = false"></th-field-popup>
+
 <div class="tile-container {{isClickable() ? 'tile-clickable' : '' }}" (click)="onTileClick()">
     <ng-template thGridTile></ng-template>
 </div>

tidal-harvest/src/app/ui/ui.component.html

@@ -3,6 +3,8 @@
 <th-button [buttonType]="placing === FieldType.ROCK ? 'fail' : 'normal'" (buttonClick)="setPlacing(FieldType.ROCK)">{{placing === FieldType.ROCK ? 'abbrechen' : 'Stein setzen'}}</th-button>
 <th-button [buttonType]="placing === FieldType.WATER_CHANNEL ? 'fail' : 'normal'" (buttonClick)="setPlacing(FieldType.WATER_CHANNEL)">{{placing === FieldType.WATER_CHANNEL ? 'abbrechen' : 'Graben setzen'}}</th-button>
 <th-button [buttonType]="placing === FieldType.SILO ? 'fail' : 'normal'" (buttonClick)="setPlacing(FieldType.SILO)">{{placing === FieldType.SILO ? 'abbrechen' : 'Silo setzen'}}</th-button>
+<hr>
+<th-button [buttonType]="'normal'" (buttonClick)="triggerFlood()">Flut auslösen</th-button>
 
 <th-grid
     *ngIf="matrix"

tidal-harvest/src/app/ui/ui.component.scss

@@ -2,3 +2,9 @@
 .btn-place-active {
     background-color: #3795cb;
 }
+
+th-grid {
+    width: 100%;
+    display: block;
+    margin: 0
+}

tidal-harvest/src/app/ui/ui.component.ts

@@ -39,4 +39,8 @@ export class UiComponent {
     }
 
     protected readonly FieldType = FieldType;
+
+    triggerFlood() {
+        this.service.triggerFlood();
+    }
 }

tidal-harvest/src/styles.scss

@@ -5,4 +5,5 @@ body {
   background-size: 100%;
   background: linear-gradient(to left top, #2c0033 0%, #000000 100%) no-repeat fixed;
   color: #d3d3d3;
+  margin: 0;
 }