diff --git a/.eslintrc.json b/.eslintrc.json
index f93928f772e507355bccc801455002a3b4ebef84..d39862227e78dc98b5d902fd0a1bf84a23fa76b4 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -4,7 +4,8 @@
"sourceType": "module"
},
"plugins": [
- "prettier"
+ "prettier",
+ "react"
],
"rules": {
"prettier/prettier": "error",
@@ -12,6 +13,7 @@
"no-var": "error"
},
"extends": [
- "prettier"
+ "prettier",
+ "plugin:react/recommended"
]
-}
\ No newline at end of file
+}
diff --git a/package.json b/package.json
index 27f8ac63a900f2cbd48b272b556bdb924a54a816..1bf81a77a4b6a01a1d497fedc379a8ab73264873 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,9 @@
},
"devDependencies": {
"babel-core": "^6.26.0",
+ "babel-eslint": "^8.2.2",
"babel-loader": "^7.1.3",
+ "babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.1.3",
@@ -42,6 +44,7 @@
"eslint": "^4.10.0",
"eslint-config-prettier": "^2.6.0",
"eslint-plugin-prettier": "^2.3.1",
+ "eslint-plugin-react": "^7.7.0",
"extract-text-webpack-plugin": "4.0.0-alpha.0",
"file-loader": "^1.1.10",
"html-loader": "^0.5.5",
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
new file mode 100644
index 0000000000000000000000000000000000000000..a71e4e886abb9813d0b29cea868887ca60d17474
--- /dev/null
+++ b/src/react-components/ui-root.js
@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class UIRoot extends Component {
+ static propTypes = {
+ enterScene: PropTypes.func
+ };
+
+ componentDidMount = () => {
+ if (navigator.getVRDisplays()) {
+ }
+ }
+
+ render() {
+ return (
+ <button onClick={this.props.enterScene}>
+ Hello World!
+ </button>
+ );
+ }
+}
+
+export default UIRoot;
diff --git a/src/room.css b/src/room.css
index 6f2d31b19267d35ce5bd13324b42dcd834e7408d..b74a6c28f48547c09097cfc5b5d9b96119bb1ab9 100644
--- a/src/room.css
+++ b/src/room.css
@@ -11,3 +11,11 @@
background: #eaeaea no-repeat url("./assets/loading.gif") center center;
opacity: 0.9;
}
+
+#ui-root {
+ width: 0;
+ height: 0;
+ top: 0;
+ left: 0;
+ position: absolute;
+}
diff --git a/src/room.html b/src/room.html
index 703874897968615d777c03353392ae90a8fff6a4..05731ca27c45647aae83960d836e3a314557a5d0 100644
--- a/src/room.html
+++ b/src/room.html
@@ -196,6 +196,8 @@
xr="ar: false"
></a-entity>
</a-scene>
+
+ <div id="ui-root"></div>
</body>
</html>
diff --git a/src/room.js b/src/room.js
index c3ed3d28e188cdf100e4ff4fb09b556a8e4efcd9..a20f8653f15c912f180631c405a6bae032b86bb1 100644
--- a/src/room.js
+++ b/src/room.js
@@ -39,6 +39,10 @@ import "./components/skybox";
import "./components/layers";
import "./components/spawn-controller";
+import ReactDOM from "react-dom";
+import React from "react";
+import UIRoot from "./react-components/ui-root";
+
import "./systems/personal-space-bubble";
import "./elements/a-gltf-entity";
@@ -84,7 +88,7 @@ async function shareMedia(audio, video) {
}
}
-async function onSceneLoad() {
+async function enterScene() {
const qs = queryString.parse(location.search);
const scene = document.querySelector("a-scene");
@@ -147,5 +151,6 @@ function onConnect() {
}
document.addEventListener("DOMContentLoaded", () => {
- document.querySelector("a-scene").addEventListener("loaded", onSceneLoad);
+ ReactDOM.render(<UIRoot enterScene={enterScene} />, document.getElementById("ui-root"));
+ document.getElementById("loader").style.display = "none";
});
diff --git a/webpack.config.js b/webpack.config.js
index c543bb4b14e0eb971411b0ef754db993baa58b01..5079ba37c391a38468f98b9c44ce35730500ca4f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -88,6 +88,7 @@ module.exports = {
devServer: {
open: true,
https: createHTTPSConfig(),
+ host: "0.0.0.0",
port: 8080,
before: function(app) {
// networked-aframe makes HEAD requests to the server for time syncing. Respond with an empty body.
@@ -123,7 +124,10 @@ module.exports = {
include: [path.resolve(__dirname, "src")],
// Exclude JS assets in node_modules because they are already transformed and often big.
exclude: [path.resolve(__dirname, "node_modules")],
- loader: "babel-loader"
+ loader: "babel-loader",
+ query: {
+ plugins: ["transform-class-properties", "transform-object-rest-spread"]
+ }
},
{
test: /\.css$/,
diff --git a/yarn.lock b/yarn.lock
index 5d7227d3b072083e62066307e1564c2ef1904f75..836568aabfd25733bcb9ed65d34ef7f17f062d28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,75 @@
# yarn lockfile v1
+"@babel/code-frame@7.0.0-beta.40", "@babel/code-frame@^7.0.0-beta.40":
+ version "7.0.0-beta.40"
+ resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.40.tgz#37e2b0cf7c56026b4b21d3927cadf81adec32ac6"
+ dependencies:
+ "@babel/highlight" "7.0.0-beta.40"
+
+"@babel/generator@7.0.0-beta.40":
+ version "7.0.0-beta.40"
+ resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.40.tgz#ab61f9556f4f71dbd1138949c795bb9a21e302ea"
+ dependencies:
+ "@babel/types" "7.0.0-beta.40"
+ jsesc "^2.5.1"
+ lodash "^4.2.0"
+ source-map "^0.5.0"
+ trim-right "^1.0.1"
+
+"@babel/helper-function-name@7.0.0-beta.40":
+ version "7.0.0-beta.40"
+ resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.40.tgz#9d033341ab16517f40d43a73f2d81fc431ccd7b6"
+ dependencies:
+ "@babel/helper-get-function-arity" "7.0.0-beta.40"
+ "@babel/template" "7.0.0-beta.40"
+ "@babel/types" "7.0.0-beta.40"
+
+"@babel/helper-get-function-arity@7.0.0-beta.40":
+ version "7.0.0-beta.40"
+ resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.40.tgz#ac0419cf067b0ec16453e1274f03878195791c6e"
+ dependencies:
+ "@babel/types" "7.0.0-beta.40"
+
+"@babel/highlight@7.0.0-beta.40":
+ version "7.0.0-beta.40"
+ resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.40.tgz#b43d67d76bf46e1d10d227f68cddcd263786b255"
+ dependencies:
+ chalk "^2.0.0"
+ esutils "^2.0.2"
+ js-tokens "^3.0.0"
+
+"@babel/template@7.0.0-beta.40":
+ version "7.0.0-beta.40"
+ resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.40.tgz#034988c6424eb5c3268fe6a608626de1f4410fc8"
+ dependencies:
+ "@babel/code-frame" "7.0.0-beta.40"
+ "@babel/types" "7.0.0-beta.40"
+ babylon "7.0.0-beta.40"
+ lodash "^4.2.0"
+
+"@babel/traverse@^7.0.0-beta.40":
+ version "7.0.0-beta.40"
+ resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.40.tgz#d140e449b2e093ef9fe1a2eecc28421ffb4e521e"
+ dependencies:
+ "@babel/code-frame" "7.0.0-beta.40"
+ "@babel/generator" "7.0.0-beta.40"
+ "@babel/helper-function-name" "7.0.0-beta.40"
+ "@babel/types" "7.0.0-beta.40"
+ babylon "7.0.0-beta.40"
+ debug "^3.0.1"
+ globals "^11.1.0"
+ invariant "^2.2.0"
+ lodash "^4.2.0"
+
+"@babel/types@7.0.0-beta.40", "@babel/types@^7.0.0-beta.40":
+ version "7.0.0-beta.40"
+ resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.40.tgz#25c3d7aae14126abe05fcb098c65a66b6d6b8c14"
+ dependencies:
+ esutils "^2.0.2"
+ lodash "^4.2.0"
+ to-fast-properties "^2.0.0"
+
abbrev@1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"
@@ -375,6 +444,17 @@ babel-core@^6.26.0:
slash "^1.0.0"
source-map "^0.5.6"
+babel-eslint@^8.2.2:
+ version "8.2.2"
+ resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.2.tgz#1102273354c6f0b29b4ea28a65f97d122296b68b"
+ dependencies:
+ "@babel/code-frame" "^7.0.0-beta.40"
+ "@babel/traverse" "^7.0.0-beta.40"
+ "@babel/types" "^7.0.0-beta.40"
+ babylon "^7.0.0-beta.40"
+ eslint-scope "~3.7.1"
+ eslint-visitor-keys "^1.0.0"
+
babel-generator@^6.26.0:
version "6.26.1"
resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.1.tgz#1844408d3b8f0d35a404ea7ac180f087a601bd90"
@@ -1023,6 +1103,10 @@ babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0:
lodash "^4.17.4"
to-fast-properties "^1.0.3"
+babylon@7.0.0-beta.40, babylon@^7.0.0-beta.40:
+ version "7.0.0-beta.40"
+ resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.40.tgz#91fc8cd56d5eb98b28e6fde41045f2957779940a"
+
babylon@^6.17.3, babylon@^6.18.0:
version "6.18.0"
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
@@ -1940,7 +2024,7 @@ debug@2.6.9, debug@^2.0.0, debug@^2.1.0, debug@^2.2.0, debug@^2.3.3, debug@^2.6.
dependencies:
ms "2.0.0"
-debug@^3.1.0:
+debug@^3.0.1, debug@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
dependencies:
@@ -2103,7 +2187,7 @@ dns-txt@^2.0.2:
dependencies:
buffer-indexof "^1.0.0"
-doctrine@^2.1.0:
+doctrine@^2.0.2, doctrine@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
dependencies:
@@ -2365,7 +2449,16 @@ eslint-plugin-prettier@^2.3.1:
fast-diff "^1.1.1"
jest-docblock "^21.0.0"
-eslint-scope@^3.7.1:
+eslint-plugin-react@^7.7.0:
+ version "7.7.0"
+ resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.7.0.tgz#f606c719dbd8a1a2b3d25c16299813878cca0160"
+ dependencies:
+ doctrine "^2.0.2"
+ has "^1.0.1"
+ jsx-ast-utils "^2.0.1"
+ prop-types "^15.6.0"
+
+eslint-scope@^3.7.1, eslint-scope@~3.7.1:
version "3.7.1"
resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.1.tgz#3d63c3edfda02e06e01a452ad88caacc7cdcb6e8"
dependencies:
@@ -3002,7 +3095,7 @@ global@^4.3.2:
min-document "^2.19.0"
process "~0.5.1"
-globals@^11.0.1:
+globals@^11.0.1, globals@^11.1.0:
version "11.3.0"
resolved "https://registry.yarnpkg.com/globals/-/globals-11.3.0.tgz#e04fdb7b9796d8adac9c8f64c14837b2313378b0"
@@ -3469,7 +3562,7 @@ interpret@^1.0.0, interpret@^1.0.4:
version "1.1.0"
resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614"
-invariant@^2.2.1, invariant@^2.2.2:
+invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
version "2.2.3"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.3.tgz#1a827dfde7dcbd7c323f0ca826be8fa7c5e9d688"
dependencies:
@@ -3837,6 +3930,10 @@ jsesc@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
+jsesc@^2.5.1:
+ version "2.5.1"
+ resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.1.tgz#e421a2a8e20d6b0819df28908f782526b96dd1fe"
+
jsesc@~0.5.0:
version "0.5.0"
resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
@@ -3884,6 +3981,12 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"
+jsx-ast-utils@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f"
+ dependencies:
+ array-includes "^3.0.3"
+
killable@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/killable/-/killable-1.0.0.tgz#da8b84bd47de5395878f95d64d02f2449fe05e6b"
@@ -4049,7 +4152,7 @@ lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
-lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
+lodash@^4.11.1, lodash@^4.13.1, lodash@^4.14.0, lodash@^4.17.2, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.3.0:
version "4.17.5"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511"
@@ -6134,7 +6237,7 @@ source-map-url@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
-source-map@0.5.x, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0:
+source-map@0.5.x, source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.0:
version "0.5.7"
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
@@ -6500,6 +6603,10 @@ to-fast-properties@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
+to-fast-properties@^2.0.0:
+ version "2.0.0"
+ resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
+
to-object-path@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/to-object-path/-/to-object-path-0.3.0.tgz#297588b7b0e7e0ac08e04e672f85c1f4999e17af"