Display & transitions
This commit is contained in:
parent
adb185e4d4
commit
903bc35bd3
|
|
@ -3,9 +3,9 @@
|
|||
|
||||
<head>
|
||||
<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" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite App</title>
|
||||
<title>Le compte est bon</title>
|
||||
</head>
|
||||
|
||||
<body class="bg-stone-200 text-stone-900 dark:bg-stone-900 dark:text-stone-200 h-full">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<RouterView class="container mx-auto h-full border" />
|
||||
<RouterView class="container mx-auto h-full" />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@ export const pool = [
|
|||
] as const
|
||||
|
||||
export enum GameState {
|
||||
Playing,
|
||||
Lost,
|
||||
Won,
|
||||
Undefined = 0,
|
||||
Waiting = 1,
|
||||
Playing = 2,
|
||||
Lost = 3,
|
||||
Won = 4,
|
||||
}
|
||||
|
||||
export const gameState = ref(GameState.Playing)
|
||||
export const gameState = ref(GameState.Undefined)
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
/* Legacy iOS */
|
||||
}
|
||||
|
||||
.slide_left-move,
|
||||
.slide_left-enter-active,
|
||||
.slide_left-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
|
|
|
|||
11
src/store.ts
11
src/store.ts
|
|
@ -1,6 +1,15 @@
|
|||
import { reactive, ref } from 'vue'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
|
||||
import { isOperationReady } from './algo'
|
||||
import { Operation, Plaquette } from './types'
|
||||
|
||||
export const operations = reactive<Operation[]>([])
|
||||
export const plaquettes = ref<Plaquette[]>([])
|
||||
|
||||
export const currentOperation = computed(
|
||||
() => operations[operations.length - 1],
|
||||
)
|
||||
|
||||
export const isEndGame = computed(
|
||||
() => operations.length === 5 && isOperationReady(currentOperation.value),
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div>
|
||||
ASMD
|
||||
<div class="">
|
||||
<h1 class="pt-2 pb-4 text-3xl font-bold text-center">
|
||||
Le compte est bon
|
||||
</h1>
|
||||
<!-- Number to find -->
|
||||
|
||||
<!-- Number to find -->
|
||||
<NumberBox
|
||||
class="aspect-square mx-auto mb-8 w-[3em] text-4xl"
|
||||
:class="{
|
||||
|
|
@ -14,55 +15,79 @@
|
|||
{{ result }}
|
||||
</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 -->
|
||||
<div
|
||||
class="grid grid-cols-6 grid-rows-2 gap-2 justify-center px-2 mx-auto max-w-sm">
|
||||
<TransitionGroup name="slide_left">
|
||||
<PlaquetteBox
|
||||
v-for="(item, i) in shownPlaquettes"
|
||||
:key="i"
|
||||
is="button"
|
||||
@click="selectNumber(item)"
|
||||
:dynamic-size="true"
|
||||
class="h-11"
|
||||
:class="{ 'text-stone-600 border-stone-600': !item.free }"
|
||||
:style="{ transitionDelay: `${initDelay * i}ms` }"
|
||||
v-for="(item, i) in plaquettes"
|
||||
:key="i">
|
||||
:dynamic-size="true">
|
||||
{{ item.value }}
|
||||
</PlaquetteBox>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
|
||||
<!-- OPERATORS -->
|
||||
<div class="flex gap-2 justify-center my-4">
|
||||
<NumberBox
|
||||
class="aspect-square w-[1.5em] text-2xl"
|
||||
@click="selectOperator(item)"
|
||||
v-for="(item, i) in operators"
|
||||
:key="i">
|
||||
{{ item }}
|
||||
</NumberBox>
|
||||
</div>
|
||||
<Transition name="slide_up">
|
||||
<div v-if="gameIsRunning">
|
||||
<div class="flex gap-2 justify-center my-4">
|
||||
<NumberBox
|
||||
class="aspect-square w-[1.5em] text-2xl"
|
||||
@click="selectOperator(item)"
|
||||
v-for="(item, i) in operators"
|
||||
:key="i">
|
||||
{{ 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 -->
|
||||
<OperationsList />
|
||||
<!-- List of Operations -->
|
||||
<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
|
||||
v-if="gameState === GameState.Won"
|
||||
class="p-2 rounded border"
|
||||
@click="reboot">
|
||||
Rejouer
|
||||
{{ t('playAgain') }}
|
||||
</button>
|
||||
</Transition>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import {
|
||||
getEmptyOperation,
|
||||
|
|
@ -75,14 +100,27 @@ import NumberBox from '@/components/common/NumberBox.vue'
|
|||
import PlaquetteBox from '@/components/common/PlaquetteBox.vue'
|
||||
import OperationsList from '@/components/OperationsList.vue'
|
||||
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 { randItem, randRange } from '@/utils'
|
||||
|
||||
const { t } = useI18n() // call `useI18n`, and spread `t` from `useI18n` returning
|
||||
|
||||
const result = ref(0)
|
||||
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(
|
||||
currentOperation,
|
||||
|
|
@ -105,6 +143,10 @@ watch(
|
|||
{ deep: true },
|
||||
)
|
||||
|
||||
function startGame(): void {
|
||||
gameState.value = GameState.Playing
|
||||
}
|
||||
|
||||
function selectNumber(p: Plaquette): void {
|
||||
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])
|
||||
|
||||
function reboot(): void {
|
||||
gameState.value = GameState.Playing
|
||||
gameState.value = GameState.Waiting
|
||||
do {
|
||||
// Find a problem
|
||||
// result.value = randRange(101, 1000)
|
||||
result.value = (() => {
|
||||
switch (difficultyLevel) {
|
||||
case 1:
|
||||
return randRange(50, 100)
|
||||
return randRange(101, 25)
|
||||
case 2:
|
||||
return randRange(100, 250)
|
||||
return randRange(251, 500)
|
||||
default:
|
||||
return randRange(250, 1000)
|
||||
return randRange(501, 1000)
|
||||
}
|
||||
})()
|
||||
// Reset Operations list
|
||||
|
|
@ -164,8 +206,4 @@ function reboot(): void {
|
|||
)
|
||||
plaquettes.value.sort((a, b) => a.value - b.value)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
reboot()
|
||||
})
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
module.exports = {
|
||||
darkMode: 'class',
|
||||
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user