Release version 1.3.0

Author: jdnichollsc

README.md

@@ -38,7 +38,7 @@ Looking for [Phaser Framework CE (Community Edition)](https://github.com/photons
 
 ### Script tag
 
-- Put a script tag similar to this `<script src='https://unpkg.com/@ion-phaser/core@1.2.3/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/core@1.3.0/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

demo-angular/package.json

@@ -19,7 +19,7 @@
     "@angular/platform-browser": "~8.0.0",
     "@angular/platform-browser-dynamic": "~8.0.0",
     "@angular/router": "~8.0.0",
-    "@ion-phaser/core": "file:..",
+    "@ion-phaser/core": "^1.3.0",
     "phaser": "^3.19.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",

demo-angular/src/app/app.component.ts

@@ -19,7 +19,7 @@ class CommonScene extends Phaser.Scene {
       this.cameras.main.centerY, 
       "Hello World", { 
         font: "40px Arial", 
-        fill: "#ffffff" 
+        color: "#ffffff" 
       }
     );
     this.helloWorld.setOrigin(0.5);

demo-react/package.json

@@ -3,16 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ion-phaser/react": "^1.2.2",
+    "@ion-phaser/react": "^1.3.0",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.13.4",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
-    "phaser": "^3.23.0",
+    "phaser": "^3.53.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1",
-    "typescript": "^3.8.3"
+    "typescript": "^4.0.0"
   },
   "scripts": {
     "start": "react-scripts start",

demo-react/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import Phaser from 'phaser'
 import { IonPhaser, GameInstance } from '@ion-phaser/react'
 import logo from './assets/logo.png'
@@ -18,7 +18,7 @@ class MainScene extends Phaser.Scene {
       this.cameras.main.centerY, 
       "Hello World", { 
         font: "40px Arial", 
-        fill: "#ffffff" 
+        color: "#ffffff" 
       }
     );
     this.helloWorld.setOrigin(0.5);
@@ -54,11 +54,12 @@ const gameConfig: GameInstance = {
 };
 
 export default function App () {
+  const gameRef = useRef<HTMLIonPhaserElement>()
   const [game, setGame] = useState<GameInstance>()
   const [initialize, setInitialize] = useState(false)
 
   const destroy = () => {
-    console.log('Instance', game?.instance)
+    gameRef.current?.destroy()
     setInitialize(false)
     setGame(undefined)
   }
@@ -74,7 +75,7 @@ export default function App () {
       <header className="App-header">
         { initialize ? (
           <>
-            <IonPhaser game={game} initialize={initialize} />
+            <IonPhaser ref={gameRef} game={game} initialize={initialize} />
             <div onClick={destroy} className="flex destroyButton">
               <a href="#1" className="bttn">Destroy</a>
             </div>

demo-react/src/index.css

@@ -6,6 +6,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
 }
 
 code {

demo-vue/package.json

@@ -10,8 +10,8 @@
   "dependencies": {
     "core-js": "^2.6.5",
     "vue": "^2.6.10",
-    "phaser": "3.19.0",
-    "@ion-phaser/core": "file:.."
+    "phaser": "3.53.1",
+    "@ion-phaser/core": "^1.3.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.11.0",