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

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

Browse Source
This commit is contained in:
ntr 2019-01-16 23:51:23 +11:00
commit 661678ce60
9 changed files with 234 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
client/src/events.js
View File

@ -52,18 +52,37 @@ function registerEvents(registry, events, tutorial) {
events.on('CRYP_ACTIVE', function crypActiveCb(cryp) {
const cryps = registry.get('cryps');
cryps.forEach((c) => {
if (c.id === cryp.id) {
if (c.active) return c.active = false;
return c.active = true;
}
return false;
});
for (let i = 0; i < cryps.length; i += 1) {
if (cryps[i].id === cryp.id) cryps[i].active = !cryps[i].active;
}
return setCryps(cryps);
});
const errMessages = {
select_cryps: 'Select your cryps before battle using the numbered buttons next to the cryp avatar',
complete_nodes: 'You need to complete the previously connected nodes first',
max_skills: 'Your cryp can only learn a maximum of 4 skills',
};
function errorPrompt(type) {
const message = errMessages[type];
const OK_BUTTON = '<button type="submit">OK</button>';
toast.info({
theme: 'dark',
color: 'black',
timeout: false,
drag: false,
position: 'center',
maxWidth: window.innerWidth / 2,
close: false,
buttons: [
[OK_BUTTON, (instance, thisToast) => instance.hide({ transitionOut: 'fadeOut' }, thisToast)],
],
message,
});
}
function loginPrompt() {
const USER_INPUT = '<input className="input" type="email" placeholder="username" />';
const PASSWORD_INPUT = '<input className="input" type="password" placeholder="password" />';
@ -152,6 +171,7 @@ function registerEvents(registry, events, tutorial) {
tutorial('welcome');
return {
errorPrompt,
loginPrompt,
setAccount,
setActiveSkill,

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

@ -11,7 +11,7 @@ const crypAvatarText = (team, iter) => {
const nameX = COMBAT.width() * team;
const nameY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const statusX = COMBAT.width() * team;
const statusY = COMBAT.y() + TEXT_MARGIN * 3 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const statusY = COMBAT.y() + TEXT_MARGIN * 6 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
return { statusX, statusY, nameX, nameY };
};

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

@ -3,11 +3,7 @@ const Phaser = require('phaser');
const Header = require('./header');
const Menu = require('./menu');
const Combat = require('./combat');
const Zones = require('./zones');
const Background = require('./background');
const GameList = require('./game.list');
const StatSheet = require('./statsheet');
function renderCryps() {
const config = {
@ -32,22 +28,6 @@ function renderCryps() {
const game = new Phaser.Game(config);
function newMainScene(key, scene, data) {
let addScene = true;
const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet'];
ACTIVE_MAIN_SCENES.forEach((sKey) => {
if (game.scene.keys[sKey]) {
if (key === sKey) {
game.scene.keys[sKey].scene.restart(data);
addScene = false;
} else {
game.scene.keys[sKey].cleanUp();
}
}
});
if (addScene) game.scene.add(key, scene, true, data);
return true;
}
function changeData(parent, key, data) {
// Don't load other scenes if you're not logged in
@ -62,18 +42,6 @@ function renderCryps() {
return game.scene.add('Combat', Combat, true);
}
if (key === 'zone') {
newMainScene('Zones', Zones, data);
}
if (key === 'gameList') {
newMainScene('GameList', GameList, data);
}
if (key === 'crypStats') {
newMainScene('StatSheet', StatSheet, data);
}
return true;
}

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

@ -3,6 +3,10 @@ const Phaser = require('phaser');
const MenuCrypList = require('./menu.cryps.list');
const MenuNavigation = require('./menu.navigation');
const ItemList = require('./item.list');
const Zones = require('./zones');
const GameList = require('./game.list');
const StatSheet = require('./statsheet');
const SpecSheet = require('./specsheet');
class Menu extends Phaser.Scene {
constructor() {
@ -29,9 +33,41 @@ class Menu extends Phaser.Scene {
if (data) return this.cleanUp();
}
if (key === 'zone') {
this.newMainScene('Zones', Zones, data);
}
if (key === 'gameList') {
this.newMainScene('GameList', GameList, data);
}
if (key === 'crypStats') {
this.newMainScene('StatSheet', StatSheet, data);
}
if (key === 'crypSpec') {
this.newMainScene('SpecSheet', SpecSheet, data);
}
return true;
}
newMainScene(key, scene, data) {
let addScene = true;
const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet', 'SpecSheet'];
ACTIVE_MAIN_SCENES.forEach((sKey) => {
if (this.scene.manager.keys[sKey]) {
if (key === sKey) {
this.scene.manager.keys[sKey].scene.restart(data);
addScene = false;
} else {
this.scene.manager.keys[sKey].cleanUp();
}
}
});
if (addScene) this.scene.manager.add(key, scene, true, data);
}
cleanUp() {
this.registry.events.off('changedata', this.updateData, this);
this.registry.events.off('setdata', this.updateData, this);

36
client/src/scenes/menu.navigation.js
View File

@ -58,6 +58,7 @@ class MenuNavigation extends Phaser.Scene {
pveText.destroy();
pvp.destroy();
pvpText.destroy();
ws.sendAccountZone();
});
pvp.on('pointerdown', () => {
@ -66,6 +67,7 @@ class MenuNavigation extends Phaser.Scene {
pveText.destroy();
pvp.destroy();
pvpText.destroy();
ws.sendGameJoinableList();
});
const cancel = this.add
@ -81,58 +83,30 @@ class MenuNavigation extends Phaser.Scene {
addPvpModes(ws) {
const hostPvp = this.add
.rectangle(0, 0, BTN_WIDTH, BTN_HEIGHT, 0x440000)
.rectangle(BTN_WIDTH, 0, BTN_WIDTH, BTN_HEIGHT, 0x440000)
.setInteractive()
.setOrigin(0)
.on('pointerdown', () => {
const team = this.registry.get('cryps').filter(c => c.active).map(c => c.id);
ws.sendGamePvp(team);
return this.scene.restart();
});
this.add
.text(hostPvp.getCenter().x, hostPvp.getCenter().y, 'Host PVP game', TEXT.HEADER)
.setOrigin(0.5, 0.5);
const refresh = this.add
.rectangle(BTN_WIDTH, 0, BTN_WIDTH, BTN_HEIGHT, 0x000044)
.setInteractive()
.setOrigin(0)
.on('pointerdown', () => {
ws.sendGameJoinableList();
return this.scene.restart();
});
this.add
.text(refresh.getCenter().x, refresh.getCenter().y, 'PVP games list', TEXT.HEADER)
.setOrigin(0.5, 0.5);
}
addPveModes(ws) {
const quickPve = this.add
.rectangle(0, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x004400)
.rectangle(BTN_WIDTH, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x222222)
.setInteractive()
.setOrigin(0)
.on('pointerdown', () => {
const team = this.registry.get('cryps').filter(c => c.active).map(c => c.id);
ws.sendGamePve(team);
return this.scene.restart();
});
this.add
.text(quickPve.getCenter().x, quickPve.getCenter().y, 'Quick battle', TEXT.HEADER)
.setOrigin(0.5, 0.5);
const zones = this.add
.rectangle(BTN_WIDTH, BTN_HEIGHT, BTN_WIDTH, BTN_HEIGHT, 0x222222)
.setInteractive()
.setOrigin(0)
.on('pointerdown', () => {
if (this.scene.get('Zones')) return false;
ws.sendAccountZone();
return this.scene.restart();
});
this.add
.text(zones.getCenter().x, zones.getCenter().y, 'Zone Mode', TEXT.HEADER)
.text(quickPve.getCenter().x, quickPve.getCenter().y, 'Quick Game', TEXT.HEADER)
.setOrigin(0.5, 0.5);
}

144
client/src/scenes/specsheet.js Normal file
View File

@ -0,0 +1,144 @@
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();
const TEXT_MARGIN = 24;
const menuX = WIDTH / 10;
const menuY = HEIGHT * 0.8;
const menuWidth = WIDTH / 10;
const menuHeight = HEIGHT * 0.2;
const X_LEARN = WIDTH * 2 / 4;
const Y_SKILLS = HEIGHT * 0.5;
function addButton(scene, x, y, cback, name) {
const button = scene.add
.rectangle(x, y, menuWidth, menuHeight, 0x222222)
.setInteractive()
.setOrigin(0)
.on('pointerdown', cback);
scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
.setOrigin(0.5, 0.5);
}
class StatSheet extends Phaser.Scene {
constructor() {
super({ key: 'SpecSheet' });
}
create(cryp) {
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
this.registry.events.on('changedata', this.updateData, this);
this.cryp = cryp;
this.forget = false;
this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER);
this.addStats(cryp);
this.addKnownSkills(cryp);
this.addLearnableSkills(cryp);
addButton(this, menuX, menuY, () => this.registry.set('crypStats', cryp), 'Stats');
}
updateData(parent, key, data) {
if (key === 'cryps') {
const cryp = data.find(c => c.id === this.cryp.id);
this.cryp = cryp;
this.addKnownSkills(cryp);
this.addStats(cryp);
}
}
addStats(cryp) {
if (this.stats) this.stats.destroy(true);
this.stats = this.add.group();
const crypStat = (stat, i) => {
const STAT_X = WIDTH / 10;
const STAT_Y = (i + 1) * TEXT_MARGIN;
this.stats.add(this.add
.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
};
const CRYP_STATS = [
// cryp.stamina,
// cryp.spell_dmg,
// cryp.speed,
];
CRYP_STATS.forEach(crypStat);
}
addKnownSkills(cryp) {
if (this.knownSkills) this.knownSkills.destroy(true);
this.knownSkills = this.add.group();
this.add.text(menuX, Y_SKILLS, 'Skills', TEXT.HEADER);
const knownSkill = (skill, i) => {
const SKILL_X = menuX;
const SKILL_Y = (i * TEXT_MARGIN) + Y_SKILLS + TEXT_MARGIN;
const color = this.forget ? '#ff0000' : '#ffffff';
const style = { fontFamily: 'monospace', fontSize: 16, color };
this.knownSkills.add(this.add.text(menuX, SKILL_Y, skill.skill, style)
.setInteractive()
.on('pointerdown', () => {
this.registry.get('ws').sendCrypForget(cryp.id, skill.skill);
}));
};
// cryp.skills.forEach(knownSkill);
}
addLearnableSkills(cryp) {
if (this.learnSkills) this.learnSkills.destroy(true);
this.learnSkills = this.add.group();
const learnable = (skill, i) => {
const SKILL_X = i <= 10 ? X_LEARN : X_LEARN + WIDTH / 5;
const SKILL_Y = i <= 10 ? (i + 1) * TEXT_MARGIN : (i - 10) * TEXT_MARGIN;
this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.name, TEXT.NORMAL)
.setInteractive()
.on('pointerdown', () => {
this.registry.get('ws').sendCrypLearn(cryp.id, skill.name);
})
.on('pointerover', (pointer) => {
if (!this.forget) {
this.displaySkillText(SKILL_X, SKILL_Y, skill.description, pointer);
}
})
.on('pointerout', () => {
if (this.skillText) this.skillText.destroy();
}));
};
this.learnSkills.add(this.add.text(X_LEARN, 0, 'Learnable', TEXT.HEADER));
// SKILLS.LEARNABLE.forEach(learnable);
}
displaySkillText(x, y, description, pointer) {
if (this.skillText) this.skillText.destroy();
this.skillText = this.add.text(x, y, description, {
fontSize: '16px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#222222',
}).setPadding(32);
this.skillText.setAlpha(0.8);
this.skillText.setOrigin(pointer.x >= WIDTH * 0.65 ? 1 : 0,
pointer.y >= HEIGHT * 0.25 ? 1 : 0);
this.skillText.setWordWrapWidth(450);
}
cleanUp() {
this.registry.events.off('changedata', this.updateData, this);
this.scene.remove();
}
}
module.exports = StatSheet;

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

@ -10,7 +10,7 @@ const TEXT_MARGIN = 24;
const menuX = WIDTH / 10;
const menuY = HEIGHT * 0.8;
const menuWidth = WIDTH / 10;
const menuHeight = HEIGHT * 0.3;
const menuHeight = HEIGHT * 0.2;
const X_LEARN = WIDTH * 2 / 4;
const Y_SKILLS = HEIGHT * 0.5;
@ -23,7 +23,7 @@ function addButton(scene, x, y, cback, name) {
.setOrigin(0)
.on('pointerdown', cback);
scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
.setOrigin(0.5, 1);
.setOrigin(0.5, 0.5);
}
class StatSheet extends Phaser.Scene {
@ -41,6 +41,7 @@ class StatSheet extends Phaser.Scene {
this.addStats(cryp);
this.addKnownSkills(cryp);
this.addLearnableSkills(cryp);
addButton(this, menuX, menuY, () => this.registry.set('crypSpec', cryp), 'Spec');
}
updateData(parent, key, data) {

5
client/src/scenes/zones.js
View File

@ -23,7 +23,7 @@ class Zones extends Phaser.Scene {
create(zone) {
if (!zone) return false;
this.scene.manager.add('ZoneControls', ZoneControls, true, zone.id);
if (!this.scene.get('ZoneControls')) this.scene.manager.add('ZoneControls', ZoneControls, true, zone.id);
this.graphics = this.add.graphics();
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
this.addNodes(zone.graph.nodes);
@ -37,7 +37,7 @@ class Zones extends Phaser.Scene {
this.nodes = [];
nodeData.forEach((n, i) => {
this.nodes[i] = this.add.existing(
new Node(this, n.x * 50, n.y * 50, i, n.success, n.tag)
new Node(this, n.x * 50 + 200, n.y * 50 + 200, i, n.success, n.tag)
).setInteractive();
});
}
@ -73,7 +73,6 @@ class Zones extends Phaser.Scene {
const team = this.registry.get('cryps').filter(c => c.active).map(c => c.id);
if (gameObjects[0].success) return false;
this.registry.get('ws').sendZoneJoin(zoneId, gameObjects[0].id, team);
this.cleanUp();
}
}
return true;

16
client/src/socket.js
View File

@ -175,6 +175,7 @@ function createSocket(events) {
// this object wraps the reply types to a function
const handlers = {
cryp_spawn: crypSpawn,
cryp_forget: () => true,
cryp_learn: () => true,
game_pve: gamePve,
game_state: gameState,
@ -189,6 +190,18 @@ function createSocket(events) {
};
function errHandler(error) {
switch (error) {
case 'no active zone': return sendZoneCreate();
case 'no cryps selected': return events.errorPrompt('select_cryps');
case 'node requirements not met': return events.errorPrompt('complete_nodes');
case 'cryp at max skills (4)': return events.errorPrompt('max_skills');
default: return errorToast(error);
}
}
// decodes the cbor and
// calls the handlers defined above based on message type
function onMessage(event) {
@ -199,8 +212,7 @@ function createSocket(events) {
console.log(res);
// check for error and split into response type and data
if (res.err === 'no active zone') sendZoneCreate();
if (res.err) return errorToast(res.err);
if (res.err) return errHandler(res.err);
const { method, params } = res;
if (!handlers[method]) return errorToast(`${method} handler missing`);
return handlers[method](params);