rejoin games

client/package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "parcel index.html --port 40080 --no-hmr --no-source-maps",
-    "build": "rm -rf dist && parcel build index.html",
+    "build": "rm -rf dist && parcel build --no-source-maps index.html",
     "lint": "eslint --fix src/",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

client/src/main.js

@@ -7,5 +7,6 @@ const game = renderCryps();
 const events = registerEvents(game.registry, game.events);
 const ws = createSocket(events);
 events.setWs(ws);
+events.setGameList([]);
 
 ws.connect();

client/src/scenes/constants.js

@@ -18,6 +18,7 @@ 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 gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2));
 
 const statsWidth = () => Math.floor(window.innerWidth - crypListWidth() - gameListWidth());
 const statsHeight = () => window.innerHeight - menuHeight();
@@ -82,6 +83,7 @@ module.exports = {
             y: gameListY,
             width: gameListWidth,
             height: gameListHeight,
+            rowY: gameListRowY,
         },
     },
 

client/src/scenes/cryp.list.js

@@ -15,14 +15,23 @@ class CrypList extends Phaser.Scene {
         return true;
     }
 
-    updateData(parent, key, data) {
-        if (key === 'cryps') {
-            this.renderList(data);
+    updateData(parent, key) {
+        const UPDATE_KEYS = ['gameList', 'cryps'];
+        if (UPDATE_KEYS.includes(key)) {
+            this.renderList();
+            this.renderGameList();
         }
+
+        if (key === 'game' && this.scene.isActive()) {
+            this.scene.switch('Combat');
+        }
+
         return true;
     }
 
-    renderList(cryps) {
+    renderList() {
+        const cryps = this.registry.get('cryps');
+
         // your cryps
         if (this.CrypRows) {
             this.CrypRows.cleanup();
@@ -35,10 +44,19 @@ class CrypList extends Phaser.Scene {
             const cryp = cryps.find(c => c.id === this.CrypPage.id);
             this.displaySkills(cryp);
         }
+    }
+
+    renderGameList() {
+        const ws = this.registry.get('ws');
+        const cryps = this.registry.get('cryps');
+        const gameList = this.registry.get('gameList');
+
         if (this.gameList) {
+            this.gameList.cleanup();
             this.gameList.destroy(true);
         }
-        this.gameList = new GameList(this, cryps);
+
+        this.gameList = new GameList({ list: this, ws, cryps, gameList });
     }
 
     displaySkills(cryp) {

client/src/scenes/game.list.js

@@ -7,55 +7,65 @@ const {
 } = require('./constants');
 
 class GameList extends Phaser.GameObjects.Group {
-    constructor(list, cryps) {
+    constructor(args) {
         super(list);
-        // this.keyboard = list.input.keyboard;
 
-        const ws = list.registry.get('ws');
-
-        const games = [
-            'PVE',
-            'PVP',
-        ];
+        const { list, ws, cryps, gameList } = args;
 
         const X = GAME_LIST.x();
         const WIDTH = GAME_LIST.width();
         const HEIGHT = GAME_LIST.height();
+        const TEXT_MARGIN = 24;
 
         const pvp = list.add
             .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)
             .setInteractive()
             .setOrigin(0);
 
-        this
-            .add(list.add.text(pvp.getCenter().x, pvp.getCenter().y, 'NEW', TEXT.HEADER));
+        this.add(list.add.text(pvp.getCenter().x, pvp.getCenter().y, 'NEW', TEXT.HEADER));
 
         const pve = list.add
             .rectangle(X, GAME_LIST.y(1), Math.floor(WIDTH / 2), HEIGHT, 0x004400)
             .setInteractive()
             .setOrigin(0);
 
-        this
-            .add(list.add.text(pve.getCenter().x, pve.getCenter().y, 'PVE', TEXT.HEADER));
+        this.add(list.add.text(pve.getCenter().x, pve.getCenter().y, 'PVE', TEXT.HEADER));
 
         const refresh = list.add
             .rectangle(X + Math.floor(WIDTH / 2), GAME_LIST.y(1), Math.floor(WIDTH / 2), HEIGHT, 0x000044)
             .setInteractive()
             .setOrigin(0);
 
-        this
-            .add(list.add.text(refresh.getCenter().x, refresh.getCenter().y, 'REFRESH', TEXT.HEADER));
+        this.add(list.add.text(refresh.getCenter().x, refresh.getCenter().y, 'REFRESH', TEXT.HEADER));
 
 
+        const gameRow = (game, i) => {
+            const GAME_X = GAME_LIST.x();
+            const GAME_Y = GAME_LIST.rowY(i);
+
+            const gameBox = list.add
+                .rectangle(GAME_X, GAME_Y, WIDTH, HEIGHT, 0x111111)
+                .setInteractive()
+                .setOrigin(0);
+
+            this.add(list.add.text(GAME_X, GAME_Y, game.id, TEXT.NORMAL));
+            this.add(list.add.text(GAME_X, GAME_Y + TEXT_MARGIN, `${game.team_size}v${game.team_size}`, TEXT.NORMAL));
+
+            gameBox.on('pointerdown', () => {
+                const team = cryps.filter(c => c.active).map(c => c.id);
+                ws.sendGameJoin(game.id, team);
+            });
+        };
+
+        gameList.forEach(gameRow);
+
         pvp.on('pointerdown', () => {
             const team = cryps.filter(c => c.active).map(c => c.id);
-            list.scene.switch('Combat');
             return ws.sendGamePvp(team);
         });
 
         pve.on('pointerdown', () => {
             const team = cryps.filter(c => c.active).map(c => c.id);
-            list.scene.switch('Combat');
             return ws.sendGamePve(team);
         });