Adds real buttons to the game

Fixes #7 and #8
olithissen · Sep 18, 2020 · 30c5eea · 30c5eea
1 parent 56cd6bb
commit 30c5eea
Show file tree

Hide file tree

Showing 13 changed files with 102 additions and 59 deletions.
diff --git a/assets/github.svg b/assets/github.svg
diff --git a/assets/play.svg b/assets/play.svg
diff --git a/assets/random.svg b/assets/random.svg
diff --git a/assets/twitter.svg b/assets/twitter.svg
diff --git a/assets/undo.svg b/assets/undo.svg
diff --git a/package.json b/package.json
@@ -5,7 +5,8 @@
   "license": "MIT",
   "scripts": {
     "build": "webpack --config webpack.config.prod.js",
-    "dev": "webpack-dev-server --host 0.0.0.0"
+    "dev": "webpack-dev-server",
+    "devext": "webpack-dev-server --host 0.0.0.0"
   },
   "devDependencies": {
     "copy-webpack-plugin": "^6.1.0",

diff --git a/src/Button.ts b/src/Button.ts
@@ -0,0 +1,24 @@
+export class Button extends Phaser.GameObjects.Container {
+    constructor(scene: Phaser.Scene, x: number, y: number, icon: string, text: string) {
+        super(scene, x, y, []);
+
+        let i = scene.add.image(0, 0, icon);
+        let f = new Phaser.GameObjects.Ellipse(scene, 0, 0, 64, 64, 0xffffff);
+
+        let t = scene.add.text(0, 36, text, {
+            fontFamily: 'monospace',
+            fontSize: 16,
+            color: '#ffffff',
+            align: 'center'
+        }).setOrigin(0.5, 0);
+
+        this.add(f);
+        this.add(i);
+        this.add(t);
+
+        this.setSize(64, 64);
+        this.setInteractive();
+
+        scene.add.existing(this);
+    }
+}
diff --git a/src/ButtonArray.ts b/src/ButtonArray.ts
@@ -0,0 +1,23 @@
+import { Tilemaps } from "phaser";
+import { Button } from "./Button"
+
+export class ButtonArray extends Phaser.GameObjects.Container {
+    constructor(scene: Phaser.Scene, x: number, y: number, width: number, buttons: Button[]) {
+        super(scene, x, y, buttons);
+
+        let spacing = 16;
+
+        let diff = 0 + width / 2 - (this.length * width + (this.length - 1) * spacing) / 2;
+
+        for (let i = 0; i < this.length; i++) {
+            let item = this.getAt(i) as Button;
+            item.setX(diff);
+            diff += width;
+            if (i < this.length - 1) {
+                diff += 16;
+            }
+        }
+
+        scene.add.existing(this);
+    }
+}
diff --git a/src/SceneGameOver.ts b/src/SceneGameOver.ts
@@ -1,3 +1,6 @@
+import { Button } from "./Button"
+import { ButtonArray } from "./ButtonArray"
+
 const headingConfig = {
     fontFamily: 'monospace',
     fontSize: 48,
@@ -14,65 +17,52 @@ const textConfig = {
     align: 'center'
 };
 
-const linkConfig = {
-    fontFamily: 'monospace',
-    fontSize: 20,
-    fontStyle: 'bold',
-    color: '#ffff00',
-    align: 'center'
-};
-
 export class SceneGameOver extends Phaser.Scene {
     title: Phaser.GameObjects.Text;
     hint: Phaser.GameObjects.Text;
-    twitter: Phaser.GameObjects.Text;
-    randomSeed: Phaser.GameObjects.Text;
+
     constructor() {
         super({ key: "SceneGameOver" });
     }
 
+    preload() {
+        this.load.svg('replay', 'assets/undo.svg', { width: 32, height: 32 });
+        this.load.svg('random', 'assets/random.svg', { width: 32, height: 32 });
+        this.load.svg('twitter', 'assets/twitter.svg', { width: 32, height: 32 });
+    }
+
     create(data: { seed: string; time: string; }) {
         let tweet = `I survived @wrdgrvty level '${data.seed}' for ${data.time} seconds. Challenge me on ${window.location.href}`;
         let twitterUrl = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweet);
-
-        this.title = this.add.text((this.game.config.width as number) * 0.5, 128, "WEIRD GRAVITY SPACE GAME", headingConfig);
-        this.hint = this.add.text((this.game.config.width as number) * 0.5, 200, "Star system '" + decodeURIComponent(data.seed) + "':\nYou survived for " + data.time + " seconds\n\nPress any key to play again", textConfig);
-        this.twitter = this.add.text((this.game.config.width as number) * 0.5, 300, "Or click here to brag about it on Twitter", linkConfig);
-        this.randomSeed = this.add.text((this.game.config.width as number) * 0.5, 330, "Or click here to try a new level at random", linkConfig);
-
-        this.title.setOrigin(0.5);
-        this.hint.setOrigin(0.5);
-        this.twitter.setOrigin(0.5);
-        this.randomSeed.setOrigin(0.5);
-        this.twitter.setInteractive();
-        this.randomSeed.setInteractive();
-
-        this.twitter.on('pointerup', function () {
-            this.openExternalLink(twitterUrl);
-        }, this);
-
-        this.randomSeed.on('pointerup', function () {
+
+        let replayButton = new Button(this, 0, 0, "replay", "replay").on('pointerup', function () {
             this.scene.transition({
                 target: "SceneMain",
                 duration: 0,
                 moveAbove: true,
                 sleep: false,
-                data: new Phaser.Math.RandomDataGenerator().integer().toString(),
+                data: data.seed
             });
         }, this);
 
-        const replay = function (): void {
+        let randomButton = new Button(this, 0, 0, "random", "random").on('pointerup', function () {
             this.scene.transition({
                 target: "SceneMain",
                 duration: 0,
                 moveAbove: true,
                 sleep: false,
-                data: data.seed,
+                data: new Phaser.Math.RandomDataGenerator().integer().toString(),
             });
-        };
+        }, this);
+
+        let twitterButton = new Button(this, 0, 0, "twitter", "tweet").on('pointerup', () => this.openExternalLink(twitterUrl), this);
+        new ButtonArray(this, (this.game.config.width as number) * 0.5, 300, 64, [replayButton, randomButton, twitterButton]);
 
-        this.input.keyboard.on('keydown', replay, this);
-        this.input.on('pointerdown', replay, this);
+        this.title = this.add.text((this.game.config.width as number) * 0.5, 128, "WEIRD GRAVITY SPACE GAME", headingConfig);
+        this.hint = this.add.text((this.game.config.width as number) * 0.5, 200, "Star system '" + decodeURIComponent(data.seed) + "':\nYou survived for " + data.time + " seconds\n\nPress any key to play again", textConfig);
+
+        this.title.setOrigin(0.5);
+        this.hint.setOrigin(0.5);
     }
 
     openExternalLink(url: string) {

diff --git a/src/SceneMainMenu.ts b/src/SceneMainMenu.ts
@@ -1,21 +1,26 @@
+import { Button } from "./Button"
+import { ButtonArray } from "./ButtonArray"
+
 export class SceneMainMenu extends Phaser.Scene {
     title: Phaser.GameObjects.Text;
     hint: Phaser.GameObjects.Text;
-    github: Phaser.GameObjects.Text;
     constructor() {
         super({ key: "SceneMainMenu" });
     }
 
     preload() {
+        this.load.svg('play', 'assets/play.svg', { width: 36, height: 36 });
+        this.load.svg('github', 'assets/github.svg', { width: 48, height: 48 });
     }
 
     create() {
-        this.github = this.add.text((this.game.config.width as number) * 0.5, 80, "Find me on GitHub", {
-            fontFamily: 'monospace',
-            fontSize: 16,
-            color: '#cccccc',
-            align: 'center'
-        });
+        const start = function (): void {
+            this.scene.start("SceneMain");
+        };
+
+        let playButton = new Button(this, 0, 0, "play", "play").on('pointerup', start, this);
+        let githubButton = new Button(this, 0, 0, "github", "github").on('pointerup', this.openExternal(), this);
+        new ButtonArray(this, (this.game.config.width as number) * 0.5, 300, 64, [playButton, githubButton]);
 
         this.title = this.add.text((this.game.config.width as number) * 0.5, 128, "WEIRD GRAVITY SPACE GAME", {
             fontFamily: 'monospace',
@@ -34,10 +39,12 @@ export class SceneMainMenu extends Phaser.Scene {
         });
         this.title.setOrigin(0.5);
         this.hint.setOrigin(0.5);
-        this.github.setOrigin(0.5);
-        this.github.setInteractive();
 
-        this.github.on('pointerup', function () {
+        this.input.keyboard.on('keydown', start, this);
+    }
+
+    private openExternal(): Function {
+        return function () {
             let url = "https://github.com/olithissen/weirdspacegame";
             var s = window.open(url, '_blank');
             if (s && s.focus) {
@@ -46,15 +53,9 @@ export class SceneMainMenu extends Phaser.Scene {
             else if (!s) {
                 window.location.href = url;
             }
-        }, this);
-
-        const start = function (): void {
-            this.scene.start("SceneMain");
         };
-
-        this.input.on('pointerdown', start, this);
-        this.input.keyboard.on('keydown', start, this);
     }
+
     update() {
     }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -26,7 +26,6 @@ const gameConfig: Phaser.Types.Core.GameConfig = {
             fps: 30,
         },
     },
-
     scene: [SceneMainMenu, SceneMain, SceneGameOver],
 
     parent: 'game',

diff --git a/webpack.config.js b/webpack.config.js
@@ -48,9 +48,9 @@ module.exports = {
         {
           from: 'index.html',
         },
-        // {
-        //   from: 'assets/**/*',
-        // },
+        {
+          from: 'assets/**',
+        },
       ],
     }),
     new webpack.DefinePlugin({

diff --git a/webpack.config.prod.js b/webpack.config.prod.js
@@ -48,9 +48,9 @@ module.exports = {
         {
           from: 'index.html',
         },
-        // {
-        //   from: 'assets/**/*',
-        // },
+        {
+          from: 'assets/**/*',
+        },
       ],
     }),
     new webpack.DefinePlugin({