Gadgety_Euclidean_Sequencer_Web_Interface/components/sequencer.vue

<template>
  <section class="sequencer" v-on:mouseover="displayControls()" v-on:mouseleave="hideControls()" >
    <!--<span class="sequence-controls-wrapper">-->
    <div class="options-wrapper">
      <div class="control-bar">
        <div class="sequence-options">
          <div class="option-icon" id="icon-slots"></div>
          <div class="option-icon" id="icon-euclid"></div>
          <div class="option-icon" id="icon-sample"></div>
          <div class="option-icon" id="icon-delete"></div>
        </div>
        <div class="sequence-bar">
          <range-slider class="slider" min="1" step="1" v-model="slotSlider" v-on:input="assignEuclidean(slotSlider, pulseSlider)" ></range-slider>
          <input id="pulseSlider"/>
          <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" />
        </div>
      </div>
    </div>
    <div class="sequencerLine">
        <div class="slot" v-for="(slot, slotid) in euclideanList" :key="slotid">
          <beat :id="'slot'+slotid" v-if="slot === 1"></beat>
          <div v-else class="emptySlot"></div>
        </div>
    </div>
  <!--<</span>-->
    <div>
      <!--<div class="control-menu" style="margin-top:5em;" :class="[{'displayControls': controlIsDisplayed}]">-->
      <div class="control-menu" style="margin-top:5em;">
      </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 {
      props: [ 'line' ],
      data() {
          // return {
          //   id: line.id,
          //   slotSlider: line.slotSlider,
          //   pulseSlider: line.pulseSlider,
          //   euclideanList: line.euclideanList,
          //   controlIsDisplayed: line.controlIsDisplayed
          // };
          this.line.euclideanList = this.bjorklund(this.line.slotSlider, this.line.pulseSlider);
          return this.line;
      },
      components: {
        RangeSlider,
        beat
      },
      methods: {
        displayControls: function (){
          this.controlIsDisplayed = true;
        },
        hideControls: function (){
          this.controlIsDisplayed = false;
        }
        /*,
        barOpacity: function (){
          this.setOpacity = true;
        }*/,
        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);
      }
      }
    }
</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;
}

.displayControls{
  display:flex !important;
}

.sequence-options{
  width:auto;
  height: 3em;
  z-index: 2;
  background-color: red;
  display: none;
}

.option-icon{
  width:3em;
  height: 3em;
  background:white;
}

#icon-slots{
  background-image: url("~/assets/img/squares.png");
  background-repeat: no-repeat;
  background-position: center;
}

#icon-euclid{
  background-image: url("~/assets/img/pixel.png");
  background-repeat: no-repeat;
  background-position: center;
}

#icon-sample{
  background-image: url("~/assets/img/bell.png");
  background-repeat: no-repeat;
  background-position: center;
}

#icon-delete{
  background-image: url("~/assets/img/close.png");
  background-repeat: no-repeat;
  background-position: center;
}

.options-wrapper{
  background-color: darkgoldenrod;
  width:3em;
  height: 3em;
  display:flex;
  background-image: url("~/assets/img/squares.png");
  background-repeat: no-repeat;
  background-position: center;
  z-index: 2;
}
.options-wrapper:hover > .control-bar > .sequence-options{
  display:block;
  position: absolute;
  margin-left:3em;
  display: flex;
  overflow-x: auto;
}

.sequence-bar{
  display:none;
}

.options-wrapper:hover > .control-bar > .sequence-options + .sequence-bar{
  display: block;
  flex:1 1 100%;
  background: blue;
  overflow-x: auto;
  position: absolute;
  width:100%;
  margin-left:15em;
  height:3em;
}

.options-menu{
  width:5em;
  height: 3em;
  z-index: 1;
  background-color: dimgrey;
  display: none;
}

.sequencer{
  display:flex;
}

.sequencerLine{
    display:flex;
    height:3em;
    width:100%;
    background-color:firebrick;
}

.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>