-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbundle.js
1 lines (1 loc) · 60.5 KB
/
bundle.js
1
!function(n){var e={};function t(r){if(e[r])return e[r].exports;var i=e[r]={i:r,l:!1,exports:{}};return n[r].call(i.exports,i,i.exports,t),i.l=!0,i.exports}t.m=n,t.c=e,t.d=function(n,e,r){t.o(n,e)||Object.defineProperty(n,e,{enumerable:!0,get:r})},t.r=function(n){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.t=function(n,e){if(1&e&&(n=t(n)),8&e)return n;if(4&e&&"object"==typeof n&&n&&n.__esModule)return n;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:n}),2&e&&"string"!=typeof n)for(var i in n)t.d(r,i,function(e){return n[e]}.bind(null,i));return r},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},t.p="",t(t.s=4)}([function(n,e,t){"use strict";n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t=function(n,e){var t=n[1]||"",r=n[3];if(!r)return t;if(e&&"function"==typeof btoa){var i=(a=r,l=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),s="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(l),"/*# ".concat(s," */")),o=r.sources.map((function(n){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(n," */")}));return[t].concat(o).concat([i]).join("\n")}var a,l,s;return[t].join("\n")}(e,n);return e[2]?"@media ".concat(e[2]," {").concat(t,"}"):t})).join("")},e.i=function(n,t,r){"string"==typeof n&&(n=[[null,n,""]]);var i={};if(r)for(var o=0;o<this.length;o++){var a=this[o][0];null!=a&&(i[a]=!0)}for(var l=0;l<n.length;l++){var s=[].concat(n[l]);r&&i[s[0]]||(t&&(s[2]?s[2]="".concat(t," and ").concat(s[2]):s[2]=t),e.push(s))}},e}},function(n,e,t){var r=t(2),i=t(3);"string"==typeof(i=i.__esModule?i.default:i)&&(i=[[n.i,i,""]]);var o={insert:"head",singleton:!1};r(i,o);n.exports=i.locals||{}},function(n,e,t){"use strict";var r,i=function(){return void 0===r&&(r=Boolean(window&&document&&document.all&&!window.atob)),r},o=function(){var n={};return function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}n[e]=t}return n[e]}}(),a=[];function l(n){for(var e=-1,t=0;t<a.length;t++)if(a[t].identifier===n){e=t;break}return e}function s(n,e){for(var t={},r=[],i=0;i<n.length;i++){var o=n[i],s=e.base?o[0]+e.base:o[0],c=t[s]||0,u="".concat(s," ").concat(c);t[s]=c+1;var d=l(u),h={css:o[1],media:o[2],sourceMap:o[3]};-1!==d?(a[d].references++,a[d].updater(h)):a.push({identifier:u,updater:g(h,e),references:1}),r.push(u)}return r}function c(n){var e=document.createElement("style"),r=n.attributes||{};if(void 0===r.nonce){var i=t.nc;i&&(r.nonce=i)}if(Object.keys(r).forEach((function(n){e.setAttribute(n,r[n])})),"function"==typeof n.insert)n.insert(e);else{var a=o(n.insert||"head");if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(e)}return e}var u,d=(u=[],function(n,e){return u[n]=e,u.filter(Boolean).join("\n")});function h(n,e,t,r){var i=t?"":r.media?"@media ".concat(r.media," {").concat(r.css,"}"):r.css;if(n.styleSheet)n.styleSheet.cssText=d(e,i);else{var o=document.createTextNode(i),a=n.childNodes;a[e]&&n.removeChild(a[e]),a.length?n.insertBefore(o,a[e]):n.appendChild(o)}}function f(n,e,t){var r=t.css,i=t.media,o=t.sourceMap;if(i?n.setAttribute("media",i):n.removeAttribute("media"),o&&btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),n.styleSheet)n.styleSheet.cssText=r;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(r))}}var m=null,p=0;function g(n,e){var t,r,i;if(e.singleton){var o=p++;t=m||(m=c(e)),r=h.bind(null,t,o,!1),i=h.bind(null,t,o,!0)}else t=c(e),r=f.bind(null,t,e),i=function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(t)};return r(n),function(e){if(e){if(e.css===n.css&&e.media===n.media&&e.sourceMap===n.sourceMap)return;r(n=e)}else i()}}n.exports=function(n,e){(e=e||{}).singleton||"boolean"==typeof e.singleton||(e.singleton=i());var t=s(n=n||[],e);return function(n){if(n=n||[],"[object Array]"===Object.prototype.toString.call(n)){for(var r=0;r<t.length;r++){var i=l(t[r]);a[i].references--}for(var o=s(n,e),c=0;c<t.length;c++){var u=l(t[c]);0===a[u].references&&(a[u].updater(),a.splice(u,1))}t=o}}}},function(n,e,t){"use strict";t.r(e);var r=t(0),i=t.n(r)()(!1);i.push([n.i,"@import url(https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap);"]),i.push([n.i,"@import url(https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap);"]),i.push([n.i,"*{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n font-family: 'Josefin Sans', sans-serif;\n}\nbody{\n height:100vh;\n background-color: #f2f2f2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: start;\n overflow-x: hidden;\n}\nbody .title{\n font-family: 'Dancing Script', cursive;\n font-size: 2.5rem;\n font-weight: 700;\n margin-top: 1rem;\n}\nbody .title i{\n font-size: 1.2rem;\n color:rgb(71, 187, 255);\n cursor: pointer;\n position: relative;\n bottom: 1rem;\n border-radius: 50%;\n}\nbody .title i.noticeable{\n color:tomato;\n transform:scale(1.2);\n box-shadow:2px 2px 3px #fff;\n animation: noticeable 0.7s infinite;\n}\n@keyframes noticeable{\n 50%{\n transform: scale(1.4) translateY(-15%);\n }\n}\n\nbody .title i:hover{\n color:tomato;\n}\nbody > #panel-label{\n width:3rem;\n height:3rem;\n border-radius: 50%;\n background:#ee5e5e;\n position:absolute;\n left:1.4rem;\n top:0.6rem;\n line-height:1.2;\n text-align: center;\n color:#fff;\n font-size: 2.5rem;\n box-shadow: 1px 1px 4px #000, -3px -3px 3px #fff;\n cursor:pointer;\n opacity:0.5;\n z-index:1;\n transition:0.3s ease-out;\n}\nbody > #panel-label:hover{\n opacity:1;\n}\nbody >#panel-toggle:checked + label{\n left:20rem;\n top:1.1rem;\n transform:rotate(45deg);\n box-shadow: 1px 1px 2px #000, -1px -1px 2px #fff;\n width:2rem;\n height:2rem;\n line-height: 2rem;\n opacity:0.9;\n z-index:11;\n}\nbody >#panel-toggle:checked + label:hover{\n left:20.05rem;\n top:1.2rem;\n}\nbody > input{\n visibility: hidden;\n}\n\n.control-panel{\n position:absolute;\n padding: 1rem;\n padding-top: 2rem;\n left:-25rem;\n top:1rem;\n width:20rem;\n /*height:48rem;*/\n height:97%;\n background:linear-gradient(60deg, rgba(91, 94, 67, 0.6) 0%, rgba(240, 245, 222, 0.119) 100%);\n box-shadow: 1px 1px 10px #888;\n border-radius:10px;\n border-top-left-radius:55px ;\n z-index:10;\n transition: left 0.3s ease-in;\n}\nbody> #panel-toggle:checked ~ .control-panel{\n left:3rem\n}\nbody> #panel-toggle:checked ~ .control-panel .control-item{\n left:0rem\n}\nbody> #panel-toggle:checked ~ .control-panel .control-item:nth-child(1){\n transition-delay: 0.1s;\n}\nbody> #panel-toggle:checked ~ .control-panel .control-item:nth-child(2){\n transition-delay: 0.2s;\n}\nbody> #panel-toggle:checked ~ .control-panel .control-item:nth-child(3){\n transition-delay: 0.3s;\n}\n\n\n.control-panel .control-item{\n display: flex;\n flex-direction: column;\n min-height:5rem;\n background:#a2c211;\n border-radius:2rem;\n margin:0.3rem auto;\n opacity:1;\n color: #fff;\n position: relative;\n padding: 1rem;\n font-weight: 500;\n left:-20rem;\n \n transition:left 0.3s ease-in;\n}\nbody > input{\n opacity: 0.1;\n}\n.control-item > label > p{\n width:100%;\n cursor: pointer;\n font-size: 1.5rem;\n letter-spacing: 0.5px;\n font-weight: 700;\n transition: all 0.1s ease;\n}\n.control-item p:hover{\n padding-top:0.1rem;\n padding-left: 0.4rem;\n color:#000;\n}\n.control-item p span{\n float:right;\n margin-right:1rem;\n font-weight: 600;\n}\n\n.control-item ul{\n list-style: none;\n justify-content: space-evenly;\n align-items: start;\n display: none;\n font-weight: 600;\n font-size: 1.2rem;\n position:relative;\n top:-1rem;\n padding-bottom: 1rem;\n}\n.control-item p span{\n transition:0.3s;\n}\n.control-item input:checked ~label p span{\n transform:rotate(180deg);\n}\n.control-item input:checked ~ ul{\n display: flex;\n flex-direction: column;\n top:1rem;\n}\n.control-item input[type='checkbox']{\n visibility: hidden;\n}\n.control-item ul li{\n position: relative;\n padding:1rem 0.3rem;\n width: 100%;\n overflow: hidden;\n \n}\n.control-item > ul li label:hover, .control-item > ul li input:checked ~ label{\n padding-left: 1.5rem;\n}\n.control-item > ul input[type='checkbox']:disabled + label{\n color:rgb(129, 128, 128);\n padding-left: 1.6rem;\n}\n\n\n.control-item > ul li:after{\n content:'';\n width:12rem;\n height:1px;\n background-color:#ccc;\n position:absolute;\n bottom:0;\n left:0rem;\n\n}\nli:last-child {\n margin-bottom: 0.4rem;\n}\n\n.control-item > ul li:before{\n content:'';\n width:12rem;\n height:2px;\n background:linear-gradient(0deg, rgba(0,0,0,0.6320903361344538) 0%, rgba(236,34,172,0.5872724089635855) 100%);\n position:absolute;\n bottom:0;\n left:-10rem;\n z-index: 1;\n opacity: 0;\n transition:left 0.3s linear, opacity 0.1s ease-in,width 2s linear;\n}\n.control-item > ul li:hover:before{\n left:0rem;\n opacity: 1; \n}\n\n.control-item > ul li:before input:checked{\n left:0rem;\n opacity:1;\n width:90%;\n}\n\n.control-item > ul li label{\n position:absolute;\n top:0;\n left:0;\n width:100%;\n height:100%;\n cursor: pointer;\n transition:0.3s;\n line-height:3.5rem;\n}\n.control-item > ul li input:checked + label{\n border-bottom: 3px solid rgba(0,0,0,0.6320903361344538);\n color:#000;\n z-index:44;\n}\n.control-item > ul li input:checked + label:after{\n font-family: \"Font Awesome 5 Free\";\n content: \"\\f00c\";\n display: inline-block;\n padding-right: 3px;\n vertical-align: middle;\n font-weight: 900;\n position: absolute;\n left:0;\n}\n\n/*.control-item > ul li input{\n visibility: hidden;\n}*/\n\n\n/*--------------------------------\n Range Style\n----------------------------------*/\n\n.control-item input[type='range'] + span{\n padding-left: 0.7rem;\n}\n\ninput[type=range]{\n -webkit-appearance: none;\n height:0.5rem;\n background: linear-gradient(-60deg, rgba(91, 94, 67, 0.6) 0%, rgba(240, 245, 222, 0.119) 100%);\n \n outline: none;\n border-radius: 10px;\n}\n\ninput[type=range]::-webkit-slider-thumb{\n -webkit-appearance: none;\n height:1rem;\n width:1rem;\n border-radius: 50%;\n background-color: #f54e91ca;\n box-shadow: 0 0 3px aqua;\n transform: translateZ(400px);\n cursor: pointer;\n}\n\n\n/*----------------\n Visualize Btn\n------------------*/\n.control-panel > button{\n position:absolute;\n bottom:1.3rem;\n left:-20rem;\n padding: 1rem 3rem;\n border:none;\n border:2px solid #f54e91;\n box-shadow: inset 1px 1px 25px #f54e91;\n background-color: transparent;\n color:#f2f2f2;\n font-size: 1.5rem;\n font-weight: 600;\n border-radius: 10px;\n cursor: pointer;\n outline:none;\n transition: background-color 0.2s ease,border-radius 0.3s,left 0.3s ease-out, transform 0.3s ease-out;\n}\n.control-panel >button:hover{\n background-color: #f54e91;\n color:#fff;\n border-radius: 15px;\n}\n\nbody> input:checked ~ .control-panel button{\n left:50%;\n transform:translateX(-50%);\n transition-delay: 0.5s;\n transition-property: left;\n}\n\n/*-------------------------------------------\n Instructions\n--------------------------------------------*/\n.instruction{\n z-index:100;\n position:absolute;\n}\n.instruction.hidden{\n display: none;\n}\n\n.instruction-start{\n left:5rem;\n top:1rem;\n}\n.instruction-algos{\n left:25rem;\n top:15%;\n}\n.instruction-options{\n left:25rem;\n top:30%;\n}\n.instruction-visBtn{\n left:25rem;\n top:73%;\n}\n.instruction-table-title{\n left:8rem;\n top:6rem;\n}\n.instruction-table-desc{\n top:3.5rem;\n /*display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;*/\n}\n.instruction-table-cleanbtn{\n top:5.5rem;\n right:5rem;\n}\n.instruction-table-time{\n top:80%;\n right:9rem;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.instruction-legend{\n top:1.5rem;\n right:6rem;\n}\n.instruction-end{\n top:4rem;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\n\n.instruction i{\n font-size: 3rem;\n color:tomato;\n background: #fff;\n border-radius: 50%;\n padding: 0;\n margin: 0;\n border:none;\n animation: icon-animation 0.5s infinite;\n}\n@keyframes icon-animation{\n 0%{\n transform: translateX(10%);\n }\n 50%{\n transform: translateX(20%);\n }\n 75%{\n transform: translateX(10%);\n }\n 100%{\n transform: translateX(1%);\n }\n}\n.instruction-table-desc i,.instruction-end i{\n animation: down-arrow-animation 0.5s infinite;\n}\n@keyframes down-arrow-animation{\n 0%{\n transform: translateY(10%);\n }\n 50%{\n transform: translateY(20%);\n }\n 75%{\n transform: translateY(10%);\n }\n 100%{\n transform: translateY(1%);\n }\n}\n.instruction-table-cleanbtn i, .instruction-legend i, .instruction-table-time i{\n float: right;\n}\n.instruction-table-cleanbtn p, .instruction-legend p, .instruction-table-time p{\n float: left;\n}\n\n\n.instruction p{\n background:tomato;\n font-size: 1.2rem;\n padding: 1rem;\n color: #fff;\n border-radius: 10px;\n z-index:100;\n margin-top: 5px;\n max-width: 40rem;\n line-height: 1.5;\n text-align: justify;\n}\n.instruction a{\n color:#f4f4f4;\n font-weight: 600;\n margin:0.3rem;\n transition:all 0.2s;\n}\n.instruction a:hover{\n color:#fff;\n font-weight: 660;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*---------------------------------------\n Alert\n-----------------------------------------*/\n.alert{\n position: absolute;\n background-color: tomato;\n padding:1.5rem;\n color:#fff;\n font-size: 1.1rem;\n font-weight: bold;\n right:5rem;\n top:-5rem;\n border-radius: 5px;\n z-index:11;\n transition: top 0.3s ease-in-out;\n}\n.alert.active{\n top:1rem;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*---------------------------------------\n--- LEGEND\n-----------------------------------------*/\n.legend{\n position:absolute;\n /*top:-30rem;\n left:70rem;*/\n top:-50rem;\n right:-20rem;\n background:linear-gradient(120deg, rgba(91, 94, 67, 0.6) 0%, rgba(183, 190, 158, 0.8) 100%);\n color:#fff;\n opacity:0.99;\n padding: 0.5rem;\n line-height: 1.7rem;\n font-size: 1.3rem;\n font-weight: 550;\n border-radius: 5px;\n border-top-right-radius: 40px;\n transition:0.3s ease-in;\n z-index: 8;\n}\n#legend-btn + label{\n position:absolute;\n top:0.7rem;\n right:1rem;\n width:4rem;\n height:4rem;\n line-height:4rem;\n text-align:center;\n background:rgba(108, 170, 27, 0.8);\n font-size: 1rem;\n border-radius: 50%;\n color:#fff;\n font-weight: 600;\n box-shadow: 1px 1px 5px rgb(68, 66, 66), -3px -3px 5px #fff;\n cursor:pointer;\n opacity:0.5;\n transition:opacity 0.3s ease-out, top 0.2s ,right 0.2s ;\n z-index: 9;\n}\n#legend-btn:checked ~ .legend{\n top:0.5rem;\n right:0.4rem;\n}\n#legend-btn:checked + label, #legend-btn + label:hover{\n opacity:1;\n}\n#legend-btn:checked + label:hover{\n top:0.8rem;\n right:0.95rem;\n}\n\n\n.legend ul{\n list-style: none;\n}\n.legend ul li{\n display: flex;\n padding: 0.7rem;\n}\n.legend ul li div{\n width:1.5rem;\n height:1.5rem;\n margin-right: 1rem;\n}\n.legend .unvisited{\n background-color: #fff;\n}\n.legend .wall{\n background-color: rgb(58, 54, 54);\n}\n.legend .weight{\n background-color: rgb(182, 129, 4);\n}\n.legend .visited{\n background-color: rgb(168, 221, 44);\n}\n.legend .start{\n background-color: rgb(18, 248, 10);\n}\n.legend .end{\n background-color: rgb(206, 11, 11);\n}\n.legend .shortest-path{\n background-color: rgb(238, 251, 57);\n}\n.legend .visited.weight{\n background-color: rgba(110, 139, 4, 0.8);\n}\n.legend .shortest-path.weight{\n background-color: rgb(253, 208, 61);\n}\n\n\n\n\n\n\n\n/*----------------------------------------\n Toturial Div\n------------------------------------------*/\n.toturial{\n height:60%;\n width: 40%;\n padding:0;\n position: absolute;\n text-align: center;\n z-index:100;\n top:50%;\n transform: translateY(-50%);\n display: block;\n transition:all 0.1s ease-out;\n}\n\n.toturial.hidden{\n width:0;\n height:0;\n padding: 0;\n box-shadow: none;\n border-radius: 50%;\n overflow: hidden;\n}\n.front-face, .back-face{\n box-shadow: 5px 5px 50px #000, -10px -10px 50px #fff,\n inset 1px 1px 20px rgba(240, 75, 240, 0.3),inset -1px -1px 20px rgba(240, 75, 240, 0.3);\n background: #fff;\n border-radius: 10px;\n}\n\n.toturial .front-face, .toturial .back-face{\n position: absolute;\n backface-visibility: hidden;\n padding: 0;\n width: 100%;\n height:100%;\n transition: transform 0.4s linear;\n}\n\n.back-face{\n transform:perspective(1000px) rotateY(-180deg);\n}\n.front-face{\n transform:perspective(1000px) rotateY(0);\n}\n\n/*.toturial:hover .back-face{\n transform:perspective(1000px) rotateY(0);\n}\n.toturial:hover .front-face{\n transform:perspective(1000px) rotateY(180deg);\n}*/\n#toturial-face-toggle:checked + label .back-face{\n transform:perspective(1000px) rotateY(0);\n}\n#toturial-face-toggle:checked + label .front-face{\n transform:perspective(1000px) rotateY(180deg);\n}\n\n.toturial .title{\n letter-spacing: 0.2rem;\n font-size: 1.3rem;\n width: 100%;\n padding: 1rem;\n margin-bottom: 0.5rem;\n}\n.toturial .title::after{\n content:'';\n width: 40%;\n height:0.15rem;\n background: #000;\n position: absolute;\n top:3.8rem;\n left:50%;\n transform:translateX(-50%);\n}\n\n.toturial .description, .toturial .back-face p{\n padding: 1.5rem;\n text-align: justify;\n font-size: 1.15rem;\n line-height: 1.5;\n overflow: hidden;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n/*----------------------------------\n container and Tables\n-------------------------------------*/\n\n.container{\n position: relative;\n /*top:50%;\n left:50%;\n transform: translate(-50%,-50%);*/\n width:95%;\n height:85%;\n box-shadow:-1px -2px 30px #fff; \n border-radius: 5px; \n display: block;\n}\n.container.multiple{\n display: grid;\n grid-template-columns: 1fr 1fr;\n}\n.table{\n position: relative;\n width:100%;\n height:100%;\n border:0.1rem #000 solid; \n display: flex;\n flex-direction: column; \n}\n.grid{\n width: 100%;\n height:100%;\n display: flex;\n flex-direction: column;\n}\n.row{\n flex: 1;\n width: 100%;\n display: flex;\n}\n.table .row span{\n width: 100%;\n flex: 1;\n /* background-color: #f2f2f2;*/\n border:1px #ccc solid;\n /*touch-action: none;*/\n}\n#table-1{\n display: flex;\n}\n\n#table-2{\n display: none;\n}\n#table-3{\n display:none ;\n}\n#table-4{\n display: none;\n}\n.table .algo-title{\n position: absolute;\n background-color: #fff;\n opacity: 0.77;\n top:0.3em;\n left:0.3em;\n font-weight: 500;\n font-size: 1.3rem;\n border-radius: 2px;\n line-height: 2rem;\n box-shadow: inset 1px 1px 20px rgba(240, 75, 240, 0.3),inset -1px -1px 20px rgba(240, 75, 240, 0.3) ;\n}\n.table .algo-title input[type='checkbox']{\n display: none;\n}\n.table .algo-title .graph-algo, .table .algo-title .maze-algo{\n cursor: pointer;\n display: block; \n}\n.table .duration-msg{\n position: absolute;\n bottom:0.5em;\n right:0.5em;\n background:#175803;\n padding: 0.3rem;\n opacity: 0.9;\n border-radius: 5px;\n box-shadow:1px 1px 3px rgb(124, 123, 123), -2px -2px 3px #fff;\n line-height: 1.5rem;\n font-size: 1.2rem;\n font-weight: 500;\n display:none;\n}\n.table i{\n position: absolute;\n right:0.3rem;\n top:0.3rem;\n background:#ee5e5e;\n padding: 0.4rem;\n border-radius: 50%;\n color:#fff;\n cursor: pointer;\n opacity:0.6;\n font-size: 0.7rem;\n box-shadow: 1px 1px 2px rgb(68, 67, 67), -1px -1px 4px #fff;\n transition: opacity 0.1s ease-in;\n}\n.table i:hover{\n opacity:0.99;\n}\n.table i:active{\n right:0.25rem;\n top:0.35rem;\n}\n\n.table .row span.start{\n background:rgb(18, 248, 10);\n}\n.table .row span.end{\n background-color: rgb(206, 11, 11);\n}\n\n.table .row .wall{\n background-color: rgb(78, 76, 76);\n border:1px rgb(78, 76, 76) solid;\n}\n.table .row span.weight{\n background:rgb(182, 129, 4);\n}\n\n.table .row span.visited{\n background-color: rgb(168, 221, 44);\n border-color: rgb(208, 238, 139);\n animation: cell-animation 0.4s;\n animation: visited-animation 0.4s;\n}\n.table .row .visited.weight{\n background-color: rgba(110, 139, 4, 0.8);\n}\n.table .row .shortest-path.weight{\n background-color: rgb(253, 208, 61);\n}\n.table .row span.shortest-path{\n background-color: rgb(238, 251, 57);\n /*border-color:rgb(198, 206, 86) ;*/\n animation:cell-animation 0.4s;\n}\n\n@keyframes cell-animation{\n 0%{\n transform: scale(0.6);\n }\n 25%{\n transform: scale(0.8);\n }\n 50%{\n transform:scale(1.2)\n }\n 75%{\n transform:scale(1.1);\n }\n 100%{\n transform:scale(1);\n }\n}\n\n@keyframes visited-animation{\n 0%{\n border-radius: 50%;\n background-color: aqua;\n }\n 25%{\n border-radius: 40%;\n background-color: tomato;\n }\n 50%{\n border-radius: 30%;\n }\n 75%{\n border-radius: 20%;\n }\n 100%{\n border-radius: 0;\n }\n}\n/*@media (max-width: 880px)*/\n@media (max-width: 1024px){\n .toturial{\n height:60%;\n width: 60%;\n }\n .instruction-visBtn{\n left:25rem;\n top:36rem;\n }\n .instruction-options{\n left:25rem;\n top:22%;\n }\n}\n\n@media (max-width: 700px){\n :root{\n font-size: 10px;\n }\n body .title{\n font-size: 2.5rem;\n }\n .control-panel{\n height: 55rem;\n \n }\n .control-panel .control-item{\n border-radius: 3rem;\n font-size: 2.5rem;\n }\n .container{\n height:80%;\n }\n .container.multiple{\n grid-template-columns: 1fr;\n }\n .table .row:nth-child(-n+7){\n display: none;\n }\n .table .row span:nth-child(-n+15){\n display: none;\n }\n .table .row:nth-child(n+25){\n display: none;\n }\n .table .row span:nth-child(n+45){\n display: none; \n }\n .table i{\n padding: 0.8rem;\n font-size: 1.1rem;\n }\n\n .toturial{\n height:70%;\n width: 70%;\n }\n .toturial .description, .toturial .back-face p{\n font-size: 1.3rem;\n }\n .toturial:active .back-face{\n transform:perspective(1000px) rotateY(0);\n }\n .toturial:active .front-face{\n transform:perspective(1000px) rotateY(180deg);\n }\n .instruction-options{\n left:25rem;\n top:22%;\n }\n .instruction-visBtn{\n left:25rem;\n top:38rem;\n }\n .instruction-table-cleanbtn{\n top:5.8rem; \n }\n .instruction-table-time{\n top:84%;}\n}\n\n\n\n",""]),e.default=i},function(n,e,t){"use strict";t.r(e);t(1);function r(n,e){for(var t=0;t<e.length;t++){var r=e[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,r.key,r)}}function i(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(n)))return;var t=[],r=!0,i=!1,o=void 0;try{for(var a,l=n[Symbol.iterator]();!(r=(a=l.next()).done)&&(t.push(a.value),!e||t.length!==e);r=!0);}catch(n){i=!0,o=n}finally{try{r||null==l.return||l.return()}finally{if(i)throw o}}return t}(n,e)||function(n,e){if(!n)return;if("string"==typeof n)return o(n,e);var t=Object.prototype.toString.call(n).slice(8,-1);"Object"===t&&n.constructor&&(t=n.constructor.name);if("Map"===t||"Set"===t)return Array.from(n);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return o(n,e)}(n,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=new Array(e);t<e;t++)r[t]=n[t];return r}var a=function(n,e,t,r,o){var a=Date.now(),s=n.map((function(n){return n.map((function(n){return!1}))})),d=n.map((function(n){return n.map((function(n){return null}))})),h=[],f=i(t,2),m=f[0],p=f[1],g=i(e,2),b=g[0],v=g[1];s[b][v]=!0;for(var y=[e];y.length>0;){var w=i(y.shift(),2);if(b=w[0],v=w[1],h.push(n[b][v]),b===m&&v===p){var k=Date.now(),x=c(h,"visited",0,o),S=u(d,t,n);return x=c(S,"shortest-path",x,o),[k-a,S.length,x]}for(var L=l(n,b,v,r),E=0;E<L.length;E++){var T=i(L[E],2),A=T[0],q=T[1];s[A][q]||(s[A][q]=!0,d[A][q]=[b,v],y.push([A,q]))}}return[-1,-1,0]},l=function(n,e,t,r){var o;o=r?[[e+1,t],[e,t+1],[e-1,t],[e,t-1],[e+1,t+1],[e-1,t+1],[e-1,t-1],[e+1,t-1]]:[[e+1,t],[e,t+1],[e-1,t],[e,t-1]];for(var a=[],l=0;l<o.length;l++){var c=i(o[l],2),u=c[0],d=c[1];s(u,d,n)&&a.push([u,d])}return a},s=function(n,e,t){return n>=0&&e>=0&&n<t.length&&e<t[n].length&&!t[n][e].classList.contains("wall")};function c(n,e){for(var t,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:30,o=function(o){var a=n[o];if(a.classList.contains("start")||a.classList.contains("end"))return"continue";setTimeout((function(){a.classList.add(e)}),i*o+r),t=o*i+r},a=0;a<n.length;a++)o(a);return t}function u(n,e,t){for(var r=[],o=i(e,2),a=o[0],l=o[1],s=t[a][l];null!==n[a][l];){r.push(s);var c=i(n[a][l],2);a=c[0],l=c[1],s=t[a][l]}return r.reverse()}var d=function(n,e,t,r,o){console.log("depth first start");var a=Date.now(),s=n.map((function(n){return n.map((function(n){return!1}))})),d=n.map((function(n){return n.map((function(n){return null}))})),h=[],f=i(t,2),m=f[0],p=f[1],g=i(e,2),b=g[0],v=g[1];s[b][v]=!0;for(var y=[e];y.length>0;){var w=i(y.pop(),2);if(b=w[0],v=w[1],s[b][v]=!0,h.push(n[b][v]),b===m&&v===p){var k=Date.now(),x=c(h,"visited",0,o),S=u(d,t,n);return x=c(S,"shortest-path",x,o),[k-a,S.length,x]}for(var L=l(n,b,v,r),E=0;E<L.length;E++){var T=i(L[E],2),A=T[0],q=T[1];s[A][q]||(d[A][q]=[b,v],y.push([A,q]))}}return[-1,-1,0]},h=function(n,e,t,r,o){console.log(" dj start ");var a=Date.now(),s=n.map((function(n){return n.map((function(n){return!1}))})),d=n.map((function(n){return n.map((function(n){return Number.POSITIVE_INFINITY}))})),h=n.map((function(n){return n.map((function(n){return n.classList.contains("weight")?20:1}))})),f=n.map((function(n){return n.map((function(n){return null}))})),m=i(t,2),p=m[0],b=m[1],v=[],y=new g,w=i(e,2),k=w[0],x=w[1];for(y.insert([0,[k,x]]),d[k][x]=0,s[k][x]=!0;!y.isEmpty();){var S=i(y.pop(),2),L=S[0],E=S[1],T=i(E,2);if(k=T[0],x=T[1],s[k][x]=!0,E==e||E==t?console.log(e):v.push(n[k][x]),!(d[k][x]<L)){if(k==p&&x===b){var A=Date.now(),q=c(v,"visited",0,o),z=u(f,t,n);return q=c(z,"shortest-path",q,o),[A-a,z.length,q]}for(var I=l(n,k,x,r),B=0;B<I.length;B++){var M=i(I[B],2),j=M[0],D=M[1];if(!s[j][D]){var N=L+h[j][D];N<d[j][D]&&(d[j][D]=N,y.insert([N,[j,D]]),f[j][D]=[k,x])}}}}return[-1,-1,0]},f=function(n,e,t,r,o,a){var s=Date.now(),d=n.map((function(n){return n.map((function(n){return!1}))})),h=n.map((function(n){return n.map((function(n){return Number.POSITIVE_INFINITY}))})),f=n.map((function(n){return n.map((function(n){return n.classList.contains("weight")?20:1}))})),m=n.map((function(n){return n.map((function(n){return null}))})),b=i(t,2),v=b[0],y=b[1],w=[],k=new g,x=i(e,2),S=x[0],L=x[1];h[S][L]=0;var E=(a?p(v,y,S,L,"Manhattan"):p(v,y,S,L))+0;for(k.insert([E,[S,L]]),d[S][L]=!0;!k.isEmpty();){var T=i(k.pop(),2),A=T[0],q=T[1],z=i(q,2);S=z[0],L=z[1],d[S][L]=!0,q==e||q==t?console.log(e):w.push(n[S][L]);var I=a?p(v,y,S,L,"Manhattan"):p(v,y,S,L);if(!(h[S][L]+I<A)){if(S==v&&L===y){var B=Date.now(),M=c(w,"visited",0,o),j=u(m,t,n);return M=c(j,"shortest-path",M,o),[B-s,j.length,M]}for(var D=l(n,S,L,r),N=0;N<D.length;N++){var F=i(D[N],2),P=F[0],Y=F[1];if(!d[P][Y]){var O=h[S][L]+f[P][Y],C=a?p(v,y,P,Y,"Manhattan"):p(v,y,P,Y),H=O+C;H<h[P][Y]+C&&(h[P][Y]=O,k.insert([H,[P,Y]]),m[P][Y]=[S,L])}}}}return[-1,-1,0]},m=function(n,e,t,r,o,a){var s=Date.now(),d=n.map((function(n){return n.map((function(n){return!1}))})),h=n.map((function(n){return n.map((function(n){return Number.POSITIVE_INFINITY}))})),f=(n.map((function(n){return n.map((function(n){return n.classList.contains("weight")?20:1}))})),n.map((function(n){return n.map((function(n){return null}))}))),m=i(t,2),b=m[0],v=m[1],y=[],w=new g,k=i(e,2),x=k[0],S=k[1],L=a?p(b,v,x,S,"Manhattan"):p(b,v,x,S);for(w.insert([L,[x,S]]),h[x][S]=L,d[x][S]=!0;!w.isEmpty();){var E=i(w.pop(),2),T=E[0],A=E[1],q=i(A,2);if(x=q[0],S=q[1],d[x][S]=!0,A==e||A==t?console.log(e):y.push(n[x][S]),!(h[x][S]<T)){if(x==b&&S===v){var z=Date.now(),I=c(y,"visited",0,o),B=u(f,t,n);return I=c(B,"shortest-path",I,o),[z-s,B.length,I]}for(var M=l(n,x,S,r),j=0;j<M.length;j++){var D=i(M[j],2),N=D[0],F=D[1];if(!d[N][F]){var P=a?p(N,F,b,v,"Manhattan"):p(N,F,b,v);P<h[N][F]&&(h[N][F]=P,w.insert([P,[N,F]]),f[N][F]=[x,S])}}}}return[-1,-1,0]},p=function(n,e,t,r){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:"Euclidian";switch(i){case"Euclidian":return Math.sqrt(Math.pow(t-n,2)+Math.pow(r-e,2));case"Manhattan":return Math.abs(t-n)+Math.abs(r-e);default:return}},g=function(){function n(){!function(n,e){if(!(n instanceof e))throw new TypeError("Cannot call a class as a function")}(this,n),this.heap=[]}var e,t,i;return e=n,(t=[{key:"isEmpty",value:function(){return 0===this.heap.length}},{key:"insert",value:function(n){this.heap.push(n),this.siftUp(this.heap,this.heap.length-1)}},{key:"pop",value:function(){b(this.heap,0,this.heap.length-1);var n=this.heap.pop();return this.siftDown(this.heap,0),n}},{key:"siftUp",value:function(n,e){for(var t=e,r=Math.floor((e-1)/2);t>0&&n[t][0]<n[r][0];)b(n,t,r),t=r,r=Math.floor((t-1)/2)}},{key:"siftDown",value:function(n,e){for(var t=e,r=2*e+1;r<n.length;){var i=r+1<n.length?r+1:-1,o=void 0;if(o=-1===i||n[r][0]<n[i][0]?r:i,!(n[t][0]>n[o][0]))return;b(n,t,o),r=2*(t=o)+1}}}])&&r(e.prototype,t),i&&r(e,i),n}(),b=function(n,e,t){var r=n[e];n[e]=n[t],n[t]=r},v=function(n,e){n.map((function(n){return n.map((function(n){n.classList.contains("start")||n.classList.contains("end")||n.classList.add("wall")}))}));var t=n.map((function(n){return n.map((function(n){return!1}))})),r=[],o=0,a=0;t[o][a]=!0;for(var l=[];;){r.push(n[o][a]);var s=w(o,a,n,t);if(s){l.push(s);var c=i(s,2),u=c[0],d=c[1];t[u][d]=!0;var h=y(o,a,u,d,n);r.push(h),o=u,a=d}else{if(!(l.length>0))break;var f=i(s=l.pop(),2);o=f[0],a=f[1]}}for(var m=function(n){var t=r[n];setTimeout((function(){t.classList.remove("wall")}),n*e)},p=0;p<r.length;p++)m(p);return r.length*e},y=function(n,e,t,r,i){return n==t?e>r?i[n][r+1]:i[n][e+1]:e===r?t>n?i[n+1][e]:i[t+1][e]:void 0},w=function(n,e,t,r){for(var o=[[n+2,e],[n-2,e],[n,e+2],[n,e-2]],a=[],l=0;l<o.length;l++){var s=i(o[l],2),c=s[0],u=s[1];c<0||c>t.length-1||u<0||u>t[0].length-1||(r[c][u]||a.push([c,u]))}return a.length>0?a[Math.floor(Math.random()*a.length)]:void 0},k=function(n,e){console.log("rd start");var t=[],r=n.map((function(n){return n.map((function(n){return!1}))}));n[0].map((function(n){return t.push(n)})),n.map((function(e){return e.map((function(e,r){r==n[0].length-1&&t.push(e)}))})),n[n.length-1].reverse().map((function(n){return t.push(n)})),n.map((function(n){return n.map((function(n,e){return 0==e&&t.push(n)}))}));var i=n.length-2,o=n[0].length-2,a=x(n,1,i,1,o);return S(n,1,i,1,o,a,t,r),c(t,"wall",0,e)},x=function(n,e,t,r,i){var o=i-r,a=t-e;return o>a?"Vertical":a>o?"Horizontal":Math.random()<.5?"Vertical":"Horizontal"},S=function n(e,t,r,i,o,a,l,s){var c=t,u=r,d=i,h=o;"Horizontal"==a?(c+=1,u-=1):(d+=1,h-=1);var f=h-d+1,m=u-c+1;if(!(o-i+1<2||r-t+1<2||m<1||f<1))if("Horizontal"==a){var p,g=Math.floor(Math.random()*m)+c;p=s[g][i-1]?i:s[g][o+1]?o:Math.random()>.5?i:o,e[g].forEach((function(n,e){(n.classList.contains("start")||n.classList.contains("end"))&&(s[g][e]=!0),s[g][e]||e<d||e>h||(e!=p?l.push(n):s[g][e]=!0)}));var b=x(e,t,g-1,i,o);n(e,t,g-1,i,o,b,l,s),b=x(e,g+1,r,i,o),n(e,g+1,r,i,o,b,l,s)}else{var v,y=Math.floor(Math.random()*f)+d;v=t-1>=0&&s[t-1][y]?t:r+1<e.length&&s[r+1][y]?r:Math.random()>.5?t:r,e.forEach((function(n,e){e<c||e>u||(e!=v?n.forEach((function(n,t){n.classList.contains("start")&&(s[e][t]=!0),s[e][t]||t==y&&l.push(n)})):s[e][y]=!0)})),a=x(e,t,r,i,y-1),n(e,t,r,i,y-1,a,l,s),a=x(e,t,r,y+1,o),n(e,t,r,y+1,o,a,l,s)}},L=function(n,e){var t,r;n.map((function(n,e){return n.map((function(n,i){n.classList.contains("start")?t=[e,i]:n.classList.contains("end")?r=[e,i]:n.classList.add("wall")}))}));var o=n.map((function(n){return n.map((function(n){return!0}))})),a=n.map((function(n){return n.map((function(n){return!1}))})),s=Math.floor(Math.random()*n.length),c=Math.floor(Math.random()*n[0].length),u=[],d=[];d.push(n[s][c]),o[s][c]=!1;for(var h=E(n,s,c,o,a),f=0;f<h.length;f++){u.push(h[f]);var m=i(h[f],2),p=m[0],g=m[1];a[p][g]=!0}for(;u.length>0;){var b=Math.floor(Math.random()*u.length),v=i(u[b],2),w=v[0],k=v[1],x=T(n,w,k,o),S=i(x[Math.floor(Math.random()*x.length)],2),L=S[0],A=S[1],q=y(L,A,w,k,n);d.push(q),d.push(n[w][k]),o[L][A]=!1,o[w][k]=!1,h=E(n,w,k,o,a);for(var z=0;z<h.length;z++){u.push(h[z]);var I=i(h[z],2),B=I[0],M=I[1];a[B][M]=!0}u.splice(b,1)}for(var j=function(n){setTimeout((function(){d[n].classList.remove("wall")}),n*e)},D=0;D<d.length;D++)j(D);var N=d.length*e;return setTimeout((function(){var e=i(t,2),o=e[0],a=e[1];if(0==l(n,o,a,!1).length)for(var s=[[o+1,a],[o-1,a],[o,a+1],[o,a-1]],c=0;c<s.length;c++){var u=i(s[c],2),d=u[0],h=u[1];if(d>=0&&d<n.length&&h>=0&&h<n[0].length){n[d][h].classList.remove("wall");break}}var f=i(r,2),m=f[0],p=f[1];if(0==l(n,m,p,!1).length)for(var g=[[m+1,p],[m-1,p],[m,p+1],[m,p-1]],b=0;b<g.length;b++){var v=i(g[b],2),y=v[0],w=v[1];if(y>=0&&y<n.length&&w>=0&&w<n[0].length){n[y][w].classList.remove("wall");break}}}),N),N},E=function(n,e,t,r,o){for(var a=[[e,t-2],[e,t+2],[e-2,t],[e+2,t]],l=[],s=0;s<a.length;s++){var c=i(a[s],2),u=c[0],d=c[1];u>=0&&u<n.length&&d>=0&&d<n[0].length&&r[u][d]&&!o[u][d]&&l.push([u,d])}return l},T=function(n,e,t,r){for(var o=[[e,t-2],[e,t+2],[e-2,t],[e+2,t]],a=[],l=0;l<o.length;l++){var s=i(o[l],2),c=s[0],u=s[1];if(c>=0&&c<n.length&&u>=0&&u<n[0].length){if(r[c][u])continue;a.push([c,u])}}return a},A=function(n,e){console.log("spiral start");for(var t=[],r=0,i=n.length-1,o=0,a=n[0].length-1;i-r>2&&a-r>2;){for(var l=o;l<a;l++)t.push(n[r][l]);for(var s=r;s<i;s++)t.push(n[s][a]);for(var u=a;u>o;u--)t.push(n[i][u]);for(var d=i;d>r+2;d--)t.push(n[d][o+1]);t.push(n[r+3][o+2]),t.push(n[r+3][o+3]),r+=3,i-=3,o+=4,a-=3}return c(t,"wall",0,e)},q=function(n,e){console.log("dsteps start");for(var t=[],r=!1,i=n[0].length-1,o=n.length-1,a=0,l=0;;){if(a==o&&l>=i-4||l==i&&a>=o-4)return c(t,"wall",0,e);t.push(n[a][l]),r?1==a?i-l<=3?(l=i-1,r=!1):(l+=3,r=!1):l==i-1?(a+=3,r=!1):(a-=1,l+=1):0==l?(a+=3,r=!0):a==o?(l+=3,r=!0):(a+=1,l-=1)}};function z(n,e){return function(n){if(Array.isArray(n))return n}(n)||function(n,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(n)))return;var t=[],r=!0,i=!1,o=void 0;try{for(var a,l=n[Symbol.iterator]();!(r=(a=l.next()).done)&&(t.push(a.value),!e||t.length!==e);r=!0);}catch(n){i=!0,o=n}finally{try{r||null==l.return||l.return()}finally{if(i)throw o}}return t}(n,e)||function(n,e){if(!n)return;if("string"==typeof n)return I(n,e);var t=Object.prototype.toString.call(n).slice(8,-1);"Object"===t&&n.constructor&&(t=n.constructor.name);if("Map"===t||"Set"===t)return Array.from(n);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return I(n,e)}(n,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function I(n,e){(null==e||e>n.length)&&(e=n.length);for(var t=0,r=new Array(e);t<e;t++)r[t]=n[t];return r}function B(n,e){if(!(n instanceof e))throw new TypeError("Cannot call a class as a function")}function M(n,e){for(var t=0;t<e.length;t++){var r=e[t];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(n,r.key,r)}}var j,D=function(){function n(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];B(this,n),this.id=e,this.graphAlgo=null,this.mazeAlgo=null,this.active=t,this.inProgress=!1,this.grid=null,this.getGrid()}var e,t,r;return e=n,(t=[{key:"activate",value:function(){this.active=!0,document.getElementById(this.id).style.display="flex",this.updateTitle()}},{key:"deactivate",value:function(){this.active=!1,this.inProgress=!1,this.mazeAlgo=null,this.graphAlgo=null,document.getElementById(this.id).style.display="none",this.updateTitle(),null!==this.grid&&this.cleanBoard()}},{key:"updateTitle",value:function(){this.graphAlgo?document.querySelector("#".concat(this.id," .algo-title .graph-algo")).innerText=this.graphAlgo:document.querySelector("#".concat(this.id," .algo-title .graph-algo")).innerText="",this.mazeAlgo?document.querySelector("#".concat(this.id," .algo-title .maze-algo")).innerText=this.mazeAlgo:document.querySelector("#".concat(this.id," .algo-title .maze-algo")).innerText=""}},{key:"runAlgo",value:function(n,e,t,r){var i=this;if(!this.inProgress){this.inProgress=!0,document.getElementById("panel-toggle").disabled=!0;var o=z(this.getGrid(),2),l=o[0],s=o[1],c=0;if(this.mazeAlgo){this.cleanBoard();var u=z(this.getGrid(),2);l=u[0],s=u[1],c=function(n,e,t){switch(n){case"Recursive Backtracker":return v(e,t);case"Recursive Division":return k(e,t);case"Randomized Prim":return L(e,t);case"spiral":return A(e,t);case"diagonal steps":return q(e,t);default:return}}(this.mazeAlgo,this.grid,e)}setTimeout((function(){if(i.graphAlgo){var e=z(function(n,e,t,r,i,o,l){switch(n){case"A*":return f(e,t,r,i,o,l);case"Breadth-First Search":return a(e,t,r,i,o);case"Depth-First Search":return d(e,t,r,i,o);case"Dijkstra's algorithm":return h(e,t,r,i,o);case"greedy BFS":return m(e,t,r,i,o,l);default:return}}(i.graphAlgo,i.grid,l,s,n,t,r),3),o=e[0],u=e[1],p=e[2];if(-1===o)return i.showMessage("Path Not Found!"),i.inProgress=!1,document.getElementById("panel-toggle").disabled=!1,c;setTimeout((function(){i.showTimeBlock(o,u),i.inProgress=!1,document.getElementById("panel-toggle").disabled=!1}),p)}else i.inProgress=!1,document.getElementById("panel-toggle").disabled=!1}),c)}}},{key:"getGrid",value:function(){for(var n,e,t=[],r=document.querySelector("#".concat(this.id," .grid")),i=0,o=!1,a=0;a<r.children.length;a++)if("none"!==window.getComputedStyle(r.children[a]).display){o&&0===i&&(i=a);for(var l=r.children[a].children,s=[],c=0,u=!1,d=0;d<l.length;d++)"none"!==window.getComputedStyle(l[d]).display?(u&&0===c&&(c=d),s.push(l[d]),l[d].classList.contains("start")&&(n=[a-i,d-c]),l[d].classList.contains("end")&&(e=[a-i,d-c])):u=!0;t.push(s)}else o=!0;return this.grid=t,[n,e]}},{key:"cleanGrid",value:function(){this.inProgress||(document.querySelector("#".concat(this.id," .duration-msg")).style.display="none",this.grid.map((function(n){return n.map((function(n){n.classList.contains("visited")&&n.classList.remove("visited"),n.classList.contains("shortest-path")&&n.classList.remove("shortest-path")}))})))}},{key:"cleanBoard",value:function(){this.inprogress||(this.cleanGrid(),this.grid.map((function(n){return n.map((function(n){n.classList.contains("wall")&&n.classList.remove("wall"),n.classList.contains("weight")&&n.classList.remove("weight")}))})))}},{key:"resetBoard",value:function(){var n=this;this.inprogress||(this.cleanBoard(),this.grid.map((function(e){return e.map((function(e){e.classList.contains("start")&&e.classList.remove("start"),e.classList.contains("end")&&e.classList.remove("end"),document.querySelector("#".concat(n.id," #start")).className="start",document.querySelector("#".concat(n.id," #end")).className="end"}))})))}},{key:"showTimeBlock",value:function(n,e){document.querySelector("#".concat(this.id," .duration-msg")).innerHTML='<div class="duration">Duration : <span>'.concat(n,'</span> ms</div>\n <div class="blocks">Blocks: <span>').concat(e," </span></div>\n "),document.querySelector("#".concat(this.id," .duration-msg")).style.display="block",document.querySelector("#".concat(this.id," .duration-msg")).style.background="#fff"}},{key:"showMessage",value:function(n){document.querySelector("#".concat(this.id," .duration-msg")).style.display="block",document.querySelector("#".concat(this.id," .duration-msg")).style.background="red",document.querySelector("#".concat(this.id," .duration-msg")).innerHTML=n}}])&&M(e.prototype,t),r&&M(e,r),n}();setTimeout((function(){j=!0,document.querySelector(".instruction-start").classList.remove("hidden")}),700),document.querySelectorAll(".instruction .next").forEach((function(n){n.onclick=function(n){var e=n.target.parentElement.parentElement;e.classList.add("hidden");var t=e.nextElementSibling;if(t.classList.remove("hidden"),t.classList.contains("instruction-algos")||t.classList.contains("instruction-options")||t.classList.contains("instruction-visBtn")){var r=document.getElementById("panel-toggle");r.checked||(r.checked=!0)}if(t.classList.contains("instruction-table-title")){var i=document.getElementById("panel-toggle");i.checked&&(i.checked=!1)}if(t.classList.contains("instruction-options")){var o=document.getElementById("algo-toggle");o.checked&&(o.checked=!1);var a=document.getElementById("maze-toggle");a.checked&&(a.checked=!1)}t.classList.contains("instruction-end")&&document.querySelector(".title .fa-info-circle").classList.add("noticeable")}})),document.querySelectorAll(".instruction .skip").forEach((function(n){n.onclick=function(n){document.querySelectorAll(".instruction").forEach((function(n){n.classList.contains("hidden")||n.classList.add("hidden")})),j=!1,document.querySelector(".title .fa-info-circle").classList.contains("noticeable")&&document.querySelector(".title .fa-info-circle").classList.remove("noticeable")}})),document.querySelector(".title i.fa-info-circle").onclick=function(n){j?(j=!1,document.querySelectorAll(".instruction").forEach((function(n){n.classList.contains("hidden")||n.classList.add("hidden")})),document.querySelector(".title i.fa-info-circle").classList.contains("noticeable")&&document.querySelector(".title i.fa-info-circle").classList.remove("noticeable")):(j=!0,document.querySelector(".instruction-start").classList.remove("hidden"),document.getElementById("panel-toggle").checked=!1)};var N="wall",F=!1,P=!1,Y=!1,O=!1,C=[document.querySelectorAll("#table-1 .row span"),document.querySelectorAll("#table-2 .row span"),document.querySelectorAll("#table-3 .row span"),document.querySelectorAll("#table-4 .row span")];C.forEach((function(n,e){return n.forEach((function(n,t){n.addEventListener("mousedown",(function(n){if(F=!0,n.target.classList.contains("start"))N="start";else if(n.target.classList.contains("end"))N="end";else if(n.target.classList.contains(N)){if(n.target.classList.remove(N),O)for(var r=0;r<C.length;r++)if(r!=e)for(var i=0;i<C[r].length;i++)i===t&&C[r][i].classList.remove(N)}else if(n.target.classList.add(N),O)for(var o=0;o<C.length;o++)if(o!=e)for(var a=0;a<C[o].length;a++)a===t&&C[o][a].classList.add(N)})),n.addEventListener("mouseover",(function(r){if(!r.target.classList.contains("start")&&!r.target.classList.contains("end"))if(F&&"wall"!==N&&"weight"!=N){if(n.className=N,O)for(var i=0;i<C.length;i++)for(var o=0;o<C[i].length;o++)o===t&&(C[i][o].className=N)}else if(F)if(r.target.classList.contains(N)){if(r.target.classList.remove(N),O)for(var a=0;a<C.length;a++)if(a!=e)for(var l=0;l<C[a].length;l++)l===t&&C[a][l].classList.remove(N)}else if(r.target.className=N,O)for(var s=0;s<C.length;s++)for(var c=0;c<C[s].length;c++)c===t&&(C[s][c].className=N)})),n.addEventListener("mouseleave",(function(r){if(F&&"wall"!=N&&"weight"!=N&&(n.classList.remove(N),O))for(var i=0;i<C.length;i++)for(var o=0;o<C[i].length;o++)i!=e&&o===t&&C[i][o].classList.remove(N)})),n.addEventListener("mouseup",(function(n){F=!1,N=P?"weight":"wall"}))}))}));var H=[document.getElementById("table-1"),document.getElementById("table-2"),document.getElementById("table-3"),document.getElementById("table-4")];H.forEach((function(n,e){n.addEventListener("mouseleave",(function(t){if(F&&"start"==N){if(document.querySelector("#".concat(n.id," #start")).className="start",O)for(var r=0;r<H.length;r++)r!=e&&(document.querySelector("#".concat(H[r].id," #start")).className="start")}else if(F&&"end"==N&&(document.querySelector("#".concat(n.id," #end")).className="end",O))for(var i=0;i<H.length;i++)i!=e&&(document.querySelector("#".concat(H[i].id," #end")).className="end");F=!1,N=P?"weight":"wall"})),n.addEventListener("mouseup",(function(){F=!1,N=P?"weight":"wall"}))}));var G=document.getElementById("algo-toggle"),R=document.getElementById("maze-toggle"),_=document.getElementById("option-toggle");G.addEventListener("change",(function(){G.checked&&(R.checked=!1,_.checked=!1)})),R.addEventListener("change",(function(){R.checked&&(G.checked=!1,_.checked=!1)})),_.addEventListener("change",(function(){_.checked&&(R.checked=!1,G.checked=!1)}));var U,V=[new D("table-1",!0),new D("table-2"),new D("table-3"),new D("table-4")];document.querySelectorAll(".control-item:first-child ul input[type='checkbox']").forEach((function(n){n.addEventListener("change",(function(n){if(4===document.querySelectorAll(".control-item:nth-child(1) ul input[type='checkbox']:checked").length&&document.querySelectorAll(".control-item:nth-child(1) ul input[type='checkbox']:not(:checked)").forEach((function(n){return n.disabled=!0})),n.target.checked){for(var e=0;e<V.length;e++)if(V[e].active&&null==V[e].graphAlgo)return V[e].graphAlgo=n.target.name,void V[e].updateTitle();for(var t=0;t<V.length;t++)if(!V[t].active){V[t].graphAlgo=n.target.name,V[t].activate();break}for(var r=0,i=0;i<V.length;i++)V[i].active&&(r+=1);if(2==r&&document.querySelector(".container").classList.add("multiple"),r<=4)return;alert("at most 4 graph at a time")}else{document.querySelectorAll('.control-item:nth-child(1) > ul input[type="checkbox"]:disabled').length>0&&(console.log("there is a disabled checkbock"),document.querySelectorAll('.control-item:nth-child(1) > ul input[type="checkbox"]:disabled').forEach((function(n){return n.disabled=!1})));for(var o=0;o<V.length;o++)if(V[o].graphAlgo===n.target.name){var a=V[o].mazeAlgo;a&&(document.querySelector(".control-item:nth-child(2) ul input[name='".concat(a,"']")).checked=!1),V[o].deactivate();for(var l=0,s=0;s<V.length;s++)V[s].active&&(l+=1);return 1===l&&document.querySelector(".container").classList.remove("multiple"),void(0===l&&V[0].activate())}alert("the algorithm has not been selected before")}}))})),document.querySelectorAll(".control-item:nth-child(2) ul input[type='checkbox']").forEach((function(n){n.addEventListener("change",(function(n){if(n.target.checked){4===document.querySelectorAll(".control-item:nth-child(2) ul input[type='checkbox']:checked").length&&document.querySelectorAll(".control-item:nth-child(2) ul input[type='checkbox']:not(:checked)").forEach((function(n){return n.disabled=!0}));for(var e=0;e<V.length;e++)if(V[e].active&&null==V[e].mazeAlgo)return V[e].mazeAlgo=n.target.name,void V[e].updateTitle();for(var t=0;t<V.length;t++)if(!V[t].active){V[t].mazeAlgo=n.target.name,V[t].activate();for(var r=0,i=0;i<V.length;i++)V[i].active&&(r+=1);return void(2===r&&document.querySelector(".container").classList.add("multiple"))}console.log("at most four maze can be compared at a time")}else{for(var o=0;o<V.length;o++)if(V[o].active&&V[o].mazeAlgo===n.target.name){if(document.querySelectorAll('.control-item:nth-child(2) > ul input[type="checkbox"]:disabled').length>0&&document.querySelectorAll('.control-item:nth-child(2) > ul input[type="checkbox"]:disabled').forEach((function(n){return n.disabled=!1})),null===V[o].graphAlgo){V[o].deactivate();for(var a=0,l=0;l<V.length;l++)V[l].active&&(a+=1);1===a&&document.querySelector(".container").classList.remove("multiple");for(var s=0;s<V.length;s++)if(V[s].active)return;return void V[0].activate()}return V[o].mazeAlgo=null,void V[o].updateTitle()}console.log("maze was not selected before")}}))})),document.getElementById("diagonal").addEventListener("change",(function(n){Y=!!n.target.checked})),document.getElementById("weight").addEventListener("change",(function(n){P=!!n.target.checked,n.target.checked&&(document.getElementById("panel-toggle").checked=!1),N=n.target.checked?"weight":"wall"})),document.querySelectorAll(".table > i").forEach((function(n){n.onclick=function(n){document.querySelector(".toturial").classList.contains("hidden")||(document.querySelector(".toturial").classList.add("hidden"),document.querySelectorAll(".algo-title input[type='checkbox']").forEach((function(n){n.checked&&(n.checked=!1)})));O?V.forEach((function(n){return n.active&&n.cleanGrid()})):V.forEach((function(e){return e.id===n.target.parentElement.id&&e.cleanGrid()}))},n.ondblclick=function(n){document.querySelector(".toturial").classList.contains("hidden")||(document.querySelector(".toturial").classList.add("hidden"),document.querySelectorAll(".algo-title input[type='checkbox']").forEach((function(n){n.checked&&(n.checked=!1)})));O?V.forEach((function(n){return n.active&&n.resetBoard()})):V.forEach((function(e){return e.id===n.target.parentElement.id&&e.resetBoard()}))}}));var X,J=document.getElementById("mazeSpeed");document.querySelector("#mazeSpeed + span").innerHTML=J.value,U=J.value,J.addEventListener("input",(function(n){document.querySelector("#mazeSpeed + span").innerHTML=J.value,U=J.value}));var K=document.getElementById("graphSpeed");document.querySelector("#graphSpeed + span").innerHTML=K.value,X=K.value,K.oninput=function(){document.querySelector("#graphSpeed + span").innerHTML=this.value,X=K.value};var $=!1;document.getElementById("manhattan").addEventListener("click",(function(n){$=!!n.target.checked})),document.getElementById("uniGrid").addEventListener("click",(function(n){if(O=!!n.target.checked)for(var e=0;e<V.length;e++)V[e].active&&V[e].resetBoard()})),document.getElementById("visBtn").addEventListener("click",(function(){if(0!==document.querySelectorAll(".control-item:nth-child(1) > ul input:checked, .control-item:nth-child(2) > ul input:checked").length)if(j)W("Please finish the instructions first, or skip them.");else{document.getElementById("panel-toggle").checked=!1,document.getElementById("legend-btn").checked=!1,document.querySelector(".toturial").classList.contains("hidden")||document.querySelector(".toturial").classList.add("hidden");for(var n=0;n<C.length;n++){for(var e=null,t=null,r=0;r<C[n].length;r++)C[n][r].classList.contains("start")&&(e=1),C[n][r].classList.contains("end")&&(t=1);null==e&&(document.querySelector("#table-".concat(n+1," #start")).className="start"),null==t&&(document.querySelector("#table-".concat(n+1," #end")).className="end")}for(var i=0;i<V.length;i++)V[i].active&&(V[i].cleanGrid(),V[i].runAlgo(Y,U,X,$))}else W("please select an algorithm to visualize.")}));var W=function(n){document.querySelector(".alert").innerText=n,document.querySelector(".alert").classList.add("active"),setTimeout((function(){document.querySelector(".alert").classList.remove("active")}),5e3)},Z=document.querySelectorAll(".table .algo-title input[type='checkbox']"),Q=document.querySelector(".toturial");Z.forEach((function(n){return n.addEventListener("click",(function(n){if(j)W("Please finish the instructions first, or skip them.");else if(document.getElementById("panel-toggle").checked=!1,document.getElementById("legend-btn").checked=!1,n.target.checked)Q.classList.remove("hidden"),nn(n.target.nextElementSibling.innerText);else{Q.classList.add("hidden");for(var e=0;e<Z.length;e++)Z[e].checked=!1;nn("jjj")}}))})),document.getElementById("panel-toggle").onclick=function(n){if(n.target.checked){if(!document.querySelector(".toturial").classList.contains("hidden"))document.querySelector(".toturial").classList.add("hidden"),document.querySelectorAll(".algo-title input[type='checkbox']").forEach((function(n){n.checked&&(n.checked=!1)}));if(j){var e=document.querySelector(".instruction-start"),t=document.querySelector(".instruction-algos");e.classList.contains("hidden")||(e.classList.add("hidden"),t.classList.remove("hidden"))}}};var nn=function(n){var e=document.querySelector(" .toturial .title"),t=document.querySelector(".toturial .description"),r=document.querySelector(".toturial .back-face p");switch(n){case"Dijkstra's algorithm":return e.innerText="Dijkstra's algorithm",t.innerText="Dijkstra will evaluate the distance from start node at every move and it will visit the node with the cheapest cost at every move.It is a weighted algorithm and will take into account the cost of every node. Dijkstra will provide a shortest path with cheapest cost.",void(r.innerText="In this application dijkstra was implemented with a priority queue(i.e with a min heap) to keep track of cheapest node available at all time. \n you can add weighted cells to the grid by selecting the designated option, to see how the algorithm tries to avoid them. Every weighted cells, in this application, is twenty times more costly than a regular cell.");case"A*":return e.innerText="A* algorithm",t.innerText="A* is the most popular choice for pathfinding, because it’s fairly flexible and can be used in a wide range of contexts.\n\n A* will consider the distance from the start node as well as the estimated distance from goal node in every step. And then it will choose the cheapest path at every move based on this totual cost function.\n ",void(r.innerText="A* is like Dijkstra’s Algorithm in that it can be used to find a shortest path. A* is like Greedy Best-First-Search in that it can use a heuristic to guide itself. \n In other words, A* is faster and smarter than Dijkstra.That is, it will find a shortest path with visiting less nodes. And it is more careful than Greedy best first search in choosing its path.That is, it will examin more cells but it can garantee a shortest path.");case"greedy BFS":return e.innerText="Greedy Best-First Search",t.innerText="The algorithm will start from start node. it evaluates all its neighbors base on a heuristic function, to see how far each node is from the goal, and then it will choose the node with least distance from the goal. Greedy BFS is not guaranteed to find a shortest path. However, it runs much quicker than Dijkstra because it uses the heuristic function to guide its way towards the goal very quickly.",void(r.innerText="\n In this application the default heuristic function is based on 'Euclidean distance' of each node from the goal. However you can select 'Manhattan distance' from options to see how the behavior of gbfs and A* will slightly change. Every heuristic function will work as long as it is consistent and it does not overestimate the distance.\n Since the algorithm is greedy and choose the best move at the moment, you can see how it will get stuck in obstacles.");case"Depth-First Search":return e.innerText="Depth-First Search",t.innerText="DFS starts at the start node and explores one possible path until it eighther reaches to the end node or to a point that there is no other unvisited node left. After reaching to the end of one path, it will backtrack to explore other possible paths.",void(r.innerText="Depth-First search will not provide a shortest path. It will only tell you if a path exist. Also it is not a weighted algorithm.You can see if you make some cells weighted, the algorithm will treat them the same as other unweighted nodes.\n DFS can be implemented recursively, or iteratively. In this application DFS was implemented iteratively with the help of a stack.");case"Breadth-First Search":return e.innerText="Breadth-First Search",t.innerText="BFS explores nodes level by level. That is, after visiting start node, it will visit all neighbors(or children in a tree traversal) of start node before going to next level and it will keep doing this process until it reaches the end node.",void(r.innerText="BFS is not a weighted algorithm. That is, it will treat all nodes the same regardless of them having different costs. But it will find a shortest path(only based on the number of nodes visited).\n BFS was implemented by a \"queue\".In grids without any weighted node,Breadth-first search will behave almost exactly like dijkstra . You can see that by visualizing both algorithms at same time with a same grid without weighted cells.\n You can create exact same grids with 'Universal Grid' option. ");case"Recursive Backtracker":return e.innerText="Recursive Backtracker",t.innerText="This algorithm is a randomized version of the depth-first search algorithm. It chooses a cell, selects one of its unseen neighbors and destroys the wall between them. It keeps doing this process until it reaches a cell with no unseen neighbor. At this point It backtracks until it sees a new cell or the maze is done.",void(r.innerText="For implementing resursive backtracker maze generation algorithm, in this application, every other node was considered walls of its neighbors. Therefore the neighbors of each cell is actually two cells away from the current cell, and the rest of the algorithm is the same as described before.");case"Recursive Division":return e.innerText="Recursive Division",t.innerText="This algorithm makes horizontal or vertical walls at every step(based on the width and height of current area), and make a passage in this wall. The algorithm will call itself on two areas created by the wall. The process will continue until reaching minimum area eligible. At this point function will return and maze is done.",void(r.innerHTML="<br/>\n You can see my github repo to see the code\n <a href='http://github.com/MinaKhamesi' target='_blank' class='github-link'>Check out my github</a>");case"Randomized Prim":return e.innerText="Randomized Prim's algorithm",t.innerText="This algorithm is a randomized version of Prim's algorithm.Algorithm starts with a grid full of walls. It picks a cell, marks it as part of the maze. Add the walls of the cell to the wall list.And while there are walls in the wall list, it picks a random wall from the list. Pops it and if only one of the two cells that the wall divides is visited, then it makes the wall a passage and marks the unvisited cell as part of the maze. And adds the neighboring walls to the wall list.",void(r.innerHTML="To implement this algorithm in a grid of rows and columns, like in recursive backtracker algorithm, every other node is treated like a wall and neighbors are actually two cells away from each other(because the cell between them is being a wall).\n I actually kept track of frontiers, the cells that at least one of their neighbors has been visited and is part of the maze. And every time one of them is selected from the frontier list, the algorithm makes the frontier and also the wall between frontier and its visited neighbor(aka, the cells that behave like a wall in this implementation) a passage. The process will continue as long as there are frontiers left.");case"spiral":return e.innerText="Spiral algorithm",t.innerText="This is a very simple 2-D matrix traversal algorithm. While the width or height is not less than a threshold, the algorithm will visit the first row, last column, last row and first column in this order and after each iteration these variables will increment and decrement to make traversal possible.",void(r.innerHTML="<br/>\n You can see my github repo to see the code\n <a href='http://github.com/MinaKhamesi' target='_blank' class='github-link'>Check out my github</a>");case"diagonal steps":return e.innerText="diagonal steps algorithm",t.innerText='This is a very simple 2D matrix traversal. It is exactly written as you see it in the visualization. The algorithm has a "going-up" variable that while true it will go up diagonally,that is decrementing row while incrementing column number until we either reach first row or last culumn and then we go down until reaching either first column or last row.',void(r.innerHTML="<br/>\n You can see my github repo to see the code\n <a href='http://github.com/MinaKhamesi' target='_blank' class='github-link'>Check out my github</a>");default:return e.innerText="",t.innerText="",void(r.innerText="")}}}]);