Merge tag '1.4.6' into develop
1.4.6
This commit is contained in:
commit
86aa6adcb4
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "mnml-client",
|
"name": "mnml-client",
|
||||||
"version": "1.4.5",
|
"version": "1.4.6",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
BIN
client/assets/icons/mnml.png
Normal file
BIN
client/assets/icons/mnml.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
@ -295,7 +295,7 @@
|
|||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: top;
|
background-position: top;
|
||||||
pointer-events: none;
|
// pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animating .skills {
|
.animating .skills {
|
||||||
|
|||||||
@ -201,7 +201,7 @@
|
|||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
pointer-events: none;
|
// pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
|
|||||||
@ -55,7 +55,7 @@
|
|||||||
background-size: contain;
|
background-size: contain;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
pointer-events: none;
|
// pointer-events: none;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,12 +4,12 @@
|
|||||||
"short_name": "mnml",
|
"short_name": "mnml",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "./assets/icons/726.png",
|
"src": "./assets/icons/mnml.png",
|
||||||
"sizes": "32x32",
|
"sizes": "32x32",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "./assets/icons/726.png",
|
"src": "./assets/icons/mnml.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "mnml-client",
|
"name": "mnml-client",
|
||||||
"version": "1.4.5",
|
"version": "1.4.6",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
21
client/src/components/anims/wiggle.jsx
Normal file
21
client/src/components/anims/wiggle.jsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
const anime = require('animejs').default;
|
||||||
|
|
||||||
|
function wiggle(id, idle) {
|
||||||
|
const duration = 300;
|
||||||
|
const target = document.getElementById(id);
|
||||||
|
const x = (window.screen.width / anime.random(-100, 100)) * 0.1;
|
||||||
|
const y = (window.screen.height / anime.random(-20, 100)) * 0.1;
|
||||||
|
return anime({
|
||||||
|
targets: target,
|
||||||
|
rotate: 0,
|
||||||
|
translateX: [x, -x, 0],
|
||||||
|
translateY: [y, -y, 0],
|
||||||
|
duration,
|
||||||
|
easing: 'easeInOutSine',
|
||||||
|
// direction: 'alternate',
|
||||||
|
begin: idle.pause,
|
||||||
|
complete: idle.restart,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = wiggle;
|
||||||
@ -7,13 +7,14 @@ const { connect } = require('preact-redux');
|
|||||||
const banish = require('./anims/banish');
|
const banish = require('./anims/banish');
|
||||||
const idleAnimation = require('./anims/idle');
|
const idleAnimation = require('./anims/idle');
|
||||||
const invert = require('./anims/invert');
|
const invert = require('./anims/invert');
|
||||||
|
const wiggle = require('./anims/wiggle');
|
||||||
const sourceCast = require('./anims/source.cast');
|
const sourceCast = require('./anims/source.cast');
|
||||||
const { ConstructAnimation } = require('./animations');
|
const { ConstructAnimation } = require('./animations');
|
||||||
|
|
||||||
const addState = connect(
|
const addState = connect(
|
||||||
function receiveState(state) {
|
function receiveState(state) {
|
||||||
const { animSource, animTarget } = state;
|
const { animSource, animTarget, animText } = state;
|
||||||
return { animSource, animTarget };
|
return { animSource, animTarget, animText };
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -33,12 +34,17 @@ class ConstructAvatar extends Component {
|
|||||||
<div
|
<div
|
||||||
class="avatar"
|
class="avatar"
|
||||||
id={construct.id}
|
id={construct.id}
|
||||||
|
onClick={this.onClick.bind(this)}
|
||||||
style={{ 'background-image': `url(/imgs/${construct.img}.svg)` }}>
|
style={{ 'background-image': `url(/imgs/${construct.img}.svg)` }}>
|
||||||
<ConstructAnimation construct={construct} />
|
<ConstructAnimation construct={construct} />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onClick() {
|
||||||
|
return this.animations.push(wiggle(this.props.construct.id, this.idle));
|
||||||
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this.idle = idleAnimation(this.props.construct.id);
|
this.idle = idleAnimation(this.props.construct.id);
|
||||||
return this.animations.push(this.idle);
|
return this.animations.push(this.idle);
|
||||||
@ -54,11 +60,17 @@ class ConstructAvatar extends Component {
|
|||||||
this.resetAnimations();
|
this.resetAnimations();
|
||||||
}
|
}
|
||||||
|
|
||||||
shouldComponentUpdate({ animSource, animTarget, construct }) {
|
shouldComponentUpdate(newProps) {
|
||||||
|
const { animSource, animTarget, animText, construct } = newProps;
|
||||||
|
|
||||||
if (construct !== this.props.construct) {
|
if (construct !== this.props.construct) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (animText && animText.constructId === construct.id) {
|
||||||
|
return wiggle(construct.id, this.idle);
|
||||||
|
}
|
||||||
|
|
||||||
if (animSource === this.props.animSource && animTarget === this.props.animTarget) {
|
if (animSource === this.props.animSource && animTarget === this.props.animTarget) {
|
||||||
// console.warn(construct.name, 'thinks its same props')
|
// console.warn(construct.name, 'thinks its same props')
|
||||||
return false;
|
return false;
|
||||||
@ -73,6 +85,7 @@ class ConstructAvatar extends Component {
|
|||||||
return sourceCast(animSource.constructId, animSource.direction, this.idle);
|
return sourceCast(animSource.constructId, animSource.direction, this.idle);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// this is the target
|
// this is the target
|
||||||
if (animTarget && animTarget.constructId.includes(construct.id)) {
|
if (animTarget && animTarget.constructId.includes(construct.id)) {
|
||||||
// console.warn(construct.name, 'should update')
|
// console.warn(construct.name, 'should update')
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "mnml-ops",
|
"name": "mnml-ops",
|
||||||
"version": "1.4.5",
|
"version": "1.4.6",
|
||||||
"description": "",
|
"description": "",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
[package]
|
[package]
|
||||||
name = "mnml"
|
name = "mnml"
|
||||||
version = "1.4.5"
|
version = "1.4.6"
|
||||||
authors = ["ntr <ntr@smokestack.io>"]
|
authors = ["ntr <ntr@smokestack.io>"]
|
||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user