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

Rebase of feature/mirror + merge with the grid program

Browse Source
This commit is contained in:
Pierre
2026-03-30 15:05:57 +02:00
parent 577357b090
commit a791415bd3
3 changed files with 21 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,16 +85,6 @@ main {
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 {
background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
border-color: #654321;

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

@@ -24,7 +24,7 @@ let grid = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[1, 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],
]
@@ -53,6 +53,12 @@ function loadGrid () {
cell.classList.add("colored-laser");
break;
case legend.mirror:
const btnMirror = document.createElement("button");
btnMirror.classList.add("btn-mirror");
btnMirror.addEventListener("click", () => rotateMirror(btnMirror));
btnMirror.style.transform = "rotate(0deg)";
btnMirror.style.width = "100%";
cell.appendChild(btnMirror);
cell.classList.add("mirror");
break;
case legend.door:
@@ -82,4 +88,15 @@ function loadGrid () {
}
}
loadGrid();
loadGrid();
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)`;
}

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

@@ -3,12 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../../assets/css/index.css">
<link rel="stylesheet" href="../../assets/css/game.css">
<title>Game</title>
</head>
<body>
<div id="map"></div>
<script src="../../assets/js/index.js" defer></script>
<script src="../../assets/js/game.js" defer></script>
</body>
</html>