From 20327fcfa6e2cacf6c5dd1a9a718684bf83ae10d Mon Sep 17 00:00:00 2001
From: fillotassi <fabio.bernardi32@gmail.com>
Date: Tue, 18 Sep 2018 13:20:16 +0200
Subject: [PATCH] Compute pulseWidth of 285ms sample

---
 components/beat.vue      | 15 +++++++--------
 components/sequencer.vue |  6 +++++-
 pages/index.vue          |  3 ++-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/components/beat.vue b/components/beat.vue
index 3a0c6e2..a5a0b6f 100644
--- a/components/beat.vue
+++ b/components/beat.vue
@@ -4,16 +4,17 @@
       <!--- 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 }" style="max-width:1em"></div>
+          <div class="suddivisione-content" :style="{'background-color': colore, 'width': calculatePulseSize(1) }"></div>
         </div>
     </div>
   </div>
 </template>
 <script>
     export default {
-      name: 'beat',
+      props: [ 'id', 'line' ],
       data() {
         return {
+          sampleLengths: [285, 110, 175, 560],
           nome:'',
           colore: 'red',
           divisioni: 1,
@@ -29,6 +30,10 @@
       methods: {
         titolo(progressivo){
           this.nome = "nomeBeat" + progressivo;
+        },
+        calculatePulseSize(i) {
+          var pulseSize = ((this.sampleLengths[i]/this.line.sequenceMilliseconds)*100) + "vw";
+          return pulseSize;
         }
     }
     }
@@ -56,12 +61,6 @@ input {
   display: flex;
 }
 
-
-.suddivisione-content{
-  flex:1 1 auto;
-  border:none;
-}
-
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
diff --git a/components/sequencer.vue b/components/sequencer.vue
index 0200cc0..23ee5fa 100644
--- a/components/sequencer.vue
+++ b/components/sequencer.vue
@@ -19,7 +19,7 @@
     </div>
     <div class="sequencerLine">
         <div class="slot" v-for="(slot, slotid) in euclideanList" :key="slotid">
-          <beat :id="'slot'+slotid" v-if="slot === 1"></beat>
+          <beat :id="'slot'+slotid" :line="line" v-if="slot === 1"></beat>
           <div v-else class="emptySlot"></div>
         </div>
     </div>
@@ -178,6 +178,10 @@
   background:white;
 }
 
+.option-icon:hover{
+  background-color: cadetblue;
+}
+
 #icon-slots{
   background-image: url("~/assets/img/squares.png");
   background-repeat: no-repeat;
diff --git a/pages/index.vue b/pages/index.vue
index 08c074a..4f88e72 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -45,7 +45,8 @@ export default {
         slotSlider: 16,
         pulseSlider: 3,
         euclideanList: [],
-        barOpacity:1
+        barOpacity:1,
+        sequenceMilliseconds:3600
       });
     },
     getSequencerData: function(){