Add sampleType selection

components/beat.vue

@@ -4,7 +4,7 @@
       <!--- trovare modo per prevenire scrittura di input-->
       <div class="division-wrapper">
         <div class="suddivisione-wrapper" v-for="j in nDivisioni" :key='j' :id="'suddivisione'+j"  >
-          <div class="suddivisione-content" :style="{'background-color': colore, 'width': calculatePulseSize(1) }"></div>
+          <div class="suddivisione-content" :style="{'background-color': colore, 'width': calculatePulseSize(line.sampleType) }"></div>
         </div>
     </div>
   </div>

components/sequencer.vue

@@ -6,7 +6,12 @@
         <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="sampleType-wrapper">
+            <div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(1)"></div>
+            <div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(2)"></div>
+            <div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(3)"></div>
+            <div class="option-icon" id="icon-sample" @click="makeFirstChild(), selectSampleType(4)"></div>
+          </div>
           <div class="option-icon" id="icon-delete"></div>
         </div>
         <div class="sequence-bar">
@@ -80,6 +85,12 @@
           this.barOpacity = 1;
           console.log("fullOPacity");
         },
+        makeFirstChild: function (){
+        },
+        selectSampleType: function (number){
+          this.line.sampleType = number;
+          console.log(number);
+        },
         bjorklund: function (slots, pulses) {
 
       var pattern = [],
@@ -221,7 +232,7 @@
   position: absolute;
   margin-left:3em;
   display: flex;
-  overflow-x: auto;
+  /*overflow-x: auto;*/
 }
 
 .sequence-bar{
@@ -247,6 +258,14 @@
   display: none;
 }
 
+.sampleType-wrapper > .option-icon:not(:nth-child(1)){
+  display: none;
+}
+
+.sampleType-wrapper:hover > .option-icon{
+  display: block;
+}
+
 .sequencer{
   display:flex;
 }

pages/index.vue

@@ -46,7 +46,8 @@ export default {
         pulseSlider: 3,
         euclideanList: [],
         barOpacity:1,
-        sequenceMilliseconds:3600
+        sequenceMilliseconds:3600,
+        sampleType:1
       });
     },
     getSequencerData: function(){