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.

web/assets/css/game.css

@@ -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;
+    background-color: #DADEEF;
-    border-color: #333333;
+    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;
 }
 
 /* ================================

web/assets/js/game.js

@@ -34,6 +34,7 @@ let playerY = 0;
 
 // Function to save initial orientation of mirrors
 let laserDirection = { dx: 0, dy: 0 };
+let laserSegments = {};
 let mirrorOrientations = {};
 
 function initializeMirrorOrientations() {
@@ -99,7 +100,8 @@ function loadGrid() {
                     break;
                 case legend.ligthLaser:
                     cell.classList.add("light-laser");
-                    if (laserDirection.dx === 0) {
+                    const segmentDirection = laserSegments[`${y},${x}`];
+                    if (segmentDirection && segmentDirection.dx === 0) {
                         cell.classList.add("laser-vertical");
                     } else {
                         cell.classList.add("laser-horizontal");
@@ -149,6 +151,7 @@ let isLevelFinished = false;
 
 function traceLaser() {
     // Reset light laser from previous trace
+    laserSegments = {};
     for (let y = 0; y < level1.length; y++) {
         for (let x = 0; x < level1[y].length; x++) {
             if (level1[y][x] === legend.ligthLaser) {
@@ -206,10 +209,12 @@ function traceLaser() {
 
             case legend.empty:
                 level1[currentY][currentX] = legend.ligthLaser;
+                laserSegments[`${currentY},${currentX}`] = { ...laserDirection };
                 break;
 
             case legend.target:
                 level1[currentY][currentX] = legend.ligthLaser;
+                laserSegments[`${currentY},${currentX}`] = { ...laserDirection };
                 laserActive = false;
                 isLevelFinished = true;
                 break;
@@ -252,11 +257,13 @@ function traceLaser() {
 
             case legend.button:
                 level1[currentY][currentX] = legend.ligthLaser;
+                laserSegments[`${currentY},${currentX}`] = { ...laserDirection };
                 laserActive = false;
                 break;
 
             default:
                 level1[currentY][currentX] = legend.ligthLaser;
+                laserSegments[`${currentY},${currentX}`] = { ...laserDirection };
                 break;
         }
     }
@@ -342,4 +349,4 @@ function movePlayer(x, y) {
     playerY = newY;
 
     loadGrid();
-}
+}

web/templates/view/game.html

@@ -7,7 +7,7 @@
     <title>Game</title>
 </head>
 <body>
-    <div id="map"></div>
+    <div id="map" class="map"></div>
 
     <script src="../../assets/js/game.js" defer></script>
 </body>