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

combat events init

Browse Source
This commit is contained in:
ntr
2019-04-12 16:09:00 +10:00
parent c0303c5b61
commit 4a081d6ec1
18 changed files with 143 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/cryps.css
+26
View File
@@ -501,6 +501,11 @@ header {
border: 1px solid whitesmoke;
margin-bottom: 1em;
justify-content: center;
transition-property: all;
transition-duration: 0.5s;
transition-delay: 0;
transition-timing-function: ease;
}
.cryp-box-top {
@@ -584,6 +589,27 @@ header {
.cryp-box.ko {
animation: none;
opacity: 0.5;
filter: grayscale(100%);
}
.cryp-box.unfocus {
filter: blur(5px);
}
.cryp-box.red-damage {
filter: drop-shadow(0 0 0.2em red);
border-width: 5px;
color: red;
border-color: red;
}
.red-damage button {
border: 3px solid red;
color: red;
}
.red-damage .stats {
border-top: 3px solid red;
}
.team-player {
client/src/components/cryp.list.component.jsx
-105
View File
@@ -1,105 +0,0 @@
const preact = require('preact');
const range = require('lodash/range');
const { stringSort } = require('./../utils');
const molecule = require('./molecule');
const SpawnButton = require('./spawn.button');
const idSort = stringSort('id');
const COLOURS = [
'#a52a2a',
'#1FF01F',
'#3498db',
];
function CrypList(args) {
const {
cryps,
selectedCryps,
setSelectedCryps,
sendPlayerMmCrypsSet,
sendInstanceJoin,
sendCrypSpawn
} = args;
if (!cryps) return <div></div>;
// redux limitation + suggested workaround
// so much for dumb components
function selectCryp(id) {
// remove
const i = selectedCryps.findIndex(sid => sid === id);
if (i > -1) {
selectedCryps[i] = null;
return setSelectedCryps(selectedCryps);
}
// window insert
const insert = selectedCryps.findIndex(j => j === null);
if (insert === -1) return setSelectedCryps([id, null, null]);
selectedCryps[insert] = id;
return setSelectedCryps(selectedCryps);
}
const instanceJoinHidden = !selectedCryps.every(c => !!c);
const mmSet = (
<button
className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
disabled={instanceJoinHidden}
onClick={() => sendPlayerMmCrypsSet()}>
Set Matchmaking Team
</button>
);
const instanceJoin = (
<button
className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
disabled={instanceJoinHidden}
onClick={() => sendInstanceJoin()}>
Join New Instance
</button>
);
const crypPanels = cryps.sort(idSort).map(cryp => {
const colour = selectedCryps.indexOf(cryp.id);
const selected = colour > -1;
const borderColour = selected ? COLOURS[colour] : '#000000';
return (
<div
key={cryp.id}
className="menu-cryp-ctr">
<div
className="menu-cryp"
style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectCryp(cryp.id)} >
<figure className="img">
{molecule}
</figure>
<h2>{cryp.name}</h2>
</div>
</div>
);
});
const spawnButtonsNum = cryps.length < 3
? (3 - cryps.length)
: 1;
const spawnButtons = range(spawnButtonsNum)
.map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
return (
<div className="menu-cryps">
{mmSet}
{instanceJoin}
{crypPanels}
{spawnButtons}
</div>
);
}
module.exports = CrypList;
client/src/components/cryp.list.container.jsx
-65
View File
@@ -1,65 +0,0 @@
const { connect } = require('preact-redux');
const CrypList = require('./cryp.list.component');
const actions = require('./../actions');
const addState = connect(
function receiveState(state) {
const { ws, cryps, selectedCryps, instances } = state;
function sendInstanceJoin() {
if (selectedCryps.length) {
return ws.sendInstanceJoin(selectedCryps);
}
return false;
}
function sendPlayerMmCrypsSet() {
if (selectedCryps.length) {
return ws.sendPlayerMmCrypsSet(selectedCryps);
}
return false;
}
function sendCrypSpawn(name) {
return ws.sendCrypSpawn(name);
}
return { cryps, selectedCryps, sendInstanceJoin, sendCrypSpawn, sendPlayerMmCrypsSet };
},
function receiveDispatch(dispatch) {
function setSelectedCryps(crypIds) {
dispatch(actions.setSelectedCryps(crypIds));
}
function setActiveInstance(instance) {
dispatch(actions.setInstance(instance));
}
return {
setSelectedCryps,
setActiveInstance,
};
}
);
module.exports = addState(CrypList);
function sendCrypsSet() {
console.log('set crypos');
// return ws.sendGamePvp(crypIds);
}
function sendInstanceJoin() {
if (selectedCryps.length) {
return ws.sendInstanceJoin(selectedCryps);
}
return false;
}
return { instances, sendCrypsSet, sendInstanceJoin };
},
client/src/components/game.component.jsx
+13 -2
View File
@@ -140,6 +140,11 @@ function GamePanel(props) {
function Cryp(cryp) {
const ko = cryp.green_life.value === 0 ? 'ko' : '';
const unfocus = () => {
if (!resolution) return false;
if (cryp.id === resolution.source.id || cryp.id === resolution.target.id) return false;
return 'unfocus';
};
const skills = range(0, 3).map(i => Skill(cryp, i));
@@ -161,7 +166,7 @@ function GamePanel(props) {
key={cryp.id}
style={ activeSkill ? { cursor: 'pointer' } : {}}
onClick={onClick}
className={`cryp-box ${ko}`} >
className={`cryp-box ${ko} ${unfocus()}`} >
<div className="cryp-box-top">
<figure
className="img"
@@ -193,6 +198,12 @@ function GamePanel(props) {
function OpponentCryp(cryp, i) {
const ko = cryp.green_life.value === 0 ? 'ko' : '';
const unfocus = () => {
if (!resolution) return false;
if (cryp.id === resolution.source.id || cryp.id === resolution.target.id) return false;
return 'unfocus';
};
const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => (
<figure key={j} alt={s.stat}>
{s.svg(`stat-icon ${s.colour}`)}
@@ -203,7 +214,7 @@ function GamePanel(props) {
return (
<div
key={i}
className={`cryp-box ${ko}`}
className={`cryp-box ${ko} ${unfocus()}`}
style={ activeSkill ? { cursor: 'pointer' } : {}}
onClick={() => selectSkillTarget(cryp.id)} >
<div className="cryp-box-top">
client/src/components/game.container.jsx
-5
View File
@@ -1,13 +1,8 @@
// import 'particles.js/particles';
const { connect } = require('preact-redux');
const actions = require('../actions');
const Game = require('./game.component');
// const config = require('./particles.config');
// const particlesJS = window.particlesJS;
const addState = connect(
function receiveState(state) {
client/src/components/info.component.jsx
+1 -1
View File
@@ -1,7 +1,7 @@
const preact = require('preact');
const range = require('lodash/range');
const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./constants');
const { ITEMS: { SKILLS, COLOURS, SPECS: SPEC_CONSTANT } } = require('./../constants');
const { COLOUR_ICONS, STATS, SPECS } = require('../utils');
function Info(args) {
client/src/components/instance.list.component.jsx
-131
View File
@@ -1,131 +0,0 @@
const preact = require('preact');
const range = require('lodash/range');
const { stringSort, NULL_UUID } = require('./../utils');
const molecule = require('./molecule');
const SpawnButton = require('./spawn.button');
const idSort = stringSort('id');
const COLOURS = [
'#a52a2a',
'#1FF01F',
'#3498db',
];
function CrypList(args) {
const {
cryps,
selectedCryps,
setSelectedCryps,
sendPlayerMmCrypsSet,
sendInstanceJoin,
sendCrypSpawn
} = args;
if (!cryps) return <div></div>;
// redux limitation + suggested workaround
// so much for dumb components
function selectCryp(id) {
// remove
const i = selectedCryps.findIndex(sid => sid === id);
if (i > -1) {
selectedCryps[i] = null;
return setSelectedCryps(selectedCryps);
}
// window insert
const insert = selectedCryps.findIndex(j => j === null);
if (insert === -1) return setSelectedCryps([id, null, null]);
selectedCryps[insert] = id;
return setSelectedCryps(selectedCryps);
}
const instanceJoinHidden = !selectedCryps.every(c => !!c);
const mmSet = (
<button
className={`menu-instance-btn full left ${instanceJoinHidden ? 'hidden' : ''}`}
disabled={instanceJoinHidden}
onClick={() => sendPlayerMmCrypsSet()}>
Set Matchmaking Team
</button>
);
const instanceJoin = (
<button
className={`menu-instance-btn full right ${instanceJoinHidden ? 'hidden' : ''}`}
disabled={instanceJoinHidden}
onClick={() => sendInstanceJoin()}>
Join New Instance
</button>
);
const crypPanels = cryps.sort(idSort).map(cryp => {
const colour = selectedCryps.indexOf(cryp.id);
const selected = colour > -1;
const borderColour = selected ? COLOURS[colour] : '#000000';
return (
<div
key={cryp.id}
className="menu-cryp-ctr">
<div
className="menu-cryp"
style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectCryp(cryp.id)} >
<figure className="img">
{molecule}
</figure>
<h2>{cryp.name}</h2>
</div>
</div>
);
});
const spawnButtonsNum = cryps.length < 3
? (3 - cryps.length)
: 1;
const spawnButtons = range(spawnButtonsNum)
.map(i => <SpawnButton key={i} i={i} spawn={name => sendCrypSpawn(name)} />);
return (
<div className="menu-cryps">
{mmSet}
{instanceJoin}
{crypPanels}
{spawnButtons}
</div>
);
}
function instanceList({ instances, setActiveInstance }) {
if (!instances) return <div>...</div>;
const instancePanels = instances.map(instance => {
const globalInstance = instance.instance === NULL_UUID;
const name = globalInstance
? 'Global Matchmaking'
: `${instance.instance.substring(0, 5)} | ${instance.score.wins} : ${instance.score.losses}`;
return (
<button
className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
key={instance.id}
onClick={() => setActiveInstance(instance)}>
{name}
</button>
);
});
return (
<section className="menu-instance-list" >
{instancePanels}
</section>
);
}
module.exports = instanceList;
client/src/components/instance.list.container.jsx
-35
View File
@@ -1,35 +0,0 @@
const { connect } = require('preact-redux');
const actions = require('../actions');
const InstanceList = require('./instance.list.component');
const addState = connect(
function receiveState(state) {
const { ws, selectedCryps, instances } = state;
function sendCrypsSet() {
console.log('set crypos');
// return ws.sendGamePvp(crypIds);
}
function sendInstanceJoin() {
if (selectedCryps.length) {
return ws.sendInstanceJoin(selectedCryps);
}
return false;
}
return { instances, sendCrypsSet, sendInstanceJoin };
},
function receiveDispatch(dispatch) {
function setActiveInstance(instance) {
dispatch(actions.setInstance(instance));
}
return { setActiveInstance };
}
);
module.exports = addState(InstanceList);
client/src/components/menu.component.jsx
+2 -2
View File
@@ -20,7 +20,7 @@ function Menu(args) {
cryps,
selectedCryps,
setSelectedCryps,
setActiveInstance,
sendPlayerState,
sendPlayerMmCrypsSet,
sendInstanceJoin,
sendCrypSpawn,
@@ -40,7 +40,7 @@ function Menu(args) {
<button
className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
key={instance.id}
onClick={() => setActiveInstance(instance)}>
onClick={() => sendPlayerState(instance)}>
{name}
</button>
);
client/src/components/menu.container.jsx
+5 -5
View File
@@ -25,10 +25,15 @@ const addState = connect(
return ws.sendCrypSpawn(name);
}
function sendPlayerState(instance) {
return ws.sendPlayerState(instance.instance);
}
return {
cryps,
selectedCryps,
sendInstanceJoin,
sendPlayerState,
sendCrypSpawn,
sendPlayerMmCrypsSet,
instances,
@@ -40,13 +45,8 @@ const addState = connect(
dispatch(actions.setSelectedCryps(crypIds));
}
function setActiveInstance(instance) {
dispatch(actions.setInstance(instance));
}
return {
setSelectedCryps,
setActiveInstance,
};
}
);
client/src/components/constants.jsx → client/src/constants.jsx
+4
View File
@@ -1,4 +1,8 @@
module.exports = {
TIMES: {
RESOLUTION_TIME_MS: 2000,
},
ITEMS: {
SKILLS: {
Amplify: {
client/src/events.jsx
+2 -1
View File
@@ -2,6 +2,7 @@ const toast = require('izitoast');
const eachSeries = require('async/eachSeries');
const actions = require('./actions');
const { TIMES } = require('./constants');
function registerEvents(store) {
function setCryps(cryps) {
@@ -23,7 +24,7 @@ function registerEvents(store) {
const newRes = game.resolved.slice(currentGame.resolved.length);
return eachSeries(newRes, (r, cb) => {
store.dispatch(actions.setResolution(r));
return setTimeout(cb, 500);
return setTimeout(cb, TIMES.RESOLUTION_TIME_MS);
}, err => {
if (err) return console.error(err);
store.dispatch(actions.setResolution(null));
client/src/utils.jsx
+54
View File
@@ -97,6 +97,60 @@ const COLOUR_ICONS = {
green: { colour: 'green', caption: 'green', svg: shapes.square },
};
function eventClasses(resolution) {
const [type, event] = resolution.event;
if (type === 'Ko') {
return 'ko';
}
if (type === 'Disable') {
const { skill, disable } = event;
}
if (type === 'Immunity') {
const { skill, immunity } = event;
}
if (type === 'TargetKo') {
const { skill } = event;
}
if (type === 'Damage') {
const { skill, amount, mitigation, colour } = event;
}
if (type === 'Healing') {
const { skill, amount, overhealing } = event;
}
if (type === 'Inversion') {
const { skill } = event;
}
if (type === 'Reflection') {
const { skill } = event;
}
if (type === 'Effect') {
const { skill, effect, duration } = event;
}
if (type === 'Removal') {
const { effect } = event;
}
if (type === 'Recharge') {
const { skill, red, blue } = event;
}
if (type === 'Evasion') {
const { skill, evasion_rating } = event;
}
return false;
}
module.exports = {
stringSort,
numSort,