added nebular theme

package-lock.json

@@ -9,6 +9,8 @@
       "version": "0.0.1",
       "hasInstallScript": true,
       "dependencies": {
+        "@angular/animations": "13.3.11",
+        "@angular/cdk": "^13.0.0",
         "@angular/common": "13.3.11",
         "@angular/compiler": "13.3.11",
         "@angular/core": "13.3.11",
@@ -17,6 +19,9 @@
         "@angular/platform-browser": "13.3.11",
         "@angular/platform-browser-dynamic": "13.3.11",
         "@angular/router": "13.3.11",
+        "@nebular/eva-icons": "9.0.3",
+        "@nebular/theme": "9.0.3",
+        "eva-icons": "^1.1.2",
         "rxjs": "7.5.5",
         "tslib": "^2.1.0",
         "zone.js": "~0.11.5"
@@ -34,6 +39,7 @@
         "@ngx-translate/core": "14.0.0",
         "@ngx-translate/http-loader": "7.0.0",
         "@playwright/test": "1.20.2",
+        "@schematics/angular": "13.3.1",
         "@types/jasmine": "3.10.3",
         "@types/jasminewd2": "2.0.10",
         "@types/node": "17.0.23",
@@ -482,6 +488,42 @@
         "typescript": "*"
       }
     },
+    "node_modules/@angular/animations": {
+      "version": "13.3.11",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.3.11.tgz",
+      "integrity": "sha512-KE/3RuvixHIk9YTSwaUsezsUm9Ig9Y8rZMpHOT/8bRtzPiJ5ld2GnDHjrJgyZn7TdoP4wz4YCta5eC4ycu+KCw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "13.3.11"
+      }
+    },
+    "node_modules/@angular/cdk": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
+      "integrity": "sha512-XCuCbeuxWFyo3EYrgEYx7eHzwl76vaWcxtWXl00ka8d+WAOtMQ6Tf1D98ybYT5uwF9889fFpXAPw98mVnlo3MA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "optionalDependencies": {
+        "parse5": "^5.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": "^13.0.0 || ^14.0.0-0",
+        "@angular/core": "^13.0.0 || ^14.0.0-0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@angular/cdk/node_modules/parse5": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+      "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+      "optional": true
+    },
     "node_modules/@angular/cli": {
       "version": "13.3.1",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.1.tgz",
@@ -3304,6 +3346,34 @@
         "node": ">= 10.0.0"
       }
     },
+    "node_modules/@nebular/eva-icons": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/@nebular/eva-icons/-/eva-icons-9.0.3.tgz",
+      "integrity": "sha512-aFvMcpyobHCviZKiQx4U3eH/zcj/WkgPuDX1XBDs5RVotlgZ4fcAWql/KbS26W74i6n8rUec6I9EkzxXBU9psw==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@nebular/theme": "9.0.3",
+        "eva-icons": "^1.1.2"
+      }
+    },
+    "node_modules/@nebular/theme": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-9.0.3.tgz",
+      "integrity": "sha512-ILUfVkpTeVBg5H3Pr/HKnItdFEIXfHfYO2HJA07mhavuKw0gupYw2v6Ox+nxoww8VTXz8svLKTIta7YYBcpjzg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^13.0.0",
+        "@angular/cdk": "^13.0.0",
+        "@angular/common": "^13.0.0",
+        "@angular/core": "^13.0.0",
+        "@angular/router": "^13.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@ngtools/webpack": {
       "version": "13.3.1",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.3.1.tgz",
@@ -10529,6 +10599,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/eva-icons": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/eva-icons/-/eva-icons-1.1.3.tgz",
+      "integrity": "sha512-QBSEWNbEx1H0numXP1qgxKVCZHonRaky5ft4pGzQBcO4cy7mEja6TuJ8rc7BqX2pmkvetVQWKDH+DK/8y7GTag=="
+    },
     "node_modules/eventemitter-asyncresource": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/eventemitter-asyncresource/-/eventemitter-asyncresource-1.0.0.tgz",
@@ -21559,6 +21634,31 @@
         "@typescript-eslint/experimental-utils": "5.11.0"
       }
     },
+    "@angular/animations": {
+      "version": "13.3.11",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.3.11.tgz",
+      "integrity": "sha512-KE/3RuvixHIk9YTSwaUsezsUm9Ig9Y8rZMpHOT/8bRtzPiJ5ld2GnDHjrJgyZn7TdoP4wz4YCta5eC4ycu+KCw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@angular/cdk": {
+      "version": "13.3.9",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
+      "integrity": "sha512-XCuCbeuxWFyo3EYrgEYx7eHzwl76vaWcxtWXl00ka8d+WAOtMQ6Tf1D98ybYT5uwF9889fFpXAPw98mVnlo3MA==",
+      "requires": {
+        "parse5": "^5.0.0",
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "parse5": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
+          "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
+          "optional": true
+        }
+      }
+    },
     "@angular/cli": {
       "version": "13.3.1",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-13.3.1.tgz",
@@ -23589,6 +23689,22 @@
         "tmp-promise": "^3.0.2"
       }
     },
+    "@nebular/eva-icons": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/@nebular/eva-icons/-/eva-icons-9.0.3.tgz",
+      "integrity": "sha512-aFvMcpyobHCviZKiQx4U3eH/zcj/WkgPuDX1XBDs5RVotlgZ4fcAWql/KbS26W74i6n8rUec6I9EkzxXBU9psw==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@nebular/theme": {
+      "version": "9.0.3",
+      "resolved": "https://registry.npmjs.org/@nebular/theme/-/theme-9.0.3.tgz",
+      "integrity": "sha512-ILUfVkpTeVBg5H3Pr/HKnItdFEIXfHfYO2HJA07mhavuKw0gupYw2v6Ox+nxoww8VTXz8svLKTIta7YYBcpjzg==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "13.3.1",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.3.1.tgz",
@@ -29092,6 +29208,11 @@
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "dev": true
     },
+    "eva-icons": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/eva-icons/-/eva-icons-1.1.3.tgz",
+      "integrity": "sha512-QBSEWNbEx1H0numXP1qgxKVCZHonRaky5ft4pGzQBcO4cy7mEja6TuJ8rc7BqX2pmkvetVQWKDH+DK/8y7GTag=="
+    },
     "eventemitter-asyncresource": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/eventemitter-asyncresource/-/eventemitter-asyncresource-1.0.0.tgz",

package.json

@@ -45,6 +45,8 @@
     "lint": "ng lint"
   },
   "dependencies": {
+    "@angular/animations": "13.3.11",
+    "@angular/cdk": "^13.0.0",
     "@angular/common": "13.3.11",
     "@angular/compiler": "13.3.11",
     "@angular/core": "13.3.11",
@@ -53,6 +55,9 @@
     "@angular/platform-browser": "13.3.11",
     "@angular/platform-browser-dynamic": "13.3.11",
     "@angular/router": "13.3.11",
+    "@nebular/eva-icons": "9.0.3",
+    "@nebular/theme": "9.0.3",
+    "eva-icons": "^1.1.2",
     "rxjs": "7.5.5",
     "tslib": "^2.1.0",
     "zone.js": "~0.11.5"
@@ -70,6 +75,7 @@
     "@ngx-translate/core": "14.0.0",
     "@ngx-translate/http-loader": "7.0.0",
     "@playwright/test": "1.20.2",
+    "@schematics/angular": "13.3.1",
     "@types/jasmine": "3.10.3",
     "@types/jasminewd2": "2.0.10",
     "@types/node": "17.0.23",

src/app/app.component.html

@@ -1 +1,15 @@
-<app-board></app-board>
+<nb-layout>
+
+  <nb-layout-header fixed>
+  <!-- Insert header here -->
+  </nb-layout-header>
+
+  <nb-layout-column>
+    <app-board></app-board>
+  </nb-layout-column>
+
+  <nb-layout-footer fixed>
+  <!-- Insert footer here -->
+  </nb-layout-footer>
+
+</nb-layout>

src/app/app.module.ts

@@ -14,6 +14,9 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 
 import { AppComponent } from './app.component';
 import { BoardModule } from './board/board.module';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NbThemeModule, NbLayoutModule } from '@nebular/theme';
+import { NbEvaIconsModule } from '@nebular/eva-icons';
 
 
 // AoT requires an exported function for factories
@@ -34,7 +37,11 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
         useFactory: httpLoaderFactory,
         deps: [HttpClient]
       }
-    })
+    }),
+    BrowserAnimationsModule,
+    NbThemeModule.forRoot({ name: 'cosmic' }),
+    NbLayoutModule,
+    NbEvaIconsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/board/board.component.html

@@ -2,7 +2,7 @@
   <h1>Tic-Tac-Toe</h1>
 </section>
 <section w-full>
-    <p><button (click)="resetGame()">Neues Spiel!<br /></button><br /></p>
+    <p><button nbButton outline status="danger" (click)="resetGame()">Neues Spiel!<br /></button><br /></p>
     <h1>current player: {{ player }}</h1>
     <h2 *ngIf="winner">Gewinner: {{ winner }}<br /></h2><br />
   </section>

src/app/board/board.module.ts

@@ -4,10 +4,11 @@ import { CommonModule } from '@angular/common';
 import { BoardComponent } from './board.component';
 import { SharedModule } from '../shared/shared.module';
 import { SquareModule } from '../square/square.module';
+import { NbButtonModule } from '@nebular/theme';
 
 @NgModule({
   declarations: [BoardComponent],
-  imports: [CommonModule, SharedModule, SquareModule],
+  imports: [CommonModule, SharedModule, SquareModule, NbButtonModule],
   exports: [BoardComponent]
 })
 export class BoardModule {}

src/app/square/square.component.ts

@@ -4,7 +4,9 @@ import { Component, Input, OnInit } from '@angular/core';
   selector: 'app-square',
   template: `
     
-      <button>{{ value }}</button>
+      <button nbButton *ngIf="!value">{{ value }}</button>
+      <button nbButton hero status="success" *ngIf="value == 'X'">{{ value }}</button>
+      <button nbButton hero status="info" *ngIf="value == 'O'">{{ value }}</button>
   `,
   styles: [
      `
@@ -16,6 +18,7 @@ import { Component, Input, OnInit } from '@angular/core';
      button {
        width: 100%;
        height: 200px;
+       font-size: 5em !important;
 
      }
     `

src/app/square/square.module.ts

@@ -3,10 +3,11 @@ import { CommonModule } from '@angular/common';
 
 import { SharedModule } from '../shared/shared.module';
 import { SquareComponent } from '../square/square.component';
+import { NbButtonModule } from '@nebular/theme';
 
 @NgModule({
   declarations: [SquareComponent],
-  imports: [CommonModule, SharedModule],
+  imports: [CommonModule, SharedModule, NbButtonModule],
   exports: [SquareComponent]
 })
 export class SquareModule {}

src/styles.scss

@@ -1,3 +1,10 @@
+@use 'themes' as *;
+
+@use '@nebular/theme/styles/globals' as *;
+
+@include nb-install() {
+  @include nb-theme-global();
+};
 /* You can add global styles to this file, and also import other style files */
 html, body {
   margin: 0;

src/themes.scss

@@ -0,0 +1,19 @@
+@forward '@nebular/theme/styles/theming';
+@use '@nebular/theme/styles/theming' as *;
+@use '@nebular/theme/styles/themes/cosmic';
+
+$nb-themes: nb-register-theme((
+
+  // add your variables here like:
+
+  // color-primary-100: #f2f6ff,
+  // color-primary-200: #d9e4ff,
+  // color-primary-300: #a6c1ff,
+  // color-primary-400: #598bff,
+  // color-primary-500: #3366ff,
+  // color-primary-600: #274bdb,
+  // color-primary-700: #1a34b8,
+  // color-primary-800: #102694,
+  // color-primary-900: #091c7a,
+
+), cosmic, cosmic);