Complete overhaul not quite done with it either

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["@babel/env", {
+      "targets": {
+        "browsers": [
+          ">0.25%",
+          "not ie 11",
+          "not op_mini all"
+        ]
+      },
+      "modules": false
+    }]
+  ]
+}

.gitignore

@@ -0,0 +1,16 @@
+# System and IDE files
+Thumbs.db
+.DS_Store
+.idea
+*.suo
+*.sublime-project
+*.sublime-workspace
+*.vscode
+bun.lockb
+
+# Vendors
+node_modules/
+
+# Build
+dist/
+/npm-debug.log

LICENSE

@@ -0,0 +1,3 @@
+Copyright ExeVirus 2024, All Rights Reserved.
+
+Other than of course the other MIT licensed information listed in dist/

docs/bundle.min.js.LICENSE.txt

@@ -0,0 +1,144 @@
+/**
+ * @author       Florian Vazelle
+ * @author       Geoffrey Glaive
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Jason Nicholls <nicholls.jason@gmail.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+/**
+ * @author       Joachim Grill <joachim@codeandweb.com>
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 CodeAndWeb GmbH
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Niklas von Hertzen (https://github.com/niklasvh/base64-arraybuffer)
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       @samme
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Angry Bytes (and contributors)
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Felipe Alfonso <@bitnenfer>
+ * @author       Matthew Groves <@doormat>
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Felipe Alfonso <@bitnenfer>
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Florian Mertens
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Igor Ognichenko <ognichenko.igor@gmail.com>
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       Pavle Goloskokovic <pgoloskokovic@gmail.com> (http://prunegames.com)
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @author       samme <samme.npm@gmail.com>
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2021 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Seth Berrier <berriers@uwstout.edu>
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Stefan Hedman <schteppe@gmail.com> (http://steffe.se)
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       Vladimir Agafonkin
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       pi-kei
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       samme
+ * @copyright    2013-2023 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+ * @author       samme
+ * @copyright    2021 Photon Storm Ltd.
+ * @license      {@link https://opensource.org/licenses/MIT|MIT License}
+ */
+
+/**
+* @author       Richard Davey <rich@photonstorm.com>
+* @copyright    2013-2023 Photon Storm Ltd.
+* @license      {@link https://github.com/photonstorm/phaser3-plugin-template/blob/master/LICENSE|MIT License}
+*/

docs/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="UTF-8"/><link rel="icon" type="image/png" href="./favicon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="stylesheet" href="./style.css"><title>Keyboard Kingdom</title><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script><script defer="defer" src="./bundle.min.js"></script></head><body><div id="app"><div id="game-container"></div></div></body></html>

docs/style.css

@@ -0,0 +1,15 @@
+body {
+    margin: 0;
+    padding: 0;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgb(32, 41, 58);
+}
+
+#app {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

index.html

@@ -1,35 +1,18 @@
-<!DOCTYPE html>
+<!doctype html>
-<html background-color="black">
+<html lang="en">
 <head>
-    <script src="phaser-arcade-physics.min.js"></script>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" href="./favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./style.css">
+    <title>Keyboard Kingdom</title>
     <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
-    <script src="js/webFont.js"></script>
-    <script src="js/mainmenu.js"></script>
-    <!-- <script src="js/game.js"></script> -->
-    <!-- <link href=" https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css " rel="stylesheet"> -->
-    <style> 
-        html { background-color: rgb(32, 41, 58); overflow-y: hidden; } 
-        body { margin: 0; }
-    </style>
 </head>
-<body>  
-<script>
-    const config = {
-        type: Phaser.AUTO,
-        width: 1920,
-        height: 980,
-        scene: [ MainMenu ],
-        scale: {
-            mode: Phaser.Scale.FIT,
-            autoCenter: true
-        },
-        backgroundColor: 0x000000, // Black background color
-        physics: {
-            default: 'arcade'
-        }
-    };
 
-    const game = new Phaser.Game(config);
+<body>
-</script>
+    <div id="app">
+        <div id="game-container"></div>
+    </div>
+    <!-- <script type="module" src="src/main.js"></script> -->
 </body>
 </html>

js/game.js

@@ -1,31 +0,0 @@
-class Game extends Phaser.Scene
-{
-    constructor ()
-    {
-        super({ key: 'Game' });
-    }
-
-    init (data)
-    {
-        this.imageID = data.id;
-        this.imageFile = data.image;
-    }
-
-    preload () {}
-
-    create ()
-    {
-        let centerX = this.scale.parentSize.width / 2 
-        let centerY = this.scale.parentSize.height / 2
-
-        const particles = this.add.particles(centerX, centerY+100, 'keyboard', {
-            speed: 500,
-            scale: { start: 0.7, end: 0.2 }
-        });
-
-        const logo = this.add.text(centerX, centerY-100, 'Keyboard Kingdom!', {
-            fontFamily: '"Bungee"',
-            fontSize: '80px',
-        }).setOrigin(0.5);
-    }
-}

js/preload.js

@@ -1,2 +0,0 @@
-this.load.addFile(new WebFontFile(this.load, 'Bungee'))
-this.load.image('key', 'keyboard.png');

package.json

@@ -0,0 +1,38 @@
+{
+    "name": "template-webpack",
+    "version": "3.0.0",
+    "main": "src/main.js",
+    "scripts": {
+        "dev": "webpack-dev-server --config webpack/config.js --open",
+        "build": "webpack --config webpack/config.prod.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/phaserjs/template-webpack.git"
+    },
+    "author": "Phaser Studio <support@phaser.io> (https://phaser.io/)",
+    "license": "MIT",
+    "licenseUrl": "http://www.opensource.org/licenses/mit-license.php",
+    "bugs": {
+        "url": "https://github.com/phaserjs/template-webpack/issues"
+    },
+    "homepage": "https://github.com/phaserjs/template-webpack#readme",
+    "devDependencies": {
+        "@babel/core": "^7.23.2",
+        "@babel/preset-env": "^7.23.2",
+        "babel-loader": "^9.1.3",
+        "clean-webpack-plugin": "^4.0.0",
+        "copy-webpack-plugin": "^11.0.0",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.5.3",
+        "raw-loader": "^4.0.2",
+        "terser-webpack-plugin": "^5.3.9",
+        "webpack": "^5.89.0",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1",
+        "webpack-merge": "^5.10.0"
+    },
+    "dependencies": {
+        "phaser": "^3.70.0"
+    }
+}

public/style.css

@@ -0,0 +1,15 @@
+body {
+    margin: 0;
+    padding: 0;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: rgb(32, 41, 58);
+}
+
+#app {
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/extensions/webFont.js

@@ -1,4 +1,4 @@
-class WebFontFile extends Phaser.Loader.File
+export class WebFontFile extends Phaser.Loader.File
 {
     constructor(loader, fontNames, service = 'google')
     {

src/key_classes/KeyButton.js

@@ -0,0 +1,111 @@
+// ----------------------------------------------------------------------------
+//
+// Class: KeyButton
+// Desc: Implements:
+//     - a button square of size = sidelen
+//          - That is clickable and has a specific keydown callback (same callback)
+//          - That has a building string representing its current callback
+//          - That can be collided with by enemies, triggering a different building callback
+//          - That has a health bar related to the building health
+//          - That has a colored meter bar related to the building state
+//          - That maintains a dynamic texture for itself
+//     - Uses the scene to grab the KingdomManager for callbacks and customization color data
+// ----------------------------------------------------------------------------
+
+export class KeyButton extends Phaser.GameObjects.Sprite {
+    percent = -1;
+    percentColor = '#00E000'; // green
+    health = -1;
+    sidelen = -1;
+    key = '';
+    building  = '';
+    baseTexture;
+    dynamicTexture;
+
+    // key = just the letters from here: https://github.com/phaserjs/phaser/blob/v3.70.0/src/input/keyboard/keys/KeyCodes.js
+    constructor(scene, x, y, sidelen, key) {
+        super(scene, x, y, key);
+        // Save the sidelen, and key
+        this.sidelen = sidelen;
+        this.key = 'keydown-' + key;
+
+        this.buildBaseTexture(scene);
+
+        //turn on mouse clicks and keydowns
+        this.enableInput(scene);
+    }
+
+    changeBuilding(building) {
+        this.building = building;
+        if(building != "") {
+            this.enableCollisions();
+        }
+        this.rebuildTexture();
+    }
+
+    // Called by pressing key or clicking the button
+    activation() {
+        alert('Activated the keyButton!');
+
+        //TODO
+        //this.scene.kingdomManager.activation(this)
+    }
+
+    collision(otherObject) {
+        //TODO
+    }
+
+    enableCollisions() {
+        //TODO
+        //this.scene.physics.arcade.enableBody(this);
+        //this.body.setCollideCallback(() => {
+            // your collision logic here
+        //});
+    }
+
+    enableInput(scene) {
+        this.setInteractive()
+            .on('pointerdown', () => this.activation() );
+        scene.input.keyboard.on(this.key, event =>
+        {
+            this.activation();
+        });
+    }
+
+    disableCollisions() {
+        //TODO
+        //this.scene.physics.arcade.disableBody(this); ??
+    }
+
+    buildBaseTexture(scene) {
+        //build baseTexture
+        let text = scene.add.text(0,0,this.key, {fontFamily: '"Bungee"', fontSize: '40px', color: scene.keyColor })
+        this.baseTexture = scene.textures.addDynamicTexture('base' + this.key, this.sidelen, this.sidelen);
+        this.baseTexture.stamp('key_' + scene.keyboard_color, null, this.sidelen, this.sidelen);
+        this.baseTexture.draw(text, 50, 50);
+        text.destroy();
+
+        // create the dynamicTexture
+        this.dynamic_texture = scene.textures.addDynamicTexture(this.key, this.sidelen, this.sidelen);
+        // rebuild the dynamicTexture for first time
+        this.rebuildTexture();
+    }
+
+    rebuildTexture() {
+        this.dynamic_texture.stamp('base' + this.key, null, this.sidelen, this.sidelen);
+        if(this.percent > -1) {
+            // green bar TODO
+        }
+        if(this.health > -1) {
+
+        }
+        if(this.building != '') {
+
+        }
+    }
+
+    cleanup() {
+        this.baseTexture.destroy();
+        this.dynamic_texture.destroy();
+    }
+}

src/main.js

@@ -0,0 +1,21 @@
+import { MainMenu } from './scenes/MainMenu';
+
+//  Find out more information about the Game Config at:
+//  https://newdocs.phaser.io/docs/3.70.0/Phaser.Types.Core.GameConfig
+const config = {
+    type: Phaser.AUTO,
+    width: 1920,
+    height: 980,
+    parent: 'game-container',
+    scene: [ MainMenu ],
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: true
+    },
+    backgroundColor: 0x000000, // Black background color
+    physics: {
+        default: 'arcade'
+    }
+};
+
+export default new Phaser.Game(config);

src/scenes/MainMenu.js

@@ -1,21 +1,17 @@
-class MainMenu extends Phaser.Scene
+import { Scene } from 'phaser';
+import { WebFontFile } from '../extensions/webFont.js';
+import { KeyButton } from '../key_classes/KeyButton.js';
+
+export class MainMenu extends Scene
 {
     constructor ()
     {
-        super('menu');
+        super('MainMenu');
         this.keySize = 270;
     }
 
     preload ()
     {
-        //----------------------- Scripts -----------------------
-        this.load.scripts('game', [
-            'js/kingdomManager.js',
-            'js/tile.js',
-            'js/enemy.js',
-            'js/game.js'
-        ]);
-        
         //------------------------ Fonts ------------------------
         this.load.addFile(new WebFontFile(this.load, 'Bungee'))
 
@@ -24,21 +20,24 @@ class MainMenu extends Phaser.Scene
         //-------------------- Sound Effects --------------------
         
         //----------------------- Textures ----------------------
-        this.loadKeyImages();
+        this.load.image('key_dark', 'assets/key_dark.png');
-        //this.createKeyboardTexture('light', "#010101");
+        this.load.image('key_blue', 'assets/key_blue.png');
-
+        this.load.image('key_light', 'assets/key_light.png');
-        //------------ Keyboard Sprite Sheets https://www.patreon.com/posts/phaser-dev-log-73259650
     }
 
     create ()
     {
-        // const enter = 
+        const start = this.add.text(0, 900, 'Press <ENTER> to play', {
-        let centerX = this.scale.parentSize.width / 2 
-        let centerY = this.scale.parentSize.height / 2+400
-        const start = this.add.text(centerX, centerY, 'Press <ENTER> to play', {
             fontFamily: '"Bungee"',
             fontSize: '80px',
-        }).setOrigin(0.5);
+        });
+
+        this.input.keyboard.on('keydown-ENTER', function () {
+            this.scene.start('Game', { id: 0 });
+        }, this);
+
+        this.events.on('shutdown', this.shutdown, this);
+
 
         let keyColor = 'blue';
         let textColor = '#F1F1F1';
@@ -53,15 +52,12 @@ class MainMenu extends Phaser.Scene
         for(let i = 0; i < 13; i++) {
             this.add.sprite(i*this.keySize/2 + this.keySize/4, this.keySize*3/2, keyboardString + (i+28)).setScale(0.5);
         }
-        for(let i = 0; i < 12; i++) {
+        for(let i = 0; i < 11; i++) {
             this.add.sprite(i*this.keySize/2 + this.keySize/4, this.keySize*2, keyboardString + (i+41)).setScale(0.5);
         }
 
-        this.input.keyboard.on('keydown-ENTER', function () {
+        let button = new KeyButton(this, 500, 500, this.keySize, 'CTRL');
-            this.scene.start('Game', { id: 0 });
+        this.add.existing(button);  
-        }, this);
-
-        this.events.on('shutdown', this.shutdown, this);
     }
 
     shutdown ()
@@ -70,11 +66,7 @@ class MainMenu extends Phaser.Scene
         this.input.keyboard.shutdown();
     }
 
-    loadKeyImages() {
+
-        this.key_dark = this.load.image('key_dark', 'assets/key_dark.png');
-        this.key_blue = this.load.image('key_blue', 'assets/key_blue.png');
-        this.key_light = this.load.image('key_light', 'assets/key_light.png');
-    }
 
     createKeyTextures(keyColor) {
         const fontStyle = {fontFamily: '"Bungee"', fontSize: '40px', color: keyColor };
@@ -134,7 +126,6 @@ class MainMenu extends Phaser.Scene
             this.add.text(0,0,',', fontStyle),
             this.add.text(0,0,'.', fontStyle),
             this.add.text(0,0,'/', fontStyle),
-            this.add.text(0,0,'⬆', fontStyle),
         ];
     }
 

webpack/config.js

@@ -0,0 +1,51 @@
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+const webpack = require("webpack");
+
+module.exports = {
+    mode: "development",
+    devtool: "eval-source-map",
+    entry: "./src/main.js",
+    output: {
+        path: path.resolve(process.cwd(), 'dist'),
+        filename: "bundle.min.js"
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader"
+                }
+            },
+            {
+                test: [/\.vert$/, /\.frag$/],
+                use: "raw-loader"
+            },
+            {
+                test: /\.(gif|png|jpe?g|svg|xml|glsl)$/i,
+                use: "file-loader"
+            }
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin({
+            cleanOnceBeforeBuildPatterns: [path.join(__dirname, "dist/**/*")]
+        }),
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_DEBUG": JSON.stringify(true),
+            "typeof EXPERIMENTAL": JSON.stringify(true),
+            "typeof PLUGIN_3D": JSON.stringify(false),
+            "typeof PLUGIN_CAMERA3D": JSON.stringify(false),
+            "typeof PLUGIN_FBINSTANT": JSON.stringify(false),
+            "typeof FEATURE_SOUND": JSON.stringify(true)
+        }),
+        new HtmlWebpackPlugin({
+            template: "./index.html"
+        })
+    ]
+};

webpack/config.prod.js

@@ -0,0 +1,77 @@
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const CopyPlugin = require('copy-webpack-plugin');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const path = require("path");
+const TerserPlugin = require("terser-webpack-plugin");
+const webpack = require("webpack");
+
+const line = "---------------------------------------------------------";
+const msg = `💜💜💜 Tell us about your game! - games@phaser.io 💜💜💜`;
+process.stdout.write(`${line}\n${msg}\n${line}\n`);
+
+module.exports = {
+    mode: "production",
+    entry: "./src/main.js",
+    output: {
+        path: path.resolve(process.cwd(), 'docs'),
+        filename: "./bundle.min.js"
+    },
+    devtool: false,
+    performance: {
+        maxEntrypointSize: 2500000,
+        maxAssetSize: 1200000
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader"
+                }
+            },
+            {
+                test: [/\.vert$/, /\.frag$/],
+                use: "raw-loader"
+            },
+            {
+                test: /\.(gif|png|jpe?g|svg|xml|glsl)$/i,
+                use: "file-loader"
+            }
+        ]
+    },
+    optimization: {
+        minimizer: [
+            new TerserPlugin({
+                terserOptions: {
+                    output: {
+                        comments: false
+                    }
+                }
+            })
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new webpack.DefinePlugin({
+            "typeof CANVAS_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_RENDERER": JSON.stringify(true),
+            "typeof WEBGL_DEBUG": JSON.stringify(false),
+            "typeof EXPERIMENTAL": JSON.stringify(false),
+            "typeof PLUGIN_3D": JSON.stringify(false),
+            "typeof PLUGIN_CAMERA3D": JSON.stringify(false),
+            "typeof PLUGIN_FBINSTANT": JSON.stringify(false),
+            "typeof FEATURE_SOUND": JSON.stringify(true)
+        }),
+        new HtmlWebpackPlugin({
+            template: "./index.html"
+        }),
+        new CopyPlugin({
+            patterns: [
+                { from: 'public/assets', to: 'assets' },
+                { from: 'public/favicon.png', to: 'favicon.png' },
+                { from: 'public/style.css', to: 'style.css' }
+            ],
+        }),
+    ]
+};