Skip to content

Commit 19312e7

Browse files
robotalehrobotaleh
committed
Actualiza y mejora Maze Wall Placer
1 parent d35d5fe commit 19312e7

1 file changed

Lines changed: 179 additions & 16 deletions

File tree

utils/maze-wall-placer.html renamed to maze-wall-placer/index.html

Lines changed: 179 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
2323
<!-- Material Kit CSS -->
2424
<link href="../assets/css/material-kit.css?v=2.0.4" rel="stylesheet" />
25+
<link href="../assets/css/custom.css" rel="stylesheet" />
2526
<style type="text/css">
2627
body {
2728
color: #1b176b;
@@ -43,10 +44,30 @@
4344
}
4445

4546
#maze-table>tbody>tr>td {
46-
border-top: 4px solid #ffffff00;
47-
border-left: 4px solid #ffffff00;
47+
/* border-top: 4px solid #ffffff00;
48+
border-left: 4px solid #ffffff00; */
49+
border: 4px solid #ffffff00;
4850
}
4951

52+
td.bg-finish {
53+
background-color: #8cc0c7 !important;
54+
}
55+
56+
/* td.border-finish-top {
57+
border-top: 4px solid #8cc0c7 !important;
58+
}
59+
60+
td.border-finish-bottom {
61+
border-bottom: 4px solid #8cc0c7 !important;
62+
}
63+
64+
td.border-finish-left {
65+
border-left: 4px solid #8cc0c7 !important;
66+
}
67+
68+
td.border-finish-right {
69+
border-right: 4px solid #8cc0c7 !important;
70+
} */
5071

5172
td.border-top {
5273
border-top: 4px solid #1b176b !important;
@@ -99,20 +120,111 @@
99120
</head>
100121

101122
<body>
123+
<!-- NAVBAR -->
124+
<nav class="navbar fixed-top navbar-expand-lg">
125+
<div class="container">
126+
<div class="navbar-translate">
127+
<a class="navbar-brand" href="./">
128+
<img src="../assets/img/logos/opr_logo.png" alt="OPRobots Logo" style="max-height: 100%;">
129+
</a>
130+
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
131+
<span class="sr-only">Menú Lateral</span>
132+
<span class="navbar-toggler-icon"></span>
133+
<span class="navbar-toggler-icon"></span>
134+
<span class="navbar-toggler-icon"></span>
135+
</button>
136+
</div>
137+
<div class="collapse navbar-collapse">
138+
<ul class="navbar-nav ml-auto">
139+
<li class="nav-item d-lg-none text-center">
140+
<a class="navbar-brand margin-top-20 margin-bottom-20" href="./">
141+
<img src="../assets/img/logos/opr_logo.png" alt="OPRobots Logo" style="max-height: 100%;">
142+
</a>
143+
</li>
144+
<!-- <li class="nav-item">
145+
<a href="./sobre-nosotros" class="nav-link">
146+
<i class="material-icons">info</i> Sobre nosotros
147+
</a>
148+
</li> -->
149+
<li class="nav-item">
150+
<a href="../nuestros-robots" class="nav-link">
151+
<i class="material-icons">settings</i> Nuestros Robots
152+
</a>
153+
</li>
154+
<li class="nav-item active">
155+
<a href="../utils-helpers" class="nav-link">
156+
<i class="material-icons">support</i> Utils & Helpers
157+
</a>
158+
</li>
159+
<li class="nav-item">
160+
<a href="../tienda" class="nav-link">
161+
<i class="material-icons">store</i> Tienda
162+
</a>
163+
</li>
164+
<li class="nav-item d-lg-none">
165+
<a href="https://twitter.com/OPRobots" class="nav-link">
166+
<i class="fa fa-twitter"></i> Twitter
167+
</a>
168+
</li>
169+
<li class="nav-item d-lg-none">
170+
<a href="https://www.facebook.com/OPRobots" class="nav-link">
171+
<i class="fa fa-facebook-square"></i> Facebook
172+
</a>
173+
</li>
174+
<li class="nav-item d-lg-none">
175+
<a href="https://www.instagram.com/OPRobots" class="nav-link">
176+
<i class="fa fa-instagram"></i> Instagram
177+
</a>
178+
</li>
179+
<li class="nav-item d-lg-none">
180+
<a href="https://github.com/OPRobots" class="nav-link">
181+
<i class="fa fa-github"></i> GitHub
182+
</a>
183+
</li>
184+
<li class="nav-item d-none d-lg-block">
185+
<a class="nav-link p-5" title="Síguenos en Twitter" href="https://twitter.com/OPRobots" target="_blank">
186+
<i class="fa fa-twitter"></i>
187+
</a>
188+
</li>
189+
<li class="nav-item d-none d-lg-block">
190+
<a class="nav-link p-5" title="Visítanos Facebook" href="https://www.facebook.com/OPRobots" target="_blank">
191+
<i class="fa fa-facebook-square"></i>
192+
</a>
193+
</li>
194+
<li class="nav-item d-none d-lg-block">
195+
<a class="nav-link p-5" title="Síguenos en Instagram" href="https://www.instagram.com/OPRobots" target="_blank">
196+
<i class="fa fa-instagram"></i>
197+
</a>
198+
</li>
199+
<li class="nav-item d-none d-lg-block">
200+
<a class="nav-link p-5" title="Síguenos en GitHub" href="https://github.com/OPRobots" target="_blank">
201+
<i class="fa fa-github"></i>
202+
</a>
203+
</li>
204+
</ul>
205+
</div>
206+
</div>
207+
</nav>
208+
<div class="preloader" id="preloader">
209+
<div class="item">
210+
<div class="spinner"></div>
211+
</div>
212+
</div>
213+
<!-- FIN NAVBAR -->
102214

103-
<div class="container text-center">
215+
<div class="container text-center maze-wall-placer" style="margin-top: 90px;">
104216
<h1 class="title">Maze Wall Placer</h1>
105217
<div class="form-group row justify-self-center" style="justify-self: center;">
106-
<label class="col-auto col-form-label">Filas:</label>
218+
<label class="col-auto col-form-label text-dark">Filas:</label>
107219
<div class="col-auto">
108220
<input type="number" class="form-control text-center" id="rows" value="16">
109221
</div>
110-
<label class="col-auto col-form-label">Columnas:</label>
222+
<label class="col-auto col-form-label text-dark">Columnas:</label>
111223
<div class="col-auto">
112224
<input type="number" class="form-control text-center" id="cols" value="16">
113225
</div>
114226
<div class="col text-right">
115-
<button class="btn btn-sm btn-primary" id="draw-maze">Actualizar</button>
227+
<button class="btn btn-sm btn-blue" id="draw-maze">Actualizar</button>
116228
</div>
117229
</div>
118230
<div class="row">
@@ -127,7 +239,7 @@ <h4 class="title">Maze Layout</h4>
127239
</div>
128240
<div class="row mb-5">
129241
<div class="col">
130-
<h4 class="title">Maze Array</h4>
242+
<h4 class="title">Maze BIT Array</h4>
131243
<textarea name="maze-array" id="maze-array" rows="4" class="form-control bg-light p-4"></textarea>
132244
</div>
133245
</div>
@@ -155,6 +267,10 @@ <h4 class="title">Maze ASCII</h4>
155267
let row_parent = td_parent.dataset.row;
156268
let col_parent = td_parent.dataset.col;
157269

270+
if (td_parent.classList.contains("bg-finish")) {
271+
return;
272+
}
273+
158274

159275
let top_sibling = document.querySelector('td.main-td[data-row="' + (parseInt(row_parent) - 1) + '"][data-col="' + col_parent + '"]') || document.createElement("td");
160276
let bottom_sibling = document.querySelector('td.main-td[data-row="' + (parseInt(row_parent) + 1) + '"][data-col="' + col_parent + '"]') || document.createElement("td");
@@ -439,6 +555,20 @@ <h4 class="title">Maze ASCII</h4>
439555
right_sibling.classList.add("border-left");
440556
}
441557
break;
558+
case col == 2 && row == 2:
559+
if (td_parent.classList.contains("bg-finish")) {
560+
td_parent.classList.remove("bg-finish");
561+
td_parent.classList.remove("border-finish-top");
562+
td_parent.classList.remove("border-finish-bottom");
563+
td_parent.classList.remove("border-finish-left");
564+
td_parent.classList.remove("border-finish-right");
565+
td_parent.querySelector("table td[data-row='2'][data-col='2']").innerHTML = "";
566+
} else {
567+
td_parent.classList.add("bg-finish");
568+
td_parent.querySelector("table td[data-row='2'][data-col='2']").innerHTML = "<b style='pointer-events:none'>F</b>";
569+
checkFinishBorders(document.getElementById("maze-table"));
570+
}
571+
break;
442572
}
443573
clearFades(td_snap);
444574
buildMazeArray();
@@ -465,10 +595,44 @@ <h4 class="title">Maze ASCII</h4>
465595
tbody.appendChild(tr);
466596
}
467597
table.appendChild(tbody);
598+
// table.style.position = "absolute";
599+
// table.style.top = "-2px";
600+
// table.style.left = "-2px";
601+
table.style.width = "60px";
602+
table.style.height = "60px";
603+
// td.style.position = "relative";
468604
td.appendChild(table);
469605

470606
}
471607

608+
let checkFinishBorders = function (maze) {
609+
maze.querySelectorAll("td.bg-finish").forEach(function (td) {
610+
let row = parseInt(td.dataset.row);
611+
let col = parseInt(td.dataset.col);
612+
613+
let left_td = document.querySelector('td.main-td[data-row="' + row + '"][data-col="' + (col - 1) + '"]');
614+
if (left_td && left_td.classList.contains("bg-finish")) {
615+
td.classList.add("border-finish-left");
616+
left_td.classList.add("border-finish-right");
617+
}
618+
let right_td = document.querySelector('td.main-td[data-row="' + row + '"][data-col="' + (col + 1) + '"]');
619+
if (right_td && right_td.classList.contains("bg-finish")) {
620+
td.classList.add("border-finish-right");
621+
right_td.classList.add("border-finish-left");
622+
}
623+
let top_td = document.querySelector('td.main-td[data-row="' + (row - 1) + '"][data-col="' + col + '"]');
624+
if (top_td && top_td.classList.contains("bg-finish")) {
625+
td.classList.add("border-finish-top");
626+
top_td.classList.add("border-finish-bottom");
627+
}
628+
let bottom_td = document.querySelector('td.main-td[data-row="' + (row + 1) + '"][data-col="' + col + '"]');
629+
if (bottom_td && bottom_td.classList.contains("bg-finish")) {
630+
td.classList.add("border-finish-bottom");
631+
bottom_td.classList.add("border-finish-top");
632+
}
633+
});
634+
};
635+
472636
let maze_table = document.getElementById("maze-table");
473637
maze_table.innerHTML = "";
474638
let maze_table_body = document.createElement("tbody");
@@ -494,23 +658,23 @@ <h4 class="title">Maze ASCII</h4>
494658

495659
if (col == 1 && row == rows) {
496660
td.classList.add("border-right");
497-
td.style.backgroundColor = "#8cc0c7";
661+
td.classList.add("bg-finish");
498662
td.innerHTML = "<b>S</b>";
499663
} else if (col == 2 && row == rows) {
500664
td.classList.add("border-left");
501665
}
502666

503667
switch (true) {
504668
case cols >= 9 && rows >= 9:
505-
if ((col == 8 || col == 9) && (row == rows-7 || row == rows-8)) {
506-
td.style.backgroundColor = "#8cc0c7";
507-
td.innerHTML = "<b>F</b>";
669+
if ((col == 8 || col == 9) && (row == rows - 7 || row == rows - 8)) {
670+
td.classList.add("bg-finish");
671+
td.querySelector("table td[data-row='2'][data-col='2']").innerHTML = "<b style='pointer-events:none'>F</b>";
508672
}
509673
break;
510674
case cols == 6 && rows == 6:
511675
if ((col == 5 || col == 6) && (row == 1 || row == 2)) {
512-
td.style.backgroundColor = "#8cc0c7";
513-
td.innerHTML = "<b>F</b>";
676+
td.classList.add("bg-finish");
677+
td.querySelector("table td[data-row='2'][data-col='2']").innerHTML = "<b style='pointer-events:none'>F</b>";
514678
}
515679
break;
516680
}
@@ -519,7 +683,7 @@ <h4 class="title">Maze ASCII</h4>
519683
}
520684
maze_table_body.appendChild(tr);
521685
}
522-
686+
checkFinishBorders(maze_table);
523687
buildMazeArray();
524688
buildMazeAscii();
525689
};
@@ -601,9 +765,8 @@ <h4 class="title">Maze ASCII</h4>
601765
}
602766
maze_ascii += "+"; // End of the last row
603767

604-
console.log(maze_ascii);
605768
document.getElementById("maze-ascii").value = maze_ascii;
606-
document.getElementById("maze-ascii").rows = Math.max(4, rows * 2 + 1); // Adjust rows based on the number of rows in the maze
769+
document.getElementById("maze-ascii").rows = Math.max(4, rows * 2 + 1) + 1;
607770
}
608771

609772
let updateBordersFromArray = function (maze_array) {

0 commit comments

Comments
 (0)