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:
@@ -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;
|
||||
}
|
||||
|
||||
/* ================================
|
||||
|
||||
Reference in New Issue
Block a user