Refactor keg component.

src/components/Beer.vue

@@ -82,7 +82,7 @@
   position:relative;
   align-items: center;
   flex-direction: column;
-  
+
   .content-wrapper {
     padding: 36px 88px 0px 88px;
   }

src/components/Keg.vue

@@ -7,7 +7,7 @@
         <img src="./../assets/keg-front.png" class="front"/>
       </v-flex>
       <v-flex md7>
-        <div class="percent" :style="{ color }"><span>BEER LEVEL</span><br>{{ rounded }}%</div> 
+        <div class="percent" :style="{ color }"><span>BEER LEVEL</span><br>{{ percent | round }}%</div>
       </v-flex>
     </v-layout>
   </div>
@@ -29,13 +29,13 @@
 
 .keg .front {
   z-index: 2;
-  width: 320px; 
+  width: 320px;
   position: relative;
 }
 
 .keg .back{
   z-index: 0;
-  width: 320px; 
+  width: 320px;
   position: absolute;
 }
 
@@ -68,7 +68,7 @@ svg g {
   bottom: 0;
   width: 100%;
   height: 100%;
-  position: absolute;  
+  position: absolute;
 }
 
 .percent {
@@ -105,16 +105,8 @@ const Y = 20;
 export default {
   data: () => ({
     width: WIDTH,
-    height: HEIGHT,
     x: X,
     y: Y,
-    // values: ```
-    // 1 0 0 0 0
-    // 0 1 0 0 0
-    // 0 0 1 0 0
-    // 0 0 0 1 0
-    // ```,
-    color: '#00FF00',
   }),
   props: {
     percent: {
@@ -123,39 +115,35 @@ export default {
     },
   },
   computed: {
-    rounded() {
-      return Math.round(this.percent);
+    /*
+    values:
+    1 0 0 0 0
+    0 1 0 0 0
+    0 0 1 0 0
+    0 0 0 1 0
+     */
+    color() {
+      return perc2color(this.percent);
     },
-  },
-  watch: {
-    percent: {
-      handler: function(p) {
-        const height = HEIGHT * (p / 100);
-        this.height = height;
-        this.y = HEIGHT + Y - this.height;
-
-        this.color = perc2color(p);
-
-        // this.$forceUpdate();
-      },
-      immediate: true,
+    height() {
+      return HEIGHT * this.percent / 100;
     },
-  }
+  },
 }
 
 function perc2color(perc) {
-	let r = 0;
-	let g = 0;
-	const b = 55;
-	if(perc < 50) {
-		r = 255;
-		g = Math.round(5.1 * perc);
-	}
-	else {
-		g = 255;
-		r = Math.round(355 - 2.0 * perc);
-	}
-	const h = r * 0x10000 + g * 0x100 + b * 0x1;
-	return '#' + ('000000' + h.toString(16)).slice(-6);
+  let r = 0;
+  let g = 0;
+  const b = 55;
+  if(perc < 50) {
+    r = 255;
+    g = Math.round(5.1 * perc);
+  }
+  else {
+    g = 255;
+    r = Math.round(355 - 2.0 * perc);
+  }
+  const h = r * 0x10000 + g * 0x100 + b * 0x1;
+  return '#' + ('000000' + h.toString(16)).slice(-6);
 }
 </script>

src/filters.js

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+Vue.filter('round', Math.round);

src/main.js

@@ -2,6 +2,7 @@ import '@babel/polyfill'
 import axios from 'axios';
 import Vue from 'vue'
 import VueParticles from 'vue-particles';
+import './filters';
 import './plugins/vuetify'
 import App from './App.vue'
 import './registerServiceWorker'
@@ -17,11 +18,11 @@ new Vue({
   render: h => h(App),
   beforeCreate() {
     this.$store.commit('initialiseStore');
-    
+
     this.$store.subscribe((mutation, state) => {
       // Store the state object as a JSON string
       localStorage.setItem('store', JSON.stringify(state));
     });
-    
+
 	}
 }).$mount('#app');