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> <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>

14
src/views/GameView.vue
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,19 +40,19 @@
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>
</div>
<!-- EQUALS --> <!-- EQUALS -->
<NumberBox class="mx-4 border-none"> <NumberBox class="mx-4 border-none">
@ -60,8 +60,7 @@
</NumberBox> </NumberBox>
<!-- RESULT --> <!-- RESULT -->
<NumberBox <NumberBox class="w-[2.5em]">
class="absolute top-0 left-full whitespace-nowrap border-none">
<span <span
v-if=" v-if="
operation.operator && operation.operator &&
@ -82,6 +81,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</template> </template>
<style> <style>