Merge branch 'master' of ssh://cryps.gg:40022/~/cryps

client/package.json

@@ -21,7 +21,7 @@
     "keymaster": "^1.6.2",
     "lodash": "^4.17.11",
     "parcel": "^1.9.7",
-    "phaser": "^3",
+    "phaser": "^3.16.1",
     "redux": "^4.0.0"
   },
   "devDependencies": {

client/src/scenes/constants.js

@@ -17,6 +17,8 @@ const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.5);
 const itemListHeight = () => Math.floor(CANVAS_HEIGHT * 0.5);
 const itemListX = () => 0;
 const itemListY = () => Math.floor(CANVAS_HEIGHT * 0.5);
+const itemBlockWidth = () => Math.floor(itemListWidth() * 0.1);
+const itemBlockHeight = () => Math.floor(itemListHeight() * 0.16);
 
 const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH * 0.5);
 const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT * 0.3);
@@ -92,6 +94,9 @@ module.exports = {
             y: itemListY,
             width: itemListWidth,
             height: itemListHeight,
+            itemWidth: itemBlockWidth,
+            itemHeight: itemBlockHeight,
+
         },
 
         STATS: {

client/src/scenes/cryps.js

@@ -11,7 +11,7 @@ function renderCryps() {
         // backgroundColor: '#181818',
         resolution: window.devicePixelRatio,
         scale: {
-            mode: Phaser.DOM.WIDTH_CONTROLS_HEIGHT,
+            mode: Phaser.Scale.FIT,
             width: 1600,
             height: 1000,
             max: {

client/src/scenes/elements/item.js

@@ -0,0 +1,63 @@
+const Phaser = require('phaser');
+
+const {
+    TEXT,
+    COLOURS,
+} = require('../constants');
+
+class Item extends Phaser.GameObjects.Container {
+    constructor(scene, action, count, x, y, width, height) {
+        super(scene, x, y);
+
+        this.state = 'deselect';
+        this.action = action;
+        this.scene = scene;
+
+        this.origX = x;
+        this.origY = y;
+
+        this.box = scene.add
+            .rectangle(0, 0, width, height, 0x222222);
+
+        this.text = scene.add
+            // .text(0, 0, `${action} x${count}`, TEXT.NORMAL)
+            .text(0, 0, `x${count}`, TEXT.NORMAL)
+            .setOrigin(0.5, 0.5);
+
+        this.add(this.box);
+        this.add(this.text);
+
+        this.setSize(width, height);
+        this.setInteractive();
+    }
+
+    clickHandler() {
+        this.scene.activeItem = this;
+        // Set the main context to display the item info
+        this.scene.registry.set('itemInfo', this.action);
+        this.select();
+    }
+
+    select() {
+        this.scene.children.list.forEach((item) => {
+            if (item.state === 'select') item.deselect();
+        });
+        this.box.setFillStyle(COLOURS.SELECT);
+        this.state = 'select';
+    }
+
+    activate() {
+        this.scene.children.list.forEach((item) => {
+            if (item.state === 'select') item.deselect();
+        });
+        this.box.setFillStyle(0xff0000);
+        this.state = 'activate';
+    }
+
+    deselect() {
+        this.box.setFillStyle(0x222222);
+        this.state = 'deselect';
+    }
+}
+
+module.exports = Item;

client/src/scenes/item.info.js

@@ -0,0 +1,27 @@
+const Phaser = require('phaser');
+const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
+
+const X = MENU_MAIN.x();
+const Y = MENU_MAIN.y();
+const WIDTH = MENU_MAIN.width();
+const HEIGHT = MENU_MAIN.height();
+
+class ItemInfo extends Phaser.Scene {
+    constructor() {
+        super({ key: 'ItemInfo' });
+    }
+
+    create(item) {
+        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
+        // this.item = item;
+        this.add.text(WIDTH / 10, 0, item, TEXT.HEADER);
+        this.add.text(WIDTH / 10, 50, 'descriptions go here', TEXT.NORMAL);
+        // this.addItemInfo(item);
+    }
+
+    cleanUp() {
+        this.scene.remove();
+    }
+}
+
+module.exports = ItemInfo;

client/src/scenes/item.list.js

@@ -1,9 +1,10 @@
 const Phaser = require('phaser');
 const { countBy } = require('lodash');
 
+const Item = require('./elements/item');
+
 const {
     TEXT,
-    COLOURS,
     POSITIONS: { ITEM_LIST },
 } = require('./constants');
 
@@ -11,18 +12,63 @@ const X = ITEM_LIST.x();
 const Y = ITEM_LIST.y();
 const WIDTH = ITEM_LIST.width();
 const HEIGHT = ITEM_LIST.height();
-const ITEM_WIDTH = WIDTH * 0.4;
+const ITEM_WIDTH = ITEM_LIST.itemWidth();
-const ITEM_HEIGHT = HEIGHT * 0.06;
+const ITEM_HEIGHT = ITEM_LIST.itemHeight();
 
-const itemCheckHitbox = (scenePlugin, pointer) => {
+const INV_X = X + ITEM_WIDTH * 0.325;
-    const { list } = scenePlugin.get('MenuCrypList').children;
+const INV_Y = Y + ITEM_HEIGHT * 1.5;
-    const hitboxes = list.filter(c => c.cryp);
+const INV_ROWS = 3;
+const INV_COLUMNS = 5;
+
+const COMB_X = INV_X + ITEM_WIDTH * 6.75;
+const COMB_Y = INV_Y;
+const COMB_ROWS = 2;
+const COMB_COLUMNS = 2;
+
+const drawInventory = (graphics) => {
+    const invDrawX = INV_X - ITEM_WIDTH * 0.05;
+    const invDrawY = INV_Y - ITEM_HEIGHT * 0.05;
+    for (let i = 0; i <= INV_COLUMNS; i += 1) {
+        const x = invDrawX + i * ITEM_WIDTH * 1.1;
+        graphics.lineBetween(x, invDrawY, x, invDrawY + ITEM_HEIGHT * 1.1 * INV_ROWS);
+    }
+    for (let i = 0; i <= INV_ROWS; i += 1) {
+        const y = invDrawY + i * ITEM_HEIGHT * 1.1;
+        graphics.lineBetween(invDrawX, y, invDrawX + ITEM_WIDTH * 1.1 * INV_COLUMNS, y);
+    }
+};
+
+const drawCombiner = (graphics) => {
+    const combDrawX = COMB_X - ITEM_WIDTH * 0.05;
+    const combDrawY = COMB_Y - ITEM_HEIGHT * 0.05;
+    for (let i = 0; i <= COMB_COLUMNS; i += 1) {
+        const x = combDrawX + i * ITEM_WIDTH * 1.1;
+        graphics.lineBetween(x, combDrawY, x, combDrawY + ITEM_HEIGHT * 1.1 * COMB_ROWS);
+    }
+    for (let i = 0; i <= COMB_ROWS; i += 1) {
+        const y = combDrawY + i * ITEM_HEIGHT * 1.1;
+        graphics.lineBetween(combDrawX, y, combDrawX + ITEM_WIDTH * 1.1 * COMB_COLUMNS, y);
+    }
+};
+
+class CombinerHitBox extends Phaser.GameObjects.Rectangle {
+    constructor(scene, x, y, i) {
+        super(scene, x, y, ITEM_WIDTH, ITEM_HEIGHT, 0x000000);
+        this.setOrigin(0);
+        this.slot = i;
+        this.itemSelect = () => this.setFillStyle(0x222222);
+        this.itemDeselect = () => this.setFillStyle(0x000000);
+    }
+}
+
+const itemCheckHitbox = (scene, pointer) => {
+    const { list } = scene.scene.get('MenuCrypList').children;
+    const hitboxes = list.filter(c => c.cryp)
+        .concat(scene.children.list.filter(c => c instanceof CombinerHitBox));
 
     let found;
-
     for (let i = 0; i < hitboxes.length; i += 1) {
-        if (hitboxes[i].cryp && Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(),
+        if (Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), pointer.position)) {
-            pointer.position)) {
             found = hitboxes[i];
         } else {
             hitboxes[i].itemDeselect();
@@ -32,58 +78,6 @@ const itemCheckHitbox = (scenePlugin, pointer) => {
     return found;
 };
 
-class Item extends Phaser.GameObjects.Container {
-    constructor(scene, action, count, x, y) {
-        super(scene, x, y);
-
-        this.state = 'deselect';
-        this.action = action;
-        this.scene = scene;
-
-        this.origX = x;
-        this.origY = y;
-
-        this.box = scene.add
-            .rectangle(0, 0, ITEM_WIDTH, ITEM_HEIGHT, 0x222222);
-
-        this.text = scene.add
-            .text(0, 0, `${action} x${count}`, TEXT.NORMAL)
-            .setOrigin(0.5, 0.5);
-
-        this.add(this.box);
-        this.add(this.text);
-
-        this.setSize(ITEM_WIDTH, ITEM_HEIGHT);
-        this.setInteractive();
-    }
-
-    clickHandler() {
-        this.scene.activeItem = this;
-        this.select();
-    }
-
-    select() {
-        this.scene.children.list.forEach((item) => {
-            if (item.state === 'select') item.deselect();
-        });
-        this.box.setFillStyle(COLOURS.SELECT);
-        this.state = 'select';
-    }
-
-    activate() {
-        this.scene.children.list.forEach((item) => {
-            if (item.state === 'select') item.deselect();
-        });
-        this.box.setFillStyle(0xff0000);
-        this.state = 'activate';
-    }
-
-    deselect() {
-        this.box.setFillStyle(0x222222);
-        this.state = 'deselect';
-    }
-}
-
 class ItemList extends Phaser.Scene {
     constructor() {
         super({ key: 'ItemList', active: true });
@@ -99,47 +93,68 @@ class ItemList extends Phaser.Scene {
 
     create(itemList) {
         if (!itemList) return false;
-        const ws = this.registry.get('ws');
-        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
-
         this.registry.events.on('changedata', this.updateData, this);
         this.registry.events.on('setdata', this.updateData, this);
+        this.addStatic();
+        this.addItems(itemList);
+        this.addClickHandlers(itemList);
+        return this;
+    }
 
-        if (!itemList) return false;
+    addStatic() {
-
+        const graphics = this.add.graphics();
-        this.add.text(WIDTH / 4, HEIGHT / 4, 'Inventory', TEXT.HEADER);
+        graphics.lineStyle(5, 0x808080, 1.0);
+        drawCombiner(graphics);
+        drawInventory(graphics);
+        this.add.text(X + WIDTH / 4, Y + HEIGHT / 8, 'Inventory', TEXT.HEADER);
+        this.add.text(X + WIDTH * 3 / 4, Y + HEIGHT / 8, 'Combiner', TEXT.HEADER);
+    }
 
+    addItems(itemList) {
         const actions = countBy(itemList, i => i.action);
 
-        Object.keys(actions).forEach((action, i) => {
+        for (let i = 0; i < (COMB_COLUMNS * COMB_ROWS); i += 1) {
-            const ITEM_X = ITEM_WIDTH;
+            const ITEM_X = ITEM_WIDTH * 1.1 * (i % COMB_COLUMNS) + INV_X + ITEM_WIDTH * 6.75;
-            const ITEM_Y = ITEM_HEIGHT * 1.2 * i + HEIGHT / 2.5;
+            const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + INV_Y;
+            this.add.existing(new CombinerHitBox(this, ITEM_X, ITEM_Y, i));
+        }
 
-            const itemBox = new Item(this, action, actions[action], ITEM_X, ITEM_Y);
+        Object.keys(actions).forEach((action, i) => {
+            const ITEM_X = ITEM_WIDTH * 1.1 * (i % INV_COLUMNS) + INV_X + ITEM_WIDTH * 0.5;
+            const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / INV_COLUMNS) + INV_Y + ITEM_HEIGHT * 0.5;
+            const itemBox = new Item(this, action, actions[action], ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
             this.input.setDraggable(itemBox);
             this.add.existing(itemBox);
         });
+    }
 
+    addClickHandlers(itemList) {
+        const ws = this.registry.get('ws');
         this.input.on('dragstart', (pointer, box) => {
+            if (!(box instanceof Item)) return false;
             box.clickHandler();
+            return true;
         });
 
         this.input.on('drag', (pointer, box, dragX, dragY) => {
-            const hitBox = itemCheckHitbox(this.scene, pointer);
+            if (!(box instanceof Item)) return false;
-            if (hitBox) hitBox.itemSelect();
             box.setPosition(dragX, dragY);
+            const hitBox = itemCheckHitbox(this, pointer);
+            if (hitBox) hitBox.itemSelect();
+            return true;
         });
 
         this.input.on('dragend', (pointer, box) => {
+            if (!(box instanceof Item)) return false;
             box.deselect();
-            const hitBox = itemCheckHitbox(this.scene, pointer);
+            const hitBox = itemCheckHitbox(this, pointer);
-            if (hitBox) {
-                ws.sendItemUse(itemList.find(li => li.action === box.action).id, hitBox.cryp.id);
-            }
             box.setPosition(box.origX, box.origY);
+            if (!hitBox) return false;
+            if (hitBox instanceof CombinerHitBox) console.log(`Moved item into slot ${hitBox.slot}`);
+            else ws.sendItemUse(itemList.find(li => li.action === box.action).id, hitBox.cryp.id);
+            hitBox.itemDeselect();
+            return true;
         });
-
-        return this;
     }
 
     cleanUp() {

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

@@ -20,7 +20,7 @@ class MenuCrypList extends Phaser.Scene {
     }
 
     create() {
-        this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height());
+        // this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height());
         this.registry.events.on('changedata', this.updateData, this);
         this.registry.events.on('setdata', this.updateData, this);
         this.addCrypRows(this.registry.get('cryps'));
@@ -40,12 +40,17 @@ class MenuCrypList extends Phaser.Scene {
         this.crypRows = this.add.group();
         // We only display 3 cryps others can be viewed in cryp list (soon TM)
         const crypDispLength = cryps.length < 3 ? cryps.length : 3;
+        const crypStat = (stat, i, crypInfo) => {
+            this.crypRows.add(this.add
+                .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (2 + i), `${stat.stat}: ${stat.base}`, TEXT.NORMAL)
+                .setOrigin(0.5, 0.5));
+        };
         for (let i = 0; i < crypDispLength; i += 1) {
             const cryp = cryps[i];
-            const ROW_X = 0;
-            const ROW_Y = (i * ROW_HEIGHT);
-
             const BOX_WIDTH = Math.floor(ROW_WIDTH / 5);
+            const ROW_X = i * BOX_WIDTH * 2;
+            const ROW_Y = CRYP_LIST.y();
+
 
             const ACTIVE_FILL = cryp.active
                 ? 1
@@ -55,13 +60,14 @@ class MenuCrypList extends Phaser.Scene {
             // Selection of cryps
             const selectFn = () => {
                 this.game.events.emit('CRYP_ACTIVE', cryp);
+                this.registry.set('crypStats', cryp);
             };
 
             if (KEY_MAP[i]) {
                 this.input.keyboard.on(KEY_MAP[i], selectFn, this);
             }
 
-            const crypSelect = this.add
+/*            const crypSelect = this.add
                 .rectangle(ROW_X, ROW_Y, BOX_WIDTH, ROW_HEIGHT, FILL, 1)
                 .setInteractive()
                 .setOrigin(0)
@@ -69,17 +75,16 @@ class MenuCrypList extends Phaser.Scene {
             this.crypRows.add(crypSelect);
             this.crypRows.add(this.add
                 .text(crypSelect.getCenter().x, crypSelect.y + TEXT_MARGIN, i + 1, TEXT.HEADER)
-                .setOrigin(0.5, 0.5));
+                .setOrigin(0.5, 0.5));*/
 
 
             // Cryp avatar and interaction box
             const crypInteract = this.add
-                .rectangle(ROW_X + BOX_WIDTH, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL)
+                .rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 2.5, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL)
                 .setInteractive()
                 .setOrigin(0)
-                .on('pointerdown', () => {
+                .on('pointerdown', selectFn);
-                    this.registry.set('crypStats', cryp);
+            
-                });
             crypInteract.itemSelect = () => {
                 crypInteract.setFillStyle(COLOURS.SELECT);
             };
@@ -97,15 +102,24 @@ class MenuCrypList extends Phaser.Scene {
 
             // Cryp information box (names + skills)
             const crypInfo = this.add
-                .rectangle(ROW_X + BOX_WIDTH * 3, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL)
+                .rectangle(ROW_X, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT * 2.5, FILL, ACTIVE_FILL)
-                .setOrigin(0);
+                .setOrigin(0)
+                .setInteractive()
+                .on('pointerdown', selectFn);
+
             this.crypRows.add(crypInfo);
             this.crypRows.add(this.add
                 .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
                 .setOrigin(0.5, 0.5));
-            this.crypRows.add(this.add
+            const CRYP_STATS = [
-                .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * 2, `Level: ${cryp.lvl}`, TEXT.NORMAL)
+                cryp.stamina,
-                .setOrigin(0.5, 0.5));
+                cryp.armour,
+                cryp.spell_shield,
+                cryp.phys_dmg,
+                cryp.spell_dmg,
+                cryp.speed,
+            ];
+            CRYP_STATS.forEach((stat, j) => crypStat(stat, j, crypInfo));
         }
         return true;
     }
@@ -113,7 +127,7 @@ class MenuCrypList extends Phaser.Scene {
     addControls() {
         // Add Spawn Cryp Option
         const spawn = this.add
-            .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 3.5, ROW_WIDTH * 0.4, ROW_HEIGHT, 0x888888)
+            .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 4, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888)
             .setInteractive()
             .setOrigin(0)
             .on('pointerdown', () => {

client/src/scenes/menu.js

@@ -9,6 +9,7 @@ const Zones = require('./zones');
 const GameList = require('./game.list');
 const StatSheet = require('./statsheet');
 const SpecSheet = require('./specsheet');
+const ItemInfo = require('./item.info');
 
 const FIXED_MENU_SCENES = [
     'MenuCrypList',
@@ -21,6 +22,7 @@ const MAIN_MENU_SCENES = [
     'GameList',
     'StatSheet',
     'SpecSheet',
+    'ItemInfo',
 ];
 
 
@@ -53,6 +55,7 @@ class Menu extends Phaser.Scene {
             case 'gameList': return this.newMainScene('GameList', GameList, data);
             case 'crypStats': return this.newMainScene('StatSheet', StatSheet, data);
             case 'crypSpec': return this.newMainScene('SpecSheet', SpecSheet, data);
+            case 'itemInfo': return this.newMainScene('ItemInfo', ItemInfo, data);
             default: return false;
         }
     }

server/COMBOS.md

@@ -73,7 +73,7 @@ Buff `Base ally targetted skill - significantly increase ally speed`
 ### Slow ###
 
 Combine `Base Skill Debuff + 1 Red & 2 Blue`
-Buff `Base ally targetted skill - significantly increase ally speed`
+Buff `Base ally targetted skill - significantly decrease enemy speed`
 
 # Non-Violence Type #