Inventory scene now uses vbox

client/src/scenes/constants.js

@@ -17,8 +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 itemBlockWidth = () => Math.floor(itemListWidth() * 0.075);
-const itemBlockHeight = () => Math.floor(itemListHeight() * 0.16);
+const itemBlockHeight = () => Math.floor(itemListHeight() * 0.12);
 
 const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH * 0.5);
 const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT * 0.3);

client/src/scenes/elements/item.js

@@ -6,7 +6,7 @@ const {
 } = require('../constants');
 
 class Item extends Phaser.GameObjects.Container {
-    constructor(scene, action, count, x, y, width, height) {
+    constructor(scene, action, x, y, width, height) {
         super(scene, x, y);
 
         this.state = 'deselect';
@@ -21,7 +21,7 @@ class Item extends Phaser.GameObjects.Container {
 
         this.text = scene.add
             // .text(0, 0, `${action} x${count}`, TEXT.NORMAL)
-            .text(0, 0, `x${count}`, TEXT.NORMAL)
+            .text(0, 0, `${action}`, TEXT.NORMAL)
             .setOrigin(0.5, 0.5);
 
         this.add(this.box);

client/src/scenes/item.list.js

@@ -16,15 +16,34 @@ const ITEM_WIDTH = ITEM_LIST.itemWidth();
 const ITEM_HEIGHT = ITEM_LIST.itemHeight();
 
 const INV_X = X + ITEM_WIDTH * 0.325;
-const INV_Y = Y + ITEM_HEIGHT * 1.5;
+const INV_Y = Y + ITEM_HEIGHT;
 const INV_ROWS = 3;
-const INV_COLUMNS = 5;
+const INV_COLUMNS = 3;
 
 const COMB_X = INV_X + ITEM_WIDTH * 6.75;
 const COMB_Y = INV_Y;
 const COMB_ROWS = 2;
 const COMB_COLUMNS = 2;
 
+const BOX_X = X + ITEM_WIDTH * 2;
+const BOX_Y = Y + ITEM_HEIGHT * 5;
+const BOX_ROWS = 3;
+const BOX_COLUMNS = 6;
+
+
+const drawVbox = (graphics) => {
+    const boxDrawX = BOX_X - ITEM_WIDTH * 0.05;
+    const boxDrawY = BOX_Y - ITEM_HEIGHT * 0.05;
+    for (let i = 0; i <= BOX_COLUMNS; i += 1) {
+        const x = boxDrawX + i * ITEM_WIDTH * 1.1;
+        graphics.lineBetween(x, boxDrawY, x, boxDrawY + ITEM_HEIGHT * 1.1 * BOX_ROWS);
+    }
+    for (let i = 0; i <= BOX_ROWS; i += 1) {
+        const y = boxDrawY + i * ITEM_HEIGHT * 1.1;
+        graphics.lineBetween(boxDrawX, y, boxDrawX + ITEM_WIDTH * 1.1 * BOX_COLUMNS, y);
+    }
+};
+
 const drawInventory = (graphics) => {
     const invDrawX = INV_X - ITEM_WIDTH * 0.05;
     const invDrawY = INV_Y - ITEM_HEIGHT * 0.05;
@@ -84,48 +103,68 @@ class ItemList extends Phaser.Scene {
     }
 
     updateData(parent, key, data) {
-        if (key === 'itemList') {
+        if (key === 'vbox') {
             this.registry.events.off('changedata', this.updateData, this);
             this.registry.events.off('setdata', this.updateData, this);
             this.scene.restart(data);
         }
     }
 
-    create(itemList) {
+    create(vbox) {
-        if (!itemList) return false;
         this.registry.events.on('changedata', this.updateData, this);
         this.registry.events.on('setdata', this.updateData, this);
-        this.addStatic();
+        if (!vbox.free) return false;
-        this.addItems(itemList);
+        this.addStatic(vbox);
-        this.addClickHandlers(itemList);
+        this.addItems(vbox);
+        this.addClickHandlers(vbox);
         return this;
     }
 
-    addStatic() {
+    addStatic(vbox) {
         const graphics = this.add.graphics();
         graphics.lineStyle(5, 0x808080, 1.0);
         drawCombiner(graphics);
         drawInventory(graphics);
-        this.add.text(X + WIDTH / 4, Y + HEIGHT / 8, 'Inventory', TEXT.HEADER);
+        drawVbox(graphics);
-        this.add.text(X + WIDTH * 3 / 4, Y + HEIGHT / 8, 'Combiner', TEXT.HEADER);
+        this.add.text(X + WIDTH / 10, Y, 'Inventory', TEXT.HEADER);
+        this.add.text(X + WIDTH * 11 / 20, Y, 'Combiner', TEXT.HEADER);
+        this.add.text(X + WIDTH * 7 / 20, Y + HEIGHT / 2, 'Varibox', TEXT.HEADER);
+
+        const reroll = this.add.rectangle(0, Y + HEIGHT * 2 / 3, ITEM_WIDTH * 1.5, ITEM_HEIGHT * 1.5, 0x222222)
+            .setInteractive()
+            .setOrigin(0)
+            .on('pointerdown', () => this.registry.get('ws').sendVboxDiscard(vbox.game));
+        this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+
     }
 
-    addItems(itemList) {
+    addItems(vbox) {
-        const actions = countBy(itemList, i => i.action);
-
         for (let i = 0; i < (COMB_COLUMNS * COMB_ROWS); i += 1) {
             const ITEM_X = ITEM_WIDTH * 1.1 * (i % COMB_COLUMNS) + INV_X + ITEM_WIDTH * 6.75;
             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));
         }
 
-        Object.keys(actions).forEach((action, i) => {
+        vbox.bound.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);
+            const itemBox = new Item(this, action, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
             this.input.setDraggable(itemBox);
             this.add.existing(itemBox);
         });
+
+        vbox.free.forEach((action, i) => {
+            const ITEM_X = ITEM_WIDTH * 1.1 * (i % BOX_COLUMNS) + BOX_X + ITEM_WIDTH * 0.5;
+            const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / BOX_COLUMNS) + BOX_Y + ITEM_HEIGHT * 0.5;
+            const itemBox = new Item(this, action, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
+            itemBox
+                .setInteractive()
+                .on('pointerdown', () => {
+                    this.registry.get('ws').sendVboxAccept(vbox.game, i);
+                });
+            this.add.existing(itemBox);
+        });
     }
 
     addClickHandlers(itemList) {

client/src/scenes/menu.js

@@ -10,7 +10,6 @@ const GameList = require('./game.list');
 const StatSheet = require('./statsheet');
 const SpecSheet = require('./specsheet');
 const ItemInfo = require('./item.info');
-const Vbox = require('./vbox');
 
 const FIXED_MENU_SCENES = [
     'MenuCrypList',
@@ -24,7 +23,6 @@ const MAIN_MENU_SCENES = [
     'StatSheet',
     'SpecSheet',
     'ItemInfo',
-    'Vbox',
 ];
 
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
@@ -59,7 +57,6 @@ class Menu extends Phaser.Scene {
             case 'crypStats': return this.newMainScene('StatSheet', StatSheet, data);
             case 'crypSpec': return this.newMainScene('SpecSheet', SpecSheet, data);
             case 'itemInfo': return this.newMainScene('ItemInfo', ItemInfo, data);
-            case 'vbox': return this.newMainScene('Vbox', Vbox, data);
             default: return false;
         }
     }

client/src/scenes/vbox.js

@@ -1,47 +0,0 @@
-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 Vbox extends Phaser.Scene {
-    constructor() {
-        super({ key: 'Vbox' });
-    }
-
-    create(vbox) {
-        this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
-        this.add.text(WIDTH / 10, 0, 'free', TEXT.HEADER);
-        this.add.text(WIDTH / 5, 0, 'bound', TEXT.HEADER);
-
-        const drawFree = (item, i) => {
-            this.add
-                .text(WIDTH / 10, 25 * (i + 2), item, TEXT.NORMAL)
-                .setInteractive()
-                .on('pointerdown', () => {
-                    this.registry.get('ws').sendVboxAccept(vbox.game, i);
-                    console.log(item);
-                });
-        };
-
-        const drawBound = (item, i) => {
-            this.add
-                .text(WIDTH / 5, 25 * (i + 2), item, TEXT.NORMAL)
-                .setInteractive()
-                .on('pointerdown', () => {
-                    // this.registry.get('ws').sendVboxAccept(vbox.game, i);
-                    console.log(item);
-                });
-        };
-        vbox.free.forEach(drawFree);
-        vbox.bound.forEach(drawBound);
-    }
-
-    cleanUp() {
-        this.scene.remove();
-    }
-}
-
-module.exports = Vbox;