react-unity-webgl - npm Package Compare versions

Comparing version 5.6.0 to 5.7.0

lib/react-unity-webgl.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -10,3 +10,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
@@ -23,4 +23,2 @@ var _react2 = _interopRequireDefault(_react);
 
-require('./react-unity-webgl.css');
-
 var Message = function Message(gameObjectName, methodName, paramterValue) {
@@ -32,2 +30,4 @@ if (paramterValue == null) {
         module.exports.UnityInstance.SendMessage(gameObjectName, methodName, paramterValue);
+    } else {
+        console.warn("react-unity-webgl: you've sent a message to the " + "unity content, but it wasn't instantiated yet.");
     }
@@ -53,3 +53,3 @@ };
     _createClass(Unity, [{
-        key: 'componentDidMount',
+        key: "componentDidMount",
         value: function componentDidMount() {
@@ -59,9 +59,19 @@ this.instantiateUnityLoader();
     }, {
-        key: 'instantiateUnityLoader',
+        key: "instantiateUnityLoader",
         value: function instantiateUnityLoader() {
             var _this2 = this;
 
+            if (typeof UnityLoader === 'undefined') {
+                var errorText = "The UnityLoader was not defined, please add the script tag " + "to the base html and embed the UnityLoader.js file Unity exported.";
+                console.error(errorText);
+                this.setState({
+                    error: errorText
+                });
+                return;
+            }
             if (this.props.src == null) {
+                var _errorText = "Please provice a path to a valid JSON in the 'src' attribute.";
+                console.error(_errorText);
                 this.setState({
-                    error: "Please provice a path to a valid JSON in the 'src' attribute."
+                    error: _errorText
                 });
@@ -81,3 +91,3 @@ return;
     }, {
-        key: 'render',
+        key: "render",
         value: function render() {
@@ -91,13 +101,13 @@ if (this.state.error == null) {
     }, {
-        key: 'onUnableToRender',
+        key: "onUnableToRender",
         value: function onUnableToRender() {
             return _react2.default.createElement(
-                'div',
-                { className: 'unity-container' },
+                "div",
+                { className: "unity" },
                 _react2.default.createElement(
-                    'b',
+                    "b",
                     null,
-                    'React-Unity-Webgl error'
+                    "React-Unity-Webgl error"
                 ),
-                ':',
+                ":",
                 this.state.error
@@ -107,15 +117,15 @@ );
     }, {
-        key: 'onLoadedRender',
+        key: "onLoadedRender",
         value: function onLoadedRender() {
             return _react2.default.createElement(
-                'div',
-                { style: this.style },
-                _react2.default.createElement('div', { className: 'unity-container', id: 'unity-container' }),
+                "div",
+                { className: "unity" },
+                _react2.default.createElement("div", { className: "unity-container", id: "unity-container" }),
                 this.state.loaded == false && _react2.default.createElement(
-                    'div',
-                    { className: 'unity-loader' },
+                    "div",
+                    { className: "unity-loader" },
                     _react2.default.createElement(
-                        'div',
-                        { className: 'bar' },
-                        _react2.default.createElement('div', { className: 'fill', style: { width: this.state.progress * 100 + "%" } })
+                        "div",
+                        { className: "bar" },
+                        _react2.default.createElement("div", { className: "fill", style: { width: this.state.progress * 100 + "%" } })
                     )
@@ -122,0 +132,0 @@ )

package.json

 {
   "name": "react-unity-webgl",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "description": "A Unity WebGL component for your React application",
@@ -24,3 +24,3 @@ "main": "lib/react-unity-webgl.js",
   },
-  "homepage": "https://github.com/jeffreylanters/react-unity-webgl#readme",
+  "homepage": "https://jeffreylanters.nl/react-unity-webgl",
   "dependencies": {
@@ -31,4 +31,4 @@ "react": "15.4.2",
   "devDependencies": {
-    "babel": "^4.6.0",
-    "babel-cli": "^6.5.1",
+    "babel": "4.6.0",
+    "babel-cli": "6.5.1",
     "webpack": "2.2.1",
@@ -35,0 +35,0 @@ "babel-core": "6.22.1",

README.md

 # react-unity-webgl
-A Unity WebGL component for your React application.
+Easy to use Unity 5.6 or newer WebGL player component for your React application. Embed your Unity application in your react application for writing interactive interfaces with two way Unity and react communication.
 
+<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"/>
+
 # installation
-Install using npm. Make sure you download the version matching with your Unity version. I try to update this plugin in case of need as fast as possible.
+Install using npm. Make sure you download the version 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.
 
 ```sh
 # example
-$ npm install --save react-unity-webgl@5.6.0
+$ npm install --save react-unity-webgl
 ```
@@ -15,5 +17,8 @@
 
+> ### Notice
+> Don't forget to add a script tag to load the `UnityLoader.js` file, exported by Unity in your base html file.
+
 ```js
 import React, { Component } from 'react';
-import { Unity } from '/Projects/react-unity-webgl';
+import { Unity } from 'react-unity-webgl';
 
@@ -23,3 +28,3 @@ export class App extends Component {
         return (<div className="app">
-            <Unity src="Build/viewer.json" />
+            <Unity src="Build/myGame.json" />
         </div>)
@@ -35,3 +40,3 @@ }
 import React, { Component } from 'react';
-import { Message } from '/Projects/react-unity-webgl'
+import { Message } from 'react-unity-webgl'
 
@@ -56,17 +61,31 @@ export class Menu extends Component {
 ```scss
-/* Example styling */
-.unity-container {
-    canvas {
-        /* ... */
+.unity {
+    .unity-container {
+        canvas {
+            
+        }
     }
-}
-.unity-loader {
-    /* ... */
-    .bar {
-        /* ... */
-        .fill {
-            /* ... */
+    .unity-loader {
+        .bar {
+            .fill {
+                /* the width will be set by the component */
+            }
         }
     }
 }
+```
+
+# html example
+```html
+<!DOCTYPE html>
+<html lang="nl">
+    <head>
+        <title>My Unity Game</title>
+    </head>
+    <body>
+        <div id="app"></div>
+    </body>
+    <script src="build_unity/Build/UnityLoader.js"></script>
+    <script src="compiled/bundle.js"></script>
+</html>
 ```

source/react-unity-webgl.js

 import React, { Component } from 'react';
 
-require('./react-unity-webgl.css');
-
 const Message = ((gameObjectName, methodName, paramterValue) => {
@@ -14,2 +12,5 @@ if (paramterValue == null) {
             paramterValue);
+    } else {
+        console.warn ("react-unity-webgl: you've sent a message to the " 
+            + "unity content, but it wasn't instantiated yet.")
     }
@@ -31,12 +32,23 @@ });
     instantiateUnityLoader () {
+        if (typeof UnityLoader === 'undefined') {
+            let errorText = "The UnityLoader was not defined, please add the script tag " +
+                "to the base html and embed the UnityLoader.js file Unity exported.";
+            console.error(errorText);
+            this.setState({
+                error: errorText
+            });
+            return;
+        }
         if (this.props.src == null) {
+            let errorText = "Please provice a path to a valid JSON in the 'src' attribute.";
+            console.error(errorText);
             this.setState({
-                error: "Please provice a path to a valid JSON in the 'src' attribute."
+                error: errorText
             });
             return;
         }
-        let instance = UnityLoader.instantiate (
+        let instance = UnityLoader.instantiate(
             "unity-container", 
             this.props.src, {
-                onProgress: ((gameInstance, progress) => {
+                onProgress:((gameInstance, progress) => {
                     this.setState({
@@ -52,5 +64,5 @@ loaded: progress == 1,
         if (this.state.error == null) {
-            return this.onLoadedRender ();
+            return this.onLoadedRender();
         } else {
-            return this.onUnableToRender ();
+            return this.onUnableToRender();
         }
@@ -60,3 +72,3 @@ }
         return (
-            <div className="unity-container">
+            <div className="unity">
                 <b>React-Unity-Webgl error</b>: 
@@ -69,3 +81,3 @@ {this.state.error}
         return (
-            <div style={this.style}>
+            <div className="unity">
                 <div className="unity-container" id="unity-container"></div>
@@ -72,0 +84,0 @@ {this.state.loaded == false &&

New alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13376

increased by17.15%

Lines of code

207

increased by11.89%

Number of lines in readme file

87

increased by27.94%

Worsened metrics

Number of package files

7

decreased by-12.5%

Number of low quality alerts

1

increased byInfinity%

No dependency changes