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

Using tailwind instead of scss as much as possible
Build, Test & Push Frontend / docker (pull_request) Has been cancelled
Details
Build, Test & Push Frontend / quality-check (pull_request) Has been cancelled
Details

Browse Source
This commit is contained in:
Andreas Dahm committed 2026-04-16 11:58:16 +02:00
1 parent f9797493ce
commit 9a6e91ea9d
32 files changed
+1185 -1353
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/pages/algorithms/algorithms.component.html
+8 -8
View File
@@ -1,15 +1,15 @@
<div class="card-grid">
<h1 class="algo-page-title">{{ 'ALGORITHM.TITLE' | translate }}</h1>
<div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
<h1 class="m-0 mb-2 text-[clamp(1.4rem,4vw,2rem)]">{{ 'ALGORITHM.TITLE' | translate }}</h1>
</div>
<div class="card-grid">
<div class="grid gap-fluid-md grid-cols-[repeat(auto-fill,minmax(min(100%,450px),1fr))] max-w-app mx-4 mt-auto">
@for (category of categories; track category.id) {
<mat-card class="algo-card" [routerLink]="[category.routerLink]">
<mat-card class="card-gradient-bar transition-transform duration-200 ease-in-out flex flex-col cursor-pointer hover:-translate-y-1 hover:shadow-[0_8px_24px_rgba(0,0,0,0.12)]" [routerLink]="[category.routerLink]">
<mat-card-content>
<div class="algo-icon-wrap">
<mat-icon>{{ category.icon }}</mat-icon>
<div class="flex items-center text-[var(--mat-sys-primary)] mb-4">
<mat-icon class="!text-[26px] !w-[26px] !h-[26px]">{{ category.icon }}</mat-icon>
</div>
<h3 class="algo-card-title">{{ category.title | translate }}</h3>
<p class="algo-card-desc">{{ category.description | translate }}</p>
<h3 class="text-[1.05rem] font-semibold mb-2 m-0">{{ category.title | translate }}</h3>
<p class="m-0 opacity-75 text-sm leading-relaxed">{{ category.description | translate }}</p>
</mat-card-content>
</mat-card>
}
src/app/pages/algorithms/cloth/cloth.component.html
+4 -4
View File
@@ -1,11 +1,11 @@
<mat-card class="algo-container">
<mat-card class="w-full max-w-[1920px] p-5">
<mat-card-header>
<mat-card-title>{{ 'CLOTH.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="controls-panel">
<div class="flex flex-col mb-4">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<button mat-raised-button color="primary" (click)="toggleWind()">
{{ isWindActive ? ('CLOTH.WIND_OFF' | translate) : ('CLOTH.WIND_ON' | translate) }}
</button>
@@ -16,7 +16,7 @@
{{ 'CLOTH.RESTART_SIMULATION' | translate }}
</button>
</div>
<div class="sliders-panel">
<div class="flex items-center gap-2.5">
<span>{{ 'CLOTH.ELONGATION' | translate }}: {{ elongation }}</span>
<mat-slider min="0.5" max="2.0" step="0.1">
<input matSliderThumb [(ngModel)]="elongation">
src/app/pages/algorithms/conway-gol/conway-gol.component.html
+11 -11
View File
@@ -1,11 +1,11 @@
<mat-card class="algo-container">
<mat-card class="w-full max-w-[1920px] p-5">
<mat-card-header>
<mat-card-title>{{ 'GOL.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="controls-panel">
<div class="flex flex-col mb-4">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<button mat-raised-button (click)="generate(Scenario.SIMPLE)">
<mat-icon>arrow_right</mat-icon> {{ 'GOL.SIMPLE_SCENE' | translate }}
</button>
@@ -22,7 +22,7 @@
<mat-icon>check_box_outline_blank</mat-icon> {{ 'GOL.EMPTY_SCENE' | translate }}
</button>
</div>
<div class="controls-panel">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
@if (gameStarted())
{
<button mat-raised-button (click)="pauseGame()">
@@ -35,8 +35,8 @@
}
<p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
</div>
<div class="input-container">
<mat-form-field appearance="outline" class="input-field">
<div class="flex gap-3 items-center flex-wrap">
<mat-form-field appearance="outline" class="w-[150px]">
<mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
<input
matInput
@@ -47,7 +47,7 @@
(ngModelChange)="pauseGame(); genericGridComponent.gridRows = gridRows; genericGridComponent.applyGridSize()"
/>
</mat-form-field>
<mat-form-field appearance="outline" class="input-field">
<mat-form-field appearance="outline" class="w-[150px]">
<mat-label>{{ 'ALGORITHM.GRID_WIDTH' | translate }}</mat-label>
<input
matInput
@@ -58,7 +58,7 @@
(ngModelChange)="pauseGame(); genericGridComponent.gridCols = gridCols; genericGridComponent.applyGridSize()"
/>
</mat-form-field>
<mat-form-field appearance="outline" class="input-field">
<mat-form-field appearance="outline" class="w-[150px]">
<mat-label>{{ 'GOL.SPEED' | translate }}</mat-label>
<input
matInput
@@ -72,9 +72,9 @@
</mat-form-field>
</div>
<div class="legend">
<span><span class="legend-color alive"></span> {{ 'GOL.ALIVE' | translate }}</span>
<span><span class="legend-color empty"></span> {{ 'GOL.DEAD' | translate }}</span>
<div class="flex flex-wrap gap-4 items-center text-[0.9em]">
<span><span class="legend-swatch bg-black"></span> {{ 'GOL.ALIVE' | translate }}</span>
<span><span class="legend-swatch bg-gray-300"></span> {{ 'GOL.DEAD' | translate }}</span>
</div>
</div>
<app-generic-grid
src/app/pages/algorithms/four-color/four-color.component.html
+23 -16
View File
@@ -1,20 +1,20 @@
<mat-card class="algo-container">
<mat-card class="w-full max-w-[1920px] p-5">
<mat-card-header>
<mat-card-title>{{ 'FOUR_COLOR.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="controls-panel">
<div class="flex flex-col mb-4">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<button mat-flat-button color="primary" (click)="generateNewMap()">{{ 'FOUR_COLOR.GENERATE' | translate }}</button>
<button mat-flat-button color="accent" (click)="autoSolve()">{{ 'FOUR_COLOR.SOLVE' | translate }}</button>
<button mat-stroked-button (click)="resetColors()">{{ 'FOUR_COLOR.CLEAR' | translate }}</button>
</div>
<div class="controls-panel">
<div class="input-container">
<mat-form-field appearance="outline" class="input-field">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<div class="flex gap-3 items-center flex-wrap">
<mat-form-field appearance="outline" class="w-[150px]">
<mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
<input
matInput
@@ -26,7 +26,7 @@
/>
</mat-form-field>
<mat-form-field appearance="outline" class="input-field">
<mat-form-field appearance="outline" class="w-[150px]">
<mat-label>{{ 'ALGORITHM.GRID_WIDTH' | translate }}</mat-label>
<input
matInput
@@ -40,21 +40,28 @@
</div>
</div>
<div class="legend">
<span><span class="legend-color color1"></span> {{ 'FOUR_COLOR.COLOR_1' | translate }}</span>
<span><span class="legend-color color2"></span> {{ 'FOUR_COLOR.COLOR_2' | translate }}</span>
<span><span class="legend-color color3"></span> {{ 'FOUR_COLOR.COLOR_3' | translate }}</span>
<span><span class="legend-color color4"></span> {{ 'FOUR_COLOR.COLOR_4' | translate }}</span>
<div class="flex flex-wrap gap-4 items-center text-[0.9em]">
<span><span class="legend-swatch bg-[#FF5252]"></span> {{ 'FOUR_COLOR.COLOR_1' | translate }}</span>
<span><span class="legend-swatch bg-[#448AFF]"></span> {{ 'FOUR_COLOR.COLOR_2' | translate }}</span>
<span><span class="legend-swatch bg-[#4CAF50]"></span> {{ 'FOUR_COLOR.COLOR_3' | translate }}</span>
<span><span class="legend-swatch bg-[#FFEB3B]"></span> {{ 'FOUR_COLOR.COLOR_4' | translate }}</span>
</div>
<div class="status-panel" [ngClass]="solutionStatus.toLowerCase()">
<span class="status-label">{{ 'FOUR_COLOR.STATUS.LABEL' | translate }}:</span>
<span class="status-message">{{ 'FOUR_COLOR.STATUS.' + solutionStatus | translate }}</span>
<div class="mt-5 flex gap-2.5 py-2.5 px-4 rounded border-l-[5px] font-medium min-w-[300px] items-center"
[ngClass]="{
'border-l-gray-500 bg-app-bg': solutionStatus === 'INCOMPLETE',
'border-l-green-500 bg-green-50 text-green-800': solutionStatus === 'SOLVED',
'border-l-orange-500 bg-orange-50 text-orange-700': solutionStatus === 'CONFLICTS',
'border-l-red-500 bg-red-50 text-red-800': solutionStatus === 'INVALID'
}">
<span class="uppercase text-[0.8em] opacity-70">{{ 'FOUR_COLOR.STATUS.LABEL' | translate }}:</span>
<span>{{ 'FOUR_COLOR.STATUS.' + solutionStatus | translate }}</span>
</div>
</div>
<div class="canvas-container">
<div class="flex justify-center items-center w-full max-w-[1000px] mx-auto">
<canvas #fourColorCanvas
class="cursor-pointer max-w-full h-auto [image-rendering:pixelated]"
(mousedown)="onMouseDown($event)"
(mousemove)="onMouseMove($event)"
(touchstart)="onTouchStart($event)"
src/app/pages/algorithms/four-color/four-color.component.scss
-54
View File
@@ -1,54 +0,0 @@
.status-panel {
margin-top: 20px;
display: flex;
gap: 10px;
padding: 10px 15px;
border-radius: 4px;
background-color: var(--app-fg);
border-left: 5px solid #9e9e9e;
font-weight: 500;
min-width: 300px;
align-items: center;
}
.status-panel.incomplete {
border-left-color: #9e9e9e;
background-color: var(--app-bg);
}
.status-panel.solved {
border-left-color: #4CAF50;
background-color: #e8f5e9;
color: #2e7d32;
}
.status-panel.conflicts {
border-left-color: #ff9800;
background-color: #fff3e0;
color: #ef6c00;
}
.status-panel.invalid {
border-left-color: #f44336;
background-color: #ffebee;
color: #c62828;
}
.status-label {
text-transform: uppercase;
font-size: 0.8em;
opacity: 0.7;
}
.color1 { background-color: #FF5252; }
.color2 { background-color: #448AFF; }
.color3 { background-color: #4CAF50; }
.color4 { background-color: #FFEB3B; }
canvas {
cursor: pointer;
max-width: 100%;
height: auto;
image-rendering: pixelated;
}
src/app/pages/algorithms/fractal/fractal.component.html
+6 -6
View File
@@ -1,12 +1,12 @@
<mat-card class="algo-container">
<mat-card class="w-full max-w-[1920px] p-5">
<mat-card-header>
<mat-card-title>{{ 'FRACTAL.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="controls-panel">
<mat-form-field appearance="fill">
<div class="flex flex-col mb-4">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<mat-form-field class="w-[200px]" appearance="fill">
<mat-label>{{ 'FRACTAL.ALGORITHM' | translate }}</mat-label>
<mat-select [value]="'Mandelbrot'" (selectionChange)="onAlgorithmChange($event.value)">
<mat-option value="Mandelbrot">Mandelbrot</mat-option>
@@ -15,7 +15,7 @@
<mat-option value="Newton">Newton</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-form-field class="w-[200px]" appearance="fill">
<mat-label>{{ 'FRACTAL.COLOR_SCHEME' | translate }}</mat-label>
<mat-select [value]="'Blue-Gold'" (selectionChange)="onColorChanged($event.value)">
<mat-option value="Blue-Gold">Blue-Gold</mat-option>
@@ -29,7 +29,7 @@
<mat-icon>undo</mat-icon> {{ 'FRACTAL.RESET' | translate }}
</button>
</div>
<div class="zoom-controls" style="display: flex; align-items: center; gap: 10px;">
<div style="display: flex; align-items: center; gap: 10px;">
<mat-icon>zoom_out</mat-icon>
<ngx-slider [(value)]="sliderValue" [options]="options" (valueChange)="onSliderChange($event)" ></ngx-slider>
<mat-icon>zoom_in</mat-icon>
src/app/pages/algorithms/fractal3d/fractal3d.component.html
+3 -3
View File
@@ -1,11 +1,11 @@
<mat-card class="algo-container">
<mat-card class="w-full max-w-[1920px] p-5">
<mat-card-header>
<mat-card-title>{{ 'FRACTAL3D.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="controls-panel">
<div class="flex flex-col mb-4">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<button matButton="filled" (click)="onFractalTypeChange(0)">{{ 'FRACTAL3D.MANDELBULB' | translate }}</button>
<button matButton="filled" (click)="onFractalTypeChange(1)">{{ 'FRACTAL3D.MANDELBOX' | translate }}</button>
<button matButton="filled" (click)="onFractalTypeChange(2)">{{ 'FRACTAL3D.JULIA' | translate }}</button>
src/app/pages/algorithms/information/information.html
+4 -4
View File
@@ -1,10 +1,10 @@
<div class="algo-info">
<h3>{{ algorithmInformation.title | translate }}</h3>
<div class="mb-4 py-3 px-4 border border-[#ddd] rounded-lg">
<h3 class="m-0 mb-2">{{ algorithmInformation.title | translate }}</h3>
@if(algorithmInformation.entries && algorithmInformation.entries.length > 0){
@for (algo of algorithmInformation.entries; track algo)
{
<p>
<p class="my-2">
<strong>
@if(algo.translateName){
{{ algo.name | translate}}
@@ -20,7 +20,7 @@
@if (algorithmInformation.disclaimer !== '')
{
<p>
<p class="my-2">
<strong>{{ 'ALGORITHM.NOTE' | translate}}</strong> {{ algorithmInformation.disclaimer | translate}}
</p>
@if (algorithmInformation.disclaimerListEntry && algorithmInformation.disclaimerListEntry.length > 0)
src/app/pages/algorithms/pathfinding/labyrinth/labyrinth.component.html
+11 -11
View File
@@ -1,27 +1,27 @@
<mat-card class="algo-container">
<mat-card class="w-full max-w-[1920px] p-5">
<mat-card-header>
<mat-card-title>{{ 'LABYRINTH.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="controls-panel">
<div class="flex flex-col mb-4">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<button matButton="filled" [disabled]="isAnimationRunning()" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
<button matButton="filled" [disabled]="isAnimationRunning()" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
</div>
<div class="controls-panel">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<button matButton="filled" [disabled]="isAnimationRunning()" (click)="createRandom(true)">{{ 'LABYRINTH.PRIM' | translate }}</button>
<button matButton="filled" [disabled]="isAnimationRunning()" (click)="createRandom(false)">{{ 'LABYRINTH.KRUSKAL' | translate }}</button>
</div>
<div class="legend">
<span><span class="legend-color start"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
<span><span class="legend-color end"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
<span><span class="legend-color wall"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
<span><span class="legend-color visited"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
<span><span class="legend-color path"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
<div class="flex flex-wrap gap-4 items-center text-[0.9em]">
<span><span class="legend-swatch bg-green-600"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
<span><span class="legend-swatch bg-red-600"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
<span><span class="legend-swatch bg-black"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
<span><span class="legend-swatch bg-sky-300"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
<span><span class="legend-swatch bg-[gold]"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
</div>
<div class="controls-panel">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
<p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
</div>
src/app/pages/algorithms/pathfinding/pathfinding.component.html
+17 -17
View File
@@ -1,33 +1,33 @@
<mat-card class="algo-container">
<mat-card class="w-full max-w-[1920px] p-5">
<mat-card-header>
<mat-card-title>{{ 'PATHFINDING.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="controls-panel">
<div class="flex flex-col mb-4">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<button matButton="filled" (click)="visualize('dijkstra')">{{ 'PATHFINDING.DIJKSTRA' | translate }}</button>
<button matButton="filled" (click)="visualize('astar')">{{ 'PATHFINDING.ASTAR' | translate }}</button>
</div>
<div class="controls-panel">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<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-panel">
<mat-button-toggle-group [(ngModel)]="selectedNodeType" aria-label="Node Type Selection">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<mat-button-toggle-group class="rounded overflow-hidden" [(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>
<mat-button-toggle [value]="NodeType.Wall">{{ 'PATHFINDING.WALL' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="NodeType.None">{{ 'PATHFINDING.CLEAR_NODE' | translate }}</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div class="controls-panel">
<div class="input-container">
<mat-form-field appearance="outline" class="input-field">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<div class="flex gap-3 items-center flex-wrap">
<mat-form-field appearance="outline" class="w-[150px]">
<mat-label>{{ 'ALGORITHM.GRID_HEIGHT' | translate }}</mat-label>
<input
matInput
@@ -38,7 +38,7 @@
(ngModelChange)="genericGridComponent.gridRows = gridRows; genericGridComponent.applyGridSize()"
/> </mat-form-field>
<mat-form-field appearance="outline" class="input-field">
<mat-form-field appearance="outline" class="w-[150px]">
<mat-label>{{ 'ALGORITHM.GRID_WIDTH' | translate }}</mat-label>
<input
matInput
@@ -51,14 +51,14 @@
</div>
</div>
<div class="legend">
<span><span class="legend-color start"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
<span><span class="legend-color end"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
<span><span class="legend-color wall"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
<span><span class="legend-color visited"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
<span><span class="legend-color path"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
<div class="flex flex-wrap gap-4 items-center text-[0.9em]">
<span><span class="legend-swatch bg-green-600"></span> {{ 'PATHFINDING.START_NODE' | translate }}</span>
<span><span class="legend-swatch bg-red-600"></span> {{ 'PATHFINDING.END_NODE' | translate }}</span>
<span><span class="legend-swatch bg-black"></span> {{ 'PATHFINDING.WALL' | translate }}</span>
<span><span class="legend-swatch bg-sky-300"></span> {{ 'PATHFINDING.VISITED' | translate }}</span>
<span><span class="legend-swatch bg-[gold]"></span> {{ 'PATHFINDING.PATH' | translate }}</span>
</div>
<div class="controls-panel">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<p>{{ 'PATHFINDING.PATH_LENGTH' | translate }}: {{ pathLength }}</p>
<p>{{ 'PATHFINDING.EXECUTION_TIME' | translate }}: {{ executionTime | number:'1.2-2' }} ms</p>
</div>
src/app/pages/algorithms/pendulum/pendulum.component.html
+30 -30
View File
@@ -1,45 +1,45 @@
<mat-card class="algo-container">
<mat-card class="w-full max-w-[1920px] p-5">
<mat-card-header>
<mat-card-title>{{ 'PENDULUM.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-container">
<div class="sliders-grid">
<div class="slider-item">
<p>{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
<ngx-slider [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
<div class="flex flex-col mb-4">
<div class="grid grid-cols-2 tablet:grid-cols-1 tablet:gap-4 mb-6">
<div class="flex items-center gap-4 mr-4">
<p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.TRAIL_DECAY_TIME' | translate }}</p>
<ngx-slider class="grow" [(value)]="simParams.trailDecay" [options]="trailDecayOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.ATTRACTION' | translate }}</p>
<ngx-slider [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
<div class="flex items-center gap-4 mr-4">
<p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.ATTRACTION' | translate }}</p>
<ngx-slider class="grow" [(value)]="simParams.g" [options]="gravityOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
<ngx-slider [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
<div class="flex items-center gap-4 mr-4">
<p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.L1_LENGTH' | translate }}</p>
<ngx-slider class="grow" [(value)]="simParams.l1" [options]="lengthOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
<ngx-slider [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
<div class="flex items-center gap-4 mr-4">
<p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.L2_LENGTH' | translate }}</p>
<ngx-slider class="grow" [(value)]="simParams.l2" [options]="lengthOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.M1_MASS' | translate }}</p>
<ngx-slider [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
<div class="flex items-center gap-4 mr-4">
<p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.M1_MASS' | translate }}</p>
<ngx-slider class="grow" [(value)]="simParams.m1" [options]="massOptions" ></ngx-slider>
</div>
<div class="slider-item">
<p>{{ 'PENDULUM.M2_MASS' | translate }}</p>
<ngx-slider [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
<div class="flex items-center gap-4 mr-4">
<p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.M2_MASS' | translate }}</p>
<ngx-slider class="grow" [(value)]="simParams.m2" [options]="massOptions" ></ngx-slider>
</div>
<div class="slider-item full-width">
<p>{{ 'PENDULUM.DAMPING' | translate }}</p>
<ngx-slider [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
<div class="flex items-center gap-4 mr-4 col-span-full">
<p class="w-[100px] shrink-0 m-0 text-sm">{{ 'PENDULUM.DAMPING' | translate }}</p>
<ngx-slider class="grow" [(value)]="simParams.damping" [options]="dampingOptions" ></ngx-slider>
</div>
</div>
<div class="actions-container">
<div class="flex flex-wrap gap-3 mb-4">
<button mat-raised-button color="primary" (click)="pushPendulum(true)">
{{ 'PENDULUM.POKE_M1' | translate }}
</button>
@@ -51,11 +51,11 @@
</button>
</div>
<div class="legend" style="margin-top: 10px">
<span><span class="legend-color L1"></span> L1</span>
<span><span class="legend-color L2"></span> L2</span>
<span><span class="legend-color M1"></span> M1</span>
<span><span class="legend-color M2"></span> M2</span>
<div class="flex flex-wrap gap-4 items-center text-[0.9em] mt-2.5">
<span><span class="legend-swatch bg-yellow-400"></span> L1</span>
<span><span class="legend-swatch bg-fuchsia-500"></span> L2</span>
<span><span class="legend-swatch bg-red-600"></span> M1</span>
<span><span class="legend-swatch bg-green-600"></span> M2</span>
</div>
</div>
<app-babylon-canvas
src/app/pages/algorithms/pendulum/pendulum.component.scss
-41
View File
@@ -1,41 +0,0 @@
.sliders-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-bottom: 1.5rem;
.slider-item {
display: flex;
align-items: center;
gap: 1rem;
margin-right: 1rem;
p {
width: 100px;
flex-shrink: 0;
margin: 0;
font-size: 0.9rem;
}
ngx-slider {
flex-grow: 1;
}
&.full-width {
grid-column: 1 / -1;
}
}
}
.actions-container {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
}
@media (max-width: 900px) {
.sliders-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
}
src/app/pages/algorithms/sorting/sorting.component.html
+13 -11
View File
@@ -1,11 +1,11 @@
<mat-card class="algo-container sorting-card">
<mat-card class="w-full max-w-[1920px] p-[clamp(10px,3vw,20px)]">
<mat-card-header>
<mat-card-title>{{ 'SORTING.TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<app-information [algorithmInformation]="algoInformation"/>
<div class="controls-panel">
<mat-form-field appearance="fill">
<div class="flex gap-[clamp(5px,2vw,10px)] mb-[clamp(10px,3vw,20px)] items-center flex-wrap mt-2.5 text-[0.9em]">
<mat-form-field class="w-[clamp(150px,20vw,200px)]" appearance="fill">
<mat-label>{{ 'SORTING.ALGORITHM' | translate }}</mat-label>
<mat-select [(ngModel)]="selectedAlgorithm">
@for (algo of algoInformation.entries; track algo.name) {
@@ -14,7 +14,7 @@
</mat-select>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-form-field class="w-[clamp(150px,20vw,200px)]" appearance="outline">
<mat-label>{{ 'SORTING.ARRAY_SIZE' | translate }}</mat-label>
<input
matInput
@@ -27,7 +27,7 @@
/>
</mat-form-field>
</div>
<div class="controls-panel">
<div class="flex gap-[clamp(5px,2vw,10px)] mb-[clamp(10px,3vw,20px)] items-center flex-wrap">
<button mat-raised-button color="primary" (click)="startSorting()">
<mat-icon>play_arrow</mat-icon> {{ 'SORTING.START' | translate }}
</button>
@@ -43,17 +43,19 @@
</button>
</div>
<div class="controls-panel">
<div class="flex gap-4 mb-4 items-center flex-wrap mt-2.5 text-[0.9em]">
<p>{{ 'SORTING.EXECUTION_TIME' | translate }}: {{ executionTime }} ms</p>
</div>
<div class="visualization-area">
<div class="flex items-end h-[clamp(200px,40vh,400px)] border-b border-app-fg mb-[clamp(10px,3vw,20px)] gap-px bg-card-bg">
@for (item of sortArray; track $index) {
<div
class="bar"
class="grow w-2.5 min-w-px transition-all duration-[50ms]"
[style.height.px]="item.value * 3"
[class.unsorted]="item.state === 'unsorted'"
[class.comparing]="item.state === 'comparing'"
[class.sorted]="item.state === 'sorted'"
[ngClass]="{
'bg-[#424242]': item.state === 'unsorted',
'bg-[#ffeb3b]': item.state === 'comparing',
'bg-[#4caf50]': item.state === 'sorted'
}"
></div>
}
</div>