// Legend of grid case const legend = { empty: 0, laser: 1, coloredLaser: 2, mirror: 3, door: 4, button: 5, wall: 6, target: 7, ligthLaser: 8, demiWallCornerUpLeft: 9, demiWallCornerUpRight: 10, demiWallCornerDownLeft: 11, demiWallCornerDownRight: 12, doorOpen: 13, button2: 14, captor: 15, cable: 16, captorTurn: 17, cableVertical: 18, }; const laserColors = { white: "white", red: "red", blue: "blue", yellow: "yellow", }; const glassOptions = [ laserColors.red, laserColors.blue, laserColors.yellow, ]; let levels = [ [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 5, 4, 0, 10, 6, 0, 0, 0, 0], [0, 0, 0, 0, 7, 6, 6, 6, 6, 0, 6, 0, 0, 0, 0], [0, 0, 0, 0, 3, 0, 0, 0, 0, 12, 6, 0, 0, 0, 0], [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], ], [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 17, 0, 0, 3, 6, 0, 0, 0, 0], [0, 0, 6, 6, 6, 6, 18, 6, 6, 0, 6, 0, 0, 0, 0], [0, 0, 7, 0, 0, 0, 4, 0, 0, 12, 6, 0, 0, 0, 0], [0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], ], [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 0, 0, 0, 10, 6, 0, 0, 0, 0], [0, 0, 0, 3, 0, 16, 16, 20, 0, 3, 6, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 6, 0, 0, 0, 0], [0, 0, 0, 0, 12, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0], [0, 0, 0, 0, 6, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 6, 0, 0, 3, 0, 0, 7, 0, 0, 0, 0], [0, 0, 0, 0, 6, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 10, 6, 6, 6, 6, 6, 0, 0, 0, 0, 0], ], ]; /* [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], ], ]; */ let currentLevelIndex = 0; const initialMirrorAngles = [ { "6,4": 315, }, {}, { "3,4": 315, "7,8": 0, }, ]; const buttonGroups = [ { "4,6": 1, }, {}, {}, ]; const doorGroups = [ { "4,7": 1, }, { "4,6": 1, }, {}, ]; const captorGroups = [ {}, { "2,6": 1, }, {}, ]; const rotatorButtons = [ {}, {}, { "3,7": { mirrorX: 7, mirrorY: 7, step: -22.5, intervalMs: 1000 }, }, ]; let laserDirection = { dx: 0, dy: 0 }; let laserSegments = {}; let mirrorOrientations = {}; let glassPlacements = {}; let activatedButtons = {}; let openedDoors = {}; let isLevelFinished = false; let activeRotatorButtons = {}; let rotatorIntervals = {}; let toggledDoors = {}; let poweredCaptors = {}; function getCurrentLevel() { return levels[currentLevelIndex]; } function getCurrentLevelConfig(configByLevel) { return configByLevel[currentLevelIndex] || {}; } function normalizeLaserDirection(dx, dy) { const epsilon = 0.0001; const normalizedDx = Math.abs(dx) < epsilon ? 0 : Math.sign(dx); const normalizedDy = Math.abs(dy) < epsilon ? 0 : Math.sign(dy); return { dx: normalizedDx, dy: normalizedDy }; } function reflectLaser(direction, mirrorAngle) { const mirrorRadians = mirrorAngle * (Math.PI / 180); const mirrorVectorX = Math.cos(mirrorRadians); const mirrorVectorY = Math.sin(mirrorRadians); const dotProduct = (direction.dx * mirrorVectorX) + (direction.dy * mirrorVectorY); const reflectedDx = (2 * dotProduct * mirrorVectorX) - direction.dx; const reflectedDy = (2 * dotProduct * mirrorVectorY) - direction.dy; return normalizeLaserDirection(reflectedDx, reflectedDy); } function reverseLaser(direction) { return { dx: direction.dx * -1, dy: direction.dy * -1, }; } function getLaserSegmentClass(segmentDirection) { if (!segmentDirection) { return "laser-horizontal"; } if (segmentDirection.dx === 0) { return "laser-vertical"; } if (segmentDirection.dy === 0) { return "laser-horizontal"; } if (segmentDirection.dx === segmentDirection.dy) { return "laser-diagonal-down"; } return "laser-diagonal-up"; } function getLaserColorClass(color) { return `laser-color-${color || laserColors.white}`; } function getButtonGroup(x, y) { const cellType = getCurrentLevel()[y][x]; if (cellType === legend.button2) { return 2; } return getCurrentLevelConfig(buttonGroups)[`${y},${x}`] || 1; } function getDoorGroup(x, y) { return getCurrentLevelConfig(doorGroups)[`${y},${x}`] || 1; } function getCaptorGroup(x, y) { return getCurrentLevelConfig(captorGroups)[`${y},${x}`] || getDoorGroup(x, y); } function openDoorsFromButton(x, y) { const buttonGroup = getButtonGroup(x, y); const level = getCurrentLevel(); for (let doorY = 0; doorY < level.length; doorY++) { for (let doorX = 0; doorX < level[doorY].length; doorX++) { if (level[doorY][doorX] === legend.door && getDoorGroup(doorX, doorY) === buttonGroup) { openedDoors[`${doorY},${doorX}`] = true; } } } } function toggleDoorsFromCaptor(x, y) { const captorGroup = getCaptorGroup(x, y); const level = getCurrentLevel(); for (let doorY = 0; doorY < level.length; doorY++) { for (let doorX = 0; doorX < level[doorY].length; doorX++) { const coordKey = `${doorY},${doorX}`; if (level[doorY][doorX] === legend.door && getDoorGroup(doorX, doorY) === captorGroup) { toggledDoors[coordKey] = !toggledDoors[coordKey]; } } } } function getRotatorButtonConfig(x, y) { return getCurrentLevelConfig(rotatorButtons)[`${y},${x}`]; } function isMirrorControlledByButton(x, y) { const rotatorEntries = Object.values(getCurrentLevelConfig(rotatorButtons)); for (let i = 0; i < rotatorEntries.length; i++) { const rotatorConfig = rotatorEntries[i]; if (rotatorConfig.mirrorX === x && rotatorConfig.mirrorY === y) { return true; } } return false; } function rotateMirrorStep(x, y, angleStep) { const coordKey = `${y},${x}`; if (getCurrentLevel()[y][x] !== legend.mirror) { return; } let currentAngle = mirrorOrientations[coordKey] || 0; currentAngle = (currentAngle + angleStep) % 360; if (currentAngle < 0) { currentAngle += 360; } mirrorOrientations[coordKey] = currentAngle; } function syncRotatorButtons() { const currentLevelRotatorButtons = getCurrentLevelConfig(rotatorButtons); const rotatorKeys = Object.keys(currentLevelRotatorButtons); for (let i = 0; i < rotatorKeys.length; i++) { const key = rotatorKeys[i]; const config = currentLevelRotatorButtons[key]; const isActive = activeRotatorButtons[key] === true; if (isActive && !rotatorIntervals[key]) { rotatorIntervals[key] = window.setInterval(() => { rotateMirrorStep(config.mirrorX, config.mirrorY, -22.5); traceLaser(); }, 1000); } if (!isActive && rotatorIntervals[key]) { window.clearInterval(rotatorIntervals[key]); delete rotatorIntervals[key]; } } } function stopAllRotatorButtons() { const intervalKeys = Object.keys(rotatorIntervals); for (let i = 0; i < intervalKeys.length; i++) { const key = intervalKeys[i]; window.clearInterval(rotatorIntervals[key]); } rotatorIntervals = {}; } function saveLaserSegment(x, y, direction, color) { laserSegments[`${y},${x}`] = { direction: { ...direction }, color: color, }; } function isGlassOnCell(x, y) { return glassPlacements[`${y},${x}`] !== undefined; } function drawGlassInCell(cell, x, y) { const glassColor = glassPlacements[`${y},${x}`]; if (!glassColor) { return; } const glassDiv = document.createElement("div"); glassDiv.classList.add("cell-glass", `glass-${glassColor}`); cell.appendChild(glassDiv); } function drawLaserInCell(cell, segmentData) { if (!segmentData) { return; } const laserDiv = document.createElement("div"); laserDiv.classList.add("laser-overlay"); laserDiv.classList.add(getLaserSegmentClass(segmentData.direction)); laserDiv.classList.add(getLaserColorClass(segmentData.color)); cell.appendChild(laserDiv); } function createPalette() { const palette = document.getElementById("glass-palette"); if (!palette) { return; } palette.innerHTML = ""; for (let i = 0; i < glassOptions.length; i++) { const glassColor = glassOptions[i]; const glassButton = document.createElement("button"); glassButton.type = "button"; glassButton.classList.add("glass-item", `glass-${glassColor}`); glassButton.draggable = true; glassButton.addEventListener("dragstart", (event) => { event.dataTransfer.effectAllowed = "copy"; event.dataTransfer.setData("application/x-glass-color", glassColor); }); palette.appendChild(glassButton); } } function addDropEvents(cell, x, y) { cell.addEventListener("dragover", (event) => { if (isLevelFinished) { return; } if (!event.dataTransfer.types.includes("application/x-glass-color")) { return; } const cellType = getCurrentLevel()[y][x]; if (cellType !== legend.empty) { return; } event.preventDefault(); cell.classList.add("can-drop"); }); cell.addEventListener("dragleave", () => { cell.classList.remove("can-drop"); }); cell.addEventListener("drop", (event) => { if (isLevelFinished) { return; } const selectedColor = event.dataTransfer.getData("application/x-glass-color"); cell.classList.remove("can-drop"); if (!selectedColor) { return; } if (getCurrentLevel()[y][x] !== legend.empty) { return; } event.preventDefault(); glassPlacements[`${y},${x}`] = selectedColor; traceLaser(); }); cell.addEventListener("dblclick", () => { if (isLevelFinished) { return; } if (isGlassOnCell(x, y)) { delete glassPlacements[`${y},${x}`]; traceLaser(); } }); } function blockBrowserDrop() { document.addEventListener("dragover", (event) => { event.preventDefault(); }); document.addEventListener("drop", (event) => { event.preventDefault(); }); } function initializeMirrorOrientations() { mirrorOrientations = {}; const level = getCurrentLevel(); for (let y = 0; y < level.length; y++) { for (let x = 0; x < level[y].length; x++) { if (level[y][x] === legend.mirror) { mirrorOrientations[`${y},${x}`] = getCurrentLevelConfig(initialMirrorAngles)[`${y},${x}`] || 0; } } } } function loadGrid() { const mapDiv = document.getElementById("map"); const level = getCurrentLevel(); mapDiv.innerHTML = ""; for (let y = 0; y < level.length; y++) { const lign = document.createElement("div"); lign.classList.add("lign"); for (let x = 0; x < level[y].length; x++) { const cell = document.createElement("div"); cell.classList.add("cell"); addDropEvents(cell, x, y); switch (level[y][x]) { case legend.empty: cell.classList.add("empty"); break; case legend.laser: cell.classList.add("laser"); break; case legend.coloredLaser: cell.classList.add("colored-laser"); break; case legend.mirror: cell.classList.add("mirror"); const currentAngle = mirrorOrientations[`${y},${x}`] || 0; const img = document.createElement("img"); img.src = "/web/assets/img/tiles/Mirror.svg"; img.classList.add("mirror-img"); img.style.transform = `rotate(${currentAngle}deg)`; if (isMirrorControlledByButton(x, y)) { const mirrorDisplay = document.createElement("div"); mirrorDisplay.classList.add("btn-mirror", "btn-mirror-locked"); mirrorDisplay.appendChild(img); cell.appendChild(mirrorDisplay); } else { const btnMirror = document.createElement("button"); btnMirror.classList.add("btn-mirror"); btnMirror.type = "button"; btnMirror.appendChild(img); btnMirror.onmousedown = (event) => { event.preventDefault(); event.stopPropagation(); if (!isLevelFinished) { rotateMirror(x, y, event.button === 2); } }; btnMirror.oncontextmenu = (event) => event.preventDefault(); cell.appendChild(btnMirror); } break; case legend.door: cell.classList.add("door"); if (openedDoors[`${y},${x}`]) { cell.classList.add("door-open"); } break; case legend.doorOpen: cell.classList.add("door", "door-open"); break; case legend.button: cell.classList.add("button"); if (activatedButtons[`${y},${x}`]) { cell.classList.add("button-active"); } break; case legend.button2: cell.classList.add("button", "button-2"); if (activatedButtons[`${y},${x}`]) { cell.classList.add("button-active"); } break; case legend.rotatorButton: cell.classList.add("button", "button-rotator"); if (activatedButtons[`${y},${x}`]) { cell.classList.add("button-active"); } break; case legend.wall: cell.classList.add("wall"); break; case legend.target: cell.classList.add("target"); break; case legend.demiWallCornerUpLeft: cell.classList.add("demi-wall-corner-up-left"); break; case legend.demiWallCornerUpRight: cell.classList.add("demi-wall-corner-up-right"); break; case legend.demiWallCornerDownLeft: cell.classList.add("demi-wall-corner-down-left"); break; case legend.demiWallCornerDownRight: cell.classList.add("demi-wall-corner-down-right"); break; case legend.captor: cell.classList.add("captor"); break; case legend.cable: cell.classList.add("cable"); break; case legend.captorTurn: cell.classList.add("captor-turn"); break; case legend.cableVertical: cell.classList.add("cable-vertical"); break; } drawLaserInCell(cell, laserSegments[`${y},${x}`]); drawGlassInCell(cell, x, y); lign.appendChild(cell); } mapDiv.appendChild(lign); } } function rotateMirror(x, y, isRightClick) { rotateMirrorStep(x, y, isRightClick ? 22.5 : -22.5); traceLaser(); } function traceLaser() { laserSegments = {}; activatedButtons = {}; openedDoors = { ...toggledDoors }; activeRotatorButtons = {}; isLevelFinished = false; const nextPoweredCaptors = {}; const level = getCurrentLevel(); let startLaserX; let startLaserY; for (let y = 0; y < level.length; y++) { for (let x = 0; x < level[y].length; x++) { if (level[y][x] === legend.laser) { startLaserX = x; startLaserY = y; laserDirection = { dx: 1, dy: 0 }; break; } } if (startLaserX !== undefined) { break; } } if (startLaserX === undefined) { return; } let currentX = startLaserX; let currentY = startLaserY; let currentLaserColor = laserColors.white; let laserActive = true; let iterations = 0; const maxIterations = 1000; while (laserActive && iterations < maxIterations) { iterations++; currentX += laserDirection.dx; currentY += laserDirection.dy; if (currentX < 0 || currentX >= level[0].length || currentY < 0 || currentY >= level.length) { laserActive = false; break; } const cellType = level[currentY][currentX]; const glassColor = glassPlacements[`${currentY},${currentX}`]; if (glassColor) { currentLaserColor = glassColor; } switch (cellType) { case legend.laser: case legend.coloredLaser: laserActive = false; break; case legend.empty: saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); break; case legend.target: saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); laserActive = false; isLevelFinished = true; break; case legend.mirror: if (currentLaserColor === laserColors.yellow) { saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); } else { const mirrorAngle = mirrorOrientations[`${currentY},${currentX}`] || 0; laserDirection = reflectLaser(laserDirection, mirrorAngle); } break; case legend.wall: if (currentLaserColor === laserColors.blue) { laserDirection = reverseLaser(laserDirection); } else if (currentLaserColor === laserColors.yellow) { saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); } else { laserActive = false; } break; case legend.door: case legend.doorOpen: if (openedDoors[`${currentY},${currentX}`] || cellType === legend.doorOpen) { saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); } else if (currentLaserColor === laserColors.blue) { laserDirection = reverseLaser(laserDirection); } else if (currentLaserColor === laserColors.yellow) { saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); } else { laserActive = false; } break; case legend.button: case legend.button2: if (currentLaserColor === laserColors.red) { activatedButtons[`${currentY},${currentX}`] = true; openDoorsFromButton(currentX, currentY); saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); } else if (currentLaserColor === laserColors.yellow) { saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); } else if (currentLaserColor === laserColors.blue) { laserDirection = reverseLaser(laserDirection); } else { laserActive = false; } break; case legend.captor: case legend.captorTurn: if (currentLaserColor === laserColors.red) { const captorKey = `${currentY},${currentX}`; activatedButtons[captorKey] = true; nextPoweredCaptors[captorKey] = true; if (!poweredCaptors[captorKey]) { toggleDoorsFromCaptor(currentX, currentY); openedDoors = { ...toggledDoors }; } saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); laserActive = false; }else if(currentLaserColor === laserColors.yellow) { saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); } else { laserActive = false; } break; case legend.rotatorButton: if (currentLaserColor === laserColors.red) { const rotatorKey = `${currentY},${currentX}`; activatedButtons[rotatorKey] = true; activeRotatorButtons[rotatorKey] = true; saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); laserActive = false; } else if (currentLaserColor === laserColors.yellow) { saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); } else if (currentLaserColor === laserColors.blue) { laserDirection = reverseLaser(laserDirection); laserActive = false; } else { laserActive = false; } break; case legend.demiWallCornerUpLeft: if(currentLaserColor === laserColors.blue) { laserDirection = reflectLaser(laserDirection, 135); } break; case legend.demiWallCornerUpRight: if(currentLaserColor === laserColors.blue) { laserDirection = reflectLaser(laserDirection, 45); } break; case legend.demiWallCornerDownLeft: if(currentLaserColor === laserColors.blue) { laserDirection = reflectLaser(laserDirection, 225); } break; case legend.demiWallCornerDownRight: if(currentLaserColor === laserColors.blue) { laserDirection = reflectLaser(laserDirection, 315); } break; default: saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor); break; } } poweredCaptors = nextPoweredCaptors; syncRotatorButtons(); loadGrid(); if (isLevelFinished) { finish(); } } function finish() { setTimeout(() => { const winOverlay = document.querySelector(".win-overlay"); winOverlay.style.visibility = "visible"; }, 100); nextLevel(); } function nextLevel () { currentLevelIndex++; isLevelFinished = false; if (currentLevelIndex >= levels.length) { currentLevelIndex = 0; } initializeMirrorOrientations(); loadGrid(); laserSegments = {}; mirrorOrientations = {}; glassPlacements = {}; activatedButtons = {}; openedDoors = {}; traceLaser(); } function nextLevel() { currentLevelIndex++; isLevelFinished = false; stopAllRotatorButtons(); if (currentLevelIndex >= levels.length) { currentLevelIndex = 0; } initializeMirrorOrientations(); loadGrid(); laserSegments = {}; mirrorOrientations = {}; glassPlacements = {}; activatedButtons = {}; openedDoors = {}; toggledDoors = {}; poweredCaptors = {}; traceLaser(); const winOverlay = document.querySelector(".win-overlay"); winOverlay.style.visibility = "hidden"; } createPalette(); initializeMirrorOrientations(); blockBrowserDrop(); traceLaser();