Gadgety_Euclidean_Sequencer_Web_Interface/components/sequencer.vue

<template>
  <section class="sequencer" v-on:mouseover="displayControls()" v-on:mouseleave="hideControls()" >
    <div class="sequencerLine">
      <div class="slot-wrapper">
        <div class="slot" v-for="i in slotSlider" :key='i' >
          <beat v-if="euclideanList[i] === 1"></beat>
          <div v-else class="activeSlot"></div>
        </div>
      </div>
    </div>
    <div>
      <div class="control-menu" :class="[{'displayControls': controlIsDisplayed}]">
        <range-slider class="slider" min="1" :max="maxSlots" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
        <input id="pulseSlider" v-model="maxSlots" />
        <range-slider class="slider"  min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:input  ="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
        <input id="pulseSlider" value="3" v-model="assignBeat" />
      </div>
<!---
        <div style="background-color:firebrick">
          <input type="range" class="slider" min="1" max="32" step="1" v-model="slotSlider" v-on:change="assignEuclidean(slotSlider, pulseSlider)" />
          <input type="range" class="slider" min="1" :max="slotSlider" step="1" v-model="pulseSlider" v-on:change="assignEuclidean(slotSlider, pulseSlider)" />
        </div>
-->
    </div>
  </section>
</template>

<script>
    import RangeSlider from 'vue-range-slider'
    // you probably need to import built-in style
    import 'vue-range-slider/dist/vue-range-slider.css'
    import beat from '~/components/beat.vue'

    export default {
      data() {
          return{
            slotSlider: 16,
            pulseSlider: 3,
            euclideanList:[],
            controlIsDisplayed:false
          }
      },
      components: {
        RangeSlider,
        beat
      },
      methods: {
        displayControls: function (){
          this.controlIsDisplayed = true;
        },
        hideControls: function (){
          this.controlIsDisplayed = false;
        },
        bjorklund: function (slots, pulses) {

      var pattern = [],
        count = [],
        remainder = [pulses],
        divisor = slots - pulses,
        level = 0,
        build_pattern = function(lv) {
          if (lv == -1) {
            pattern.push(0);
          } else if (lv == -2) {
            pattern.push(1);
          } else {
            for (var x = 0; x < count[lv]; x++) {
              build_pattern(lv - 1);
            }

            if (remainder[lv]) {
              build_pattern(lv - 2);
            }
          }
        }
      while (remainder[level] > 1) {
        count.push(Math.floor(divisor / remainder[level]));
        remainder.push(divisor % remainder[level]);
        divisor = remainder[level];
        level++;
      }
      count.push(divisor);

      build_pattern(level);

      return pattern.reverse();},
      assignEuclidean: function (a,b) {
        this.euclideanList = this.bjorklund(a,b);
        console.log(this.euclideanList);
      }
      }
    }
</script>

<style>
.container {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}

.active{
  background-color:black;
  width:100%;
  height:40%
}

.control-menu{
  display: none;
}

.slider{
  width:30%;
}

.displayControls{
  display:flex !important;
}

.slot-wrapper{
  display:flex;
  height:3em;
  width:auto;
  background-color:firebrick;
}

.slot{
  flex:1 1 auto;
  background-color:beige;
  border-left:1pt solid aquamarine;
  border-right:1pt solid aquamarine;
  border-top: transparent !important;
  border-bottom: transparent !important;
}

.activeSlot{
  flex:1 1 auto;
  display: flex;
  flex-direction: column;
}
</style>