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/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();
-}
+}