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

item menu dragging

Browse Source
This commit is contained in:
ntr 2018-12-22 22:17:28 +11:00
parent b8e168c4cf
commit eebcc58ac6
7 changed files with 64 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,13 +20,13 @@ const crypListX = () => 0;
const gameListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
const gameListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
const gameListX = () => crypListWidth();
const gameListX = () => crypListWidth() + itemListWidth();
const gameListY = i => menuHeight() + (gameListHeight() * i);
const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2));
const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.2);
const itemListHeight = () => Math.floor(CANVAS_HEIGHT / 10);
const itemListX = () => crypListWidth() + gameListWidth();
const itemListX = () => crypListWidth();
const itemListY = i => menuHeight() + (itemListHeight() * i);
const itemListRowY = i => menuHeight() + (itemListHeight() * (i + 2));

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

@ -6,13 +6,15 @@ const {
} = require('./constants');
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];
const { list } = scenePlugin.get('MenuCrypList').children;
const hitboxes = list.filter(c => c.cryp);
for (let i = 0; i < hitboxes.length; i += 1) {
if (hitboxes[i].cryp && Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(),
pointer.position)) return hitboxes[i];
}
// If we didn't find a hitbox deselect them all
for (let i = 0; i < list.length; i += 1) list[i].deselect();
for (let i = 0; i < hitboxes.length; i += 1) hitboxes[i].itemDeselect();
return false;
};
@ -31,13 +33,15 @@ class Item extends Phaser.GameObjects.Container {
const HEIGHT = ITEM_LIST.height();
this.box = scene.add
.rectangle(x, y, WIDTH, HEIGHT, 0x111111)
.setOrigin(0.5, 0.5)
.setInteractive();
.rectangle(0, 0, WIDTH, HEIGHT, 0x111111);
scene.add.text(x, y, item.action, TEXT.HEADER)
this.text = scene.add
.text(0, 0, item.action, TEXT.HEADER)
.setOrigin(0.5, 0.5);
this.add(this.box);
this.add(this.text);
this.setSize(WIDTH, HEIGHT);
this.setInteractive();
}
@ -72,10 +76,23 @@ class Item extends Phaser.GameObjects.Container {
class ItemList extends Phaser.Scene {
constructor() {
super({ key: 'ItemList', active: true });
console.log('item list created');
}
create(itemList) {
updateData(parent, key) {
if (key === 'itemList') {
this.scene.restart();
}
}
create() {
const itemList = this.registry.get('itemList');
const ws = this.registry.get('ws');
this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this);
if (!itemList) return false;
itemList.forEach((item, i) => {
const ITEM_X = ITEM_LIST.x();
const ITEM_Y = ITEM_LIST.rowY(i);
@ -86,28 +103,31 @@ class ItemList extends Phaser.Scene {
});
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();
const hitBox = itemCheckHitbox(this.scene, pointer);
if (hitBox) hitBox.itemSelect();
box.setPosition(dragX, dragY);
});
this.input.on('dragend', (pointer, box) => {
box.deselect();
// const hitBox = itemCheckHitbox(this.scene, pointer);
// if (hitBox) {
// hitBox.clickHandler();
// }
const hitBox = itemCheckHitbox(this.scene, pointer);
if (hitBox) {
ws.sendItemUse(box.item.id, hitBox.cryp.id);
}
box.setPosition(box.origX, box.origY);
});
return this;
}
cleanup() {
return true;
cleanUp() {
this.registry.events.off('changedata', this.updateData, this);
this.registry.events.off('setdata', this.updateData, this);
this.scene.remove();
}
}

18
client/src/scenes/menu.cryps.list.js
View File

@ -53,6 +53,14 @@ class MenuCrypList extends Phaser.Scene {
this.scene.get('Menu').displaySkills(cryp);
});
row.itemSelect = () => {
row.setFillStyle(0x004bfe);
};
row.itemDeselect = () => {
row.setFillStyle(FILL, ACTIVE_FILL);
};
const selectFn = () => {
this.game.events.emit('CRYP_ACTIVE', cryp);
};
@ -74,12 +82,12 @@ class MenuCrypList extends Phaser.Scene {
const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
CRYP_STATS.forEach(crypStat);
const selectBtn = this.add
.rectangle(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, FILL, 0.5)
.setInteractive()
.setOrigin(0);
// const selectBtn = this.add
// .rectangle(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, FILL, 0.5)
// .setInteractive()
// .setOrigin(0);
selectBtn.on('pointerdown', selectFn);
// selectBtn.on('pointerdown', selectFn);
this.crypRows.add(this.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER));
this.crypRows.add(this.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));

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

@ -18,6 +18,8 @@ class Menu extends Phaser.Scene {
this.sys.events.on('wake', () => {
this.addMenuScenes();
});
this.scene.manager.add('ItemList', ItemList, true);
return true;
}
@ -28,8 +30,6 @@ class Menu extends Phaser.Scene {
this.scene.add('MenuGameList', MenuGameList, true);
this.scene.manager.add('ItemList', ItemList, true);
console.log(this.scene.isActive());
}
setData(parent, key, data) {
@ -38,10 +38,6 @@ 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);
@ -75,14 +71,6 @@ class Menu extends Phaser.Scene {
return true;
}
renderItemList(itemList) {
const ws = this.registry.get('ws');
if (this.itemList) {
this.itemList.cleanup();
this.itemList.destroy(true);
}
}
cleanUp() {
// Remove all the scenes except header and this scene (menu)
this.registry.events.off('changedata', this.updateData, this);

2
client/src/socket.js
View File

@ -97,9 +97,7 @@ function createSocket(events) {
}
function sendItemUse(item, target) {
console.log(item, target);
send({ method: 'item_use', params: { item, target } });
events.setActiveItem(null);
}
// -------------

2
server/src/item.rs
View File

@ -136,7 +136,7 @@ pub fn item_delete(tx: &mut Transaction, id: Uuid) -> Result<(), Error> {
return Err(format_err!("unable to delete item {:?}", id));
}
println!("invalid item deleted {:?}", id);
println!("item deleted {:?}", id);
return Ok(());
}

7
server/src/rpc.rs
View File

@ -296,11 +296,16 @@ impl Rpc {
})
}
fn item_use(data: Vec<u8>, tx: &mut Transaction, account: Account, _client: &mut WebSocket<TcpStream>) -> Result<RpcResponse, Error> {
fn item_use(data: Vec<u8>, tx: &mut Transaction, account: Account, client: &mut WebSocket<TcpStream>) -> Result<RpcResponse, Error> {
let msg = from_slice::<ItemUseMsg>(&data).or(Err(err_msg("invalid params")))?;
item_use(msg.params, tx, &account)?;
Rpc::send_msg(client, RpcResponse {
method: "account_items".to_string(),
params: RpcResult::ItemList(items_list(tx, &account)?)
})?;
let cryps_list = RpcResponse {
method: "account_cryps".to_string(),
params: RpcResult::CrypList(account_cryps(tx, &account)?)