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 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;
});
}

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

@ -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;

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;
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], () => {

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 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: {