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

Styles

Browse Source
This commit is contained in:
Simon Cambier 2022-02-20 12:26:57 +01:00
parent 69d3b2532c
commit 663528f8af
8 changed files with 42 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -5,7 +5,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<title>Le compte est bon</title> <title>N0mbers</title>
</head> </head>
<body class="bg-stone-200 text-stone-900 dark:bg-stone-900 dark:text-stone-200 h-full"> <body class="bg-stone-200 text-stone-900 dark:bg-stone-900 dark:text-stone-200 h-full">

7
src/components/AppHeader.vue
View File

@ -6,10 +6,11 @@
class="text-xl text-stone-400 hover:text-cyan-500 transition-opacity duration-200"> class="text-xl text-stone-400 hover:text-cyan-500 transition-opacity duration-200">
<IconHouse /> <IconHouse />
</RouterLink> </RouterLink>
<h1 class="py-2 text-3xl text-center"> <h1 class="py-2 font-mono text-3xl text-center">
Numbers N<span class="text-cyan-500">0</span>mbers
</h1> </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> </div>
</template> </template>

47
src/components/OperationsList.vue
View File

@ -1,19 +1,19 @@
<template> <template>
<div> <div class="relative font-mono text-xl text-center">
<TransitionGroup name="slide_up"> <TransitionGroup name="slide_up">
<div <div
class="text-center md:mb-2" class=""
v-for="(op, i) in operations" v-for="(op, i) in operations"
:style="{ :style="{
transitionDelay: `${transDelay * (operations.length - i)}ms`, transitionDelay: `${transDelay * (operations.length - i)}ms`,
}" }"
:key="i"> :key="i">
<div class="inline-block relative text-xl"> <div class="inline-block">
<!-- OPERATION --> <!-- OPERATION LINE -->
<div <div
class="flex items-center border-b border-stone-600" class="flex items-center pb-1 border-b border-stone-600 border-dashed md:py-2"
:class="{ 'text-red-400': isOperationInvalid(op) }"> :class="{ 'text-red-500': isOperationInvalid(op) }">
<!-- LEFT --> <!-- LEFT OPERAND -->
<div class="w-[2.5em] transition-all"> <div class="w-[2.5em] transition-all">
{{ op.left?.value ?? '&nbsp;' }} {{ op.left?.value ?? '&nbsp;' }}
</div> </div>
@ -27,7 +27,7 @@
<span v-else>&nbsp;</span> <span v-else>&nbsp;</span>
</div> </div>
<!-- RIGHT --> <!-- RIGHT OPERAND -->
<div class="w-[2.5em] transition-all"> <div class="w-[2.5em] transition-all">
{{ op.right?.value ?? '&nbsp;' }} {{ op.right?.value ?? '&nbsp;' }}
</div> </div>
@ -38,28 +38,22 @@
</div> </div>
<!-- RESULT --> <!-- RESULT -->
<PlaquetteBox <div class="w-[3.2em] transition-all">
:dynamic-size="true"
class="w-[3.2em] h-8 border-none">
<IconSad v-if="isOperationInvalid(op)" /> <IconSad v-if="isOperationInvalid(op)" />
<span <span
v-else-if=" :class="{ 'text-cyan-500': op.result.value === result }"
op.operator && v-else-if="op.result">
op.left && {{ op.result?.value }}
op.right &&
isOperationResultValid(op)
">
{{ operate(op.operator, op.left.value, op.right.value) }}
</span> </span>
<span v-else>?</span> <span v-else>?</span>
</PlaquetteBox> </div>
<!-- UNDO --> <!-- UNDO -->
<button <button
class="ml-4" class="ml-4"
@click="undoOperation(i)"> @click="undoOperation(i)">
<IconUndo <IconUndo
class="text-stone-600" class="text-stone-600 hover:text-cyan-500"
:class="{ :class="{
invisible: !canOperationBeDeleted(op), invisible: !canOperationBeDeleted(op),
}" /> }" />
@ -72,14 +66,13 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getEmptyOperation, isOperationInvalid } from '@/algo'
import { import {
getEmptyOperation, gameState,
isOperationInvalid, operations,
isOperationResultValid, plaquettes,
operate, result,
} from '@/algo' } from '@/composables/game-state'
import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
import { gameState, operations, plaquettes } from '@/composables/game-state'
import { operatorIcons } from '@/composables/operators' import { operatorIcons } from '@/composables/operators'
import { GameState } from '@/globals' import { GameState } from '@/globals'
import { Operation } from '@/types' import { Operation } from '@/types'

3
src/components/PlaquettesList.vue
View File

@ -1,10 +1,9 @@
<template> <template>
<div <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"> <TransitionGroup name="slide_left">
<PlaquetteBox <PlaquetteBox
v-for="(item, i) in plaquettes" v-for="(item, i) in plaquettes"
:key="i" :key="i"
is="button" is="button"
@click="click(item)" @click="click(item)"

12
src/index.css
View File

@ -45,6 +45,15 @@
/* Legacy iOS */ /* 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 TRANSITION */
.route-move, .route-move,
@ -136,6 +145,7 @@
@layer components { @layer components {
.btn { .btn {
@apply w-fit p-2; @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;
} }
} }

5
src/views/GameView.vue
View File

@ -2,7 +2,7 @@
<div class="w-full"> <div class="w-full">
<!-- Number to find --> <!-- Number to find -->
<div class="p-1 mx-auto mb-4 w-fit text-cyan-500"> <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> </div>
<!-- Start button --> <!-- Start button -->
@ -35,7 +35,8 @@
<OperatorsList @click="selectOperator" /> <OperatorsList @click="selectOperator" />
<!-- Divider --> <!-- 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 --> <!-- List of Operations -->
<OperationsList v-show="gameIsRunning" /> <OperationsList v-show="gameIsRunning" />

2
src/views/HomeView.vue
View File

@ -26,7 +26,7 @@
class="text-2xl btn"> class="text-2xl btn">
{{ t('randomGame') }} {{ t('randomGame') }}
</RouterLink> </RouterLink>
Un nombre au hasard, pour le plaisir Une partie au hasard, pour le plaisir
</div> </div>
</div> </div>
</div> </div>

1
tailwind.config.js
View File

@ -5,6 +5,7 @@ module.exports = {
extend: {}, extend: {},
fontFamily: { fontFamily: {
sans: ['Manrope', 'ui-sans-serif', 'system-ui', 'apple-system'], sans: ['Manrope', 'ui-sans-serif', 'system-ui', 'apple-system'],
mono: ['Jetbrains Mono', 'monospace'],
}, },
}, },
plugins: [], plugins: [],