david.tahir/AngularTicTacToe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added nebular theme

Browse Source
This commit is contained in:
OezmenK
2022-06-28 13:34:24 +02:00
parent 2e0c68a636
commit bc829346ae
10 changed files with 185 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
package-lock.json generated
View File

@@ -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",

6
package.json
View File

@@ -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",

14
src/app/app.component.html
View File

@@ -1 +1,15 @@
<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>

9
src/app/app.module.ts
View File

@@ -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]

2
src/app/board/board.component.html
View File

@@ -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>

3
src/app/board/board.module.ts
View File

@@ -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 {}

5
src/app/square/square.component.ts
View File

@@ -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;
}
`

3
src/app/square/square.module.ts
View File

@@ -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 {}

7
src/styles.scss
View File

@@ -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;

19
src/themes.scss Normal file
View File

@@ -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);