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

Compare commits

base: Nono:edea5e097209803aa080426dc7fe40ec517f1c77
Branches Tags
Nono:main Nono:feature/level4 Nono:feature/grid Nono:update/ui Nono:feature/lasers Nono:backend-axum Nono:feature/mirror Nono:feature/main-page
..
compare: Nono:feature/lasers
Branches Tags
Nono:main Nono:feature/level4 Nono:feature/grid Nono:update/ui Nono:feature/lasers Nono:backend-axum Nono:feature/mirror Nono:feature/main-page

5 Commits
edea5e0972 ... feature/la

Author SHA1 Message Date
Sysy's
65bd05d47c Add laser overlay to not erase button etc 2026-03-31 10:59:52 +02:00
Sysy's
e90a1fc497 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.
 2026-03-31 10:53:18 +02:00
Sysy's
75a68a7c75 Add ads to the main game page 2026-03-31 10:27:44 +02:00
Sysy's
731d040e89 Remove index & change walls colors 2026-03-31 09:52:51 +02:00
Sysy's
5620fade9c Prevent rotation after level ending 2026-03-31 09:50:07 +02:00
43 changed files with 218 additions and 1406 deletions
Expand all files Collapse all files

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

@@ -12,11 +12,11 @@ body {
}
body {
background: #FFF6E5;
background: #f7f7f7;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, sans-serif;
font-family: 'Arial', sans-serif;
user-select: none;
}
@@ -26,22 +26,14 @@ main {
align-items: center;
justify-content: center;
padding: 20px;
border-radius: 150px;
border-radius: 10px;
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;
width: min(95vw, 1000px);
}
.toolbox {
@@ -69,25 +61,37 @@ main {
flex-wrap: wrap;
}
/* ================================
GRID
================================ */
.map {
display: flex;
flex-direction: column;
gap: 0px;
padding: 10px;
background: #dadeef;
border-radius: 15px;
background: #DADEEF;
border-radius: 5px;
}
.lign {
display: flex;
gap: 0px;
margin: 0;
}
/* ================================
CELLS
================================ */
.cell {
width: clamp(28px, 6.2vmin, 72px);
height: clamp(28px, 6.2vmin, 72px);
width: clamp(28px, 5.5vmin, 60px);
height: clamp(28px, 5.5vmin, 60px);
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
position: relative;
background-color: #2a2a2a;
user-select: none;
@@ -98,8 +102,12 @@ main {
outline: 2px dashed rgba(0, 0, 0, 0.2);
}
/* ================================
CASES TYPE
================================ */
.empty {
background-color: #dadeef;
background-color: #DADEEF;
}
.empty:hover {
@@ -107,157 +115,55 @@ main {
}
.laser {
background-color: #DADEEF;
background-image: url("../img/tiles/Laser.svg");
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
transform: rotate(180deg);
background-color: #f5f5f5;
border: 2px solid #d8d8d8;
}
.colored-laser {
background-color: #DADEEF;
background-image: url("../img/tiles/Prisme.svg");
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
background-color: #ffa726;
}
.mirror {
background-color: #DADEEF;
border-color: #444444;
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);
}
.captor-turn {
background-color: #DADEEF;
background-image: url("../img/tiles/Capteur-2.svg");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
}
.cable {
background-color: #DADEEF;
background-image: url("../img/tiles/CableV.svg");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
transform: rotate(90deg);
}
.cable-vertical {
background-color: #DADEEF;
background-image: url("../img/tiles/CableV.svg");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
background-color: #0729c0;
}
.door {
background-color: #DADEEF;
background-image: url("../img/tiles/WoodenDoor.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: end;
background-color: #6d4c41;
}
.door-open {
background-image: url("../img/tiles/WoodenDoor_openned.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: end;
background-color: #bca89c;
}
.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;
background-color: #7cb342;
}
.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;
background-color: #ff8f00;
}
.button-active {
opacity: 0.7;
background-color: #c6ff00;
}
.target {
background-color: #DADEEF;
background-image: url("../img/tiles/Trigger.svg");
background-size: 80%;
background-repeat: no-repeat;
background-position: center;
background: #00FF00;
}
.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;
}
/* ================================
LIGHT LASER
================================ */
.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;
.light-laser {
position: relative;
}
.laser-overlay {
@@ -274,7 +180,7 @@ main {
.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%);
background: linear-gradient(to right, transparent 0%, transparent 45%, var(--laser-color) 45%, var(--laser-color) 55%, transparent 55%, transparent 100%);
}
.laser-diagonal-down {
@@ -303,28 +209,28 @@ main {
--laser-color: #ffd400;
}
/* ================================
MIRROR
================================ */
.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 {
.btn-mirror::after {
content: '';
position: absolute;
top: 50%;
left: 10%;
width: 80%;
height: 80%;
object-fit: contain;
pointer-events: none;
height: 2px;
background-color: #aaaaaa;
transform-origin: center;
}
.glass-item {
@@ -336,14 +242,11 @@ main {
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: "";
content: '';
position: absolute;
inset: 10px;
border-radius: 8px;
@@ -372,9 +275,14 @@ main {
z-index: 4;
}
/* ================================
RESPONSIVE
================================ */
@media (max-width: 600px) {
.map {
padding: 5px;
border-radius: 3px;
}
main {
@@ -382,41 +290,8 @@ main {
}
}
.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;
@media (max-height: 500px) {
.map {
padding: 4px;
}
}

9
web/assets/img/tiles/BlueMirror.svg
View File

@@ -1,9 +0,0 @@
<svg width="20" height="200" viewBox="0 0 20 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="10" cy="100" rx="10" ry="100" fill="url(#paint0_linear_25_4)"/>
<defs>
<linearGradient id="paint0_linear_25_4" x1="-8.46573" y1="60.2496" x2="61.4687" y2="123.939" gradientUnits="userSpaceOnUse">
<stop stop-color="#3C62E2" stop-opacity="0.4"/>
<stop offset="1" stop-color="#00137C" stop-opacity="0.4"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 447 B

19
web/assets/img/tiles/BottomLeft-1.svg
View File

@@ -1,19 +0,0 @@
<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 49V1.61816L95.7637 49L1 49Z" fill="url(#paint0_linear_19_240)" stroke="url(#paint1_linear_19_240)" stroke-width="2"/>
<circle cx="5.5" cy="44.5" r="1.5" transform="rotate(-180 5.5 44.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="44.5" r="1" transform="rotate(-180 5.5 44.5)" fill="#898989"/>
<circle cx="4.5" cy="8.5" r="1.5" transform="rotate(-180 4.5 8.5)" fill="#4A4A4A"/>
<circle cx="4.5" cy="8.5" r="1" transform="rotate(-180 4.5 8.5)" fill="#898989"/>
<circle cx="77.5" cy="44.5" r="1.5" transform="rotate(-180 77.5 44.5)" fill="#4A4A4A"/>
<circle cx="77.5" cy="44.5" r="1" transform="rotate(-180 77.5 44.5)" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_240" x1="0" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_240" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
web/assets/img/tiles/BottomLeft-2.svg
View File

@@ -1,19 +0,0 @@
<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M49 99L1.61816 99L49 4.23633L49 99Z" fill="url(#paint0_linear_19_286)" stroke="url(#paint1_linear_19_286)" stroke-width="2"/>
<circle cx="44.5" cy="94.5" r="1.5" transform="rotate(90 44.5 94.5)" fill="#4A4A4A"/>
<circle cx="44.5" cy="94.5" r="1" transform="rotate(90 44.5 94.5)" fill="#898989"/>
<circle cx="8.5" cy="95.5" r="1.5" transform="rotate(90 8.5 95.5)" fill="#4A4A4A"/>
<circle cx="8.5" cy="95.5" r="1" transform="rotate(90 8.5 95.5)" fill="#898989"/>
<circle cx="44.5" cy="22.5" r="1.5" transform="rotate(90 44.5 22.5)" fill="#4A4A4A"/>
<circle cx="44.5" cy="22.5" r="1" transform="rotate(90 44.5 22.5)" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_286" x1="0" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_286" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
web/assets/img/tiles/BottomLeft.svg
View File

@@ -1,19 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 99L1 2.41406L97.5859 99L1 99Z" fill="url(#paint0_linear_17_89)" stroke="url(#paint1_linear_17_89)" stroke-width="2"/>
<circle cx="5.5" cy="94.5" r="1.5" transform="rotate(-180 5.5 94.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" transform="rotate(-180 5.5 94.5)" fill="#898989"/>
<circle cx="5.5" cy="13.5" r="1.5" transform="rotate(-180 5.5 13.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="13.5" r="1" transform="rotate(-180 5.5 13.5)" fill="#898989"/>
<circle cx="86.5" cy="94.5" r="1.5" transform="rotate(-180 86.5 94.5)" fill="#4A4A4A"/>
<circle cx="86.5" cy="94.5" r="1" transform="rotate(-180 86.5 94.5)" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_17_89" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_17_89" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
web/assets/img/tiles/BottomRight-1.svg
View File

@@ -1,19 +0,0 @@
<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M99 49L4.23633 49L99 1.61816V49Z" fill="url(#paint0_linear_19_273)" stroke="url(#paint1_linear_19_273)" stroke-width="2"/>
<circle cx="94.5" cy="44.5" r="1.5" transform="rotate(90 94.5 44.5)" fill="#4A4A4A"/>
<circle cx="94.5" cy="44.5" r="1" transform="rotate(90 94.5 44.5)" fill="#898989"/>
<circle cx="22.5" cy="44.5" r="1.5" transform="rotate(90 22.5 44.5)" fill="#4A4A4A"/>
<circle cx="22.5" cy="44.5" r="1" transform="rotate(90 22.5 44.5)" fill="#898989"/>
<circle cx="94.5" cy="9.5" r="1.5" transform="rotate(90 94.5 9.5)" fill="#4A4A4A"/>
<circle cx="94.5" cy="9.5" r="1" transform="rotate(90 94.5 9.5)" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_273" x1="8.9407e-06" y1="1.49012e-06" x2="40" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_273" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
web/assets/img/tiles/BottomRight-2.svg
View File

@@ -1,19 +0,0 @@
<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M49 1V95.7637L1.61818 1H49Z" fill="url(#paint0_linear_19_319)" stroke="url(#paint1_linear_19_319)" stroke-width="2"/>
<circle cx="44.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="44.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="44.5" cy="77.5" r="1.5" fill="#4A4A4A"/>
<circle cx="44.5" cy="77.5" r="1" fill="#898989"/>
<circle cx="9.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="9.5" cy="5.5" r="1" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_319" x1="1.14441e-05" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_319" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 947 B

19
web/assets/img/tiles/BottomRight.svg
View File

@@ -1,19 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M99 99H2.41406L99 2.41406V99Z" fill="url(#paint0_linear_19_190)" stroke="url(#paint1_linear_19_190)" stroke-width="2"/>
<circle cx="94.5" cy="94.5" r="1.5" transform="rotate(90 94.5 94.5)" fill="#4A4A4A"/>
<circle cx="94.5" cy="94.5" r="1" transform="rotate(90 94.5 94.5)" fill="#898989"/>
<circle cx="13.5" cy="94.5" r="1.5" transform="rotate(90 13.5 94.5)" fill="#4A4A4A"/>
<circle cx="13.5" cy="94.5" r="1" transform="rotate(90 13.5 94.5)" fill="#898989"/>
<circle cx="94.5" cy="13.5" r="1.5" transform="rotate(90 94.5 13.5)" fill="#4A4A4A"/>
<circle cx="94.5" cy="13.5" r="1" transform="rotate(90 94.5 13.5)" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_190" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_190" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

27
web/assets/img/tiles/ButtonComplete.svg
View File

@@ -1,27 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M50 1H99V99H50C22.938 99 1 77.062 1 50C1 22.938 22.938 1 50 1Z" fill="url(#paint0_linear_19_364)" stroke="url(#paint1_linear_19_364)" stroke-width="2"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="50" cy="50" r="30" fill="url(#paint2_linear_19_364)"/>
<circle cx="50" cy="50" r="25" fill="url(#paint3_linear_19_364)"/>
<defs>
<linearGradient id="paint0_linear_19_364" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_364" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
<linearGradient id="paint2_linear_19_364" x1="20" y1="80" x2="80" y2="20" gradientUnits="userSpaceOnUse">
<stop stop-color="#F88484"/>
<stop offset="1" stop-color="#B03232"/>
</linearGradient>
<linearGradient id="paint3_linear_19_364" x1="25" y1="25" x2="75" y2="75" gradientUnits="userSpaceOnUse">
<stop stop-color="#F88484"/>
<stop offset="1" stop-color="#B03232"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

24
web/assets/img/tiles/ButtonProfile.svg
View File

@@ -1,24 +0,0 @@
<svg width="100" height="30" viewBox="0 0 100 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect y="20" width="100" height="10" fill="url(#paint0_linear_19_205)"/>
<path d="M80 10L100 20H0L20 10H80Z" fill="url(#paint1_linear_19_205)"/>
<path d="M25 5H75V10H25V5Z" fill="url(#paint2_linear_19_205)"/>
<path d="M70 0L75 5H25L30 0H70Z" fill="url(#paint3_linear_19_205)"/>
<defs>
<linearGradient id="paint0_linear_19_205" x1="0" y1="25" x2="100" y2="25" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9D9D9"/>
<stop offset="1" stop-color="#737373"/>
</linearGradient>
<linearGradient id="paint1_linear_19_205" x1="20" y1="10" x2="80" y2="10" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9D9D9"/>
<stop offset="1" stop-color="#737373"/>
</linearGradient>
<linearGradient id="paint2_linear_19_205" x1="25" y1="7.5" x2="75" y2="7.5" gradientUnits="userSpaceOnUse">
<stop stop-color="#F88484"/>
<stop offset="1" stop-color="#B03232"/>
</linearGradient>
<linearGradient id="paint3_linear_19_205" x1="30" y1="-5.5879e-10" x2="70" y2="-8.54951e-08" gradientUnits="userSpaceOnUse">
<stop stop-color="#F88484"/>
<stop offset="1" stop-color="#B03232"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

29
web/assets/img/tiles/ButtonQuarter.svg
View File

@@ -1,29 +0,0 @@
<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M79 1V78.9932C36.1632 78.4618 1.53823 43.8368 1.00684 1H79Z" fill="url(#paint0_linear_21_561)" stroke="url(#paint1_linear_21_561)" stroke-width="2"/>
<circle cx="74.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="74.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="6.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="6.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="74.5" cy="73.5" r="1.5" fill="#3C3C3C"/>
<circle cx="74.5" cy="73.5" r="1" fill="#898989"/>
<circle cx="46" cy="34" r="20" fill="url(#paint2_linear_21_561)"/>
<circle cx="46" cy="34" r="16.6667" fill="url(#paint3_linear_21_561)"/>
<defs>
<linearGradient id="paint0_linear_21_561" x1="0" y1="0" x2="80" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_21_561" x1="80" y1="80" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
<linearGradient id="paint2_linear_21_561" x1="26" y1="54" x2="66" y2="14" gradientUnits="userSpaceOnUse">
<stop stop-color="#F88484"/>
<stop offset="1" stop-color="#B03232"/>
</linearGradient>
<linearGradient id="paint3_linear_21_561" x1="29.3333" y1="17.3333" x2="62.6667" y2="50.6667" gradientUnits="userSpaceOnUse">
<stop stop-color="#F88484"/>
<stop offset="1" stop-color="#B03232"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

22
web/assets/img/tiles/CableBottomLeft.svg
View File

@@ -1,22 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_417)" stroke="url(#paint1_linear_21_417)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<path d="M58 100H42V58H0V42H58V100Z" fill="#FF8282"/>
<defs>
<linearGradient id="paint0_linear_21_417" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_21_417" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

22
web/assets/img/tiles/CableBottomRight.svg
View File

@@ -1,22 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_385)" stroke="url(#paint1_linear_21_385)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<path d="M100 42V58H58V100H42V42H100Z" fill="#FF8282"/>
<defs>
<linearGradient id="paint0_linear_21_385" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_21_385" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

22
web/assets/img/tiles/CableH.svg
View File

@@ -1,22 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_545)" stroke="url(#paint1_linear_21_545)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<rect y="42" width="100" height="16" fill="#FF8282"/>
<defs>
<linearGradient id="paint0_linear_21_545" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_21_545" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

22
web/assets/img/tiles/CableTopLeft.svg
View File

@@ -1,22 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_449)" stroke="url(#paint1_linear_21_449)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<path d="M0 58V42L42 42L42 0L58 0L58 58L0 58Z" fill="#FF8282"/>
<defs>
<linearGradient id="paint0_linear_21_449" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_21_449" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

22
web/assets/img/tiles/CableTopRight.svg
View File

@@ -1,22 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_433)" stroke="url(#paint1_linear_21_433)" stroke-width="2"/>
<circle cx="5.5" cy="4.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="4.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="93.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="93.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="4.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="4.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="93.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="93.5" r="1" fill="#898989"/>
<path d="M42 0H58L58 42H100V58L42 58L42 0Z" fill="#FF8282"/>
<defs>
<linearGradient id="paint0_linear_21_433" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_21_433" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

22
web/assets/img/tiles/CableV.svg
View File

@@ -1,22 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_529)" stroke="url(#paint1_linear_21_529)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<rect x="42" width="16" height="100" fill="#FF8282"/>
<defs>
<linearGradient id="paint0_linear_21_529" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_21_529" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

22
web/assets/img/tiles/Capteur-1.svg
View File

@@ -1,22 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_23_646)" stroke="url(#paint1_linear_23_646)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<path d="M30 42H100V58H30L0 90V10L30 42Z" fill="#FF8282"/>
<defs>
<linearGradient id="paint0_linear_23_646" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_23_646" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

22
web/assets/img/tiles/Capteur-2.svg
View File

@@ -1,22 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_23_626)" stroke="url(#paint1_linear_23_626)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<path d="M58 100H42V58H30L0 90V10L30 42H58V100Z" fill="#FF8282"/>
<defs>
<linearGradient id="paint0_linear_23_626" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_23_626" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

22
web/assets/img/tiles/Capteur.svg
View File

@@ -1,22 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_21_599)" stroke="url(#paint1_linear_21_599)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30 42H42V0H58V58H30L0 90V10L30 42Z" fill="#FF8282"/>
<defs>
<linearGradient id="paint0_linear_21_599" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_21_599" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

21
web/assets/img/tiles/HorizontaleSemi.svg
View File

@@ -1,21 +0,0 @@
<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="48" fill="url(#paint0_linear_19_332)" stroke="url(#paint1_linear_19_332)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="44.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="44.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="44.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="44.5" r="1" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_332" x1="0" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_332" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

44
web/assets/img/tiles/Laser.svg
View File

@@ -1,44 +0,0 @@
<svg width="300" height="100" viewBox="0 0 300 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="172" y="90" width="80" height="30" transform="rotate(-90 172 90)" fill="url(#paint0_linear_17_26)"/>
<rect x="202" y="100" width="100" height="98" transform="rotate(-90 202 100)" fill="url(#paint1_linear_17_26)"/>
<rect x="122" y="100" width="100" height="50" transform="rotate(-90 122 100)" fill="url(#paint2_linear_17_26)"/>
<rect x="92" y="90" width="80" height="30" transform="rotate(-90 92 90)" fill="url(#paint3_linear_17_26)"/>
<rect x="42" y="100" width="100" height="50" transform="rotate(-90 42 100)" fill="url(#paint4_linear_17_26)"/>
<rect x="22" y="90" width="80" height="20" transform="rotate(-90 22 90)" fill="url(#paint5_linear_17_26)"/>
<path d="M2 30L22 10L22 90L2 70L2 30Z" fill="url(#paint6_linear_17_26)"/>
<rect y="60" width="20" height="2" transform="rotate(-90 0 60)" fill="url(#paint7_linear_17_26)"/>
<defs>
<linearGradient id="paint0_linear_17_26" x1="172" y1="105" x2="252" y2="105" gradientUnits="userSpaceOnUse">
<stop offset="0.177885" stop-color="#484848"/>
<stop offset="0.725962" stop-color="#AEAEAE"/>
</linearGradient>
<linearGradient id="paint1_linear_17_26" x1="202" y1="149" x2="302" y2="149" gradientUnits="userSpaceOnUse">
<stop offset="0.125" stop-color="#2D2D2D"/>
<stop offset="0.745192" stop-color="#939393"/>
</linearGradient>
<linearGradient id="paint2_linear_17_26" x1="122" y1="125" x2="222" y2="125" gradientUnits="userSpaceOnUse">
<stop offset="0.125" stop-color="#2D2D2D"/>
<stop offset="0.745192" stop-color="#939393"/>
</linearGradient>
<linearGradient id="paint3_linear_17_26" x1="92" y1="105" x2="172" y2="105" gradientUnits="userSpaceOnUse">
<stop offset="0.177885" stop-color="#484848"/>
<stop offset="0.725962" stop-color="#AEAEAE"/>
</linearGradient>
<linearGradient id="paint4_linear_17_26" x1="42" y1="125" x2="142" y2="125" gradientUnits="userSpaceOnUse">
<stop offset="0.125" stop-color="#2D2D2D"/>
<stop offset="0.745192" stop-color="#939393"/>
</linearGradient>
<linearGradient id="paint5_linear_17_26" x1="22" y1="100" x2="102" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0.177885" stop-color="#484848"/>
<stop offset="0.725962" stop-color="#AEAEAE"/>
</linearGradient>
<linearGradient id="paint6_linear_17_26" x1="2" y1="70" x2="2" y2="30" gradientUnits="userSpaceOnUse">
<stop offset="0.177885" stop-color="#484848"/>
<stop offset="1" stop-color="#AEAEAE"/>
</linearGradient>
<linearGradient id="paint7_linear_17_26" x1="-42.5" y1="61" x2="61" y2="61" gradientUnits="userSpaceOnUse">
<stop offset="0.225962" stop-color="#484848"/>
<stop offset="1" stop-color="#AEAEAE"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

46
web/assets/img/tiles/MetalDoor.svg
View File

@@ -1,46 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="88" height="98" fill="url(#paint0_linear_29_15)" stroke="url(#paint1_linear_29_15)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="81.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="81.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="81.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="81.5" cy="94.5" r="1" fill="#898989"/>
<rect x="90" width="10" height="100" fill="url(#paint2_linear_29_15)"/>
<rect x="85" y="4" width="8" height="4" fill="url(#paint3_linear_29_15)"/>
<rect x="85" y="92" width="8" height="4" fill="url(#paint4_linear_29_15)"/>
<rect x="85" y="64" width="8" height="4" fill="url(#paint5_linear_29_15)"/>
<rect x="85" y="32" width="8" height="4" fill="url(#paint6_linear_29_15)"/>
<defs>
<linearGradient id="paint0_linear_29_15" x1="0" y1="0" x2="99.4475" y2="89.5028" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_29_15" x1="90" y1="100" x2="-9.44751" y2="10.4972" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
<linearGradient id="paint2_linear_29_15" x1="100" y1="50" x2="90" y2="50" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9D9D9"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
<linearGradient id="paint3_linear_29_15" x1="93" y1="6" x2="85" y2="6" gradientUnits="userSpaceOnUse">
<stop stop-color="#474747"/>
<stop offset="1" stop-color="#ADADAD"/>
</linearGradient>
<linearGradient id="paint4_linear_29_15" x1="93" y1="94" x2="85" y2="94" gradientUnits="userSpaceOnUse">
<stop stop-color="#474747"/>
<stop offset="1" stop-color="#ADADAD"/>
</linearGradient>
<linearGradient id="paint5_linear_29_15" x1="93" y1="66" x2="85" y2="66" gradientUnits="userSpaceOnUse">
<stop stop-color="#474747"/>
<stop offset="1" stop-color="#ADADAD"/>
</linearGradient>
<linearGradient id="paint6_linear_29_15" x1="93" y1="34" x2="85" y2="34" gradientUnits="userSpaceOnUse">
<stop stop-color="#474747"/>
<stop offset="1" stop-color="#ADADAD"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.3 KiB

15
web/assets/img/tiles/MetalMirror.svg
View File

@@ -1,15 +0,0 @@
<svg width="40" height="200" viewBox="0 0 40 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 2C20.6534 2 21.5184 2.3224 22.6006 3.42969C23.686 4.54032 24.8285 6.28601 25.9766 8.71387C28.2679 13.5596 30.3842 20.6991 32.1807 29.6816C35.7671 47.6141 38 72.4764 38 100C38 127.524 35.7671 152.386 32.1807 170.318C30.3842 179.301 28.2679 186.44 25.9766 191.286C24.8285 193.714 23.686 195.46 22.6006 196.57C21.5184 197.678 20.6534 198 20 198C19.3466 198 18.4816 197.678 17.3994 196.57C16.314 195.46 15.1715 193.714 14.0234 191.286C11.7321 186.44 9.61584 179.301 7.81934 170.318C4.23285 152.386 2 127.524 2 100C2 72.4764 4.23285 47.6141 7.81934 29.6816C9.61584 20.6991 11.7321 13.5596 14.0234 8.71387C15.1715 6.28601 16.314 4.54032 17.3994 3.42969C18.4816 2.3224 19.3466 2 20 2Z" fill="url(#paint0_linear_29_61)" stroke="url(#paint1_linear_29_61)" stroke-width="4"/>
<defs>
<linearGradient id="paint0_linear_29_61" x1="-16.9315" y1="60.2496" x2="42.3327" y2="168.193" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#84A3B3"/>
</linearGradient>
<linearGradient id="paint1_linear_29_61" x1="20" y1="0" x2="19.4598" y2="193.684" gradientUnits="userSpaceOnUse">
<stop stop-color="#B9B9B9"/>
<stop offset="0.336163" stop-color="#6E6E6E"/>
<stop offset="0.609062" stop-color="#B9B9B9"/>
<stop offset="1" stop-color="#6E6E6E"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

15
web/assets/img/tiles/Mirror.svg
View File

@@ -1,15 +0,0 @@
<svg width="40" height="200" viewBox="0 0 40 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 2C20.6534 2 21.5184 2.3224 22.6006 3.42969C23.686 4.54032 24.8285 6.28601 25.9766 8.71387C28.2679 13.5596 30.3842 20.6991 32.1807 29.6816C35.7671 47.6141 38 72.4764 38 100C38 127.524 35.7671 152.386 32.1807 170.318C30.3842 179.301 28.2679 186.44 25.9766 191.286C24.8285 193.714 23.686 195.46 22.6006 196.57C21.5184 197.678 20.6534 198 20 198C19.3466 198 18.4816 197.678 17.3994 196.57C16.314 195.46 15.1715 193.714 14.0234 191.286C11.7321 186.44 9.61584 179.301 7.81934 170.318C4.23285 152.386 2 127.524 2 100C2 72.4764 4.23285 47.6141 7.81934 29.6816C9.61584 20.6991 11.7321 13.5596 14.0234 8.71387C15.1715 6.28601 16.314 4.54032 17.3994 3.42969C18.4816 2.3224 19.3466 2 20 2Z" fill="url(#paint0_linear_4_13)" stroke="url(#paint1_linear_4_13)" stroke-width="4"/>
<defs>
<linearGradient id="paint0_linear_4_13" x1="-16.9315" y1="60.2496" x2="42.3327" y2="168.193" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#84A3B3"/>
</linearGradient>
<linearGradient id="paint1_linear_4_13" x1="20" y1="0" x2="19.4598" y2="193.684" gradientUnits="userSpaceOnUse">
<stop stop-color="#603C18"/>
<stop offset="0.336163" stop-color="#885B2E"/>
<stop offset="0.609062" stop-color="#603C18"/>
<stop offset="1" stop-color="#885B2E"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

3
web/assets/img/tiles/Prisme.svg
View File

@@ -1,3 +0,0 @@
<svg width="87" height="75" viewBox="0 0 87 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M43.3013 0L86.6025 75H0L43.3013 0Z" fill="#D9D9D9" fill-opacity="0.4"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 184 B

9
web/assets/img/tiles/RedMirror.svg
View File

@@ -1,9 +0,0 @@
<svg width="20" height="200" viewBox="0 0 20 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="10" cy="100" rx="10" ry="100" fill="url(#paint0_linear_25_10)"/>
<defs>
<linearGradient id="paint0_linear_25_10" x1="-8.46573" y1="60.2496" x2="61.4687" y2="123.939" gradientUnits="userSpaceOnUse">
<stop stop-color="#E23C3C" stop-opacity="0.4"/>
<stop offset="1" stop-color="#7C0000" stop-opacity="0.4"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 449 B

19
web/assets/img/tiles/TopLeft-1.svg
View File

@@ -1,19 +0,0 @@
<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1L95.7637 1L1 48.3818L1 1Z" fill="url(#paint0_linear_19_251)" stroke="url(#paint1_linear_19_251)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" transform="rotate(-90 5.5 5.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="5.5" r="1" transform="rotate(-90 5.5 5.5)" fill="#898989"/>
<circle cx="76.5" cy="5.5" r="1.5" transform="rotate(-90 76.5 5.5)" fill="#4A4A4A"/>
<circle cx="76.5" cy="5.5" r="1" transform="rotate(-90 76.5 5.5)" fill="#898989"/>
<circle cx="5.5" cy="40.5" r="1.5" transform="rotate(-90 5.5 40.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="40.5" r="1" transform="rotate(-90 5.5 40.5)" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_251" x1="0" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_251" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
web/assets/img/tiles/TopLeft-2.svg
View File

@@ -1,19 +0,0 @@
<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 99L1 4.23633L48.3818 99H1Z" fill="url(#paint0_linear_19_297)" stroke="url(#paint1_linear_19_297)" stroke-width="2"/>
<circle cx="5.5" cy="94.5" r="1.5" transform="rotate(-180 5.5 94.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" transform="rotate(-180 5.5 94.5)" fill="#898989"/>
<circle cx="5.5" cy="23.5" r="1.5" transform="rotate(-180 5.5 23.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="23.5" r="1" transform="rotate(-180 5.5 23.5)" fill="#898989"/>
<circle cx="40.5" cy="94.5" r="1.5" transform="rotate(-180 40.5 94.5)" fill="#4A4A4A"/>
<circle cx="40.5" cy="94.5" r="1" transform="rotate(-180 40.5 94.5)" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_297" x1="0" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_297" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
web/assets/img/tiles/TopLeft.svg
View File

@@ -1,19 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1H97.5859L1 97.5859L1 1Z" fill="url(#paint0_linear_19_166)" stroke="url(#paint1_linear_19_166)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" transform="rotate(-90 5.5 5.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="5.5" r="1" transform="rotate(-90 5.5 5.5)" fill="#898989"/>
<circle cx="86.5" cy="5.5" r="1.5" transform="rotate(-90 86.5 5.5)" fill="#4A4A4A"/>
<circle cx="86.5" cy="5.5" r="1" transform="rotate(-90 86.5 5.5)" fill="#898989"/>
<circle cx="5.5" cy="86.5" r="1.5" transform="rotate(-90 5.5 86.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="86.5" r="1" transform="rotate(-90 5.5 86.5)" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_166" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_166" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
web/assets/img/tiles/TopRight-1.svg
View File

@@ -1,19 +0,0 @@
<svg width="100" height="50" viewBox="0 0 100 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M99 1V48.3818L4.23633 1H99Z" fill="url(#paint0_linear_19_262)" stroke="url(#paint1_linear_19_262)" stroke-width="2"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="40.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="40.5" r="1" fill="#898989"/>
<circle cx="22.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="22.5" cy="5.5" r="1" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_262" x1="0" y1="0" x2="40" y2="80" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_262" x1="100" y1="50" x2="60" y2="-30" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 939 B

19
web/assets/img/tiles/TopRight-2.svg
View File

@@ -1,19 +0,0 @@
<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1H48.3818L1 95.7637L1 1Z" fill="url(#paint0_linear_19_308)" stroke="url(#paint1_linear_19_308)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" transform="rotate(-90 5.5 5.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="5.5" r="1" transform="rotate(-90 5.5 5.5)" fill="#898989"/>
<circle cx="40.5" cy="5.5" r="1.5" transform="rotate(-90 40.5 5.5)" fill="#4A4A4A"/>
<circle cx="40.5" cy="5.5" r="1" transform="rotate(-90 40.5 5.5)" fill="#898989"/>
<circle cx="5.5" cy="77.5" r="1.5" transform="rotate(-90 5.5 77.5)" fill="#4A4A4A"/>
<circle cx="5.5" cy="77.5" r="1" transform="rotate(-90 5.5 77.5)" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_308" x1="0" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_308" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

19
web/assets/img/tiles/TopRight.svg
View File

@@ -1,19 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M99 1V97.5859L2.41406 1H99Z" fill="url(#paint0_linear_19_178)" stroke="url(#paint1_linear_19_178)" stroke-width="2"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="86.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="86.5" r="1" fill="#898989"/>
<circle cx="13.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="13.5" cy="5.5" r="1" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_178" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_178" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 941 B

24
web/assets/img/tiles/Trigger.svg
View File

@@ -1,24 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="url(#paint0_linear_17_52)"/>
<circle cx="50" cy="50" r="40" fill="url(#paint1_linear_17_52)"/>
<circle cx="50" cy="50" r="25" fill="url(#paint2_linear_17_52)"/>
<circle cx="50" cy="50" r="10" fill="url(#paint3_linear_17_52)"/>
<defs>
<linearGradient id="paint0_linear_17_52" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="#CCC565"/>
<stop offset="1" stop-color="#857F21"/>
</linearGradient>
<linearGradient id="paint1_linear_17_52" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="#65B5CC"/>
<stop offset="1" stop-color="#216E85"/>
</linearGradient>
<linearGradient id="paint2_linear_17_52" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="#CCC565"/>
<stop offset="1" stop-color="#857F21"/>
</linearGradient>
<linearGradient id="paint3_linear_17_52" x1="0" y1="-2.98023e-06" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="#CC6565"/>
<stop offset="1" stop-color="#852121"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

21
web/assets/img/tiles/Tuile.svg
View File

@@ -1,21 +0,0 @@
<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="98" height="98" fill="url(#paint0_linear_17_88)" stroke="url(#paint1_linear_17_88)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="94.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="94.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="94.5" cy="94.5" r="1" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_17_88" x1="0" y1="0" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_17_88" x1="100" y1="100" x2="0" y2="0" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

21
web/assets/img/tiles/VerticaleSemi.svg
View File

@@ -1,21 +0,0 @@
<svg width="50" height="100" viewBox="0 0 50 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="48" height="98" fill="url(#paint0_linear_19_348)" stroke="url(#paint1_linear_19_348)" stroke-width="2"/>
<circle cx="5.5" cy="5.5" r="1.5" fill="#595959"/>
<circle cx="5.5" cy="5.5" r="1" fill="#A1A1A1"/>
<circle cx="5.5" cy="94.5" r="1.5" fill="#4A4A4A"/>
<circle cx="5.5" cy="94.5" r="1" fill="#898989"/>
<circle cx="44.5" cy="5.5" r="1.5" fill="#4A4A4A"/>
<circle cx="44.5" cy="5.5" r="1" fill="#898989"/>
<circle cx="44.5" cy="94.5" r="1.5" fill="#3C3C3C"/>
<circle cx="44.5" cy="94.5" r="1" fill="#898989"/>
<defs>
<linearGradient id="paint0_linear_19_348" x1="0" y1="0" x2="80" y2="40" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#747474"/>
</linearGradient>
<linearGradient id="paint1_linear_19_348" x1="50" y1="100" x2="-30" y2="60" gradientUnits="userSpaceOnUse">
<stop stop-color="#A8A8A8"/>
<stop offset="1" stop-color="#848484"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.0 KiB

49
web/assets/img/tiles/WoodenDoor.svg
View File

@@ -1,49 +0,0 @@
<svg width="10" height="100" viewBox="0 0 10 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="9" height="99" fill="url(#paint0_linear_30_9)" stroke="url(#paint1_linear_30_9)"/>
<rect x="0.5" y="0.5" width="9" height="3.54545" fill="url(#paint2_linear_30_9)" stroke="url(#paint3_linear_30_9)"/>
<rect x="0.5" y="95.9545" width="9" height="3.54545" fill="url(#paint4_linear_30_9)" stroke="url(#paint5_linear_30_9)"/>
<rect x="0.5" y="64.1364" width="9" height="3.54545" fill="url(#paint6_linear_30_9)" stroke="url(#paint7_linear_30_9)"/>
<rect x="0.5" y="32.3182" width="9" height="3.54545" fill="url(#paint8_linear_30_9)" stroke="url(#paint9_linear_30_9)"/>
<defs>
<linearGradient id="paint0_linear_30_9" x1="10" y1="50" x2="-1.39702e-07" y2="50" gradientUnits="userSpaceOnUse">
<stop stop-color="#9A7B55"/>
<stop offset="1" stop-color="#543717"/>
</linearGradient>
<linearGradient id="paint1_linear_30_9" x1="10" y1="100" x2="-9.80198" y2="98.0198" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
<linearGradient id="paint2_linear_30_9" x1="10" y1="2.27273" x2="0" y2="2.27273" gradientUnits="userSpaceOnUse">
<stop stop-color="#3F3F3F"/>
<stop offset="1" stop-color="#878787"/>
</linearGradient>
<linearGradient id="paint3_linear_30_9" x1="10" y1="4.54545" x2="6.57534" y2="-2.98879" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
<linearGradient id="paint4_linear_30_9" x1="10" y1="97.7273" x2="0" y2="97.7273" gradientUnits="userSpaceOnUse">
<stop stop-color="#3F3F3F"/>
<stop offset="1" stop-color="#878787"/>
</linearGradient>
<linearGradient id="paint5_linear_30_9" x1="10" y1="100" x2="6.57534" y2="92.4657" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
<linearGradient id="paint6_linear_30_9" x1="10" y1="65.9091" x2="0" y2="65.9091" gradientUnits="userSpaceOnUse">
<stop stop-color="#3F3F3F"/>
<stop offset="1" stop-color="#878787"/>
</linearGradient>
<linearGradient id="paint7_linear_30_9" x1="10" y1="68.1818" x2="6.57534" y2="60.6476" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
<linearGradient id="paint8_linear_30_9" x1="10" y1="34.0909" x2="0" y2="34.0909" gradientUnits="userSpaceOnUse">
<stop stop-color="#3F3F3F"/>
<stop offset="1" stop-color="#878787"/>
</linearGradient>
<linearGradient id="paint9_linear_30_9" x1="10" y1="36.3636" x2="6.57534" y2="28.8294" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.7 KiB

53
web/assets/img/tiles/WoodenDoor_openned.svg
View File

@@ -1,53 +0,0 @@
<svg width="100" height="10" viewBox="0 0 100 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(90) translate(0, -100)">
<rect x="0.5" y="0.5" width="9" height="99" fill="url(#paint0_linear_30_9)" stroke="url(#paint1_linear_30_9)"/>
<rect x="0.5" y="0.5" width="9" height="3.54545" fill="url(#paint2_linear_30_9)" stroke="url(#paint3_linear_30_9)"/>
<rect x="0.5" y="95.9545" width="9" height="3.54545" fill="url(#paint4_linear_30_9)" stroke="url(#paint5_linear_30_9)"/>
<rect x="0.5" y="64.1364" width="9" height="3.54545" fill="url(#paint6_linear_30_9)" stroke="url(#paint7_linear_30_9)"/>
<rect x="0.5" y="32.3182" width="9" height="3.54545" fill="url(#paint8_linear_30_9)" stroke="url(#paint9_linear_30_9)"/>
</g>
<defs>
<!-- unchanged -->
<linearGradient id="paint0_linear_30_9" x1="10" y1="50" x2="0" y2="50" gradientUnits="userSpaceOnUse">
<stop stop-color="#9A7B55"/>
<stop offset="1" stop-color="#543717"/>
</linearGradient>
<linearGradient id="paint1_linear_30_9" x1="10" y1="100" x2="-9.80198" y2="98.0198" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
<linearGradient id="paint2_linear_30_9" x1="10" y1="2.27273" x2="0" y2="2.27273" gradientUnits="userSpaceOnUse">
<stop stop-color="#3F3F3F"/>
<stop offset="1" stop-color="#878787"/>
</linearGradient>
<linearGradient id="paint3_linear_30_9" x1="10" y1="4.54545" x2="6.57534" y2="-2.98879" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
<linearGradient id="paint4_linear_30_9" x1="10" y1="97.7273" x2="0" y2="97.7273" gradientUnits="userSpaceOnUse">
<stop stop-color="#3F3F3F"/>
<stop offset="1" stop-color="#878787"/>
</linearGradient>
<linearGradient id="paint5_linear_30_9" x1="10" y1="100" x2="6.57534" y2="92.4657" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
<linearGradient id="paint6_linear_30_9" x1="10" y1="65.9091" x2="0" y2="65.9091" gradientUnits="userSpaceOnUse">
<stop stop-color="#3F3F3F"/>
<stop offset="1" stop-color="#878787"/>
</linearGradient>
<linearGradient id="paint7_linear_30_9" x1="10" y1="68.1818" x2="6.57534" y2="60.6476" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
<linearGradient id="paint8_linear_30_9" x1="10" y1="34.0909" x2="0" y2="34.0909" gradientUnits="userSpaceOnUse">
<stop stop-color="#3F3F3F"/>
<stop offset="1" stop-color="#878787"/>
</linearGradient>
<linearGradient id="paint9_linear_30_9" x1="10" y1="36.3636" x2="6.57534" y2="28.8294" gradientUnits="userSpaceOnUse">
<stop stop-color="#A9825B"/>
<stop offset="1" stop-color="#4D3019"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 3.0 KiB

15
web/assets/img/tiles/WoodenMirror.svg
View File

@@ -1,15 +0,0 @@
<svg width="40" height="200" viewBox="0 0 40 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 2C20.6534 2 21.5184 2.3224 22.6006 3.42969C23.686 4.54032 24.8285 6.28601 25.9766 8.71387C28.2679 13.5596 30.3842 20.6991 32.1807 29.6816C35.7671 47.6141 38 72.4764 38 100C38 127.524 35.7671 152.386 32.1807 170.318C30.3842 179.301 28.2679 186.44 25.9766 191.286C24.8285 193.714 23.686 195.46 22.6006 196.57C21.5184 197.678 20.6534 198 20 198C19.3466 198 18.4816 197.678 17.3994 196.57C16.314 195.46 15.1715 193.714 14.0234 191.286C11.7321 186.44 9.61584 179.301 7.81934 170.318C4.23285 152.386 2 127.524 2 100C2 72.4764 4.23285 47.6141 7.81934 29.6816C9.61584 20.6991 11.7321 13.5596 14.0234 8.71387C15.1715 6.28601 16.314 4.54032 17.3994 3.42969C18.4816 2.3224 19.3466 2 20 2Z" fill="url(#paint0_linear_4_13)" stroke="url(#paint1_linear_4_13)" stroke-width="4"/>
<defs>
<linearGradient id="paint0_linear_4_13" x1="-16.9315" y1="60.2496" x2="42.3327" y2="168.193" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="#84A3B3"/>
</linearGradient>
<linearGradient id="paint1_linear_4_13" x1="20" y1="0" x2="19.4598" y2="193.684" gradientUnits="userSpaceOnUse">
<stop stop-color="#603C18"/>
<stop offset="0.336163" stop-color="#885B2E"/>
<stop offset="0.609062" stop-color="#603C18"/>
<stop offset="1" stop-color="#885B2E"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

9
web/assets/img/tiles/YellowMirror.svg
View File

@@ -1,9 +0,0 @@
<svg width="20" height="200" viewBox="0 0 20 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="10" cy="100" rx="10" ry="100" fill="url(#paint0_linear_25_12)"/>
<defs>
<linearGradient id="paint0_linear_25_12" x1="-8.46573" y1="60.2496" x2="61.4687" y2="123.939" gradientUnits="userSpaceOnUse">
<stop stop-color="#E2C63C" stop-opacity="0.4"/>
<stop offset="1" stop-color="#7C7A00" stop-opacity="0.4"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 449 B

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

@@ -8,20 +8,11 @@ const legend = {
door: 4,
button: 5,
wall: 6,
target: 7,
ligthLaser: 8,
demiWallCornerUpLeft: 9,
demiWallCornerUpRight: 10,
demiWallCornerDownLeft: 11,
demiWallCornerDownRight: 12,
doorOpen: 13,
button2: 14,
captor: 15,
cable: 16,
captorTurn: 17,
cableVertical: 18,
rotatorButton: 20,
};
demiWall: 7,
target: 8,
ligthLaser: 9,
button2: 10,
}
const laserColors = {
white: "white",
@@ -36,79 +27,36 @@ const glassOptions = [
laserColors.yellow,
];
let levels = [
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 5, 4, 0, 10, 6, 0, 0, 0, 0],
[0, 0, 0, 0, 7, 6, 6, 6, 6, 0, 6, 0, 0, 0, 0],
[0, 0, 0, 0, 3, 0, 0, 0, 0, 12, 6, 0, 0, 0, 0],
[0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
],
// Grid test
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0],
[0, 0, 1, 0, 0, 0, 17, 0, 0, 3, 6, 0, 0, 0, 0],
[0, 0, 6, 6, 6, 6, 18, 6, 6, 0, 6, 0, 0, 0, 0],
[0, 0, 7, 0, 0, 0, 4, 0, 0, 12, 6, 0, 0, 0, 0],
[0, 0, 6, 6, 6, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
],
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 6, 6, 6, 6, 6, 6, 11, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 0, 0, 0, 0, 10, 6, 0, 0, 0, 0],
[0, 0, 0, 0, 3, 16, 16, 15, 0, 3, 6, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 6, 0, 0, 0, 0],
[0, 0, 0, 0, 12, 6, 6, 6, 6, 6, 9, 0, 0, 0, 0],
[0, 0, 0, 0, 6, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 6, 0, 0, 0, 3, 0, 7, 0, 0, 0, 0],
[0, 0, 0, 0, 6, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 10, 6, 6, 6, 6, 6, 0, 0, 0, 0, 0],
],
/*
[
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
], */
];
let currentLevelIndex = 0;
let level1 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 3, 4, 0, 0, 3, 0, 7, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 0, 0, 0, 3, 5, 3, 0, 8, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]
const initialMirrorAngles = {
"6,4": 315,
"4,3": 315,
"8,4": 315,
"2,4": 45,
"2,8": 315,
"6,8": 45,
};
const buttonGroups = {
"4,6": 1,
"4,7": 2,
"4,4": 1,
"8,5": 2,
};
const doorGroups = {
"4,7": 1,
"4,8": 2,
};
const rotatorButtons = {
"2,5": 1,
"2,6": 2,
};
let laserDirection = { dx: 0, dy: 0 };
@@ -117,13 +65,6 @@ let mirrorOrientations = {};
let glassPlacements = {};
let activatedButtons = {};
let openedDoors = {};
let isLevelFinished = false;
let activeRotatorButtons = {};
let rotatorIntervals = {};
function getCurrentLevel() {
return levels[currentLevelIndex];
}
function normalizeLaserDirection(dx, dy) {
const epsilon = 0.0001;
@@ -144,13 +85,6 @@ function reflectLaser(direction, mirrorAngle) {
return normalizeLaserDirection(reflectedDx, reflectedDy);
}
function reverseLaser(direction) {
return {
dx: direction.dx * -1,
dy: direction.dy * -1,
};
}
function getLaserSegmentClass(segmentDirection) {
if (!segmentDirection) {
return "laser-horizontal";
@@ -175,8 +109,15 @@ function getLaserColorClass(color) {
return `laser-color-${color || laserColors.white}`;
}
function reverseLaser(direction) {
return {
dx: direction.dx * -1,
dy: direction.dy * -1,
};
}
function getButtonGroup(x, y) {
const cellType = getCurrentLevel()[y][x];
const cellType = level1[y][x];
if (cellType === legend.button2) {
return 2;
@@ -191,90 +132,25 @@ function getDoorGroup(x, y) {
function openDoorsFromButton(x, y) {
const buttonGroup = getButtonGroup(x, y);
const level = getCurrentLevel();
for (let doorY = 0; doorY < level.length; doorY++) {
for (let doorX = 0; doorX < level[doorY].length; doorX++) {
if (level[doorY][doorX] === legend.door && getDoorGroup(doorX, doorY) === buttonGroup) {
for (let doorY = 0; doorY < level1.length; doorY++) {
for (let doorX = 0; doorX < level1[doorY].length; doorX++) {
if (level1[doorY][doorX] === legend.door && getDoorGroup(doorX, doorY) === buttonGroup) {
openedDoors[`${doorY},${doorX}`] = true;
}
}
}
}
function getRotatorButtonConfig(x, y) {
return rotatorButtons[`${y},${x}`];
}
function isMirrorControlledByButton(x, y) {
const rotatorEntries = Object.values(rotatorButtons);
for (let i = 0; i < rotatorEntries.length; i++) {
const rotatorConfig = rotatorEntries[i];
if (rotatorConfig.mirrorX === x && rotatorConfig.mirrorY === y) {
return true;
}
}
return false;
}
function rotateMirrorStep(x, y, angleStep) {
const coordKey = `${y},${x}`;
if (getCurrentLevel()[y][x] !== legend.mirror) {
return;
}
let currentAngle = mirrorOrientations[coordKey] || 0;
currentAngle = (currentAngle + angleStep) % 360;
if (currentAngle < 0) {
currentAngle += 360;
}
mirrorOrientations[coordKey] = currentAngle;
}
function syncRotatorButtons() {
const rotatorKeys = Object.keys(rotatorButtons);
for (let i = 0; i < rotatorKeys.length; i++) {
const key = rotatorKeys[i];
const config = rotatorButtons[key];
const isActive = activeRotatorButtons[key] === true;
if (isActive && !rotatorIntervals[key]) {
rotatorIntervals[key] = window.setInterval(() => {
rotateMirrorStep(config.mirrorX, config.mirrorY, -22.5);
traceLaser();
}, 1000);
}
if (!isActive && rotatorIntervals[key]) {
window.clearInterval(rotatorIntervals[key]);
delete rotatorIntervals[key];
}
}
}
function stopAllRotatorButtons() {
const intervalKeys = Object.keys(rotatorIntervals);
for (let i = 0; i < intervalKeys.length; i++) {
const key = intervalKeys[i];
window.clearInterval(rotatorIntervals[key]);
}
rotatorIntervals = {};
}
function saveLaserSegment(x, y, direction, color) {
laserSegments[`${y},${x}`] = {
direction: { ...direction },
color: color,
};
if (level1[y][x] === legend.empty) {
level1[y][x] = legend.ligthLaser;
}
}
function isGlassOnCell(x, y) {
@@ -293,18 +169,6 @@ function drawGlassInCell(cell, x, y) {
cell.appendChild(glassDiv);
}
function drawLaserInCell(cell, segmentData) {
if (!segmentData) {
return;
}
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);
}
function createPalette() {
const palette = document.getElementById("glass-palette");
@@ -322,6 +186,7 @@ function createPalette() {
glassButton.draggable = true;
glassButton.addEventListener("dragstart", (event) => {
event.dataTransfer.effectAllowed = "copy";
event.dataTransfer.setData("text/plain", glassColor);
event.dataTransfer.setData("application/x-glass-color", glassColor);
});
@@ -339,8 +204,7 @@ function addDropEvents(cell, x, y) {
return;
}
const cellType = getCurrentLevel()[y][x];
if (cellType !== legend.empty) {
if (level1[y][x] !== legend.empty && level1[y][x] !== legend.ligthLaser) {
return;
}
@@ -364,7 +228,7 @@ function addDropEvents(cell, x, y) {
return;
}
if (getCurrentLevel()[y][x] !== legend.empty) {
if (level1[y][x] !== legend.empty && level1[y][x] !== legend.ligthLaser) {
return;
}
@@ -396,33 +260,34 @@ function blockBrowserDrop() {
}
function initializeMirrorOrientations() {
mirrorOrientations = {};
const level = getCurrentLevel();
for (let y = 0; y < level.length; y++) {
for (let x = 0; x < level[y].length; x++) {
if (level[y][x] === legend.mirror) {
mirrorOrientations = {}; // Reset
for (let y = 0; y < level1.length; y++) {
for (let x = 0; x < level1[y].length; x++) {
if (level1[y][x] === legend.mirror) {
mirrorOrientations[`${y},${x}`] = initialMirrorAngles[`${y},${x}`] || 0;
}
}
}
}
// Function to print grid
let mirrorCoordinates = [];
function loadGrid() {
const mapDiv = document.getElementById("map");
const level = getCurrentLevel();
const mapDiv = document.getElementById("map"); // Div with map in DOM
mapDiv.innerHTML = "";
for (let y = 0; y < level.length; y++) {
for (let y = 0; y < level1.length; y++) {
const lign = document.createElement("div");
lign.classList.add("lign");
for (let x = 0; x < level[y].length; x++) {
for (let x = 0; x < level1[y].length; x++) {
const cell = document.createElement("div");
cell.classList.add("cell");
addDropEvents(cell, x, y);
switch (level[y][x]) {
switch (level1[y][x]) {
case legend.empty:
cell.classList.add("empty");
break;
@@ -433,33 +298,23 @@ function loadGrid() {
cell.classList.add("colored-laser");
break;
case legend.mirror:
cell.classList.add("mirror");
const currentAngle = mirrorOrientations[`${y},${x}`] || 0;
const img = document.createElement("img");
img.src = "../../assets/img/tiles/Mirror.svg";
img.classList.add("mirror-img");
img.style.transform = `rotate(${currentAngle}deg)`;
if (isMirrorControlledByButton(x, y)) {
const mirrorDisplay = document.createElement("div");
mirrorDisplay.classList.add("btn-mirror", "btn-mirror-locked");
mirrorDisplay.appendChild(img);
cell.appendChild(mirrorDisplay);
} else {
const btnMirror = document.createElement("button");
btnMirror.classList.add("btn-mirror");
btnMirror.type = "button";
btnMirror.appendChild(img);
btnMirror.onmousedown = (event) => {
event.preventDefault();
event.stopPropagation();
if (!isLevelFinished) {
rotateMirror(x, y, event.button === 2);
}
};
btnMirror.oncontextmenu = (event) => event.preventDefault();
cell.appendChild(btnMirror);
}
const btnMirror = document.createElement("button");
btnMirror.classList.add("btn-mirror");
btnMirror.type = "button";
btnMirror.style.transform = `rotate(${currentAngle}deg)`;
btnMirror.style.width = "100%";
btnMirror.onmousedown = (e) => {
e.preventDefault();
e.stopPropagation();
if(!isLevelFinished){
rotateMirror(x, y, e.button === 2);
}
};
btnMirror.oncontextmenu = (e) => e.preventDefault();
cell.appendChild(btnMirror);
cell.classList.add("mirror");
break;
case legend.door:
cell.classList.add("door");
@@ -467,9 +322,6 @@ function loadGrid() {
cell.classList.add("door-open");
}
break;
case legend.doorOpen:
cell.classList.add("door", "door-open");
break;
case legend.button:
cell.classList.add("button");
if (activatedButtons[`${y},${x}`]) {
@@ -482,46 +334,30 @@ function loadGrid() {
cell.classList.add("button-active");
}
break;
case legend.rotatorButton:
cell.classList.add("button", "button-rotator");
if (activatedButtons[`${y},${x}`]) {
cell.classList.add("button-active");
}
break;
case legend.wall:
cell.classList.add("wall");
break;
case legend.demiWall:
cell.classList.add("demi-wall");
break;
case legend.target:
cell.classList.add("target");
break;
case legend.demiWallCornerUpLeft:
cell.classList.add("demi-wall-corner-up-left");
break;
case legend.demiWallCornerUpRight:
cell.classList.add("demi-wall-corner-up-right");
break;
case legend.demiWallCornerDownLeft:
cell.classList.add("demi-wall-corner-down-left");
break;
case legend.demiWallCornerDownRight:
cell.classList.add("demi-wall-corner-down-right");
break;
case legend.captor:
cell.classList.add("captor");
break;
case legend.cable:
cell.classList.add("cable");
break;
case legend.captorTurn:
cell.classList.add("captor-turn");
break;
case legend.cableVertical:
cell.classList.add("cable-vertical");
case legend.ligthLaser:
cell.classList.add("empty");
break;
}
drawLaserInCell(cell, laserSegments[`${y},${x}`]);
const segmentData = laserSegments[`${y},${x}`];
if (segmentData) {
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);
}
@@ -529,59 +365,92 @@ function loadGrid() {
}
}
loadGrid();
// Function to rotate mirror
function rotateMirror(x, y, isRightClick) {
rotateMirrorStep(x, y, isRightClick ? 22.5 : -22.5);
traceLaser();
const coordKey = `${y},${x}`;
if (level1[y][x] !== legend.mirror) {
return;
}
let currentAngle = mirrorOrientations[coordKey] || 0;
// Rotation and normalize negative angles to [0, 360)
currentAngle = (currentAngle + (isRightClick ? 22.5 : -22.5)) % 360;
if (currentAngle < 0) {
currentAngle += 360;
}
// Save
mirrorOrientations[coordKey] = currentAngle;
// Print laser light
traceLaser(true);
}
// Function to trace
let isLevelFinished = false;
function traceLaser() {
// Reset light laser from previous trace
laserSegments = {};
activatedButtons = {};
openedDoors = {};
activeRotatorButtons = {};
isLevelFinished = false;
for (let y = 0; y < level1.length; y++) {
for (let x = 0; x < level1[y].length; x++) {
if (level1[y][x] === legend.ligthLaser) {
level1[y][x] = legend.empty;
}
}
}
const level = getCurrentLevel();
let startLaserX;
let startLaserY;
for (let y = 0; y < level.length; y++) {
for (let x = 0; x < level[y].length; x++) {
if (level[y][x] === legend.laser) {
// Search laser
for (let y = 0; y < level1.length; y++) {
for (let x = 0; x < level1[y].length; x++) {
if (level1[y][x] === legend.laser) {
startLaserX = x;
startLaserY = y;
laserDirection = { dx: 1, dy: 0 };
break;
}
}
if (startLaserX !== undefined) {
break;
}
if (startLaserX !== undefined) break;
}
// If laser not found -> return
if (startLaserX === undefined) {
return;
}
let currentX = startLaserX;
let currentY = startLaserY;
let currentLaserColor = laserColors.white;
let laserActive = true;
let currentLaserColor = laserColors.white;
const maxIterations = 1000; // Prevent infinite loops
let iterations = 0;
const maxIterations = 1000;
isLevelFinished = false;
while (laserActive && iterations < maxIterations) {
iterations++;
currentX += laserDirection.dx;
currentY += laserDirection.dy;
if (currentX < 0 || currentX >= level[0].length || currentY < 0 || currentY >= level.length) {
// Out of bounds
if (currentX < 0 || currentX >= level1[0].length || currentY < 0 || currentY >= level1.length) {
laserActive = false;
break;
}
const cellType = level[currentY][currentX];
const cellType = level1[currentY][currentX];
const glassColor = glassPlacements[`${currentY},${currentX}`];
if (glassColor) {
@@ -623,9 +492,18 @@ function traceLaser() {
}
break;
case legend.demiWall:
if (currentLaserColor === laserColors.blue) {
laserDirection = reverseLaser(laserDirection);
} else if (currentLaserColor === laserColors.yellow) {
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
} else {
laserActive = false;
}
break;
case legend.door:
case legend.doorOpen:
if (openedDoors[`${currentY},${currentX}`] || cellType === legend.doorOpen) {
if (openedDoors[`${currentY},${currentX}`]) {
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
} else if (currentLaserColor === laserColors.blue) {
laserDirection = reverseLaser(laserDirection);
@@ -651,44 +529,12 @@ function traceLaser() {
}
break;
case legend.rotatorButton:
if (currentLaserColor === laserColors.red) {
const rotatorKey = `${currentY},${currentX}`;
activatedButtons[rotatorKey] = true;
activeRotatorButtons[rotatorKey] = true;
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
} else if (currentLaserColor === laserColors.yellow) {
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
} else if (currentLaserColor === laserColors.blue) {
laserDirection = reverseLaser(laserDirection);
} else {
laserActive = false;
}
break;
case legend.demiWallCornerUpLeft:
laserDirection = reflectLaser(laserDirection, 135);
break;
case legend.demiWallCornerUpRight:
laserDirection = reflectLaser(laserDirection, 45);
break;
case legend.demiWallCornerDownLeft:
laserDirection = reflectLaser(laserDirection, 225);
break;
case legend.demiWallCornerDownRight:
laserDirection = reflectLaser(laserDirection, 315);
break;
default:
saveLaserSegment(currentX, currentY, laserDirection, currentLaserColor);
break;
}
}
syncRotatorButtons();
loadGrid();
if (isLevelFinished) {
@@ -696,37 +542,14 @@ function traceLaser() {
}
}
function finish() {
setTimeout(() => {
const winOverlay = document.querySelector(".win-overlay");
winOverlay.style.visibility = "visible";
}, 100);
}
function nextLevel() {
currentLevelIndex++;
isLevelFinished = false;
stopAllRotatorButtons();
if (currentLevelIndex >= levels.length) {
currentLevelIndex = 0;
}
initializeMirrorOrientations();
loadGrid();
laserSegments = {};
mirrorOrientations = {};
glassPlacements = {};
activatedButtons = {};
openedDoors = {};
traceLaser();
const winOverlay = document.querySelector(".win-overlay");
winOverlay.style.visibility = "hidden";
}
createPalette();
initializeMirrorOrientations();
blockBrowserDrop();
traceLaser();
// If level finishh -> call this function
function finish() {
setTimeout(() => {
alert("Réussi !");
}, 100);
}

9
web/assets/js/index.js
View File

@@ -1,9 +0,0 @@
function rotateMirror(mirror) {
let angle = 0;
if (mirror.style.transform == "") {
angle = 0;
} else {
angle = parseInt(mirror.style.transform.split("(")[1].split("deg")[0])%360;
}
mirror.style.transform = `rotate(${angle+45}deg)`;
}

19
web/templates/view/game.html
View File

@@ -9,12 +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 class="win-overlay">
<h1>You win!</h1>
<p>You have completed the level.</p>
<button class="win-button" onclick="nextLevel()">Next Level</button>
</div>
<script>
atOptions = {
'key' : '72b6ba1a1c26b9671167b66063c7e699',
@@ -27,7 +21,6 @@
<script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
<main class="game-layout">
<h1 class="game-title">Mirror Game</h1>
<div id="map" class="map"></div>
<section class="toolbox">
@@ -35,17 +28,7 @@
<div id="glass-palette" class="glass-palette"></div>
</section>
</main>
<script>
atOptions = {
'key' : '72b6ba1a1c26b9671167b66063c7e699',
'format' : 'iframe',
'height' : 600,
'width' : 160,
'params' : {}
};
</script>
<script src="https://www.highperformanceformat.com/72b6ba1a1c26b9671167b66063c7e699/invoke.js"></script>
<script src="../../assets/js/game.js" defer></script>
</body>
</html>