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

consolidate construct imgs

Browse Source
This commit is contained in:
ntr 2019-06-03 18:57:50 +10:00
parent 9bb251724f
commit 43df4ebe48
10 changed files with 14 additions and 359 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/assets/styles/game.css
View File

@ -78,10 +78,8 @@
grid-area: target;
height: 100%;
width: 100%;
}
.game .targeting-arrows {
stroke-width: 2px;
stroke: whitesmoke;
}
.game-construct .targeting {

17
client/src/components/game.construct.jsx
View File

@ -3,18 +3,13 @@ const preact = require('preact');
const range = require('lodash/range');
const actions = require('../actions');
const { TARGET_COLOURS: COLOURS, STATS, eventClasses, getCombatText, ConstructAvatar } = require('../utils');
const { STATS, eventClasses, getCombatText } = require('../utils');
const { ConstructAvatar } = require('./construct');
const { animationDivs } = require('../animations');
const shapes = require('./shapes');
const SkillBtn = require('./skill.btn');
const TARGET_COLOURS = [
COLOURS.PINK,
COLOURS.LBLUE,
COLOURS.GREEN,
];
const addState = connect(
function receiveState(state) {
const {
@ -72,7 +67,6 @@ function GameConstruct(props) {
</div>
));
const skills = range(0, 3)
.map(j => <SkillBtn key={j} construct={construct} i={j} j={i} />);
@ -92,13 +86,6 @@ function GameConstruct(props) {
const playerTeam = game.players.find(t => t.id === account.id);
const playerTeamIds = playerTeam.constructs.map(c => c.id);
const targeting = game.stack
.filter(s => playerTeamIds.includes(s.source_construct_id) && s.target_construct_id === construct.id)
.map((s, i) => {
const highlightColour = TARGET_COLOURS[playerTeamIds.indexOf(s.source_construct_id)];
return <h3 key={i} style={{ color: highlightColour}} >{`< ${s.skill}`}</h3>
});
const anim = (
<div className="anim-container">
{animationDivs(combatClass)}

5
client/src/components/instance.constructs.jsx
View File

@ -3,7 +3,8 @@ const preact = require('preact');
const range = require('lodash/range');
const shapes = require('./shapes');
const { STATS, instanceConstruct } = require('../utils');
const { STATS } = require('../utils');
const { ConstructAvatar } = require('./construct');
const actions = require('../actions');
const addState = connect(
@ -203,7 +204,7 @@ function Construct(props) {
return (
<div key={construct.id} className={constructClass} onClick={onClick} >
{instanceConstruct(construct.name, construct.id)}
<ConstructAvatar name={construct.name} id={construct.id} />
<h2 className="name" >{construct.name}</h2>
<div className="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
{skills}

5
client/src/components/list.jsx
View File

@ -1,7 +1,8 @@
const { connect } = require('preact-redux');
const preact = require('preact');
const { stringSort, NULL_UUID, COLOURS, ConstructAvatar } = require('./../utils');
const { stringSort, NULL_UUID, COLOURS } = require('./../utils');
const { ConstructImg } = require('./construct');
const actions = require('./../actions');
const InstanceCreateForm = require('./instance.create.form');
@ -114,7 +115,7 @@ function List(args) {
<div
key={construct.id}
className="menu-construct" >
<ConstructAvatar name={construct.name} id={construct.id} />
<ConstructImg name={construct.name} id={construct.id} />
<h2>{construct.name}</h2>
</div>
);

154
client/src/components/menu.component.jsx
View File

@ -1,154 +0,0 @@
const preact = require('preact');
const range = require('lodash/range');
const { NULL_UUID } = require('./../utils');
const { stringSort, constructAvatar } = require('./../utils');
const SpawnButton = require('./spawn.button');
const InstanceCreateForm = require('./instance.create.form');
const idSort = stringSort('id');
const COLOURS = [
'#a52a2a',
'#1FF01F',
'#3498db',
];
function Menu(args) {
const {
account,
constructs,
team,
setTeam,
sendInstanceState,
sendPlayerMmConstructsSet,
sendInstanceJoin,
sendInstanceList,
sendConstructSpawn,
instances,
} = args;
function instanceList() {
if (!instances) return <div>...</div>;
const instancePanels = instances.map(instance => {
const player = instance.players.find(p => p.id === account.id);
const scoreText = player
? `${player.score.wins} : ${player.score.losses}`
: '';
function instanceClick() {
if (!player) return sendInstanceJoin(instance);
return sendInstanceState(instance);
}
return (
<tr key={instance.id}
className="right"
onClick={instanceClick} >
<td>{instance.name}</td>
<td>{instance.players.length} / {instance.max_players}</td>
<td>{scoreText}</td>
</tr>
);
});
const instanceJoinHidden = !team.every(c => !!c);
// const mmSet = (
// <button
// className={'menu-instance-btn left'}
// disabled={instanceJoinHidden}
// onClick={() => sendPlayerMmConstructsSet()}>
// Set Matchmaking Team
// </button>
// );
return (
<div className="menu-instance-list" >
<table>
<thead>
<tr>
<th>instance name</th>
<th>players</th>
<th>status</th>
</tr>
</thead>
<tbody>
{instancePanels}
<tr className="right" onClick={() => sendInstanceList()}>
<td colSpan={3} >↺</td>
</tr>
</tbody>
</table>
<InstanceCreateForm />
</div>
);
}
function constructList() {
if (!constructs) return <div></div>;
// redux limitation + suggested workaround
// so much for dumb components
function selectConstruct(id) {
// remove
const i = team.findIndex(sid => sid === id);
if (i > -1) {
team[i] = null;
return setTeam(team);
}
// window insert
const insert = team.findIndex(j => j === null);
if (insert === -1) return setTeam([id, null, null]);
team[insert] = id;
return setTeam(team);
}
const constructPanels = constructs.sort(idSort).map(construct => {
const colour = team.indexOf(construct.id);
const selected = colour > -1;
const borderColour = selected ? COLOURS[colour] : '#000000';
return (
<div
key={construct.id}
className="menu-construct-ctr">
<div
className="menu-construct"
style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectConstruct(construct.id)} >
{constructAvatar(construct.name)}
<h2>{construct.name}</h2>
</div>
</div>
);
});
const spawnButtonsNum = constructs.length < 3
? (3 - constructs.length)
: 1;
const spawnButtons = range(spawnButtonsNum)
.map(i => <SpawnButton key={i} i={i} spawn={name => sendConstructSpawn(name)} />);
return (
<div className="menu-constructs">
{constructPanels}
{spawnButtons}
</div>
);
}
return (
<main className="menu">
{instanceList()}
</main>
);
}
module.exports = Menu;

60
client/src/components/menu.container.jsx
View File

@ -1,60 +0,0 @@
const { connect } = require('preact-redux');
const Menu = require('./menu.component');
const actions = require('./../actions');
const addState = connect(
function receiveState(state) {
const { ws, constructs, team, instances, account } = state;
function sendInstanceJoin(instance) {
if (team.length) {
return ws.sendInstanceJoin(instance.id, team);
}
return false;
}
function sendPlayerMmConstructsSet() {
if (team.length) {
return ws.sendPlayerMmConstructsSet(team);
}
return false;
}
function sendConstructSpawn(name) {
return ws.sendConstructSpawn(name);
}
function sendInstanceState(instance) {
return ws.sendInstanceState(instance.id);
}
function sendInstanceList() {
return ws.sendAccountInstances();
}
return {
account,
constructs,
team,
sendInstanceJoin,
sendInstanceState,
sendInstanceList,
sendConstructSpawn,
sendPlayerMmConstructsSet,
instances,
};
},
function receiveDispatch(dispatch) {
function setTeam(constructIds) {
dispatch(actions.setTeam(constructIds));
}
return {
setTeam,
};
}
);
module.exports = addState(Menu);

14
client/src/components/skill.btn.jsx
View File

@ -3,15 +3,6 @@ const { connect } = require('preact-redux');
const actions = require('../actions');
const { TARGET_COLOURS } = require('./../utils');
const TC_MAP = [
TARGET_COLOURS.PINK,
TARGET_COLOURS.LBLUE,
TARGET_COLOURS.GREEN,
];
const addState = connect(
function receiveState(state) {
const {
@ -40,8 +31,6 @@ function Skill(props) {
construct,
game,
i,
j,
mobile,
activeSkill,
setActiveSkill,
} = props;
@ -73,8 +62,6 @@ function Skill(props) {
? activeSkill.constructId === construct.id && activeSkill.skill === s.skill
: false;
const highlightColour = TC_MAP[j];
function onClick(e) {
e.stopPropagation();
return setActiveSkill(construct.id, s.skill);
@ -85,7 +72,6 @@ function Skill(props) {
disabled={cdText || s.disabled || ko}
className={`construct-skill-btn ${(targeting || highlight) ? 'active' : ''}`}
type="submit"
style={ targeting ? { color: highlightColour } : false}
onClick={onClick}>
{s.skill} {cdText}
</button>

21
client/src/components/targeting.arrows.jsx
View File

@ -8,21 +8,12 @@ const addState = connect(
({ game, account, resolution }) => ({ game, account, resolution })
);
const { TARGET_COLOURS } = require('./../utils');
const TC_MAP = [
TARGET_COLOURS.PINK,
TARGET_COLOURS.LBLUE,
TARGET_COLOURS.GREEN,
];
class TargetSvg extends Component {
constructor() {
super();
this.state = { width: 3000, height: 1000 };
this.onResize = throttle(() => {
console.warn('resize')
const svg = document.getElementById('targeting');
const { width, height } = svg.getBoundingClientRect();
this.setState({ width, height });
@ -46,8 +37,6 @@ class TargetSvg extends Component {
? playerTeam.constructs.findIndex(c => c.id === cast.target_construct_id)
: otherTeam.constructs.findIndex(c => c.id === cast.target_construct_id);
const stroke = TC_MAP[source];
const sourceY = height;
const sourceX = (source * width / 3) + width / 6;
const targetX = (target * width / 3) + width / 6 + (defensive ? width / 24 : 0);
@ -66,10 +55,7 @@ class TargetSvg extends Component {
L${targetX + (width * 0.005)},${height * 0.875}
`;
return <path
style={ { stroke} }
d={path}
/>;
return <path d={path} />;
}
const path = `
@ -84,10 +70,7 @@ class TargetSvg extends Component {
`;
return <path
style={ { stroke} }
d={path}
/>;
return <path d={path} />;
}
const arrows = resolution

5
client/src/components/team.jsx
View File

@ -4,8 +4,9 @@ const range = require('lodash/range');
const actions = require('./../actions');
const { COLOURS } = require('./../utils');
const { stringSort, ConstructAvatar } = require('./../utils');
const { stringSort } = require('./../utils');
const SpawnButton = require('./spawn.button');
const { ConstructImg } = require('./construct');
const idSort = stringSort('id');
@ -86,7 +87,7 @@ function Team(args) {
className="menu-construct"
style={ { 'border-color': borderColour || 'whitesmoke' } }
onClick={() => selectConstruct(construct.id)} >
<ConstructAvatar name={construct.name} id={construct.id} />
<ConstructImg name={construct.name} id={construct.id} />
<h2>{construct.name}</h2>
</div>
);

88
client/src/utils.jsx
View File

@ -1,8 +1,5 @@
const preact = require('preact');
const { Component } = require('preact');
const get = require('lodash/get');
const anime = require('animejs').default;
const shapes = require('./components/shapes');
@ -36,86 +33,6 @@ const numSort = (k, desc) => {
};
};
const genAvatar = name => {
let hash = 0;
if (name.length === 0) return hash;
// Probs don't need to hash using the whole string
for (let i = 0; i < name.length; i += 1) {
const chr = name.charCodeAt(i);
hash = ((hash << 5) - hash) + chr;
hash = hash % 10000;
}
return `${hash}`;
};
function requestAvatar(name) {
const id = genAvatar(name);
const req = new Request(`/assets/molecules/${id}.svg`);
return fetch(req)
.then(res => res.text())
.then(svg => svg);
}
const animations = {};
function animateConstruct(id) {
if (animations[id]) return false;
animations[id] = true;
const duration = anime.random(2000, 18000);
const target = document.getElementById(id);
return anime({
targets: target,
translateX: () => anime.random(-20, 20),
translateY: () => anime.random(0, -40),
rotate: () => anime.random(-15, 15),
duration,
direction: 'alternate',
easing: 'linear',
loop: true,
complete: () => animations[id] = false,
});
}
function clearAnimation(id) {
animations[id] = false;
}
class ConstructAvatar extends Component {
render() {
return (
<div
className="avatar"
id={this.props.id}
style={{'background-image': `url(/molecules/${genAvatar(this.props.name)}.svg)`}}
/>
);
}
componentDidMount() {
animateConstruct(this.props.id);
}
componentWillUnmount() {
clearAnimation(this.props.id);
}
}
function instanceConstruct(name, id) {
// useEffect(() => {
// animateConstruct(id);
// return () => clearAnimation(id);
// });
setTimeout(() => animateConstruct(id), 50);
return (
<div
className="avatar"
id={id}
style={{'background-image': `url(/molecules/${genAvatar(name)}.svg)`}}
/>
);
}
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
const STATS = {
@ -422,14 +339,9 @@ const TARGET_COLOURS = {
};
module.exports = {
animateConstruct,
stringSort,
convertItem,
numSort,
genAvatar,
ConstructAvatar,
instanceConstruct,
requestAvatar,
eventClasses,
getCombatSequence,
getCombatText,