Added watch for game prop to fix issues initializing the phaser game

proyecto26 · Nov 23, 2019 · 6a096fe · 6a096fe
1 parent 919a266
commit 6a096fe
Show file tree

Hide file tree

Showing 8 changed files with 192 additions and 29 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,3 +1,8 @@
 node_modules
-react
-demo-*
+.github
+.stencil
+.editorconfig
+
+react/
+demo-*
+img/
diff --git a/README.md b/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.0/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.2.1/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

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,16 +1,21 @@
 {
   "name": "@ion-phaser/core",
-  "version": "1.2.0",
+  "version": "1.2.1",
+  "private": false,
   "description": "A web component to integrate Phaser Framework with Angular, React, Vue, etc",
   "keywords": [
-    "ionic",
     "phaser",
+    "canvas",
+    "webgl",
+    "pwa",
     "framework",
     "angular",
     "react",
     "vue",
     "app",
     "vanillajs",
+    "stencil",
+    "stenciljs",
     "webcomponent",
     "web component",
     "web components"
@@ -31,24 +36,19 @@
     "build": "stencil build --docs",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll"
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate"
   },
   "peerDependencies": {
     "phaser": "^3.19.0"
   },
   "devDependencies": {
     "phaser": "^3.19.0",
-    "@stencil/core": "~1.5.3",
-    "@types/jest": "24.0.18",
-    "@types/puppeteer": "1.19.1",
-    "jest": "24.9.0",
-    "jest-cli": "24.9.0",
-    "puppeteer": "1.19.0"
+    "@stencil/core": "^1.8.1"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/proyecto26/ion-phaser.git"
-  },
-  "private": false
+  }
 }
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -1,3 +1,4 @@
+/* eslint-disable */
 /* tslint:disable */
 /**
  * This is an autogenerated file created by the Stencil compiler.

diff --git a/src/components/ion-phaser/ion-phaser.css b/src/components/ion-phaser/ion-phaser.css
@@ -0,0 +1,3 @@
+ion-phaser {
+  display: block;
+}
diff --git a/src/components/ion-phaser/ion-phaser.tsx b/src/components/ion-phaser/ion-phaser.tsx
@@ -4,6 +4,7 @@ import { GameInstance } from '../models'
 
 @Component({
   tag: 'ion-phaser',
+  styleUrl: 'ion-phaser.css',
   shadow: false
 })
 export class IonPhaser {
@@ -12,9 +13,16 @@ export class IonPhaser {
    */
   @Prop({
     mutable: true,
-    reflectToAttr: true
+    reflect: true
   }) game: GameInstance
 
+  @Watch('game')
+  onGameChange(game: GameInstance) {
+    if (this.initialize && !this.getGameInstance()) {
+      this.initializeGame(game)
+    }
+  }
+
   /**
    * To initialize the plugin manually
    */
@@ -32,7 +40,7 @@ export class IonPhaser {
    */
   @Method()
   async getInstance(): Promise<Game> {
-    return this.getGameInstance()
+    return Promise.resolve(this.getGameInstance())
   }
 
   /**
@@ -48,16 +56,14 @@ export class IonPhaser {
 
   @Element() el: HTMLElement
 
-  initializeGame = () => {
-    if(!this.game){
-      throw new Error("The configuration of the game is required")
-    }
-    if(this.game.instance){
+  initializeGame = (game = this.game) => {
+    if(!game) return
+    if(game.instance){
       throw new Error("A Phaser game already exist")
     }
 
-    this.game.parent = this.game.parent || this.el
-    this.game.instance = new Game(this.game)
+    game.parent = game.parent || this.el
+    game.instance = new Game(game)
   }
 
   componentWillLoad() {

diff --git a/src/index.html b/src/index.html
@@ -112,16 +112,15 @@
 
 </head>
 <body>
-  <ion-phaser></ion-phaser>
+  <ion-phaser initialize="false"></ion-phaser>
   <div id="init" class="flex">
     <a href="#0" class="bttn">Initialize</a>
   </div>
   <script>
     const ionPhaser = document.querySelector('ion-phaser');
-    const initButton = document.getElementById('init')
-    ionPhaser.initialize = false
+    const initButton = document.getElementsByClassName('bttn')[0];
 
-    ionPhaser.game = {
+    const game = {
       width: "100%",
       height: "100%",
       type: Phaser.AUTO,
@@ -146,8 +145,13 @@
       }
     }
 
-    initButton.addEventListener("click", function(){
-      ionPhaser.initialize = true
+    initButton.addEventListener("click", function (){
+      ionPhaser.game = game;
+      ionPhaser.initialize = true;
+
+      ionPhaser.getInstance()
+        .then((i) => console.log(i))
+        .catch((error) => console.error(error))
     });
   </script>
 </body>