Nono/Projet_48h
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add glass palette, colored lasers & UI layout

Browse Source 
Introduce tinted glass mechanic and colored lasers with drag-and-drop palette, plus UI layout and styling. CSS: new game-layout, toolbox, glass-palette, glass-item, cell-glass, laser color classes and many visual tweaks (user-select, drop outline, door/button states). JS: add laserColors, glassOptions, glassPlacements, palette creation, drag/drop/dblclick handlers, block browser drop, saveLaserSegment helper, colored laser tracing (red/blue/yellow/white) including mirror/door/button interactions, button/door grouping and initial mirror angles, and updates to loadGrid to render glass and colorized laser segments. HTML: move map into new main layout and add toolbox palette container. Overall enables placing colored glass to influence laser behavior and updates visuals/interaction accordingly.
This commit is contained in:
Sysy's
2026-03-31 10:53:18 +02:00
parent 75a68a7c75
commit e90a1fc497
3 changed files with 408 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
web/assets/js/game.js
View File

@@ -11,27 +11,60 @@ const legend = {
demiWall: 7,
target: 8,
ligthLaser: 9,
button2: 10,
}
const laserColors = {
white: "white",
red: "red",
blue: "blue",
yellow: "yellow",
};
const glassOptions = [
laserColors.red,
laserColors.blue,
laserColors.yellow,
];
// Grid test
let level1 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 3, 0, 0, 0, 8, 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, 3, 4, 0, 0, 3, 0, 7, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 5, 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, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 3, 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],
[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0],
[1, 0, 0, 0, 3, 5, 3, 0, 8, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]
// Function to save initial orientation of mirrors
const initialMirrorAngles = {
"8,4": 315,
"2,4": 45,
"2,8": 315,
"6,8": 45,
};
const buttonGroups = {
"4,4": 1,
"8,5": 2,
};
const doorGroups = {
"2,5": 1,
"2,6": 2,
};
let laserDirection = { dx: 0, dy: 0 };
let laserSegments = {};
let mirrorOrientations = {};
let glassPlacements = {};
let activatedButtons = {};
let openedDoors = {};
function normalizeLaserDirection(dx, dy) {
const epsilon = 0.0001;
@@ -72,12 +105,166 @@ function getLaserSegmentClass(segmentDirection) {
return "laser-diagonal-up";
}
function getLaserColorClass(color) {
return `laser-color-${color || laserColors.white}`;
}
function reverseLaser(direction) {
return {
dx: direction.dx * -1,
dy: direction.dy * -1,
};
}
function getButtonGroup(x, y) {
const cellType = level1[y][x];
if (cellType === legend.button2) {
return 2;
}
return buttonGroups[`${y},${x}`] || 1;
}
function getDoorGroup(x, y) {
return doorGroups[`${y},${x}`] || 1;
}
function openDoorsFromButton(x, y) {
const buttonGroup = getButtonGroup(x, y);
for (let doorY = 0; doorY < level1.length; doorY++) {
for (let doorX = 0; doorX < level1[doorY].length; doorX++) {
if (level1[doorY][doorX] === legend.door && getDoorGroup(doorX, doorY) === buttonGroup) {
openedDoors[`${doorY},${doorX}`] = true;
}
}
}
}
function saveLaserSegment(x, y, direction, color) {
laserSegments[`${y},${x}`] = {
direction: { ...direction },
color: color,
};
if (level1[y][x] === legend.empty) {
level1[y][x] = legend.ligthLaser;
}
}
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 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("text/plain", glassColor);
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;
}
if (level1[y][x] !== legend.empty && level1[y][x] !== legend.ligthLaser) {
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 (level1[y][x] !== legend.empty && level1[y][x] !== legend.ligthLaser) {
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 = {}; // Reset
for (let y = 0; y < level1.length; y++) {
for (let x = 0; x < level1[y].length; x++) {
if (level1[y][x] === legend.mirror) {
mirrorOrientations[`${y},${x}`] = 0; // Default angle
mirrorOrientations[`${y},${x}`] = initialMirrorAngles[`${y},${x}`] || 0;
}
}
}
@@ -98,6 +285,7 @@ function loadGrid() {
for (let x = 0; x < level1[y].length; x++) {
const cell = document.createElement("div");
cell.classList.add("cell");
addDropEvents(cell, x, y);
switch (level1[y][x]) {
case legend.empty:
@@ -130,9 +318,21 @@ function loadGrid() {
break;
case legend.door:
cell.classList.add("door");
if (openedDoors[`${y},${x}`]) {
cell.classList.add("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.wall:
cell.classList.add("wall");
@@ -144,12 +344,20 @@ function loadGrid() {
cell.classList.add("target");
break;
case legend.ligthLaser:
cell.classList.add("light-laser");
const segmentDirection = laserSegments[`${y},${x}`];
cell.classList.add(getLaserSegmentClass(segmentDirection));
cell.classList.add("empty");
break;
}
const segmentData = laserSegments[`${y},${x}`];
if (segmentData) {
const segmentDirection = segmentData.direction;
cell.classList.add("light-laser");
cell.classList.add(getLaserSegmentClass(segmentDirection));
cell.classList.add(getLaserColorClass(segmentData.color));
}
drawGlassInCell(cell, x, y);
lign.appendChild(cell);
}
@@ -191,6 +399,8 @@ let isLevelFinished = false;
function traceLaser() {
// Reset light laser from previous trace
laserSegments = {};
activatedButtons = {};
openedDoors = {};
for (let y = 0; y < level1.length; y++) {
for (let x = 0; x < level1[y].length; x++) {
if (level1[y][x] === legend.ligthLaser) {
@@ -223,8 +433,10 @@ function traceLaser() {
let currentX = startLaserX;
let currentY = startLaserY;
let laserActive = true;
let currentLaserColor = laserColors.white;
const maxIterations = 1000; // Prevent infinite loops
let iterations = 0;
isLevelFinished = false;
while (laserActive && iterations < maxIterations) {
iterations++;
@@ -239,6 +451,11 @@ function traceLaser() {
}
const cellType = level1[currentY][currentX];
const glassColor = glassPlacements[`${currentY},${currentX}`];
if (glassColor) {
currentLaserColor = glassColor;
}
switch (cellType) {
case legend.laser:
@@ -247,43 +464,73 @@ function traceLaser() {
break;
case legend.empty:
level1[currentY][currentX] = legend.ligthLaser;
laserSegments[`${currentY},${currentX}`] = { ...laserDirection };
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
break;
case legend.target:
level1[currentY][currentX] = legend.ligthLaser;
laserSegments[`${currentY},${currentX}`] = { ...laserDirection };
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
laserActive = false;
isLevelFinished = true;
break;
case legend.mirror:
const mirrorAngle = mirrorOrientations[`${currentY},${currentX}`] || 0;
laserDirection = reflectLaser(laserDirection, mirrorAngle);
if (currentLaserColor === laserColors.yellow) {
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
} else {
const mirrorAngle = mirrorOrientations[`${currentY},${currentX}`] || 0;
laserDirection = reflectLaser(laserDirection, mirrorAngle);
}
break;
case legend.wall:
laserActive = false;
if (currentLaserColor === laserColors.blue) {
laserDirection = reverseLaser(laserDirection);
} else if (currentLaserColor === laserColors.yellow) {
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
} else {
laserActive = false;
}
break;
case legend.demiWall:
laserActive = false;
if (currentLaserColor === laserColors.blue) {
laserDirection = reverseLaser(laserDirection);
} else if (currentLaserColor === laserColors.yellow) {
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
} else {
laserActive = false;
}
break;
case legend.door:
laserActive = false;
if (openedDoors[`${currentY},${currentX}`]) {
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:
level1[currentY][currentX] = legend.ligthLaser;
laserSegments[`${currentY},${currentX}`] = { ...laserDirection };
laserActive = false;
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;
default:
level1[currentY][currentX] = legend.ligthLaser;
laserSegments[`${currentY},${currentX}`] = { ...laserDirection };
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
break;
}
}
@@ -295,6 +542,9 @@ function traceLaser() {
}
}
createPalette();
initializeMirrorOrientations();
blockBrowserDrop();
traceLaser();
// If level finishh -> call this function
@@ -303,5 +553,3 @@ function finish() {
alert("Réussi !");
}, 100);
}