diff --git a/web/angular.json b/web/angular.json
index 6efbadb37e60f153d0c3e830f24fc0bff55be7d6..bc0e6e3c00d7f7fe60fc4cfebe48df634ded4aef 100644
--- a/web/angular.json
+++ b/web/angular.json
@@ -27,6 +27,7 @@
"src/assets"
],
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
@@ -94,6 +95,7 @@
"src/assets"
],
"styles": [
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": []
diff --git a/web/package-lock.json b/web/package-lock.json
index 0ad6c6546b590f1afcc48487db1374d978920d8c..3060609d83d0bd09c2eef6e31f8444ad6db0a403 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -143,6 +143,23 @@
"tslib": "^2.1.0"
}
},
+ "@angular/cdk": {
+ "version": "12.0.2",
+ "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.0.2.tgz",
+ "integrity": "sha512-1JGayyUJmwaul5YSEgb780aWxk+MLVG5FakVaxz5NtbPZx19ZyOuZqytCh5js11LsBDipF5/kirYhJPBFlMbWQ==",
+ "requires": {
+ "parse5": "^5.0.0",
+ "tslib": "^2.1.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": "12.0.0",
"resolved": "https://registry.npmjs.org/@angular/cli/-/cli-12.0.0.tgz",
@@ -314,6 +331,14 @@
"tslib": "^2.1.0"
}
},
+ "@angular/material": {
+ "version": "12.0.2",
+ "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.0.2.tgz",
+ "integrity": "sha512-jTH53w4iVNk+3K5ciFyHeRhNNtV6TzeuNTSELeme4l3t5FP3VqFTdE56Q55MrV2RMIzDKLYEpiqSiQf+8ZuGSA==",
+ "requires": {
+ "tslib": "^2.1.0"
+ }
+ },
"@angular/platform-browser": {
"version": "12.0.0",
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.0.0.tgz",
diff --git a/web/package.json b/web/package.json
index 8f93084ba6bd4623e353a573d34f425341b99742..cb01b73c2e8b17b347bb8ce36ebcec65266e7fec 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,10 +11,12 @@
"private": true,
"dependencies": {
"@angular/animations": "~12.0.0",
+ "@angular/cdk": "^12.0.2",
"@angular/common": "~12.0.0",
"@angular/compiler": "~12.0.0",
"@angular/core": "~12.0.0",
"@angular/forms": "~12.0.0",
+ "@angular/material": "^12.0.2",
"@angular/platform-browser": "~12.0.0",
"@angular/platform-browser-dynamic": "~12.0.0",
"@angular/router": "~12.0.0",
diff --git a/web/src/app/app.module.ts b/web/src/app/app.module.ts
index d3fe87d9644688c320cfc64b85e20a361f82e268..7a52b6b7c29cd437fceb5ecbe0d3cff1b077b785 100644
--- a/web/src/app/app.module.ts
+++ b/web/src/app/app.module.ts
@@ -1,6 +1,7 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
+import { MatTableModule } from '@angular/material/table';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@@ -17,6 +18,7 @@ import { CreateTeamFormComponent } from './components/create-team-form/create-te
import { RecruitNewPlayerFormComponent } from './components/recruit-new-player-form/recruit-new-player-form.component';
import { RecruitVeteranPlayerFormComponent } from './components/recruit-veteran-player-form/recruit-veteran-player-form.component';
import { UpdateGameWinnerFormComponent } from './components/update-game-winner-form/update-game-winner-form.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
@@ -38,7 +40,9 @@ import { UpdateGameWinnerFormComponent } from './components/update-game-winner-f
imports: [
BrowserModule,
AppRoutingModule,
- FormsModule
+ FormsModule,
+ MatTableModule,
+ BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/web/src/app/components/players/players.component.css b/web/src/app/components/players/players.component.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..854f0dbc01f042f68806e1a4d54738d9aca5bef8 100644
--- a/web/src/app/components/players/players.component.css
+++ b/web/src/app/components/players/players.component.css
@@ -0,0 +1,3 @@
+.highlight{
+ background: #679cec; /* green */
+}
diff --git a/web/src/app/components/players/players.component.html b/web/src/app/components/players/players.component.html
index 6ebce1a08243e748f547850bd133c7f140aea518..889119323b0dffacbe02f2cfabd5976789f7ac05 100644
--- a/web/src/app/components/players/players.component.html
+++ b/web/src/app/components/players/players.component.html
@@ -1,8 +1,12 @@
<h2>Players</h2>
-<table class="playerList">
- <tr *ngFor="let player of players">
- <span class="badge">{{player.id}}</span>
- <th>{{player.name}}</th>
- </tr>
+<table mat-table [dataSource]="players">
+ <ng-container matColumnDef="name">
+ <th mat-header-cell *matHeaderCellDef> Name </th>
+ <td mat-cell *matCellDef="let player"> {{player.name}} </td>
+ </ng-container>
+ <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+ <tr mat-row *matRowDef="let row; columns: columnsToDisplay"
+ [ngClass]="{'highlight': selectedRowIndex == row.id && highlightSelected}"
+ (click)="highlight(row)"></tr>
</table>
diff --git a/web/src/app/components/players/players.component.ts b/web/src/app/components/players/players.component.ts
index 49e68b7bbdf11bae7b4f79fa491083fb70b5cf14..d26ceb4963dc86ced6c99cf71e600388485106f8 100644
--- a/web/src/app/components/players/players.component.ts
+++ b/web/src/app/components/players/players.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { Player } from 'src/app/models/player';
@Component({
@@ -10,9 +10,25 @@ export class PlayersComponent implements OnInit {
@Input() players!: Player[];
+ @Input() highlightSelected: boolean = false;
+
+ @Output() selectRowEvent: EventEmitter<number> = new EventEmitter();
+
+ columnsToDisplay = ['name'];
+
+ selectedRowIndex: number = -1;
+
constructor() { }
ngOnInit(): void {
}
+ highlight(row: Player): void {
+ if (this.selectedRowIndex == row.id) {
+ this.selectedRowIndex = -1;
+ } else {
+ this.selectedRowIndex = row.id
+ }
+ this.selectRowEvent.emit(this.selectedRowIndex);
+ }
}
diff --git a/web/src/app/services/player.service.ts b/web/src/app/services/player.service.ts
index 517cd1e54644b76134bdb8e5f84132f8b4a28471..0f54f9bddf31f0cccb33dcc78ec6f8e05e730ed5 100644
--- a/web/src/app/services/player.service.ts
+++ b/web/src/app/services/player.service.ts
@@ -49,4 +49,8 @@ export class PlayerService {
recruitVeteranPlayer(player: Player, team: Team) : void {
}
+
+ firePlayer(player: Player): void {
+
+ }
}
diff --git a/web/src/index.html b/web/src/index.html
index 52f51d76c9b32bc48f4d697739246918965c07c9..7948271c2370708e7443082a0f16374439b3ad3f 100644
--- a/web/src/index.html
+++ b/web/src/index.html
@@ -6,8 +6,11 @@
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
+ <link rel="preconnect" href="https://fonts.gstatic.com">
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
-<body>
+<body class="mat-typography">
<app-root></app-root>
</body>
</html>
diff --git a/web/src/styles.css b/web/src/styles.css
index 90d4ee0072ce3fc41812f8af910219f9eea3c3de..7e7239a2eeea2a25f548d2e04302921d28c2a27e 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -1 +1,4 @@
/* You can add global styles to this file, and also import other style files */
+
+html, body { height: 100%; }
+body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }