Removed Work in Progress elements for a more clear UI

Author: cobyj33

Channel Rack/channelRack.js

@@ -195,6 +195,11 @@ function program() {
         $("#channelRack .main table tr td").css("min-width", columnSize + "px");
         $("#channelRack .main table tr td:nth-of-type(4n + 1)").css("border-right", "6px solid #222222");
         channelRackEvents();
+      },
+
+      clear: function() {
+        this.notes = [];
+        $("#channelRack .main table tr td").css("background-color", '');
       }
     }
 
@@ -465,6 +470,10 @@ function program() {
         channelRackPlayAction();
       });
 
+      $('#channelRack_clearButton').click(function() {
+        channelRack.clear();
+      });
+
       $('#channelRack_stopButton').click(function() {
         channelRack.playing = false;
         window.setTimeout(() => channelRack.currentTick = 1, getTickSpeed());

index.html

@@ -21,11 +21,11 @@
     <div id="toolBar">
         <ul id="menuBar">
             <li style=" text-align: center; color: white; font-family: 'Staatliches', cursive; overflow: hidden;"> <h1> JJ STUDIO </h1> </li>
-            <li>  <button class="menuButton"> Save</button></li>
+            <!-- <li>  <button class="menuButton"> Save</button></li>
             <li>  <button class="menuButton"> Load</button></li>
             <li>  <button class="menuButton"> View </button></li>
             <li>  <button class="menuButton"> Edit</button></li>
-            <li><button class="menuButton">  About </button></li>
+            <li><button class="menuButton">  About </button></li> -->
         </ul> 
 
         <div id="playListInfoBar">
@@ -34,10 +34,10 @@ <h3 class="input-info"> BPM: </h3>
                 <input type="number" id="bpm-display" min="10" max="300" class="user-input">
             </div>
 
-            <div class="input-container">
+            <!-- <div class="input-container">
                 <h3 class="input-info"> Time Signature: </h3>
                 <input type="text" id="time-signature-display" placeholder="4/4" disabled class="user-input">
-            </div>
+            </div> -->
 
             <div class="input-container">
                 <h3 class="input-info"> Current Time: </h3>
@@ -68,7 +68,7 @@ <h3> Enter JSON Key: </h3>
 
         <div id="windowSelection">
             <button class="windowSelectionButton" id="channel-rack-selection-button"> Channel Rack </button>
-            <button class="windowSelectionButton" id="piano-rack-selection-button"> Piano Rack </button>
+            <!-- <button class="windowSelectionButton" id="piano-rack-selection-button"> Piano Rack </button> -->
             <button class="windowSelectionButton" id="saved-patterns-selection-button"> Saved Patterns </button> 
         </div>
     </div>
@@ -98,6 +98,7 @@ <h1 style="font-size: 10px; color: white; user-select: none; "> Channel Rack </h
           <button type="button" id="channelRack_playButton" class="status-indicator"> ▶ </button>
           <button type="button" id="channelRack_stopButton" class="status-indicator"> ■ </button>
           <button type="button" id="channelRack_resetButton" class="status-indicator"> ↺ </button>
+          <button type="button" id="channelRack_clearButton" class="status-indicator"> Clear </button>
           <button type="button" id="channelRack-saveButton" class="status-indicator"> Save </button>
 
           <button type="button" class="closeButton"> X </button>
@@ -112,7 +113,7 @@ <h1 style="font-size: 10px; color: white; user-select: none; "> Channel Rack </h
 
 
         <div class="bottomBar">
-          <button class="addSoundButton"> Add Sound </button>
+          <!-- <button class="addSoundButton"> Add Sound </button> -->
           <div class="input-container">
               <h3 class="input-info" style="margin: 0;"> Pattern Name: </h3>
               <input type="text" class="user-input" id="channel-rack-name-input" placeholder="">
@@ -168,7 +169,7 @@ <h2> Search: </h2>
 
             </div>
         </div>
-        <div class="radial-menu-selection"> 
+        <!-- <div class="radial-menu-selection"> 
             <div class="content">
                 W.I.P
             </div>
@@ -177,7 +178,7 @@ <h2> Search: </h2>
             <div class="content">
                 W.I.P
             </div>
-        </div>
+        </div> -->
     </div>
 
     <div id="page-load">