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

Transitions

Browse Source
This commit is contained in:
Simon Cambier 2022-02-18 10:18:51 +01:00
parent dbeb7db2c3
commit 2dcfaf513f
8 changed files with 158 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/App.vue
View File

@ -1,7 +1,19 @@
<script setup lang="ts"></script>
<script setup lang="ts">
import AppHeader from './components/AppHeader.vue'
</script>
<template>
<div class="container px-2 mx-auto h-full">
<RouterView />
<div class="container flex overflow-hidden flex-col px-2 mx-auto h-full max-w-md">
<AppHeader />
<!-- keep relative for transition -->
<div class="relative">
<RouterView v-slot="{ Component, route }">
<Transition name="route">
<Component
:is="Component"
:key="route.path" />
</Transition>
</RouterView>
</div>
</div>
</template>

25
src/components/AppHeader.vue
View File

@ -1,7 +1,24 @@
<template>
<h1 class="pt-2 pb-4 text-3xl font-bold text-center">
Numbers
</h1>
<div class="flex justify-between items-center mx-auto w-full max-w-md">
<RouterLink
:class="{ 'opacity-0': isHome }"
to="/"
class="text-xl text-stone-400 transition-opacity">
<IconHouse />
</RouterLink>
<h1 class="py-2 text-3xl text-center">
Numbers
</h1>
<IconMenu class="text-xl" />
</div>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import IconHouse from '~icons/ph/house'
import IconMenu from '~icons/ph/list'
const isHome = computed(() => useRoute().name === 'home')
</script>

10
src/components/OperationsList.vue
View File

@ -2,7 +2,7 @@
<div>
<TransitionGroup name="slide_up">
<div
class="mb-2 text-center"
class="text-center md:mb-2"
v-for="(op, i) in operations"
:style="{
transitionDelay: `${transDelay * (operations.length - i)}ms`,
@ -21,7 +21,7 @@
<!-- OPERATOR -->
<div class="flex justify-center w-[2.5em] transition-all">
<Component
class="text-lg"
class="text-lg text-stone-400"
v-if="op.operator"
:is="operatorIcons[op.operator]" />
<span v-else>&nbsp;</span>
@ -33,7 +33,7 @@
</div>
<!-- EQUALS -->
<div class="mx-4 border-none">
<div class="mx-4 text-stone-400 border-none">
<IconEquals />
</div>
@ -56,10 +56,10 @@
<!-- UNDO -->
<button
class="ml-8"
class="ml-4"
@click="undoOperation(i)">
<IconUndo
class="text-stone-400"
class="text-stone-600"
:class="{
invisible: !canOperationBeDeleted(op),
}" />

1
src/components/PlaquettesList.vue
View File

@ -4,6 +4,7 @@
<TransitionGroup name="slide_left">
<PlaquetteBox
v-for="(item, i) in plaquettes"
:key="i"
is="button"
@click="click(item)"

2
src/components/common/PlaquetteBox.vue
View File

@ -1,7 +1,7 @@
<template>
<Component
:is="is"
class="flex overflow-hidden justify-center font-bold rounded border-stone-600 transition-opacity"
class="flex overflow-hidden justify-center rounded border-stone-600"
:class="[textSize]">
<span
class="self-center text-center"

63
src/index.css
View File

@ -13,15 +13,15 @@
src: url('../fonts/manrope-v8-latin-regular.eot');
/* IE9 Compat Modes */
src: local(''),
url('../fonts/manrope-v8-latin-regular.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/manrope-v8-latin-regular.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/manrope-v8-latin-regular.woff') format('woff'),
/* Modern Browsers */
url('../fonts/manrope-v8-latin-regular.ttf') format('truetype'),
url('../fonts/manrope-v8-latin-regular.eot?#iefix')
format('embedded-opentype'),
/* IE6-IE8 */ url('../fonts/manrope-v8-latin-regular.woff2') format('woff2'),
/* Super Modern Browsers */ url('../fonts/manrope-v8-latin-regular.woff')
format('woff'),
/* Modern Browsers */ url('../fonts/manrope-v8-latin-regular.ttf')
format('truetype'),
/* Safari, Android, iOS */
url('../fonts/manrope-v8-latin-regular.svg#Manrope') format('svg');
url('../fonts/manrope-v8-latin-regular.svg#Manrope') format('svg');
/* Legacy iOS */
}
@ -35,17 +35,40 @@
/* IE9 Compat Modes */
src: local(''),
url('../fonts/manrope-v8-latin-700.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('../fonts/manrope-v8-latin-700.woff2') format('woff2'),
/* Super Modern Browsers */
url('../fonts/manrope-v8-latin-700.woff') format('woff'),
/* Modern Browsers */
url('../fonts/manrope-v8-latin-700.ttf') format('truetype'),
/* Safari, Android, iOS */
url('../fonts/manrope-v8-latin-700.svg#Manrope') format('svg');
/* IE6-IE8 */ url('../fonts/manrope-v8-latin-700.woff2') format('woff2'),
/* Super Modern Browsers */ url('../fonts/manrope-v8-latin-700.woff')
format('woff'),
/* Modern Browsers */ url('../fonts/manrope-v8-latin-700.ttf')
format('truetype'),
/* Safari, Android, iOS */ url('../fonts/manrope-v8-latin-700.svg#Manrope')
format('svg');
/* Legacy iOS */
}
/* ROUTE TRANSITION */
.route-move,
.route-enter-active,
.route-leave-active {
transition: all .8s ease;
}
.route-enter-from {
opacity: 0;
transform: translateX(100vw);
}
.route-leave-to {
opacity: 0;
transform: translateX(-100vw);
}
.route-leave-active {
position: absolute;
}
/* SLIDE LEFT */
.slide_left-move,
.slide_left-enter-active,
.slide_left-leave-active {
@ -58,6 +81,12 @@
transform: translateX(30px);
}
/* .slide_left-leave-active {
position: absolute;
} */
/* SLIDE UP */
.slide_up-enter-active,
.slide_up-leave-active {
transition: all 0.5s ease;
@ -85,4 +114,4 @@
@apply w-fit p-2;
@apply rounded border border-stone-600 hover:border-cyan-500 transition-opacity;
}
}
}

117
src/views/GameView.vue
View File

@ -1,67 +1,65 @@
<template>
<AppHeader />
<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>
</div>
<!-- Number to find -->
<PlaquetteBox class="p-1 mx-auto mb-4 w-fit text-cyan-500">
<span class="text-4xl">{{ result }}</span>
</PlaquetteBox>
<!-- Start button -->
<!-- TODO: fix animation -->
<Transition name="zero_height">
<div
class="text-center"
v-if="gameState === GameState.Waiting">
<div v-if="isDaily">
Le défi quotidien vous propose un résultat différent chaque jour,
commun à tous les joueurs.<br>
</div>
<!-- Start button -->
<!-- TODO: fix animation -->
<Transition name="zero_height">
<div
class="text-center"
v-if="gameState === GameState.Waiting">
<div>
Combinez les nombres imposés afin de trouver le résultat ci-dessus, ou
de vous en approcher le plus possible.<br>
Le compteur démarre quand vous cliquez sur le bouton.<br>Partagez vos
meilleurs temps !
<button
@click="startGame"
class="py-2 px-4 mt-4 btn">
{{ t('startGame') }}
</button>
</div>
</Transition>
<button
@click="startGame"
class="py-2 px-4 mt-4 btn">
{{ t('startGame') }}
</button>
</div>
</Transition>
<!-- PLAQUETTES -->
<PlaquettesList
:plaquettes="shownPlaquettes"
@click-number="selectNumber" />
<!-- PLAQUETTES -->
<PlaquettesList
:plaquettes="shownPlaquettes"
@click-number="selectNumber" />
<Transition name="slide_up">
<div v-if="gameIsRunning">
<!-- OPERATORS -->
<OperatorsList @click="selectOperator" />
<Transition name="slide_up">
<div v-if="gameIsRunning">
<!-- OPERATORS -->
<OperatorsList @click="selectOperator" />
<!-- Divider -->
<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 v-show="gameIsRunning" />
</div>
</Transition>
<!-- List of Operations -->
<OperationsList v-show="gameIsRunning" />
</div>
</Transition>
<Transition name="slide_up">
<div
v-if="isEndGame"
class="flex flex-row justify-evenly items-center mx-auto mt-8 max-w-sm">
<span
v-if="isResultPerfect"
v-html="t('endGame.victoryLabel')" />
<span
v-else
v-html="t('endGame.failureLabel')" />
<button
class="btn"
@click="reboot">
{{ t('playAgain') }}
</button>
</div>
</Transition>
<Transition name="slide_up">
<div
v-if="isEndGame"
class="flex flex-row justify-evenly items-center mx-auto mt-8 max-w-sm">
<span
v-if="isResultPerfect"
v-html="t('endGame.victoryLabel')" />
<span
v-else
v-html="t('endGame.failureLabel')" />
<button
class="btn"
@click="reboot">
{{ t('playAgain') }}
</button>
</div>
</Transition>
</div>
</template>
<script setup lang="ts">
@ -205,8 +203,13 @@ function reboot(): void {
*/
onMounted(() => {
reboot()
gameState.value = GameState.Waiting
// reboot()
// gameState.value = GameState.Waiting
result.value = 0
setTimeout(() => {
reboot()
gameState.value = GameState.Waiting
}, 800)
})
onUnmounted(() => {

19
src/views/HomeView.vue
View File

@ -1,17 +1,16 @@
<template>
<div class="flex flex-col h-full text-center">
<AppHeader />
<div>
Combinez les nombres imposés afin d'atteindre le résultat, ou de vous en
approcher le plus possible.<br>
<br>
</div>
<div class="flex flex-col grow gap-16 justify-center md:flex-row md:mt-16">
<div class="flex flex-col grow p-1 w-full text-center">
<div class="flex flex-col grow gap-16 justify-center md:mt-16">
<div>
Combinez les nombres imposés afin d'atteindre le résultat, ou de vous en
approcher le plus possible.<br>
<br>
</div>
<!-- Daily -->
<div class="flex flex-col gap-4 items-center">
<RouterLink
to="/daily"
class="text-3xl btn">
class="text-2xl btn">
{{ t('dailyGame') }}
</RouterLink>
<span>
@ -24,7 +23,7 @@
<div class="flex flex-col gap-4 items-center">
<RouterLink
to="/random"
class="text-3xl btn">
class="text-2xl btn">
{{ t('randomGame') }}
</RouterLink>
Un nombre au hasard, pour le plaisir