Added glowy box to combat scene as a test 'ok_hand'

client/src/scenes/combat.js

@@ -6,6 +6,7 @@ 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 renderResolutions = require('./combat.render.resolutions');
 
@@ -28,20 +29,7 @@ class Combat extends Phaser.Scene {
         console.log('creating game');
         this.registry.events.off('changedata', this.updateData);
         this.registry.events.on('changedata', this.updateData, this);
-
-        this.input.keyboard.on('keydown_BACKSPACE', () => {
-            this.cleanUp();
-        }, 0, this);
-        const leaveGame = this.add
-            .rectangle(COMBAT.width() * 0.8, COMBAT.height() * 0.8, COMBAT.width() * 0.1, COMBAT.height() * 0.1, 0xff9215)
-            .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);
+        this.addLeaveGame();
 
         this.registry.set('gamePhase', false);
         this.registry.set('inGame', true);
@@ -111,6 +99,34 @@ class Combat extends Phaser.Scene {
         return true;
     }
 
+    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);
+    }
+
     cleanUp() {
         this.registry.events.off('changedata', this.updateData, this);
         this.registry.events.off('setdata', this.updateData, this);

client/src/scenes/elements/box.js

@@ -0,0 +1,81 @@
+const Phaser = require('phaser');
+
+const BOX = `
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#extension GL_OES_standard_derivatives : enable
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#extension GL_OES_standard_derivatives : enable
+
+uniform float time;
+uniform vec2 resolution;
+uniform vec2 dimensions;
+uniform vec2 offset;
+uniform vec3 colour;
+
+float sdBox( in vec2 p, in vec2 b )
+{
+    vec2 d = abs(p)-b;
+    return length(max(d,vec2(0))) + min(max(d.x,d.y),0.0);
+}
+
+void main()
+{
+
+    vec2 p = (gl_FragCoord.xy / resolution.xy);
+    p.x -= offset.x / resolution.x + dimensions.x / (2.0 * resolution.x);
+    p.y -= -1.0 * offset.y / resolution.y + ((resolution.y - dimensions.y) / (2.0 * resolution.y)) + 0.5;
+    vec2 dim = 0.5 * dimensions / resolution.xy;
+    float d = sdBox(p, dim);
+    float tb = abs(sin(time)) + 0.9;
+
+    vec3 col = tb * colour - sign(d) * vec3(0.1);
+    col *= 0.0 + exp(-100.0 * abs(d));
+
+    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,
+        });
+    },
+});
+
+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);
+        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'));
+        this.on('destroy', () => {
+            scene.game.renderer.removePipeline(tag);
+        });
+    },
+
+    update() {
+        this.bgTime += 0.05;
+        this.customPipeline.setFloat1('time', this.bgTime);
+    },
+});
+
+module.exports = GlowyBox;

client/src/scenes/menu.cryps.list.js

@@ -39,7 +39,8 @@ class MenuCrypList extends Phaser.Scene {
         if (this.crypRows) this.crypRows.destroy(true);
         this.crypRows = this.add.group();
         // We only display 3 cryps others can be viewed in cryp list (soon TM)
-        for (let i = 0; i < 3; i += 1) {
+        const crypDispLength = cryps.length < 3 ? cryps.length : 3;
+        for (let i = 0; i < crypDispLength; i += 1) {
             const cryp = cryps[i];
             const ROW_X = 0;
             const ROW_Y = (i * ROW_HEIGHT);