Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Refactor controls UI, styles; bump deps

Browse Source 
Consolidate and refactor component styling and markup: remove component-specific SCSS for Conway's Game of Life and Pathfinding and drop their styleUrls, rename per-component .controls blocks to .controls-panel in pathfinding and sorting templates, and move the outer container class onto the mat-card. Add global styles in src/styles.scss for .controls-panel, grid/form sizing, container max-width, and sorting visualization (bar states and transitions). Also update package-lock.json with minor/patch dependency bumps for Angular CLI/devkit/schematics/@schematics/angular, @modelcontextprotocol/sdk and several transitive packages.
This commit is contained in:
Lobo
2026-02-06 15:06:54 +01:00
parent 59148db295
commit 3795090cea
9 changed files with 212 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/app/pages/algorithms/conway-gol/conway-gol.scss
View File

1
src/app/pages/algorithms/conway-gol/conway-gol.ts
View File

@@ -30,7 +30,6 @@ interface GridPos { row: number; col: number }
FormsModule
],
templateUrl: './conway-gol.html',
styleUrl: './conway-gol.scss',
})
export class ConwayGol implements AfterViewInit {

1
src/app/pages/algorithms/information/information.ts
View File

@@ -1,6 +1,5 @@
import {Component, Input} from '@angular/core';
import {TranslatePipe} from "@ngx-translate/core";
import {UrlConstants} from "../../../constants/UrlConstants";
import {AlgorithmInformation} from './information.models';
@Component({

18
src/app/pages/algorithms/pathfinding/pathfinding.component.html
View File

@@ -6,18 +6,18 @@
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="controls">
<div class="controls-panel">
<button matButton="filled" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
<button matButton="filled" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
</div>
<div class="controls">
<div class="controls-panel">
<button matButton="filled" (click)="createCase({withWalls: true, scenario: 'normal'})">{{ 'PATHFINDING.NORMAL_CASE' | translate }}</button>
<button matButton="filled" (click)="createCase({withWalls: true, scenario: 'random'})">{{ 'PATHFINDING.RANDOM_CASE' | translate }}</button>
<button matButton="filled" (click)="createCase({withWalls: true, scenario: 'edge'})">{{ 'PATHFINDING.EDGE_CASE' | translate }}</button>
<button matButton="filled" (click)="createCase({withWalls: false, scenario: 'normal'})">{{ 'PATHFINDING.CLEAR_BOARD' | translate }}</button>
</div>
<div class="controls">
<div class="controls-panel">
<mat-button-toggle-group [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
<mat-button-toggle [value]="NodeType.Start">{{ 'PATHFINDING.START_NODE' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="NodeType.End">{{ 'PATHFINDING.END_NODE' | translate }}</mat-button-toggle>
@@ -25,8 +25,7 @@
<mat-button-toggle [value]="NodeType.None">{{ 'PATHFINDING.CLEAR_NODE' | translate }}</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div class="controls">
<div class="controls-panel">
<div class="grid-size">
<mat-form-field appearance="outline" class="grid-field">
<mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
@@ -63,11 +62,10 @@
<span><span class="legend-color visited"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
<span><span class="legend-color path"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
</div>
</div>
<div class="results-container">
<p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
<p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
<div class="controls-panel">
<p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
<p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
</div>
</div>
<canvas #gridCanvas></canvas>

16
src/app/pages/algorithms/pathfinding/pathfinding.component.scss
View File

@@ -1,16 +0,0 @@
.controls {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1rem;
align-items: center;
mat-button-toggle-group {
border-radius: 4px;
overflow: hidden;
}
}
.grid-field {
width: 150px;
}

1
src/app/pages/algorithms/pathfinding/pathfinding.component.ts
View File

@@ -43,7 +43,6 @@ interface GridPos { row: number; col: number }
Information
],
templateUrl: './pathfinding.component.html',
styleUrls: ['./pathfinding.component.scss']
})
export class PathfindingComponent implements AfterViewInit {
private readonly pathfindingService = inject(PathfindingService);

6
src/app/pages/algorithms/sorting/sorting.component.html
View File

@@ -1,5 +1,4 @@
<div class="container">
<mat-card class="sorting-card">
<mat-card class="container sorting-card">
<mat-card-header>
<mat-card-title>{{ 'SORTING.TITLE' | translate }}</mat-card-title>
</mat-card-header>
@@ -40,7 +39,7 @@
</button>
</div>
<div class="info-panel">
<div class="controls-panel">
<p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
</div>
<div class="visualization-area">
@@ -56,4 +55,3 @@
</div>
</mat-card-content>
</mat-card>
</div>