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

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

@ -78,8 +78,8 @@ function GamePanel(props) {
</div>
</div>
<div className="has-text-centered">{cryp.hp.value} / {cryp.stamina.value} HP </div>
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress>
<div className="has-text-centered">{cryp.hp.base} / {cryp.stamina.base} HP </div>
<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>
<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 className="has-text-centered">{cryp.hp.value} / {cryp.stamina.value} HP </div>
<progress className="progress is-dark" value={cryp.hp.value} max={cryp.stamina.value}></progress>
<div className="has-text-centered">{cryp.hp.base} / {cryp.stamina.base} HP </div>
<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>
<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.scene = scene;
this.alloc = alloc;
this.text = text;
this.text = (text.indexOf(',') > -1) ? text.split(',') : text;
this.id = id;
this.setPosition(x, y);
@ -30,11 +30,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite {
}
allocate(alloc) {
if (alloc !== undefined) {
this.alloc = alloc;
} else {
this.alloc = !this.alloc;
}
this.alloc = (alloc !== undefined) ? alloc : !this.alloc;
this.updateNode();
}

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

@ -14,22 +14,22 @@ class PhaserPassives extends Phaser.Scene {
}
create() {
this.init();
this.addPassiveNodes();
this.addCameraControl();
this.addEvents();
this.drawPassiveEdges();
}
init() {
this.background = this.add.image(0, 0, 'background');
this.background.setScale(5);
this.background.setInteractive();
this.graphics = this.add.graphics();
this.nodeText = this.add.text(10000, 10000, 'grep', {
fontSize: '32px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#000000',
}).setPadding(32);
this.textGraphic = new Phaser.GameObjects.Graphics(this);
this.add.existing(this.textGraphic);
this.passiveNodeData = passiveDataNode;
this.passiveEdgeData = passiveDataEdge;
this.addPassiveNodes();
this.drawPassiveEdges();
this.addCanmeraControl();
}
addPassiveNodes() {
@ -39,15 +39,28 @@ class PhaserPassives extends Phaser.Scene {
new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
).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) => {
if (gameObjects[0] instanceof PassiveNode) {
if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff);
this.nodeText.x = pointer.x + this.cameras.main.scrollX;
this.nodeText.y = pointer.y + this.cameras.main.scrollY;
this.nodeText.text = gameObjects[0].text;
} else {
this.nodeText.text = '';
if (!gameObjects[0].alloc) {
gameObjects[0].setTint(0xff00ff);
}
this.displayPassiveText(gameObjects[0], pointer);
} else if (this.nodeText) {
this.nodeText.destroy();
}
});
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.updatePassives(); // Will update nodes from state
}, 0, this);
@ -87,22 +106,18 @@ class PhaserPassives extends Phaser.Scene {
});
}
addCanmeraControl() {
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.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,
});
displayPassiveText(node, pointer) {
this.nodeText = this.add.text(0, 0, '', {
fontSize: '20px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#222222',
}).setPadding(32);
this.nodeText.setScale(1 / this.cameras.main.zoom);
this.nodeText.setWordWrapWidth(450);
this.nodeText.setPosition(node.x, node.y);
this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0);
this.nodeText.text = node.text;
}
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);
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.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].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.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('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('chargeBall', 'green', 180, 250);
}