diff --git a/src/index.html b/src/index.html index 1b2f370..8bfe614 100644 --- a/src/index.html +++ b/src/index.html @@ -12,14 +12,18 @@
-
-
-
- +
+
+
+ +
+
- + + \ No newline at end of file diff --git a/src/main.sass b/src/main.sass index 093c40b..679186c 100644 --- 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 \ No newline at end of file diff --git a/src/modules/build.js b/src/modules/build.js index a896e29..0e549f9 100644 --- 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(`
`); + //build rows + for (let i = 9; i >= 0; i--) { + matrix.prepend(`
`); + } + //build columns + row.map((x) => { + for (let i = columns; i > 0; i--) { + $(x).prepend(`
`); } - //build columns - row.map((x) => { - for (let i = columns; i > 0; i--) { - $(x).prepend(`
`); - } - }); - 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(`

${seq.name} + +

`); + }); }, + 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 new file mode 100644 index 0000000..c207871 --- /dev/null +++ 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;