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; position: relative;
background-color: #2a2a2a; background-color: #2a2a2a;
user-select: none; user-select: none;
overflow: hidden;
} }
.cell.can-drop { .cell.can-drop {
@@ -165,24 +166,31 @@ main {
position: relative; position: relative;
} }
.laser-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.laser-horizontal { .laser-horizontal {
--laser-color: red; --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-vertical {
--laser-color: red; --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-diagonal-down {
--laser-color: red; --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-diagonal-up {
--laser-color: red; --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 { .laser-color-white {
@@ -211,6 +219,7 @@ main {
cursor: pointer; cursor: pointer;
height: 100%; height: 100%;
position: relative; position: relative;
z-index: 3;
} }
.btn-mirror::after { .btn-mirror::after {
@@ -263,6 +272,7 @@ main {
border-radius: 8px; border-radius: 8px;
opacity: 0.9; opacity: 0.9;
pointer-events: none; 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}`]; const segmentData = laserSegments[`${y},${x}`];
if (segmentData) { if (segmentData) {
const segmentDirection = segmentData.direction; const laserDiv = document.createElement("div");
cell.classList.add("light-laser"); laserDiv.classList.add("laser-overlay");
cell.classList.add(getLaserSegmentClass(segmentDirection)); laserDiv.classList.add(getLaserSegmentClass(segmentData.direction));
cell.classList.add(getLaserColorClass(segmentData.color)); laserDiv.classList.add(getLaserColorClass(segmentData.color));
cell.appendChild(laserDiv);
} }
drawGlassInCell(cell, x, y); drawGlassInCell(cell, x, y);
lign.appendChild(cell); lign.appendChild(cell);