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

cryp arrangement

Browse Source
This commit is contained in:
Mashy 2018-11-26 15:25:59 +10:00
parent af1c06289d
commit 99ff116e2d
4 changed files with 53 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,23 +3,40 @@ const Phaser = require('phaser');
const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants'); const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
const calcMargin = () => { const calcMargin = () => {
const CRYP_MARGIN = COMBAT.height() / 3.4; const CRYP_MARGIN = COMBAT.height() / 5;
const TEXT_MARGIN = COMBAT.height() / 35; 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 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 }; return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
}; };
const healthBarDimensions = (team, iter) => { const healthBarDimensions = (team, iter) => {
const { CRYP_MARGIN, TEAM_MARGIN, TEXT_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); const { TEAM_MARGIN, TEXT_MARGIN, CRYP_MARGIN } = calcMargin();
const healthBarX = X_PADDING / 2 + TEAM_MARGIN * team; const healthBarX = 1.25 * TEAM_MARGIN * team;
const healthBarY = Y_PADDING / 3 + CRYP_MARGIN * iter; const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
const healthBarWidth = X_PADDING / 1.5; const healthBarWidth = TEAM_MARGIN / 10;
const healthBarHeight = TEXT_MARGIN / 1.5; const healthBarHeight = TEXT_MARGIN / 1.5;
return { healthBarX, healthBarY, healthBarWidth, healthBarHeight }; 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 { class CrypImage extends Phaser.GameObjects.Image {
constructor(scene, j, team, avatar, cryp, healthbar) { constructor(scene, j, team, avatar, cryp, healthbar) {
@ -27,7 +44,7 @@ class CrypImage extends Phaser.GameObjects.Image {
const { const {
CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING, CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING,
} = calcMargin(); } = 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.scene = scene;
this.cryp = cryp; this.cryp = cryp;
this.healthbar = healthbar; this.healthbar = healthbar;
@ -53,14 +70,10 @@ class CrypImage extends Phaser.GameObjects.Image {
} }
class CrypSkill extends Phaser.GameObjects.Text { class CrypSkill extends Phaser.GameObjects.Text {
constructor(scene, row, iter, team, skill, cryp) { constructor(scene, x, y, team, skill, cryp) {
console.log(skill, cryp); console.log(skill, cryp);
// Avatar will be a property of cryp // Avatar will be a property of cryp
const { super(scene, x, y, skill.skill, TEXT.NORMAL);
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);
this.cryp = cryp; this.cryp = cryp;
this.skill = skill; this.skill = skill;
this.setInteractive(); this.setInteractive();
@ -123,41 +136,42 @@ class HealthBar extends Phaser.GameObjects.Graphics {
} }
function renderCryp(scene, group, cryp, game, team, iter) { function renderCryp(scene, group, cryp, game, team, iter) {
const {
CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING,
} = calcMargin();
// Add Image Avatar Class // Add Image Avatar Class
const avatar = team ? 'magmar' : 'alk'; const avatar = team ? 'magmar' : 'alk';
// Add cryp hp // Add cryp hp
const crypHpText = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + CRYP_MARGIN * iter, const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter);
`${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, TEXT.NORMAL); 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)); const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText));
group.add(crypHpText);
group.add(healthBar);
// Add cryp name // Add cryp name
const crypSpawn = scene.add.existing(new CrypImage(scene, iter, team, avatar, cryp, healthBar)) const crypSpawn = scene.add.existing(new CrypImage(scene, iter, team, avatar, cryp, healthBar))
.setScale(0.5) .setScale(0.5)
.setInteractive(); .setInteractive();
group.add(crypSpawn); group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]);
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);
return crypSpawn; return crypSpawn;
} }
function renderSkills(scene, group, cryp, game, team, iter) { function renderSkills(scene, group, cryp, account, game, team, iter) {
if (game.phase === 'Skill') { 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) => { 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); const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id);
// cryp not casting this turn // cryp not casting this turn
if (!blockSkill) return false; if (!blockSkill) return false;
const crypName = scene.add.text(nameTextPosition[0], nameTextPosition[1], cryp.name, TEXT.HEADER);
group.add(scene.add.existing(new CrypSkill(scene, 1, iter, team, blockSkill, cryp))); 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 team = cryp.account === account.id ? 0 : 1;
const iter = cryp.account === account.id ? allyCount : enemyCount; const iter = cryp.account === account.id ? allyCount : enemyCount;
renderCryp(scene, this, cryp, game, team, iter); 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; allyCount = cryp.account === account.id ? allyCount += 1 : enemyCount += 1;
}); });
} }

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

@ -67,6 +67,7 @@ class Combat extends Phaser.Scene {
this.registry.set('resolve', true); this.registry.set('resolve', true);
this.crypTeamRender.destroy(true); this.crypTeamRender.destroy(true);
this.logIter += 1; this.logIter += 1;
this.crypTeamRender = new DrawCrypTeams(this, game);
combatRender(this, game); combatRender(this, game);
return true; return true;
} this.logIter += 1; } this.logIter += 1;

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

@ -37,7 +37,7 @@ function combatRender(scene, game) {
const target = resolved.source_team_id === account.id; const target = resolved.source_team_id === account.id;
delay = scene.skills[skill](target); delay = scene.skills[skill](target);
animatePhase(scene, animatedGroup, game, account, delay[0]); // animatePhase(scene, animatedGroup, game, account, delay[0]);
if (scene.iterateLog(game)) { if (scene.iterateLog(game)) {
scene.time.delayedCall(delay[1], () => { scene.time.delayedCall(delay[1], () => {

8
client/src/scenes/constants.js Normal file → Executable file
View File

@ -28,10 +28,10 @@ const statsKnownX = () => Math.floor(statsX() + statsWidth() / 4);
const statsLearnableX = () => Math.floor(statsX() + statsWidth() / 2); const statsLearnableX = () => Math.floor(statsX() + statsWidth() / 2);
const statsTextMargin = () => 24; const statsTextMargin = () => 24;
const logWidth = () => Math.floor(combatWidth() * 0.2); const logWidth = () => combatWidth();
const logHeight = () => combatHeight(); const logHeight = () => combatHeight() * 0.3;
const logY = () => menuHeight(); const logY = () => menuHeight() + (combatHeight() * 0.7);
const logX = () => combatWidth() - logWidth(); const logX = () => combatWidth() * 0.6;
module.exports = { module.exports = {
TEXT: { TEXT: {