Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-11 13:42:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

State of wizard.

Browse source
This commit is contained in:
Kalila L 2021-09-04 05:22:20 -04:00
parent 8f51de62f2
commit 31fef9f9de
19 changed files with 431 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
domain-server/resources/web/web-new/.eslintrc.js
View file

@ -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'
}

10
domain-server/resources/web/web-new/package-lock.json generated
View file

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

2
domain-server/resources/web/web-new/package.json
View file

@ -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": {

8
domain-server/resources/web/web-new/quasar.conf.js
View file

@ -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
}
}
}
})
};
});

4
domain-server/resources/web/web-new/src/App.vue
View file

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

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

@ -1,5 +1,5 @@
import { boot } from 'quasar/wrappers'
import axios, { AxiosInstance } from 'axios'
import { boot } from 'quasar/wrappers';
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 };

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

@ -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">
import { defineComponent } from 'vue'
<script>
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>

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

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

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

@ -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">
import { defineComponent } from 'vue'
<script>
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>

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

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

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

@ -1,12 +1,12 @@
import { route } from 'quasar/wrappers'
import { route } from 'quasar/wrappers';
import {
createMemoryHistory,
createRouter,
createWebHashHistory,
createWebHistory
} from 'vue-router'
import { StateInterface } from '../store'
import routes from './routes'
} from 'vue-router';
import { StateInterface } from '../store';
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;
});

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

@ -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;

6
domain-server/resources/web/web-new/src/shims-vue.d.ts vendored
View file

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

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

@ -1,10 +1,10 @@
import { store } from 'quasar/wrappers'
import { InjectionKey } from 'vue'
import { store } from 'quasar/wrappers';
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);
}

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

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

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

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

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

@ -1,9 +1,9 @@
import { Module } from 'vuex'
import { StateInterface } from '../index'
import state, { ExampleStateInterface } from './state'
import actions from './actions'
import getters from './getters'
import mutations from './mutations'
import { Module } from 'vuex';
import { StateInterface } from '../index';
import state, { ExampleStateInterface } from './state';
import actions from './actions';
import getters from './getters';
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;

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

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

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

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