Merge pull request #1 from holodan/release/1.0.0

Release/1.0.0

Author: aagentah

package-lock.json

@@ -24,6 +24,7 @@
     "just-detect-adblock": "1.1.0",
     "lodash": "4.17.10",
     "nexusui": "2.1.6",
+    "tippy.js": "6.3.7",
     "tone": "14.8.35"
   },
   "devDependencies": {

package.json

@@ -5,13 +5,14 @@ import Cookies from 'js-cookie';
 import Main from './Main';
 import Sequencer from './Sequencer';
 import Controls from './Controls';
-import Signal from './Signal';
+import Instrument from './Instrument';
 import Effects from './Effects';
 import Audio from './Audio';
 
 import * as backup from '../data/backup.json';
 
 import { fetchAsync } from '../utils/fetchAsync';
+import { isMobile } from '../utils/isMobile';
 
 const Asteroid = {
   elem: document.querySelector('.intro__wrapper'),
@@ -169,68 +170,68 @@ const Asteroid = {
 
   renderInfo(i) {
     let html = `
-          <div class="flex  flex-wrap  pb3  mb3  bb  bc-black">
+          <div class="flex  flex-wrap  pb3  mb3  bb  bc-black  f6">
             Asteroid's Data:
           </div>
           <div class="flex  flex-wrap">
             <div class="w-100">
-              <div class="flex  flex-wrap  pb2">
+              <div class="flex  flex-wrap  pb0  pb2-md">
                 <div class="col-12">
-                  <span class="fw7">Name:</span>
+                  <span class="f7  f6-md  fw7">Name:</span>
                 </div>
                 <div class="col-12  intro__statistic">
                   ${Asteroid.selected.name}
                 </div>
               </div>
 
-              <div class="flex  flex-wrap  pb2">
+              <div class="flex  flex-wrap  pb0  pb2-md">
                 <div class="col-12">
-                  <span class="fw7">Potentially Dangerous:</span>
+                  <span class="f7  f6-md  fw7"><span class="dn  di-md">Potentially</span> Dangerous:</span>
                 </div>
                 <div class="col-12  intro__statistic">
                   ${Asteroid.selected.hazardous}
                 </div>
               </div>
 
-              <div class="flex  flex-wrap  pb2">
+              <div class="flex  flex-wrap  pb0  pb2-md">
                 <div class="col-12">
-                  <span class="fw7">Close Approach Date:</span>
+                  <span class="f7  f6-md  fw7"><span class="dn  di-md">Close</span> Approach Date:</span>
                 </div>
                 <div class="col-12  intro__statistic">
                   ${Asteroid.selected.close_approach_date}
                 </div>
               </div>
 
-              <div class="flex  flex-wrap  pb2">
+              <div class="flex  flex-wrap  pb0  pb2-md">
                 <div class="col-12">
-                  <span class="fw7">Orbiting Body:</span>
+                  <span class="f7  f6-md  fw7">Orbiting Body:</span>
                 </div>
                 <div class="col-12  intro__statistic">
                   ${Asteroid.selected.orbiting_body}
                 </div>
               </div>
 
-              <div class="flex  flex-wrap  pb2">
+              <div class="flex  flex-wrap  pb0  pb2-md">
                 <div class="col-12">
-                  <span class="fw7">Est. Diamater (km):</span>
+                  <span class="f7  f6-md  fw7">Est. Diamater (km):</span>
                 </div>
                 <div class="col-12  intro__statistic">
                   ${Asteroid.selected.diameter}
                 </div>
               </div>
 
-              <div class="flex  flex-wrap  pb2">
+              <div class="flex  flex-wrap  pb0  pb2-md">
                 <div class="col-12">
-                  <span class="fw7">Miss Distance (km):</span>
+                  <span class="f7  f6-md  fw7">Miss Distance (km):</span>
                 </div>
                 <div class="col-12  intro__statistic">
                   ${Asteroid.selected.miss_distance}
                 </div>
               </div>
 
-              <div class="flex  flex-wrap  pb2">
+              <div class="flex  flex-wrap  pb0  pb2-md">
                 <div class="col-12">
-                  <span class="fw7">Relatice Velocity (mph):</span>
+                  <span class="f7  f6-md  fw7"><span class="dn  di-md">Relative</span> Velocity (mph):</span>
                 </div>
                 <div class="col-12  intro__statistic">
                 ${Asteroid.selected.velocity}
@@ -297,11 +298,11 @@ const Asteroid = {
       let key;
       let multitude;
 
-      octave = Math.floor(i / Signal.instrumentTypes.length);
-      multitude = octave * Signal.instrumentTypes.length;
+      octave = Math.floor(i / Instrument.instrumentTypes.length);
+      multitude = octave * Instrument.instrumentTypes.length;
       key = i - multitude;
 
-      Signal.instrumentSelect.value = Signal.instrumentTypes[key];
+      Instrument.instrumentSelect.value = Instrument.instrumentTypes[key];
     };
 
     for (let i = 0; i < Effects.data.length; i++) {
@@ -317,11 +318,11 @@ const Asteroid = {
 
   eventListener() {
     let selectsHtml = `
-      <div class="flex  flex-wrap  pb3  mb3  bb  bc-black">
+      <div class="flex  flex-wrap  pb3  mb3  bb  bc-black  f6">
         Select a real-world asteroid:
       </div>
       <div class="flex  flex-wrap">
-        <div id="asteroids" class="col-12  intro__statistic"></div>
+        <div id="asteroids" class="intro__statistic"></div>
       </div>
     `;
 
@@ -345,9 +346,16 @@ const Asteroid = {
     Asteroid.asteroidBeginElem.insertAdjacentHTML('beforeend', buttonHtml);
 
     const beginEl = document.querySelector('#begin');
+    const selectWidth = isMobile() ? 200 : 300;
+    const selectHeight = isMobile() ? 20 : 30;
 
     const asteroidSelect = new Nexus.Select('#asteroids', {
-      size: [300, 30],
+      size: [selectWidth, 30],
+      options: Asteroid.asteroids.map(e => e.name)
+    });
+
+    const asteroidSelectChange = new Nexus.Select('#asteroids-change', {
+      size: [150, selectHeight],
       options: Asteroid.asteroids.map(e => e.name)
     });
 
@@ -361,6 +369,11 @@ const Asteroid = {
       Asteroid.renderInfo(e.index);
     });
 
+    asteroidSelectChange.on('change', e => {
+      Asteroid.selected = Asteroid.asteroids[e.index];
+      Asteroid.renderInfo(e.index);
+    });
+
     // midiSelect.on('change', e => {
     //   const selected = Asteroid.midiSequences[e.index];
     //   Controls.resetControls();
@@ -377,18 +390,21 @@ const Asteroid = {
           return;
         }
 
-        Main.wrapper.classList.add('active');
         Asteroid.elem.classList.remove('active');
 
         setTimeout(() => {
+          // Hide intro
           Asteroid.elem.classList.remove('flex');
           Asteroid.elem.classList.add('dn');
-        }, 300);
 
-        Sequencer.renderNotes();
-        Controls.renderControls();
+          // Show new elements
+          Main.wrapper.classList.add('active');
 
-        Asteroid.hasOpened = true;
+          Sequencer.renderNotes();
+          Controls.renderControls();
+
+          Asteroid.hasOpened = true;
+        }, 300);
       },
       false
     );

src/static/images/logo-text-beta.png

@@ -6,12 +6,15 @@ import _ from 'lodash';
 
 import Controls from './Controls';
 import Effects from './Effects';
-import Signal from './Signal';
+import Instrument from './Instrument';
+import Envelope from './Envelope';
 
 const Audio = {
   lookAhead: 0.5,
   instruments: {},
   effect: {},
+  noteLength: 2000, // 120 BPM
+  tempo: 120,
 
   setContext() {
     const context = new Tone.Context({
@@ -23,11 +26,21 @@ const Audio = {
     Tone.setContext(context);
   },
 
+  updateTempo(v) {
+    const minute = 60000;
+    const tempo = v;
+    const quarterNote = minute / tempo;
+    const fullNote = quarterNote * 4;
+
+    Audio.tempo = tempo;
+    Audio.noteLength = fullNote;
+  },
+
   setInstruments() {
     let instrument;
 
-    for (let i = 0; i < Signal.instrumentTypes.length; i++) {
-      instrument = Signal.instrumentTypes[i];
+    for (let i = 0; i < Instrument.instrumentTypes.length; i++) {
+      instrument = Instrument.instrumentTypes[i];
       Audio.instruments[instrument] = Tone[instrument];
     }
   },
@@ -78,14 +91,14 @@ const Audio = {
 
     // Play tone
     const synth = new Tone.PolySynth(
-      Audio.instruments[Signal.currentInstrument]
+      Audio.instruments[Instrument.currentInstrument]
     );
 
-    const durationSecs = Controls.noteLength / 1000;
+    const durationSecs = Audio.noteLength / 1000;
     const divideBy = (divide, by) => divide / by;
-    const attackSecs = divideBy(Signal.envAttack, 1) * Signal.envHold;
-    const holdSecs = Signal.envHold;
-    const releaseSecs = divideBy(Signal.envRelease, 1) * Signal.envHold;
+    const attackSecs = divideBy(Envelope.envAttack, 1) * Envelope.envHold;
+    const holdSecs = Envelope.envHold;
+    const releaseSecs = divideBy(Envelope.envRelease, 1) * Envelope.envHold;
     const envelope = { attack: attackSecs, release: releaseSecs };
     const attackRelease = attackSecs + holdSecs + releaseSecs;
 

src/static/images/logo-text.png

@@ -8,24 +8,18 @@ import Audio from './Audio';
 import Sequencer from './Sequencer';
 import Record from './Record';
 
+import { isMobile } from '../utils/isMobile';
+
 const Controls = {
   startEl: document.querySelector('#start'),
   stopEl: document.querySelector('#stop'),
   recordEl: document.querySelector('#record'),
   resetEl: document.querySelector('#reset'),
-  tempo: 120,
-  noteLength: 2000, // 120 BPM
-
-  updateTempo(v) {
-    const minute = 60000;
-    const tempo = v;
-    const quarterNote = minute / tempo;
-    const fullNote = quarterNote * 4;
-
-    Controls.tempo = tempo;
-    Controls.noteLength = fullNote;
-    Sequencer.interval.ms(Controls.noteLength);
-  },
+  sequencer: document.querySelector('.sequencer__notes__wrapper'),
+  effectsToggle: document.querySelectorAll('.effects-toggle'),
+  effectsWrapper: document.querySelector('.effects__fx'),
+  envelopeToggle: document.querySelectorAll('.envelope-toggle'),
+  envelopeWrapper: document.querySelector('.effects__envelope'),
 
   playControls: async () => {
     if (Sequencer.isRunning) {
@@ -35,9 +29,9 @@ const Controls = {
     await Tone.start();
     Nexus.context.resume();
     Sequencer.isRunning = true;
+    Sequencer.restartInterval();
     Controls.recordEl.classList.add('disabled');
     Controls.startEl.classList.add('disabled');
-    Sequencer.interval.start();
   },
 
   recordControls: async () => {
@@ -46,6 +40,7 @@ const Controls = {
     }
 
     const recorder = new Tone.Recorder();
+
     Tone.getContext().destination.connect(recorder);
     recorder.start();
     Controls.playControls();
@@ -58,9 +53,9 @@ const Controls = {
     }
 
     Sequencer.isRunning = false;
+    Sequencer.destroyInterval();
     Controls.recordEl.classList.remove('disabled');
     Controls.startEl.classList.remove('disabled');
-    Sequencer.interval.stop();
 
     for (let i = 0; i < 10; i++) {
       if (Sequencer.sequencer.stepper.value !== 0) Sequencer.sequencer.next();
@@ -87,19 +82,21 @@ const Controls = {
   },
 
   renderControls() {
+    const tempoHeight = isMobile() ? 20 : 30;
+
     const number = new Nexus.Number('#tempo', {
-      size: [120, 30],
-      value: Controls.tempo,
+      size: [120, tempoHeight],
+      value: Audio.tempo,
       min: 30,
-      max: 200,
+      max: 300,
       step: 1
     });
 
     number.colorize('accent', '#505483');
     number.colorize('fill', '#d8dada');
 
     number.on('change', v => {
-      Controls.updateTempo(v);
+      Audio.updateTempo(v);
     });
 
     Controls.startEl.addEventListener(
@@ -114,6 +111,18 @@ const Controls = {
       false
     );
 
+    document.body.onkeyup = e => {
+      if (e.keyCode == 32) {
+        e.preventDefault();
+
+        if (Sequencer.isRunning) {
+          Controls.stopControls();
+        } else {
+          Controls.playControls();
+        }
+      }
+    };
+
     Controls.resetEl.addEventListener(
       'click',
       () => Controls.resetControls(),
@@ -125,6 +134,26 @@ const Controls = {
       () => Controls.recordControls(),
       false
     );
+
+    for (let i = 0; i < Controls.effectsToggle.length; i++) {
+      Controls.effectsToggle[i].addEventListener(
+        'click',
+        () => {
+          Controls.effectsWrapper.classList.toggle('active');
+        },
+        false
+      );
+    }
+
+    for (let i = 0; i < Controls.envelopeToggle.length; i++) {
+      Controls.envelopeToggle[i].addEventListener(
+        'click',
+        () => {
+          Controls.envelopeWrapper.classList.toggle('active');
+        },
+        false
+      );
+    }
   }
 };