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

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

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,13 +13,13 @@
   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');
   /* 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;

src/views/GameView.vue

@@ -1,10 +1,9 @@
 <template>
-  <AppHeader />
-
+  <div class="w-full">
     <!-- Number to find -->
-  <PlaquetteBox class="p-1 mx-auto mb-4 w-fit text-cyan-500">
-    <span class="text-4xl">{{ result }}</span>
-  </PlaquetteBox>
+    <div class="p-1 mx-auto mb-4 w-fit text-cyan-500">
+      <span class="text-4xl">{{ result ? result : '???' }}</span>
+    </div>
 
     <!-- Start button -->
     <!-- TODO: fix animation -->
@@ -12,11 +11,9 @@
       <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 !
+        <div v-if="isDaily">
+          Le défi quotidien vous propose un résultat différent chaque jour,
+          commun à tous les joueurs.<br>
         </div>
 
         <button
@@ -62,6 +59,7 @@
         </button>
       </div>
     </Transition>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -205,8 +203,13 @@ function reboot(): void {
  */
 
 onMounted(() => {
+  // reboot()
+  // 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">
-    <AppHeader />
+  <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>
-    <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