Fixed eslint issues, react configuration and added validations to cre…

…ate the phaser game instance

.eslintrc.json2

@@ -0,0 +1,16 @@
+{
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "extends": [
+    "plugin:@stencil/recommended"
+  ],
+  "rules": {
+    "@stencil/strict-mutable": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "16.7"
+    }
+  }
+}

README.md

@@ -42,7 +42,7 @@ Looking for [Phaser Framework 3](https://github.com/photonstorm/phaser)? Check [
 
 ### Script tag
 
-- Put a script tag similar to this `<script src='https://unpkg.com/@ion-phaser-ce/[email protected].2/dist/ionphaser.js'></script>` in the head of your index.html
+- Put a script tag similar to this `<script src='https://unpkg.com/@ion-phaser-ce/[email protected].3/dist/ionphaser.js'></script>` in the head of your index.html
 - Then you can use the element anywhere in your template, JSX, html etc
 
 ### Node Modules
@@ -193,7 +193,7 @@ When using a wrapper component, It's not necessary to access the reference direc
 ```tsx
 import React, { Component } from 'react'
 import Phaser from 'phaser-ce'
-import { IonPhaser } from '@ion-phaser-ce/react'
+import { IonPhaserCe } from '@ion-phaser-ce/react'
 
 class App extends Component {
   state = {
@@ -208,7 +208,7 @@ class App extends Component {
   render() {
     const { initialize, game } = this.state
     return (
-      <IonPhaser game={game} initialize={initialize} />
+      <IonPhaserCe game={game} initialize={initialize} />
     )
   }
 }

demo-react/.npmrc

@@ -0,0 +1 @@
+package-lock=false

demo-react/package.json

@@ -4,10 +4,15 @@
   "private": true,
   "dependencies": {
     "@ion-phaser-ce/react": "file:../react",
+    "@types/jest": "^25.2.1",
+    "@types/node": "^13.13.4",
+    "@types/react": "^16.9.34",
+    "@types/react-dom": "^16.9.7",
     "phaser-ce": "^2.13.3",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "react-scripts": "3.1.1"
+    "react-scripts": "^3.4.1",
+    "typescript": "^3.8.3"
   },
   "scripts": {
     "start": "react-scripts start",

demo-react/src/App.css

@@ -117,7 +117,7 @@ a.bttn-dark:focus {
   }
 }
 
-.game {
+ion-phaser-ce {
   z-index: 1;
   position: absolute;
   width: 100%;

demo-react/src/App.tsx

@@ -0,0 +1,77 @@
+import React, { Component } from 'react'
+import { IonPhaserCe } from '@ion-phaser-ce/react'
+import Phaser from 'phaser-ce'
+import logo from './assets/logo.png'
+
+import './App.css'
+
+class MainState extends Phaser.State {
+  private helloWorld!: Phaser.Text
+
+  init() {
+    this.stage.backgroundColor = '#24252A';
+  }
+  create() {
+    this.helloWorld = this.game.add.text(
+      this.game.world.centerX, 
+      this.game.world.centerY, 
+      "Hello World", { 
+        font: "40px Arial", 
+        fill: "#ffffff" 
+      }
+    );
+    this.helloWorld.anchor.set(0.5);
+  }
+  update() {
+    this.helloWorld.angle += 1;
+  }
+} 
+
+const game: Phaser.IGameConfig = {
+  width: "100%",
+  height: "100%",
+  renderer: Phaser.AUTO,
+  state: MainState
+}
+
+class App extends Component {
+
+  state = {
+    initialize: false
+  }
+
+  initializeGame = () => {
+    this.setState({ initialize: true })
+  }
+
+  destroy = () => {
+    this.setState({ initialize: false })
+  }
+
+  render() {
+    const { initialize } = this.state
+    return (
+      <div className="App">
+        <header className="App-header">
+          { initialize ? (
+            <>
+              <IonPhaserCe class="game" game={game} initialize={initialize} />
+              <div onClick={this.destroy} className="flex destroyButton">
+                <a href="#1" className="bttn">Destroy</a>
+              </div>
+            </>
+          ) : (
+            <>
+              <img src={logo} className="App-logo" alt="logo" />
+              <div onClick={this.initializeGame} className="flex">
+                <a href="#1" className="bttn">Initialize</a>
+              </div>
+            </>
+          )}
+        </header>
+      </div>
+    );
+  }
+}
+
+export default App;

demo-react/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

demo-react/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src"
+  ]
+}

demo-vue/.npmrc

@@ -0,0 +1 @@
+package-lock=false