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

First version of laser

Browse Source
This commit is contained in:
Pierre
2026-03-30 14:10:19 +02:00
parent 04a0e1a912
commit 001adb89bd
2 changed files with 62 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
web/assets/css/index.css
View File

@@ -11,21 +11,20 @@ html, body {
} }
body { body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: #1a1a1a;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Arial', sans-serif;
} }
main { main {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 20px; padding: 20px;
border-radius: 15px; border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(4px);
min-width: fit-content; min-width: fit-content;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -33,37 +32,40 @@ main {
.map { .map {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 0px;
padding: 15px; padding: 10px;
background: rgba(0, 0, 0, 0.2); background: #222222;
border-radius: 10px; border-radius: 5px;
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
} }
.lign { .lign {
display: flex; display: flex;
margin: 2px 2px; gap: 0px;
margin: 0;
} }
.cell { .cell {
border: 2px solid rgba(255, 255, 255, 0.3); border: 1px solid #333333;
border-radius: 5px; width: 35px;
width: 100%; height: 35px;
height: 100%;
transition: all 0.2s ease; transition: all 0.2s ease;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 2px 2px; margin: 0;
position: relative;
background-color: #2a2a2a;
} }
.empty { .empty {
background-color: rgba(200, 200, 200, 0.3); background-color: #2a2a2a;
border-color: #333333;
} }
.empty:hover { .empty:hover {
background-color: rgba(200, 200, 200, 0.5); background-color: #333333;
} }
.laser { .laser {
@@ -72,46 +74,65 @@ main {
} }
.colored-laser { .colored-laser {
background: linear-gradient(45deg, #FF1493, #00CED1); background: linear-gradient(135deg, #FF1493 0%, #00CED1 100%);
box-shadow: inset 0 0 10px rgba(255, 20, 147, 0.6);
border-color: #FF1493; border-color: #FF1493;
} }
.mirror { .mirror {
background: linear-gradient(45deg, #C0C0C0 25%, transparent 25%, transparent 75%, #C0C0C0 75%) / 10px 10px; background-color: #1a1a1a;
background-color: #E8E8E8; border-color: #444444;
border-color: #A9A9A9; position: relative;
overflow: hidden;
}
.mirror::before {
content: '';
position: absolute;
width: 100%;
height: 60%;
background: linear-gradient(45deg, transparent 48%, #CCCCCC 48%, #CCCCCC 52%, transparent 52%);
top: 50%;
transform: translateY(-50%);
} }
.door { .door {
background-color: #8B4513; background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
border-color: #654321; border-color: #654321;
position: relative;
} }
.door::after { .door::after {
content: '🚪'; content: '';
font-size: 24px; position: absolute;
width: 60%;
height: 60%;
border: 2px solid #FFD700;
border-radius: 3px;
} }
.button { .button {
background-color: #FF6347; background: radial-gradient(circle at 35% 35%, #FF4444 0%, #CC0000 100%);
border-color: #DC143C; border-color: #990000;
border-radius: 50%;
} }
.wall { .wall {
background-color: #2F4F4F; background: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
border-color: #000000; border-color: #000000;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
} }
.demi-wall { .demi-wall {
background: linear-gradient(to right, #2F4F4F 50%, rgba(200, 200, 200, 0.3) 50%); background: linear-gradient(90deg, #0f0f0f 0%, #0f0f0f 50%, #2a2a2a 50%, #2a2a2a 100%);
border-color: #444444; border-color: #333333;
} }
.target { .target {
background: radial-gradient(circle, #00FF00 30%, rgba(0, 255, 0, 0.3) 70%); background: radial-gradient(circle at 35% 35%, #00FF00 0%, #00CC00 50%, rgba(0, 255, 0, 0.2) 100%);
border-color: #00CC00; border-color: #00FF00;
}
.light-laser {
margin-top: 14px;
height: 7px;
width: 35px;
background-color: red;
display: flex;
} }

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

@@ -10,18 +10,19 @@ const legend = {
wall: 6, wall: 6,
demiWall: 7, demiWall: 7,
target: 8, target: 8,
ligthLaser: 9,
} }
// Grid test // Grid test
let grid = [ let grid = [
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 8, 0],
[0, 0, 3, 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],
[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, 8, 0], [1, 9, 9, 9, 9, 9, 3, 0],
[0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0],
] ]
@@ -67,6 +68,9 @@ function loadGrid () {
case legend.target: case legend.target:
cell.classList.add("target"); cell.classList.add("target");
break; break;
case legend.ligthLaser:
cell.classList.add("light-laser");
break;
} }
lign.appendChild(cell); lign.appendChild(cell);