Merge pull request #849 from mozilla/feature/authed-scene-update

Feature/authed scene update, take 2

package.json

@@ -44,6 +44,7 @@
     "form-urlencoded": "^2.0.4",
     "hls.js": "^0.12.2",
     "jsonschema": "^1.2.2",
+    "jsonwebtoken": "^8.4.0",
     "jszip": "^3.1.5",
     "markdown-it": "^8.4.2",
     "moving-average": "^1.0.0",
@@ -58,6 +59,8 @@
     "react-infinite-scroller": "^1.2.2",
     "react-intl": "^2.4.0",
     "react-linkify": "^0.2.2",
+    "react-router": "^4.3.1",
+    "react-router-dom": "^4.3.1",
     "react-youtube": "^7.8.0",
     "screenfull": "^3.3.2",
     "super-hands": "github:mozillareality/aframe-super-hands-component#feature/drawing",

src/assets/stylesheets/entry.scss

@@ -8,7 +8,7 @@
   position: relative;
 }
 
-:local(.collapse) {
+:local(.info-button) {
   @extend %fa-icon-button;
   color: $action-color;
   display: inline;
@@ -85,6 +85,10 @@
   height: 100%;
   width: 100%;
 
+  a {
+    text-decoration: none;
+  }
+
   :local(.title) {
     @extend %top-title;
     @extend %glass-text;
@@ -120,7 +124,7 @@
     @extend %default-font;
     font-size: 1.1em;
     color: $action-color;
-    cursor: pointer;
+    text-decoration: none;
     font-weight: bold;
     display: flex;
     align-items: center;
@@ -204,3 +208,18 @@
     }
   }
 }
+
+:local(.back) {
+  @extend %fa-icon-button;
+
+  display: flex;
+  position: absolute;
+  top: 12px;
+  left: 26px;
+  font-size: 1.0em;
+  font-weight: bold;
+
+  i {
+    margin-right: 18px;
+  }
+}

src/assets/stylesheets/index.scss

@@ -80,6 +80,19 @@ body {
       }
     }
   }
+
+  :local(.sign-in) {
+    flex: 3;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+
+    a {
+      text-decoration: underline;
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
 }
 
 :local(.video-container) {

src/assets/translations.data.json

@@ -40,6 +40,7 @@
     "entry.return-to-vr": "Return to VR",
     "entry.enter-in-vr": "Enter in VR",
     "entry.lobby": "Lobby",
+    "entry.back": "Back",
     "entry.notify_me": "Notify me when others are here",
     "profile.save": "Accept",
     "profile.display_name.validation_warning": "Alphanumerics and hyphens. At least 3 characters, no more than 32",
@@ -72,6 +73,8 @@
     "presence.join_lobby": "joined the lobby.",
     "presence.leave": "left.",
     "presence.name_change": "is now known as",
+    "presence.scene_change": "changed the scene to",
+    "presence.hub_name_change": "changed the name of the room to",
     "presence.in_lobby": "Lobby",
     "presence.in_room": "In Room",
     "home.room_create_options": "options",
@@ -126,6 +129,8 @@
     "commands.fly": "Toggle fly mode.",
     "commands.grow": "Increase your avatar's size.",
     "commands.shrink": "Decrease your avatar's size.",
+    "commands.scene": "Change the scene.",
+    "commands.rename": "Rename the room.",
     "commands.help": "Show help.",
     "commands.leave": "Disconnect from the room.",
     "commands.duck": "The duck tested well. Quack.",

src/components/character-controller.js

@@ -36,6 +36,10 @@ AFRAME.registerComponent("character-controller", {
     this.snapRotateRight = this.snapRotateRight.bind(this);
     this.setAngularVelocity = this.setAngularVelocity.bind(this);
     this.handleTeleport = this.handleTeleport.bind(this);
+    this.el.sceneEl.addEventListener("nav-mesh-loaded", () => {
+      this.navGroup = null;
+      this.navNode = null;
+    });
   },
 
   update: function() {