From 22e2378da2f390db6dd604b4797609949ca4b186 Mon Sep 17 00:00:00 2001
From: Daniel Svitan <daniel.svitan.team7274dev@gmail.com>
Date: Mon, 4 Mar 2024 21:49:25 +0100
Subject: [PATCH] :bug: Fixes spacing on playground

---
 .gitignore                  | 1 +
 src/components/Settings.vue | 4 ++--
 src/composables/options.ts  | 7 +++++--
 src/pages/Playground.vue    | 8 ++++----
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/.gitignore b/.gitignore
index da9fd00..ae3ba44 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,4 @@ package-lock.json
 .vscode/
 .firebaserc
 firebase.json
+*.cache
diff --git a/src/components/Settings.vue b/src/components/Settings.vue
index d383e34..ecf0ac8 100644
--- a/src/components/Settings.vue
+++ b/src/components/Settings.vue
@@ -16,7 +16,7 @@
     <label for="spacing" class="text-emerald-100">Spacing:</label>
 
     <select
-      v-model="spacing"
+      v-model="stringSpacing"
       name="spacing"
       id="spacing"
       class="text-emerald-100 bg-transparent"
@@ -49,7 +49,7 @@
 </template>
 
 <script setup lang="ts">
-import { fill, openSettings, spacing } from "../composables/options.ts";
+import { fill, openSettings, stringSpacing } from "../composables/options.ts";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
diff --git a/src/composables/options.ts b/src/composables/options.ts
index 0eb5429..48dd889 100644
--- a/src/composables/options.ts
+++ b/src/composables/options.ts
@@ -1,10 +1,13 @@
 import { computed, ref } from "vue";
 
 export const openSettings = ref(false);
-export const spacing = ref("4");
+export const stringSpacing = ref("4");
 export const fill = ref(true);
+export const spacing = computed(() => {
+  return parseInt(stringSpacing.value);
+});
 export const options = computed(() => ({
-  spacing: +spacing.value,
+  spacing: spacing.value,
   fill: fill.value,
   prefix: undefined,
 }));
diff --git a/src/pages/Playground.vue b/src/pages/Playground.vue
index c0982b9..442d901 100644
--- a/src/pages/Playground.vue
+++ b/src/pages/Playground.vue
@@ -13,11 +13,11 @@
 
       <div v-if="!forward" class="flex flex-row-reverse gap-x-2 h-[2.375rem]">
         <div
-          v-for="i in 24 / +spacing"
+          v-for="i in 24 / spacing"
           class="flex flex-row-reverse items-end gap-x-1 border-b-[0.375rem] border-b-emerald-100 border-solid w-fit rounded-md"
         >
           <button
-            v-for="j in +spacing"
+            v-for="j in spacing"
             @click="setBit(i, j)"
             :data-bit="(number & (2 ** (i * 4 + j))).toString()"
             :class="`w-2 ${getBit(i, j) ? 'h-8' : 'h-3'} bg-emerald-100 rounded-t-full`"
@@ -51,11 +51,11 @@ const number = ref(0);
 const forward = ref(true);
 
 function getBit(i: number, j: number) {
-  return number.value & (2 ** ((i - 1) * 4 + j - 1));
+  return number.value & (2 ** ((i - 1) * spacing.value + j - 1));
 }
 
 function setBit(i: number, j: number) {
-  number.value ^= 2 ** ((i - 1) * 4 + j - 1);
+  number.value ^= 2 ** ((i - 1) * spacing.value + j - 1);
 }
 
 function swap() {