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

Add laser overlay to not erase button etc

Browse Source
This commit is contained in:
Sysy's
2026-03-31 10:59:52 +02:00
parent e90a1fc497
commit 65bd05d47c
2 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/assets/css/game.css
View File

@@ -95,6 +95,7 @@ main {
position: relative;
background-color: #2a2a2a;
user-select: none;
overflow: hidden;
}
.cell.can-drop {
@@ -165,24 +166,31 @@ main {
position: relative;
}
.laser-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.laser-horizontal {
--laser-color: red;
background: linear-gradient(to bottom, transparent 0%, transparent 45%, var(--laser-color) 45%, var(--laser-color) 55%, transparent 55%, transparent 100%), #DADEEF
background: linear-gradient(to bottom, transparent 0%, transparent 45%, var(--laser-color) 45%, var(--laser-color) 55%, transparent 55%, transparent 100%);
}
.laser-vertical {
--laser-color: red;
background: linear-gradient(to right, transparent 0%, transparent 45%, var(--laser-color) 45%, var(--laser-color) 55%, transparent 55%, transparent 100%), #DADEEF;
background: linear-gradient(to right, transparent 0%, transparent 45%, var(--laser-color) 45%, var(--laser-color) 55%, transparent 55%, transparent 100%);
}
.laser-diagonal-down {
--laser-color: red;
background: linear-gradient(45deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%), #DADEEF;
background: linear-gradient(45deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%);
}
.laser-diagonal-up {
--laser-color: red;
background: linear-gradient(135deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%), #DADEEF;
background: linear-gradient(135deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%);
}
.laser-color-white {
@@ -211,6 +219,7 @@ main {
cursor: pointer;
height: 100%;
position: relative;
z-index: 3;
}
.btn-mirror::after {
@@ -263,6 +272,7 @@ main {
border-radius: 8px;
opacity: 0.9;
pointer-events: none;
z-index: 4;
}
/* ================================

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

@@ -350,12 +350,12 @@ function loadGrid() {
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));
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);
}
drawGlassInCell(cell, x, y);
lign.appendChild(cell);