add delete all

public/data/scripts/ts/manager.ts

@@ -1,6 +1,6 @@
 class Manager {
 
-    pendulums: Pendulum[] = []
+    pendula: Pendulum[] = []
 
     timescale = 1;
     gravity = 9.81;
@@ -16,7 +16,7 @@ class Manager {
             let rad = i / count / 1e3 + p.PI * 1.05;
             let hue = i / count * 100;
             let color = p.color(hue, 100, 100);
-            this.pendulums.push(
+            this.pendula.push(
                 new Pendulum([1, 1, 1, 1, 1, 1, 1, 1], [50, 50, 50, 50, 50, 50, 50, 100 + i / count / 10000], color)
             );
         }
@@ -72,6 +72,11 @@ class Manager {
             methods: {
                 add() {
 
+                },
+                deleteAll(){
+                    if (confirm("Delete all pendulums?")){
+                        manager.pendula.splice(0);
+                    }
                 },
                 resetMasses(){
                     for (let i = 0; i < this.maxSegmentCount; i++)
@@ -103,14 +108,14 @@ class Manager {
     update(){
         if (this.playing) {
             const h = this.timescale / Math.max(p.frameRate(), 1);
-            this.pendulums.forEach(p => p.update(h));
+            this.pendula.forEach(p => p.update(h));
         }
     }
 
     draw(){
         p.push()
         p.translate(p.width / 2, p.height / 2);
-        this.pendulums.forEach(p => p.draw());
+        this.pendula.forEach(p => p.draw());
         p.pop();
     }
 

public/index.html

@@ -16,7 +16,7 @@
         <div id="content">
             <div id="options">
                 <fieldset id="preparation">
-                    <legend>Preparation</legend>
+                    <legend>Add Pendula</legend>
                     <label>
                         Segments: {{ segmentCount }}
                         <input type="range" v-model.number="segmentCount" min="1" max="30" step="1">
@@ -79,7 +79,10 @@
                             <input type="range" v-model.number="changeAmount" min="0.0001" max="0.1" step="0.0001">
                         </label>
                     </template>
+                    <div class="horizontal_group">
                         <button @click="add" id="add_btn"></button>
+                        <button @click="deleteAll" id="delete_btn"></button>
+                    </div>
                 </fieldset>
                 <fieldset id="simulation">
                     <legend>Simulation</legend>

public/styles.css

@@ -132,7 +132,15 @@ button:active {
     justify-content: space-between;
 }
 .horizontal_group > * {
-    width: 32%;
+    width: auto;
+    flex: 1;
+    margin: 5px;
+}
+.horizontal_group > *:last-child {
+    margin-right: 0;
+}
+.horizontal_group > *:first-child {
+    margin-left: 0;
 }
 
 #normalize_btn {
@@ -154,6 +162,12 @@ button:active {
     background-image: url("data/images/add.svg");
 }
 
+#delete_btn {
+    border-color: #810000;
+    background-color: #ffa7a7;
+    background-image: url("data/images/delete.svg");
+}
+
 #play_btn {
     border-color: #0000c2;
     background-color: #b1b1ff;