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

Display & transitions

Browse Source
This commit is contained in:
Simon Cambier 2022-02-15 08:46:15 +01:00
parent adb185e4d4
commit 903bc35bd3
7 changed files with 93 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -3,9 +3,9 @@
<head> <head>
<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" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Le compte est bon</title>
<title>Vite App</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">

2
src/App.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"></script> <script setup lang="ts"></script>
<template> <template>
<RouterView class="container mx-auto h-full border" /> <RouterView class="container mx-auto h-full" />
</template> </template>

10
src/globals.ts
View File

@ -6,9 +6,11 @@ export const pool = [
] as const ] as const
export enum GameState { export enum GameState {
Playing, Undefined = 0,
Lost, Waiting = 1,
Won, Playing = 2,
Lost = 3,
Won = 4,
} }
export const gameState = ref(GameState.Playing) export const gameState = ref(GameState.Undefined)

1
src/index.css
View File

@ -46,6 +46,7 @@
/* Legacy iOS */ /* Legacy iOS */
} }
.slide_left-move,
.slide_left-enter-active, .slide_left-enter-active,
.slide_left-leave-active { .slide_left-leave-active {
transition: all 0.5s ease; transition: all 0.5s ease;

11
src/store.ts
View File

@ -1,6 +1,15 @@
import { reactive, ref } from 'vue' import { computed, reactive, ref } from 'vue'
import { isOperationReady } from './algo'
import { Operation, Plaquette } from './types' import { Operation, Plaquette } from './types'
export const operations = reactive<Operation[]>([]) export const operations = reactive<Operation[]>([])
export const plaquettes = ref<Plaquette[]>([]) export const plaquettes = ref<Plaquette[]>([])
export const currentOperation = computed(
() => operations[operations.length - 1],
)
export const isEndGame = computed(
() => operations.length === 5 && isOperationReady(currentOperation.value),
)

106
src/views/GameView.vue
View File

@ -1,9 +1,10 @@
<template> <template>
<div> <div class="">
ASMD <h1 class="pt-2 pb-4 text-3xl font-bold text-center">
Le compte est bon
</h1> </h1>
<!-- Number to find -->
<!-- Number to find -->
<NumberBox <NumberBox
class="aspect-square mx-auto mb-8 w-[3em] text-4xl" class="aspect-square mx-auto mb-8 w-[3em] text-4xl"
:class="{ :class="{
@ -14,55 +15,79 @@
{{ result }} {{ result }}
</NumberBox> </NumberBox>
<!-- Start button -->
<Transition name="slide_up">
<!-- TODO: fix animation -->
<div class="text-center">
<button
v-if="!gameIsRunning"
@click="startGame"
class="py-2 px-4 bg-stone-800 rounded border">
{{ t('startGame') }}
</button>
</div>
</Transition>
<!-- PLAQUETTES --> <!-- PLAQUETTES -->
<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">
<TransitionGroup name="slide_left"> <TransitionGroup name="slide_left">
<PlaquetteBox <PlaquetteBox
v-for="(item, i) in shownPlaquettes"
:key="i"
is="button" is="button"
@click="selectNumber(item)" @click="selectNumber(item)"
:dynamic-size="true"
class="h-11" class="h-11"
:class="{ 'text-stone-600 border-stone-600': !item.free }" :class="{ 'text-stone-600 border-stone-600': !item.free }"
:style="{ transitionDelay: `${initDelay * i}ms` }" :style="{ transitionDelay: `${initDelay * i}ms` }"
v-for="(item, i) in plaquettes" :dynamic-size="true">
:key="i">
{{ item.value }} {{ item.value }}
</PlaquetteBox> </PlaquetteBox>
</TransitionGroup> </TransitionGroup>
</div> </div>
<!-- OPERATORS --> <!-- OPERATORS -->
<div class="flex gap-2 justify-center my-4"> <Transition name="slide_up">
<NumberBox <div v-if="gameIsRunning">
class="aspect-square w-[1.5em] text-2xl" <div class="flex gap-2 justify-center my-4">
@click="selectOperator(item)" <NumberBox
v-for="(item, i) in operators" class="aspect-square w-[1.5em] text-2xl"
:key="i"> @click="selectOperator(item)"
{{ item }} v-for="(item, i) in operators"
</NumberBox> :key="i">
</div> {{ item }}
</NumberBox>
</div>
<div class="my-4 mx-auto max-w-sm border-b" /> <!-- Divider -->
<div class="my-4 mx-auto max-w-sm border-b" />
<!-- List of Operations --> <!-- List of Operations -->
<OperationsList /> <OperationsList v-show="gameIsRunning" />
</div>
</Transition>
<div class="flex justify-evenly items-center mt-8"> <Transition name="slide_up">
<Transition name="slide_up"> <div
v-if="isEndGame"
class="flex flex-row justify-evenly items-center mt-8">
<span v-if="gameState === GameState.Won">{{
t('endGame.victoryLabel')
}}</span>
<span v-else>{{ t('endGame.failureLabel') }}</span>
<button <button
v-if="gameState === GameState.Won"
class="p-2 rounded border" class="p-2 rounded border"
@click="reboot"> @click="reboot">
Rejouer {{ t('playAgain') }}
</button> </button>
</Transition> </div>
</div> </Transition>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue' import { computed, onMounted, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { import {
getEmptyOperation, getEmptyOperation,
@ -75,14 +100,27 @@ import NumberBox from '@/components/common/NumberBox.vue'
import PlaquetteBox from '@/components/common/PlaquetteBox.vue' import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
import OperationsList from '@/components/OperationsList.vue' import OperationsList from '@/components/OperationsList.vue'
import { GameState, gameState, operators, pool } from '@/globals' import { GameState, gameState, operators, pool } from '@/globals'
import { operations, plaquettes } from '@/store' import { currentOperation, isEndGame, operations, plaquettes } from '@/store'
import { OperatorType, Plaquette } from '@/types' import { OperatorType, Plaquette } from '@/types'
import { randItem, randRange } from '@/utils' import { randItem, randRange } from '@/utils'
const { t } = useI18n() // call `useI18n`, and spread `t` from `useI18n` returning
const result = ref(0) const result = ref(0)
const initDelay = ref(100) const initDelay = ref(100)
const currentOperation = computed(() => operations[operations.length - 1]) /*
* Computed
*/
const gameIsRunning = computed(() => gameState.value > GameState.Waiting)
const shownPlaquettes = computed(() =>
gameIsRunning.value ? plaquettes.value : [],
)
onMounted(() => {
reboot()
})
watch( watch(
currentOperation, currentOperation,
@ -105,6 +143,10 @@ watch(
{ deep: true }, { deep: true },
) )
function startGame(): void {
gameState.value = GameState.Playing
}
function selectNumber(p: Plaquette): void { function selectNumber(p: Plaquette): void {
initDelay.value = 0 initDelay.value = 0
@ -129,18 +171,18 @@ function selectOperator(o: OperatorType): void {
const difficultyLevel = randItem([1, 1, 1, 1, 1, 1, 2, 2, 2, 3]) const difficultyLevel = randItem([1, 1, 1, 1, 1, 1, 2, 2, 2, 3])
function reboot(): void { function reboot(): void {
gameState.value = GameState.Playing gameState.value = GameState.Waiting
do { do {
// Find a problem // Find a problem
// result.value = randRange(101, 1000) // result.value = randRange(101, 1000)
result.value = (() => { result.value = (() => {
switch (difficultyLevel) { switch (difficultyLevel) {
case 1: case 1:
return randRange(50, 100) return randRange(101, 25)
case 2: case 2:
return randRange(100, 250) return randRange(251, 500)
default: default:
return randRange(250, 1000) return randRange(501, 1000)
} }
})() })()
// Reset Operations list // Reset Operations list
@ -164,8 +206,4 @@ function reboot(): void {
) )
plaquettes.value.sort((a, b) => a.value - b.value) plaquettes.value.sort((a, b) => a.value - b.value)
} }
onMounted(() => {
reboot()
})
</script> </script>

1
tailwind.config.js
View File

@ -1,4 +1,5 @@
module.exports = { module.exports = {
darkMode: 'class',
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: { theme: {
extend: {}, extend: {},