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

Fix textures/button/lasers & add ads

Browse Source
This commit is contained in:
Sysy's
2026-03-31 11:52:30 +02:00
committed by M1n-0
parent 63c4244e92
commit 1c59e7af7a
5 changed files with 476 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,7 +16,7 @@ body {
display: flex;
align-items: center;
justify-content: center;
font-family: 'Arial', sans-serif;
font-family: Arial, sans-serif;
user-select: none;
}
@@ -61,29 +61,18 @@ main {
flex-wrap: wrap;
}
/* ================================
GRID
================================ */
.map {
display: flex;
flex-direction: column;
gap: 0px;
padding: 10px;
background: #DADEEF;
background: #dadeef;
border-radius: 5px;
}
.lign {
display: flex;
gap: 0px;
margin: 0;
}
/* ================================
CELLS
================================ */
.cell {
width: clamp(28px, 5.5vmin, 60px);
height: clamp(28px, 5.5vmin, 60px);
@@ -91,7 +80,6 @@ main {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
position: relative;
background-color: #2a2a2a;
user-select: none;
@@ -102,12 +90,8 @@ main {
outline: 2px dashed rgba(0, 0, 0, 0.2);
}
/* ================================
CASES TYPE
================================ */
.empty {
background-color: #DADEEF;
background-color: #dadeef;
}
.empty:hover {
@@ -148,14 +132,16 @@ main {
.door {
background-color: #DADEEF;
background-image: url("../img/tiles/WoodenDoor.svg");
transform: rotate(90deg);
background-size: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-position: end;
}
.door-open {
opacity: 0.5;
background-image: url("../img/tiles/WoodenDoor_openned.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: end;
}
.button {
@@ -166,18 +152,18 @@ main {
background-position: center;
}
.button-active {
opacity: 0.7;
}
.demi-wall {
.button-2 {
background-color: #DADEEF;
background-image: url("../img/tiles/VerticaleSemi.svg");
background-size: 100%;
background-image: url("../img/tiles/ButtonQuarter.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");
@@ -218,41 +204,57 @@ main {
background-position: center;
}
/* ================================
LIGHT LASER
================================ */
.light-laser {
position: relative;
.laser-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.laser-horizontal {
background: linear-gradient(to bottom, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #DADEEF
--laser-color: red;
background: linear-gradient(to bottom, transparent 0%, transparent 45%, var(--laser-color) 45%, var(--laser-color) 55%, transparent 55%, transparent 100%);
}
.laser-vertical {
background: linear-gradient(to right, transparent 0%, transparent 45%, red 45%, red 55%, transparent 55%, transparent 100%), #DADEEF;
--laser-color: red;
background: linear-gradient(to right, transparent 0%, transparent 45%, var(--laser-color) 45%, var(--laser-color) 55%, transparent 55%, transparent 100%);
}
.laser-diagonal-down {
background: linear-gradient(45deg, transparent 0%, transparent 46%, red 46%, red 54%, transparent 54%, transparent 100%), #DADEEF;
--laser-color: red;
background: linear-gradient(45deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%);
}
.laser-diagonal-up {
background: linear-gradient(135deg, transparent 0%, transparent 46%, red 46%, red 54%, transparent 54%, transparent 100%), #DADEEF;
--laser-color: red;
background: linear-gradient(135deg, transparent 0%, transparent 46%, var(--laser-color) 46%, var(--laser-color) 54%, transparent 54%, transparent 100%);
}
/* ================================
MIRROR
================================ */
.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;
height: 100%;
width: 100%;
height: 100%;
position: relative;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
@@ -262,35 +264,60 @@ main {
width: 80%;
height: 80%;
object-fit: contain;
pointer-events: none;
}
.button-door {
background: none;
.glass-item {
width: 54px;
height: 54px;
border: none;
cursor: pointer;
width: 100%;
height: 100%;
position: absolute;
inset: 0;
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;
}
/* ================================
RESPONSIVE
================================ */
.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;
border-radius: 3px;
}
main {
padding: 8px;
}
}
@media (max-height: 500px) {
.map {
padding: 4px;
}
}