New button hpye

client/src/scenes/combat.js

@@ -1,12 +1,12 @@
 const Phaser = require('phaser');
 const { throttle } = require('lodash');
 
-const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
+const { POSITIONS: { COMBAT }} = require('./constants');
 const CombatLog = require('./combat.log');
 const CombatCryps = require('./combat.cryps');
 const CombatSkills = require('./combat.skills');
 const CombatHitBox = require('./combat.hitbox');
-const GlowyBox = require('./elements/box');
+const Button = require('./elements/box');
 
 const renderResolutions = require('./combat.render.resolutions');
 
@@ -100,31 +100,20 @@ class Combat extends Phaser.Scene {
     }
 
     addLeaveGame() {
-        this.input.keyboard.on('keydown_BACKSPACE', () => {
-            this.cleanUp();
-        }, 0, this);
 
-        const boxes = this.add.group({
-            classType: GlowyBox,
-            runChildUpdate: true,
-        });
-        boxes.add(this.add.existing(new GlowyBox(
-            this,
-            COMBAT.width() * 0.8, COMBAT.height() * 0.8, COMBAT.width() * 0.1, COMBAT.height() * 0.1,
-            [0.7, 0.2, 0], 'leave'
-        )));
-
-        const leaveGame = this.add
-            .rectangle(COMBAT.width() * 0.8, COMBAT.height() * 0.8,
-                COMBAT.width() * 0.1, COMBAT.height() * 0.1, 0xff9215, 0x000000)
-            .setInteractive()
-            .setOrigin(0)
-            .on('pointerdown', () => {
-                this.cleanUp();
-            });
-        this.add
-            .text(leaveGame.getCenter().x, leaveGame.getCenter().y, 'Leave Game', TEXT.HEADER)
-            .setOrigin(0.5, 0.5);
+        const leaveGame = () => this.cleanUp();
+        this.input.keyboard.on('keydown_BACKSPACE', leaveGame, 0, this);
+        const buttonProps = {
+            x: COMBAT.width() * 0.8,
+            y: COMBAT.height() * 0.8,
+            width: COMBAT.width() * 0.15,
+            height: COMBAT.height() * 0.1,
+            colour: [0.7, 0.2, 0],
+            glTag: 'leave',
+            bText: 'Leave Game',
+            callback: leaveGame,
+        };
+        this.box = this.add.existing(new Button(this, buttonProps));
     }
 
     cleanUp() {

client/src/scenes/elements/box.js

@@ -1,4 +1,5 @@
 const Phaser = require('phaser');
+const { TEXT } = require('.././constants');
 
 const BOX = `
 #ifdef GL_ES
@@ -18,6 +19,11 @@ uniform vec2 resolution;
 uniform vec2 dimensions;
 uniform vec2 offset;
 uniform vec3 colour;
+uniform sampler2D uMainSampler;
+
+
+varying vec2 outTexCoord;
+varying vec4 outTint;
 
 float sdBox( in vec2 p, in vec2 b )
 {
@@ -37,45 +43,90 @@ void main()
 
     vec3 col = tb * colour - sign(d) * vec3(0.1);
     col *= 0.0 + exp(-100.0 * abs(d));
+    col += colour * 0.8;
+    vec4 texel = texture2D(uMainSampler, outTexCoord);
+    texel *= vec4(outTint.rgb * outTint.a, outTint.a);
 
     gl_FragColor = vec4(col, 1.0);
 }
 `;
 
 
-const CustomPipeline = new Phaser.Class({
-    Extends: Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline,
-    initialize: function CustomPipeline(game) {
-        Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline.call(this, {
-            game,
-            renderer: game.renderer,
-            fragShader: BOX,
-        });
-    },
-});
+class CustomPipeline extends Phaser.Renderer.WebGL.Pipelines.TextureTintPipeline {
+    constructor(game) {
+        super({ game, renderer: game.renderer, fragShader: BOX });
+    }
+}
 
-const GlowyBox = new Phaser.Class({
-    Extends: Phaser.GameObjects.RenderTexture,
-    initialize(scene, x, y, width, height, colour, tag) {
-        Phaser.GameObjects.RenderTexture.call(this, scene, x, y, width, height);
+function rgbToHex(rgb) {
+    const getHex = (c) => {
+        const hex = Math.floor(c * 255).toString(16);
+        return hex.length === 1 ? `0${hex}` : hex;
+    };
+    return `0x${getHex(rgb[0])}${getHex(rgb[1])}${getHex(rgb[2])}`;
+}
+
+
+class BoxEffect extends Phaser.GameObjects.Graphics {
+    constructor(scene, x, y, width, height, colour, tag) {
+        super(scene, x, y, width, height);
+        this.tag = tag;
         this.customPipeline = scene.game.renderer.addPipeline(tag, new CustomPipeline(scene.game));
         this.customPipeline.setFloat2('resolution', 1600, 1000);
         this.customPipeline.setFloat2('offset', x, y);
         this.customPipeline.setFloat2('dimensions', width, height);
         this.customPipeline.setFloat3('colour', colour[0], colour[1], colour[2]);
-        this.setPipeline(tag);
         this.bgTime = 10.0;
 
-        this.on('pointerdown', () => console.log('grep'));
+        const radius = height / 2;
+        this.fillStyle(rgbToHex(colour), 1.0);
+        this.fillRect(x + radius, y, width - radius * 2, height);
+        this.fillCircle(x + radius, y + radius, radius);
+        this.fillCircle(x + width - radius, y + radius, radius);
+
+
         this.on('destroy', () => {
             scene.game.renderer.removePipeline(tag);
         });
-    },
+    }
+
+    activate() {
+        this.setPipeline(this.tag);
+    }
+
+    deactivate() {
+        this.resetPipeline();
+    }
 
     update() {
         this.bgTime += 0.05;
         this.customPipeline.setFloat1('time', this.bgTime);
-    },
-});
+    }
+}
 
-module.exports = GlowyBox;
+class Button extends Phaser.GameObjects.Group {
+    constructor(scene, props) {
+        const {
+            x, y, width, height, colour, glTag, bText, callback,
+        } = props;
+
+        super(scene, { classType: BoxEffect, runChildUpdate: true });
+
+        const leaveGame = scene.add
+            .rectangle(x, y, width, height, 0xaaaaaa, 0xffffff)
+            .setInteractive()
+            .setOrigin(0);
+
+        const effect = scene.add.existing(new BoxEffect(scene, x, y, width, height, colour, glTag));
+        this.add(effect);
+
+        leaveGame
+            .on('pointerdown', callback)
+            .on('pointerover', () => effect.activate())
+            .on('pointerout', () => effect.deactivate());
+
+        this.buttonText = scene.add.text(leaveGame.getCenter().x, leaveGame.getCenter().y, bText, TEXT.HEADER).setOrigin(0.5, 0.5);
+    }
+}
+
+module.exports = Button;