Manikandan/features/init (#4)

* initial commit

* init

* init

* score updated

* updated leaderboard

---------

Co-authored-by: Manikandan Dhanen <manikandan.dhanen@mastec.com>

src/app/components/snake-game/snake-game.component.html

@@ -1,16 +1,46 @@
 <div class="container">
-  <mat-card class="snake-game-card">
-    <mat-card-header class="header-center">Snake Game</mat-card-header>
-    <mat-card-content>
-      <div class="game-container">
-        <div class="score">Score: {{ foodEaten }}</div>
-        <canvas #gameCanvas width="400" height="400"></canvas>
-      </div>
-    </mat-card-content>
-    <mat-card-actions>
-      <button mat-raised-button color="primary" (click)="startGame()">
-        Start Game
-      </button>
-    </mat-card-actions>
-  </mat-card>
+  <div class="left-panel">
+    <mat-card class="snake-game-card">
+      <mat-card-header class="header-center">Snake Game</mat-card-header>
+      <mat-card-content>
+        <div class="game-container">
+          <div class="score">Score: {{ foodEaten }}</div>
+          <canvas #gameCanvas width="400" height="400"></canvas>
+        </div>
+      </mat-card-content>
+      <mat-card-actions>
+        <button mat-raised-button color="primary" (click)="startGame()">
+          Start Game
+        </button>
+      </mat-card-actions>
+    </mat-card>
+  </div>
+
+  <div class="right-panel">
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Enter your name" [(ngModel)]="userName" />
+    </mat-form-field>
+
+    <mat-card class="leaderboard-card">
+      <h3 class="leaderboard-header">Leaderboard</h3>
+
+      <table mat-table [dataSource]="leaderboard" class="mat-elevation-z8">
+        <ng-container matColumnDef="index">
+          <th mat-header-cell *matHeaderCellDef>SI.No</th>
+          <td mat-cell *matCellDef="let player; let i = index">{{ i + 1 }}</td>
+        </ng-container>
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef>Name</th>
+          <td mat-cell *matCellDef="let player">{{ player.name }}</td>
+        </ng-container>
+        <ng-container matColumnDef="score">
+          <th mat-header-cell *matHeaderCellDef>Score</th>
+          <td mat-cell *matCellDef="let player">{{ player.score }}</td>
+        </ng-container>
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+      </table>
+    </mat-card>
+  </div>
 </div>

src/app/components/snake-game/snake-game.component.scss

@@ -1,12 +1,31 @@
 .container {
   height: 100vh;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
 }
 
+.left-panel {
+  flex: 0 0 50%;
+  margin-left: 10%;
+}
+
+.leaderboard-header {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.right-panel {
+  flex: 0 0 30%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-right: 5%;
+}
+
 .snake-game-card {
-  width: 600px;
+  width: 100%;
 }
 
 .header-center {
@@ -42,3 +61,13 @@ mat-card-actions {
   font-weight: bold;
   color: red;
 }
+
+.leaderboard-card {
+  width: 100%;
+  margin-top: 20px;
+}
+
+mat-form-field {
+  width: 100%;
+  margin-bottom: 20px;
+}

src/app/components/snake-game/snake-game.component.ts

@@ -7,16 +7,34 @@ import {
 } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatButtonModule } from '@angular/material/button';
+import { MatTableModule } from '@angular/material/table';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
 
 interface Position {
   x: number;
   y: number;
 }
 
+interface Player {
+  name: string;
+  score: number;
+}
+
 @Component({
   selector: 'snake-game',
   standalone: true,
-  imports: [MatCardModule, MatButtonModule],
+  imports: [
+    MatCardModule,
+    MatButtonModule,
+    MatTableModule,
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    CommonModule,
+  ],
   templateUrl: './snake-game.component.html',
   styleUrls: ['./snake-game.component.scss'],
 })
@@ -35,12 +53,16 @@ export class SnakeGameComponent implements OnInit {
   private speedIncreaseThreshold = 5;
   private snakeSize = 15;
   private foodSize = 10;
+  userName = '';
+  leaderboard: Player[] = [];
+  displayedColumns: string[] = ['index', 'name', 'score'];
 
   constructor() {}
 
   ngOnInit(): void {
     this.ctx = this.gameCanvas.nativeElement.getContext('2d')!;
     this.resetGame();
+    this.loadLeaderboard();
   }
 
   @HostListener('window:keydown', ['$event'])
@@ -64,6 +86,10 @@ export class SnakeGameComponent implements OnInit {
 
   startGame() {
     if (this.isGameRunning) return;
+    if (!this.userName.trim()) {
+      alert('Please enter your name to start the game.');
+      return;
+    }
     this.resetGame();
     this.isGameRunning = true;
     this.setGameSpeed(this.initialSpeed);
@@ -96,6 +122,8 @@ export class SnakeGameComponent implements OnInit {
       this.isGameRunning = false;
       clearInterval(this.gameInterval);
       alert('Game Over!');
+      this.saveScore();
+      this.userName = '';
       return;
     }
 
@@ -171,4 +199,24 @@ export class SnakeGameComponent implements OnInit {
       this.foodSize
     );
   }
+
+  private saveScore() {
+    const player: Player = { name: this.userName, score: this.foodEaten };
+    const leaderboard = this.loadLeaderboard();
+    leaderboard.push(player);
+    localStorage.setItem('leaderboard', JSON.stringify(leaderboard));
+    this.leaderboard = this.getSortedLeaderboard(leaderboard);
+  }
+
+  private loadLeaderboard(): Player[] {
+    const leaderboard = localStorage.getItem('leaderboard');
+    if (leaderboard) {
+      return this.getSortedLeaderboard(JSON.parse(leaderboard));
+    }
+    return [];
+  }
+
+  private getSortedLeaderboard(leaderboard: Player[]): Player[] {
+    return leaderboard.sort((a, b) => b.score - a.score).slice(0, 10);
+  }
 }