Improve example project

.auditignore

@@ -1,2 +1,3 @@
 https://npmjs.com/advisories/12
 https://npmjs.com/advisories/577
+https://npmjs.com/advisories/663

CHANGELOG.md

@@ -23,6 +23,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Update `@robotlegsjs/pixi` to version `1.0.0` (see #69).
 
+- Improve `webpack` configuration used to run example project. The `npm start` script will generate hashed files (to avoid browser cache) and open the broswer automatically (see #70).
+
 - Update `karma` setup to generate code coverage report only for `src` folder (see #57).
 
 - Migrate to Headless Chrome and improve performance of Karma (see #65).

example/Game.ts

@@ -0,0 +1,44 @@
+// ------------------------------------------------------------------------------
+//  Copyright (c) 2017-present, RobotlegsJS. All Rights Reserved.
+//
+//  NOTICE: You are permitted to use, modify, and distribute this file
+//  in accordance with the terms of the license agreement accompanying it.
+// ------------------------------------------------------------------------------
+
+import { Context } from "@robotlegsjs/core";
+import { ContextView } from "@robotlegsjs/pixi";
+import { autoDetectRenderer, CanvasRenderer, Container, WebGLRenderer } from "pixi.js";
+
+import { PalidorBundle } from "../src/robotlegs/bender/bundles/palidor/PalidorBundle";
+import { ExampleConfig } from "./config/ExampleConfig";
+
+export class Game {
+
+    private canvas: HTMLCanvasElement;
+    private stage: Container;
+    private renderer: CanvasRenderer | WebGLRenderer;
+    private context: Context;
+
+    constructor() {
+        this.canvas = <HTMLCanvasElement>(document.getElementById("canvas"));
+        this.renderer = autoDetectRenderer(960, 600, {
+            backgroundColor: 0xFFFFFF,
+            view: this.canvas
+        });
+        this.stage = new Container();
+        this.context = new Context();
+        this.context
+            .install(PalidorBundle)
+            .configure(new ContextView(this.stage))
+            .configure(ExampleConfig)
+            .initialize();
+
+        document.body.appendChild(this.renderer.view);
+
+        this.render();
+    }
+    public render = () => {
+        this.renderer.render(this.stage);
+        window.requestAnimationFrame(this.render);
+    };
+}

example/components/ColorButton.ts

@@ -8,7 +8,7 @@
 import { Container, Graphics, Text, TextStyle } from "pixi.js";
 
 export class ColorButton extends Container {
-    constructor(text: string, fontSize: number = 28, bgWidth: number = 180, bgHeight: number = 90) {
+    constructor(text: string, fontSize: number = 28, bgWidth: number = 460, bgHeight: number = 90) {
         super();
 
         this.interactive = true;

example/index.ts

@@ -5,39 +5,13 @@
 //  in accordance with the terms of the license agreement accompanying it.
 // ------------------------------------------------------------------------------
 
-// tslint:disable-next-line:no-reference
 /// <reference path="../node_modules/@robotlegsjs/pixi/definitions/pixi.d.ts" />
 
 import "reflect-metadata";
 
-import { Context } from "@robotlegsjs/core";
-import { ContextView } from "@robotlegsjs/pixi";
-import { autoDetectRenderer, CanvasRenderer, Container, WebGLRenderer } from "pixi.js";
+import { Game } from "./Game";
 
-import { PalidorBundle } from "../src/robotlegs/bender/bundles/palidor/PalidorBundle";
-import { ExampleConfig } from "./config/ExampleConfig";
-
-class Main {
-    private stage: Container;
-    private renderer: CanvasRenderer | WebGLRenderer;
-    private context: Context;
-
-    constructor() {
-        this.renderer = autoDetectRenderer(400, 600, {});
-        this.stage = new Container();
-        this.context = new Context();
-        this.context
-            .install(PalidorBundle)
-            .configure(new ContextView(this.stage))
-            .configure(ExampleConfig)
-            .initialize();
-
-        document.body.appendChild(this.renderer.view);
-    }
-    public render = () => {
-        this.renderer.render(this.stage);
-        window.requestAnimationFrame(this.render);
-    };
-}
-const main = new Main();
-main.render();
+(<any>window).initGame = () => {
+    let game: Game = new Game();
+    (<any>window).game = game;
+};

example/views/AbstractView.ts

@@ -24,11 +24,11 @@ export class AbstractView extends Container {
         const posY = 550;
 
         this._setViewButton = new ColorButton("View");
-        this._setViewButton.position.set(100, posY);
+        this._setViewButton.position.set(240, posY);
         this.addChild(this._setViewButton);
 
         this._addViewButton = new ColorButton("Floating\nView");
-        this._addViewButton.position.set(300, posY);
+        this._addViewButton.position.set(720, posY);
         this.addChild(this._addViewButton);
     }
     private createText(title: string): void {
@@ -41,22 +41,22 @@ export class AbstractView extends Container {
         });
         const titleText: Text = new Text(title, style);
         titleText.anchor.set(0.5);
-        titleText.position.set(200, 60);
+        titleText.position.set(480, 60);
         this.addChild(titleText);
     }
     private createImages(imgUrl: string): void {
         const logo: Sprite = PIXI.Sprite.fromImage(imgUrl);
         logo.anchor.set(0.5);
-        logo.position.set(200, 300);
+        logo.position.set(480, 300);
         this.addChild(logo);
     }
     private createBackground(lightColor: number, darkColor: number): void {
         const graphic: Graphics = new Graphics();
         graphic.beginFill(lightColor);
-        graphic.drawRect(0, 0, 400, 600);
+        graphic.drawRect(0, 0, 960, 600);
 
         graphic.beginFill(darkColor);
-        graphic.drawRoundedRect(10, 10, 380, 100, 10);
+        graphic.drawRoundedRect(10, 10, 940, 100, 10);
 
         this.addChild(graphic);
     }

example/views/FloatingView.ts

@@ -29,7 +29,7 @@ export class FloatingView extends Container {
         });
         const titleText: Text = new Text(`Floating View ${index}`, style);
         titleText.anchor.set(0.5);
-        titleText.position.set(200, 185);
+        titleText.position.set(480, 185);
         this.addChild(titleText);
     }
     private createTexts(): void {
@@ -43,7 +43,7 @@ export class FloatingView extends Container {
         const text = "Add - A new FloatingView\nRemove - The current FloatingView\nRemove All - FloatingViews";
 
         const info: Text = new Text(text, style);
-        info.position.set(50, 250);
+        info.position.set(280 + 50, 250);
         this.addChild(info);
     }
     private createButtons(): void {
@@ -53,15 +53,15 @@ export class FloatingView extends Container {
         const posY = 420;
 
         this._addViewButton = new ColorButton("add", fontSize, bgWidth, bgHeight);
-        this._addViewButton.position.set(95, posY);
+        this._addViewButton.position.set(280 + 95, posY);
         this.addChild(this._addViewButton);
 
         this._closeButton = new ColorButton("remove", fontSize, bgWidth, bgHeight);
-        this._closeButton.position.set(200, posY);
+        this._closeButton.position.set(280 + 200, posY);
         this.addChild(this._closeButton);
 
         this._closeAllButton = new ColorButton("remove all", fontSize, bgWidth, bgHeight);
-        this._closeAllButton.position.set(305, posY);
+        this._closeAllButton.position.set(280 + 305, posY);
         this.addChild(this._closeAllButton);
     }
     private createBackground(): void {
@@ -70,13 +70,13 @@ export class FloatingView extends Container {
         const colorLight = 0x56768f;
 
         graphic.beginFill(colorDark, 0.8);
-        graphic.drawRect(0, 0, 400, 600);
+        graphic.drawRect(0, 0, 960, 600);
 
         graphic.beginFill(colorLight);
-        graphic.drawRect(40, 150, 320, 300);
+        graphic.drawRect(320, 150, 320, 300);
 
         graphic.beginFill(colorDark);
-        graphic.drawRoundedRect(50, 160, 300, 50, 10);
+        graphic.drawRoundedRect(280 + 50, 160, 300, 50, 10);
 
         this.addChild(graphic);
     }

example/views/PalidorView.ts

@@ -9,6 +9,6 @@ import { AbstractView } from "./AbstractView";
 
 export class PalidorView extends AbstractView {
     constructor() {
-        super("Palidor", "media/palidor.png", 0xebf0f9, 0xa2a2d0);
+        super("Palidor", "images/palidor.png", 0xebf0f9, 0xa2a2d0);
     }
 }

example/views/RobotlegsView.ts

@@ -9,6 +9,6 @@ import { AbstractView } from "./AbstractView";
 
 export class RobotlegsView extends AbstractView {
     constructor() {
-        super("RobotlegsJS", "media/robotlegsjs.png", 0x007acd, 0x005c9a);
+        super("RobotlegsJS", "images/robotlegsjs.png", 0x007acd, 0x005c9a);
     }
 }

package.json

@@ -5,7 +5,7 @@
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
   "scripts": {
-    "example": "webpack-dev-server --config ./webpack.config.example.js",
+    "start": "webpack-dev-server --config ./webpack.example.config.js",
     "test": "./node_modules/.bin/karma start --single-run",
     "test:tdd": "./node_modules/.bin/karma start",
     "mocha": "mocha test/**/*.test.ts --require ts-node/register",
@@ -95,6 +95,7 @@
     "karma-sourcemap-writer": "^0.1.2",
     "karma-webpack": "^3.0.5",
     "mocha": "^5.2.0",
+    "open-browser-webpack-plugin": "^0.0.5",
     "pixi.js": "^4.8.2",
     "prettier": "^1.15.2",
     "publish-please": "^5.4.0",
@@ -112,6 +113,7 @@
     "uglifyjs-webpack-plugin": "^2.0.1",
     "webpack": "^4.26.1",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10"
+    "webpack-dev-server": "^3.1.10",
+    "webpack-simple-progress-plugin": "^0.0.4"
   }
 }

static/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <title>RobotlegsJS PixiJS Boilerplate</title>
+  <link rel="stylesheet" href="styles/main.css">
+  <link rel="stylesheet" href="styles/example.css">
+  <link rel="manifest" href="manifest.json">
+
+  <script>
+    if (navigator.serviceWorker) {
+      navigator.serviceWorker.register('service-worker.js')
+        .then(function () {
+          console.log('service worker installed');
+        })
+        .catch(function (err) {
+          console.log('Error', err);
+        });
+    }
+  </script>
+
+  <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
+</head>
+
+<body>
+  <header class="PixiJS">
+    <h1>integration with <a target="_blank" href="http://www.pixijs.com/">PixiJS</a></h1>
+    <p>This example shows how to integrate <code>RobotlegsJS</code> framework with <code>PixiJS</code>. Click on the buttons to see some action!</p>
+  </header>
+
+  <canvas id="canvas" width="960" height="600"></canvas>
+
+  <script type="text/javascript">
+    window.onload = initGame;
+  </script>
+</body>
+
+</html>

static/manifest.json

@@ -0,0 +1,29 @@
+{
+  "name": "Your Game",
+  "short_name": "Your Game",
+  "start_url": "index.html",
+  "display": "standalone",
+  "orientation": "landscape",
+  "icons": [
+  	{
+  		"src": "icon.png",
+  		"sizes": "512x512",
+  		"type": "image/png"
+  	},
+    {
+      "src": "launcher-icon-2x.png",
+      "sizes": "96x96",
+      "type": "image/png"
+    },
+    {
+      "src": "launcher-icon-3x.png",
+      "sizes": "144x144",
+      "type": "image/png"
+    },
+    {
+      "src": "launcher-icon-4x.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }
+  ]
+}