Tracking de l'application VApp (IHM du jeu)

VApp/node_modules/vuetify/lib/components/VParallax/VParallax.css

@@ -0,0 +1,7 @@
+.v-parallax {
+  position: relative;
+  overflow: hidden;
+}
+.v-parallax--active > .v-img__img {
+  will-change: transform;
+}

VApp/node_modules/vuetify/lib/components/VParallax/VParallax.mjs

@@ -0,0 +1,96 @@
+import { createVNode as _createVNode, resolveDirective as _resolveDirective } from "vue";
+// Styles
+import "./VParallax.css";
+
+// Components
+import { VImg } from "../VImg/index.mjs"; // Composables
+import { useDisplay } from "../../composables/index.mjs";
+import { makeComponentProps } from "../../composables/component.mjs";
+import { useIntersectionObserver } from "../../composables/intersectionObserver.mjs";
+import { useResizeObserver } from "../../composables/resizeObserver.mjs"; // Utilities
+import { computed, onBeforeUnmount, ref, watch, watchEffect } from 'vue';
+import { clamp, genericComponent, getScrollParent, propsFactory, useRender } from "../../util/index.mjs"; // Types
+function floor(val) {
+  return Math.floor(Math.abs(val)) * Math.sign(val);
+}
+export const makeVParallaxProps = propsFactory({
+  scale: {
+    type: [Number, String],
+    default: 0.5
+  },
+  ...makeComponentProps()
+}, 'VParallax');
+export const VParallax = genericComponent()({
+  name: 'VParallax',
+  props: makeVParallaxProps(),
+  setup(props, _ref) {
+    let {
+      slots
+    } = _ref;
+    const {
+      intersectionRef,
+      isIntersecting
+    } = useIntersectionObserver();
+    const {
+      resizeRef,
+      contentRect
+    } = useResizeObserver();
+    const {
+      height: displayHeight
+    } = useDisplay();
+    const root = ref();
+    watchEffect(() => {
+      intersectionRef.value = resizeRef.value = root.value?.$el;
+    });
+    let scrollParent;
+    watch(isIntersecting, val => {
+      if (val) {
+        scrollParent = getScrollParent(intersectionRef.value);
+        scrollParent = scrollParent === document.scrollingElement ? document : scrollParent;
+        scrollParent.addEventListener('scroll', onScroll, {
+          passive: true
+        });
+        onScroll();
+      } else {
+        scrollParent.removeEventListener('scroll', onScroll);
+      }
+    });
+    onBeforeUnmount(() => {
+      scrollParent?.removeEventListener('scroll', onScroll);
+    });
+    watch(displayHeight, onScroll);
+    watch(() => contentRect.value?.height, onScroll);
+    const scale = computed(() => {
+      return 1 - clamp(+props.scale);
+    });
+    let frame = -1;
+    function onScroll() {
+      if (!isIntersecting.value) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        const el = (root.value?.$el).querySelector('.v-img__img');
+        if (!el) return;
+        const scrollHeight = scrollParent instanceof Document ? document.documentElement.clientHeight : scrollParent.clientHeight;
+        const scrollPos = scrollParent instanceof Document ? window.scrollY : scrollParent.scrollTop;
+        const top = intersectionRef.value.getBoundingClientRect().top + scrollPos;
+        const height = contentRect.value.height;
+        const center = top + (height - scrollHeight) / 2;
+        const translate = floor((scrollPos - center) * scale.value);
+        const sizeScale = Math.max(1, (scale.value * (scrollHeight - height) + height) / height);
+        el.style.setProperty('transform', `translateY(${translate}px) scale(${sizeScale})`);
+      });
+    }
+    useRender(() => _createVNode(VImg, {
+      "class": ['v-parallax', {
+        'v-parallax--active': isIntersecting.value
+      }, props.class],
+      "style": props.style,
+      "ref": root,
+      "cover": true,
+      "onLoadstart": onScroll,
+      "onLoad": onScroll
+    }, slots));
+    return {};
+  }
+});
+//# sourceMappingURL=VParallax.mjs.map

VApp/node_modules/vuetify/lib/components/VParallax/VParallax.sass

@@ -0,0 +1,6 @@
+.v-parallax
+  position: relative
+  overflow: hidden
+
+  &--active > .v-img__img
+    will-change: transform

VApp/node_modules/vuetify/lib/components/VParallax/index.d.mts

@@ -0,0 +1,170 @@
+import * as vue from 'vue';
+import { ComponentPropsOptions, ExtractPropTypes } from 'vue';
+
+interface FilterPropsOptions<PropsOptions extends Readonly<ComponentPropsOptions>, Props = ExtractPropTypes<PropsOptions>> {
+    filterProps<T extends Partial<Props>, U extends Exclude<keyof Props, Exclude<keyof Props, keyof T>>>(props: T): Partial<Pick<T, U>>;
+}
+
+declare const VParallax: {
+    new (...args: any[]): vue.CreateComponentPublicInstance<{
+        scale: string | number;
+        style: vue.StyleValue;
+    } & {
+        class?: any;
+    } & {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            default?: (() => vue.VNodeChild) | undefined;
+            placeholder?: (() => vue.VNodeChild) | undefined;
+            error?: (() => vue.VNodeChild) | undefined;
+            sources?: (() => vue.VNodeChild) | undefined;
+        };
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+            placeholder?: false | (() => vue.VNodeChild) | undefined;
+            error?: false | (() => vue.VNodeChild) | undefined;
+            sources?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+    }, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & {
+        scale: string | number;
+        style: vue.StyleValue;
+    } & {
+        class?: any;
+    } & {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            default?: (() => vue.VNodeChild) | undefined;
+            placeholder?: (() => vue.VNodeChild) | undefined;
+            error?: (() => vue.VNodeChild) | undefined;
+            sources?: (() => vue.VNodeChild) | undefined;
+        };
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+            placeholder?: false | (() => vue.VNodeChild) | undefined;
+            error?: false | (() => vue.VNodeChild) | undefined;
+            sources?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+    }, {
+        scale: string | number;
+        style: vue.StyleValue;
+    }, true, {}, vue.SlotsType<Partial<{
+        default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        placeholder: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        error: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+        sources: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+            [key: string]: any;
+        }>[];
+    }>>, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, {
+        scale: string | number;
+        style: vue.StyleValue;
+    } & {
+        class?: any;
+    } & {
+        $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+            default?: (() => vue.VNodeChild) | undefined;
+            placeholder?: (() => vue.VNodeChild) | undefined;
+            error?: (() => vue.VNodeChild) | undefined;
+            sources?: (() => vue.VNodeChild) | undefined;
+        };
+        'v-slots'?: {
+            default?: false | (() => vue.VNodeChild) | undefined;
+            placeholder?: false | (() => vue.VNodeChild) | undefined;
+            error?: false | (() => vue.VNodeChild) | undefined;
+            sources?: false | (() => vue.VNodeChild) | undefined;
+        } | undefined;
+    } & {
+        "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
+        "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+    }, {}, {}, {}, {}, {
+        scale: string | number;
+        style: vue.StyleValue;
+    }>;
+    __isFragment?: undefined;
+    __isTeleport?: undefined;
+    __isSuspense?: undefined;
+} & vue.ComponentOptionsBase<{
+    scale: string | number;
+    style: vue.StyleValue;
+} & {
+    class?: any;
+} & {
+    $children?: vue.VNodeChild | (() => vue.VNodeChild) | {
+        default?: (() => vue.VNodeChild) | undefined;
+        placeholder?: (() => vue.VNodeChild) | undefined;
+        error?: (() => vue.VNodeChild) | undefined;
+        sources?: (() => vue.VNodeChild) | undefined;
+    };
+    'v-slots'?: {
+        default?: false | (() => vue.VNodeChild) | undefined;
+        placeholder?: false | (() => vue.VNodeChild) | undefined;
+        error?: false | (() => vue.VNodeChild) | undefined;
+        sources?: false | (() => vue.VNodeChild) | undefined;
+    } | undefined;
+} & {
+    "v-slot:default"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:placeholder"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:error"?: false | (() => vue.VNodeChild) | undefined;
+    "v-slot:sources"?: false | (() => vue.VNodeChild) | undefined;
+}, {}, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, Record<string, any>, string, {
+    scale: string | number;
+    style: vue.StyleValue;
+}, {}, string, vue.SlotsType<Partial<{
+    default: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    placeholder: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    error: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+    sources: () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+        [key: string]: any;
+    }>[];
+}>>> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & FilterPropsOptions<{
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
+    scale: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}, vue.ExtractPropTypes<{
+    class: vue.PropType<any>;
+    style: {
+        type: vue.PropType<vue.StyleValue>;
+        default: null;
+    };
+    scale: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: number;
+    };
+}>>;
+type VParallax = InstanceType<typeof VParallax>;
+
+export { VParallax };

VApp/node_modules/vuetify/lib/components/VParallax/index.mjs

@@ -0,0 +1,2 @@
+export { VParallax } from "./VParallax.mjs";
+//# sourceMappingURL=index.mjs.map

VApp/node_modules/vuetify/lib/components/VParallax/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["VParallax"],"sources":["../../../src/components/VParallax/index.ts"],"sourcesContent":["export { VParallax } from './VParallax'\n"],"mappings":"SAASA,SAAS"}