End of grid

web/assets/css/index.css

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

web/assets/js/index.js

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

web/templates/view/game.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="../../assets/css/index.css">
-    <title>Index</title>
+    <title>Game</title>
 </head>
 <body>
     <div id="map"></div>