From 6907cf17e02627647fd8fe1bb23b12542f0ff9aa Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 19 Nov 2018 20:23:40 +1100 Subject: [PATCH] cryps list click --- client/src/components/battle.cryp.card.jsx | 40 ---- client/src/components/body.component.jsx | 72 ------- client/src/components/cryp.list.container.js | 29 --- client/src/components/cryp.list.jsx | 62 ------ client/src/components/cryp.panel.jsx | 37 ---- client/src/components/cryp.spawn.button.jsx | 30 --- client/src/components/cryp.spawn.container.js | 16 -- client/src/components/game.container.js | 48 ----- client/src/components/game.join.button.jsx | 42 ---- client/src/components/game.jsx | 188 ------------------ client/src/components/header.component.jsx | 19 -- client/src/components/item.list.container.js | 20 -- client/src/components/item.list.jsx | 37 ---- client/src/components/login.component.jsx | 69 ------- client/src/components/login.container.jsx | 18 -- client/src/components/navbar.jsx | 47 ----- client/src/components/passive.container.jsx | 56 ------ client/src/components/passive.phaser.js | 126 ------------ client/src/components/phaser.combat.js | 74 ------- client/src/components/phaser.container.jsx | 67 ------- client/src/components/phaser.skills.js | 141 ------------- client/src/scenes/cryp.list.js | 8 +- client/src/scenes/cryp.page.js | 55 +++++ client/src/scenes/cryp.row.js | 9 +- client/src/scenes/cryps.js | 2 + 25 files changed, 69 insertions(+), 1243 deletions(-) delete mode 100644 client/src/components/battle.cryp.card.jsx delete mode 100755 client/src/components/body.component.jsx delete mode 100755 client/src/components/cryp.list.container.js delete mode 100755 client/src/components/cryp.list.jsx delete mode 100644 client/src/components/cryp.panel.jsx delete mode 100644 client/src/components/cryp.spawn.button.jsx delete mode 100644 client/src/components/cryp.spawn.container.js delete mode 100644 client/src/components/game.container.js delete mode 100644 client/src/components/game.join.button.jsx delete mode 100755 client/src/components/game.jsx delete mode 100644 client/src/components/header.component.jsx delete mode 100644 client/src/components/item.list.container.js delete mode 100644 client/src/components/item.list.jsx delete mode 100755 client/src/components/login.component.jsx delete mode 100755 client/src/components/login.container.jsx delete mode 100644 client/src/components/navbar.jsx delete mode 100755 client/src/components/passive.container.jsx delete mode 100755 client/src/components/passive.phaser.js delete mode 100755 client/src/components/phaser.combat.js delete mode 100755 client/src/components/phaser.container.jsx delete mode 100755 client/src/components/phaser.skills.js create mode 100644 client/src/scenes/cryp.page.js diff --git a/client/src/components/battle.cryp.card.jsx b/client/src/components/battle.cryp.card.jsx deleted file mode 100644 index 19d63c92..00000000 --- a/client/src/components/battle.cryp.card.jsx +++ /dev/null @@ -1,40 +0,0 @@ -const preact = require('preact'); - -function CrypCard(cryp) { - return ( -
sendItemUse(cryp.id)} > -
-
-
-

{cryp.name}

-

Level {cryp.lvl}

-
-
-
- -
-
- -
-
{cryp.hp.value} / {cryp.stam.value} HP
- - -
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
- - -
- -
- ); -} - -module.exports = CrypCard; diff --git a/client/src/components/body.component.jsx b/client/src/components/body.component.jsx deleted file mode 100755 index bf3287c5..00000000 --- a/client/src/components/body.component.jsx +++ /dev/null @@ -1,72 +0,0 @@ -// eslint-disable-next-line -const preact = require('preact'); -const { connect } = require('preact-redux'); -const actions = require('../actions'); - -const ItemListContainer = require('./item.list.container'); -const CrypSpawnContainer = require('./cryp.spawn.container'); -const GameJoinButton = require('./game.join.button'); -const CrypListContainer = require('./cryp.list.container'); -const GameContainer = require('./game.container'); -const Passives = require('./passive.container'); - -const addState = connect( - (state) => { - const { game, ws } = state; - if (!game) { - ws.clearGameStateInterval(); - } - return state; - }, - (dispatch) => { - function setGame(game) { - dispatch(actions.setGame(game)); - } - return { setGame }; - } -); - -function renderBody(props) { - const { game, setGame, account } = props; - if (game) { - return ( -
- - -
- ); - } - if (account) { - return ( -
-
-
- - -
-
-
-
- -
-
- -
-
-
-
-
- -
-
- ); - } return
not ready
; -} - -module.exports = addState(renderBody); diff --git a/client/src/components/cryp.list.container.js b/client/src/components/cryp.list.container.js deleted file mode 100755 index e1f4a5cf..00000000 --- a/client/src/components/cryp.list.container.js +++ /dev/null @@ -1,29 +0,0 @@ -const { connect } = require('preact-redux'); - -const CrypList = require('./cryp.list'); - -const addState = connect( - function receiveState(state) { - const { ws, cryps, activeItem } = state; - function sendGamePve(crypId) { - return ws.sendGamePve(crypId); - } - - function sendGamePvp(crypIds) { - return ws.sendGamePvp(crypIds); - } - - function sendItemUse(targetId) { - if (activeItem) { - return ws.sendItemUse(activeItem, targetId); - } - return false; - } - - return { - cryps, sendGamePve, sendGamePvp, activeItem, sendItemUse, - }; - } -); - -module.exports = addState(CrypList); diff --git a/client/src/components/cryp.list.jsx b/client/src/components/cryp.list.jsx deleted file mode 100755 index a3f094ff..00000000 --- a/client/src/components/cryp.list.jsx +++ /dev/null @@ -1,62 +0,0 @@ -const preact = require('preact'); - -const { stringSort } = require('./../utils'); - -const nameSort = stringSort('name'); - -function CrypList({ - cryps, activeItem, sendGamePve, sendGamePvp, sendItemUse, -}) { - if (!cryps) return
not ready
; - const crypPanels = cryps.sort(nameSort).map(cryp => ( - -
sendItemUse(cryp.id)} > -
-
-
-

{cryp.name}

-

Level {cryp.lvl}

-
-
-
- -
-
- -
-
{cryp.hp.value} / {cryp.stamina.value} HP
- - -
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
- - -
- - - - -
- )); - return ( -
- {crypPanels} -
- ); -} - -module.exports = CrypList; diff --git a/client/src/components/cryp.panel.jsx b/client/src/components/cryp.panel.jsx deleted file mode 100644 index f9324eb7..00000000 --- a/client/src/components/cryp.panel.jsx +++ /dev/null @@ -1,37 +0,0 @@ -const preact = require('preact'); - -function renderCrypPanel(cryp) { - return ( -
-
-
-
-
- -
-
-
-
-
-

Drake

-

Level 1

-
-
-

Flying

-

Fire

-

Stone

-
-
-
    5
-
    5
-
    5
-
-
-
5 / 5 HP
- -
-
-
-
- ); -} diff --git a/client/src/components/cryp.spawn.button.jsx b/client/src/components/cryp.spawn.button.jsx deleted file mode 100644 index 3e454fac..00000000 --- a/client/src/components/cryp.spawn.button.jsx +++ /dev/null @@ -1,30 +0,0 @@ -const preact = require('preact'); - -function renderSpawnButton({ account, sendCrypSpawn }) { - let name = ''; - - if (!account) return
...
; - - return ( -
-
- (name = e.target.value)} - /> -
-
- -
-
- ); -} - -module.exports = renderSpawnButton; diff --git a/client/src/components/cryp.spawn.container.js b/client/src/components/cryp.spawn.container.js deleted file mode 100644 index 7dd8bfac..00000000 --- a/client/src/components/cryp.spawn.container.js +++ /dev/null @@ -1,16 +0,0 @@ -const { connect } = require('preact-redux'); - -const CrypSpawnButton = require('./cryp.spawn.button'); - -const addState = connect( - function receiveState(state) { - const { ws } = state; - function sendCrypSpawn(name) { - return ws.sendCrypSpawn(name); - } - - return { account: state.account, sendCrypSpawn }; - } -); - -module.exports = addState(CrypSpawnButton); diff --git a/client/src/components/game.container.js b/client/src/components/game.container.js deleted file mode 100644 index 8adac3fd..00000000 --- a/client/src/components/game.container.js +++ /dev/null @@ -1,48 +0,0 @@ -const { connect } = require('preact-redux'); - -const actions = require('../actions'); - -const Game = require('./game'); - -const addState = connect( - function receiveState(state) { - const { ws, game, account, activeSkill, activeIncoming } = state; - - function selectSkillTarget(targetTeamId) { - if (activeSkill) { - return ws.sendGameSkill(game.id, activeSkill.crypId, targetTeamId, activeSkill.skill.skill); - } - return false; - } - - // intercept self casting skills - if (activeSkill && activeSkill.skill.self_targeting) { - ws.sendGameSkill(game.id, activeSkill.crypId, null, activeSkill.skill.skill); - } - - function selectIncomingTarget(crypId) { - if (activeIncoming) { - return ws.sendGameTarget(game.id, crypId, activeIncoming); - } - return false; - } - - return { game, account, activeSkill, activeIncoming, selectSkillTarget, selectIncomingTarget }; - }, - - function receiveDispatch(dispatch) { - function setActiveSkill(crypId, skill) { - dispatch(actions.setActiveSkill(crypId, skill)); - } - - function setActiveIncoming(skillId) { - dispatch(actions.setActiveIncoming(skillId)); - } - - - return { setActiveSkill, setActiveIncoming }; - } - -); - -module.exports = addState(Game); diff --git a/client/src/components/game.join.button.jsx b/client/src/components/game.join.button.jsx deleted file mode 100644 index 35c56555..00000000 --- a/client/src/components/game.join.button.jsx +++ /dev/null @@ -1,42 +0,0 @@ -const preact = require('preact'); -const { connect } = require('preact-redux'); - -const addState = connect( - (state) => { - const { ws, cryps } = state; - function sendGameJoin(gameId) { - return ws.sendGameJoin(gameId, [cryps[0].id]); - } - - return { account: state.account, sendGameJoin }; - }, -); - -function GameJoinButton({ account, sendGameJoin }) { - let gameId = ''; - - if (!account) return
...
; - - return ( -
-
- (gameId = e.target.value)} - /> -
-
- -
-
- ); -} - -module.exports = addState(GameJoinButton); diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx deleted file mode 100755 index c1944f18..00000000 --- a/client/src/components/game.jsx +++ /dev/null @@ -1,188 +0,0 @@ -const preact = require('preact'); -const key = require('keymaster'); -const Phaser = require('./phaser.container'); -const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R']; - -function GamePanel(props) { - const { - game, - activeSkill, - activeIncoming, - setActiveSkill, - setActiveIncoming, - selectSkillTarget, - selectIncomingTarget, - account, - } = props; - - if (!game) return
...
; - - const otherTeams = game.teams.filter(t => t.id !== account.id); - - const playerTeam = game.teams.find(t => t.id === account.id); - - const incoming = game.stack.filter(s => s.target_team_id === playerTeam.id).map((inc) => { - key.unbind('1'); - key('1', () => setActiveIncoming(inc.id)); - return ( -
-
{JSON.stringify(inc)}
- -
- ); - }); - - function PlayerCrypCard(cryp) { - const skills = cryp.skills.map((skill, i) => { - const hotkey = SKILL_HOT_KEYS[i]; - key.unbind(hotkey); - key(hotkey, () => setActiveSkill(cryp.id, skill)); - - return ( - - ); - }); - - const effects = cryp.effects.map((effect, i) => ( -
{effect} for {effect.turns}T
- )); - - return ( -
selectIncomingTarget(cryp.id)} - className="tile is-vertical"> -
-
-
-

{cryp.name}

-

Level {cryp.lvl}

-
-
-
- -
-
- -
-
{cryp.hp.value} / {cryp.stamina.value} HP
- - -
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
- -
- {effects} - {skills} -
- ); - } - - function PlayerTeam(team) { - const cryps = team.cryps.map(c => PlayerCrypCard(c, setActiveSkill)); - - return ( -
- {cryps} -
- ); - } - - function OpponentCrypCard(cryp) { - const effects = cryp.effects.map((effect, i) => ( -
{effect.effect} for {effect.turns}T
- )); - - return ( -
-
-
-
-

{cryp.name}

-

Level {cryp.lvl}

-
-
-
- -
-
- -
-
{cryp.hp.value} / {cryp.stamina.value} HP
- - -
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
- - -
- {effects} -
- ); - } - - function OpponentTeam(team) { - const cryps = team.cryps.map(OpponentCrypCard); - return ( -
selectSkillTarget(team.id)} > - {cryps} -
- ); - } - - // style={{ "min-height": "100%" }} - function phaseText(phase) { - switch (phase) { - case 'Skill': - return 'Choose abilities'; - case 'Target': - return 'Block abilities'; - case 'Finish': - return 'Game over'; - } - } - - const logs = game.log.reverse().map((l, i) => (
{l}
)); - - return ( -
-
-
-
- -
-
- {PlayerTeam(playerTeam, setActiveSkill)} -
-
-
- {otherTeams.map(OpponentTeam)} -
-
- {incoming} -
-
-
-
-
-
{logs}
-
-
- ) -} - -module.exports = GamePanel; diff --git a/client/src/components/header.component.jsx b/client/src/components/header.component.jsx deleted file mode 100644 index 78f50ebe..00000000 --- a/client/src/components/header.component.jsx +++ /dev/null @@ -1,19 +0,0 @@ -// eslint-disable-next-line -const preact = require('preact'); - -const LoginContainer = require('./login.container'); - -function renderHeader() { - return ( -
-
-
-

cryps.gg

- -
-
-
- ); -} - -module.exports = renderHeader; diff --git a/client/src/components/item.list.container.js b/client/src/components/item.list.container.js deleted file mode 100644 index bfa8731d..00000000 --- a/client/src/components/item.list.container.js +++ /dev/null @@ -1,20 +0,0 @@ -const { connect } = require('preact-redux'); -const actions = require('../actions'); - -const ItemList = require('./item.list'); - -const addState = connect( - function receiveState(state) { - const { items } = state; - return { items }; - }, - function receiveDispatch(dispatch) { - function setActiveItem(id) { - dispatch(actions.setActiveItem(id)) - } - - return { setActiveItem }; - } -); - -module.exports = addState(ItemList); diff --git a/client/src/components/item.list.jsx b/client/src/components/item.list.jsx deleted file mode 100644 index b003b5b8..00000000 --- a/client/src/components/item.list.jsx +++ /dev/null @@ -1,37 +0,0 @@ -// eslint-disable-next-line -const preact = require('preact'); - -function ItemList({ items, setActiveItem }) { - if (!items) return
...
; - const itemPanels = items.map(item => ( - -
-
-
-
-

{item.action}

-

∞

-
-
-
- -
-
-
-
- -
- )); - return ( -
- {itemPanels} -
- ); -} - -module.exports = ItemList; diff --git a/client/src/components/login.component.jsx b/client/src/components/login.component.jsx deleted file mode 100755 index 2e0a3e62..00000000 --- a/client/src/components/login.component.jsx +++ /dev/null @@ -1,69 +0,0 @@ -// eslint-disable-next-line -const preact = require('preact'); - -function renderLogin({ account, submitLogin, submitRegister }) { - if (account) return
{JSON.stringify(account)}
; - - const details = { - name: '', - password: '', - }; - - return ( -
-
-

- (details.name = e.target.value)} - /> - - - - - - -

-
-
-

- (details.password = e.target.value)} - /> - - - -

-
-
-

- - - -

-
-
- ); -} - -module.exports = renderLogin; diff --git a/client/src/components/login.container.jsx b/client/src/components/login.container.jsx deleted file mode 100755 index d299732d..00000000 --- a/client/src/components/login.container.jsx +++ /dev/null @@ -1,18 +0,0 @@ -const { connect } = require('preact-redux'); - -const Login = require('./login.component'); - -const addState = connect( - (state) => { - const { ws } = state; - function submitLogin(name, password) { - return ws.sendAccountLogin(name, password); - } - function submitRegister(name, password) { - return ws.sendAccountRegister(name, password); - } - return { account: state.account, submitLogin, submitRegister }; - }, -); - -module.exports = addState(Login); diff --git a/client/src/components/navbar.jsx b/client/src/components/navbar.jsx deleted file mode 100644 index d45dc8e8..00000000 --- a/client/src/components/navbar.jsx +++ /dev/null @@ -1,47 +0,0 @@ -const preact = require('preact'); - -// components all the way down -const Icon = name => ( - - {name} - - -); - -// the css attribute name `class` is reserved in js -// so in react you have to call it `className` -function Navbar() { - const NAMES = ['Mashy', 'ntr']; - - return ( -
- - {NAMES.map(Icon)} -
- ); - // map is a function that is called on every element of an array - // so in this ^^ case it calls Icon('Mashy') which returns some jsx - // that gets put into the dom -} - -module.exports = Navbar; diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx deleted file mode 100755 index f0fd037a..00000000 --- a/client/src/components/passive.container.jsx +++ /dev/null @@ -1,56 +0,0 @@ -const preact = require('preact'); -const { connect } = require('preact-redux'); -const Phaser = require('phaser'); -const PhaserPassives = require('./passive.phaser'); - -const addState = connect( - function receiveState(state) { - const { - game, account, - } = state; - return { - game, account, - }; - } -); - -class PhaserInstance extends preact.Component { - constructor(props) { - super(props); - this.props = props; - } - - componentWillReceiveProps(nextProps) { - // code here will update passive allocation from state - } - - componentDidMount() { - // now mounted, can freely modify the DOM: - this.PhaserPassives = new PhaserPassives(); - const config = { - type: Phaser.DOM.FILL, - width: 1200, - height: 900, - parent: 'passives', - physics: { - default: 'arcade', - arcade: { - gravity: { y: 0 }, - }, - }, - scene: this.PhaserPassives, - }; - const game = new Phaser.Game(config); - game.canvas.addEventListener('mousedown', () => this.PhaserPassives.camPan(true)); - game.canvas.addEventListener('mouseup', () => this.PhaserPassives.camPan(false)); - - } - - render() { - return ( -
-
- ); - } -} -module.exports = addState(PhaserInstance); diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js deleted file mode 100755 index 0ba2fb38..00000000 --- a/client/src/components/passive.phaser.js +++ /dev/null @@ -1,126 +0,0 @@ -const Phaser = require('phaser'); -const PassiveNode = require('./passive.node'); -const passiveDataNode = require('./passive.data.node'); -const passiveDataEdge = require('./passive.data.edge'); - -// Passive tree generator - proof of concept visuals need work -// Mouse click hold to move, Q + E to zoom in and out -// Press 'A' to reset allocated passive nodes - -class PhaserPassives extends Phaser.Scene { - preload() { - this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png'); - this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg'); - } - - create() { - 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.passiveNodeData = passiveDataNode; - this.passiveEdgeData = passiveDataEdge; - this.addPassiveNodes(); - this.drawPassiveEdges(); - this.addCanmeraControl(); - } - - addPassiveNodes() { - this.passiveNodes = []; - this.passiveNodeData.forEach((n) => { - this.passiveNodes[n.id] = this.add.existing( - new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text) - ).setInteractive(); - }); - - 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 = ''; - } - }); - this.input.on('pointerout', (pointer, gameObjects) => { - if (gameObjects[0] instanceof PassiveNode) { - if (!gameObjects[0].alloc) gameObjects[0].clearTint(); - } - }); - this.input.on('pointerup', (pointer, gameObjects) => { - if (Math.abs(pointer.upX - pointer.downX) < 5 - && Math.abs(pointer.upY - pointer.downY) < 5) { - // Check cursor hasn't significantly moved during point allocation - // If panning and mouse release is on node it won't allocate - if (gameObjects[0] instanceof PassiveNode) { - gameObjects[0].allocate(); - } - } - }); - - this.input.keyboard.on('keydown_A', () => { - this.updatePassives(); // Will update nodes from state - }, 0, this); - } - - drawPassiveEdges() { - this.graphics.clear(); - this.passiveEdgeData.forEach((e) => { - const drawEdge = this.passiveNodeData.filter(n => ( - e[0] === n.id || e[1] === n.id - )); - if (drawEdge[0].alloc && drawEdge[1].alloc) { - this.graphics.lineStyle(10, 0xfff00f, 0.2); - } else { - this.graphics.lineStyle(2, 0xffffff, 0.2); - } - // console.log(drawEdge); - this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y); - }); - } - - 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, - }); - } - - updatePassives() { - this.passiveNodeData.forEach((n) => { - this.passiveNodes[n.id].alloc = false; - this.passiveNodes[n.id].updateNode(); - }); - // This function will be modified to just update from state - // State will update n.alloc instead of false - } - - camPan(bool) { - this.pan = bool; - } - - update(delta) { - this.controls.update(delta); - } -} - -module.exports = PhaserPassives; diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js deleted file mode 100755 index 98afa3be..00000000 --- a/client/src/components/phaser.combat.js +++ /dev/null @@ -1,74 +0,0 @@ -const Phaser = require('phaser'); -const fs = require('fs'); - -class PhaserCombat extends Phaser.Scene { - preload() { - /* Static Images */ - this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`); - this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`); - - this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg'); - this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png'); - this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png'); - this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png'); - this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png'); - this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png'); - this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png'); - - - /* Spritesheets */ - this.load.spritesheet({ - key: 'explosion', - url: 'http://labs.phaser.io/assets/sprites/explosion.png', - frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 }, - }); - } - - create() { - this.add.image(400, 300, 'sky');// Background image - this.createPlayers(); - this.createAnim(); - this.cursors = this.input.keyboard.createCursorKeys(); - this.combat = false; - } - - createPlayers() { - this.players = this.physics.add.staticGroup(); - const img = this.players.create(100, 300, 'alk'); - const imgTwo = this.players.create(500, 300, 'magmar'); - img.setScale(0.5); - imgTwo.setScale(0.5); - this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); - this.playerTwoHp = this.add.text(450, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); - this.loaded = true; - } - - createAnim() { - const config = { - key: 'explodeAnimation', - frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }), - frameRate: 20, - repeat: 0, - }; - this.anims.create(config); - } - - setPlayerOneHp(health) { - this.playerOneHp.text = health; - } - - setPlayerTwoHp(health) { - this.playerTwoHp.text = health; - } - - - explode(proj) { - this.proj.disableBody(true, true); - this.emitter.stop(); - const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation'); - sprite.setScale(3); - } -} -PhaserCombat.prototype.skills = require('./phaser.skills.js'); - -module.exports = PhaserCombat; diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx deleted file mode 100755 index 75460513..00000000 --- a/client/src/components/phaser.container.jsx +++ /dev/null @@ -1,67 +0,0 @@ -const preact = require('preact'); -const { connect } = require('preact-redux'); -const Phaser = require('phaser'); -const PhaserCombat = require('./phaser.combat'); - -const addState = connect( - function receiveState(state) { - const { - game, activeSkill, activeIncoming, account, - } = state; - return { - game, activeSkill, activeIncoming, account, - }; - } -); - -class PhaserInstance extends preact.Component { - constructor(props) { - super(props); - this.props = props; - } - - componentWillReceiveProps(nextProps) { - const playerTeam = nextProps.game.teams.find(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) { - 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`); - - if (playerTeam.cryps[0].hp.value === 0) { - // this.PhaserCombat.skills('blast', 400, -150); - this.PhaserCombat.skills('chargeBall', 'green', 400, -250); - } else if (otherTeams[0].cryps[0].hp.value === 0) { - // this.PhaserCombat.skills('blast', 180, 150); - this.PhaserCombat.skills('chargeBall', 'green', 180, 250); - } - } - } - - componentDidMount() { - // now mounted, can freely modify the DOM: - this.PhaserCombat = new PhaserCombat(); - const config = { - type: Phaser.DOM.FILL, - width: 600, - height: 400, - parent: 'phaser-example', - physics: { - default: 'arcade', - arcade: { - gravity: { y: 0 }, - }, - }, - scene: this.PhaserCombat, - }; - const game = new Phaser.Game(config); - } - - render() { - return ( -
-
- ); - } -} -module.exports = addState(PhaserInstance); diff --git a/client/src/components/phaser.skills.js b/client/src/components/phaser.skills.js deleted file mode 100755 index 16b6b1c5..00000000 --- a/client/src/components/phaser.skills.js +++ /dev/null @@ -1,141 +0,0 @@ -// Skill function called by phaser combat -const Phaser = require('phaser'); - -function skills(skill, img, location, spd) { - if (this.combat) { - return; - } - this.combat = true; - const particles = this.add.particles(img); - - switch (skill) { - case 'blast': - this.proj = this.physics.add.image(-100, 300, 'proj'); - this.emitter = particles.createEmitter({ - speed: 25, - scale: { start: 1, end: 0 }, - blendMode: 'ADD', - }); - this.emitter.startFollow(this.proj); - this.physics.add.overlap(this.proj, this.players, this.explode, null, this); - this.proj.x = location; - this.proj.setVelocity(spd, 0); - break; - - case 'wall': - this.emitter = particles.createEmitter({ - x: location, - y: { min: 200, max: 350 }, - lifespan: 2000, - speedX: { min: spd, max: spd * 2 }, - scale: { start: 0.4, end: 0 }, - quantity: 4, - blendMode: 'ADD', - }); - this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this); - break; - - case 'spit': - if (location > 250) { - this.angleMin = 180; - this.angleMax = 220; - } else { - this.angleMin = 320; - this.angleMax = 360; - } - this.emitter = particles.createEmitter({ - x: location, - y: 300, - lifespan: 2000, - angle: { min: this.angleMin, max: this.angleMax }, - speed: spd * 2, - scale: { start: 0.4, end: 1 }, - gravityY: 250, - quantity: 4, - blendMode: 'ADD', - }); - this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this); - break; - case 'gravBomb': - this.well = particles.createGravityWell({ - x: 150, - y: 150, - power: 4, - gravity: 500, - }); - this.emitter = particles.createEmitter({ - x: 150, - y: 150, - lifespan: 1500, - speed: 1000, - scale: { start: 0.7, end: 1 }, - blendMode: 'ADD', - }); - this.time.delayedCall(1000, () => { - this.emitter.stop(); - this.well.active = false; - }, [], this); - break; - case 'gravBlast': - this.well = particles.createGravityWell({ - x: 400, - y: 300, - power: 4, - gravity: 500, - }); - this.emitter = particles.createEmitter({ - x: 400, - y: 300, - lifespan: 2000, - speed: 1000, - scale: { start: 0.7, end: 1 }, - blendMode: 'ADD', - bounds: { - x: 0, y: 250, w: 450, h: 150, - }, - }); - this.time.delayedCall(1000, () => { - this.emitter.stop(); - this.well.x = 100; - }, [], this); - this.time.delayedCall(3000, () => { - this.well.active = false; - }, [], this); - break; - case 'chargeBall': - - this.emitter = particles.createEmitter({ - x: -400, - y: -100, - lifespan: 1000, - moveToX: 450, - moveToY: 150, - scale: 0.75, - quantity: 4, - _frequency: 20, - blendMode: 'ADD', - emitZone: { source: new Phaser.Geom.Rectangle(0, 0, 1600, 700) }, - }); - this.emitter2 = particles.createEmitter({ - radial: false, - x: { min: 450, max: 50, steps: 256 }, - y: { min: 150, max: 300, steps: 256 }, - lifespan: 1000, - speedX: { min: 200, max: 400 }, - quantity: 4, - gravityY: 0, - scale: { start: 1.5, end: 0, ease: 'Power3' }, - blendMode: 'ADD', - active: false, - }); - this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this); - this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this); - this.time.delayedCall(3000, () => { this.emitter2.stop(); }, [], this); - break; - default: - break; - } -} - - -module.exports = skills; diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js index 4d3adea9..2a34a558 100644 --- a/client/src/scenes/cryp.list.js +++ b/client/src/scenes/cryp.list.js @@ -12,8 +12,6 @@ class CrypList extends Phaser.Scene { const cryps = this.registry.get('cryps'); this.graphics = this.add.graphics(); - this.graphics.originX = 0; - this.graphics.originY = 0; this.renderCryps(cryps); return true; } @@ -32,11 +30,17 @@ class CrypList extends Phaser.Scene { crypRow(this, cryp, i); }); + this.input.on('gameobjectup', this.clickHandler, this); + // seal the boxes in and stop rerendering them this.graphics.generateTexture(); return true; } + + clickHandler(pointer, crypBox) { + this.registry.set('activeCryp', crypBox.cryp); + } } module.exports = CrypList; diff --git a/client/src/scenes/cryp.page.js b/client/src/scenes/cryp.page.js new file mode 100644 index 00000000..4e7ec3f0 --- /dev/null +++ b/client/src/scenes/cryp.page.js @@ -0,0 +1,55 @@ +const Phaser = require('phaser'); + +const ROW_WIDTH = 400; +const ROW_HEIGHT = 200; +const ROW_FILL = 0x888888; + +const TOP_MARGIN = 50; +const ROW_MARGIN = 50; +const TEXT_MARGIN = 24; + +const xPos = i => 0; +const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN; + +function crypSkill(scene, skill, i) { + scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }); + return true; +} + + +class CrypPage extends Phaser.Scene { + constructor() { + super({ key: 'CrypPage', active: true }); + } + + create() { + this.registry.events.on('changedata', this.updateData, this); + + const cryp = this.registry.get('activeCryp'); + this.graphics = this.add.graphics(); + + this.renderCryp(cryp); + return true; + } + + updateData(parent, key, data) { + if (key === 'activeCryp') { + return this.scene.restart(); + } + return true; + } + + renderCryp(cryp) { + if (!cryp) return true; + + this.add.text(500, 500, cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }); + + cryp.skills.forEach((skill, i) => crypSkill(this, skill, i)); + + // seal the boxes in and stop rerendering them + this.graphics.generateTexture(); + return true; + } +} + +module.exports = CrypPage; diff --git a/client/src/scenes/cryp.row.js b/client/src/scenes/cryp.row.js index 514c57dd..360d9887 100644 --- a/client/src/scenes/cryp.row.js +++ b/client/src/scenes/cryp.row.js @@ -15,12 +15,15 @@ function crypRow(list, cryp, i) { const X_ORIGIN = xPos(i); const Y_ORIGIN = yPos(i); - list.graphics.fillStyle(ROW_FILL * Math.random(), 1.0); - list.graphics.fillRect(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT); + const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random()) + .setInteractive() + .setOrigin(0); + + row.cryp = cryp; list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }); list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }); return true; } -module.exports = crypRow; +module.exports = crypRow; \ No newline at end of file diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js index 79bddaf9..5981e930 100644 --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -1,6 +1,7 @@ const Phaser = require('phaser'); const CrypList = require('./cryp.list'); +const CrypPage = require('./cryp.page'); const Menu = require('./menu'); // const Passives = require('./passives'); @@ -22,6 +23,7 @@ function renderCryps(store) { scene: [ Menu, CrypList, + CrypPage, ], };