From 8e6a2a3e4601eff87e18c729358669d817d041b1 Mon Sep 17 00:00:00 2001
From: fillotassi <fabio.bernardi32@gmail.com>
Date: Tue, 18 Sep 2018 20:11:38 +0200
Subject: [PATCH] Add sampleType selection

---
 components/beat.vue      |  2 +-
 components/sequencer.vue | 23 +++++++++++++++++++++--
 pages/index.vue          |  3 ++-
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/components/beat.vue b/components/beat.vue
index a5a0b6f..4dafdd3 100644
--- a/components/beat.vue
+++ b/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>
diff --git a/components/sequencer.vue b/components/sequencer.vue
index 23ee5fa..b3b400a 100644
--- a/components/sequencer.vue
+++ b/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;
 }
diff --git a/pages/index.vue b/pages/index.vue
index 4f88e72..c19bcc5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -46,7 +46,8 @@ export default {
         pulseSlider: 3,
         euclideanList: [],
         barOpacity:1,
-        sequenceMilliseconds:3600
+        sequenceMilliseconds:3600,
+        sampleType:1
       });
     },
     getSequencerData: function(){