active cryps

client/.eslintrc.js

@@ -927,7 +927,7 @@ module.exports = {
 
         // specify the maximum length of a line in your program
         // https://eslint.org/docs/rules/max-len
-        'max-len': ['error', 100, 2, {
+        'max-len': ['error', 120, 2, {
           ignoreUrls: true,
           ignoreComments: false,
           ignoreRegExpLiterals: true,

client/src/events.js

@@ -0,0 +1,27 @@
+const actions = require('./actions');
+
+function registerEvents(store, registry, events) {
+
+    store.subscribe(() => {
+        const state = store.getState();
+        registry.set('cryps', state.cryps);
+        registry.set('ws', state.ws);
+    });
+
+    events.on('CRYP_ACTIVE', (cryp) => {
+        const { cryps } = store.getState();
+
+        cryps.forEach((c) => {
+            if (c.id === cryp.id) {
+                console.log(c);
+                if (c.active) return c.active = false;
+                return c.active = true;
+            }
+            return false;
+        });
+
+        store.dispatch(actions.setCryps(cryps));
+    });
+}
+
+module.exports = registerEvents;

client/src/main.jsx

@@ -6,6 +6,7 @@ const reducers = require('./reducers');
 const actions = require('./actions');
 const setupKeys = require('./keyboard');
 const createSocket = require('./socket');
+const registerEvents = require('./events');
 
 // Redux Store
 const store = createStore(
@@ -28,4 +29,6 @@ const ws = createSocket(store);
 store.dispatch(actions.setWs(ws));
 ws.connect();
 
-renderCryps(store);
+const game = renderCryps(store);
+
+registerEvents(store, game.registry, game.events);

client/src/scenes/cryp.list.js

@@ -16,7 +16,10 @@ class CrypList extends Phaser.Scene {
 
     updateData(parent, key, data) {
         if (key === 'cryps') {
-            if (this.CrypRow) this.CrypRow.destroy(true);
+            if (this.CrypRow) {
+                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);

client/src/scenes/cryp.row.js

@@ -10,26 +10,49 @@ const TOP_MARGIN = 50;
 const ROW_MARGIN = 50;
 const TEXT_MARGIN = 24;
 
+const KEY_MAP = [
+    'keydown_ONE',
+    'keydown_TWO',
+    'keydown_THREE',
+];
+
 const xPos = i => 0;
 const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
 
 class CrypRow extends Phaser.GameObjects.Group {
     constructor(list, cryps) {
         super(list);
+        this.keyboard = list.input.keyboard;
         cryps.forEach((cryp, i) => {
             const X_ORIGIN = xPos(i);
             const Y_ORIGIN = yPos(i);
-            const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random())
-                .setInteractive()
-                .setOrigin(0);
 
-            row.cryp = cryp;
-            this.add(row);
+            // only draw for active cryps
+            if (cryp.active) {
+                const row = list.add
+                    .rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random())
+                    .setInteractive()
+                    .setOrigin(0);
+                this.add(row);
+                row.cryp = cryp;
+            }
+
+            if (KEY_MAP[i]) {
+                this.keyboard.on(KEY_MAP[i], () => {
+                    list.game.events.emit('CRYP_ACTIVE', cryp);
+                }, this);
+            }
+
             this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));
+            this.add(list.add.text(ROW_WIDTH - 20, Y_ORIGIN + (TEXT_MARGIN * 0), i + 1, TEXT.HEADER));
             this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, TEXT.NORMAL));
         });
         return true;
     }
+
+    cleanup() {
+        KEY_MAP.forEach(k => this.keyboard.removeListener(k));
+    }
 }
 
-module.exports = CrypRow;
+module.exports = CrypRow;

client/src/scenes/cryps.js

@@ -27,11 +27,6 @@ function renderCryps(store, socket) {
 
     const game = new Phaser.Game(config);
 
-    store.subscribe(() => {
-        const state = store.getState();
-        game.registry.set('cryps', state.cryps);
-        game.registry.set('ws', state.ws);
-    });
     window.addEventListener('mouseup', () => game.registry.set('pan', false));
     window.addEventListener('mousedown', () => game.registry.set('pan', true));
     window.addEventListener('resize', () => game.resize(window.innerWidth, window.innerHeight), false);