From 180faecddf3a712918fcbc081eb7d15a242dda6b Mon Sep 17 00:00:00 2001
From: Daniel Svitan <daniel.svitan.team7274dev@gmail.com>
Date: Mon, 4 Mar 2024 18:42:30 +0100
Subject: [PATCH] :bug: Fixes type error

---
 .gitignore  |  2 ++
 src/App.vue | 18 +++++++++---------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index 7975c0f..da9fd00 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,5 @@ dist-ssr
 bun.lockb
 package-lock.json
 .vscode/
+.firebaserc
+firebase.json
diff --git a/src/App.vue b/src/App.vue
index afd4d00..3939249 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,16 +17,11 @@
 
       <div v-if="problem" class="flex">
         <div class="flex items-end justify-center flex-col h-full gap-y-2 p-2">
-          <Number
-            :number="problem.a"
-            :options="{ spacing: +spacing, fill: fill }"
-            class="mx-2"
-          />
+          <Number :number="problem.a" :options="options" class="mx-2" />
           <Number
             :number="problem.b"
             :options="{
-              spacing: +spacing,
-              fill: fill,
+              ...options,
               prefix: problem.operator,
             }"
             class="mx-2"
@@ -37,7 +32,7 @@
           <Number
             :data-shown="shown"
             :number="problem.answer"
-            :options="{ spacing: +spacing, fill: fill }"
+            :options="options"
             class="mx-2 data-[shown=false]:opacity-0"
           />
         </div>
@@ -93,7 +88,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { computed, onMounted, ref } from "vue";
 import { levels, Problem } from "./composables/levels.ts";
 import Number from "./components/Number.vue";
 
@@ -104,6 +99,11 @@ const shown = ref(false);
 const openSettings = ref(false);
 const spacing = ref("4");
 const fill = ref(true);
+const options = computed(() => ({
+  spacing: +spacing.value,
+  fill: fill.value,
+  prefix: undefined,
+}));
 
 function next() {
   problem.value = levels[level.value].generate();