scambier/n0mbers
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Layout

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/NumberBox.vue
View File

@ -1,6 +1,6 @@
<template>
<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>
</div>
</template>

68
src/views/GameView.vue
View File

@ -10,10 +10,10 @@
</NumberBox>
<!-- 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">
<NumberBox
class="text-2xl "
class="text-2xl col-start-auto h-[1.8em]"
:class="{ 'text-stone-600 border-stone-600': !item.free }"
@click="selectNumber(item)"
v-for="(item, i) in plaquettes"
@ -40,45 +40,45 @@
class="mb-2 text-center"
v-for="(operation, i) in operations"
:key="i">
<div class="inline-block relative">
<div class="inline-block relative text-xl">
<!-- OPERATION -->
<div class="flex absolute top-0 right-full whitespace-nowrap">
<div class="flex">
<NumberBox class="w-[2.5em]">
{{ operation.left?.value ?? '?' }}
</NumberBox>
<NumberBox class="w-[2.5em] border-none">
{{ operation.operator ?? '' }}
</NumberBox>
<NumberBox class="w-[2.5em]">
{{ operation.right?.value ?? '?' }}
</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>
<!-- 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>
@ -141,10 +141,10 @@ function selectNumber(p: Plaquette): void {
if (
op.operator &&
op.right &&
op.left &&
isOperationValid(op) &&
!op.executed
op.right &&
op.left &&
isOperationValid(op) &&
!op.executed
) {
op.executed = true
plaquettes.value.push({