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

2
src/App.vue
View File

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

10
src/globals.ts
View File

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

1
src/index.css
View File

@ -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
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'
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),
)

80
src/views/GameView.vue
View File

@ -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,25 +15,40 @@
{{ 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 -->
<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"
@ -43,26 +59,35 @@
</NumberBox>
</div>
<!-- Divider -->
<div class="my-4 mx-auto max-w-sm border-b" />
<!-- List of Operations -->
<OperationsList />
<OperationsList v-show="gameIsRunning" />
</div>
</Transition>
<div class="flex justify-evenly items-center mt-8">
<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>
</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
tailwind.config.js
View File

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