Track laser segments and update UI theme

Add per-cell laserSegments tracking and use it to render correct laser orientation: introduce laserSegments global, reset it at trace start, populate entries when tracing, and consult it in loadGrid to choose horizontal vs vertical classes. Update UI styling from a dark to a lighter theme (body and main backgrounds, cell/empty/mirror/wall colors and laser gradients), remove some borders/fit-content sizing, and add a "map" class to the map container in the HTML. These changes fix laser orientation rendering and refresh the game's visual theme.
This commit is contained in:
Sysy's
2026-03-31 09:20:28 +02:00
committed by M1n-0
parent 2c03331663
commit 6d81f67ddf
3 changed files with 18 additions and 15 deletions

View File

@@ -12,7 +12,7 @@ body {
}
body {
background: #1a1a1a;
background: #f7f7f7;
display: flex;
align-items: center;
justify-content: center;
@@ -39,10 +39,8 @@ main {
flex-direction: column;
gap: 0px;
padding: 10px;
background: #222222;
background: #DADEEF;
border-radius: 5px;
width: fit-content;
height: fit-content;
}
.lign {
@@ -56,7 +54,6 @@ main {
================================ */
.cell {
border: 1px solid #333333;
width: clamp(28px, 5.5vmin, 60px);
height: clamp(28px, 5.5vmin, 60px);
transition: all 0.2s ease;
@@ -73,8 +70,8 @@ main {
================================ */
.empty {
background-color: #2a2a2a;
border-color: #333333;
background-color: #DADEEF;
border-color: #DADEEF;
}
.empty:hover {
@@ -86,14 +83,14 @@ main {
}
.mirror {
background-color: #1a1a1a;
background-color: #DADEEF;
border-color: #444444;
position: relative;
overflow: hidden;
}
.wall {
background-color: #1a1a1a;
background-color: #DADEEF;
}
.target {
@@ -120,15 +117,14 @@ main {
.light-laser {
position: relative;
background-color: #2a2a2a;
}
.laser-horizontal {
background: linear-gradient(to bottom, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #2a2a2a
background: linear-gradient(to bottom, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #DADEEF
}
.laser-vertical {
background: linear-gradient(to right, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #2a2a2a;
background: linear-gradient(to right, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #DADEEF;
}
/* ================================