Transitions

src/App.vue

@@ -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">
+  <div class="container flex overflow-hidden flex-col px-2 mx-auto h-full max-w-md">
-    <RouterView />
+    <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>

src/components/AppHeader.vue

@@ -1,7 +1,24 @@
 <template>
-  <h1 class="pt-2 pb-4 text-3xl font-bold text-center">
+  <div class="flex justify-between items-center mx-auto w-full max-w-md">
-    Numbers
+    <RouterLink
-  </h1>
+      :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>

src/components/OperationsList.vue

@@ -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),
                 }" />

src/components/PlaquettesList.vue

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

src/components/common/PlaquetteBox.vue

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

src/index.css

@@ -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'),
+    url('../fonts/manrope-v8-latin-regular.eot?#iefix')
-    /* IE6-IE8 */
+      format('embedded-opentype'),
-    url('../fonts/manrope-v8-latin-regular.woff2') format('woff2'),
+    /* IE6-IE8 */ url('../fonts/manrope-v8-latin-regular.woff2') format('woff2'),
-    /* Super Modern Browsers */
+    /* Super Modern Browsers */ url('../fonts/manrope-v8-latin-regular.woff')
-    url('../fonts/manrope-v8-latin-regular.woff') format('woff'),
+      format('woff'),
-    /* Modern Browsers */
+    /* Modern Browsers */ url('../fonts/manrope-v8-latin-regular.ttf')
-    url('../fonts/manrope-v8-latin-regular.ttf') format('truetype'),
+      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 */
+    /* IE6-IE8 */ url('../fonts/manrope-v8-latin-700.woff2') format('woff2'),
-    url('../fonts/manrope-v8-latin-700.woff2') format('woff2'),
+    /* Super Modern Browsers */ url('../fonts/manrope-v8-latin-700.woff')
-    /* Super Modern Browsers */
+      format('woff'),
-    url('../fonts/manrope-v8-latin-700.woff') format('woff'),
+    /* Modern Browsers */ url('../fonts/manrope-v8-latin-700.ttf')
-    /* Modern Browsers */
+      format('truetype'),
-    url('../fonts/manrope-v8-latin-700.ttf') format('truetype'),
+    /* Safari, Android, iOS */ url('../fonts/manrope-v8-latin-700.svg#Manrope')
-    /* Safari, Android, iOS */
+      format('svg');
-    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;

src/views/GameView.vue

@@ -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 -->
+    <!-- Start button -->
-  <PlaquetteBox class="p-1 mx-auto mb-4 w-fit text-cyan-500">
+    <!-- TODO: fix animation -->
-    <span class="text-4xl">{{ result }}</span>
+    <Transition name="zero_height">
-  </PlaquetteBox>
+      <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 -->
+        <button
-  <!-- TODO: fix animation -->
+          @click="startGame"
-  <Transition name="zero_height">
+          class="py-2 px-4 mt-4 btn">
-    <div
+          {{ t('startGame') }}
-      class="text-center"
+        </button>
-      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 !
       </div>
+    </Transition>
 
-      <button
+    <!-- PLAQUETTES -->
-        @click="startGame"
+    <PlaquettesList
-        class="py-2 px-4 mt-4 btn">
+      :plaquettes="shownPlaquettes"
-        {{ t('startGame') }}
+      @click-number="selectNumber" />
-      </button>
-    </div>
-  </Transition>
 
-  <!-- PLAQUETTES -->
+    <Transition name="slide_up">
-  <PlaquettesList
+      <div v-if="gameIsRunning">
-    :plaquettes="shownPlaquettes"
+        <!-- OPERATORS -->
-    @click-number="selectNumber" />
+        <OperatorsList @click="selectOperator" />
 
-  <Transition name="slide_up">
+        <!-- Divider -->
-    <div v-if="gameIsRunning">
+        <div class="my-4 mx-auto max-w-sm border-b" />
-      <!-- OPERATORS -->
-      <OperatorsList @click="selectOperator" />
 
-      <!-- Divider -->
+        <!-- List of Operations -->
-      <div class="my-4 mx-auto max-w-sm border-b" />
+        <OperationsList v-show="gameIsRunning" />
+      </div>
+    </Transition>
 
-      <!-- List of Operations -->
+    <Transition name="slide_up">
-      <OperationsList v-show="gameIsRunning" />
+      <div
-    </div>
+        v-if="isEndGame"
-  </Transition>
+        class="flex flex-row justify-evenly items-center mx-auto mt-8 max-w-sm">
-
+        <span
-  <Transition name="slide_up">
+          v-if="isResultPerfect"
-    <div
+          v-html="t('endGame.victoryLabel')" />
-      v-if="isEndGame"
+        <span
-      class="flex flex-row justify-evenly items-center mx-auto mt-8 max-w-sm">
+          v-else
-      <span
+          v-html="t('endGame.failureLabel')" />
-        v-if="isResultPerfect"
+        <button
-        v-html="t('endGame.victoryLabel')" />
+          class="btn"
-      <span
+          @click="reboot">
-        v-else
+          {{ t('playAgain') }}
-        v-html="t('endGame.failureLabel')" />
+        </button>
-      <button
+      </div>
-        class="btn"
+    </Transition>
-        @click="reboot">
+  </div>
-        {{ t('playAgain') }}
-      </button>
-    </div>
-  </Transition>
 </template>
 
 <script setup lang="ts">
@@ -205,8 +203,13 @@ function reboot(): void {
  */
 
 onMounted(() => {
-  reboot()
+  // reboot()
-  gameState.value = GameState.Waiting
+  // gameState.value = GameState.Waiting
+  result.value = 0
+  setTimeout(() => {
+    reboot()
+    gameState.value = GameState.Waiting
+  }, 800)
 })
 
 onUnmounted(() => {

src/views/HomeView.vue

@@ -1,17 +1,16 @@
 <template>
-  <div class="flex flex-col h-full text-center">
+  <div class="flex flex-col grow p-1 w-full text-center">
-    <AppHeader />
+    <div class="flex flex-col grow gap-16 justify-center md:mt-16">
-    <div>
+      <div>
-      Combinez les nombres imposés afin d'atteindre le résultat, ou de vous en
+        Combinez les nombres imposés afin d'atteindre le résultat, ou de vous en
-      approcher le plus possible.<br>
+        approcher le plus possible.<br>
-      <br>
+        <br>
-    </div>
+      </div>
-    <div class="flex flex-col grow gap-16 justify-center md:flex-row md:mt-16">
       <!-- 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