fix favicons, clean up code structure

components/app.js

@@ -6,15 +6,14 @@ import * as appStyle from "/styles/components/app.styl?inline";
 
 import * as Tone from "tone";
 
-import State from "/state.js";
-
-import Patch from "/patch.js";
+import State from "/scripts/state";
+import Patch from "/scripts/patch";
+import SaveManager from "/scripts/save-manager";
+import KeyHandler, { onInputBlur, onInputFocus } from "/scripts/keys";
 
 import * as basicPatch from "/objects/patches/basic.json";
 import * as basicSynthPatch from "/objects/patches/basic-synth.json";
 import localforage from "localforage";
-import SaveManager from "../save-manager";
-import KeyHandler, { onInputBlur, onInputFocus } from "../keys";
 
 class App extends LitElement {
     sequencer = createRef();

components/arpeggiator.js

@@ -3,8 +3,8 @@ import { LitElement, html, css, unsafeCSS } from "lit";
 
 import * as mdiStyle from "@material-design-icons/font/index.css?inline";
 import * as arpeggiatorStyle from "/styles/components/arpeggiator.styl?inline";
-import defaultAlgorithms from "../arpeggiator-algorithms.js";
-import util from "../util.js";
+import defaultAlgorithms from "/scripts/arpeggiator-algorithms.js";
+import util from "/scripts/util.js";
 
 import * as scales from "/objects/scales.json";
 

components/dialog.js

@@ -1,14 +1,13 @@
 import * as mdiStyle from "@material-design-icons/font/index.css?inline";
 import { LitElement, html, css, unsafeCSS } from "lit";
-import { ref, createRef } from "lit/directives/ref.js";
 import * as dialogStyle from "/styles/components/dialog.styl?inline";
 
 class Dialog extends LitElement {
     static properties = {
-        title: { type: String }
+        title: { type: String },
     };
 
-    _onCloseClick(e) {
+    _onCloseClick() {
         this.close();
     }
 
@@ -17,29 +16,31 @@ class Dialog extends LitElement {
     }
 
     render() {
-        return html`
-        <div id="dialog">
-          <div id="header">
-            <button @click=${this._onCloseClick}>
-              <span class="material-icons">close</span>
-            </button>
-            ${this.title}
-          </div>
-          <div id="body"><slot></slot></div>
+        return html` <div id="dialog">
+            <div id="header">
+                <button @click=${this._onCloseClick}>
+                    <span class="material-icons">close</span>
+                </button>
+                ${this.title}
+            </div>
+            <div id="body"><slot></slot></div>
         </div>`;
     }
 
     static styles = [
-        css`${unsafeCSS(mdiStyle.default)}`,
-        css`${unsafeCSS(dialogStyle.default)}`
+        css`
+            ${unsafeCSS(mdiStyle.default)}
+        `,
+        css`
+            ${unsafeCSS(dialogStyle.default)}
+        `,
     ];
 
     constructor() {
         super();
 
         this.title = "dialog";
     }
-
 }
 
 customElements.define("ui-dialog", Dialog);

components/edit-patch.js

@@ -4,7 +4,7 @@ import * as mdiStyle from "@material-design-icons/font/index.css?inline";
 import * as editPatchStyle from "/styles/components/edit-patch.styl?inline";
 import { LitElement, html, css, unsafeCSS } from "lit";
 
-import State from "/state";
+import State from "/scripts/state";
 
 class EditPatch extends LitElement {
     static properties = {

components/knob.js

@@ -1,6 +1,6 @@
 import { LitElement, html, css, unsafeCSS } from "lit";
 import * as knobStyle from "/styles/components/knob.styl?inline";
-import util from "../util.js";
+import util from "/scripts/util.js";
 
 // TODO: disable ability (cannot be modified)
 // TODO: custom events : input, change
@@ -12,24 +12,23 @@ import util from "../util.js";
 // TODO: improved prompt
 // keyboard support?
 
-window.addEventListener("mousemove", e => {
+window.addEventListener("mousemove", (e) => {
     let currentKnob = window.inputKnob;
     if (!currentKnob) return;
 
     if (!currentKnob.mouseOrigin) currentKnob.mouseOrigin = e.pageY;
 
-    let d = -(e.pageY - currentKnob.mouseOrigin) / 4 * currentKnob.knobSpeed;
+    let d = (-(e.pageY - currentKnob.mouseOrigin) / 4) * currentKnob.knobSpeed;
 
     if (d > currentKnob.maxSpeed) d = currentKnob.maxSpeed;
     else if (d < -currentKnob.maxSpeed) d = -currentKnob.maxSpeed;
 
     currentKnob.mouseOrigin = e.pageY;
     currentKnob.apply(d);
 
-    currentKnob.labelContent =
-        currentKnob.value.toFixed(
-            currentKnob.integerMode ? 0 : 2
-        );
+    currentKnob.labelContent = currentKnob.value.toFixed(
+        currentKnob.integerMode ? 0 : 2,
+    );
 });
 
 window.addEventListener("mouseup", () => {
@@ -44,46 +43,51 @@ class Knob extends LitElement {
 
     static properties = {
         max: {
-            type: Number
+            type: Number,
         },
         min: {
-            type: Number
+            type: Number,
         },
         default: {
-            type: Number
+            type: Number,
         },
         integerMode: {
             attribute: "integer-mode",
-            type: Boolean
+            type: Boolean,
         },
         value: {
-            type: Number
+            type: Number,
         },
         label: {
-            type: String
+            type: String,
         },
         labelContent: {
             type: String,
             state: true,
-            attribute: false
+            attribute: false,
         },
         marker: {
-            type: String
+            type: String,
         },
     };
 
-    static styles = css`${unsafeCSS(knobStyle.default)}`;
+    static styles = css`
+        ${unsafeCSS(knobStyle.default)}
+    `;
 
     render() {
-        return html`
-        <div id="knob">
+        return html` <div id="knob">
             <svg width="50px" height="50px">
                 <g>
                     <circle class="outline"></circle>
-                    <line class="marker" x1="50%" y1="50%"
+                    <line
+                        class="marker"
+                        x1="50%"
+                        y1="50%"
                         x2=${50 + Math.cos(this.deg) * 40 + "%"}
                         y2=${50 + Math.sin(this.deg) * 40 + "%"}
-                        stroke=${this.marker}/>
+                        stroke=${this.marker}
+                    />
                 </g>
             </svg>
             <div class="label">
@@ -109,17 +113,13 @@ class Knob extends LitElement {
     _handleWheel(e) {
         e.preventDefault();
         this.apply(e.deltaY > 0 ? -this.wheelSpeed : this.wheelSpeed);
-        this.labelContent = this.value.toFixed(
-            this.integerMode ? 0 : 2
-        );
+        this.labelContent = this.value.toFixed(this.integerMode ? 0 : 2);
     }
 
     _handleMouseDown() {
         console.log(this.integerMode);
         window.inputKnob = this;
-        this.labelContent = this.value.toFixed(
-            this.integerMode ? 0 : 2
-        );
+        this.labelContent = this.value.toFixed(this.integerMode ? 0 : 2);
     }
 
     _handleMouseLeave() {
@@ -161,8 +161,9 @@ class Knob extends LitElement {
         this.labelContent = this.label;
 
         this.integerMode = false;
-        this.value = this.integerMode ? Math.round(this.#default) :
-            this.default;
+        this.value = this.integerMode
+            ? Math.round(this.#default)
+            : this.default;
 
         // pos is a value that must be between 0 and 100 because this dictates
         // only the position of the knob, and not it's value. this is important
@@ -188,7 +189,7 @@ class Knob extends LitElement {
         else this.pos += d;
 
         if (d !== 0) this.dispatchEvent(this.eventInput);
-        this.deg = (this.pos / 100) * (1.5 * Math.PI) + (0.75 * Math.PI);
+        this.deg = (this.pos / 100) * (1.5 * Math.PI) + 0.75 * Math.PI;
 
         let newValue = util.map(this.pos, 0, 100, this.min, this.max);
         if (this.integerMode) this.value = Math.round(newValue);

components/project-settings-dialog.js

@@ -5,11 +5,11 @@ import * as dialogStyle from "/styles/components/project-settings-dialog.styl?in
 
 import * as scales from "/objects/scales.json";
 
-import State from "/state";
-import SaveManager from "/save-manager";
+import State from "/scripts/state";
+import SaveManager from "/scripts/save-manager";
 import localforage from "localforage";
 
-import { onInputBlur, onInputFocus } from "../keys";
+import { onInputBlur, onInputFocus } from "/scripts/keys";
 
 class ProjectSettingsDialog extends LitElement {
     dialog = createRef();

components/sequencer.js

@@ -3,11 +3,11 @@ import { ref, createRef } from "lit/directives/ref.js";
 
 import * as mdiStyle from "@material-design-icons/font/index.css?inline";
 import * as sequencerStyle from "/styles/components/sequencer.styl?inline";
-import defaultAlgorithms from "../sequence-algorithms.js";
-import util from "../util.js";
 
-import Patch from "../patch.js";
-import { onInputBlur, onInputFocus } from "../keys";
+import defaultAlgorithms from "/scripts/sequence-algorithms.js";
+import util from "/scripts/util.js";
+import Patch from "/scripts/patch.js";
+import { onInputBlur, onInputFocus } from "/scripts/keys";
 
 /**
  * sequencer web component

components/welcome-dialog.js

@@ -4,7 +4,7 @@ import { ref, createRef } from "lit/directives/ref.js";
 import * as dialogStyle from "/styles/components/welcome-dialog.styl?inline";
 import * as themes from "/objects/themes.json";
 
-import State from "/state";
+import State from "/scripts/state";
 import localforage from "localforage";
 
 class WelcomeDialog extends LitElement {

index.html

@@ -16,7 +16,8 @@
             your experience.
             </p>
         <![endif]-->
+        <noscript>blipgrid requires javascript. go to <a href="https://github.com/argarak/blipgrid">project page</a> for more information.</noscript>
         <ui-app></ui-app>
-        <script type="module" src="main.js"></script>
+        <script type="module" src="/scripts/main.js"></script>
     </body>
 </html>

main.js → scripts/main.js

@@ -2,7 +2,6 @@ import "/styles/main.styl";
 import "@ibm/plex/css/ibm-plex.min.css";
 import "@material-design-icons/font";
 
-import "/util.js";
 import "/components/knob.js";
 
 import "/components/dialog.js";

mixer.js → scripts/mixer.js

@@ -1,4 +1,4 @@
-import State from "/state.js";
+import State from "/scripts/state.js";
 import * as Tone from "tone";
 
 class Mixer {
@@ -9,23 +9,33 @@ class Mixer {
 
         this.chorus = new Tone.Chorus({
             wet: 1,
-        }).toDestination().start();
-        this.chorusChannel = new Tone.Channel({ volume: -6 }).connect(this.chorus);
+        })
+            .toDestination()
+            .start();
+        this.chorusChannel = new Tone.Channel({ volume: -6 }).connect(
+            this.chorus,
+        );
 
         this.cheby = new Tone.Chebyshev(50).toDestination();
-        this.chebyChannel = new Tone.Channel({ volume: -6 }).connect(this.cheby);
+        this.chebyChannel = new Tone.Channel({ volume: -6 }).connect(
+            this.cheby,
+        );
 
         this.reverb = new Tone.Reverb(3).toDestination();
-        this.reverbChannel = new Tone.Channel({ volume: -6 }).connect(this.reverb);
+        this.reverbChannel = new Tone.Channel({ volume: -6 }).connect(
+            this.reverb,
+        );
 
         this.delay = new Tone.FeedbackDelay("8n", 0.5).toDestination();
-        this.delayChannel = new Tone.Channel({ volume: -6 }).connect(this.delay);
+        this.delayChannel = new Tone.Channel({ volume: -6 }).connect(
+            this.delay,
+        );
 
         this.effectChannels = [
             { name: "chorus", channel: this.chorusChannel },
             { name: "chebyshev", channel: this.chebyChannel },
             { name: "reverb", channel: this.reverbChannel },
-            { name: "delay", channel: this.delayChannel }
+            { name: "delay", channel: this.delayChannel },
         ];
 
         this.effectSends = [];
@@ -71,9 +81,11 @@ class Mixer {
         }
         this.soloChannel = channel;
 
-        for (let channelIndex = 0;
+        for (
+            let channelIndex = 0;
             channelIndex < this.channels.length;
-            channelIndex++) {
+            channelIndex++
+        ) {
             if (channelIndex === channel) {
                 this.channels[channel].mute = false;
                 this.sequencer.setSolo(channel, true);
@@ -86,9 +98,11 @@ class Mixer {
     }
 
     unmuteAll() {
-        for (let channelIndex = 0;
+        for (
+            let channelIndex = 0;
             channelIndex < this.channels.length;
-            channelIndex++) {
+            channelIndex++
+        ) {
             this.channels[channelIndex].mute = false;
             this.sequencer.setMute(channelIndex, false);
             this.sequencer.setSolo(channelIndex, false);

patch.js → scripts/patch.js

@@ -1,5 +1,5 @@
 import * as Tone from "tone";
-import State from "/state";
+import State from "/scripts/state";
 
 import * as moduleControls from "/objects/module-controls.json";
 

save-manager.js → scripts/save-manager.js

@@ -1,4 +1,4 @@
-import State from "/state";
+import State from "/scripts/state";
 import localforage from "localforage";
 
 class SaveManager {