Streamer272/binary
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛 Fixes spacing on playground

Browse Source
This commit is contained in:
Daniel Svitan 2024-03-04 21:49:25 +01:00
parent 39b3d2711c
commit 22e2378da2
4 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -28,3 +28,4 @@ package-lock.json
.vscode/ .vscode/
.firebaserc .firebaserc
firebase.json firebase.json
*.cache

4
src/components/Settings.vue
View File

@ -16,7 +16,7 @@
<label for="spacing" class="text-emerald-100">Spacing:</label> <label for="spacing" class="text-emerald-100">Spacing:</label>
<select <select
v-model="spacing" v-model="stringSpacing"
name="spacing" name="spacing"
id="spacing" id="spacing"
class="text-emerald-100 bg-transparent" class="text-emerald-100 bg-transparent"
@ -49,7 +49,7 @@
</template> </template>
<script setup lang="ts"> <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"; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();

7
src/composables/options.ts
View File

@ -1,10 +1,13 @@
import { computed, ref } from "vue"; import { computed, ref } from "vue";
export const openSettings = ref(false); export const openSettings = ref(false);
export const spacing = ref("4"); export const stringSpacing = ref("4");
export const fill = ref(true); export const fill = ref(true);
export const spacing = computed(() => {
return parseInt(stringSpacing.value);
});
export const options = computed(() => ({ export const options = computed(() => ({
spacing: +spacing.value, spacing: spacing.value,
fill: fill.value, fill: fill.value,
prefix: undefined, prefix: undefined,
})); }));

8
src/pages/Playground.vue
View File

@ -13,11 +13,11 @@
<div v-if="!forward" class="flex flex-row-reverse gap-x-2 h-[2.375rem]"> <div v-if="!forward" class="flex flex-row-reverse gap-x-2 h-[2.375rem]">
<div <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" 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 <button
v-for="j in +spacing" v-for="j in spacing"
@click="setBit(i, j)" @click="setBit(i, j)"
:data-bit="(number & (2 ** (i * 4 + j))).toString()" :data-bit="(number & (2 ** (i * 4 + j))).toString()"
:class="`w-2 ${getBit(i, j) ? 'h-8' : 'h-3'} bg-emerald-100 rounded-t-full`" :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); const forward = ref(true);
function getBit(i: number, j: number) { 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) { 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() { function swap() {