afuh · stanleenwosu · May 9, 2021
diff --git a/src/index.html b/src/index.html
@@ -12,14 +12,18 @@
 <body>
 
   <div id="sequencer">
-      <div id="stepSequencer">
-        <div id="matrix"></div>
-      </div>
-      <div id="menu">
-        <div id="play"><i class="fa fa-play"></i></div>
-        <div id="stop"><i class="fa fa-stop"></i></div>
-        <div id="reset"><i class="fa fa-times"></i></div>
-      </div>
+    <div id="stepSequencer">
+      <div id="matrix"></div>
+    </div>
+    <div id="menu">
+      <div id="play"><i class="fa fa-play"></i></div>
+      <div id="stop"><i class="fa fa-stop"></i></div>
+      <div id="reset"><i class="fa fa-times"></i></div>
+      <div id="save"><i class="fa fa-save"></i></div>
+    </div>
+    <div id="store">
+    </div>
   </div>
 </body>
-</html>
+
+</html>
diff --git a/src/main.sass b/src/main.sass
@@ -73,3 +73,9 @@ $orange: rgb(255, 181, 0)
 
 .colorOn
   background-color: rgba($orange, .5)
+
+#store
+ padding: 1em
+ p
+  i
+    margin-left: .3em
diff --git a/src/modules/build.js b/src/modules/build.js
@@ -1,64 +1,120 @@
-import $ from 'jquery'
-import press from './run'
+import $ from "jquery";
+import press from "./run";
+import store from "./store";
 
 const columns = 16,
-    bpm = 120,
-    ms = 60000/bpm,
-    eightN = ms/2;
+  bpm = 120,
+  ms = 60000 / bpm,
+  eightN = ms / 2;
 
-const doc = $(document)
-const parent = doc.find("#sequencer")
-const matrix = parent.find("#matrix")
-const reset = parent.find("#reset")
-const play = parent.find("#play")
-const stop = parent.find("#stop")
-const row = [".r0", ".r1", ".r2", ".r3", ".r4", ".r5", ".r6", ".r7", ".r8", ".r9"]
-let square
+const doc = $(document);
+const parent = doc.find("#sequencer");
+const matrix = parent.find("#matrix");
+const reset = parent.find("#reset");
+const play = parent.find("#play");
+const stop = parent.find("#stop");
+const save = parent.find("#save");
+const load = parent.find("#store");
+const row = [
+  ".r0",
+  ".r1",
+  ".r2",
+  ".r3",
+  ".r4",
+  ".r5",
+  ".r6",
+  ".r7",
+  ".r8",
+  ".r9",
+];
+let square;
 
-export {row, columns, parent, play, stop, eightN }
+export { row, columns, parent, play, stop, eightN };
 
 export const seq = {
   init() {
-      seq.buildSequencer();
-      seq.bindEvent();
-      seq.fadeIn();
+    seq.buildSequencer();
+    seq.bindEvent();
+    seq.fadeIn();
   },
   buildSequencer() {
-      //build rows
-      for (let i = 9; i >= 0; i--) {
-        matrix.prepend(`<div class='row r${i}'></div>`);
+    //build rows
+    for (let i = 9; i >= 0; i--) {
+      matrix.prepend(`<div class='row r${i}'></div>`);
+    }
+    //build columns
+    row.map((x) => {
+      for (let i = columns; i > 0; i--) {
+        $(x).prepend(`<div class="square"></div>`);
       }
-      //build columns
-      row.map((x) => {
-        for (let i = columns; i > 0; i--) {
-          $(x).prepend(`<div class="square"></div>`);
-        }
-      });
-      square = parent.find(".square")
+    });
+    square = parent.find(".square");
+    //get stored sequences
+    seq.initStore();
   },
   bindEvent() {
-      play.click(press.play);
-      stop.click(press.stop);
-      reset.click(seq.reset);
-      square.mousedown(seq.paint);
-      seq.paintDrag();
+    play.click(press.play);
+    stop.click(press.stop);
+    reset.click(seq.reset);
+    save.click(seq.save);
+    load.click(seq.load);
+    square.mousedown(seq.paint);
+    seq.paintDrag();
+  },
+
+  initStore() {
+    load.children().remove()
+    store.getStore().forEach((seq) => {
+      load.prepend(`<p id="${seq.name}">${seq.name}
+        <i data-option="load" class="fa fa-arrow-up"></i>  <i data-option="delete" class="fa fa-times"></i>
+      </p>`);
+    });
   },
+
   paint() {
-      $(this).toggleClass("square-active");
+    $(this).toggleClass("square-active");
+    store.toggle($(this).parent().index(), $(this).index());
+  },
+
+  load(e) {
+    square.removeClass("square-active");
+    const el = e.target;
+    const option = $(el).data().option;
+    const seqName = $(el).parent()[0].id;
+    if (option === "load") {
+      let seq = store.getSequence(seqName);
+      seq.seqArr.forEach(({ x, y }) => {
+        let el = $(`.r${x}`).children()[y];
+        $(el).toggleClass("square-active");
+        store.toggle($(el).parent().index(), $(el).index());
+      });
+    }
+    if (option === "delete") {
+      store.deleteFromStore(seqName);
+      seq.initStore()
+    }
   },
   paintDrag() {
-      doc.mousedown(() => {
-        matrix.on("mouseover", ".square", function(){
+    doc
+      .mousedown(() => {
+        matrix.on("mouseover", ".square", function () {
           $(this).toggleClass("square-active");
+          store.toggle($(this).parent().index(), $(this).index());
         });
-      }).mouseup(() => {
-          matrix.off("mouseover");
-        });
+      })
+      .mouseup(() => {
+        matrix.off("mouseover");
+      });
   },
   reset() {
-      square.removeClass("square-active");
+    square.removeClass("square-active");
+    store.reset();
   },
-  fadeIn(){
+  save() {
+    store.saveToStore();
+    seq.initStore();
+  },
+  fadeIn() {
     parent.fadeIn(600);
-  }
+  },
 };
diff --git a/src/modules/store.js b/src/modules/store.js
@@ -0,0 +1,55 @@
+const seqArr = [];
+const ls = "localSeqArr";
+
+const store = {
+  add(x, y) {
+    seqArr.push({ x, y });
+  },
+  remove(i) {
+    seqArr.splice(i, 1);
+  },
+  toggle(x, y) {
+    let i = seqArr.findIndex((seq) => seq.x === x && seq.y === y);
+    if (i < 0) {
+      this.add(x, y);
+    } else {
+      this.remove(i);
+    }
+  },
+
+  reset() {
+    seqArr.length = 0;
+  },
+
+  getSequence(name) {
+    const seqArr = this.getStore();
+    if (seqArr.length < 0) {
+      return null;
+    }
+    return seqArr.find((seq) => seq.name === name);
+  },
+
+  getStore() {
+    const seqArr = JSON.parse(localStorage.getItem(ls));
+    return seqArr ? seqArr : [];
+  },
+
+  setStore(seqArr = []) {
+    localStorage.setItem(ls, JSON.stringify(seqArr));
+  },
+
+  saveToStore(seqName = "sequence") {
+    let storeSeq = this.getStore();
+    let seqInfo = { name: `${seqName}_${storeSeq.length}`, seqArr };
+    storeSeq.push(seqInfo);
+    this.setStore(storeSeq);
+  },
+
+  deleteFromStore(seqName) {
+    let storeSeq = this.getStore();
+    let i = storeSeq.findIndex((l) => l.name === seqName);
+    storeSeq.splice(i, 1);
+    this.setStore(storeSeq);
+  },
+};
+export default store;