Scale canvas 200% wide so no eye buffers on desktop

.stylelintrc

@@ -3,6 +3,7 @@
   "rules": {
     "indentation": 2,
 		"selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["local"] }],
+		"selector-type-no-unknown": [true, { "ignoreTypes": ["/^a-/"] }],
 		"no-descending-specificity": false
   }
 }

src/assets/stylesheets/hub.scss

@@ -7,7 +7,14 @@
 @import 'entry';
 @import 'audio';
 @import 'info-dialog';
-@import 'shared';
+
+body.vr-mode {
+  a-scene.fullscreen {
+    .a-canvas {
+      width: 200% !important;
+    }
+  }
+}
 
 .a-enter-vr, .a-orientation-modal {
   display: none;

src/components/hand-controls2.js

@@ -12,8 +12,6 @@ const POSES = {
   mrpDown: "mrpDown"
 };
 
-// TODO: If the hands or controllers are mispositioned, then rightHand.controllerPose and rightHand.pose
-//       should be bound differently.
 export const LEFT_CONTROLLER_OFFSETS = {
   default: new THREE.Matrix4(),
   "oculus-touch-controls": new THREE.Matrix4().makeTranslation(-0.025, -0.03, 0.1),

src/hub.js

@@ -317,6 +317,9 @@ document.addEventListener("DOMContentLoaded", async () => {
 
   window.APP.scene = scene;
 
+  scene.addEventListener("enter-vr", () => document.body.classList.add("vr-mode"));
+  scene.addEventListener("exit-vr", () => document.body.classList.remove("vr-mode"));
+
   registerNetworkSchemas();
 
   remountUI({