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

avatars loading

Browse Source
This commit is contained in:
ntr 2019-07-09 17:05:37 +10:00
parent 6696809d1e
commit cfd5e7d3f7
5 changed files with 11 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/construct.jsx
View File

@ -8,20 +8,6 @@ const idleAnimation = require('./anims/idle');
const invert = require('./anims/invert'); const invert = require('./anims/invert');
const sourceCast = require('./anims/source.cast'); const sourceCast = require('./anims/source.cast');
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}`;
};
const addState = connect( const addState = connect(
function receiveState(state) { function receiveState(state) {
const { avatarAnimation } = state; const { avatarAnimation } = state;
@ -38,33 +24,32 @@ class ConstructAvatar extends Component {
this.animId = 0; this.animId = 0;
this.source = false; this.source = false;
this.animations = []; this.animations = [];
this.avatar = genAvatar(props.name);
} }
render() { render() {
return ( return (
<div <div
class="avatar" class="avatar"
id={this.props.id} id={this.props.construct.id}
style={{ 'background-image': `url(/molecules/${this.avatar}.svg)` }} style={{ 'background-image': `url(/imgs/${this.props.construct.img}.svg)` }}
/> />
); );
} }
componentDidMount() { componentDidMount() {
this.idle = idleAnimation(this.props.id); this.idle = idleAnimation(this.props.construct.id);
this.animations.push(this.idle); this.animations.push(this.idle);
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (nextProps.avatarAnimation.id === -1) this.animId = 0; // The current set of resolutions ended reset to 0 if (nextProps.avatarAnimation.id === -1) this.animId = 0; // The current set of resolutions ended reset to 0
if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.id) { if (nextProps.avatarAnimation.id !== this.animId && nextProps.avatarAnimation.animTargetId === this.props.construct.id) {
this.animId = nextProps.avatarAnimation.id; this.animId = nextProps.avatarAnimation.id;
const selectAnim = () => { const selectAnim = () => {
switch (nextProps.avatarAnimation.type) { switch (nextProps.avatarAnimation.type) {
case 'banish': return banish(this.props.id); case 'banish': return banish(this.props.construct.id);
case 'invert': return invert(this.props.id); case 'invert': return invert(this.props.construct.id);
case 'sourceCast': return sourceCast(this.props.id, nextProps.avatarAnimation.params); case 'sourceCast': return sourceCast(this.props.construct.id, nextProps.avatarAnimation.params);
default: return null; default: return null;
} }
}; };

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

@ -103,7 +103,7 @@ function GameConstruct(props) {
<h3 class="name"> {construct.name} </h3> <h3 class="name"> {construct.name} </h3>
{crypSkills} {crypSkills}
<div class="stats"> {stats} </div> <div class="stats"> {stats} </div>
<ConstructAvatar name={construct.name} id={construct.id} /> <ConstructAvatar construct={construct} />
{combatAnim} {combatAnim}
<div class={'combat-text'}> {combatText} </div> <div class={'combat-text'}> {combatText} </div>
<div class="effects"> {effects} </div> <div class="effects"> {effects} </div>

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

@ -201,7 +201,7 @@ function Construct(props) {
return ( return (
<div key={construct.id} class="instance-construct" onClick={onClick} > <div key={construct.id} class="instance-construct" onClick={onClick} >
<ConstructAvatar name={construct.name} id={construct.id} /> <ConstructAvatar construct={construct} />
<h2 class="name" >{construct.name}</h2> <h2 class="name" >{construct.name}</h2>
<div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} > <div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
{skills} {skills}

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

@ -121,10 +121,7 @@ function List(args) {
style={ mtxActive ? { cursor: 'pointer' } : {}} style={ mtxActive ? { cursor: 'pointer' } : {}}
onClick={() => selectConstruct(construct.id)} onClick={() => selectConstruct(construct.id)}
class="menu-construct" > class="menu-construct" >
<ConstructAvatar <ConstructAvatar construct={construct} />
name={construct.name}
id={construct.id}
/>
<h2>{construct.name}</h2> <h2>{construct.name}</h2>
</div> </div>
); );

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

@ -105,7 +105,7 @@ function Team(args) {
</h2> </h2>
<button onClick={e => deleteClick(e)} >&#10060;</button> <button onClick={e => deleteClick(e)} >&#10060;</button>
</div> </div>
<ConstructAvatar name={construct.name} id={construct.id} /> <ConstructAvatar construct={construct} />
</div> </div>
); );
}); });