first working number scaling

vue3/src/components/display/ScalableNumber.vue

@@ -0,0 +1,25 @@
+<template>
+  <span class="step__scalable-num" :class="[this.factor===1 ? 'step__scalable-num_scaled_false' : (this.factor > 1 ? 'step__scalable-num_scaled_up':'step__scalable-num_scaled_down')]" v-html="calculateAmount(number)"></span>
+</template>
+
+<script>
+
+
+import {calculateFoodAmount} from "@/utils/number_utils.ts";
+
+export default {
+  name: 'ScalableNumber',
+  props: {
+    number: Number,
+    factor: {
+      type: Number,
+      default: 4
+    },
+  },
+  methods: {
+    calculateAmount: function (x) {
+      return calculateFoodAmount(x, this.factor)
+    }
+  }
+}
+</script>