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

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

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

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

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

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

@ -56,9 +56,9 @@ document.fonts.load('16pt "Jura"').then(() => {
const Animations = () => ( const Animations = () => (
<Provider store={store}> <Provider store={store}>
<div id="mnml" class="animations-test"> <div id="mnml" class="animations-test">
<nav> <aside>
{animationsNav(ws)} {animationsNav(ws)}
</nav> </aside>
<Game /> <Game />
</div> </div>
</Provider> </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 }); const points = randomPoints(20, 30, { x: 0, y: 0, width: 300, height: 100 });
this.charges = points.map(coord => { this.charges = points.map(coord => {
const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8'; 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() { componentDidMount() {
const projectiles = document.querySelectorAll('.skill-anim circle'); const projectiles = document.querySelectorAll('.skill-anim circle');
anime.set('.skill-anim', { anime.set('.skill-anim', {
translateY: -(window.screen.height) * 0.35 * this.props.direction.y, translateY: -(window.innerHeight) * 0.35 * this.props.direction.y,
translateX: -(window.screen.width) * 0.15 * this.props.direction.x, translateX: -(window.innerWidth) * 0.15 * this.props.direction.x,
opacity: 0, opacity: 0,
}); });
@ -77,8 +77,10 @@ class Chaos extends Component {
projectiles.forEach(proj => this.animations.push(anime({ projectiles.forEach(proj => this.animations.push(anime({
targets: proj, targets: proj,
cx: 150 + (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)), // cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)),
cx: 150,
cy: 200,
// opacity: 0, // opacity: 0,
delay: TIMES.TARGET_DELAY_MS, delay: TIMES.TARGET_DELAY_MS,

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

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

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

@ -57,7 +57,7 @@ class Intercept extends Component {
targets: ['#intercept'], targets: ['#intercept'],
transform: [ transform: [
`scale(1 1) ${this.props.player ? 'rotate(180)' : ''}`, `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, strokeWidth: 0,

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

@ -78,7 +78,7 @@ class Slay extends Component {
}); });
anime.set('#slay', { anime.set('#slay', {
translateY: -1 * (window.screen.height) * 0.35, translateY: -1 * (window.innerHeight) * 0.35,
translateX: 0, translateX: 0,
}); });
@ -110,7 +110,7 @@ class Slay extends Component {
this.animations.push(anime({ this.animations.push(anime({
targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'], targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
baseFrequency: 100, baseFrequency: 10,
scale: 100, scale: 100,
delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2), delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
duration: (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; const { x, y } = direction;
return anime({ return anime({
targets: [document.getElementById(id)], targets: [document.getElementById(id)],
translateX: x * window.screen.width * 0.15, translateX: x * window.innerWidth * 0.15,
translateY: y * window.screen.height * 0.15, translateY: y * window.innerHeight * 0.15,
easing: 'easeInOutElastic', easing: 'easeInOutElastic',
direction: 'alternate', direction: 'alternate',
duration: TIMES.SOURCE_DURATION_MS, 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], x: [200, 0, 200],
height: [200, 10, 0], height: [200, 10, 0],
width: [20, 400, 0], width: [20, 400, 0],
delay: TIMES.TARGET_DELAY_MS / 2, delay: TIMES.TARGET_DELAY_MS * 0.5,
duration: TIMES.TARGET_DURATION_MS, 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) { function wiggle(id, idle) {
const duration = 300; const duration = 300;
const target = document.getElementById(id); const target = document.getElementById(id);
const x = window.screen.width * 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.screen.height * 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); console.log(x, y);
return anime({ return anime({