Styles
This commit is contained in:
parent
69d3b2532c
commit
663528f8af
|
|
@ -5,7 +5,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>Le compte est bon</title>
|
||||
<title>N0mbers</title>
|
||||
</head>
|
||||
|
||||
<body class="bg-stone-200 text-stone-900 dark:bg-stone-900 dark:text-stone-200 h-full">
|
||||
|
|
|
|||
|
|
@ -6,10 +6,11 @@
|
|||
class="text-xl text-stone-400 hover:text-cyan-500 transition-opacity duration-200">
|
||||
<IconHouse />
|
||||
</RouterLink>
|
||||
<h1 class="py-2 text-3xl text-center">
|
||||
Numbers
|
||||
<h1 class="py-2 font-mono text-3xl text-center">
|
||||
N<span class="text-cyan-500">0</span>mbers
|
||||
</h1>
|
||||
<IconMenu class="text-xl text-stone-400 hover:text-cyan-500 transition-opacity" />
|
||||
<IconMenu
|
||||
class="text-xl text-stone-400 hover:text-cyan-500 transition-opacity" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="relative font-mono text-xl text-center">
|
||||
<TransitionGroup name="slide_up">
|
||||
<div
|
||||
class="text-center md:mb-2"
|
||||
class=""
|
||||
v-for="(op, i) in operations"
|
||||
:style="{
|
||||
transitionDelay: `${transDelay * (operations.length - i)}ms`,
|
||||
}"
|
||||
:key="i">
|
||||
<div class="inline-block relative text-xl">
|
||||
<!-- OPERATION -->
|
||||
<div class="inline-block">
|
||||
<!-- OPERATION LINE -->
|
||||
<div
|
||||
class="flex items-center border-b border-stone-600"
|
||||
:class="{ 'text-red-400': isOperationInvalid(op) }">
|
||||
<!-- LEFT -->
|
||||
class="flex items-center pb-1 border-b border-stone-600 border-dashed md:py-2"
|
||||
:class="{ 'text-red-500': isOperationInvalid(op) }">
|
||||
<!-- LEFT OPERAND -->
|
||||
<div class="w-[2.5em] transition-all">
|
||||
{{ op.left?.value ?? ' ' }}
|
||||
</div>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<span v-else> </span>
|
||||
</div>
|
||||
|
||||
<!-- RIGHT -->
|
||||
<!-- RIGHT OPERAND -->
|
||||
<div class="w-[2.5em] transition-all">
|
||||
{{ op.right?.value ?? ' ' }}
|
||||
</div>
|
||||
|
|
@ -38,28 +38,22 @@
|
|||
</div>
|
||||
|
||||
<!-- RESULT -->
|
||||
<PlaquetteBox
|
||||
:dynamic-size="true"
|
||||
class="w-[3.2em] h-8 border-none">
|
||||
<div class="w-[3.2em] transition-all">
|
||||
<IconSad v-if="isOperationInvalid(op)" />
|
||||
<span
|
||||
v-else-if="
|
||||
op.operator &&
|
||||
op.left &&
|
||||
op.right &&
|
||||
isOperationResultValid(op)
|
||||
">
|
||||
{{ operate(op.operator, op.left.value, op.right.value) }}
|
||||
:class="{ 'text-cyan-500': op.result.value === result }"
|
||||
v-else-if="op.result">
|
||||
{{ op.result?.value }}
|
||||
</span>
|
||||
<span v-else>?</span>
|
||||
</PlaquetteBox>
|
||||
</div>
|
||||
|
||||
<!-- UNDO -->
|
||||
<button
|
||||
class="ml-4"
|
||||
@click="undoOperation(i)">
|
||||
<IconUndo
|
||||
class="text-stone-600"
|
||||
class="text-stone-600 hover:text-cyan-500"
|
||||
:class="{
|
||||
invisible: !canOperationBeDeleted(op),
|
||||
}" />
|
||||
|
|
@ -72,14 +66,13 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getEmptyOperation, isOperationInvalid } from '@/algo'
|
||||
import {
|
||||
getEmptyOperation,
|
||||
isOperationInvalid,
|
||||
isOperationResultValid,
|
||||
operate,
|
||||
} from '@/algo'
|
||||
import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
|
||||
import { gameState, operations, plaquettes } from '@/composables/game-state'
|
||||
gameState,
|
||||
operations,
|
||||
plaquettes,
|
||||
result,
|
||||
} from '@/composables/game-state'
|
||||
import { operatorIcons } from '@/composables/operators'
|
||||
import { GameState } from '@/globals'
|
||||
import { Operation } from '@/types'
|
||||
|
|
|
|||
|
|
@ -1,10 +1,9 @@
|
|||
<template>
|
||||
<div
|
||||
class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
|
||||
class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm font-mono">
|
||||
<TransitionGroup name="slide_left">
|
||||
<PlaquetteBox
|
||||
v-for="(item, i) in plaquettes"
|
||||
|
||||
:key="i"
|
||||
is="button"
|
||||
@click="click(item)"
|
||||
|
|
|
|||
|
|
@ -45,6 +45,15 @@
|
|||
/* Legacy iOS */
|
||||
}
|
||||
|
||||
/* Jetbrains mono - latin */
|
||||
@font-face {
|
||||
font-family: 'Jetbrains Mono';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url('../fonts/JetBrainsMono-Regular.woff2');
|
||||
}
|
||||
|
||||
/* ROUTE TRANSITION */
|
||||
|
||||
.route-move,
|
||||
|
|
@ -136,6 +145,7 @@
|
|||
@layer components {
|
||||
.btn {
|
||||
@apply w-fit p-2;
|
||||
@apply rounded border border-stone-600 hover:border-cyan-500 transition-opacity;
|
||||
@apply rounded border border-stone-600 transition-opacity;
|
||||
@apply hover:border-cyan-500 hover:text-cyan-500;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="w-full">
|
||||
<!-- Number to find -->
|
||||
<div class="p-1 mx-auto mb-4 w-fit text-cyan-500">
|
||||
<span class="text-4xl">{{ result ? result : '???' }}</span>
|
||||
<span class="font-mono text-4xl">{{ result ? result : '???' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Start button -->
|
||||
|
|
@ -35,7 +35,8 @@
|
|||
<OperatorsList @click="selectOperator" />
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="my-4 mx-auto max-w-sm border-b" />
|
||||
<div
|
||||
class="my-4 mx-auto max-w-sm border-b border-cyan-500/50" />
|
||||
|
||||
<!-- List of Operations -->
|
||||
<OperationsList v-show="gameIsRunning" />
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
class="text-2xl btn">
|
||||
{{ t('randomGame') }}
|
||||
</RouterLink>
|
||||
Un nombre au hasard, pour le plaisir
|
||||
Une partie au hasard, pour le plaisir
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ module.exports = {
|
|||
extend: {},
|
||||
fontFamily: {
|
||||
sans: ['Manrope', 'ui-sans-serif', 'system-ui', 'apple-system'],
|
||||
mono: ['Jetbrains Mono', 'monospace'],
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user