diff --git a/scripts/system/configWizard/public/index.html b/scripts/system/configWizard/public/index.html
index d503fed77a..ee2b908a76 100644
--- a/scripts/system/configWizard/public/index.html
+++ b/scripts/system/configWizard/public/index.html
@@ -12,11 +12,20 @@
html,
body {
background-color: transparent !important;
+ overflow: hidden !important; /* Hide scrollbars */
}
-
+
.theme--dark.v-application {
background-color: transparent !important;
}
+
+ .v-text-field input {
+ font-size: 1.3em;
+ }
+
+ .v-text-field label {
+ font-size: 1.3em;
+ }
</style>
</head>
<body>
diff --git a/scripts/system/configWizard/src/App.vue b/scripts/system/configWizard/src/App.vue
index d1f851dbbc..c9161c95cc 100644
--- a/scripts/system/configWizard/src/App.vue
+++ b/scripts/system/configWizard/src/App.vue
@@ -10,10 +10,6 @@
//
-->
-<script>
-/* eslint-disable */
-</script>
-
<template>
<v-app>
<v-main>
@@ -25,7 +21,7 @@
<script>
import FirstRunWizard from './components/FirstRunWizard';
-var vue_this;
+// var vue_this;
function browserDevelopment() {
if (typeof EventBridge !== 'undefined') {
@@ -79,7 +75,7 @@ export default {
},
created: function () {
- vue_this = this;
+ // vue_this = this;
this.$vuetify.theme.dark = this.useDarkTheme;
this.sendMessageToScript('ready', '');
diff --git a/scripts/system/configWizard/src/components/FirstRunWizard.vue b/scripts/system/configWizard/src/components/FirstRunWizard.vue
index 1645e498c7..f49a7d771f 100644
--- a/scripts/system/configWizard/src/components/FirstRunWizard.vue
+++ b/scripts/system/configWizard/src/components/FirstRunWizard.vue
@@ -39,10 +39,19 @@
</v-stepper-step>
<v-divider></v-divider>
-
+
<v-stepper-step
:complete="stepperModel > 4"
step="4"
+ >
+ Nickname
+ </v-stepper-step>
+
+ <v-divider></v-divider>
+
+ <v-stepper-step
+ :complete="stepperModel > 5"
+ step="5"
>
Ready!
</v-stepper-step>
@@ -69,7 +78,9 @@
First, we need to select some performance and graphics quality options. <br/><br/>
Press <b style="color: white;">Continue</b> when you are ready.
</v-card-subtitle>
-
+
+ <v-divider></v-divider>
+
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
@@ -97,32 +108,37 @@
</v-img>
<v-card-text>
- <v-radio-group v-model="performancePreset">
+ <v-radio-group
+ mandatory
+ v-model="performancePreset"
+ >
<template v-slot:label>
<div class="text-h5 font-weight-light mb-5">
- What level of visual quality do you want?<br/>
+ What level of visual quality would you like?<br/>
<b>Remember! If you do not have a powerful computer, you may want to set this to low or medium at most.</b>
</div>
</template>
- <v-radio>
+ <v-radio value="1">
<template v-slot:label>
- <div class="text-h5"><strong class="green--text">Low Quality</strong>; Average Laptop / Slow Computer</div>
+ <div class="text-h5"><strong class="green--text">Low Quality</strong> Average Laptop / Slow Computer</div>
</template>
</v-radio>
- <v-radio>
+ <v-radio value="2">
<template v-slot:label>
- <div class="text-h5"><strong class="blue--text">Medium Quality</strong> Average Computer</div>
+ <div class="text-h5"><strong class="blue--text">Medium Quality</strong> Average Computer - <b><i>Recommended</i></b></div>
</template>
</v-radio>
- <v-radio>
+ <v-radio value="3">
<template v-slot:label>
- <div class="text-h5"><strong class="red--text">High Quality</strong>; Gaming Computer</div>
+ <div class="text-h5"><strong class="red--text">High Quality</strong> Gaming Computer</div>
</template>
</v-radio>
</v-radio-group>
</v-card-text>
+ <v-divider></v-divider>
+
<v-card-actions>
<v-btn
color="primary"
@@ -180,6 +196,8 @@
</v-radio>
</v-radio-group>
</v-card-text>
+
+ <v-divider></v-divider>
<v-card-actions>
<v-btn
@@ -202,6 +220,54 @@
</v-stepper-content>
<v-stepper-content step="4">
+ <v-card>
+ <v-img
+ height="80px"
+ src="/assets/1920_bar.png"
+ >
+ <v-card-title
+ class="text-h3 font-weight-light"
+ >
+ Display Name
+ </v-card-title>
+ </v-img>
+
+ <v-card-text>
+ <div class="text-h5 font-weight-light mb-5">
+ What should people call you?<br/>
+ This is simply a nickname, it will be shown in place of your username (if you have one).
+ </div>
+
+ <v-text-field
+ label="Display Name"
+ v-model="displayName"
+ placeholder="Don't be shy!"
+ ></v-text-field>
+ </v-card-text>
+
+ <v-divider></v-divider>
+
+ <v-card-actions>
+ <v-btn
+ color="primary"
+ @click="stepperModel--"
+ x-large
+ >
+ Back
+ </v-btn>
+ <v-spacer></v-spacer>
+ <v-btn
+ color="primary"
+ @click="stepperModel++"
+ x-large
+ >
+ Continue
+ </v-btn>
+ </v-card-actions>
+ </v-card>
+ </v-stepper-content>
+
+ <v-stepper-content step="5">
<v-card>
<v-img
height="80px"
@@ -221,6 +287,8 @@
Take a look at the controls reference after completing this wizard.<br/>
Press <b style="color: white;">Complete</b> when you are ready.
</v-card-subtitle>
+
+ <v-divider></v-divider>
<v-card-actions>
<v-btn
@@ -255,7 +323,8 @@ export default {
'command': 'complete-wizard',
'data': {
'performancePreset': this.performancePreset,
- 'refreshRateProfile': this.refreshRateProfile
+ 'refreshRateProfile': this.refreshRateProfile,
+ 'displayName': this.displayName
}
}
@@ -269,7 +338,8 @@ export default {
data: () => ({
stepperModel: 1,
performancePreset: 0,
- refreshRateProfile: 0
+ refreshRateProfile: 0,
+ displayName: ''
})
}
</script>
diff --git a/scripts/system/onFirstRun.js b/scripts/system/onFirstRun.js
index 65c1d06ec5..deb5dee562 100644
--- a/scripts/system/onFirstRun.js
+++ b/scripts/system/onFirstRun.js
@@ -13,20 +13,66 @@
//
(function() { // BEGIN LOCAL_SCOPE
+ // Check to see if we should run this script or bail...
var SETTING_TO_CHECK = 'firstRun';
- var DEFAULT_DISPLAY_NAME = '';
-
+
if (!Settings.getValue(SETTING_TO_CHECK, false)) {
return;
}
- if (MyAvatar.displayName === '') {
- var selectedDisplayName = Window.prompt('Enter a display name.', MyAvatar.displayName);
+ // If this is our first run then proceed...
- if (selectedDisplayName === '') {
+ var configWizardEntityID;
+ var DEFAULT_DISPLAY_NAME = '';
+
+ if (!PlatformInfo.has3DHTML()) {
+ if (MyAvatar.displayName === '') {
+ var selectedDisplayName = Window.prompt('Enter a display name.', MyAvatar.displayName);
+ setDisplayName(selectedDisplayName);
+ }
+ } else {
+ configWizardEntityID = Entities.addEntity({
+ type: 'Web',
+ sourceUrl: Script.resolvePath("./configWizard/dist/index.html"),
+ maxFPS: 60,
+ dpi: 20,
+ useBackground: false,
+ grab: {
+ grabbable: false
+ },
+ position: Vec3.sum(MyAvatar.position, Vec3.multiplyQbyV(MyAvatar.orientation, { x: 0, y: 0, z: -2.25 })),
+ rotation: MyAvatar.orientation,
+ dimensions: { x: 1.4, y: 0.75, z: 0 }
+ }, 'local');
+
+ Entities.webEventReceived.connect(onWebAppEventReceived);
+ }
+
+ function setDisplayName(displayName) {
+ if (displayName === '') {
MyAvatar.displayName = DEFAULT_DISPLAY_NAME;
} else {
- MyAvatar.displayName = selectedDisplayName;
+ MyAvatar.displayName = displayName;
}
}
+
+ function onWebAppEventReceived(sendingEntityID, event) {
+ if (sendingEntityID === configWizardEntityID) {
+ var eventJSON = JSON.parse(event);
+ if (eventJSON.command === "complete-wizard") {
+ Performance.setPerformancePreset(eventJSON.data.performancePreset);
+ Performance.setRefreshRateProfile(eventJSON.data.refreshRateProfile);
+ setDisplayName(eventJSON.data.displayName);
+ Entities.deleteEntity(configWizardEntityID);
+ Entities.webEventReceived.disconnect(onWebAppEventReceived);
+ }
+ }
+ }
+
+ Script.scriptEnding.connect(function () {
+ if (configWizardEntityID) {
+ Entities.deleteEntity(configWizardEntityID);
+ Entities.webEventReceived.disconnect(onWebAppEventReceived);
+ }
+ });
}());