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

refactor menu

Browse Source
This commit is contained in:
Mashy 2018-12-21 19:31:59 +10:00
parent 114a6d505c
commit 58641b57f3
10 changed files with 390 additions and 209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/scenes/combat.js
View File

@ -65,8 +65,8 @@ class Combat extends Phaser.Scene {
}
endGame() {
this.scene.switch('CrypList'); // Switch back to cryp list
this.registry.set('game', null);
this.scene.wake('Menu'); // Switch back to cryp list
this.scene.get('CombatLog').cleanUp();
this.scene.get('CombatCryps').cleanUp();
this.scene.get('CombatSkills').cleanUp();

93
client/src/scenes/cryp.list.js
View File

@ -1,93 +0,0 @@
const Phaser = require('phaser');
const Combat = require('./combat');
const CrypRows = require('./cryp.row');
const GameList = require('./game.list');
const ItemList = require('./item.list');
const StatSheet = require('./statsheet');
class CrypList extends Phaser.Scene {
constructor() {
super({ key: 'CrypList', active: true });
}
create() {
this.registry.events.off('changedata', this.updateData, this);
this.registry.events.off('setdata', this.updateData, this);
this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this);
if (this.registry.get('cryps')) {
this.renderList();
this.renderGameList();
}
return true;
}
updateData(parent, key, data) {
const UPDATE_KEYS = ['gameList', 'cryps'];
if (UPDATE_KEYS.includes(key)) {
this.renderList();
this.renderGameList();
}
if (key === 'itemList') {
return this.renderItemList();
}
if (key === 'game' && this.scene.isActive()) {
this.scene.sleep();
this.scene.add('Combat', Combat);
this.scene.run('Combat', data);
}
return true;
}
renderList() {
const cryps = this.registry.get('cryps');
// your cryps
if (this.CrypRows) {
this.CrypRows.cleanup();
this.CrypRows.destroy(true);
}
this.CrypRows = new CrypRows(this, cryps);
}
renderGameList() {
const ws = this.registry.get('ws');
const cryps = this.registry.get('cryps');
const gameList = this.registry.get('gameList');
if (this.gameList) {
this.gameList.cleanup();
this.gameList.destroy(true);
}
this.gameList = new GameList({ list: this, ws, cryps, gameList, events: this.game.events });
}
renderItemList() {
const ws = this.registry.get('ws');
const itemList = this.registry.get('itemList');
if (this.itemList) {
this.itemList.cleanup();
this.itemList.destroy(true);
}
this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events });
}
displaySkills(cryp) {
if (cryp) {
this.scene.add('StatSheet', StatSheet);
this.scene.run('StatSheet', { cryp });
this.scene.stop();
}
return true;
}
}
module.exports = CrypList;

82
client/src/scenes/cryp.row.js
View File

@ -1,82 +0,0 @@
const Phaser = require('phaser');
const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU, STATS } } = require('./constants');
const TEXT_MARGIN = 24;
const KEY_MAP = [
'keydown_ONE',
'keydown_TWO',
'keydown_THREE',
];
class CrypRows extends Phaser.GameObjects.Group {
constructor(list, cryps) {
super(list);
this.keyboard = list.input.keyboard;
const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps);
const ROW_WIDTH = CRYP_LIST.rowWidth();
cryps.forEach((cryp, i) => {
const ROW_X = CRYP_LIST.x();
const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height();
const ACTIVE_FILL = cryp.active
? 1
: 0;
const FILL = Object.values(COLOURS)[i];
const row = list.add
.rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
.setInteractive()
.setOrigin(0);
row.on('pointerdown', () => {
list.displaySkills(cryp);
});
const selectFn = () => {
list.game.events.emit('CRYP_ACTIVE', cryp);
};
if (KEY_MAP[i]) {
this.keyboard.on(KEY_MAP[i], selectFn, this);
}
row.cryp = cryp;
this.add(row);
const crypStat = (stat, j) => {
const STAT_X = ROW_X;
const STAT_Y = (j * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN;
const text = list.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL);
this.add(text);
};
const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
CRYP_STATS.forEach(crypStat);
const selectBtn = list.add
.rectangle(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, FILL, 0.5)
.setInteractive()
.setOrigin(0);
selectBtn.on('pointerdown', selectFn);
this.add(selectBtn);
this.add(list.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER));
this.add(list.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));
});
return true;
}
cleanup() {
KEY_MAP.forEach(k => this.keyboard.removeListener(k));
}
}
module.exports = CrypRows;

6
client/src/scenes/cryps.js
View File

@ -1,6 +1,6 @@
const Phaser = require('phaser');
const CrypList = require('./cryp.list');
const Header = require('./header');
const Menu = require('./menu');
function renderCryps() {
@ -19,13 +19,13 @@ function renderCryps() {
},
},
scene: [
Header,
Menu,
CrypList,
],
};
const game = new Phaser.Game(config);
game.scene.sleep('Combat');
// game.scene.sleep('Combat');
function resize() {
const canvas = document.querySelector('canvas');

15
client/src/scenes/header.js Normal file
View File

@ -0,0 +1,15 @@
const Phaser = require('phaser');
const { TEXT } = require('./constants');
class Header extends Phaser.Scene {
constructor() {
super({ key: 'Header', active: true });
}
create() {
this.add.text(0, 0, 'cryps.gg', TEXT.HEADER);
}
}
module.exports = Header;

98
client/src/scenes/menu.cryps.list.js Normal file
View File

@ -0,0 +1,98 @@
const Phaser = require('phaser');
const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU } } = require('./constants');
const TEXT_MARGIN = 24;
const KEY_MAP = [
'keydown_ONE',
'keydown_TWO',
'keydown_THREE',
];
class MenuCrypList extends Phaser.Scene {
constructor() {
super({ key: 'MenuCrypList' });
}
create() {
this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this);
this.addCrypRows(this.registry.get('cryps'));
}
updateData(parent, key, data) {
if (key === 'cryps') {
KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
this.addCrypRows(data);
}
}
addCrypRows(cryps) {
if (!cryps) return true;
if (this.crypRows) this.crypRows.destroy(true);
this.crypRows = this.add.group();
const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps);
const ROW_WIDTH = CRYP_LIST.rowWidth();
cryps.forEach((cryp, i) => {
const ROW_X = CRYP_LIST.x();
const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height();
const ACTIVE_FILL = cryp.active
? 1
: 0;
const FILL = Object.values(COLOURS)[i];
const row = this.add.rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
.setInteractive()
.setOrigin(0)
.on('pointerdown', () => {
this.scene.get('Menu').displaySkills(cryp);
});
const selectFn = () => {
this.game.events.emit('CRYP_ACTIVE', cryp);
};
if (KEY_MAP[i]) {
this.input.keyboard.on(KEY_MAP[i], selectFn, this);
}
row.cryp = cryp;
this.crypRows.add(row);
const crypStat = (stat, j) => {
const STAT_X = ROW_X;
const STAT_Y = (j * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN;
this.crypRows.add(this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
};
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);
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));
});
return true;
}
cleanUp() {
KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
this.registry.events.off('changedata', this.updateData, this);
this.registry.events.off('setdata', this.updateData, this);
this.scene.remove();
}
}
module.exports = MenuCrypList;

67
client/src/scenes/game.list.js → client/src/scenes/menu.game.list.js
View File

@ -1,4 +1,5 @@
const Phaser = require('phaser');
const Missions = require('./missions');
const {
TEXT,
@ -6,60 +7,80 @@ const {
POSITIONS: { GAME_LIST },
} = require('./constants');
class GameList extends Phaser.GameObjects.Group {
constructor(args) {
super(args.list);
class MenuGameList extends Phaser.Scene {
constructor() {
super({ key: 'MenuGameList' });
}
const { list, events, ws, cryps, gameList } = args;
create() {
this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this);
this.addGameList(this.registry.get('gameList'));
}
updateData(parent, key, data) {
if (key === 'gameList') {
this.addGameList(data);
}
}
addGameList(gameList) {
if (gameList.length === 0) return true;
if (this.gameList) this.gameList.destroy(true);
this.gameList = this.add.group();
const ws = this.registry.get('ws');
const cryps = this.registry.get('cryps');
const { events } = this.game;
const X = GAME_LIST.x();
const WIDTH = Math.floor(GAME_LIST.width() / 2);
const HEIGHT = GAME_LIST.height();
const TEXT_MARGIN = 24;
const spawn = list.add
const spawn = this.add
.rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x888888)
.setInteractive()
.setOrigin(0);
this.add(list.add
this.gameList.add(this.add
.text(spawn.getCenter().x, spawn.getCenter().y, 'spawn\ncryp', TEXT.HEADER)
.setOrigin(0.5, 0.5));
const pvp = list.add
const pvp = this.add
.rectangle(X + WIDTH, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)
.setInteractive()
.setOrigin(0);
this.add(list.add
this.gameList.add(this.add
.text(pvp.getCenter().x, pvp.getCenter().y, 'new PVP\ngame', TEXT.HEADER)
.setOrigin(0.5, 0.5));
const pve = list.add
const pve = this.add
.rectangle(X, GAME_LIST.y(1), WIDTH, HEIGHT, 0x004400)
.setInteractive()
.setOrigin(0);
this.add(list.add
this.gameList.add(this.add
.text(pve.getCenter().x, pve.getCenter().y, 'new PVE\ngame', TEXT.HEADER)
.setOrigin(0.5, 0.5));
const boss = list.add
const boss = this.add
.rectangle(X, GAME_LIST.y(2), WIDTH, HEIGHT, 0x441122)
.setInteractive()
.setOrigin(0);
this.add(list.add
this.gameList.add(this.add
.text(boss.getCenter().x, boss.getCenter().y, 'new Boss\ngame', TEXT.HEADER)
.setOrigin(0.5, 0.5));
const refresh = list.add
const refresh = this.add
.rectangle(X + WIDTH, GAME_LIST.y(1), WIDTH, HEIGHT, 0x000044)
.setInteractive()
.setOrigin(0);
this.add(list.add
this.gameList.add(this.add
.text(refresh.getCenter().x, refresh.getCenter().y, 'refresh\ngame list', TEXT.HEADER)
.setOrigin(0.5, 0.5));
@ -68,15 +89,15 @@ class GameList extends Phaser.GameObjects.Group {
const GAME_X = GAME_LIST.x();
const GAME_Y = GAME_LIST.rowY(i);
const gameBox = list.add
const gameBox = this.add
.rectangle(GAME_X, GAME_Y, WIDTH * 2, HEIGHT, 0x111111)
.setInteractive()
.setOrigin(0);
const TITLE = game.teams[0].cryps.map(c => c.name).join(', ');
this.add(list.add.text(GAME_X, GAME_Y, TITLE, TEXT.NORMAL));
this.add(list.add.text(GAME_X, GAME_Y + TEXT_MARGIN, `${game.team_size}v${game.team_size}`, TEXT.NORMAL));
this.gameList.add(this.add.text(GAME_X, GAME_Y, TITLE, TEXT.NORMAL));
this.gameList.add(this.add.text(GAME_X, GAME_Y + TEXT_MARGIN, `${game.team_size}v${game.team_size}`, TEXT.NORMAL));
gameBox.on('pointerdown', () => {
const team = cryps.filter(c => c.active).map(c => c.id);
@ -104,6 +125,9 @@ class GameList extends Phaser.GameObjects.Group {
boss.on('pointerdown', () => {
const team = cryps.filter(c => c.active).map(c => c.id);
if (team.length === 0) return false;
this.scene.add('Missions', Missions);
this.scene.run('Missions');
this.scene.stop();
return ws.sendGamePve(team, 'Boss');
});
@ -115,9 +139,12 @@ class GameList extends Phaser.GameObjects.Group {
return true;
}
cleanup() {
return true;
cleanUp() {
this.registry.events.off('changedata', this.updateData, this);
this.registry.events.off('setdata', this.updateData, this);
this.scene.remove();
}
}
module.exports = GameList;
module.exports = MenuGameList;

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

@ -1,18 +1,88 @@
const Phaser = require('phaser');
const { TEXT } = require('./constants');
const MenuCrypList = require('./menu.cryps.list');
const MenuGameList = require('./menu.game.list');
const Combat = require('./combat');
// const ItemList = require('./item.list');
const StatSheet = require('./statsheet');
class Menu extends Phaser.Scene {
constructor(props) {
constructor() {
super({ key: 'Menu', active: true });
}
create() {
this.add.text(0, 0, 'cryps.gg', TEXT.HEADER);
// this.scene.sleep('Passives');
this.input.keyboard.on('keydown_F', () => {
this.scene.wake('Passives');
}, 0, this);
this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this);
this.scene.add('MenuCrypList', MenuCrypList, true);
this.scene.add('MenuGameList', MenuGameList, true);
this.sys.events.on('wake', () => {
this.wakeMenuScenes();
});
return true;
}
wakeMenuScenes() {
this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this);
this.scene.add('MenuCrypList', MenuCrypList, true);
this.scene.add('MenuGameList', MenuGameList, true);
console.log(this.scene.isActive());
}
updateData(parent, key, data) {
if (key === 'itemList') {
// return this.renderItemList();
}
if (key === 'game' && this.scene.isActive()) {
this.cleanUp();
this.scene.add('Combat', Combat);
this.scene.run('Combat', data);
this.scene.sleep();
}
return true;
}
// Scene switch to statsheet called by MenuCrypRows scene
displaySkills(cryp) {
if (cryp) {
this.cleanUp();
this.scene.add('StatSheet', StatSheet);
this.scene.run('StatSheet', cryp);
this.scene.sleep();
}
return true;
}
renderItemList() {
const ws = this.registry.get('ws');
const itemList = this.registry.get('itemList');
if (this.itemList) {
this.itemList.cleanup();
this.itemList.destroy(true);
}
// this.itemList = new ItemList({ list: this, ws, itemList, events: this.game.events });
}
cleanUp() {
// Remove all the scenes except header and this scene (menu)
this.registry.events.off('changedata', this.updateData, this);
this.registry.events.off('setdata', this.updateData, this);
const ACTIVE_SCENES = ['Header', 'Menu'];
Object.keys(this.scene.manager.keys).forEach((key) => {
if (!ACTIVE_SCENES.includes(key)) {
// Remove listeners and scene
this.scene.get(key).cleanUp();
}
});
}
}

145
client/src/scenes/missions.js Normal file
View File

@ -0,0 +1,145 @@
const Phaser = require('phaser');
const Node = require('./passive.node');
const nodeData = require('./passive.data.node');
const edgeData = require('./passive.data.edge');
const { POSITIONS: { COMBAT } } = require('./constants');
// Passive tree generator - proof of concept visuals need work
// Mouse click hold to move, Q + E to zoom in and out
// Press 'A' to reset allocated passive nodes
class Missions extends Phaser.Scene {
constructor() {
super({ key: 'Missions' });
// this.input = props.input;
}
preload() {
this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
}
create() {
this.graphics = this.add.graphics();
this.nodeData = nodeData;
this.edgeData = edgeData;
this.cameras.main.setViewport(COMBAT.width() * 0.2, COMBAT.y(),
COMBAT.width() * 0.8, COMBAT.height());
this.cameras.main.scrollX = 1000;
this.cameras.main.scrollY = 500;
this.addNodes();
this.addCameraControl();
this.addEvents();
this.drawEdges();
}
addNodes() {
this.nodes = [];
this.nodeData.forEach((n) => {
this.nodes[n.id] = this.add.existing(
new Node(this, n.x, n.y, n.id, n.alloc, n.text)
).setInteractive();
});
}
addCameraControl() {
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
camera: this.cameras.main,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
acceleration: 0.005,
drag: 0.0005,
maxSpeed: 0.001,
});
}
addEvents() {
this.input.on('pointerover', (pointer, gameObjects) => {
if (gameObjects[0] instanceof Node) {
if (!gameObjects[0].alloc) {
gameObjects[0].setTint(0xffffff);
}
this.displayNodeText(gameObjects[0], pointer);
}
});
this.input.on('pointerout', (pointer, gameObjects) => {
if (gameObjects[0] instanceof Node) {
if (!gameObjects[0].alloc) gameObjects[0].clearTint();
this.nodeText.destroy();
}
});
this.input.on('pointerup', (pointer, gameObjects) => {
if (Math.abs(pointer.upX - pointer.downX) < 5
&& Math.abs(pointer.upY - pointer.downY) < 5) {
// Check cursor hasn't significantly moved during point allocation
// If panning and mouse release is on node it won't allocate
if (gameObjects[0] instanceof Node) {
gameObjects[0].allocate();
}
}
});
this.input.on('pointermove', (pointer) => {
const zoomFactor = 2 / this.cameras.main.zoom;
if (this.registry.get('pan')) {
const points = pointer.getInterpolatedPosition(2);
this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
}
}, this);
this.input.keyboard.on('keydown_A', () => {
this.updateNodes(); // Will update nodes from state
}, 0, this);
this.input.keyboard.on('keydown_G', () => {
this.scene.sleep();
}, 0, this);
}
drawEdges() {
this.graphics.clear();
this.edgeData.forEach((e) => {
const drawEdge = this.nodeData.filter(n => (
e[0] === n.id || e[1] === n.id
));
if (drawEdge[0].alloc && drawEdge[1].alloc) {
this.graphics.lineStyle(10, 0xfff00f, 0.2);
} else {
this.graphics.lineStyle(2, 0xffffff, 0.2);
}
this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y);
});
}
displayNodeText(node, pointer) {
if (this.nodeText) this.nodeText.destroy();
this.nodeText = this.add.text(node.x, node.y, node.text, {
fontSize: '16px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#222222',
}).setPadding(32);
this.nodeText.setAlpha(0.8);
this.nodeText.setOrigin(pointer.x >= COMBAT.width() * 0.6 ? 1 : 0,
pointer.y >= COMBAT.height() * 0.5 ? 1 : 0);
this.nodeText.setWordWrapWidth(450);
this.nodeText.setScale(1 / this.cameras.main.zoom);
}
updateNodes() {
this.nodeData.forEach((n) => {
this.nodes[n.id].alloc = false;
this.nodes[n.id].updateNode();
});
// This function will be modified to just update from state
// State will update n.alloc instead of false
}
camPan(bool) {
this.pan = bool;
}
update(delta) {
this.controls.update(delta);
}
}
module.exports = Missions;

7
client/src/scenes/statsheet.js
View File

@ -15,8 +15,8 @@ class StatSheet extends Phaser.Scene {
super({ key: 'StatSheet' });
}
create(props) {
const { cryp } = props;
create(cryp) {
console.log(cryp);
this.cryp = cryp;
this.stats = new Stats(this, cryp);
this.addControls(cryp);
@ -27,7 +27,8 @@ class StatSheet extends Phaser.Scene {
addControls(cryp) {
const menuCback = () => {
this.registry.events.off('changedata', this.updateData, this);
this.scene.run('CrypList');
this.registry.set('game', null);
this.scene.switch('Menu'); // Switch back to menu
this.scene.remove('Skills');
this.scene.remove('Passives');
this.scene.remove();