buttons and doto colours

client/src/scenes/constants.js

@@ -4,6 +4,19 @@ module.exports = {
         HEADER: { fontFamily: 'monospace', fontSize: 24, color: '#ffffff', fontStyle: 'bold' },
     },
 
+    COLOURS: {
+        BLUE: 0x004bfe,
+        CYAN: 0x27e7c0,
+        PURPLE: 0x61008c,
+        YELLOW: 0xfdfe02,
+        ORANGE: 0xff9215,
+        PINK: 0xe766b6,
+        GRAY: 0x9d9ea0,
+        LBLUE: 0x87c6f2,
+        GREEN: 0x166c4f,
+        BROWN: 0x583108,
+    },
+
     SKILLS: {
         LEARNABLE: [
             'Attack',

client/src/scenes/cryp.list.js

@@ -1,7 +1,8 @@
 const Phaser = require('phaser');
 
-const CrypRow = require('./cryp.row');
+const CrypRows = require('./cryp.row');
 const CrypPage = require('./cryp.page');
+const Lobbies = require('./lobbies');
 
 class CrypList extends Phaser.Scene {
     constructor() {
@@ -15,19 +16,28 @@ class CrypList extends Phaser.Scene {
 
     updateData(parent, key, data) {
         if (key === 'cryps') {
-            if (this.CrypRow) {
+            this.renderList(data);
-                this.CrypRow.cleanup();
-                this.CrypRow.destroy(true);
-            }
-            this.CrypRow = new CrypRow(this, data);
-            if (this.CrypPage) {
-                const cryp = data.find(c => c.id === this.CrypPage.id);
-                this.displaySkills(cryp);
-            }
         }
         return true;
     }
 
+    renderList(cryps) {
+        // your cryps
+        if (this.CrypRows) {
+            this.CrypRows.cleanup();
+            this.CrypRows.destroy(true);
+        }
+        this.CrypRows = new CrypRows(this, cryps);
+
+        // selected cryp
+        if (this.CrypPage) {
+            const cryp = cryps.find(c => c.id === this.CrypPage.id);
+            this.displaySkills(cryp);
+        }
+
+        this.lobbies = new Lobbies(this, cryps);
+    }
+
     displaySkills(cryp) {
         if (cryp) {
             if (this.CrypPage) {

client/src/scenes/cryp.row.js

@@ -1,10 +1,9 @@
 const Phaser = require('phaser');
 
-const { TEXT } = require('./constants');
+const { TEXT, COLOURS } = require('./constants');
 
 const ROW_WIDTH = 400;
 const ROW_HEIGHT = 200;
-const ROW_FILL = 0x888888;
 
 const TOP_MARGIN = 50;
 const ROW_MARGIN = 50;
@@ -19,7 +18,7 @@ const KEY_MAP = [
 const xPos = i => 0;
 const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
 
-class CrypRow extends Phaser.GameObjects.Group {
+class CrypRows extends Phaser.GameObjects.Group {
     constructor(list, cryps) {
         super(list);
         this.keyboard = list.input.keyboard;
@@ -31,8 +30,10 @@ class CrypRow extends Phaser.GameObjects.Group {
                 ? 1
                 : 0;
 
+            const FILL = Object.values(COLOURS)[i];
+
             const row = list.add
-                .rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random(), ACTIVE_FILL)
+                .rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
                 .setInteractive()
                 .setOrigin(0);
 
@@ -60,4 +61,4 @@ class CrypRow extends Phaser.GameObjects.Group {
     }
 }
 
-module.exports = CrypRow;
+module.exports = CrypRows;

client/src/scenes/lobbies.js

@@ -0,0 +1,57 @@
+const Phaser = require('phaser');
+
+const { TEXT } = require('./constants');
+
+const ROW_WIDTH = 400;
+const ROW_HEIGHT = 200;
+
+const BUTTON_WIDTH = 200;
+const BUTTON_HEIGHT = 100;
+
+const TOP_MARGIN = 50;
+const BUTTON_MARGIN = 50;
+const TEXT_MARGIN = 24;
+
+class Lobbies extends Phaser.GameObjects.Group {
+    constructor(list, cryps) {
+        super(list);
+        this.keyboard = list.input.keyboard;
+
+        const X_POS = ROW_WIDTH + 50;
+
+        const pvp = list.add
+            .rectangle(X_POS, TOP_MARGIN, BUTTON_WIDTH, BUTTON_HEIGHT, 0x440000)
+            .setInteractive()
+            .setOrigin(0);
+
+        this
+            .add(list.add.text(pvp.getCenter().x, pvp.getCenter().y, 'PVP', TEXT.HEADER));
+
+        const pve = list.add
+            .rectangle(X_POS, TOP_MARGIN + BUTTON_HEIGHT + BUTTON_MARGIN, BUTTON_WIDTH, BUTTON_HEIGHT, 0x004400)
+            .setInteractive()
+            .setOrigin(0);
+
+        this
+            .add(list.add.text(pve.getCenter().x, pve.getCenter().y, 'PVE', TEXT.HEADER));
+
+        pvp.on('pointerdown', () => {
+            console.log(cryps.filter(c => c.active));
+        });
+
+        pve.on('pointerdown', () => {
+            console.log(cryps.filter(c => c.active));
+        });
+
+        this.add(pve);
+        this.add(pvp);
+
+        return true;
+    }
+
+    cleanup() {
+        return true;
+    }
+}
+
+module.exports = Lobbies;