Merge branch 'gh-pages' of https://github.com/parkjs814/AlgorithmVisualizer into gh-pages

css/stylesheet.css

@@ -489,4 +489,19 @@ input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
-}
\ No newline at end of file
+}
+
+.complexity {
+  margin: 10px 0px;
+}
+.complexity-type {
+	font-weight: bold;
+}
+
+.buttons button.active {
+  font-weight: bold;
+}
+
+.buttons button.active .fa {
+	color: #00e676;
+}

index.html

@@ -38,11 +38,11 @@
                 </div>
             </div>
             <button id="btn_run">
-                <i class="fa fa-play" aria-hidden="true"></i> 
+                <i class="fa fa-play" aria-hidden="true"></i>
                 <span class="btn-text">Run</span>
             </button>
             <button id="btn_prev">
-                <i class="fa fa-chevron-left" aria-hidden="true"></i> 
+                <i class="fa fa-chevron-left" aria-hidden="true"></i>
                 <span class="btn-text">Prev</span>
             </button>
             <button id="btn_pause">
@@ -147,4 +147,4 @@
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>

js/dom/setup/setup_top_menu.js

@@ -24,8 +24,10 @@ module.exports = () => {
 
   // control
 
-  $('#btn_run').click(() => {
+  $('#btn_run').click(function() {
     $('#btn_trace').click();
+    $('#btn_pause').removeClass('active');
+    $(this).addClass('active');
     var err = app.getEditor().execute();
     if (err) {
       console.error(err);
@@ -33,6 +35,8 @@ module.exports = () => {
     }
   });
   $('#btn_pause').click(function() {
+    $('#btn_run').removeClass('active');
+    $(this).addClass('active');
     if (app.getTracerManager().isPause()) {
       app.getTracerManager().resumeStep();
     } else {
@@ -40,10 +44,14 @@ module.exports = () => {
     }
   });
   $('#btn_prev').click(() => {
+    $('#btn_run').removeClass('active');
+    $('#btn_pause').addClass('active');
     app.getTracerManager().pauseStep();
     app.getTracerManager().prevStep();
   });
   $('#btn_next').click(() => {
+    $('#btn_run').removeClass('active');
+    $('#btn_pause').addClass('active');
     app.getTracerManager().pauseStep();
     app.getTracerManager().nextStep();
   });
@@ -64,4 +72,4 @@ module.exports = () => {
     $(this).addClass('active');
   });
 
-};
\ No newline at end of file
+};

js/dom/show_description.js

@@ -36,8 +36,14 @@ module.exports = (data) => {
       $container.append($ul);
 
       each(value, (prop) => {
-        $ul.append($('<li>').append($('<strong>').html(prop)).append(` ${value[prop]}`));
+        const $wrapper = $('<div class="complexity">');
+        const $type = $('<span class="complexity-type">').html(`${prop}: `);
+        const $value = $('<span class="complexity-value">').html(`${value[prop]}`);
+
+        $wrapper.append($type).append($value);
+
+        $ul.append($('<li>').append($wrapper));
       });
     }
   });
-};
\ No newline at end of file
+};

public/algorithm_visualizer.css

@@ -618,4 +618,19 @@ input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
-}
\ No newline at end of file
+}
+
+.complexity {
+  margin: 10px 0px;
+}
+.complexity-type {
+	font-weight: bold;
+}
+
+.buttons button.active {
+  font-weight: bold;
+}
+
+.buttons button.active .fa {
+	color: #00e676;
+}