Compute pulseWidth of 285ms sample

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;

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;

pages/index.vue

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