Skip to content

Commit

Permalink
hi you
Browse files Browse the repository at this point in the history
  • Loading branch information
@Skparab1
Skparab1 authored Jan 8, 2024
1 parent 7ca298b commit 2caf81f
Show file tree
Hide file tree
Showing 4 changed files with 106 additions and 61 deletions.
13 changes: 13 additions & 0 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -492,3 +492,16 @@ input:checked + .slider:before {
background: var(--main);
cursor: pointer;
}


.screen{
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background-color: black;
opacity: 0;
transition: opacity 0.25s, display 0.25s;
}
47 changes: 28 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@
<li class="headername">Binary Tree Builder</li>
</ul>
<ul class="nav-items navcenter" id="nav">
<li><a class="larget" onclick="openel('randomtree');">Random Tree</a></li>
<li><a class="larget" onclick="openel('randomtree'); openscreen();">Random Tree</a></li>
<li><a class="larget" onclick="localStorage.removeItem('binarytreestorage'); location.reload();">Reset Tree</a></li>
<li><a class="larget" onclick="openel('sharetree'); createshareURL();">Share Tree</a></li>
<li><a class="larget" onclick="openel('sharetree'); createshareURL(); openscreen();">Share Tree</a></li>
<li><a class="larget" id='header2' href="./bst.html">BST Classification</a></li>
</ul>
<ul class="nav-items navright">
<li title="Settings"><a onclick="openprefs();"><img src="assets/settings.png" height="30px" class="logo"></a></li>
<li title="Help"><a onclick="openel('instructions');" ><img src="assets/help.png" height="30px" class="logo" style="cursor: help;"></a></li>
<li title="Settings"><a onclick="openprefs(); openscreen();"><img src="assets/settings.png" height="30px" class="logo"></a></li>
<li title="Help"><a onclick="openel('instructions'); openscreen();" ><img src="assets/help.png" height="30px" class="logo" style="cursor: help;"></a></li>
<li title="Report bug"><a href="https://github.com/skparab1/binarytree/issues/new" target="_blank"><img src="assets/reportbuggy.png" height="30px" class="logo"></a></li>
</ul>
</nav>
Expand All @@ -43,51 +43,57 @@ <h1 id='head' style="font-size: 50px; color: rgba(0,0,0,0);">e</h1>

<div id='res' class="results" onmouseenter="raiseresults();" onmouseleave="lowerresults();">
<button class="exit-modal" onclick="if (!stayingup){ raiseresults(); stayingup = true; document.getElementById('sb').textContent = 'Unlock movement';} else {stayingup = false; document.getElementById('sb').textContent = 'Lock movement';}"><p id='sb'>Lock movement</p></button>
<button class="exit-modal" style='left: 15px;' onclick="openprefs();"><p id='prefs'>Preferences</p></button>
<button class="exit-modal" style='left: 15px;' onclick="openprefs(); openscreen();"><p id='prefs'>Preferences</p></button>

<h1>Output</h1>

<div class="guesstile">
<h3>Post order <span id='playpost' onclick=" if (!disabled){(async () => { disableplay(); redrawtree(); await glowtreepostorder(root); enableplay(); })();}" style="color: yellow; cursor: pointer; font-size: 15px;"> (Demo)</span></h3>
<h3>Post order <span id='playpost' onclick=" if (!disabled){(async () => { disableplay(); redrawtree(); await glowtreepostorder(root); enableplay(); })();}" style="color: rgb(255, 51, 0); cursor: pointer; font-size: 15px;"> (Light-up animation)</span></h3>
<input class="guess" id="postorder">
</div>
<div class="guesstile">
<h3>In order <span id='playin' onclick=" if (!disabled){(async () => { disableplay(); redrawtree(); await glowtreeinorder(root); enableplay(); })();}" style="color: yellow; cursor: pointer; font-size: 15px;"> (Demo)</span></h3>
<h3>In order <span id='playin' onclick=" if (!disabled){(async () => { disableplay(); redrawtree(); await glowtreeinorder(root); enableplay(); })();}" style="color: rgb(255, 51, 0); cursor: pointer; font-size: 15px;"> (Light-up animation)</span></h3>
<input class="guess" id="inorder">
<div class="check" onclick="checkall();">Check All</div>
<div class="check" onclick="showsolutions();">Solutions</div>
<div class="check" onclick="showsolutions(); openscreen();">Solutions</div>
</div>
<div class="guesstile">
<h3>Pre order <span id='playpre' onclick=" if (!disabled){(async () => { disableplay(); redrawtree(); await glowtreepreorder(root); enableplay(); })();}" style="color: yellow; cursor: pointer; font-size: 15px;"> (Demo)</span></h3>
<h3>Pre order <span id='playpre' onclick=" if (!disabled){(async () => { disableplay(); redrawtree(); await glowtreepreorder(root); enableplay(); })();}" style="color: rgb(255, 51, 0); cursor: pointer; font-size: 15px;"> (Light-up animation)</span></h3>
<input class="guess" id="preorder">
</div>
</div>

<div id="screen" class="screen"></div>

<div class="largenotif" id="solutions">
<h1 >Solutions</h1>
<!-- warning: everything inside of this is overwritten by js function checkall. do not change this -->
<h1>Solutions</h1>
<h5 id="preordersol">Pre order: </h5>
<h5 id="inordersol">In order: </h5>
<h5 id="postordersol">Post order: </h5>
<div class="close" onclick="closesolutions();">Close</div>
</div>

<div class="largenotif" id="preferences" style="height: 60%;">
<div class="largenotif" id="preferences" style="height: fit-content;">
<h1 style="font-size: 25px;">Settings</h1>
<h3 style="font-size: 15px; margin-bottom: 5px;" id="theme">Theme: (Dark)</h3>
<h3 style="font-size: 15px; margin-bottom: 5px; margin-top: 0px;" id="theme">Theme: (Dark)</h3>
<label class="switch" onclick="toggletheme();">
<input type="checkbox">
<span class="slider round"></span>
</label>

<h3 style="font-size: 15px; margin-bottom: 5px;" id="lines">Lines: (Cornered)</h3>
<h3 style="font-size: 15px; margin-bottom: 5px; margin-top: 0px;" id="lines">Lines: (Cornered)</h3>
<label class="switch" onclick="toggleangle();">
<input type="checkbox">
<span class="slider round"></span>
</label>

<a href="https://github.com/skparab1/binarytree/issues/new" target="_blank"><div class="close" style="margin-bottom: 10px;">Report bug</div></a>
<h3 style="font-size: 15px; margin-bottom: 0px; margin-top: 0px;" id="animwait">Light-up animation delay time: 500ms</h3>
<div class="slide2container" style="margin-top: -20px;">
<input type="range" min="100" max="2000" value="500" step="10" class="slider2" name="waittime" id="waittime" onchange="document.getElementById('animwait').textContent = 'Light-up animation delay time: '+document.getElementById('waittime').value+'ms';">
</div>

<div class="close" onclick="closeprefs();">Close</div>
<div class="close" onclick="closeprefs(); closescreen();">Close</div>
</div>


Expand All @@ -109,18 +115,19 @@ <h3 style="margin-bottom: 0px; font-size: 25px;">Tree type</h3>
<option value="numeric">Numerical</option>
<option value="rand">Random</option>
</select>
<div class="close" onclick="closeel('randomtree'); root = randtree(); redrawtree();">Generate</div>
<div class="close" onclick="closeel('randomtree'); closescreen(); root = randtree(); redrawtree();">Generate</div>
<div class="close" onclick="closeel('randomtree'); closescreen();">Cancel</div>
</div>

<div class="largenotif" id="instructions" style="top: 100%; opacity: 0; height: auto; margin-bottom: 50px;">
<h1 style='font-size: 25px; margin: 10px;'>How to use</h1>
<h5 style='font-size: 15px; margin: 10px;'>1. Construct a binary tree using the left/right buttons to add nodes and delete button to remove nodes or press "random tree" to generate a random tree.</h5>
<h5 style='font-size: 15px; margin: 10px;'>2. Type in guesses for results in output box at the bottom of your screen</h5>
<h5 style='font-size: 15px; margin: 10px;'>3. Click "check answers" or "view solutions" to verify</h5>
<h5 style='font-size: 15px; margin: 10px;'>4. Click "Demo" to see light up animations of traversal</h5>
<h5 style='font-size: 15px; margin: 10px;'>4. Click "Light-up animation" to see light up animations of traversal</h5>
<h5 style='font-size: 15px; margin: 10px;'>5. Click "Reset Tree" to start over</h5>
<h5 style='font-size: 15px; margin: 10px;'>6. Click "Share Tree" share your tree with someone else</h5>
<div class="close" onclick="closeinstructions();">Close</div>
<div class="close" onclick="closeinstructions(); closescreen();">Close</div>
</div>

<div class="largenotif" id="sharetree" style="top: 100%; opacity: 0; height: auto; margin-bottom: 50px;">
Expand All @@ -129,9 +136,11 @@ <h5 style='font-size: 15px; margin: 18px;'>Send the following URL to someone to

<h5 id="shareurldisp" style='font-size: 20px; margin: 15px; padding: 10px; border-radius: 25px; color: var(--main); background-color: var(--bg);'></h5>

<div class="close" onclick="closeel('sharetree');">Close</div>
<div class="close" onclick="closeel('sharetree'); closescreen();">Close</div>
</div>



<!-- <img class="standaloneicon" id="x1" src="assets/redx.png" height="75px" alt="large red x">
<img class="standaloneicon" id="x2" src="assets/redx.png" height="75px" alt="large red x">
<img class="standaloneicon" id="x3" src="assets/redx.png" height="75px" alt="large red x">
Expand Down
61 changes: 34 additions & 27 deletions js/dist/index.dev.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ function checkall() {
var inorder = traverseinorder(root).replaceAll('deleted', '');
var postorder = traversepostorder(root).replaceAll('deleted', '');
var sols = document.getElementById('solutions');
sols.innerHTML = "\n <h1 style='font-size: 25px'>Solutions</h1>\n <h1 style='font-size: 15px'>Pre order: ".concat(preorder, "</h1>\n <h1 style='font-size: 15px'>In order: ").concat(inorder, "</h1>\n <h1 style='font-size: 15px'>Post order: ").concat(postorder, "</h1>\n <div class=\"close\" onclick=\"closesolutions();\">Close</div>\n ");
sols.innerHTML = "\n <h1 style='font-size: 25px'>Solutions</h1>\n <h1 style='font-size: 15px'>Pre order: ".concat(preorder, "</h1>\n <h1 style='font-size: 15px'>In order: ").concat(inorder, "</h1>\n <h1 style='font-size: 15px'>Post order: ").concat(postorder, "</h1>\n <div class=\"close\" onclick=\"closesolutions(); closescreen();\">Close</div>\n ");
preorder = preorder.replaceAll(' ', '');
inorder = inorder.replaceAll(' ', '');
postorder = postorder.replaceAll(' ', '');
Expand Down Expand Up @@ -443,29 +443,25 @@ function glowtreepreorder(start) {
return _context.abrupt("return");

case 2:
_context.next = 4;
return regeneratorRuntime.awrap(sleep(document.getElementById('waittime').value));

case 4:
idx = nodearr.indexOf(start);
nd = document.getElementById('thenode' + String(idx));

try {
nd.style.boxShadow = '7px 7px 5px rgba(255, 0, 0, 0.7)';
} catch (error) {}

_context.next = 7;
return regeneratorRuntime.awrap(sleep(500));

case 7:
_context.next = 9;
return regeneratorRuntime.awrap(glowtreepreorder(start.getleft));

case 9:
_context.next = 11;
return regeneratorRuntime.awrap(sleep(500));

case 11:
_context.next = 13;
return regeneratorRuntime.awrap(glowtreepreorder(start.getright));

case 13:
case 11:
case "end":
return _context.stop();
}
Expand All @@ -490,25 +486,21 @@ function glowtreeinorder(start) {
idx = nodearr.indexOf(start);
nd = document.getElementById('thenode' + String(idx));
_context2.next = 6;
return regeneratorRuntime.awrap(sleep(500));
return regeneratorRuntime.awrap(glowtreeinorder(start.getleft));

case 6:
_context2.next = 8;
return regeneratorRuntime.awrap(glowtreeinorder(start.getleft));
return regeneratorRuntime.awrap(sleep(document.getElementById('waittime').value));

case 8:
try {
nd.style.boxShadow = '7px 7px 5px rgba(255, 0, 0, 0.7)';
} catch (error) {}

_context2.next = 11;
return regeneratorRuntime.awrap(sleep(500));

case 11:
_context2.next = 13;
return regeneratorRuntime.awrap(glowtreeinorder(start.getright));

case 13:
case 11:
case "end":
return _context2.stop();
}
Expand Down Expand Up @@ -694,11 +686,11 @@ function enableplay() {
var post = document.getElementById('playpost');
var ino = document.getElementById('playin');
var pre = document.getElementById('playpre');
post.style.color = 'yellow';
post.style.color = 'rgb(255, 51, 0)';
post.style.cursor = "pointer";
ino.style.color = 'yellow';
ino.style.color = 'rgb(255, 51, 0)';
ino.style.cursor = "pointer";
pre.style.color = 'yellow';
pre.style.color = 'rgb(255, 51, 0)';
pre.style.cursor = "pointer";
disabled = false;
}
Expand All @@ -724,28 +716,43 @@ function glowtreepostorder(start) {

case 6:
_context3.next = 8;
return regeneratorRuntime.awrap(sleep(500));
return regeneratorRuntime.awrap(glowtreepostorder(start.getright));

case 8:
_context3.next = 10;
return regeneratorRuntime.awrap(glowtreepostorder(start.getright));
return regeneratorRuntime.awrap(sleep(document.getElementById('waittime').value));

case 10:
_context3.next = 12;
return regeneratorRuntime.awrap(sleep(500));

case 12:
try {
nd.style.boxShadow = '7px 7px 5px rgba(255, 0, 0, 0.7)';
} catch (error) {} //enableplay();


case 13:
case 11:
case "end":
return _context3.stop();
}
}
});
}

function openscreen() {
var el = document.getElementById("screen");
el.style.display = "block";
el.style.opacity = 0.4;
var res = document.getElementById("res");
res.style.opacity = 0.4;
stayingup = true;
}

function closescreen() {
console.log("called to close");
var el = document.getElementById("screen");
el.style.display = "none";
el.style.opacity = 0;
var res = document.getElementById("res");
res.style.opacity = 1;
stayingup = false;
} // rules


Expand Down
46 changes: 31 additions & 15 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ function checkall(){
<h1 style='font-size: 15px'>Pre order: ${preorder}</h1>
<h1 style='font-size: 15px'>In order: ${inorder}</h1>
<h1 style='font-size: 15px'>Post order: ${postorder}</h1>
<div class="close" onclick="closesolutions();">Close</div>
<div class="close" onclick="closesolutions(); closescreen();">Close</div>
`

preorder = preorder.replaceAll(' ','');
Expand Down Expand Up @@ -451,7 +451,8 @@ async function glowtreepreorder(start){
if (start == null){
return;
}


await sleep(document.getElementById('waittime').value);

let idx = nodearr.indexOf(start);
let nd = document.getElementById('thenode'+String(idx));
Expand All @@ -462,12 +463,9 @@ async function glowtreepreorder(start){

}

await sleep(500);

await glowtreepreorder(start.getleft);

await sleep(500);

await glowtreepreorder(start.getright);

//enableplay();
Expand All @@ -481,18 +479,16 @@ async function glowtreeinorder(start){
let idx = nodearr.indexOf(start);
let nd = document.getElementById('thenode'+String(idx));

await sleep(500);

await glowtreeinorder(start.getleft);


await sleep(document.getElementById('waittime').value);
try {
nd.style.boxShadow = '7px 7px 5px rgba(255, 0, 0, 0.7)';
} catch (error) {

}

await sleep(500);

await glowtreeinorder(start.getright);

//enableplay();
Expand Down Expand Up @@ -662,11 +658,11 @@ function enableplay(){
let ino = document.getElementById('playin');
let pre = document.getElementById('playpre');

post.style.color = 'yellow';
post.style.color = 'rgb(255, 51, 0)';
post.style.cursor = "pointer";
ino.style.color = 'yellow';
ino.style.color = 'rgb(255, 51, 0)';
ino.style.cursor = "pointer";
pre.style.color = 'yellow';
pre.style.color = 'rgb(255, 51, 0)';
pre.style.cursor = "pointer";

disabled = false;
Expand All @@ -682,11 +678,9 @@ async function glowtreepostorder(start){

await glowtreepostorder(start.getleft);

await sleep(500);

await glowtreepostorder(start.getright);

await sleep(500);
await sleep(document.getElementById('waittime').value);

try {
nd.style.boxShadow = '7px 7px 5px rgba(255, 0, 0, 0.7)';
Expand All @@ -699,6 +693,28 @@ async function glowtreepostorder(start){
}


function openscreen(){
let el = document.getElementById("screen");
el.style.display = "block";
el.style.opacity = 0.4;

let res = document.getElementById("res");
res.style.opacity = 0.4;
stayingup = true;
}

function closescreen(){
console.log("called to close");
let el = document.getElementById("screen");
el.style.display = "none";
el.style.opacity = 0;

let res = document.getElementById("res");
res.style.opacity = 1;
stayingup = false;
}


// rules
let bt1 = localStorage.getItem('binarytree');
if (bt1 == null){
Expand Down

0 comments on commit 2caf81f

Please sign in to comment.