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 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(
function receiveState(state) {
const { avatarAnimation } = state;
@ -38,33 +24,32 @@ class ConstructAvatar extends Component {
this.animId = 0;
this.source = false;
this.animations = [];
this.avatar = genAvatar(props.name);
}
render() {
return (
<div
class="avatar"
id={this.props.id}
style={{ 'background-image': `url(/molecules/${this.avatar}.svg)` }}
id={this.props.construct.id}
style={{ 'background-image': `url(/imgs/${this.props.construct.img}.svg)` }}
/>
);
}
componentDidMount() {
this.idle = idleAnimation(this.props.id);
this.idle = idleAnimation(this.props.construct.id);
this.animations.push(this.idle);
}
componentWillReceiveProps(nextProps) {
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;
const selectAnim = () => {
switch (nextProps.avatarAnimation.type) {
case 'banish': return banish(this.props.id);
case 'invert': return invert(this.props.id);
case 'sourceCast': return sourceCast(this.props.id, nextProps.avatarAnimation.params);
case 'banish': return banish(this.props.construct.id);
case 'invert': return invert(this.props.construct.id);
case 'sourceCast': return sourceCast(this.props.construct.id, nextProps.avatarAnimation.params);
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>
{crypSkills}
<div class="stats"> {stats} </div>
<ConstructAvatar name={construct.name} id={construct.id} />
<ConstructAvatar construct={construct} />
{combatAnim}
<div class={'combat-text'}> {combatText} </div>
<div class="effects"> {effects} </div>

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

@ -201,7 +201,7 @@ function Construct(props) {
return (
<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>
<div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
{skills}

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

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

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

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