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

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

@@ -17,6 +17,7 @@ body {
align-items: center;
justify-content: center;
font-family: 'Arial', sans-serif;
user-select: none;
}
main {
@@ -28,6 +29,36 @@ main {
border-radius: 10px;
min-width: fit-content;
flex-shrink: 0;
gap: 16px;
}
.game-layout {
width: min(95vw, 1000px);
}
.toolbox {
width: 100%;
background: #dfe5f8;
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.toolbox h2 {
font-size: 1rem;
}
.toolbox p {
font-size: 0.9rem;
color: #334;
}
.glass-palette {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* ================================
@@ -63,6 +94,11 @@ main {
margin: 0;
position: relative;
background-color: #2a2a2a;
user-select: none;
}
.cell.can-drop {
outline: 2px dashed rgba(0, 0, 0, 0.2);
}
/* ================================
@@ -78,7 +114,12 @@ main {
}
.laser {
background-color: #FFD700;
background-color: #f5f5f5;
border: 2px solid #d8d8d8;
}
.colored-laser {
background-color: #ffa726;
}
.mirror {
@@ -92,6 +133,26 @@ main {
background-color: #0729c0;
}
.door {
background-color: #6d4c41;
}
.door-open {
background-color: #bca89c;
}
.button {
background-color: #7cb342;
}
.button-2 {
background-color: #ff8f00;
}
.button-active {
background-color: #c6ff00;
}
.target {
background: #00FF00;
}
@@ -105,19 +166,39 @@ main {
}
.laser-horizontal {
background: linear-gradient(to bottom, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #DADEEF
--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
}
.laser-vertical {
background: linear-gradient(to right, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #DADEEF;
--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;
}
.laser-diagonal-down {
background: linear-gradient(45deg, transparent 0%, transparent 46%, red 46%, red 54%, transparent 54%, transparent 100%), #DADEEF;
--laser-color: red;
background: linear-gradient(45deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%), #DADEEF;
}
.laser-diagonal-up {
background: linear-gradient(135deg, transparent 0%, transparent 46%, red 46%, red 54%, transparent 54%, transparent 100%), #DADEEF;
--laser-color: red;
background: linear-gradient(135deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%), #DADEEF;
}
.laser-color-white {
--laser-color: #f8f8f8;
}
.laser-color-red {
--laser-color: #ff3b30;
}
.laser-color-blue {
--laser-color: #2d7ff9;
}
.laser-color-yellow {
--laser-color: #ffd400;
}
/* ================================
@@ -143,6 +224,47 @@ main {
transform-origin: center;
}
.glass-item {
width: 54px;
height: 54px;
border: none;
border-radius: 10px;
cursor: grab;
position: relative;
box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1);
user-select: none;
}
.glass-item::after,
.cell-glass::after {
content: '';
position: absolute;
inset: 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.45);
border: 1px solid rgba(255, 255, 255, 0.8);
}
.glass-red {
background: rgba(255, 59, 48, 0.85);
}
.glass-blue {
background: rgba(45, 127, 249, 0.85);
}
.glass-yellow {
background: rgba(255, 212, 0, 0.9);
}
.cell-glass {
position: absolute;
inset: 5px;
border-radius: 8px;
opacity: 0.9;
pointer-events: none;
}
/* ================================
RESPONSIVE
================================ */