From 99ff116e2d6e9f7536b9178f51a3bfba3fe4a7df Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 26 Nov 2018 15:25:59 +1000 Subject: [PATCH] cryp arrangement --- client/src/scenes/combat.cryps.js | 80 ++++++++++++++++++------------ client/src/scenes/combat.js | 1 + client/src/scenes/combat.render.js | 2 +- client/src/scenes/constants.js | 8 +-- 4 files changed, 53 insertions(+), 38 deletions(-) mode change 100644 => 100755 client/src/scenes/constants.js diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js index 379929ab..07fe3ef5 100755 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -3,23 +3,40 @@ const Phaser = require('phaser'); const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants'); const calcMargin = () => { - const CRYP_MARGIN = COMBAT.height() / 3.4; + const CRYP_MARGIN = COMBAT.height() / 5; const TEXT_MARGIN = COMBAT.height() / 35; - const TEAM_MARGIN = COMBAT.width() / 2; + const TEAM_MARGIN = COMBAT.width() * 0.7; const X_PADDING = COMBAT.width() / 10; - const Y_PADDING = COMBAT.width() / 7; + const Y_PADDING = COMBAT.height() / 7; return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING }; }; const healthBarDimensions = (team, iter) => { - const { CRYP_MARGIN, TEAM_MARGIN, TEXT_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); - const healthBarX = X_PADDING / 2 + TEAM_MARGIN * team; - const healthBarY = Y_PADDING / 3 + CRYP_MARGIN * iter; - const healthBarWidth = X_PADDING / 1.5; + const { TEAM_MARGIN, TEXT_MARGIN, CRYP_MARGIN } = calcMargin(); + const healthBarX = 1.25 * TEAM_MARGIN * team; + const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07; + const healthBarWidth = TEAM_MARGIN / 10; const healthBarHeight = TEXT_MARGIN / 1.5; return { healthBarX, healthBarY, healthBarWidth, healthBarHeight }; }; +const crypAvatarText = (team, iter) => { + const { TEAM_MARGIN, CRYP_MARGIN, TEXT_MARGIN } = calcMargin(); + + const nameTextX = 1.25 * TEAM_MARGIN * team; + const nameTextY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07; + const healthTextX = 1.25 * TEAM_MARGIN * team; + const healthTextY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07; + return { nameTextX, nameTextY, healthTextX, healthTextY }; +}; + +const skillTextPosition = (crypIter, skillIter) => { + const { TEXT_MARGIN } = calcMargin(); + const skillTextX = 0.15 * COMBAT.width() * crypIter; + const skillTextY = COMBAT.y() + COMBAT.height() * 0.7 + TEXT_MARGIN * skillIter; + return [skillTextX, skillTextY]; +}; + class CrypImage extends Phaser.GameObjects.Image { constructor(scene, j, team, avatar, cryp, healthbar) { @@ -27,7 +44,7 @@ class CrypImage extends Phaser.GameObjects.Image { const { CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING, } = calcMargin(); - super(scene, X_PADDING + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar); + super(scene, COMBAT.width() / 8 + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar); this.scene = scene; this.cryp = cryp; this.healthbar = healthbar; @@ -53,14 +70,10 @@ class CrypImage extends Phaser.GameObjects.Image { } class CrypSkill extends Phaser.GameObjects.Text { - constructor(scene, row, iter, team, skill, cryp) { + constructor(scene, x, y, team, skill, cryp) { console.log(skill, cryp); // Avatar will be a property of cryp - const { - CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING, - } = calcMargin(); - super(scene, X_PADDING * 2 + TEAM_MARGIN * team, - Y_PADDING / 2 + TEXT_MARGIN * (row + 2) + CRYP_MARGIN * iter, skill.skill, TEXT.NORMAL); + super(scene, x, y, skill.skill, TEXT.NORMAL); this.cryp = cryp; this.skill = skill; this.setInteractive(); @@ -123,41 +136,42 @@ class HealthBar extends Phaser.GameObjects.Graphics { } function renderCryp(scene, group, cryp, game, team, iter) { - const { - CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING, - } = calcMargin(); // Add Image Avatar Class const avatar = team ? 'magmar' : 'alk'; // Add cryp hp - const crypHpText = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + CRYP_MARGIN * iter, - `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL); + const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter); + const crypName = scene.add.text(nameTextX, nameTextY, cryp.name, TEXT.NORMAL); + const crypHpText = scene.add.text(healthTextX, healthTextY, `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL); const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText)); - group.add(crypHpText); - group.add(healthBar); // Add cryp name const crypSpawn = scene.add.existing(new CrypImage(scene, iter, team, avatar, cryp, healthBar)) .setScale(0.5) .setInteractive(); - group.add(crypSpawn); - const crypName = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, - Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * iter, cryp.name, TEXT.HEADER); - group.add(crypName); + group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]); return crypSpawn; } -function renderSkills(scene, group, cryp, game, team, iter) { - if (game.phase === 'Skill') { +function renderSkills(scene, group, cryp, account, game, team, iter) { + const nameTextPosition = skillTextPosition(iter, 0); + if (game.phase === 'Skill' && cryp.account === account.id) { + if (cryp.hp.base === 0) return true; + const crypName = scene.add.text(nameTextPosition[0], nameTextPosition[1], cryp.name, TEXT.HEADER); + group.add(crypName); + crypName.text = cryp.name; cryp.skills.forEach((skill, i) => { - group.add(scene.add.existing(new CrypSkill(scene, i, iter, team, skill, cryp))); + const skillText = skillTextPosition(iter, i + 2); + group.add(scene.add.existing(new CrypSkill(scene, skillText[0], skillText[1], team, skill, cryp))); }); - } else if (game.phase === 'Target') { + } else if (game.phase === 'Target' && cryp.account !== account.id) { const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id); - // cryp not casting this turn if (!blockSkill) return false; - - group.add(scene.add.existing(new CrypSkill(scene, 1, iter, team, blockSkill, cryp))); + const crypName = scene.add.text(nameTextPosition[0], nameTextPosition[1], cryp.name, TEXT.HEADER); + group.add(crypName); + const skillText = skillTextPosition(iter, 2); + group.add(scene.add.existing(new CrypSkill(scene, skillText[0], skillText[1], team, blockSkill, cryp))); } + return true; } @@ -171,7 +185,7 @@ class DrawCrypTeams extends Phaser.GameObjects.Group { const team = cryp.account === account.id ? 0 : 1; const iter = cryp.account === account.id ? allyCount : enemyCount; renderCryp(scene, this, cryp, game, team, iter); - renderSkills(scene, this, cryp, game, team, iter); + renderSkills(scene, this, cryp, account, game, team, iter); allyCount = cryp.account === account.id ? allyCount += 1 : enemyCount += 1; }); } diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 4098439c..fd624e99 100755 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -67,6 +67,7 @@ class Combat extends Phaser.Scene { this.registry.set('resolve', true); this.crypTeamRender.destroy(true); this.logIter += 1; + this.crypTeamRender = new DrawCrypTeams(this, game); combatRender(this, game); return true; } this.logIter += 1; diff --git a/client/src/scenes/combat.render.js b/client/src/scenes/combat.render.js index 37380b28..ddd6effc 100755 --- a/client/src/scenes/combat.render.js +++ b/client/src/scenes/combat.render.js @@ -37,7 +37,7 @@ function combatRender(scene, game) { const target = resolved.source_team_id === account.id; delay = scene.skills[skill](target); - animatePhase(scene, animatedGroup, game, account, delay[0]); + // animatePhase(scene, animatedGroup, game, account, delay[0]); if (scene.iterateLog(game)) { scene.time.delayedCall(delay[1], () => { diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js old mode 100644 new mode 100755 index c3b8ab84..3ab91dd2 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -28,10 +28,10 @@ const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4); const statsLearnableX = () => Math.floor(statsX() + statsWidth() / 2); const statsTextMargin = () => 24; -const logWidth = () => Math.floor(combatWidth() * 0.2); -const logHeight = () => combatHeight(); -const logY = () => menuHeight(); -const logX = () => combatWidth() - logWidth(); +const logWidth = () => combatWidth(); +const logHeight = () => combatHeight() * 0.3; +const logY = () => menuHeight() + (combatHeight() * 0.7); +const logX = () => combatWidth() * 0.6; module.exports = { TEXT: {