ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
ntr 2018-12-22 20:30:41 +11:00
parent b556fec8e2
commit b8e168c4cf
5 changed files with 129 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/scenes/combat.hitbox.js
View File

@ -123,4 +123,3 @@ class CombatHitBox extends Phaser.Scene {
}
module.exports = CombatHitBox;

36
client/src/scenes/constants.js
View File

@ -1,27 +1,37 @@
// POSITIONING FNS
// floors prevent subpixel rendering which looks trash
const menuWidth = () => 1600;
const CANVAS_WIDTH = 1600;
const CANVAS_HEIGHT = 1000;
const menuWidth = () => CANVAS_WIDTH;
const menuHeight = () => 25;
const combatWidth = () => 1600;
const combatHeight = () => 1000 - menuHeight();
const combatWidth = () => CANVAS_WIDTH;
const combatHeight = () => CANVAS_HEIGHT - menuHeight();
const combatY = () => menuHeight();
const combatX = () => 0;
const crypListWidth = () => Math.floor(1600 * 0.2);
const crypListHeight = () => 1000 - menuHeight();
const crypListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
const crypListHeight = () => CANVAS_HEIGHT - menuHeight();
const cryplistRowHeight = cryps => crypListHeight() / cryps.length;
const crypListY = () => menuHeight();
const crypListX = () => 0;
const gameListWidth = () => Math.floor(1600 * 0.2);
const gameListHeight = () => Math.floor(1000 / 10);
const gameListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
const gameListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
const gameListX = () => crypListWidth();
const gameListY = i => menuHeight() + (gameListHeight() * i);
const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2));
const statsWidth = () => Math.floor(1600 - crypListWidth() - gameListWidth());
const statsHeight = () => 1000 - menuHeight();
const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
const itemListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
const itemListX = () => crypListWidth() + gameListWidth();
const itemListY = i => menuHeight() + (itemListHeight() * i);
const itemListRowY = i => menuHeight() + (itemListHeight() * (i + 2));
const statsWidth = () => Math.floor(CANVAS_WIDTH - crypListWidth() - gameListWidth());
const statsHeight = () => CANVAS_HEIGHT - menuHeight();
const statsY = () => menuHeight();
const statsX = () => crypListWidth() + gameListWidth();
const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4);
@ -89,6 +99,14 @@ module.exports = {
height: gameListHeight,
rowY: gameListRowY,
},
ITEM_LIST: {
x: itemListX,
y: itemListY,
width: itemListWidth,
height: itemListHeight,
rowY: itemListRowY,
},
},
COLOURS: {

115
client/src/scenes/item.list.js
View File

@ -2,39 +2,108 @@ const Phaser = require('phaser');
const {
TEXT,
// COLOURS,
POSITIONS: { GAME_LIST },
POSITIONS: { ITEM_LIST },
} = require('./constants');
class ItemList extends Phaser.GameObjects.Group {
constructor(args) {
super(args.list);
const itemCheckHitbox = (scenePlugin, pointer) => {
const { list } = scenePlugin.get('CombatHitBox').children;
for (let i = 0; i < list.length; i += 1) {
if (Phaser.Geom.Rectangle.ContainsPoint(list[i].getBounds(),
pointer.position)) return list[i];
}
// If we didn't find a hitbox deselect them all
for (let i = 0; i < list.length; i += 1) list[i].deselect();
return false;
};
const { list, ws, itemList } = args;
class Item extends Phaser.GameObjects.Container {
constructor(scene, item, x, y) {
super(scene, x, y);
const X = GAME_LIST.x() + GAME_LIST.x();
const WIDTH = Math.floor(GAME_LIST.width());
const HEIGHT = GAME_LIST.height();
this.state = 'deselect';
this.item = item;
this.scene = scene;
const itemRow = (item, i) => {
const ITEM_X = X;
const ITEM_Y = GAME_LIST.rowY(i);
this.origX = x;
this.origY = y;
const itemBox = list.add
.rectangle(ITEM_X, ITEM_Y, WIDTH * 2, HEIGHT, 0x111111)
.setInteractive()
.setOrigin(0);
const WIDTH = ITEM_LIST.width();
const HEIGHT = ITEM_LIST.height();
this.add(list.add.text(ITEM_X, ITEM_Y, item.action, TEXT.HEADER));
this.box = scene.add
.rectangle(x, y, WIDTH, HEIGHT, 0x111111)
.setOrigin(0.5, 0.5)
.setInteractive();
itemBox.on('pointerdown', () => {
ws.sendItemUse(item.id);
});
};
scene.add.text(x, y, item.action, TEXT.HEADER)
.setOrigin(0.5, 0.5);
itemList.forEach(itemRow);
this.setSize(WIDTH, HEIGHT);
this.setInteractive();
}
return true;
clickHandler() {
this.scene.activeItem = this;
this.select();
}
select() {
this.scene.children.list.forEach((item) => {
if (item.state === 'select') item.deselect();
});
this.box.setFillStyle(0x004bfe);
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(0x111111);
this.state = 'deselect';
}
}
class ItemList extends Phaser.Scene {
constructor() {
super({ key: 'ItemList', active: true });
console.log('item list created');
}
create(itemList) {
itemList.forEach((item, i) => {
const ITEM_X = ITEM_LIST.x();
const ITEM_Y = ITEM_LIST.rowY(i);
const itemBox = new Item(this, item, ITEM_X, ITEM_Y);
this.input.setDraggable(itemBox);
this.add.existing(itemBox);
});
this.input.on('dragstart', (pointer, box) => {
console.log(box);
box.clickHandler();
});
this.input.on('drag', (pointer, box, dragX, dragY) => {
// const hitBox = itemCheckHitbox(this.scene, pointer);
// if (hitBox) hitBox.select();
box.setPosition(dragX, dragY);
});
this.input.on('dragend', (pointer, box) => {
box.deselect();
// const hitBox = itemCheckHitbox(this.scene, pointer);
// if (hitBox) {
// hitBox.clickHandler();
// }
box.setPosition(box.origX, box.origY);
});
}
cleanup() {

16
client/src/scenes/menu.js
View File

@ -27,6 +27,8 @@ class Menu extends Phaser.Scene {
this.scene.add('MenuCrypList', MenuCrypList, true);
this.scene.add('MenuGameList', MenuGameList, true);
this.scene.manager.add('ItemList', ItemList, true);
console.log(this.scene.isActive());
}
@ -36,6 +38,10 @@ class Menu extends Phaser.Scene {
this.scene.add('MenuGameList', MenuGameList, true);
}
if (key === 'itemList') {
this.scene.manager.add('ItemList', ItemList, true, data);
}
if (key === 'game') {
this.cleanUp();
this.scene.manager.add('Combat', Combat, true, data);
@ -44,9 +50,9 @@ class Menu extends Phaser.Scene {
}
updateData(parent, key, data) {
if (key === 'itemList') {
return this.renderItemList(data);
}
// if (key === 'itemList') {
// return this.renderItemList(data);
// }
if (key === 'game' && this.scene.isActive()) {
this.cleanUp();
@ -75,10 +81,6 @@ class Menu extends Phaser.Scene {
this.itemList.cleanup();
this.itemList.destroy(true);
}
console.log(itemList);
this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events });
}
cleanUp() {

2
client/src/socket.js
View File

@ -190,7 +190,7 @@ function createSocket(events) {
if (!account) events.loginPrompt();
if (process.env.NODE_ENV !== 'production') {
// send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
}
return true;