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

proyecto26 · Nov 23, 2019 · 9c0adc7 · 9c0adc7
1 parent ee1482e
commit 9c0adc7
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 40 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,2 +1,7 @@
-react
-demo-*
+.github
+.stencil
+.editorconfig
+
+react/
+demo-*
+img/
diff --git a/README.md b/README.md
@@ -40,7 +40,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].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-ce/[email protected].2/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,17 +1,21 @@
 {
   "name": "@ion-phaser-ce/core",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "private": false,
   "description": "A web component to integrate Phaser Framework CE (Community Edition) with Angular, React, Vue, etc",
   "keywords": [
-    "ionic",
     "phaser-ce",
+    "canvas",
+    "webgl",
+    "pwa",
     "framework",
     "angular",
     "react",
     "vue",
     "app",
     "vanillajs",
+    "stencil",
+    "stenciljs",
     "webcomponent",
     "web component",
     "web components"
@@ -39,7 +43,7 @@
     "phaser-ce": "^2.13.3"
   },
   "devDependencies": {
-    "@stencil/core": "^1.7.1",
+    "@stencil/core": "^1.8.1",
     "phaser-ce": "^2.13.3",
     "rollup-plugin-node-polyfills": "^0.2.1"
   },

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.e2e.ts b/src/components/ion-phaser/ion-phaser.e2e.ts
@@ -5,7 +5,7 @@ describe('ion-phaser-ce', () => {
     const page = await newE2EPage();
 
     await page.setContent('<ion-phaser-ce></ion-phaser-ce>');
-    const element = await page.find('ion-phaser');
+    const element = await page.find('ion-phaser-ce');
     expect(element).toHaveClass('hydrated');
   });
 });
diff --git a/src/components/ion-phaser/ion-phaser.tsx b/src/components/ion-phaser/ion-phaser.tsx
@@ -13,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
    */
@@ -33,7 +40,7 @@ export class IonPhaser {
    */
   @Method()
   async getInstance(): Promise<Game> {
-    return this.getGameInstance()
+    return Promise.resolve(this.getGameInstance())
   }
 
   /**
@@ -49,19 +56,14 @@ export class IonPhaser {
 
   @Element() el: HTMLElement
 
-  initializeGame = () => {
-    console.log('initialize')
-    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 Phaser.Game(this.game)
-
-    console.log(this.game.instance)
+    game.parent = game.parent || this.el
+    game.instance = new Phaser.Game(game)
   }
 
   componentWillLoad() {

diff --git a/src/index.html b/src/index.html
@@ -109,26 +109,25 @@
       opacity: 1;
     }
 
-    .ion-phaser {
+    ion-phaser-ce {
       width: 100%;
       height: 100%;
     }
   </style>
 
 </head>
 <body>
-  <ion-phaser-ce class="ion-phaser"></ion-phaser-ce>
+  <ion-phaser-ce initialize="false" style="display: none;"></ion-phaser-ce>
   <div id="init" class="flex">
     <a href="#0" class="bttn">Initialize</a>
   </div>
   <script>
     const ionPhaser = document.querySelector('ion-phaser-ce');
-    const initButton = document.getElementById('init')
-    ionPhaser.initialize = false
+    const initButton = document.getElementById('init');
 
-    ionPhaser.game = {
-      width: "100%",
-      height: "100%",
+    const game = {
+      width: '100%',
+      height: '100%',
       renderer: Phaser.AUTO,
       state: {
         init: function() {
@@ -144,9 +143,9 @@
           this.helloWorld = this.game.add.text(
             this.game.world.centerX,
             this.game.world.centerY, 
-            "Hello World", { 
-              font: "40px Arial", 
-              fill: "#ffffff" 
+            'Hello World', { 
+              font: '40px Arial', 
+              fill: '#ffffff' 
             }
           );
           this.helloWorld.anchor.set(0.5);
@@ -157,9 +156,15 @@
       }
     }
 
-    initButton.addEventListener("click", function(){
-      ionPhaser.initialize = true
-      initButton.style.display = "none"
+    initButton.addEventListener('click', function(){
+      initButton.style.display = 'none';
+
+      ionPhaser.style.removeProperty('display');
+      ionPhaser.game = game;
+      ionPhaser.initialize = true;
+      ionPhaser.getInstance()
+        .then((i) => console.log(i))
+        .catch((error) => console.error(error))
     });
   </script>
 </body>