game list

client/src/scenes/combat.js

@@ -52,7 +52,7 @@ class Combat extends Phaser.Scene {
         const logX = POSITIONS.COMBAT.LOG.x();
         const logY = POSITIONS.COMBAT.LOG.y();
         const logWidth = POSITIONS.COMBAT.LOG.width();
-        this.log = this.add.text(logX, logY, 'loading', TEXT.NORMAL);
+        this.log = this.add.text(logX, logY, '', TEXT.NORMAL);
         this.log.setWordWrapWidth(logWidth);
         return true;
     }
@@ -71,7 +71,7 @@ class Combat extends Phaser.Scene {
             }
             this.CrypSkillsOne = new DrawCrypTeam(this, 0, playerOneCryp);
             this.CrypSkillsTwo = new DrawCrypTeam(this, 1, playerTwoCryp);
-            
+
             this.renderCombat(data);
         }
         return true;
@@ -79,8 +79,8 @@ class Combat extends Phaser.Scene {
 
     renderCombat(game) {
         if (!game) return false;
-        console.log('combat render');
+        // shallow copy because reverse mutates
-        this.log.setText(game.log.reverse());
+        this.log.setText(Array.from(game.log).reverse());
         return true;
     }
 }

client/src/scenes/constants.js

@@ -1,13 +1,25 @@
 // POSITIONING FNS
+// floors prevent subpixel rendering which looks trash
 const menuWidth = () => window.innerWidth;
-const menuHeight = () => window.innerHeight * 0.1;
+const menuHeight = () => Math.floor(window.innerHeight * 0.05);
 
 const combatWidth = () => window.innerWidth;
 const combatHeight = () => window.innerHeight - menuHeight();
 const combatY = () => menuHeight();
 const combatX = () => 0;
 
-const logWidth = () => combatWidth() * 0.2;
+const crypListWidth = () => Math.floor(window.innerWidth * 0.2);
+const crypListHeight = () => window.innerHeight - menuHeight();
+const cryplistRowHeight = cryps => crypListHeight() / cryps.length;
+const crypListY = () => menuHeight();
+const crypListX = () => 0;
+
+const gameListWidth = () => Math.floor(window.innerWidth * 0.2);
+const gameListHeight = () => Math.floor(window.innerHeight / 10);
+const gameListX = () => crypListWidth();
+const gameListY = i => menuHeight() + (gameListHeight() * i);
+
+const logWidth = () => Math.floor(combatWidth() * 0.2);
 const logHeight = () => combatHeight();
 const logY = () => menuHeight();
 const logX = () => combatWidth() - logWidth();
@@ -24,6 +36,15 @@ module.exports = {
             height: menuHeight,
         },
 
+        CRYP_LIST: {
+            x: crypListX,
+            y: crypListY,
+            width: crypListWidth,
+            height: crypListHeight,
+            rowHeight: cryplistRowHeight,
+            rowWidth: crypListWidth,
+        },
+
         COMBAT: {
             x: combatX,
             y: combatY,
@@ -37,6 +58,13 @@ module.exports = {
                 height: logHeight,
             },
         },
+
+        GAME_LIST: {
+            x: gameListX,
+            y: gameListY,
+            width: gameListWidth,
+            height: gameListHeight,
+        },
     },
 
     COLOURS: {

client/src/scenes/cryp.list.js

@@ -2,7 +2,7 @@ const Phaser = require('phaser');
 
 const CrypRows = require('./cryp.row');
 const CrypPage = require('./cryp.page');
-const Lobbies = require('./lobbies');
+const GameList = require('./game.list');
 
 class CrypList extends Phaser.Scene {
     constructor() {
@@ -35,7 +35,7 @@ class CrypList extends Phaser.Scene {
             this.displaySkills(cryp);
         }
 
-        this.lobbies = new Lobbies(this, cryps);
+        this.gameList = new GameList(this, cryps);
     }
 
     displaySkills(cryp) {

client/src/scenes/cryp.row.js

@@ -1,12 +1,7 @@
 const Phaser = require('phaser');
 
-const { TEXT, COLOURS } = require('./constants');
+const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU } } = require('./constants');
 
-const ROW_WIDTH = 400;
-const ROW_HEIGHT = 200;
-
-const TOP_MARGIN = 50;
-const ROW_MARGIN = 50;
 const TEXT_MARGIN = 24;
 
 const KEY_MAP = [
@@ -15,16 +10,17 @@ const KEY_MAP = [
     'keydown_THREE',
 ];
 
-const xPos = i => 0;
-const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
-
 class CrypRows extends Phaser.GameObjects.Group {
     constructor(list, cryps) {
         super(list);
         this.keyboard = list.input.keyboard;
+
+        const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps);
+        const ROW_WIDTH = CRYP_LIST.rowWidth();
+
         cryps.forEach((cryp, i) => {
-            const X_ORIGIN = xPos(i);
+            const ROW_X = CRYP_LIST.x();
-            const Y_ORIGIN = yPos(i);
+            const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height();
 
             const ACTIVE_FILL = cryp.active
                 ? 1
@@ -33,7 +29,7 @@ class CrypRows extends Phaser.GameObjects.Group {
             const FILL = Object.values(COLOURS)[i];
 
             const row = list.add
-                .rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
+                .rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
                 .setInteractive()
                 .setOrigin(0);
 
@@ -49,9 +45,9 @@ class CrypRows extends Phaser.GameObjects.Group {
 
             row.cryp = cryp;
             this.add(row);
-            this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));
+            this.add(list.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER));
-            this.add(list.add.text(ROW_WIDTH - 20, Y_ORIGIN + (TEXT_MARGIN * 0), i + 1, TEXT.HEADER));
+            this.add(list.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));
-            this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, TEXT.NORMAL));
+            this.add(list.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 1), cryp.stamina.base, TEXT.NORMAL));
         });
         return true;
     }

client/src/scenes/game.list.js

@@ -1,28 +1,31 @@
 const Phaser = require('phaser');
 
-const { TEXT } = require('./constants');
+const {
+    TEXT,
+    // COLOURS,
+    POSITIONS: { GAME_LIST },
+} = require('./constants');
 
-const ROW_WIDTH = 400;
+class GameList extends Phaser.GameObjects.Group {
-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;
+        // this.keyboard = list.input.keyboard;
 
         const ws = list.registry.get('ws');
 
-        const X_POS = ROW_WIDTH + 50;
+        const games = [
+            'PVE',
+            'PVP',
+        ];
+
+        const X = GAME_LIST.x();
+        const WIDTH = GAME_LIST.width();
+        const HEIGHT = GAME_LIST.height();
+
+        console.log(GAME_LIST.y(0))
 
         const pvp = list.add
-            .rectangle(X_POS, TOP_MARGIN, BUTTON_WIDTH, BUTTON_HEIGHT, 0x440000)
+            .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)
             .setInteractive()
             .setOrigin(0);
 
@@ -30,7 +33,7 @@ class Lobbies extends Phaser.GameObjects.Group {
             .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)
+            .rectangle(X, GAME_LIST.y(1), WIDTH, HEIGHT, 0x004400)
             .setInteractive()
             .setOrigin(0);
 
@@ -59,4 +62,4 @@ class Lobbies extends Phaser.GameObjects.Group {
     }
 }
 
-module.exports = Lobbies;
+module.exports = GameList;