hmm

crpg2 · Nov 27, 2023 · 76a1987 · 76a1987
1 parent 73ef902
commit 76a1987
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 86 deletions.
diff --git a/src/WebUI/src/assets/themes/oruga-tailwind/components/dropdown.css b/src/WebUI/src/assets/themes/oruga-tailwind/components/dropdown.css
@@ -10,7 +10,8 @@
 }
 
 .v-popper--theme-dropdown .v-popper__inner {
-  @apply rounded-lg border-none bg-base-200 py-1.5 drop-shadow-md;
+  @apply rounded-lg border-none bg-base-200 drop-shadow-md;
+  /* @apply py-1.5; TODO: */
 }
 
 .v-popper--theme-dropdown.v-popper--theme-dropdown-light .v-popper__arrow-inner,

diff --git a/src/WebUI/src/components/app/Welcome.vue b/src/WebUI/src/components/app/Welcome.vue
@@ -33,10 +33,29 @@ watch(
 <template>
   <Modal closable shown>
     <template #popper>
-      <div class="space-y-10 py-10">
-        <div class="prose prose-invert space-y-10 px-12">
-          <h2 class="text-center text-xl">Welcome!</h2>
+      <div class="w-[40rem] space-y-10">
+        <div class="relative h-[10rem]">
+          <!-- TODO: poster -->
+          <img
+            class="absolute inset-0 aspect-video h-full w-full object-cover opacity-50"
+            :src="`/images/bg/background-1.webp`"
+          />
+
+          <!-- TODO: heading cmp from clan-armory branch -->
+          <div
+            class="tem-center absolute left-1/2 top-1/2 flex w-full -translate-x-1/2 -translate-y-1/2 select-none justify-center gap-8 text-center"
+          >
+            <SvgSpriteImg
+              name="logo-decor"
+              viewBox="0 0 108 10"
+              class="w-24 rotate-180 transform"
+            />
+            <h2 class="text-2xl text-white">Welcome warrior</h2>
+            <SvgSpriteImg name="logo-decor" viewBox="0 0 108 10" class="w-24" />
+          </div>
+        </div>
 
+        <div class="prose prose-invert space-y-10 px-12">
           <OTabs v-model="tabsModel" size="xl" :animated="false">
             <OTabItem :label="`Intro`" :value="PossibleValues.Steam">
               <!-- TODO: -->

diff --git a/src/WebUI/src/components/onboarding/Onboarding.vue b/src/WebUI/src/components/onboarding/Onboarding.vue
@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding';
+import { asyncPoll } from '@/utils/poll';
+
+const router = useRouter();
+
+const wrapper = ref(null);
+const { start, goToStep, finish } = useVOnboarding(wrapper);
+
+const tryFindAttachToElement = async (selector: string) =>
+  Promise.resolve(Boolean(document.querySelector(selector)));
+
+const steps = shallowRef([
+  {
+    attachTo: { element: '[data-s-d1]' },
+    content: {
+      title: 'Welcome!',
+      description:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit atque aliquam, sint dolorem amet soluta ut ipsa dolorum harum placeat.',
+    },
+  },
+  {
+    attachTo: { element: '[data-s-d22]' },
+    content: {
+      title: 'Welcome!22222222',
+      description:
+        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit atque aliquam, sint dolorem amet soluta ut ipsa dolorum harum placeat.',
+    },
+    on: {
+      beforeStep: async (options: any) => {
+        await router.push({ name: 'Clans' });
+        await asyncPoll(
+          async () => {
+            return Promise.resolve({
+              done: await tryFindAttachToElement(options.step.attachTo.element),
+            });
+          },
+          50,
+          10
+        );
+      },
+    },
+  },
+  {
+    attachTo: { element: '[data-s-d33]' },
+    content: { title: 'Welcome!333333333' },
+    on: {
+      beforeStep: async (options: any) => {
+        await router.push({ name: 'Shop' });
+        await asyncPoll(
+          async () => {
+            return Promise.resolve({
+              done: await tryFindAttachToElement(options.step.attachTo.element),
+            });
+          },
+          50,
+          10
+        );
+      },
+    },
+  },
+]);
+
+onMounted(async () => {
+  await nextTick();
+  start();
+});
+</script>
+
+<template>
+  <VOnboardingWrapper ref="wrapper" :steps="steps">
+    <template #default="{ previous, next, step, exit, isFirst, isLast, index }">
+      <OnboardingStep
+        v-if="step"
+        v-bind="{ step, isFirst, isLast, index, stepsCount: steps.length }"
+        @next="next"
+        @previous="previous"
+        @exit="finish"
+      />
+    </template>
+  </VOnboardingWrapper>
+</template>
diff --git a/src/WebUI/src/components/ui/Modal.vue b/src/WebUI/src/components/ui/Modal.vue
@@ -32,7 +32,7 @@ const onHide = () => {
     <template #popper="popper">
       <OButton
         v-if="closable"
-        class="!absolute right-4 top-4"
+        class="!absolute right-4 top-4 z-10"
         iconRight="close"
         rounded
         size="sm"

diff --git a/src/WebUI/src/layouts/default.vue b/src/WebUI/src/layouts/default.vue
@@ -11,13 +11,9 @@ import { useGameServerStats } from '@/composables/use-game-server-stats';
 import { usePollInterval } from '@/composables/use-poll-interval';
 import { mainHeaderHeightKey } from '@/symbols/common';
 import { scrollToTop } from '@/utils/scroll';
-import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding';
-import { sleep } from '@/utils/promise';
-import { asyncPoll } from '@/utils/poll';
 
 const userStore = useUserStore();
 const route = useRoute();
-const router = useRouter();
 
 const { state: joinRestrictionRemainingDuration, execute: loadJoinRestriction } = useAsyncState(
   () => getUserActiveJoinRestriction(userStore.user!.id),
@@ -58,71 +54,14 @@ const { subscribe, unsubscribe } = usePollInterval();
 const id = Symbol('fetchUser');
 
 //
-//
-//
-//
-
-const tryFindAttachToElement = async (selector: string) =>
-  Promise.resolve(Boolean(document.querySelector(selector)));
-
 const shownWelcome = ref(true);
-const wrapper = ref(null);
-const { start, goToStep, finish } = useVOnboarding(wrapper);
-
-const steps = [
-  {
-    attachTo: { element: '[data-s-d1]' },
-    content: {
-      title: 'Welcome!',
-      description:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit atque aliquam, sint dolorem amet soluta ut ipsa dolorum harum placeat.',
-    },
-  },
-  {
-    attachTo: { element: '[data-s-d22]' },
-    content: {
-      title: 'Welcome!22222222',
-      description:
-        'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit atque aliquam, sint dolorem amet soluta ut ipsa dolorum harum placeat.',
-    },
-    on: {
-      beforeStep: async options => {
-        await router.push({ name: 'Clans' });
-        await asyncPoll(
-          async () => {
-            return Promise.resolve({
-              done: await tryFindAttachToElement(options.step.attachTo.element),
-            });
-          },
-          50,
-          10
-        );
-      },
-    },
-  },
-  {
-    attachTo: { element: '[data-s-d33]' },
-    content: { title: 'Welcome!333333333' },
-    on: {
-      beforeStep: async options => {
-        await router.push({ name: 'Shop' });
-        await asyncPoll(
-          async () => {
-            return Promise.resolve({
-              done: await tryFindAttachToElement(options.step.attachTo.element),
-            });
-          },
-          50,
-          10
-        );
-      },
-    },
-  },
-];
+const shownOnboarding = ref(false);
+const startOnboarding = () => {
+  shownOnboarding.value = true;
+};
 
 onMounted(() => {
   subscribe(id, userStore.fetchUser);
-  // start();
 });
 
 onBeforeUnmount(() => {
@@ -252,7 +191,7 @@ await Promise.all(promises);
                     @click="
                       () => {
                         hide();
-                        start();
+                        startOnboarding();
                       }
                     "
                   >
@@ -330,19 +269,11 @@ await Promise.all(promises);
       @start="
         () => {
           shownWelcome = false;
-          start();
+          startOnboarding();
         }
       "
     />
-    <VOnboardingWrapper ref="wrapper" :steps="steps">
-      <template #default="{ previous, next, step, exit, isFirst, isLast, index }">
-        <OnboardingStep
-          v-bind="{ step, isFirst, isLast, index, stepsCount: steps.length }"
-          @next="next"
-          @previous="previous"
-          @exit="finish"
-        />
-      </template>
-    </VOnboardingWrapper>
+
+    <Onboarding v-if="shownOnboarding" />
   </div>
 </template>
diff --git a/src/WebUI/src/types/vite-components.d.ts b/src/WebUI/src/types/vite-components.d.ts
@@ -57,7 +57,9 @@ declare module 'vue' {
     MarkerSettlement: typeof import('./../components/strategus/map/markers/MarkerSettlement.vue')['default']
     Modal: typeof import('./../components/ui/Modal.vue')['default']
     NumericInput: typeof import('./../components/ui/NumericInput.vue')['default']
+    Onboarding: typeof import('./../components/onboarding/Onboarding.vue')['default']
     OnboardingStep: typeof import('./../components/onboarding/OnboardingStep.vue')['default']
+    OnboardingWrapper: typeof import('./../components/onboarding/OnboardingWrapper.vue')['default']
     OnlinePlayers: typeof import('./../components/app/OnlinePlayers.vue')['default']
     PartyMovementLine: typeof import('./../components/strategus/map/PartyMovementLine.vue')['default']
     PatchNotes: typeof import('./../components/app/PatchNotes.vue')['default']

diff --git a/src/WebUI/vite.config.ts b/src/WebUI/vite.config.ts
@@ -57,10 +57,6 @@ export default defineConfig({
     },
   },
 
-  define: {
-    'process.env.ES_BUILD': process.env.ES_BUILD,
-  },
-
   plugins: [
     // https://github.com/JohnCampionJr/vite-plugin-vue-layouts
     Layouts(),