Update from cs50 branch (excluded README)

static/js/lib/GraphFactory/BlockGraph.js

@@ -71,20 +71,28 @@ class BlockGraph
         var consumedWidth = 0;
         // Specify the width of a block
         var boxWidth = this.boxWidth();
+        // Set array values and shuffling
+        let arr = new Array(this.numBlocks)
+        for (let i = 0; i < this.numBlocks; i++) {
+            arr[i] = i+1;
+        }
+        const shuffleArr = (arr) => arr.sort(() => Math.random() - 0.5);
+        shuffleArr(arr);
         // Generate blocks with appropriate value
         for (let i = 0; i < this.numBlocks; i++) {
-            // Get the value of the box randomly
-            var value = Math.floor(Math.random() * this.numBlocks) + 1;
+            // // Get the value of the box randomly
+            // var value = Math.floor(Math.random() * this.numBlocks) + 1;
+
             // Specify the height of a block
-            var boxHeight = this.boxHeight(value);
+            var boxHeight = this.boxHeight(arr[i]);
             //console.log(boxHeight)
 
             // Create a block
             const g = document.createElementNS(this.ns, 'g');
             g.setAttribute('transform', "translate(" + consumedWidth.toString() + ")");
 
             const block = document.createElementNS(this.ns, 'rect');
-            block.setAttribute('id', value.toString());
+            block.setAttribute('id', arr[i].toString());
             block.setAttribute('class', 'block');
             block.setAttribute('width', boxWidth.toString());
             block.setAttribute('height', boxHeight.toString());

static/js/lib/VisualizationSupport.js

@@ -46,6 +46,10 @@ export function swap(nodeA, nodeB) {
 // Traverse all the blocks after sorting completion
 export async function traverseBlocks(length, array)
 {
+    let delay = 50;
+    if (length > 200) {
+        delay /= 20;
+    }
     var slidingBlocks;
     if (length % 2 == 0)
     {
@@ -63,7 +67,7 @@ export async function traverseBlocks(length, array)
         await new Promise((resolve) =>
             setTimeout(() => {
                 resolve();
-            }, 50)
+            }, delay)
         );
         if (end < length)
         {

templates/core/developing.html

@@ -9,6 +9,7 @@
     <h3 id="starting-canvas">
         Searching parts in Development
     </h3>
-    <img class="m-4" src="/static/settings.png" alt="Gear icons created by Gregor Cresnar - Flaticon (https://www.flaticon.com/free-icon/settings_563541?term=gear&page=1&position=3&page=1&position=3&related_id=563541&origin=tag)">
+    <img class="m-4" width="30%" src="/static/settings.png" 
+         alt="Gear icons created by Gregor Cresnar - Flaticon (https://www.flaticon.com/free-icon/settings_563541?term=gear&page=1&position=3&page=1&position=3&related_id=563541&origin=tag)">
 </div>
 {% endblock %}

templates/core/index.html

@@ -9,6 +9,7 @@
     <h3 id="starting-canvas">
         Please select an algorithm
     </h3>
-    <img src="/static/thinking.png" alt="Emoji icons created by Culmbio - Flaticon (https://www.flaticon.com/free-icon/thinking_7624104?term=thinking%20face&page=1&position=2&page=1&position=2&related_id=7624104&origin=search)">
+    <img src="/static/thinking.png" width="30%" 
+         alt="Emoji icons created by Culmbio - Flaticon (https://www.flaticon.com/free-icon/thinking_7624104?term=thinking%20face&page=1&position=2&page=1&position=2&related_id=7624104&origin=search)">
 </div>
 {% endblock %}

templates/layouts/layout.html

@@ -58,18 +58,12 @@
         <div class="container-fluid">
             <div class="row">
                 <!-- TODO canvas -->
-                <div id="simulation" class="container my-3 col border-end" style="height: 700px;">
+                <div id="simulation" class="container my-3 col-xl-10 border-end" style="height: 44em;">
                     {% block simulation %}{% endblock %}
                 </div>
-                <!-- {% if url_for("index") %}
-                <script>
-                    var canv = document.getElementById("simulation")
-                    canv.style.backgroundColor = "#CFD8DC"
-                </script>
-                {% endif %} -->
 
                 <!-- TODO control box -->
-                <form class="control-box border-start col-2 py-3 gap-3">
+                <form class="control-box border-start col-xl-2 py-3">
                     <div class="p-2">
                         <button id="play" type="button" class="btn btn-success">Play</button>
                         <button id="reset" type="button" class="btn btn-danger" disabled>Reset</button>
@@ -78,7 +72,7 @@
                         <label for="inputSize">Input Size</label>
                         <div class="d-flex flex-row" id="sizeControl">
                             <input class="me-1 w-75" id="inputSize" type="number" name="size" min="1" max="1000" value="50" autocomplete="off" placeholder="size">
-                            <button type="button" class="btn btn-info" id="submitSize">Draw</button>
+                            <button type="button" class="btn btn-info w-25" id="submitSize">Draw</button>
                         </div>
                     </div>
                     <div class="p-2" id="speedControl">
@@ -93,15 +87,6 @@
                             <label class="btn btn-outline-light" for="x100">x100</label>
                         </div>
                     </div>
-                    <script>
-                        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
-                        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
-                            return new bootstrap.Popover(popoverTriggerEl)
-                        })
-
-                        let inputRange = document.getElementById("speedSlider")
-                        inputRange.setAttribute('data-bs-content', inputRange.value.toString())
-                    </script>
                 </form>
 
             </div>