Plaquettes size

This commit is contained in:
Simon Cambier 2022-02-11 23:28:28 +01:00
parent 725cbd0dbe
commit 6232c2f682
3 changed files with 48 additions and 7 deletions

View File

@ -29,7 +29,7 @@
</div>
<!-- RESULT -->
<NumberBox class="w-[2.5em] border-none">
<PlaquetteBox :dynamic-size="true" class="w-[3.2em] border-none">
<IconSad v-if="isOperationInvalid(op)" />
<span
v-else-if="
@ -38,7 +38,7 @@
{{ operate(op.operator, op.left.value, op.right.value) }}
</span>
<IconQuestion v-else />
</NumberBox>
</PlaquetteBox>
<button
class="ml-8"
@click="undoOperation(i)">
@ -69,6 +69,7 @@ import IconSad from '~icons/bx/bx-sad'
import IconUndo from '~icons/bx/bx-undo'
import NumberBox from './common/NumberBox.vue'
import PlaquetteBox from './common/PlaquetteBox.vue'
const transDelay = 100

View File

@ -0,0 +1,38 @@
<template>
<div
class="flex overflow-hidden justify-center font-bold rounded border border-stone-600 transition-all"
:class="[textSize]">
<span
class="self-center text-center"
ref="content"><slot /></span>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
const props = withDefaults(
defineProps<{ dynamicSize: boolean }>(),
{
dynamicSize: false,
},
)
const textSize = ref('text-2xl')
const content = ref<HTMLSpanElement>()
watch(
content,
() => {
if (props.dynamicSize && content.value?.innerHTML) {
const val = content.value.innerHTML.trim()
if (parseInt(val).toString() === val) {
textSize.value = 'text-2xl'
if (val.length === 4) textSize.value = 'text-lg'
else if (val.length === 5) textSize.value = 'text-sm'
else if (val.length >= 6) textSize.value = 'text-xs'
}
}
},
{ deep: true },
)
</script>

View File

@ -15,19 +15,20 @@
{{ result }}
</NumberBox>
<!-- Plaquettes -->
<!-- PLAQUETTES -->
<div
class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
<TransitionGroup name="slide_left">
<NumberBox
class="col-start-auto h-[1.8em] text-2xl"
<PlaquetteBox
:dynamic-size="true"
class="col-start-auto h-11"
:class="{ 'text-stone-600 border-stone-600': !item.free }"
:style="{ transitionDelay: `${initDelay * i}ms` }"
@click="selectNumber(item)"
v-for="(item, i) in plaquettes"
:key="i">
{{ item.value }}
</NumberBox>
</PlaquetteBox>
</TransitionGroup>
</div>
@ -61,6 +62,7 @@ import {
plaquettes,
} from '@/algo'
import NumberBox from '@/components/common/NumberBox.vue'
import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
import OperationsList from '@/components/OperationsList.vue'
import { GameState, operators, pool } from '@/globals'
import { OperatorType, Plaquette } from '@/types'