diff --git a/web/assets/css/game.css b/web/assets/css/game.css index f287f0d..9b8e4d3 100644 --- a/web/assets/css/game.css +++ b/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; - 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; } /* ================================ diff --git a/web/assets/js/game.js b/web/assets/js/game.js index 06371d6..3ff6d87 100644 --- a/web/assets/js/game.js +++ b/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(); -} \ No newline at end of file +} diff --git a/web/templates/view/game.html b/web/templates/view/game.html index c01d7d6..d90f9e9 100644 --- a/web/templates/view/game.html +++ b/web/templates/view/game.html @@ -7,7 +7,7 @@