From defefa0c759147dbba25656395bb2058994dcd2f Mon Sep 17 00:00:00 2001 From: MIGHTY1o1 Date: Sat, 9 Nov 2024 12:54:25 +0530 Subject: [PATCH] add forest game --- src/app/app.routes.ts | 5 + .../forest-explorer.component.css | 79 ++++++++++++ .../forest-explorer.component.html | 31 +++++ .../forest-explorer.component.spec.ts | 23 ++++ .../forest-explorer.component.ts | 113 ++++++++++++++++++ 5 files changed, 251 insertions(+) create mode 100644 src/app/components/forest-explorer/forest-explorer.component.css create mode 100644 src/app/components/forest-explorer/forest-explorer.component.html create mode 100644 src/app/components/forest-explorer/forest-explorer.component.spec.ts create mode 100644 src/app/components/forest-explorer/forest-explorer.component.ts diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index 0cfb1a1..1defb75 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -28,6 +28,7 @@ import { VisualStackQueueComponent } from './components/visual-stack-queue/visua import { MazeRunnerVisualizerComponent } from './components/maze-runner-visualizer/maze-runner-visualizer.component'; import { TreasureHuntVisualizerComponent } from './components/treasure-hunt-visualizer/treasure-hunt-visualizer.component'; import { SortingComponent } from './components/sorting-v/sorting.component'; +import { ForestExplorerComponent } from './components/forest-explorer/forest-explorer.component'; export const routes: Routes = [ { @@ -126,6 +127,10 @@ export const routes: Routes = [ path: 'tresure', component: TreasureHuntVisualizerComponent, }, + { + path: 'forest', + component: ForestExplorerComponent, + }, // { // path: 'algo-compare', // component: AlgorithmComparisonComponent, diff --git a/src/app/components/forest-explorer/forest-explorer.component.css b/src/app/components/forest-explorer/forest-explorer.component.css new file mode 100644 index 0000000..a5d5127 --- /dev/null +++ b/src/app/components/forest-explorer/forest-explorer.component.css @@ -0,0 +1,79 @@ +.forest-explorer-container { + width: 80%; + margin: auto; + padding: 20px; + background-color: #f9f9f9; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.title { + text-align: center; + font-size: 2em; + margin-bottom: 20px; +} + +.controls { + display: flex; + gap: 10px; + align-items: center; + justify-content: center; + margin-bottom: 20px; +} + +.buttons { + display: flex; + gap: 10px; + justify-content: center; + margin-bottom: 20px; +} + +.grid { + display: flex; + flex-direction: column; + gap: 5px; + margin: auto; +} + +.grid-row { + display: flex; + gap: 5px; +} + +.grid-cell { + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + background-color: white; + border: 1px solid #ddd; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +.grid-cell.start { + background-color: #00f; + color: white; +} + +.grid-cell.visited { + background-color: #b2fab4; +} + +.grid-cell.rare { + background-color: #ffb6c1; +} + +.stats { + margin-top: 20px; + padding: 10px; + background-color: #f1f1f1; + border-radius: 5px; +} + +.stats h3 { + text-align: center; + margin-bottom: 10px; +} diff --git a/src/app/components/forest-explorer/forest-explorer.component.html b/src/app/components/forest-explorer/forest-explorer.component.html new file mode 100644 index 0000000..02beea1 --- /dev/null +++ b/src/app/components/forest-explorer/forest-explorer.component.html @@ -0,0 +1,31 @@ +
+

Forest Explorer

+
+ + + + +
+
+ + +
+
+
+
+ {{ cell }} +
+
+
+
+

Exploration Statistics

+

Rare Plants Found: {{ stats.plantsFound }}

+

Cells Explored: {{ stats.cellsExplored }}

+
+
\ No newline at end of file diff --git a/src/app/components/forest-explorer/forest-explorer.component.spec.ts b/src/app/components/forest-explorer/forest-explorer.component.spec.ts new file mode 100644 index 0000000..6cd119e --- /dev/null +++ b/src/app/components/forest-explorer/forest-explorer.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ForestExplorerComponent } from './forest-explorer.component'; + +describe('ForestExplorerComponent', () => { + let component: ForestExplorerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ForestExplorerComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ForestExplorerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/forest-explorer/forest-explorer.component.ts b/src/app/components/forest-explorer/forest-explorer.component.ts new file mode 100644 index 0000000..83e3fb2 --- /dev/null +++ b/src/app/components/forest-explorer/forest-explorer.component.ts @@ -0,0 +1,113 @@ +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +interface Position { + row: number; + col: number; +} + +@Component({ + selector: 'app-forest-explorer', + templateUrl: './forest-explorer.component.html', + styleUrls: ['./forest-explorer.component.css'], + encapsulation: ViewEncapsulation.None, + imports: [CommonModule], + standalone: true, +}) +export class ForestExplorerComponent implements OnInit { + gridSize = { rows: 8, cols: 8 }; + grid: string[][] = []; + exploring = false; + startPos: Position = { row: 0, col: 0 }; + visitedCells = new Set(); + speed = 300; + stats = { plantsFound: 0, cellsExplored: 0 }; + + treeTypes = { + PINE: '๐ŸŒฒ', + OAK: '๐ŸŒณ', + EMPTY: 'ยท', + RARE: '๐ŸŒบ', + }; + + ngOnInit(): void { + this.initializeForest(); + } + + initializeForest(): void { + this.grid = Array.from({ length: this.gridSize.rows }, () => + Array.from({ length: this.gridSize.cols }, () => this.getRandomTreeType()) + ); + this.visitedCells.clear(); + this.stats = { plantsFound: 0, cellsExplored: 0 }; + } + + getRandomTreeType(): string { + const random = Math.random(); + if (random < 0.1) return this.treeTypes.RARE; + if (random < 0.4) return this.treeTypes.PINE; + if (random < 0.7) return this.treeTypes.OAK; + return this.treeTypes.EMPTY; + } + + async explore(row: number, col: number): Promise { + if (this.exploring) return; + this.exploring = true; + const queue: Position[] = [{ row, col }]; + + while (queue.length > 0) { + const { row, col } = queue.shift()!; + if (this.isOutOfBounds(row, col) || this.visitedCells.has(`${row},${col}`)) { + continue; + } + + this.visitedCells.add(`${row},${col}`); + this.stats.cellsExplored++; + if (this.grid[row][col] === this.treeTypes.RARE) { + this.stats.plantsFound++; + } + await this.delay(this.speed); + + const directions = [ + [-1, 0], + [1, 0], + [0, -1], + [0, 1], + ]; + directions.forEach(([dr, dc]) => queue.push({ row: row + dr, col: col + dc })); + } + this.exploring = false; + } + + isOutOfBounds(row: number, col: number): boolean { + return row < 0 || row >= this.gridSize.rows || col < 0 || col >= this.gridSize.cols; + } + + delay(ms: number): Promise { + return new Promise((resolve) => setTimeout(resolve, ms)); + } + + handleCellClick(row: number, col: number): void { + if (!this.exploring) { + this.startPos = { row, col }; + this.visitedCells.clear(); + this.stats = { plantsFound: 0, cellsExplored: 0 }; + } + } + + setGridSize(event: Event): void { + const target = event.target as HTMLInputElement; + if (target) { + this.gridSize.rows = parseInt(target.value, 10); + this.gridSize.cols = parseInt(target.value, 10); + this.initializeForest(); + } + } + + setSpeed(event: Event): void { + const target = event.target as HTMLInputElement; + if (target) { + this.speed = parseInt(target.value, 10); + } + } +}