Merge pull request #10 from jeffreylanters/development

Jeffrey Lanters · web-flow · commit ba5202befb64 · 2017-12-06T22:21:31.000+01:00
6.2.0
diff --git a/README.md b/README.md
@@ -3,23 +3,41 @@ When building content for the web, you might need to communicate with other elem
 
 <img src="http://react-etc.net/files/2016-07/logo-578x270.png" height="50px"/> <img src="http://gamepadable.com/wp-content/uploads/2016/01/Official_unity_logo.png" height="50px"/>
 
+<img src="https://media.giphy.com/media/3o6fIRrpHHfMXwxMSk/giphy.gif" width="300px">
+
+
+
+
+
+- [Installation](#installation)
+- [Usage](#usage)
+    - [Optional attributes](#optional-attributes)
+        - [Width and height](#width-and-height)
+        - [Tracking progression](#tracking-progression)
+        - [Modules](#modules)
+- [Calling Unity scripts functions from JavaScript in React](#calling-unity-scripts-functions-from-javascript-in-react)
+- [Calling JavaScript functions within React from Unity scripts](#calling-javascript-functions-within-react-from-unity-scripts)
+- [Notes](#notes)
+    - [5.x to 6.x Upgrade note](#5x-to-6x-upgrade-note)
+- [Contributing](#contributing)
+
 
 
 
 
 # Installation
-Install using npm. Make sure you download the release matching with your Unity version. I try to update this plugin in case of need as fast as possible. Check the [releases on GitHub](https://github.com/jeffreylanters/react-unity-webgl/releases) for the corresponding version.
+Install using npm. Make sure you download the release matching with your Unity version. I try to update this plugin in case of need as fast as possible. Check the [releases on GitHub](https://github.com/jeffreylanters/react-unity-webgl/releases) for the corresponding version or [view on NPM](https://www.npmjs.com/package/react-unity-webgl).
 
 ```sh
-$ npm install --save react-unity-webgl
+$ npm install react-unity-webgl
 ```
 
 
 
 
 
 # Usage
-To get started import the default Unity class from react-unity-webgl.
+To get started import the default Unity class from react-unity-webgl and include it in your render while giving the public path to your src and loader files.
 
 ```js
 import React from 'react';
@@ -28,20 +46,22 @@ import Unity from 'react-unity-webgl';
 export class App extends React.Component {
     render () {
         return <Unity 
-            src='Build/myGame.json' 
-            loader='Build/UnityLoader.js' />
+            src='Public/Build/myGame.json' 
+            loader='Public/Build/UnityLoader.js' />
     }
 }
 ```
 ## Optional attributes
 
-### Overruling the module
+### Width and height
+The default width and height is 100%
 ```js
-this.myCustomModule = { ... }
-<Unity ... module={ this.myCustomModule } />
+<Unity ... width='500px' height='350px' />
+<Unity ... width='50%' height='50%' />
 ```
 
 ### Tracking progression
+The loading progression of the Unity player will be a value between 0 and 1
 ```js
 <Unity ... onProgress={ this.onProgress } />
 onProgress (progression) {
@@ -51,6 +71,13 @@ onProgress (progression) {
 }
 ```
 
+### Modules
+Overrides the module object
+```js
+this.myCustomModule = { ... }
+<Unity ... module={ this.myCustomModule } />
+```
+
 
 
 
@@ -132,7 +159,7 @@ Legacy ways of calling JavaScript code from Unity. You can use the Application.E
 
 
 # Notes
-Make sure your Unity build is in your public folder, this is due to the component **and** Unity itself will load files in Runtime and not Compile time. 
+Make sure your Unity build is in your public folder, this is due to the component **and** Unity itself will load files in Runtime and not Compile/Bundle time. 
 ## 5.x to 6.x Upgrade note
 When upgrading from 5.x to 6.x, make sure you add the `loader` prop to the Unity component and remove the script tag from your HTML page refering to the UnityLoader.js file. See [Usage](#usage) for further details.
 
diff --git a/lib/Styles.js b/lib/Styles.js
@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.default = {
+    unity: {
+        width: '100%',
+        height: '100%'
+    }
+};
diff --git a/lib/Unity.js b/lib/Unity.js
@@ -14,6 +14,10 @@ var _UnityLoaderService = require('./UnityLoaderService');
 
 var _UnityLoaderService2 = _interopRequireDefault(_UnityLoaderService);
 
+var _Styles = require('./Styles');
+
+var _Styles2 = _interopRequireDefault(_Styles);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -31,8 +35,6 @@ var Unity = function (_Component) {
         var _this = _possibleConstructorReturn(this, (Unity.__proto__ || Object.getPrototypeOf(Unity)).call(this, props));
 
         _this.state = {
-            progress: 0,
-            loaded: false,
             error: null
         };
         _this.unityLoaderService = new _UnityLoaderService2.default();
@@ -44,6 +46,11 @@ var Unity = function (_Component) {
         value: function componentDidMount() {
             this.instantiate();
         }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            this.unityLoaderService.unmount();
+        }
     }, {
         key: 'instantiate',
         value: function instantiate() {
@@ -59,51 +66,41 @@ var Unity = function (_Component) {
                 this.setState({ error: error });
             } else {
                 this.unityLoaderService.append(this.props.loader).then(function () {
-                    module.exports.UnityInstance = UnityLoader.instantiate('unity-container', _this2.props.src, {
-                        onProgress: function onProgress(gameInstance, progress) {
-                            _this2.setState({
-                                loaded: progress === 1,
-                                progress: progress
-                            });
-                        },
+                    var unityInstance = UnityLoader.instantiate('unity', _this2.props.src, {
+                        onProgress: _this2.onProgress.bind(_this2),
                         Module: _this2.props.module
                     });
+                    module.exports.UnityInstance = unityInstance;
                 });
             }
         }
+    }, {
+        key: 'onProgress',
+        value: function onProgress(unityInstance, progression) {
+            if (typeof this.props.onProgress !== 'undefined') {
+                this.props.onProgress(progression);
+            }
+        }
+    }, {
+        key: 'getContainerStyles',
+        value: function getContainerStyles() {
+            return {
+                width: this.props.width || '100%',
+                height: this.props.height || '100%'
+            };
+        }
     }, {
         key: 'render',
         value: function render() {
-            if (this.state.error !== null) {
-                return _react2.default.createElement(
-                    'div',
-                    { className: 'unity' },
-                    _react2.default.createElement(
-                        'b',
-                        null,
-                        'React-Unity-Webgl error'
-                    ),
-                    ' ',
-                    this.state.error
-                );
-            }
             return _react2.default.createElement(
                 'div',
-                { className: 'unity' },
-                _react2.default.createElement(
-                    'div',
+                { className: 'unity', style: this.getContainerStyles() },
+                this.state.error !== null ? _react2.default.createElement(
+                    'b',
                     null,
-                    _react2.default.createElement('div', { className: 'unity-container', id: 'unity-container' })
-                ),
-                this.state.loaded === false && _react2.default.createElement(
-                    'div',
-                    { className: 'unity-loader' },
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'bar' },
-                        _react2.default.createElement('div', { className: 'fill', style: { width: this.state.progress * 100 + '%' } })
-                    )
-                )
+                    'React-Unity-Webgl error ',
+                    this.state.error
+                ) : _react2.default.createElement('div', { style: _Styles2.default.unity, id: 'unity' })
             );
         }
     }]);
diff --git a/lib/UnityLoaderService.js b/lib/UnityLoaderService.js
@@ -11,22 +11,34 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
 var UnityLoaderServer = function () {
     function UnityLoaderServer() {
         _classCallCheck(this, UnityLoaderServer);
+
+        this.documentHead = document.getElementsByTagName('head')[0];
+        this.unityLoaderScript = null;
     }
 
     _createClass(UnityLoaderServer, [{
         key: 'append',
         value: function append(src) {
+            var _this = this;
+
             return new Promise(function (resolve, reject) {
-                var unityLoaderScript = document.createElement('script');
-                unityLoaderScript.type = 'text/javascript';
-                unityLoaderScript.async = true;
-                unityLoaderScript.src = src;
-                unityLoaderScript.onload = function () {
+                _this.unityLoaderScript = document.createElement('script');
+                _this.unityLoaderScript.type = 'text/javascript';
+                _this.unityLoaderScript.async = true;
+                _this.unityLoaderScript.src = src;
+                _this.unityLoaderScript.onload = function () {
                     resolve();
                 };
-                document.getElementsByTagName('head')[0].appendChild(unityLoaderScript);
+                _this.documentHead.appendChild(_this.unityLoaderScript);
             });
         }
+    }, {
+        key: 'unmount',
+        value: function unmount() {
+            if (this.unityLoaderScript !== null) {
+                this.documentHead.removeChild(this.unityLoaderScript);
+            }
+        }
     }]);
 
     return UnityLoaderServer;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-unity-webgl",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "description": "A Unity WebGL component for your React application",
   "main": "lib/index.js",
   "scripts": {
diff --git a/source/Styles.js b/source/Styles.js
@@ -0,0 +1,6 @@
+export default {
+    unity: {
+        width: '100%',
+        height: '100%'
+    }
+}
diff --git a/source/Unity.js b/source/Unity.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import UnityLoaderService from './UnityLoaderService'
+import Styles from './Styles'
 
 export default class Unity extends Component {
     constructor (props) {
@@ -42,13 +43,19 @@ export default class Unity extends Component {
             this.props.onProgress (progression)
         }
     }
+    getContainerStyles () {
+        return {
+            width: this.props.width || '100%',
+            height: this.props.height || '100%'
+        }
+    }
     render () {
         return (
-            <div className='unity'>
+            <div className='unity' style={this.getContainerStyles ()}>
                 {this.state.error !== null ? (
                     <b>React-Unity-Webgl error {this.state.error}</b>
                 ):(
-                    <div id='unity'></div>
+                    <div style={Styles.unity} id='unity'></div>
                 )}
             </div>
         )

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "react-unity-webgl",`
`3`		`- "version": "6.1.0",`
	`3`	`+ "version": "6.2.0",`
`4`	`4`	`"description": "A Unity WebGL component for your React application",`
`5`	`5`	`"main": "lib/index.js",`
`6`	`6`	`"scripts": {`