Enhance Conway's Game of Life UI & interaction

Add interactive controls and drawing support for Conway's Game of Life: introduce Node.alive, Scenario enum, spawn/speed/time constants, random/empty generation, and mouse/touch drawing (click-drag/touch to toggle cells). Update template to include control buttons, speed input, legend, and expose Scenario constants. Implement grid initialization, random seeding, grid position mapping, and optimized node drawing/color logic.

Also update i18n (de/en) with GOL strings and move GRID label keys to ALGORITHM, switch some label usages accordingly. Move generic container/legend styles into global styles.scss (adjust canvas border color), and simplify component SCSS files. Change CONWAYS_WIKI URL to German wiki and remove now-unused UrlConstants references from components.
This commit is contained in:
2026-02-06 14:40:49 +01:00
parent a22dd17869
commit 59148db295
14 changed files with 276 additions and 98 deletions

View File

@@ -213,6 +213,11 @@ a {
}
// algos
.container {
padding: 2rem;
}
.algo-info {
margin: 0 0 1rem 0;
padding: 0.75rem 1rem;
@@ -248,7 +253,38 @@ a {
}
canvas {
border: 1px solid #ccc;
border: 1px solid lightgray;
display: block;
max-width: 100%;
}
.legend {
display: flex;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
font-size: 0.9em;
.legend-color {
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid lightgray;
vertical-align: middle;
margin-right: 5px;
&.start { background-color: green; }
&.end { background-color: red; }
&.wall { background-color: black; }
&.visited { background-color: skyblue; }
&.path { background-color: gold; }
&.empty { background-color: lightgray; }
&.alive { background-color: black; }
}
}
.controls-container {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
}