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

Legit as fuck hover text

Browse Source
This commit is contained in:
Mashy 2018-11-18 01:47:55 +10:00
parent 6302e2c362
commit 21d2f5c7e4
5 changed files with 62 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/components/cryp.list.jsx
View File

@ -27,8 +27,8 @@ function CrypList({
</div> </div>
</div> </div>
<div className="has-text-centered">{cryp.hp.value} / {cryp.stamina.value} HP </div> <div className="has-text-centered">{cryp.hp.base} / {cryp.stamina.base} HP </div>
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress> <progress className="progress is-dark" value={cryp.hp.base} max={cryp.stamina.base}></progress>
<div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div> <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress> <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
@ -37,7 +37,7 @@ function CrypList({
<button <button
className="button is-dark" className="button is-dark"
type="submit" type="submit"
disabled={cryp.hp.value === 0} disabled={cryp.hp.base === 0}
onClick={() => sendGamePve(cryp.id)}> onClick={() => sendGamePve(cryp.id)}>
Start PVE Start PVE
</button> </button>
@ -45,7 +45,7 @@ function CrypList({
<button <button
className="button is-dark" className="button is-dark"
type="submit" type="submit"
disabled={cryp.hp.value === 0} disabled={cryp.hp.base === 0}
onClick={() => sendGamePvp([cryp.id])}> onClick={() => sendGamePvp([cryp.id])}>
PVP PVP
</button> </button>

8
client/src/components/game.jsx
View File

@ -78,8 +78,8 @@ function GamePanel(props) {
</div> </div>
</div> </div>
<div className="has-text-centered">{cryp.hp.value} / {cryp.stamina.value} HP </div> <div className="has-text-centered">{cryp.hp.base} / {cryp.stamina.base} HP </div>
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress> <progress className="progress is-dark" value={cryp.hp.base} max={cryp.stamina.base}></progress>
<div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div> <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress> <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
@ -120,8 +120,8 @@ function GamePanel(props) {
</div> </div>
</div> </div>
<div className="has-text-centered">{cryp.hp.value} / {cryp.stamina.value} HP </div> <div className="has-text-centered">{cryp.hp.base} / {cryp.stamina.base} HP </div>
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress> <progress className="progress is-dark" value={cryp.hp.base} max={cryp.stamina.base}></progress>
<div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div> <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
<progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress> <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>

8
client/src/components/passive.node.js
View File

@ -6,7 +6,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite {
this.setTexture('eye'); this.setTexture('eye');
this.scene = scene; this.scene = scene;
this.alloc = alloc; this.alloc = alloc;
this.text = text; this.text = (text.indexOf(',') > -1) ? text.split(',') : text;
this.id = id; this.id = id;
this.setPosition(x, y); this.setPosition(x, y);
@ -30,11 +30,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite {
} }
allocate(alloc) { allocate(alloc) {
if (alloc !== undefined) { this.alloc = (alloc !== undefined) ? alloc : !this.alloc;
this.alloc = alloc;
} else {
this.alloc = !this.alloc;
}
this.updateNode(); this.updateNode();
} }

81
client/src/components/passive.phaser.js
View File

@ -14,22 +14,22 @@ class PhaserPassives extends Phaser.Scene {
} }
create() { create() {
this.init();
this.addPassiveNodes();
this.addCameraControl();
this.addEvents();
this.drawPassiveEdges();
}
init() {
this.background = this.add.image(0, 0, 'background'); this.background = this.add.image(0, 0, 'background');
this.background.setScale(5); this.background.setScale(5);
this.background.setInteractive(); this.background.setInteractive();
this.graphics = this.add.graphics(); this.graphics = this.add.graphics();
this.nodeText = this.add.text(10000, 10000, 'grep', { this.textGraphic = new Phaser.GameObjects.Graphics(this);
fontSize: '32px', this.add.existing(this.textGraphic);
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#000000',
}).setPadding(32);
this.passiveNodeData = passiveDataNode; this.passiveNodeData = passiveDataNode;
this.passiveEdgeData = passiveDataEdge; this.passiveEdgeData = passiveDataEdge;
this.addPassiveNodes();
this.drawPassiveEdges();
this.addCanmeraControl();
} }
addPassiveNodes() { addPassiveNodes() {
@ -39,15 +39,28 @@ class PhaserPassives extends Phaser.Scene {
new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text) new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
).setInteractive(); ).setInteractive();
}); });
}
addCameraControl() {
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
camera: this.cameras.main,
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
acceleration: 0.005,
drag: 0.0005,
maxSpeed: 0.001,
});
}
addEvents() {
this.input.on('pointerover', (pointer, gameObjects) => { this.input.on('pointerover', (pointer, gameObjects) => {
if (gameObjects[0] instanceof PassiveNode) { if (gameObjects[0] instanceof PassiveNode) {
if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff); if (!gameObjects[0].alloc) {
this.nodeText.x = pointer.x + this.cameras.main.scrollX; gameObjects[0].setTint(0xff00ff);
this.nodeText.y = pointer.y + this.cameras.main.scrollY; }
this.nodeText.text = gameObjects[0].text; this.displayPassiveText(gameObjects[0], pointer);
} else { } else if (this.nodeText) {
this.nodeText.text = ''; this.nodeText.destroy();
} }
}); });
this.input.on('pointerout', (pointer, gameObjects) => { this.input.on('pointerout', (pointer, gameObjects) => {
@ -65,7 +78,13 @@ class PhaserPassives extends Phaser.Scene {
} }
} }
}); });
this.input.on('pointermove', (pointer) => {
if (this.pan) {
const points = pointer.getInterpolatedPosition(2);
this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2;
this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2;
}
}, this);
this.input.keyboard.on('keydown_A', () => { this.input.keyboard.on('keydown_A', () => {
this.updatePassives(); // Will update nodes from state this.updatePassives(); // Will update nodes from state
}, 0, this); }, 0, this);
@ -87,22 +106,18 @@ class PhaserPassives extends Phaser.Scene {
}); });
} }
addCanmeraControl() { displayPassiveText(node, pointer) {
this.input.on('pointermove', (pointer) => { this.nodeText = this.add.text(0, 0, '', {
if (this.pan) { fontSize: '20px',
const points = pointer.getInterpolatedPosition(2); fontFamily: 'Arial',
this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2; color: '#ffffff',
this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2; backgroundColor: '#222222',
} }).setPadding(32);
}, this); this.nodeText.setScale(1 / this.cameras.main.zoom);
this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({ this.nodeText.setWordWrapWidth(450);
camera: this.cameras.main, this.nodeText.setPosition(node.x, node.y);
zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q), this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0);
zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), this.nodeText.text = node.text;
acceleration: 0.005,
drag: 0.0005,
maxSpeed: 0.001,
});
} }
updatePassives() { updatePassives() {

8
client/src/components/phaser.container.jsx
View File

@ -25,13 +25,13 @@ class PhaserInstance extends preact.Component {
const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id); const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id);
if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) { if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) {
this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stamina.value.toString()} HP`); this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.base.toString()} / ${playerTeam.cryps[0].stamina.base.toString()} HP`);
this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stamina.value.toString()} HP`); this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.base.toString()} / ${otherTeams[0].cryps[0].stamina.base.toString()} HP`);
if (playerTeam.cryps[0].hp.value === 0) { if (playerTeam.cryps[0].hp.base === 0) {
// this.PhaserCombat.skills('blast', 400, -150); // this.PhaserCombat.skills('blast', 400, -150);
this.PhaserCombat.skills('chargeBall', 'green', 400, -250); this.PhaserCombat.skills('chargeBall', 'green', 400, -250);
} else if (otherTeams[0].cryps[0].hp.value === 0) { } else if (otherTeams[0].cryps[0].hp.base === 0) {
// this.PhaserCombat.skills('blast', 180, 150); // this.PhaserCombat.skills('blast', 180, 150);
this.PhaserCombat.skills('chargeBall', 'green', 180, 250); this.PhaserCombat.skills('chargeBall', 'green', 180, 250);
} }