Add glass palette, colored lasers & UI layout

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

View File

@@ -9,7 +9,6 @@
<script>(function(s){s.dataset.zone='10809853',s.src='https://nap5k.com/tag.min.js'})([document.documentElement, document.body].filter(Boolean).pop().appendChild(document.createElement('script')))</script>
</head>
<body>
<div id="map" class="map"></div>
<script>
atOptions = {
'key' : '72b6ba1a1c26b9671167b66063c7e699',
@@ -21,6 +20,14 @@
</script>
<script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
<main class="game-layout">
<div id="map" class="map"></div>
<section class="toolbox">
<h2>Vitres tintées</h2>
<div id="glass-palette" class="glass-palette"></div>
</section>
</main>
<script src="../../assets/js/game.js" defer></script>
</body>