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

gud

Browse Source
This commit is contained in:
ntr 2019-10-07 18:48:47 +11:00
parent d88b0815af
commit 504b0826d1
11 changed files with 32 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
client/assets/styles/game.less
View File

@ -66,14 +66,16 @@
justify-items: center;
grid-template-columns: 1fr 3fr;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
.left {
width: 100%;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 2fr;
grid-template-areas:
"skills "
"effects";
"skills effects";
}
.right {
@ -92,7 +94,6 @@
transition-timing-function: ease;
.effects {
align-self: flex-end;
text-align: right;
}
@ -108,13 +109,11 @@
}
.skills {
grid-area: skills;
width: 100%;
button {
width: 100%;
height: 2em;
height: 25%;
margin-right: 1em;
}
}
@ -203,9 +202,8 @@
.combat-anim {
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-flow: column;
}
.combat-anim svg {
@ -310,7 +308,7 @@
.skill-animation {
opacity: 0;
stroke-width: 5px;
height: 5em;
// height: 5em;
}
@media (max-width: 1000px) {

2
client/assets/styles/instance.mobile.less
View File

@ -3,7 +3,7 @@
// tablet / ipad
@media (max-width: 1100px) {
.instance {
grid-template-columns: 1fr2;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas:
"vbox"

10
client/assets/styles/styles.less
View File

@ -97,14 +97,8 @@ dl {
padding: 0.5em 1em;
&.animations-test {
grid-template-columns: 1fr 9fr 1fr;
grid-template-areas:
"nav hdr ctrl"
"nav main ctrl"
"nav main ctrl";
nav {
display: initial;
aside button {
font-size: 50%;
}
}
}

4
client/src/animations.test.jsx
View File

@ -56,9 +56,9 @@ document.fonts.load('16pt "Jura"').then(() => {
const Animations = () => (
<Provider store={store}>
<div id="mnml" class="animations-test">
<nav>
<aside>
{animationsNav(ws)}
</nav>
</aside>
<Game />
</div>
</Provider>

12
client/src/components/anims/chaos.jsx
View File

@ -31,7 +31,7 @@ class Chaos extends Component {
const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 });
this.charges = points.map(coord => {
const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
return projectile(coord[0], coord[1], 7, colour);
return projectile(coord[0], coord[1], 14, colour);
});
}
@ -51,8 +51,8 @@ class Chaos extends Component {
componentDidMount() {
const projectiles = document.querySelectorAll('.skill-anim circle');
anime.set('.skill-anim', {
translateY: -(window.screen.height) * 0.35 * this.props.direction.y,
translateX: -(window.screen.width) * 0.15 * this.props.direction.x,
translateY: -(window.innerHeight) * 0.35 * this.props.direction.y,
translateX: -(window.innerWidth) * 0.15 * this.props.direction.x,
opacity: 0,
});
@ -77,8 +77,10 @@ class Chaos extends Component {
projectiles.forEach(proj => this.animations.push(anime({
targets: proj,
cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
// cx: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
// cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
cx: 150,
cy: 200,
// opacity: 0,
delay: TIMES.TARGET_DELAY_MS,

6
client/src/components/anims/heal.jsx
View File

@ -61,7 +61,7 @@ class Heal extends Component {
targets: ['#heal'],
opacity: [
{ value: 1, delay: TIMES.TARGET_DELAY_MS, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS * 0.4, duration: TIMES.TARGET_DURATION_MS * 0.2 },
{ value: 0, delay: TIMES.TARGET_DURATION_MS / 4, duration: TIMES.TARGET_DURATION_MS * 0.2 },
],
easing: 'easeInOutSine',
}));
@ -70,8 +70,8 @@ class Heal extends Component {
targets: ['#heal circle'],
cx: 150,
cy: 200,
delay: TIMES.TARGET_DELAY_MS * 2,
duration: TIMES.TARGET_DURATION_MS,
delay: TIMES.TARGET_DELAY_MS * 4,
duration: TIMES.TARGET_DURATION_MS * 0.9,
easing: 'easeOutCirc',
direction: 'reverse',
}));

2
client/src/components/anims/intercept.jsx
View File

@ -57,7 +57,7 @@ class Intercept extends Component {
targets: ['#intercept'],
transform: [
`scale(1 1) ${this.props.player ? 'rotate(180)' : ''}`,
`scale(30 3) ${this.props.player ? 'rotate(180)' : ''}`,
`scale(5 5) ${this.props.player ? 'rotate(180)' : ''}`,
],
strokeWidth: 0,

4
client/src/components/anims/slay.jsx
View File

@ -78,7 +78,7 @@ class Slay extends Component {
});
anime.set('#slay', {
translateY: -1 * (window.screen.height) * 0.35,
translateY: -1 * (window.innerHeight) * 0.35,
translateX: 0,
});
@ -110,7 +110,7 @@ class Slay extends Component {
this.animations.push(anime({
targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
baseFrequency: 100,
baseFrequency: 10,
scale: 100,
delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
duration: (duration * 1 / 2),

4
client/src/components/anims/source.cast.jsx
View File

@ -6,8 +6,8 @@ function sourceCast(id, direction, idle) {
const { x, y } = direction;
return anime({
targets: [document.getElementById(id)],
translateX: x * window.screen.width * 0.15,
translateY: y * window.screen.height * 0.15,
translateX: x * window.innerWidth * 0.15,
translateY: y * window.innerHeight * 0.15,
easing: 'easeInOutElastic',
direction: 'alternate',
duration: TIMES.SOURCE_DURATION_MS,

2
client/src/components/anims/strike.jsx
View File

@ -54,7 +54,7 @@ class Strike extends Component {
x: [200, 0, 200],
height: [200, 10, 0],
width: [20, 400, 0],
delay: TIMES.TARGET_DELAY_MS / 2,
delay: TIMES.TARGET_DELAY_MS * 0.5,
duration: TIMES.TARGET_DURATION_MS,
}));

4
client/src/components/anims/wiggle.jsx
View File

@ -3,8 +3,8 @@ const anime = require('animejs').default;
function wiggle(id, idle) {
const duration = 300;
const target = document.getElementById(id);
const x = window.screen.width * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
const y = window.screen.height * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
const x = window.innerWidth * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
const y = window.innerHeight * 0.01 * (Math.round(Math.random()) ? Math.random() : -Math.random());
console.log(x, y);
return anime({