Add Pathfinder module to intro
This commit is contained in:
parent
1aacc94008
commit
c4314e0c64
53
index.html
53
index.html
@ -10,6 +10,10 @@
|
|||||||
<link rel="stylesheet" href="dist/reset.css">
|
<link rel="stylesheet" href="dist/reset.css">
|
||||||
<link rel="stylesheet" href="dist/reveal.css">
|
<link rel="stylesheet" href="dist/reveal.css">
|
||||||
<link rel="stylesheet" href="dist/theme/night.css">
|
<link rel="stylesheet" href="dist/theme/night.css">
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="module/pathfinder/typo.css">
|
||||||
|
<link rel="stylesheet" href="module/pathfinder/main.css">
|
||||||
|
<link rel="stylesheet" href="module/pathfinder/grid.css">
|
||||||
|
|
||||||
<!-- Theme used for syntax highlighted code -->
|
<!-- Theme used for syntax highlighted code -->
|
||||||
<link rel="stylesheet" href="plugin/highlight/monokai.css">
|
<link rel="stylesheet" href="plugin/highlight/monokai.css">
|
||||||
@ -34,6 +38,24 @@
|
|||||||
color: #222;
|
color: #222;
|
||||||
text-shadow: 0px 0px 5px green, 0px 0px 2px white, 2px 2px 1px white;
|
text-shadow: 0px 0px 5px green, 0px 0px 2px white, 2px 2px 1px white;
|
||||||
}
|
}
|
||||||
|
.reveal .hidden {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
.reveal .pathfinder-rerun {
|
||||||
|
z-index: 1000;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 10px;
|
||||||
|
left: 11px;
|
||||||
|
background-color: rgba(200, 200, 200, 0.3);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.reveal .pathfinder-rerun.disabled {
|
||||||
|
background-color: rgba(139, 106, 106, 0.3);
|
||||||
|
color: rgba(39, 27, 27, 0.3);
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
@ -108,6 +130,37 @@
|
|||||||
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
|
plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
<script src="module/pathfinder/main.js" async></script>
|
||||||
|
<script src="module/pathfinder/select.js" async></script>
|
||||||
|
<script>
|
||||||
|
const pathfinders = {}
|
||||||
|
Reveal.on( 'slidetransitionend', event => {
|
||||||
|
const slide = event.currentSlide
|
||||||
|
const slideId = event.indexh + ';' + event.indexv
|
||||||
|
if (slide && slide.classList.contains("pathfinder-page") && !(slideId in pathfinders)) {
|
||||||
|
pathfinders[slideId] = startPathfinder(slide)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
async function startPathfinder(slide) {
|
||||||
|
const p = spawnPathfinder(slide)
|
||||||
|
const rerun = slide.getElementsByClassName("pathfinder-rerun")[0]
|
||||||
|
if (rerun) {
|
||||||
|
rerun.onclick = async () => {
|
||||||
|
if (!rerun.classList.contains("disabled")) {
|
||||||
|
rerun.classList.add("disabled");
|
||||||
|
await p.RunMaze()
|
||||||
|
await p.Run();
|
||||||
|
rerun.classList.remove("disabled");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
await p.RunMaze()
|
||||||
|
Reveal.layout()
|
||||||
|
rerun.classList.add("disabled");
|
||||||
|
await p.Run()
|
||||||
|
rerun.classList.remove("disabled");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
20
module/pathfinder/README.md
Normal file
20
module/pathfinder/README.md
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
<p align="center"><img align="center" src="./neural.svg" width=100 height=100>
|
||||||
|
<h1 align="center">Pathfinding visualizer</h1></p>
|
||||||
|
|
||||||
|
|
||||||
|
<p align="center">
|
||||||
|
<img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/honzaap/GitHubCity?color=2411ed&style=flat-square">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Available algorithms:
|
||||||
|
* A*
|
||||||
|
* Djikstra's
|
||||||
|
* BFS
|
||||||
|
* DFS
|
||||||
|
* Greedy
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
Just clone the repository and open index.html, no compilation is needed.
|
||||||
BIN
module/pathfinder/animation.gif
Normal file
BIN
module/pathfinder/animation.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 915 KiB |
109
module/pathfinder/grid.css
Normal file
109
module/pathfinder/grid.css
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
|
||||||
|
.main-grid-container{
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.grid-container{
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.grid{
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: #1e1f29;
|
||||||
|
border: 2px solid var(--closed-path);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.row{
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
height: 31px;
|
||||||
|
}
|
||||||
|
.row.odd{
|
||||||
|
margin-left: 37px;
|
||||||
|
}
|
||||||
|
.cell{
|
||||||
|
margin: 0 1px 0 0;
|
||||||
|
width: 36px;
|
||||||
|
height: 40px;
|
||||||
|
overflow: visible;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.cell::after{
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
background-color: transparent;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
transition: background-color 0.15s linear;
|
||||||
|
clip-path: polygon(20px 0, 38px 10px, 38px 30px, 20px 40px, 2px 30px, 2px 10px);;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell::before{
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgba(255, 255, 255, 0.03);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
clip-path: polygon(20px 0, 38px 10px, 38px 30px, 20px 40px, 2px 30px, 2px 10px);;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cell States */
|
||||||
|
.cell.start::after{
|
||||||
|
background-color: var(--start);
|
||||||
|
}
|
||||||
|
.cell.end::after{
|
||||||
|
background-color: var(--end);
|
||||||
|
}
|
||||||
|
.cell.null::after{
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.cell.null::before{
|
||||||
|
/*transform: scale(1.05);*/
|
||||||
|
}
|
||||||
|
.cell.open::after{
|
||||||
|
background-color: var(--open-path);
|
||||||
|
}
|
||||||
|
.cell.closed::after{
|
||||||
|
background-color: var(--closed-path);
|
||||||
|
}
|
||||||
|
.cell.path::after{
|
||||||
|
background-color: var(--path);
|
||||||
|
}
|
||||||
|
.cell.wall::after{
|
||||||
|
background: linear-gradient(var(--wall) 0px, var(--open-path) 1400px);
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
.cell.wall::before{
|
||||||
|
background: linear-gradient(var(--wall) 0px, var(--open-path) 1400px);
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
.cell.animate{
|
||||||
|
animation-name: cell-anim;
|
||||||
|
animation-duration: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes cell-anim {
|
||||||
|
0%{
|
||||||
|
transform: scale(1.0);
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
50%{
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
100%{
|
||||||
|
transform: scale(1.0);
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
74
module/pathfinder/index.html
Normal file
74
module/pathfinder/index.html
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
|
||||||
|
<title>Pathfinding Visualizer</title>
|
||||||
|
<meta name="description" content="Pathfinding algorithms visualizer. Visualize algorithms like A*, Djikstra's and more!">
|
||||||
|
<meta name="keywords" content="pathfinding, visualization, a*, djikstra's algorithm, prim's algorithm">
|
||||||
|
<link rel="stylesheet" href="typo.css">
|
||||||
|
<link rel="stylesheet" href="main.css">
|
||||||
|
<link rel="stylesheet" href="grid.css">
|
||||||
|
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
|
||||||
|
<link rel="icon" href="neural.svg">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="pathfinder-page">
|
||||||
|
<header>
|
||||||
|
<nav class="navbar" id="navbar">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="custom-select">
|
||||||
|
<select id="algo-select">
|
||||||
|
<option value="AStar">A* Algorithm</option>
|
||||||
|
<option value="Dijkstra">Dijkstra's Algorithm</option>
|
||||||
|
<option value="BFS">Breadth First Search</option>
|
||||||
|
<option value="DFS">Depth First Search</option>
|
||||||
|
<option value="Greedy">Greedy Algorithm</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="custom-select">
|
||||||
|
<select id="maze-algo-select">
|
||||||
|
<option value="DFS">Random DFS Maze</option>
|
||||||
|
<option value="Prim">Prim's Algorithm</option>
|
||||||
|
<option value="Random">Random Maze</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<button class="general-button start-button" onclick="Run()">Visualize</button>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="speed-container slidecontainer">
|
||||||
|
<span class="range-caption">Speed</span>
|
||||||
|
<input type="range" class="slider" id="range-speed" min="0" max="200" value="200">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<button class="general-button options-button" onclick="ResetPath();">Reset Path</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-item">
|
||||||
|
<button class="general-button options-button" onclick="ClearWalls();">Remove Walls</button>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<button class="general-button options-button" onclick="ClearGrid();">Clear Board</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="main-grid-container">
|
||||||
|
<div class="grid-container">
|
||||||
|
<div class="grid" id="grid">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="main.js" async></script>
|
||||||
|
<script src="select.js" async></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
195
module/pathfinder/main.css
Normal file
195
module/pathfinder/main.css
Normal file
@ -0,0 +1,195 @@
|
|||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
text-decoration: none;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root{
|
||||||
|
--start: #9faf20;
|
||||||
|
--end: #207094;
|
||||||
|
--open-path: #885771;
|
||||||
|
--closed-path: #a6819b;
|
||||||
|
--path: #ff6be6;
|
||||||
|
--wall: #001834;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pathfinder-page{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-flow:column nowrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
.navbar{
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: stretch;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: bold;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.navbar-item{
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
.navbar-item-caption{
|
||||||
|
text-align: center;
|
||||||
|
background-color: var(--closed-path);
|
||||||
|
}
|
||||||
|
.general-button{
|
||||||
|
color: #fff;
|
||||||
|
font-weight: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
background-color: transparent;
|
||||||
|
transition: background-color 0.3s linear, transform 0.15s ease-out;
|
||||||
|
}
|
||||||
|
.general-button:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.general-button:active{
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
.options-button:hover{
|
||||||
|
color: var(--path);
|
||||||
|
}
|
||||||
|
.start-button{
|
||||||
|
background-color: var(--start);
|
||||||
|
border-radius: 50px;
|
||||||
|
color: #fff;
|
||||||
|
padding: 20px 40px;
|
||||||
|
}
|
||||||
|
.start-button:hover{
|
||||||
|
background-color: var(--end);
|
||||||
|
}
|
||||||
|
|
||||||
|
.speed-container{
|
||||||
|
margin-top: 0.2em;
|
||||||
|
padding: 0.2em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.range-caption{
|
||||||
|
font-size: 1em;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-select {
|
||||||
|
position: relative;
|
||||||
|
font-size: 1em;
|
||||||
|
background-color: transparent;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.custom-select:hover{
|
||||||
|
}
|
||||||
|
.custom-select select {
|
||||||
|
font-size: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-selected:after {
|
||||||
|
position: absolute;
|
||||||
|
content: "";
|
||||||
|
top: 40%;
|
||||||
|
right: 5px;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 6px solid transparent;
|
||||||
|
border-color: #fff transparent transparent transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-selected.select-arrow-active:after {
|
||||||
|
border-color: transparent transparent #fff transparent;
|
||||||
|
top: 30%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-items div,.select-selected {
|
||||||
|
padding: 0.5em 0 0.5em 0.3em;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style items (options): */
|
||||||
|
.select-items {
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 99;
|
||||||
|
text-align:left;
|
||||||
|
border-radius: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 220px;
|
||||||
|
}
|
||||||
|
.select-items div{
|
||||||
|
background-color: var(--open-path);
|
||||||
|
transition: background-color 0.3s linear;
|
||||||
|
padding: 12px 20px;
|
||||||
|
}
|
||||||
|
/* Hide the items when the select box is closed: */
|
||||||
|
.select-hide {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-items div:hover, .same-as-selected {
|
||||||
|
background-color: var(--closed-path);
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-selected {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
height: 100%;
|
||||||
|
padding: 1em 1em 1em 0.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slidecontainer {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.slider {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
overflow: hidden;
|
||||||
|
appearance: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 18px;
|
||||||
|
margin-top: 5px;
|
||||||
|
outline: none;
|
||||||
|
border-radius: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
border-radius: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--wall);
|
||||||
|
box-shadow: -85px 0 0 80px var(--path);
|
||||||
|
}
|
||||||
|
.slider::-moz-range-thumb {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
background: #000;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
/** FF*/
|
||||||
|
input[type="range"]::-moz-range-progress {
|
||||||
|
background-color: var(--start);
|
||||||
|
}
|
||||||
|
input[type="range"]::-moz-range-track {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
/* IE*/
|
||||||
|
input[type="range"]::-ms-fill-lower {
|
||||||
|
background-color: var(--start);
|
||||||
|
}
|
||||||
|
input[type="range"]::-ms-fill-upper {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
1027
module/pathfinder/main.js
Normal file
1027
module/pathfinder/main.js
Normal file
File diff suppressed because it is too large
Load Diff
1
module/pathfinder/neural.svg
Normal file
1
module/pathfinder/neural.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg id="Layer_1_1_" enable-background="new 0 0 64 64" height="512" viewBox="0 0 64 64" width="512" xmlns="http://www.w3.org/2000/svg"><g fill="#68607c"><path d="m13.55 13h14.9v2h-14.9z" transform="matrix(.94 -.342 .342 .94 -3.524 8.035)"/><path d="m42 9.686h2v22.627h-2z" transform="matrix(.707 -.707 .707 .707 -2.255 36.556)"/><path d="m42 24.444h1.999v12.113h-1.999z" transform="matrix(.136 -.991 .991 .136 6.926 68.943)"/><path d="m20 14.556h2v17.889h-2z" transform="matrix(.447 -.894 .894 .447 -9.41 31.775)"/><path d="m19.825 41.406h2.001v16.018h-2.001z" transform="matrix(.448 -.894 .894 .448 -32.685 45.919)"/><path d="m31 33h2v17h-2z"/><path d="m5.513 26h30.974v2h-30.974z" transform="matrix(.544 -.839 .839 .544 -13.08 29.93)"/><path d="m31.824 42.25h22.832v2h-22.832z" transform="matrix(.691 -.723 .723 .691 -17.903 44.594)"/><path d="m19.785 20.006h2v32.257h-2z" transform="matrix(.86 -.511 .511 .86 -15.542 15.688)"/></g><path d="m17 44c0 1.13-.26 2.19-.74 3.13-1.14 2.3-3.52 3.87-6.26 3.87-3.87 0-7-3.13-7-7s3.13-7 7-7c1.41 0 2.71.41 3.8 1.12 1.93 1.25 3.2 3.41 3.2 5.88z" fill="#4e9bb9"/><path d="m37.31 49.45c1.06 1.22 1.69 2.81 1.69 4.55 0 3.87-3.13 7-7 7s-7-3.13-7-7c0-.81.14-1.58.39-2.3.48-1.41 1.4-2.6 2.6-3.44 1.13-.8 2.51-1.26 4.01-1.26 2.13 0 4.04.95 5.31 2.45z" fill="#91cbd7"/><path d="m54 25c3.87 0 7 3.13 7 7s-3.13 7-7 7c-1.88 0-3.58-.73-4.83-1.95-1.34-1.26-2.17-3.06-2.17-5.05 0-.32.02-.63.07-.94.2-1.56.92-2.95 1.98-4.01 1.27-1.27 3.01-2.05 4.95-2.05z" fill="#ffd086"/><path d="m38.93 29.94c-.45 3.42-3.38 6.06-6.93 6.06-3.87 0-7-3.13-7-7 0-1.13.26-2.19.74-3.13 1.14-2.3 3.52-3.87 6.26-3.87 3.87 0 7 3.13 7 7 0 .32-.02.63-.07.94z" fill="#ed6571"/><path d="m32 3c3.87 0 7 3.13 7 7 0 1.94-.78 3.68-2.05 4.95s-3.01 2.05-4.95 2.05c-1.41 0-2.71-.41-3.8-1.12-1.27-.82-2.26-2.04-2.78-3.49-.27-.74-.42-1.55-.42-2.39 0-3.87 3.13-7 7-7z" fill="#f69489"/><path d="m16.58 15.61c.27.74.42 1.55.42 2.39 0 1.13-.26 2.19-.74 3.13-.6 1.2-1.53 2.2-2.68 2.88-1.04.63-2.27.99-3.58.99-3.87 0-7-3.13-7-7s3.13-7 7-7c3.03 0 5.6 1.92 6.58 4.61z" fill="#91cbd7"/></svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
89
module/pathfinder/select.js
Normal file
89
module/pathfinder/select.js
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
var x, i, j, l, ll, selElmnt, a, b, c;
|
||||||
|
/* Look for any elements with the class "custom-select": */
|
||||||
|
x = document.getElementsByClassName("custom-select");
|
||||||
|
for(let c of x)
|
||||||
|
{
|
||||||
|
c.style.width = (c.children[0].scrollWidth + 35).toString() + "px";
|
||||||
|
c.children[0].style.display = "none";
|
||||||
|
}
|
||||||
|
l = x.length;
|
||||||
|
for (i = 0; i < l; i++) {
|
||||||
|
selElmnt = x[i].getElementsByTagName("select")[0];
|
||||||
|
ll = selElmnt.length;
|
||||||
|
/* For each element, create a new DIV that will act as the selected item: */
|
||||||
|
a = document.createElement("DIV");
|
||||||
|
a.setAttribute("class", "select-selected");
|
||||||
|
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
|
||||||
|
x[i].appendChild(a);
|
||||||
|
/* For each element, create a new DIV that will contain the option list: */
|
||||||
|
b = document.createElement("DIV");
|
||||||
|
b.setAttribute("class", "select-items select-hide");
|
||||||
|
for (j = 0; j < ll; j++) {
|
||||||
|
/* For each option in the original select element,
|
||||||
|
create a new DIV that will act as an option item: */
|
||||||
|
c = document.createElement("DIV");
|
||||||
|
c.innerHTML = selElmnt.options[j].innerHTML;
|
||||||
|
c.addEventListener("click", function(e) {
|
||||||
|
/* When an item is clicked, update the original select box,
|
||||||
|
and the selected item: */
|
||||||
|
var y, i, k, s, h, sl, yl;
|
||||||
|
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
|
||||||
|
sl = s.length;
|
||||||
|
h = this.parentNode.previousSibling;
|
||||||
|
for (i = 0; i < sl; i++) {
|
||||||
|
|
||||||
|
if (s.options[i].innerHTML == this.innerHTML) {
|
||||||
|
s.selectedIndex = i;
|
||||||
|
h.innerHTML = this.innerHTML;
|
||||||
|
y = this.parentNode.getElementsByClassName("same-as-selected");
|
||||||
|
yl = y.length;
|
||||||
|
for (k = 0; k < yl; k++) {
|
||||||
|
y[k].removeAttribute("class");
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setAttribute("class", "same-as-selected");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
SelectChange(s.id);
|
||||||
|
|
||||||
|
h.click();
|
||||||
|
});
|
||||||
|
b.appendChild(c);
|
||||||
|
}
|
||||||
|
x[i].appendChild(b);
|
||||||
|
a.addEventListener("click", function(e) {
|
||||||
|
/* When the select box is clicked, close any other select boxes,
|
||||||
|
and open/close the current select box: */
|
||||||
|
e.stopPropagation();
|
||||||
|
closeAllSelect(this);
|
||||||
|
this.nextSibling.classList.toggle("select-hide");
|
||||||
|
this.classList.toggle("select-arrow-active");
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeAllSelect(elmnt) {
|
||||||
|
/* A function that will close all select boxes in the document,
|
||||||
|
except the current select box: */
|
||||||
|
var x, y, i, xl, yl, arrNo = [];
|
||||||
|
x = document.getElementsByClassName("select-items");
|
||||||
|
y = document.getElementsByClassName("select-selected");
|
||||||
|
xl = x.length;
|
||||||
|
yl = y.length;
|
||||||
|
for (i = 0; i < yl; i++) {
|
||||||
|
if (elmnt == y[i]) {
|
||||||
|
arrNo.push(i)
|
||||||
|
} else {
|
||||||
|
y[i].classList.remove("select-arrow-active");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
for (i = 0; i < xl; i++) {
|
||||||
|
if (arrNo.indexOf(i)) {
|
||||||
|
x[i].classList.add("select-hide");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* If the user clicks anywhere outside the select box,
|
||||||
|
then close all select boxes: */
|
||||||
|
document.addEventListener("click", closeAllSelect);
|
||||||
15
module/pathfinder/typo.css
Normal file
15
module/pathfinder/typo.css
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
html{
|
||||||
|
font-family: "Roboto";
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
a,p,span,h1,h2,h3,h4,h5,button,select,option{
|
||||||
|
font-family: "Roboto";
|
||||||
|
}
|
||||||
|
a{
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
select,option,select::after,select::before{
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
118
slides/intro.md
118
slides/intro.md
@ -13,9 +13,123 @@
|
|||||||
- you feel miserable and tired. <!-- .element: class="fragment" -->
|
- you feel miserable and tired. <!-- .element: class="fragment" -->
|
||||||
|
|
||||||
---
|
---
|
||||||
|
<!-- .slide: data-transition="slide-in fade-out" -->
|
||||||
### ...but why?
|
### ...but why?
|
||||||
|
|
||||||
|
---
|
||||||
|
<!-- .slide: data-transition="fade-in slide-out" -->
|
||||||
|
I don't feel like it.
|
||||||
|
|
||||||
|
I'm too tired now. <!-- .element: class="fragment" -->
|
||||||
|
|
||||||
|
I don't know how to do it. <!-- .element: class="fragment" -->
|
||||||
|
|
||||||
|
I'm too busy now. <!-- .element: class="fragment" -->
|
||||||
|
|
||||||
|
I'll do it, but first [☕]. <!-- .element: class="fragment" -->
|
||||||
|
|
||||||
|
---
|
||||||
|
<!-- .slide: class="pathfinder-page" -->
|
||||||
|
#### Trying it all
|
||||||
|
|
||||||
|
<header class="navbar hidden">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="custom-select">
|
||||||
|
<select class="algo-select">
|
||||||
|
<option value="BFS" selected>Breadth First Search</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="custom-select">
|
||||||
|
<select class="maze-algo-select">
|
||||||
|
<option value="Random" selected>Random Maze</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="speed-container slidecontainer">
|
||||||
|
<span class="range-caption">Speed</span>
|
||||||
|
<input type="range" class="slider range-speed" min="0" max="200" value="100">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="main-grid-container">
|
||||||
|
<div class="grid-container"><div class="grid" id="grid"></div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pathfinder-rerun">Restart</div>
|
||||||
|
|
||||||
|
-V-
|
||||||
|
<!-- .slide: class="pathfinder-page" -->
|
||||||
|
#### Wandering around
|
||||||
|
|
||||||
|
<header class="navbar hidden">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="custom-select">
|
||||||
|
<select class="algo-select">
|
||||||
|
<option value="DFS" selected>Depth First Search</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="custom-select">
|
||||||
|
<select class="maze-algo-select">
|
||||||
|
<option value="Random" selected>Random Maze</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="speed-container slidecontainer">
|
||||||
|
<span class="range-caption">Speed</span>
|
||||||
|
<input type="range" class="slider range-speed" min="0" max="200" value="100">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="main-grid-container">
|
||||||
|
<div class="grid-container"><div class="grid"></div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pathfinder-rerun">Restart</div>
|
||||||
|
|
||||||
|
-V-
|
||||||
|
<!-- .slide: class="pathfinder-page" -->
|
||||||
|
#### Having a goal
|
||||||
|
|
||||||
|
<header class="navbar hidden">
|
||||||
|
<nav class="navbar">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="custom-select">
|
||||||
|
<select class="algo-select">
|
||||||
|
<option value="Greedy" selected>Greedy Algorithm</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="custom-select">
|
||||||
|
<select class="maze-algo-select">
|
||||||
|
<option value="Random" selected>Random Maze</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="speed-container slidecontainer">
|
||||||
|
<span class="range-caption">Speed</span>
|
||||||
|
<input type="range" class="slider range-speed" min="0" max="200" value="100">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<div class="main-grid-container">
|
||||||
|
<div class="grid-container"><div class="grid"></div></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pathfinder-rerun">Restart</div>
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
#### Decision Paralysis
|
#### Decision Paralysis
|
||||||
@ -24,7 +138,7 @@
|
|||||||
- What if I choose the wrong one? <!-- .element: class="fragment" -->
|
- What if I choose the wrong one? <!-- .element: class="fragment" -->
|
||||||
- Should I try the other one? <!-- .element: class="fragment" -->
|
- Should I try the other one? <!-- .element: class="fragment" -->
|
||||||
|
|
||||||
Deciding on anything hurts. Let's not do it *right now*.
|
Deciding on anything hurts. Let's not do it *now*.
|
||||||
<!-- .element: class="fragment r-fit-text" -->
|
<!-- .element: class="fragment r-fit-text" -->
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user