State of wizard.

domain-server/resources/web/web-new/.eslintrc.js

@@ -88,12 +88,20 @@ module.exports = {
     'import/no-extraneous-dependencies': 'off',
     'prefer-promise-reject-errors': 'off',
     'indent': ["error", 4],
+    'semi': ["error", "always"],
 
     // TypeScript
     quotes: ['warn', 'single', { avoidEscape: true }],
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
 
+    // TypeScript -> Remove these when we start using TypeScript in the project.
+    '@typescript-eslint/no-unsafe-assignment': 'off',
+    '@typescript-eslint/no-unsafe-call': 'off',
+    '@typescript-eslint/unbound-method': 'off',
+    '@typescript-eslint/no-unsafe-member-access': 'off',
+    '@typescript-eslint/no-floating-promises': 'off',
+
     // allow debugger during development only
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
   }

domain-server/resources/web/web-new/package-lock.json

@@ -8846,6 +8846,11 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
+    "three": {
+      "version": "0.132.2",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.132.2.tgz",
+      "integrity": "sha512-0wcR7LxxkXMn6Gi58gEs3QvY8WpTVXA31L2VOvpjm4ZPYFRHCZC13UqynheFoS5OXDYgtBneN0dhbaNBE8iLhQ=="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -9224,6 +9229,11 @@
         "spdx-expression-parse": "^3.0.0"
       }
     },
+    "vanta": {
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/vanta/-/vanta-0.5.21.tgz",
+      "integrity": "sha512-UYW6rYXVl8klFbQrhmgDMZ7SCys9hKROIuTlq5M+v6j346BPu1wqBwVRQPHiYsuooWkUYY6HSXV/9HrJBSuo6g=="
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

domain-server/resources/web/web-new/package.json

@@ -15,6 +15,8 @@
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
         "quasar": "^2.0.0",
+        "three": "^0.132.2",
+        "vanta": "^0.5.21",
         "vuex": "^4.0.1"
     },
     "devDependencies": {

domain-server/resources/web/web-new/quasar.conf.js

@@ -8,7 +8,7 @@
 
 /* eslint-env node */
 /* eslint-disable @typescript-eslint/no-var-requires */
-const { configure } = require('quasar/wrappers')
+const { configure } = require('quasar/wrappers');
 
 module.exports = configure(function (ctx) {
     return {
@@ -105,7 +105,7 @@ module.exports = configure(function (ctx) {
 
         // animations: 'all', // --- includes all animations
         // https://v2.quasar.dev/options/animations
-        animations: [],
+        animations: 'all',
 
         // https://v2.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
         ssr: {
@@ -224,5 +224,5 @@ module.exports = configure(function (ctx) {
                 // extendWebpackPreload also available besides this chainWebpackPreload
             }
         }
-    }
+    };
-})
+});

domain-server/resources/web/web-new/src/App.vue

@@ -2,9 +2,9 @@
     <router-view />
 </template>
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 export default defineComponent({
     name: 'App'
-})
+});
 </script>

domain-server/resources/web/web-new/src/boot/axios.ts

@@ -1,5 +1,5 @@
-import { boot } from 'quasar/wrappers'
+import { boot } from 'quasar/wrappers';
-import axios, { AxiosInstance } from 'axios'
+import axios, { AxiosInstance } from 'axios';
 
 declare module '@vue/runtime-core' {
     interface ComponentCustomProperties {
@@ -13,18 +13,18 @@ declare module '@vue/runtime-core' {
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
-const api = axios.create({ baseURL: 'https://api.example.com' })
+const api = axios.create({ baseURL: 'https://api.example.com' });
 
 export default boot(({ app }) => {
     // for use inside Vue files (Options API) through this.$axios and this.$api
 
-    app.config.globalProperties.$axios = axios
+    app.config.globalProperties.$axios = axios;
     // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
     //       so you won't necessarily have to import axios in each vue file
 
-    app.config.globalProperties.$api = api
+    app.config.globalProperties.$api = api;
     // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
     //       so you can easily perform requests against your app's API
-})
+});
 
-export { api }
+export { api };

domain-server/resources/web/web-new/src/layouts/FirstTimeWizard.vue

@@ -1,15 +1,75 @@
 <template>
-    <q-layout view="hHh lpR fFf">
+    <q-layout id="vantaBG" view="hHh lpR fFf">
         <q-page-container>
-            <router-view />
+            <div id="firstTimeWizardContainer">
+                <router-view />
+            </div>
         </q-page-container>
     </q-layout>
 </template>
 
-<script lang="ts">
+<script>
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
+
+import * as THREE from 'three';
 
 export default defineComponent({
-    name: 'FirstTimeWizard'
+    name: 'FirstTimeWizard',
-})
+    data () {
+        return {
+            vantaBG: null,
+            vantaRings: null,
+            refreshVantaTimeout: null,
+            DELAY_REFRESH_VANTA: 500
+        };
+    },
+    async mounted () {
+        window.THREE = THREE;
+        this.vantaRings = (await import('vanta/dist/vanta.rings.min')).default;
+
+        this.initVanta();
+
+        visualViewport.addEventListener('resize', this.onResize);
+    },
+    methods: {
+        onResize () {
+            if (this.refreshVantaTimeout) {
+                clearTimeout(this.refreshVantaTimeout);
+            }
+
+            this.refreshVantaTimeout = setTimeout(() => {
+                this.initVanta();
+                this.refreshVantaTimeout = null;
+            }, this.DELAY_REFRESH_VANTA);
+        },
+        initVanta () {
+            if (this.vantaBG) {
+                this.vantaBG.destroy();
+            }
+
+            this.vantaBG = this.vantaRings({
+                el: '#vantaBG',
+                mouseControls: false,
+                touchControls: false,
+                gyroControls: false,
+                minHeight: 200.00,
+                minWidth: 200.00,
+                scale: 1.00,
+                scaleMobile: 1.00,
+                color: 0x000000
+                // waveHeight: 20,
+                // shininess: 50,
+                // waveSpeed: 1.5,
+                // zoom: 0.75,
+                // backgroundColor: 0x4e97e1,
+                // backgroundAlpha: 0.40
+            });
+        }
+    },
+    beforeUnmount () {
+        if (this.vantaBG) {
+            this.vantaBG.destroy();
+        }
+    }
+});
 </script>

domain-server/resources/web/web-new/src/pages/Error404.vue

@@ -23,9 +23,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 export default defineComponent({
     name: 'Error404'
-})
+});
 </script>

domain-server/resources/web/web-new/src/pages/FirstTimeWizard/Index.vue

@@ -1,11 +1,288 @@
+<style lang="scss" scoped>
+    $firstTimeWizardContainerBGstart: rgba(0, 0, 0, 0.0);
+    $firstTimeWizardContainerBGend: rgba(0, 0, 0, 0.75);
+
+    #firstTimeWizardContainer {
+        background-color: $firstTimeWizardContainerBGend;
+
+        animation: firstTimeWizardContainerFadeIn 5s;
+        -webkit-animation: firstTimeWizardContainerFadeIn 5s;
+        -moz-animation: firstTimeWizardContainerFadeIn 5s;
+        -o-animation: firstTimeWizardContainerFadeIn 5s;
+        -ms-animation: firstTimeWizardContainerFadeIn 5s;
+    }
+
+    @keyframes firstTimeWizardContainerFadeIn {
+      0% {background-color: $firstTimeWizardContainerBGstart;}
+      100% {background-color: $firstTimeWizardContainerBGend}
+    }
+
+    @-moz-keyframes firstTimeWizardContainerFadeIn {
+        0% {background-color: $firstTimeWizardContainerBGstart;}
+        100% {background-color: $firstTimeWizardContainerBGend}
+    }
+
+    @-webkit-keyframes firstTimeWizardContainerFadeIn {
+        0% {background-color: $firstTimeWizardContainerBGstart;}
+        100% {background-color: $firstTimeWizardContainerBGend}
+    }
+
+    @-o-keyframes firstTimeWizardContainerFadeIn {
+        0% {background-color: $firstTimeWizardContainerBGstart;}
+        100% {background-color: $firstTimeWizardContainerBGend}
+    }
+
+    @-ms-keyframes firstTimeWizardContainerFadeIn {
+        0% {background-color: $firstTimeWizardContainerBGstart;}
+        100% {background-color: rgba(0, 0, 0, 0.5);}
+    }
+
+    .welcome {
+        color: white;
+    }
+
+    .wizardCard {
+        color: white;
+        background: none !important;
+        box-shadow: none !important;
+    }
+
+    .mainWizardStepper {
+        background: none !important;
+        box-shadow: none !important;
+    }
+
+    ::v-deep(.q-stepper__header) {
+        display: none !important;
+    }
+
+    ::v-deep(.q-panel) {
+        overflow: hidden !important;
+    }
+
+    .q-dialog__inner div {
+        box-shadow: none !important;
+    }
+</style>
+
 <template>
-    <h1>Wizard</h1>
+    <div
+        id="firstTimeWizardContainer"
+        class="window-height window-width"
+    >
+        <q-dialog
+            v-model="firstTimeWizardDialog"
+            class="overflow-hidden"
+            persistent
+            square
+            seamless
+        >
+            <div class="overflow-hidden">
+                <transition
+                    name="mode-fade"
+                    mode="out-in"
+                    appear
+                    enter-active-class="animated fadeIn"
+                    leave-active-class="animated fadeOut"
+                    :duration="MAIN_WIZARD_TRANSITION_TIME"
+                >
+                    <q-stepper
+                        v-show="mainWizard"
+                        v-model="mainWizardStep"
+                        class="mainWizardStepper overflow-hidden"
+                        ref="stepper"
+                        :animated="true"
+                        transition-prev="slide-right"
+                        transition-next="slide-left"
+                        style="width: 100%"
+                    >
+                        <q-step
+                            :name="1"
+                            title="Welcome"
+                            :done="mainWizardStep > 1"
+                        >
+                            <h2
+                                class="welcome text-weight-thin"
+                            >
+                                Welcome
+                            </h2>
+                        </q-step>
+
+                        <q-step
+                            :name="2"
+                            title="Begin Wizard"
+                            caption="Optional"
+                            :done="mainWizardStep > 2"
+                        >
+                            <q-card
+                                class="wizardCard"
+                            >
+                                <q-card-section>
+                                    <div class="text-h7 text-weight-light text-center">❤</div>
+                                    <div class="text-h6 text-weight-light text-center">Let's configure your virtual world.</div>
+                                </q-card-section>
+
+                                <q-card-actions vertical align="right">
+                                    <q-btn
+                                        @click="$refs.stepper.next()"
+                                        class="q-mb-md"
+                                        size="md"
+                                        outline
+                                        text-color="white"
+                                        icon-right="chevron_right"
+                                    >
+                                        Start
+                                    </q-btn>
+                                    <q-btn
+                                        size="sm"
+                                        flat
+                                    >
+                                        Skip Wizard
+                                    </q-btn>
+                                </q-card-actions>
+                            </q-card>
+                        </q-step>
+
+                        <q-step
+                            :name="3"
+                            title="Import"
+                            caption="Optional"
+                            :done="mainWizardStep > 3"
+                        >
+                            <q-card
+                                class="wizardCard"
+                            >
+                                <q-card-section>
+                                    <div class="text-h6 text-weight-light text-center">Import settings and/or content?</div>
+                                    <div class="text-h7 text-weight-light text-center">You can always do this later.</div>
+                                </q-card-section>
+
+                                <q-card-actions vertical align="right">
+                                    <q-btn
+                                        @click="$refs.stepper.next()"
+                                        class="q-mb-md"
+                                        size="md"
+                                        outline
+                                        text-color="white"
+                                        icon-right="chevron_right"
+                                    >
+                                        Continue
+                                    </q-btn>
+                                    <q-btn
+                                        class="q-mb-md"
+                                        size="sm"
+                                        outline
+                                        disabled
+                                        text-color="white"
+                                        icon-right="upload"
+                                    >
+                                        Import (coming soon)
+                                    </q-btn>
+                                    <q-btn
+                                        @click="$refs.stepper.previous()"
+                                        size="sm"
+                                        flat
+                                        icon-left="chevron_left"
+                                    >
+                                        Back
+                                    </q-btn>
+                                </q-card-actions>
+                            </q-card>
+                        </q-step>
+
+                        <q-step
+                            :name="4"
+                            title="Metaverse"
+                            caption="Optional"
+                            :done="mainWizardStep > 4"
+                        >
+                            <q-card
+                                class="wizardCard"
+                            >
+                                <q-card-section>
+                                    <div class="text-h6 text-weight-light text-center">Connect your world to your Metaverse account?</div>
+                                    <div class="text-h7 text-weight-light text-center">This can improve security and discovery for your world.</div>
+                                </q-card-section>
+
+                                <q-card-actions vertical align="right">
+                                    <q-btn
+                                        @click="connectMetaverseTriggered"
+                                        class="q-mb-md"
+                                        size="md"
+                                        outline
+                                        text-color="white"
+                                        icon-right="cloud"
+                                    >
+                                        Connect
+                                    </q-btn>
+                                    <q-btn
+                                        @click="$refs.stepper.next()"
+                                        class="q-mb-md"
+                                        size="sm"
+                                        outline
+                                        text-color="white"
+                                        icon-right="chevron_right"
+                                    >
+                                        Skip
+                                    </q-btn>
+                                    <q-btn
+                                        @click="$refs.stepper.previous()"
+                                        size="sm"
+                                        flat
+                                        icon-left="chevron_left"
+                                    >
+                                        Back
+                                    </q-btn>
+                                </q-card-actions>
+                            </q-card>
+                        </q-step>
+                    </q-stepper>
+                </transition>
+            </div>
+        </q-dialog>
+    </div>
 </template>
 
-<script lang="ts">
+<script>
-import { defineComponent } from 'vue'
+import { defineComponent, ref } from 'vue';
 
 export default defineComponent({
-    name: 'Index'
+    name: 'Index',
-})
+    data () {
+        return {
+            mainOverlay: true,
+            firstTimeWizardDialog: true,
+            welcomeText: true,
+            mainWizard: true,
+            mainWizardStep: ref(1),
+            // Consts
+            WELCOME_TEXT_TIMEOUT: 2000,
+            MAIN_WIZARD_TRANSITION_TIME: 1000,
+            DEFAULT_METAVERSE_URL: "https://metaverse.vircadia.com/live"
+        };
+    },
+    mounted () {
+        setTimeout(() => {
+            this.mainWizardStep++;
+        }, this.WELCOME_TEXT_TIMEOUT);
+    },
+    methods: {
+        connectMetaverseTriggered () {
+            const axios = require('axios');
+
+            axios.get('/api/metaverse')
+                .then(function (response) {
+                    // handle success
+                    console.log(response);
+                })
+                .catch(function (error) {
+                    // handle error
+                    console.log(error);
+                })
+                .then(function () {
+                    // always executed
+                });
+        }
+    }
+});
 </script>

domain-server/resources/web/web-new/src/pages/Index.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent } from 'vue';
 
 export default defineComponent({
     name: 'Index'
-})
+});
 </script>

domain-server/resources/web/web-new/src/router/index.ts

@@ -1,12 +1,12 @@
-import { route } from 'quasar/wrappers'
+import { route } from 'quasar/wrappers';
 import {
     createMemoryHistory,
     createRouter,
     createWebHashHistory,
     createWebHistory
-} from 'vue-router'
+} from 'vue-router';
-import { StateInterface } from '../store'
+import { StateInterface } from '../store';
-import routes from './routes'
+import routes from './routes';
 
 /*
  * If not building with SSR mode, you can
@@ -20,7 +20,7 @@ import routes from './routes'
 export default route<StateInterface>(function (/* { store, ssrContext } */) {
     const createHistory = process.env.SERVER
         ? createMemoryHistory
-        : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+        : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory);
 
     const Router = createRouter({
         scrollBehavior: () => ({ left: 0, top: 0 }),
@@ -32,7 +32,7 @@ export default route<StateInterface>(function (/* { store, ssrContext } */) {
         history: createHistory(
             process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
         )
-    })
+    });
 
-    return Router
+    return Router;
-})
+});

domain-server/resources/web/web-new/src/router/routes.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from 'vue-router'
+import { RouteRecordRaw } from 'vue-router';
 
 const routes: RouteRecordRaw[] = [
     {
@@ -18,6 +18,6 @@ const routes: RouteRecordRaw[] = [
         path: '/:catchAll(.*)*',
         component: () => import('pages/Error404.vue')
     }
-]
+];
 
-export default routes
+export default routes;

domain-server/resources/web/web-new/src/shims-vue.d.ts

@@ -1,6 +1,6 @@
 // Mocks all files ending in `.vue` showing them as plain Vue instances
 declare module '*.vue' {
-  import { ComponentOptions } from 'vue'
+  import { ComponentOptions } from 'vue';
-  const component: ComponentOptions
+  const component: ComponentOptions;
-  export default component
+  export default component;
 }

domain-server/resources/web/web-new/src/store/index.ts

@@ -1,10 +1,10 @@
-import { store } from 'quasar/wrappers'
+import { store } from 'quasar/wrappers';
-import { InjectionKey } from 'vue'
+import { InjectionKey } from 'vue';
 import {
     createStore,
     Store as VuexStore,
     useStore as vuexUseStore
-} from 'vuex'
+} from 'vuex';
 
 // import example from './module-example'
 // import { ExampleStateInterface } from './module-example/state';
@@ -33,7 +33,7 @@ declare module '@vue/runtime-core' {
 }
 
 // provide typings for `useStore` helper
-export const storeKey: InjectionKey<VuexStore<StateInterface>> = Symbol('vuex-key')
+export const storeKey: InjectionKey<VuexStore<StateInterface>> = Symbol('vuex-key');
 
 export default store(function (/* { ssrContext } */) {
     const Store = createStore<StateInterface>({
@@ -44,11 +44,11 @@ export default store(function (/* { ssrContext } */) {
         // enable strict mode (adds overhead!)
         // for dev mode and --debug builds only
         strict: !!process.env.DEBUGGING
-    })
+    });
 
-    return Store
+    return Store;
-})
+});
 
 export function useStore () {
-    return vuexUseStore(storeKey)
+    return vuexUseStore(storeKey);
 }

domain-server/resources/web/web-new/src/store/module-example/actions.ts

@@ -1,11 +1,11 @@
-import { ActionTree } from 'vuex'
+import { ActionTree } from 'vuex';
-import { StateInterface } from '../index'
+import { StateInterface } from '../index';
-import { ExampleStateInterface } from './state'
+import { ExampleStateInterface } from './state';
 
 const actions: ActionTree<ExampleStateInterface, StateInterface> = {
     someAction (/* context */) {
     // your code
     }
-}
+};
 
-export default actions
+export default actions;

domain-server/resources/web/web-new/src/store/module-example/getters.ts

@@ -1,11 +1,11 @@
-import { GetterTree } from 'vuex'
+import { GetterTree } from 'vuex';
-import { StateInterface } from '../index'
+import { StateInterface } from '../index';
-import { ExampleStateInterface } from './state'
+import { ExampleStateInterface } from './state';
 
 const getters: GetterTree<ExampleStateInterface, StateInterface> = {
     someAction (/* context */) {
     // your code
     }
-}
+};
 
-export default getters
+export default getters;

domain-server/resources/web/web-new/src/store/module-example/index.ts

@@ -1,9 +1,9 @@
-import { Module } from 'vuex'
+import { Module } from 'vuex';
-import { StateInterface } from '../index'
+import { StateInterface } from '../index';
-import state, { ExampleStateInterface } from './state'
+import state, { ExampleStateInterface } from './state';
-import actions from './actions'
+import actions from './actions';
-import getters from './getters'
+import getters from './getters';
-import mutations from './mutations'
+import mutations from './mutations';
 
 const exampleModule: Module<ExampleStateInterface, StateInterface> = {
     namespaced: true,
@@ -11,6 +11,6 @@ const exampleModule: Module<ExampleStateInterface, StateInterface> = {
     getters,
     mutations,
     state
-}
+};
 
-export default exampleModule
+export default exampleModule;

domain-server/resources/web/web-new/src/store/module-example/mutations.ts

@@ -1,10 +1,10 @@
-import { MutationTree } from 'vuex'
+import { MutationTree } from 'vuex';
-import { ExampleStateInterface } from './state'
+import { ExampleStateInterface } from './state';
 
 const mutation: MutationTree<ExampleStateInterface> = {
     someMutation (/* state: ExampleStateInterface */) {
     // your code
     }
-}
+};
 
-export default mutation
+export default mutation;

domain-server/resources/web/web-new/src/store/module-example/state.ts

@@ -5,7 +5,7 @@ export interface ExampleStateInterface {
 function state (): ExampleStateInterface {
     return {
         prop: false
-    }
+    };
 }
 
-export default state
+export default state;