68b6493e50
Introduce a new rotator button tile and mirror auto-rotation feature. CSS adds styles for rotator buttons and locked mirror display. JS: add legend entry and rotatorButtons config, track activeRotatorButtons and rotatorIntervals, implement rotateMirrorStep, isMirrorControlledByButton, syncRotatorButtons and stopAllRotatorButtons; wire rotator behavior into traceLaser and loadGrid so rotator buttons activate intervals that rotate target mirrors automatically and lock out manual rotation. Refactor rotateMirror to reuse rotation step logic and ensure rotator intervals are cleared when advancing levels.
407 lines
8.1 KiB
CSS
407 lines
8.1 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
background: #FFF6E5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: Arial, sans-serif;
|
|
user-select: none;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
border-radius: 150px;
|
|
min-width: fit-content;
|
|
flex-shrink: 0;
|
|
gap: 16px;
|
|
}
|
|
|
|
.game-layout {
|
|
width: min(96vw, 1200px);
|
|
}
|
|
|
|
.game-title {
|
|
font-size: clamp(2rem, 4vw, 3rem);
|
|
font-weight: 700;
|
|
color: #223;
|
|
letter-spacing: 0.04em;
|
|
text-align: center;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.map {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 10px;
|
|
background: #dadeef;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.lign {
|
|
display: flex;
|
|
}
|
|
|
|
.cell {
|
|
width: clamp(28px, 6.2vmin, 72px);
|
|
height: clamp(28px, 6.2vmin, 72px);
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
background-color: #2a2a2a;
|
|
user-select: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.cell.can-drop {
|
|
outline: 2px dashed rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.empty {
|
|
background-color: #dadeef;
|
|
}
|
|
|
|
.empty:hover {
|
|
background-color: #333333;
|
|
}
|
|
|
|
.laser {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/Laser.svg");
|
|
background-size: 80%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.colored-laser {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/Prisme.svg");
|
|
background-size: 80%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.mirror {
|
|
background-color: #DADEEF;
|
|
position: relative;
|
|
overflow: hidden;
|
|
-moz-transform: scaleX(-1);
|
|
-webkit-transform: scaleX(-1);
|
|
-o-transform: scaleX(-1);
|
|
transform: scaleX(-1);
|
|
-ms-filter: fliph; /*IE*/
|
|
filter: fliph; /*IE*/
|
|
}
|
|
|
|
.wall {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/Tuile.svg");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.captor {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/Capteur-1.svg");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.cable {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/CableV.svg");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.door {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/WoodenDoor.svg");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: end;
|
|
}
|
|
|
|
.door-open {
|
|
background-image: url("../img/tiles/WoodenDoor_openned.svg");
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: end;
|
|
}
|
|
|
|
.button {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/ButtonComplete.svg"), url("../img/tiles/Tuile.svg");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.button-2 {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/ButtonQuarter.svg"), url("../img/tiles/Tuile.svg");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.button-rotator {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/ButtonProfile.svg"), url("../img/tiles/Tuile.svg");
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.button-active {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.target {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/Trigger.svg");
|
|
background-size: 80%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.demi-wall-corner-up-left {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/TopLeft.svg");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.demi-wall-corner-up-right {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/TopRight.svg");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.demi-wall-corner-down-left {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/BottomLeft.svg");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.demi-wall-corner-down-right {
|
|
background-color: #DADEEF;
|
|
background-image: url("../img/tiles/BottomRight.svg");
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.laser-color-white {
|
|
--laser-color: #f8f8f8;
|
|
}
|
|
|
|
.laser-color-red {
|
|
--laser-color: #ff3b30;
|
|
}
|
|
|
|
.laser-color-blue {
|
|
--laser-color: #2d7ff9;
|
|
}
|
|
|
|
.laser-color-yellow {
|
|
--laser-color: #ffd400;
|
|
}
|
|
|
|
.btn-mirror {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.btn-mirror-locked {
|
|
cursor: default;
|
|
}
|
|
|
|
.mirror-img {
|
|
width: 80%;
|
|
height: 80%;
|
|
object-fit: contain;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.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;
|
|
color: #223;
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.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;
|
|
z-index: 4;
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.map {
|
|
padding: 5px;
|
|
}
|
|
|
|
main {
|
|
padding: 8px;
|
|
}
|
|
}
|
|
|
|
.win-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
z-index: 1000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
visibility: hidden;
|
|
gap: 20px;
|
|
backdrop-filter: blur(6px);
|
|
|
|
}
|
|
|
|
.win-overlay h1 {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.win-overlay p {
|
|
font-size: 1.5rem;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
text-align: center;
|
|
}
|
|
|
|
.win-overlay button {
|
|
font-size: 1.5rem;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
background-color: #fff;
|
|
color: #000;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|