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

Compare commits

base: Nono:1be3750672e1a57c18efb7c36df08fc885370c9e
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/mirror
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

4 Commits
1be3750672 ... feature/mi

Author SHA1 Message Date
Pierre
b10b6475d8 First version of button for mirrors 2026-03-30 15:33:49 +02:00
Pierre
2dbfff770f Grid enlargement 2026-03-30 15:29:25 +02:00
Pierre
a791415bd3 Rebase of feature/mirror + merge with the grid program 2026-03-30 15:05:57 +02:00
Sysy's
577357b090 Add rotateMirror to rotate element 45° 
Add a small utility function in web/assets/js/index.js that increments an element's CSS rotation by 45 degrees. The function reads the element's inline transform (handling an empty value), parses the current rotation angle modulo 360, and sets the new rotate(angle+45) value.
 2026-03-30 14:54:43 +02:00
4 changed files with 40 additions and 29 deletions
Expand all files Collapse all files

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

@@ -5,8 +5,8 @@
} }
html, body { html, body {
width: 100%; width: 100vw;
height: 100%; height: 100vh;
overflow: hidden; overflow: hidden;
} }
@@ -48,8 +48,10 @@ main {
.cell { .cell {
border: 1px solid #333333; border: 1px solid #333333;
width: 30px; min-width: 60px;
height: 30px; width: auto;
min-height: 60px;
height: auto;
transition: all 0.2s ease; transition: all 0.2s ease;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -85,30 +87,11 @@ main {
overflow: hidden; 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: linear-gradient(135deg, #8B4513 0%, #654321 100%); background: linear-gradient(135deg, #8B4513 0%, #654321 100%);
border-color: #654321; border-color: #654321;
} }
.door::after {
content: '';
position: absolute;
width: 60%;
height: 60%;
border: 2px solid #FFD700;
border-radius: 3px;
}
.button { .button {
background: radial-gradient(circle at 35% 35%, #FF4444 0%, #CC0000 100%); background: radial-gradient(circle at 35% 35%, #FF4444 0%, #CC0000 100%);
border-color: #990000; border-color: #990000;

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

@@ -17,18 +17,19 @@ const legend = {
let grid = [ 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, 8, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 3, 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, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 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], [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, 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],
] ]
// Function to print grid // Function to print grid
let mirrorCoordinates = [];
function loadGrid () { function loadGrid () {
const mapDiv = document.getElementById("map"); // Div with map in DOM const mapDiv = document.getElementById("map"); // Div with map in DOM
@@ -53,6 +54,12 @@ function loadGrid () {
cell.classList.add("colored-laser"); cell.classList.add("colored-laser");
break; break;
case legend.mirror: 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"); cell.classList.add("mirror");
break; break;
case legend.door: case legend.door:
@@ -83,3 +90,15 @@ function loadGrid () {
} }
loadGrid(); loadGrid();
// Function to rotate mirror
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)`;
}

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

@@ -0,0 +1,9 @@
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> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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> <title>Game</title>
</head> </head>
<body> <body>
<div id="map"></div> <div id="map"></div>
<script src="../../assets/js/index.js" defer></script> <script src="../../assets/js/game.js" defer></script>
</body> </body>
</html> </html>