From 4c184106fd81f4ffeb0b319d40351bcf10794be2 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 29 Nov 2018 17:29:04 +1000 Subject: [PATCH 1/2] testing scene swaps --- client/src/events.js | 3 ++- client/src/scenes/combat.js | 4 ++-- .../src/scenes/combat.render.resolutions.js | 3 +-- client/src/scenes/cryp.list.js | 15 ++++---------- client/src/scenes/cryps.js | 1 - client/src/scenes/menu.js | 2 +- client/src/scenes/passives.js | 9 ++++++++- client/src/scenes/player.js | 20 +++++++++++++++++++ 8 files changed, 38 insertions(+), 19 deletions(-) create mode 100644 client/src/scenes/player.js diff --git a/client/src/events.js b/client/src/events.js index 2405adaa..91a48343 100644 --- a/client/src/events.js +++ b/client/src/events.js @@ -43,7 +43,8 @@ function registerEvents(registry, events) { const activeSkill = registry.get('activeSkill'); const game = registry.get('game'); if (activeSkill) { - if (activeSkill.cryp.account !== cryp.account) { + const target = activeSkill.cryp.account === cryp.account; + if (!target) { const ws = registry.get('ws'); if (game.phase === 'Skill') { ws.sendGameSkill(game.id, activeSkill.cryp.id, cryp.account, activeSkill.skill.skill); diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 3528de41..c111d08a 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -16,7 +16,7 @@ class Combat extends Phaser.Scene { preload() { // Textures already loaded can do proper check in future when theres more textures - if (!(this.textures.getTextureKeys().length > 0)) { + if (!(this.textures.getTextureKeys().length > 2)) { this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`); this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`); this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png'); @@ -43,6 +43,7 @@ class Combat extends Phaser.Scene { } }); + this.combatCryps = null; this.registry.set('gameAnimating', false); this.account = this.registry.get('account'); this.log = this.add.text(COMBAT.LOG.x(), COMBAT.LOG.y(), '', TEXT.NORMAL); @@ -56,7 +57,6 @@ class Combat extends Phaser.Scene { } return false; }, 1000); - return true; } diff --git a/client/src/scenes/combat.render.resolutions.js b/client/src/scenes/combat.render.resolutions.js index 4cadbac5..c62b9a78 100644 --- a/client/src/scenes/combat.render.resolutions.js +++ b/client/src/scenes/combat.render.resolutions.js @@ -76,8 +76,7 @@ function animatePhase(scene, group, game, resolution, cb) { // all done scene.time.delayedCall(MOVE_CREEP, () => { - animations.cleanup(); - animations.destroy(); + animations.destroy(true); return cb(); }); }); diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js index ad51fd3a..29fe53d7 100644 --- a/client/src/scenes/cryp.list.js +++ b/client/src/scenes/cryp.list.js @@ -1,8 +1,8 @@ const Phaser = require('phaser'); const CrypRows = require('./cryp.row'); -const CrypPage = require('./cryp.page'); const GameList = require('./game.list'); +const Player = require('./player'); class CrypList extends Phaser.Scene { constructor() { @@ -38,12 +38,6 @@ class CrypList extends Phaser.Scene { this.CrypRows.destroy(true); } this.CrypRows = new CrypRows(this, cryps); - - // selected cryp - if (this.CrypPage) { - const cryp = cryps.find(c => c.id === this.CrypPage.id); - this.displaySkills(cryp); - } } renderGameList() { @@ -61,10 +55,9 @@ class CrypList extends Phaser.Scene { displaySkills(cryp) { if (cryp) { - if (this.CrypPage) { - this.CrypPage.destroy(true); - } - this.CrypPage = new CrypPage(this, cryp); + this.scene.add('Player', Player); + this.scene.run('Player', { x: 400, y: 300 }); + this.scene.sleep(); } return true; } diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js index c57350f0..187757d6 100644 --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -3,7 +3,6 @@ const Phaser = require('phaser'); const CrypList = require('./cryp.list'); const Menu = require('./menu'); const Combat = require('./combat'); -// const Passives = require('./passives'); function renderCryps() { const config = { diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index 97e97a2e..122d11ce 100644 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -9,7 +9,7 @@ class Menu extends Phaser.Scene { create() { this.add.text(0, 0, 'cryps.gg', TEXT.HEADER); - this.scene.sleep('Passives'); + // this.scene.sleep('Passives'); this.input.keyboard.on('keydown_F', () => { this.scene.wake('Passives'); }, 0, this); diff --git a/client/src/scenes/passives.js b/client/src/scenes/passives.js index 442b0b99..e79de19f 100644 --- a/client/src/scenes/passives.js +++ b/client/src/scenes/passives.js @@ -3,13 +3,16 @@ const PassiveNode = require('./passive.node'); const passiveDataNode = require('./passive.data.node'); const passiveDataEdge = 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 PhaserPassives extends Phaser.Scene { constructor() { - super({ key: 'Passives', active: true }); + super({ key: 'Passives' }); + // this.input = props.input; } preload() { @@ -20,6 +23,10 @@ class PhaserPassives extends Phaser.Scene { this.graphics = this.add.graphics(); this.passiveNodeData = passiveDataNode; this.passiveEdgeData = passiveDataEdge; + this.cameras.main.setViewport(COMBAT.width() * 0.5, COMBAT.height() * 0.3, + COMBAT.width() * 0.5, COMBAT.height() * 0.7); + this.cameras.main.scrollX = 500; + this.cameras.main.scrollY = 500; this.addPassiveNodes(); this.addCameraControl(); this.addEvents(); diff --git a/client/src/scenes/player.js b/client/src/scenes/player.js new file mode 100644 index 00000000..0097bcba --- /dev/null +++ b/client/src/scenes/player.js @@ -0,0 +1,20 @@ +const Phaser = require('phaser'); +const Passives = require('./passives'); + +class Player extends Phaser.Scene { + constructor() { + super({ key: 'Player' }); + } + + create(data) { + console.log(data); + this.scene.add('Passives', Passives, true); + this.input.keyboard.on('keydown_ONE', () => { + this.scene.run('CrypList'); + this.scene.remove('Passives'); + this.scene.remove(); + }, 0, this); + } +} + +module.exports = Player; From 8610039e58124358e5d9881bbb47646607829b5f Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 4 Dec 2018 15:16:16 +1000 Subject: [PATCH 2/2] Added statsheet scene --- client/src/scenes/combat.cryps.js | 7 +- client/src/scenes/combat.js | 37 ++++---- client/src/scenes/cryp.list.js | 13 +-- client/src/scenes/cryps.js | 2 - client/src/scenes/game.list.js | 17 +++- client/src/scenes/passives.js | 11 +-- client/src/scenes/player.js | 20 ----- client/src/scenes/statsheet.js | 120 ++++++++++++++++++++++++++ client/src/scenes/statsheet.skills.js | 64 ++++++++++++++ client/src/scenes/statsheet.stats.js | 22 +++++ 10 files changed, 256 insertions(+), 57 deletions(-) mode change 100644 => 100755 client/src/scenes/combat.cryps.js mode change 100644 => 100755 client/src/scenes/combat.js mode change 100644 => 100755 client/src/scenes/cryp.list.js mode change 100644 => 100755 client/src/scenes/cryps.js mode change 100644 => 100755 client/src/scenes/game.list.js mode change 100644 => 100755 client/src/scenes/passives.js delete mode 100644 client/src/scenes/player.js create mode 100755 client/src/scenes/statsheet.js create mode 100755 client/src/scenes/statsheet.skills.js create mode 100755 client/src/scenes/statsheet.stats.js diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js old mode 100644 new mode 100755 index 3960ae46..d857155c --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -95,6 +95,7 @@ class HealthBar extends Phaser.GameObjects.Graphics { } drawHealthBar() { + this.clear(); const { healthBarX, healthBarY, healthBarWidth, healthBarHeight, } = healthBarDimensions(this.team, this.iter); @@ -121,7 +122,6 @@ class HealthBar extends Phaser.GameObjects.Graphics { takeDamage(damage) { const takeDamage = (damage > this.hp) ? this.hp : damage; this.hp -= takeDamage; - this.clear(); this.drawHealthBar(); } } @@ -175,7 +175,7 @@ class CombatCryps extends Phaser.GameObjects.Group { update(game, createCryps) { // Setting gamePhase will stop redraw unless phase changes again - this.removeSkills(); + if (!createCryps) this.clearSkills(); // Destroy skills currently shown as the game state has changed const account = this.scene.registry.get('account'); const allyTeam = game.teams.find(t => t.id === account.id); @@ -199,7 +199,8 @@ class CombatCryps extends Phaser.GameObjects.Group { return true; } - removeSkills() { + clearSkills() { + // console.log(this.scene.gameStart); this.children.entries.filter(obj => obj instanceof CrypSkill).forEach(obj => obj.destroy()); } } diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js old mode 100644 new mode 100755 index c111d08a..8a4e4fdb --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -19,12 +19,12 @@ class Combat extends Phaser.Scene { if (!(this.textures.getTextureKeys().length > 2)) { this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`); this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`); - this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png'); - this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png'); - this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png'); - this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png'); - this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png'); - this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png'); + this.load.image('proj', 'https://labs.phaser.io/assets/sprites/bullet.png'); + this.load.image('blue', 'https://labs.phaser.io/assets/particles/blue.png'); + this.load.image('green', 'https://labs.phaser.io/assets/particles/green.png'); + this.load.image('red', 'https://labs.phaser.io/assets/particles/red.png'); + this.load.image('white', 'https://labs.phaser.io/assets/particles/white.png'); + this.load.image('yellow', 'https://labs.phaser.io/assets/particles/yellow.png'); } } @@ -43,7 +43,7 @@ class Combat extends Phaser.Scene { } }); - this.combatCryps = null; + this.registry.set('gamePhase', false); this.registry.set('gameAnimating', false); this.account = this.registry.get('account'); this.log = this.add.text(COMBAT.LOG.x(), COMBAT.LOG.y(), '', TEXT.NORMAL); @@ -61,18 +61,18 @@ class Combat extends Phaser.Scene { } startGame(game) { - this.registry.set('gamePhase', game.phase); this.renderedResolves = game.resolved.length; // In case you rejoin mid way this.combatCryps = new CombatCryps(this); this.combatCryps.update(game, true); + this.registry.set('gamePhase', game.phase); return true; } endGame() { this.scene.switch('CrypList'); // Switch back to cryp list + this.registry.events.off('changedata', this.updateData); this.registry.set('game', null); - this.registry.set('gamePhase', false); - this.scene.stop(); + this.scene.remove(); return true; } @@ -84,10 +84,8 @@ class Combat extends Phaser.Scene { updateData(parent, key, data) { if (key === 'game') { if (!data) return false; - if (!this.registry.get('gamePhase')) { - this.startGame(data); - return true; - } + const startGame = this.registry.get('gamePhase') === false; + if (startGame) { this.startGame(data); return true; } this.redrawGame(data); } return true; @@ -101,18 +99,21 @@ class Combat extends Phaser.Scene { const newResolutions = game.resolved.slice(this.renderedResolves); renderResolutions(this, game, this.combatCryps, newResolutions); this.renderedResolves = game.resolved.length; - this.combatCryps.removeSkills(); + this.combatCryps.clearSkills(); return true; } + // update log + // shallow copy because reverse mutates + const content = Array.from(game.log).reverse().join('\n'); + // this.log.setText(Array.from(game.log).reverse()); + console.log(this.log); + this.log.setText(content); // has the phase changed? const phaseChange = (this.registry.get('gamePhase') === game.phase); if (phaseChange) return false; this.registry.set('gamePhase', game.phase); this.combatCryps.update(game, false); - // update log - // shallow copy because reverse mutates - this.log.setText(Array.from(game.log).reverse()); // Game over? if (game.phase === 'Finish') { diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js old mode 100644 new mode 100755 index 29fe53d7..77431da5 --- a/client/src/scenes/cryp.list.js +++ b/client/src/scenes/cryp.list.js @@ -1,8 +1,9 @@ const Phaser = require('phaser'); +const Combat = require('./combat'); const CrypRows = require('./cryp.row'); const GameList = require('./game.list'); -const Player = require('./player'); +const StatSheet = require('./statsheet'); class CrypList extends Phaser.Scene { constructor() { @@ -15,7 +16,7 @@ class CrypList extends Phaser.Scene { return true; } - updateData(parent, key) { + updateData(parent, key, data) { const UPDATE_KEYS = ['gameList', 'cryps']; if (UPDATE_KEYS.includes(key)) { this.renderList(); @@ -23,7 +24,9 @@ class CrypList extends Phaser.Scene { } if (key === 'game' && this.scene.isActive()) { - this.scene.switch('Combat'); + this.scene.sleep(); + this.scene.add('Combat', Combat); + this.scene.run('Combat', data); } return true; @@ -55,8 +58,8 @@ class CrypList extends Phaser.Scene { displaySkills(cryp) { if (cryp) { - this.scene.add('Player', Player); - this.scene.run('Player', { x: 400, y: 300 }); + this.scene.add('StatSheet', StatSheet); + this.scene.run('StatSheet', { cryp }); this.scene.sleep(); } return true; diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js old mode 100644 new mode 100755 index 187757d6..e7a6284d --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -2,7 +2,6 @@ const Phaser = require('phaser'); const CrypList = require('./cryp.list'); const Menu = require('./menu'); -const Combat = require('./combat'); function renderCryps() { const config = { @@ -21,7 +20,6 @@ function renderCryps() { scene: [ Menu, CrypList, - Combat, ], }; diff --git a/client/src/scenes/game.list.js b/client/src/scenes/game.list.js old mode 100644 new mode 100755 index ffffda18..d9f959c6 --- a/client/src/scenes/game.list.js +++ b/client/src/scenes/game.list.js @@ -22,28 +22,36 @@ class GameList extends Phaser.GameObjects.Group { .setInteractive() .setOrigin(0); - this.add(list.add.text(spawn.getCenter().x, spawn.getCenter().y, 'SPAWN', TEXT.HEADER)); + this.add(list.add + .text(spawn.getCenter().x, spawn.getCenter().y, 'SPAWN', TEXT.HEADER) + .setOrigin(0.5, 0.5)); const pvp = list.add .rectangle(X + WIDTH, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000) .setInteractive() .setOrigin(0); - this.add(list.add.text(pvp.getCenter().x, pvp.getCenter().y, 'PVP', TEXT.HEADER)); + this.add(list.add + .text(pvp.getCenter().x, pvp.getCenter().y, 'PVP', TEXT.HEADER) + .setOrigin(0.5, 0.5)); const pve = list.add .rectangle(X, GAME_LIST.y(1), WIDTH, HEIGHT, 0x004400) .setInteractive() .setOrigin(0); - this.add(list.add.text(pve.getCenter().x, pve.getCenter().y, 'PVE', TEXT.HEADER)); + this.add(list.add + .text(pve.getCenter().x, pve.getCenter().y, 'PVE', TEXT.HEADER) + .setOrigin(0.5, 0.5)); const refresh = list.add .rectangle(X + WIDTH, GAME_LIST.y(1), WIDTH, HEIGHT, 0x000044) .setInteractive() .setOrigin(0); - this.add(list.add.text(refresh.getCenter().x, refresh.getCenter().y, 'REFRESH', TEXT.HEADER)); + this.add(list.add + .text(refresh.getCenter().x, refresh.getCenter().y, 'REFRESH', TEXT.HEADER) + .setOrigin(0.5, 0.5)); const gameRow = (game, i) => { @@ -77,6 +85,7 @@ class GameList extends Phaser.GameObjects.Group { pve.on('pointerdown', () => { const team = cryps.filter(c => c.active).map(c => c.id); + if (team.length === 0) return false; return ws.sendGamePve(team); }); diff --git a/client/src/scenes/passives.js b/client/src/scenes/passives.js old mode 100644 new mode 100755 index e79de19f..394fa916 --- a/client/src/scenes/passives.js +++ b/client/src/scenes/passives.js @@ -23,9 +23,9 @@ class PhaserPassives extends Phaser.Scene { this.graphics = this.add.graphics(); this.passiveNodeData = passiveDataNode; this.passiveEdgeData = passiveDataEdge; - this.cameras.main.setViewport(COMBAT.width() * 0.5, COMBAT.height() * 0.3, - COMBAT.width() * 0.5, COMBAT.height() * 0.7); - this.cameras.main.scrollX = 500; + 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.addPassiveNodes(); this.addCameraControl(); @@ -112,13 +112,14 @@ class PhaserPassives extends Phaser.Scene { displayPassiveText(node, pointer) { if (this.nodeText) this.nodeText.destroy(); this.nodeText = this.add.text(node.x, node.y, node.text, { - fontSize: '20px', + fontSize: '16px', fontFamily: 'Arial', color: '#ffffff', backgroundColor: '#222222', }).setPadding(32); this.nodeText.setAlpha(0.8); - this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0); + 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); } diff --git a/client/src/scenes/player.js b/client/src/scenes/player.js deleted file mode 100644 index 0097bcba..00000000 --- a/client/src/scenes/player.js +++ /dev/null @@ -1,20 +0,0 @@ -const Phaser = require('phaser'); -const Passives = require('./passives'); - -class Player extends Phaser.Scene { - constructor() { - super({ key: 'Player' }); - } - - create(data) { - console.log(data); - this.scene.add('Passives', Passives, true); - this.input.keyboard.on('keydown_ONE', () => { - this.scene.run('CrypList'); - this.scene.remove('Passives'); - this.scene.remove(); - }, 0, this); - } -} - -module.exports = Player; diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js new file mode 100755 index 00000000..50d0ace7 --- /dev/null +++ b/client/src/scenes/statsheet.js @@ -0,0 +1,120 @@ +const Phaser = require('phaser'); +const Passives = require('./passives'); +const Stats = require('./statsheet.stats'); +const { SkillsKnown, SkillsLearn } = require('./statsheet.skills'); +const { TEXT, POSITIONS: { STATS } } = require('./constants'); + +const menuOrig = STATS.height() * 0.5; +const menuHeight = STATS.height() * 0.1; +const menuPad = STATS.height() * 0.01; +const menuWidth = STATS.width() * 0.25; + +class StatSheet extends Phaser.Scene { + constructor() { + super({ key: 'StatSheet' }); + } + + create(props) { + const { cryp } = props; + this.cryp = cryp; + this.stats = new Stats(this, cryp); + this.addControls(cryp); + this.registry.events.on('changedata', this.updateData, this); + } + + updateData(parent, key, data) { + if (key === 'cryps') { + const cryp = data.find(c => c.id === this.cryp.id); + if (this.skillsKnown) this.skillsKnown.destroy(true); + if (this.skillsLearn) this.skillsLearn.destroy(true); + this.stats.destroy(true); + this.stats = new Stats(this, cryp); + this.addSkills(cryp); + } + } + + addControls(cryp) { + const menu = this.add + .rectangle(0, menuOrig, menuWidth, menuHeight, 0x222222) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + // Registry events won't get auto cleaned + this.registry.events.off('changedata', this.updateData); + this.scene.run('CrypList'); + this.scene.remove('Passives'); + this.scene.remove(); + }); + + this.add.text(menu.getCenter().x, menu.getCenter().y, 'Main Menu', TEXT.HEADER) + .setOrigin(0.5, 0.5); + + const passives = this.add + .rectangle(0, menuOrig + menuHeight + menuPad, menuWidth, menuHeight, 0x222222) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + if (this.passives) return false; + this.removeSkills(); + this.addPassives(cryp); + this.passives = true; + return true; + }); + + this.add.text(passives.getCenter().x, passives.getCenter().y, 'View Passives', TEXT.HEADER) + .setOrigin(0.5, 0.5); + + const skills = this.add + .rectangle(0, menuOrig + (menuHeight + menuPad) * 2, menuWidth, menuHeight, 0x222222) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + if (this.skills) return false; + this.removePassives(); + this.addSkills(cryp); + this.skills = true; + return true; + }); + this.add.text(skills.getCenter().x, skills.getCenter().y, 'View Skills', TEXT.HEADER) + .setOrigin(0.5, 0.5); + + const clear = this.add + .rectangle(0, menuOrig + (menuHeight + menuPad) * 3, menuWidth, menuHeight, 0x222222) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + this.removePassives(); + this.removeSkills(); + return true; + }); + this.add.text(clear.getCenter().x, clear.getCenter().y, 'View Cryp', TEXT.HEADER) + .setOrigin(0.5, 0.5); + } + + addSkills(cryp) { + this.skillsKnown = new SkillsKnown(this, cryp); + this.skillsLearn = new SkillsLearn(this, cryp); + } + + addPassives(cryp) { + this.scene.add('Passives', Passives); + this.scene.run('Passives', cryp); + } + + removePassives() { + if (!this.passives) return false; + this.scene.remove('Passives'); + this.passives = false; + return true; + } + + removeSkills() { + if (!this.skills) return false; + this.skillsKnown.destroy(true); + this.skillsLearn.destroy(true); + this.skills = false; + return true; + } +} + +module.exports = StatSheet; diff --git a/client/src/scenes/statsheet.skills.js b/client/src/scenes/statsheet.skills.js new file mode 100755 index 00000000..e0f7395d --- /dev/null +++ b/client/src/scenes/statsheet.skills.js @@ -0,0 +1,64 @@ +const Phaser = require('phaser'); + +const { TEXT, SKILLS, POSITIONS: { STATS } } = require('./constants'); + +class SkillsKnown extends Phaser.GameObjects.Group { + constructor(scene, cryp) { + super(scene); + this.id = cryp.id; + this.scene = scene; + this.ws = scene.registry.get('ws'); + + const TEXT_MARGIN = STATS.textMargin(); + const X_ORIG = STATS.knownX(); + const Y_ORIG = STATS.y(); + + const knownSkill = (skill, i) => { + const SKILL_X = X_ORIG; + const SKILL_Y = (i * TEXT_MARGIN) + Y_ORIG + TEXT_MARGIN; + + const text = scene.add.text(SKILL_X, SKILL_Y, skill.skill, TEXT.NORMAL) + .setInteractive(); + + text.on('pointerdown', () => { + this.ws.sendCrypForget(cryp.id, skill.skill); + }); + this.add(text); + }; + + this.add(scene.add.text(X_ORIG, Y_ORIG, 'Skills', TEXT.HEADER)); + cryp.skills.forEach(knownSkill); + } +} + +class SkillsLearn extends Phaser.GameObjects.Group { + constructor(scene, cryp) { + super(scene); + this.id = cryp.id; + this.scene = scene; + this.ws = scene.registry.get('ws'); + + const TEXT_MARGIN = STATS.textMargin(); + const X_ORIG = STATS.learnableX(); + const Y_ORIG = STATS.y(); + + const learnable = (skill, i) => { + const SKILL_X = X_ORIG; + const SKILL_Y = Y_ORIG + (i * TEXT_MARGIN) + TEXT_MARGIN; + + const text = scene.add.text(SKILL_X, SKILL_Y, skill, TEXT.NORMAL) + .setInteractive(); + + text.on('pointerdown', () => { + this.ws.sendCrypLearn(cryp.id, skill); + }); + this.add(text); + text.cryp = cryp; + }; + + this.add(scene.add.text(X_ORIG, Y_ORIG, 'Learnable', TEXT.HEADER)); + SKILLS.LEARNABLE.forEach(learnable); + } +} + +module.exports = { SkillsKnown, SkillsLearn }; diff --git a/client/src/scenes/statsheet.stats.js b/client/src/scenes/statsheet.stats.js new file mode 100755 index 00000000..7486d614 --- /dev/null +++ b/client/src/scenes/statsheet.stats.js @@ -0,0 +1,22 @@ +const Phaser = require('phaser'); + +const { TEXT, POSITIONS: { STATS } } = require('./constants'); + +const TEXT_MARGIN = STATS.textMargin(); + +class Stats extends Phaser.GameObjects.Group { + constructor(scene, cryp) { + super(scene); + const crypStat = (stat, i) => { + const STAT_X = 0; + const STAT_Y = (i * TEXT_MARGIN) + STATS.y() + TEXT_MARGIN; + this.add(scene.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL)); + }; + + const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg]; + this.add(scene.add.text(0, STATS.y(), cryp.name, TEXT.HEADER)); + CRYP_STATS.forEach(crypStat); + } +} + +module.exports = Stats;