diff --git a/client/package.json b/client/package.json index 2182bf77..1b7ef7c6 100644 --- a/client/package.json +++ b/client/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "start": "parcel watch index.html --out-dir /var/lib/mnml/public/current", - "anims": "parcel animations.html --host 0.0.0.0 --port 40080 --no-source-maps", + "anims": "parcel watch animations.html --out-dir /var/lib/mnml/public/current", "build": "parcel build index.html", "scss": "node-sass --watch assets/scss -o assets/styles", "lint": "eslint --fix --ext .jsx src/", diff --git a/client/src/animations.socket.jsx b/client/src/animations.socket.jsx index b1a10305..215c71ba 100644 --- a/client/src/animations.socket.jsx +++ b/client/src/animations.socket.jsx @@ -5,7 +5,7 @@ const eachSeries = require('async/eachSeries'); const actions = require('./actions'); const { TIMES } = require('./constants'); -const { getCombatSequence } = require('./utils'); +const animations = require('./animations.utils'); const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://mnml.gg/api/ws' : 'ws://localhost/api/ws'; @@ -20,46 +20,39 @@ function createSocket(store) { } function sendDevResolve(a, b, skill) { - send({ method: 'dev_game_resolve', params: { a, b, skill } }); + send(['DevResolve', { a, b, skill }]); } function onDevResolutions(newRes) { - const { game: currentGame } = store.getState(); - let id = 0; + const { game: currentGame, account } = store.getState(); return eachSeries(newRes, (r, cb) => { if (['Disable', 'TargetKo'].includes(r.event[0])) return cb(); - // Create sub events for combat animations - const sequence = getCombatSequence(r); - id += 1; - return eachSeries(sequence, (stages, sCb) => { - const stagedR = Object.create(r); - stagedR.sequence = sequence; - stagedR.stages = stages; - stagedR.id = id; + // convert server enum into anims keywords + // todo make serersideonly + const sequence = animations.getSequence(r); + const timeout = animations.getTime(sequence); + const anims = animations.getObjects(r, sequence, currentGame, account); - let timeout = 0; - if (stages.includes('START_SKILL') && stages.includes('END_SKILL')) { - timeout = TIMES.SOURCE_AND_TARGET_TOTAL_DURATION; - } else if (stages.includes('START_SKILL')) timeout = TIMES.SOURCE_DURATION_MS; - else if (stages.includes('END_SKILL')) timeout = TIMES.TARGET_DURATION_MS; - else if (stages.includes('POST_SKILL')) timeout = TIMES.POST_SKILL_DURATION_MS; - store.dispatch(actions.setResolution(stagedR)); + console.log(sequence, timeout, anims); - return setTimeout(sCb, timeout); - }, err => { - if (err) console.error(err); - store.dispatch(actions.setAvatarAnimation({ id, source: false, target: false })); - // Finished this resolution - return cb(); - }); + store.dispatch(actions.setAnimSource(anims.animSource)); + store.dispatch(actions.setAnimTarget(anims.animTarget)); + return setTimeout(cb, timeout); + + // return setTimeout(sCb, timeout); + // }, err => { + // if (err) console.error(err); + // // Clear the anim classes + // store.dispatch(actions.setResolution(null)); + // // store.dispatch(actions.setAvatarAnimation({ id, source: false, target: false })); + // // Finished this resolution small delay for reset + // return setTimeout(cb, 5); + // }); }, err => { if (err) return console.error(err); - store.dispatch(actions.setAvatarAnimation({ id: -1, source: false, target: false })); - store.dispatch(actions.setResolution(null)); - // stop skipping resolutions - store.dispatch(actions.setSkip(false)); - // update the game + store.dispatch(actions.setAnimSource(null)); + store.dispatch(actions.setAnimTarget(null)); store.dispatch(actions.setGame(currentGame)); return true; }); @@ -75,8 +68,13 @@ function createSocket(store) { // decode binary msg from server const blob = new Uint8Array(event.data); const res = cbor.decode(blob); + // if (res.err) return errHandler(res.err); + const [msgType, params] = res; - if (!handlers[msgType]) return false; + if (msgType !== 'Pong') console.log(res); + + // check for error and split into response type and data + if (!handlers[msgType]) return console.error(`${msgType} handler missing`); return handlers[msgType](params); } diff --git a/client/src/components/construct.jsx b/client/src/components/construct.jsx index eddaacf5..f8ec172b 100644 --- a/client/src/components/construct.jsx +++ b/client/src/components/construct.jsx @@ -36,28 +36,38 @@ class ConstructAvatar extends Component { } componentDidMount() { - this.idle = idleAnimation(this.props.construct.id); - this.animations.push(this.idle); - } + const { animSource, animTarget, construct } = this.props; + + const isSource = animSource && animSource.constructId === construct.id; + const isTarget = animTarget && animTarget.constructId === construct.id; + + console.log(isSource, isTarget); + + if (!isSource || !isTarget) { + return this.animations.push(idleAnimation(construct.id)); + } - componentWillReceiveProps({ animSource, animTarget }) { const avatarAnim = () => { - if (animSource && animSource.constructId === this.props.construct.id) { + console.log(isSource); + if (isSource) { return sourceCast(animSource.constructId, animSource.direction); } // if (!animTarget) return false; // match(animTarget.skill, [ - // ['banish', () => banish(this.props.construct.id)], + // ['banish', () => banish(construct.id)], // ['invert', () => invert(this.props.construct.id)], // ]); }; const anim = avatarAnim(); if (anim) { - this.idle.pause(); + console.log(anim); this.animations.push(anim); - anim.finished.then(this.idle.play); + anim.finished.then(() => { + console.log('anim finished'); + return this.animations.push(idleAnimation(construct.id)); + }); } return true; diff --git a/client/src/test.game.js b/client/src/test.game.js index c36174ed..e17cb8e0 100644 --- a/client/src/test.game.js +++ b/client/src/test.game.js @@ -35,6 +35,7 @@ function testGame(uuid) { "constructs": [ { "id": "82e8b940-411c-42a1-8fc2-484ec7207734", + "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1", "red_damage": { "base": 256, @@ -108,6 +109,7 @@ function testGame(uuid) { }, { "id": "96ca4a0e-fed2-4ea2-9ec5-ae308f8dde4b", + "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1", "red_damage": { "base": 256, @@ -184,6 +186,7 @@ function testGame(uuid) { { "id": "ea302c35-d326-475c-a867-8ad5b162165a", "account": "8552e0bf-340d-4fc8-b6fc-3d56b68fe2a1", + "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", "red_damage": { "base": 256, "value": Math.floor(Math.random() * 10000), @@ -299,6 +302,7 @@ function testGame(uuid) { { "id": "3aa0f284-1e1b-4054-b38a-b2d50db471bd", "account": uuid, + "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", "red_damage": { "base": 256, "value": Math.floor(Math.random() * 10000), @@ -385,6 +389,7 @@ function testGame(uuid) { { "id": "50e5d94e-8ebe-495c-a916-3eb509ff4683", "account": uuid, + "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", "red_damage": { "base": 256, "value": Math.floor(Math.random() * 10000), @@ -465,6 +470,7 @@ function testGame(uuid) { { "id": "5d49fe65-27f0-4372-90a3-334ef906a0f5", "account": uuid, + "img": "8446736d-d682-4588-b8a0-5b7ba53bdb55", "red_damage": { "base": 256, "value": Math.floor(Math.random() * 10000),