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

icon stuff

Browse Source
This commit is contained in:
ntr 2019-07-23 17:01:43 +10:00
parent 7c8f724209
commit 5baffffd69
7 changed files with 91 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
client/assets/styles/instance.less
View File

@ -287,66 +287,80 @@
flex: 1 0 100%;
}
// .equipping {
// position: relative;
// }
// .equipping::before {
// content: '';
// position: absolute;
// top: 2px;
// left: 50%;
// width: 100%;
// height: 2px;
// transform-origin: center;
// background-color: whitesmoke;
// animation: equipping-skill 2s infinite ease-out alternate;
// opacity: 0;
// }
// .equipping::after {
// content: '';
// position: absolute;
// bottom: 2px;
// left: 50%;
// width: 100%;
// height: 2px;
// transform-origin: center;
// background-color: whitesmoke;
// animation: equipping-skill 2s infinite ease-out alternate;
// opacity: 0;
// animation-delay: 0.75s
// }
// @keyframes equipping-skill {
// from {
// transform: translate(-50%, 0) scaleX(0);
// }
// to {
// transform: translate(-50%, 0) scaleX(0.75);
// opacity: 1;
// }
// }
// .equip-spec {
// position: relative;
// stroke: #333;
// }
// .equip-spec::after {
// content: '';
// position: absolute;
// bottom: 2px;
// left: 50%;
// width: 100%;
// height: 2px;
// transform-origin: center;
// background-color: whitesmoke;
// animation: equipping-skill 2s infinite ease-out alternate;
// opacity: 0;
// }
.equipping {
position: relative;
animation: equipping 2s infinite ease-in-out alternate;
}
.equipping::before {
content: '';
position: absolute;
top: 2px;
left: 50%;
width: 100%;
height: 2px;
transform-origin: center;
background-color: whitesmoke;
animation: equipping-skill 2s infinite ease-out alternate;
opacity: 0;
}
.equipping::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
width: 100%;
height: 2px;
transform-origin: center;
background-color: whitesmoke;
animation: equipping-skill 2s infinite ease-out alternate;
opacity: 0;
animation-delay: 0.75s
}
@keyframes equipping-skill {
@keyframes equipping {
from {
transform: translate(-50%, 0) scaleX(0);
border-color: #444;
}
to {
transform: translate(-50%, 0) scaleX(0.75);
opacity: 1;
border-color: whitesmoke;
}
}
.equip-spec {
position: relative;
stroke: #333;
}
.equip-spec::after {
content: '';
position: absolute;
bottom: 2px;
left: 50%;
width: 100%;
height: 2px;
transform-origin: center;
background-color: whitesmoke;
animation: equipping-skill 2s infinite ease-out alternate;
opacity: 0;
}
.thresholds {
display: flex;
flex-flow: column;

9
client/assets/styles/vbox.less
View File

@ -78,9 +78,18 @@
background: @white;
border: 1px solid @white;
// overwrite the classes on white svg elements
ellipse.white {
stroke: black;
}
rect.white {
stroke: black;
}
polygon.white {
stroke: black;
}
}
}

12
client/src/animations.socket.jsx
View File

@ -41,7 +41,10 @@ function createSocket(store) {
store.dispatch(actions.setAnimFocus(animations.getFocusTargets(r)));
if (sequence.includes('START_SKILL')) store.dispatch(actions.setAnimSource(anims.animSource));
if (sequence.includes('END_SKILL')) store.dispatch(actions.setAnimTarget(anims.animTarget));
if (sequence.includes('END_SKILL')) {
store.dispatch(actions.setAnimTarget(anims.animTarget));
if (!['Banish', 'Invert'].includes(anims.animTarget.skill)) store.dispatch(actions.setAnimCb(cb));
}
if (sequence.includes('POST_SKILL')) {
// timeout to prevent text classes from being added too soon
setTimeout(
@ -49,15 +52,14 @@ function createSocket(store) {
timeout - TIMES.POST_SKILL_DURATION_MS
);
}
return setTimeout(() => {
store.dispatch(actions.setAnimSource(null));
store.dispatch(actions.setAnimTarget(null));
store.dispatch(actions.setAnimText(null));
store.dispatch(actions.setAnimFocus([]));
// We currently need another small timeout so that everything can properly dismount / unload
// Otherwise 3 x Attack on same target will only render the first time
return setTimeout(cb, 200);
if (!sequence.includes('END_SKILL')
|| ['Banish', 'Invert'].includes(anims.animTarget.skill)) return cb();
return true;
}, timeout);
}, err => {
if (err) return console.error(err);

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

@ -144,7 +144,7 @@ function Construct(props) {
if (!s) {
const equipping = specList.includes(vbox.bound[itemEquip]);
const classes = `${equipping ? 'equip-spec' : 'gray'} empty`;
const classes = `${equipping ? 'equipping' : 'gray'} empty`;
return (
<button key={i} class={classes} disabled={!equipping} >
{shapes.None()}

13
client/src/components/shapes.jsx
View File

@ -33,7 +33,7 @@ module.exports = {
RedPower: () => circle(['red']),
GreenPower: () => circle(['green']),
BluePower: () => circle(['blue']),
Speed: () => triangle(['white']),
SpeedStat: () => triangle(['white']),
// specs
@ -58,12 +58,11 @@ module.exports = {
<figcaption>Life</figcaption>
</figure>,
// Speed:
// <figure>
// {triangle(['white'])}
// <figcaption>Speed</figcaption>
// </figure>,
Speed: () =>
<figure>
{triangle(['white'])}
<figcaption>Speed</figcaption>
</figure>,
// Lifes Upgrades
LifeGG: () =>

6
client/src/components/svgs/diamond.jsx
View File

@ -4,9 +4,9 @@ module.exports = function triangle(classes) {
return (
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 200 200" class={classes} transform="rotate(45)" >
<rect x="10" y="10" width="180" height="180"/>
<rect x="40" y="40" width="120" height="120"/>
<rect x="70" y="70" width="60" height="60"/>
<rect x="25" y="25" width="175" height="175"/>
<rect x="55" y="55" width="115" height="115"/>
<rect x="85" y="85" width="55" height="55"/>
</svg>
);
};

2
client/src/utils.jsx
View File

@ -63,7 +63,7 @@ const STATS = {
colour: 'blue',
svg: shapes.circle,
},
Speed: {
SpeedStat: {
stat: 'speed',
colour: 'white',
svg: shapes.triangle,