diff --git a/src/app/app.component.html b/src/app/app.component.html
index a1b0434..6a27935 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1 @@
-
-
-
-
+
\ No newline at end of file
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 89a6d1f..193f5cc 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,3 +1,15 @@
-:host {
+p {
+ font-family: Lato;
+ }
-}
\ No newline at end of file
+ h1 {
+
+ transition: color .2s;
+
+ }
+ h1 :leave {
+ transition: display 4s;
+ }
+ .header {
+ margin-top: 100px;
+ }
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 60a6711..11757b1 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -13,14 +13,16 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './app.component';
-import { SquareComponent } from './square/square.component';
+import { BoardModule } from './board/board.module';
+
// AoT requires an exported function for factories
const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@NgModule({
- declarations: [AppComponent, SquareComponent],
+ declarations: [AppComponent],
imports: [
+ BoardModule,
BrowserModule,
FormsModule,
HttpClientModule,
diff --git a/src/app/board/board.component.html b/src/app/board/board.component.html
new file mode 100644
index 0000000..e3dbd6c
--- /dev/null
+++ b/src/app/board/board.component.html
@@ -0,0 +1,12 @@
+
+
+
+ current player: {{ player }}
+ Gewinner: {{ winner }}
+
+
diff --git a/src/app/board/board.component.scss b/src/app/board/board.component.scss
new file mode 100644
index 0000000..8ca2632
--- /dev/null
+++ b/src/app/board/board.component.scss
@@ -0,0 +1,36 @@
+// :host {
+
+// display: grid;
+// grid-template-columns: 200px 200px 200px;
+// grid-gap: 0px;
+
+// }
+
+app-square {
+
+ border: 2px black solid;
+
+
+
+
+}
+
+section {
+ width: 600px;
+ display: flex;
+ justify-content: space-evenly;
+ align-content: space-between;
+ align-items: center;
+ margin: 7% auto 50px auto;
+ flex-wrap: wrap;
+ }
+
+ .square-container {
+ flex: 0 0 32%;
+
+ }
+
+ h2 {
+ color: greenyellow;
+ background-color: black;
+ }
\ No newline at end of file
diff --git a/src/app/board/board.component.spec.ts b/src/app/board/board.component.spec.ts
new file mode 100644
index 0000000..734cfc3
--- /dev/null
+++ b/src/app/board/board.component.spec.ts
@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BoardComponent } from './board.component';
+
+describe('BoardComponent', () => {
+ let component: BoardComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [BoardComponent],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BoardComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+
+ it('left top right horizontal test', () => {
+ component.playerPress(0);
+ component.playerPress(3);
+ component.playerPress(1);
+ component.playerPress(4);
+ component.playerPress(2);
+ expect(component.calculateWinner()).not.toBe(null);
+ });
+
+ it('left top bottom right diagonal test', () => {
+ component.playerPress(0);
+ component.playerPress(1);
+ component.playerPress(4);
+ component.playerPress(5);
+ component.playerPress(8);
+ expect(component.calculateWinner()).not.toBe(null);
+ });
+
+
+
+});
diff --git a/src/app/board/board.component.ts b/src/app/board/board.component.ts
new file mode 100644
index 0000000..47f6b99
--- /dev/null
+++ b/src/app/board/board.component.ts
@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-board',
+ templateUrl: './board.component.html',
+ styleUrls: ['./board.component.scss'],
+})
+export class BoardComponent implements OnInit {
+ winner: string;
+ draw: boolean;
+ xIsNext: boolean;
+ fields: any[];
+
+ constructor() {}
+
+ ngOnInit(): void {
+ this.resetGame();
+ }
+
+ resetGame() {
+ this.winner = null;
+ this.draw = false;
+ this.xIsNext = true;
+ this.fields = Array(9).fill(null);
+ }
+
+ get player() {
+ return this.xIsNext ? 'X' : 'O';
+ }
+
+ playerPress(i: number) {
+ if(this.winner != null) {
+ this.resetGame();
+ return;
+ }
+ if (!this.fields[i]) {
+ this.fields.splice(i, 1, this.player);
+
+ this.xIsNext = !this.xIsNext;
+ this.calculateWinner();
+ }
+ }
+
+ calculateWinner() {
+ const winners = [
+ [0, 1, 2],
+
+ [3, 4, 5],
+
+ [6, 7, 8],
+
+ [0, 3, 6],
+
+ [2, 4, 7],
+
+ [2, 5, 8],
+
+ [0, 4, 8],
+
+ [2, 4, 6],
+ ];
+ for (let i = 0; i < winners.length; i++) {
+ const [a, b, c] = winners[i];
+
+ if (
+ this.fields[a] &&
+ this.fields[a] === this.fields[b] &&
+ this.fields[a] === this.fields[c]
+ ) {
+ this.winner = this.fields[a];
+ return this.fields[a];
+ }
+ }
+ return null;
+ }
+}
diff --git a/src/app/board/board.module.ts b/src/app/board/board.module.ts
new file mode 100644
index 0000000..6659efa
--- /dev/null
+++ b/src/app/board/board.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BoardComponent } from './board.component';
+import { SharedModule } from '../shared/shared.module';
+import { SquareModule } from '../square/square.module';
+
+@NgModule({
+ declarations: [BoardComponent],
+ imports: [CommonModule, SharedModule, SquareModule],
+ exports: [BoardComponent]
+})
+export class BoardModule {}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 4023a06..b638e6a 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,7 +1,7 @@
diff --git a/src/app/square/square.component.ts b/src/app/square/square.component.ts
index d074b4f..54ebf1b 100644
--- a/src/app/square/square.component.ts
+++ b/src/app/square/square.component.ts
@@ -3,11 +3,22 @@ import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-square',
template: `
-
+
-
`,
styles: [
+ `
+ :host {
+ border: 1px grey solid;
+ height: 200px;
+ }
+
+ button {
+ width: 100%;
+ height: 200px;
+
+ }
+ `
]
})
export class SquareComponent {
diff --git a/src/app/square/square.module.ts b/src/app/square/square.module.ts
new file mode 100644
index 0000000..fff8406
--- /dev/null
+++ b/src/app/square/square.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SharedModule } from '../shared/shared.module';
+import { SquareComponent } from '../square/square.component';
+
+@NgModule({
+ declarations: [SquareComponent],
+ imports: [CommonModule, SharedModule],
+ exports: [SquareComponent]
+})
+export class SquareModule {}