This commit is contained in:
Simon Cambier 2022-02-09 21:50:52 +01:00
parent eda068951f
commit ff6b3ed821
2 changed files with 35 additions and 35 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div <div
class="flex overflow-hidden justify-center font-bold uppercase rounded border transition-all"> class="flex overflow-hidden justify-center font-bold rounded border transition-all">
<span class="self-center text-center"><slot /></span> <span class="self-center text-center"><slot /></span>
</div> </div>
</template> </template>

View File

@ -10,10 +10,10 @@
</NumberBox> </NumberBox>
<!-- Plaquettes --> <!-- Plaquettes -->
<div class="grid grid-cols-6 grid-rows-2 gap-2 mx-auto max-w-sm"> <div class="grid grid-cols-6 grid-rows-2 gap-2 mx-auto px-2 max-w-sm justify-center">
<TransitionGroup name="list"> <TransitionGroup name="list">
<NumberBox <NumberBox
class="text-2xl " class="text-2xl col-start-auto h-[1.8em]"
:class="{ 'text-stone-600 border-stone-600': !item.free }" :class="{ 'text-stone-600 border-stone-600': !item.free }"
@click="selectNumber(item)" @click="selectNumber(item)"
v-for="(item, i) in plaquettes" v-for="(item, i) in plaquettes"
@ -40,45 +40,45 @@
class="mb-2 text-center" class="mb-2 text-center"
v-for="(operation, i) in operations" v-for="(operation, i) in operations"
:key="i"> :key="i">
<div class="inline-block relative"> <div class="inline-block relative text-xl">
<!-- OPERATION --> <!-- OPERATION -->
<div class="flex absolute top-0 right-full whitespace-nowrap"> <div class="flex">
<NumberBox class="w-[2.5em]"> <NumberBox class="w-[2.5em]">
{{ operation.left?.value ?? '?' }} {{ operation.left?.value ?? '?' }}
</NumberBox> </NumberBox>
<NumberBox class="w-[2.5em] border-none"> <NumberBox class="w-[2.5em] border-none">
{{ operation.operator ?? '' }} {{ operation.operator ?? '' }}
</NumberBox> </NumberBox>
<NumberBox class="w-[2.5em]"> <NumberBox class="w-[2.5em]">
{{ operation.right?.value ?? '?' }} {{ operation.right?.value ?? '?' }}
</NumberBox> </NumberBox>
<!-- EQUALS -->
<NumberBox class="mx-4 border-none">
=
</NumberBox>
<!-- RESULT -->
<NumberBox class="w-[2.5em]">
<span
v-if="
operation.operator &&
operation.left &&
operation.right &&
isOperationValid(operation)
">
{{
operate(
operation.operator,
operation.left.value,
operation.right.value
)
}}
</span>
<span v-else>?</span>
</NumberBox>
</div> </div>
<!-- EQUALS -->
<NumberBox class="mx-4 border-none">
=
</NumberBox>
<!-- RESULT -->
<NumberBox
class="absolute top-0 left-full whitespace-nowrap border-none">
<span
v-if="
operation.operator &&
operation.left &&
operation.right &&
isOperationValid(operation)
">
{{
operate(
operation.operator,
operation.left.value,
operation.right.value
)
}}
</span>
<span v-else>?</span>
</NumberBox>
</div> </div>
</div> </div>
</div> </div>
@ -141,10 +141,10 @@ function selectNumber(p: Plaquette): void {
if ( if (
op.operator && op.operator &&
op.right && op.right &&
op.left && op.left &&
isOperationValid(op) && isOperationValid(op) &&
!op.executed !op.executed
) { ) {
op.executed = true op.executed = true
plaquettes.value.push({ plaquettes.value.push({