webui: onboarding

src/WebUI/package.json

@@ -38,6 +38,7 @@
     "qs": "^6.11.2",
     "ufo": "^1.3.1",
     "uuid": "^9.0.1",
+    "v-onboarding": "^2.6.0",
     "vue": "^3.3.7",
     "vue-i18n": "^9.6.1",
     "vue-leaflet-markercluster": "^0.5.1",

src/WebUI/src/assets/themes/oruga-tailwind/index.css

@@ -1,5 +1,6 @@
 @import './fonts.css';
 @import 'vue-slider-component/theme/default.css';
+@import 'v-onboarding/dist/style.css';
 
 @import './components/button.css';
 @import './components/icon.css';
@@ -28,6 +29,12 @@
 @import './components/select.css';
 @import './components/drop.css';
 
+:root {
+  --v-onboarding-step-z: 9000;
+  --v-onboarding-overlay-z: 8000;
+  --v-onboarding-step-arrow-background:#272723;
+}
+
 * {
   scrollbar-width: thin;
   scrollbar-color: var(--secondary) var(--primary);

src/WebUI/src/components/onboarding/Onboarding.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { VOnboardingWrapper, useVOnboarding } from 'v-onboarding';
+import type { VOnboardingWrapperOptions } from 'v-onboarding/src/types/VOnboardingWrapper';
+import { asyncPoll } from '@/utils/poll';
+
+const router = useRouter();
+
+const wrapper = ref(null);
+const { start, goToStep, finish } = useVOnboarding(wrapper);
+
+const tryFindAttachToElement = (elSelector: string) =>
+  asyncPoll(
+    async () =>
+      Promise.resolve({
+        done: await Promise.resolve(Boolean(document.querySelector(elSelector))),
+      }),
+    50,
+    10
+  );
+
+// TODO:
+
+/*
+Default Layout
+  - header
+    - online players
+    - gold
+    - heirlooms
+    - settings
+  - footer
+    - socials, patreon
+    - HH timetable
+
+Character
+  - selector: select, active, create new
+  - settings (edit, delete)
+  - sub-pages
+    - overview
+      - common area (Overview)
+      - actions
+       - respec
+       - retire
+       - tournament
+    - inventory (empty?)
+      - items grid
+        - sort/search/filters
+        - drag&drop
+        - click - detail window
+      - doll
+      - stats
+    - characteristic
+      - common tips/links
+      - convert
+    - builder?
+      - TODO
+    - stats (exp/gold)
+      - TODO
+
+Clan
+  - create, join, armory, team balance
+
+*/
+
+const steps = [
+  {
+    attachTo: { element: '[data-o8="common-layout-header-online-players"]' },
+    tags: ['common'],
+    content: {
+      title: 'TODO:',
+      description: 'TODO:',
+    },
+  },
+  {
+    attachTo: { element: '[data-o8="common-layout-header-user-gold"]' },
+    tags: ['common'],
+    content: {
+      title: 'TODO:',
+      description: 'TODO:',
+    },
+  },
+  {
+    attachTo: { element: '[data-o8="common-layout-header-user-heirloom"]' },
+    tags: ['common'],
+    content: {
+      title: 'TODO:',
+      description: 'TODO:',
+    },
+  },
+  {
+    attachTo: { element: '[data-o8="common-layout-header-user-media"]' },
+    tags: ['common'],
+    content: {
+      title: 'TODO:',
+      description: 'TODO:',
+    },
+  },
+  {
+    attachTo: { element: '[data-o8="common-layout-header-settings"]' },
+    tags: ['common'],
+    content: {
+      title: 'TODO:',
+      description: 'TODO:',
+    },
+  },
+  {
+    attachTo: { element: '[data-o8="common-layout-footer-socials"]' },
+    tags: ['common'],
+    content: {
+      title: 'TODO:',
+      description: 'TODO:',
+    },
+  },
+  {
+    attachTo: { element: '[data-o8="common-layout-footer-hh-timetable"]' },
+    tags: ['common'],
+    content: {
+      title: 'TODO:',
+      description: 'TODO:',
+    },
+  },
+  // {
+  //   attachTo: { element: '[data-s-d22]' },
+  //   tags: ['common'],
+  //   content: {
+  //     title: 'TODO:',
+  //     description: 'TODO:',
+  //   },
+  //   on: {
+  //     beforeStep: async (options: any) => {
+  //       await router.push({ name: 'Clans' });
+  //       await tryFindAttachToElement(options.step.attachTo.element);
+  //     },
+  //   },
+  // },
+];
+
+const wrapperOptions = {
+  popper: {
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 10],
+        },
+      },
+    ],
+  },
+} as VOnboardingWrapperOptions;
+
+onMounted(start);
+</script>
+
+<template>
+  <div class="fixed bottom-24 right-0 z-10">
+    <OButton variant="primary" outlined size="xl" iconLeft="tag" :label="`Start onboarding`" />
+  </div>
+
+  <VOnboardingWrapper ref="wrapper" :steps="steps" :options="wrapperOptions">
+    <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>

src/WebUI/src/components/onboarding/OnboardingStep.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useMagicKeys, whenever } from '@vueuse/core';
+import type { StepEntity } from 'v-onboarding/src/types/StepEntity';
+
+import { VOnboardingStep } from 'v-onboarding';
+
+interface Step extends StepEntity {
+  tags: string[];
+}
+
+const emit = defineEmits<{
+  next: [];
+  previous: [];
+  exit: [];
+}>();
+
+defineProps<{
+  step: Step;
+  isFirst: boolean;
+  isLast: boolean;
+  index: number;
+  stepsCount: number;
+}>();
+
+const { escape, arrowRight, arrowLeft } = useMagicKeys();
+
+whenever(escape, () => emit('exit'));
+whenever(arrowRight, () => emit('next'));
+whenever(arrowLeft, () => emit('previous'));
+</script>
+
+<template>
+  <VOnboardingStep>
+    <div class="relative min-w-[24rem] max-w-[30rem] rounded-lg bg-base-300">
+      <OButton
+        class="!absolute right-4 top-4"
+        iconRight="close"
+        rounded
+        size="2xs"
+        variant="secondary"
+        @click="$emit('exit')"
+      />
+
+      <header class="px-6 pt-4">
+        <Tag v-for="tag in step.tags" variant="info" :label="tag" />
+      </header>
+
+      <div class="prose prose-invert px-6 py-2">
+        <h3 v-if="step.content.title">
+          {{ step.content.title }}
+        </h3>
+        <div v-if="step.content.description" v-html="step.content.description" />
+      </div>
+
+      <footer class="px-6 pb-4 pt-2">
+        <div class="flex items-center justify-end gap-2">
+          <OButton
+            v-if="!isFirst"
+            variant="secondary"
+            size="sm"
+            :label="`Previous`"
+            iconLeft="arrow-left"
+            @click="$emit('previous')"
+          />
+
+          <OButton
+            variant="primary"
+            size="sm"
+            :label="isLast ? 'Finish' : 'Next'"
+            :iconRight="!isLast ? 'arrow-right' : undefined"
+            @click="$emit('next')"
+          />
+        </div>
+      </footer>
+
+      <div class="border-t border-border-300 px-4 py-2">
+        <div class="flex items-center justify-between gap-8">
+          <div class="text-primary">
+            {{ `${index + 1}/${stepsCount}` }}
+          </div>
+
+          <div class="flex items-center gap-4">
+            <KbdGroup :keys="['→', '←']" :label="`to navigate`" />
+            <KbdGroup :keys="['ESC']" :label="`to close`" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </VOnboardingStep>
+</template>

src/WebUI/src/components/ui/Kbd.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <kbd
+    class="rounded-md border border-border-300 px-2 py-1.5 text-2xs text-2xs font-semibold leading-none"
+  >
+    <slot />
+  </kbd>
+</template>

src/WebUI/src/components/ui/KbdGroup.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{
+  label: string;
+  keys: string[];
+}>();
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <div class="flex gap-2">
+      <Kbd v-for="key in keys">{{ key }}</Kbd>
+    </div>
+    <span class="text-2xs">{{ label }}</span>
+  </div>
+</template>