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

Merge remote-tracking branch 'origin/pax' into develop

Browse Source
This commit is contained in:
Mashy
2019-10-08 11:08:26 +10:00
parent 5fb7f157b4 76ae1d0094
commit 14bc1819ed
17 changed files with 118 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/styles/controls.less
+4 -1
View File
@@ -44,7 +44,10 @@ aside {
button {
width: 100%;
font-size: 150%;
margin-bottom: 0.5em;
&:last-child {
margin-bottom: 0;
}
}
button.ready:enabled {
client/assets/styles/game.less
+20 -13
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;
}
button.active {
background: #2c2c2c;
@@ -206,9 +205,8 @@
.combat-anim {
width: 100%;
height: 100%;
position: absolute;
display: flex;
flex-flow: column;
}
.combat-anim svg {
@@ -313,7 +311,7 @@
.skill-animation {
opacity: 0;
stroke-width: 5px;
height: 5em;
// height: 5em;
}
@media (max-width: 1000px) {
@@ -332,6 +330,11 @@
grid-template-rows: min-content 1fr;
.left {
width: 100%;
grid-template-areas:
"skills"
"effects";
grid-template-columns: 1fr;
grid-template-rows: min-content min-content;
}
@@ -369,9 +372,13 @@
font-size: 100%;
}
.skills button, .stats, .name {
.stats, .name {
font-size: 75%;
}
.skills button {
font-size: 50%;
}
}
.opponent {
@@ -382,4 +389,4 @@
}
}
}
}
}
client/assets/styles/instance.mobile.less
+19
View File
@@ -1,5 +1,20 @@
@import 'colours.less';
// tablet / ipad
@media (max-width: 1100px) {
.instance {
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas:
"vbox"
"constructs";
.info {
display: none;
}
}
}
@media (max-width: 800px) {
.instance {
font-size: 8pt;
@@ -32,6 +47,10 @@
&:not(.visible) {
display: none;
}
.vbox-vbox {
margin-bottom: 1em;
}
}
.vbox-arrow {
client/assets/styles/styles.less
+3 -8
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%;
}
}
}
@@ -124,6 +118,7 @@ button, input {
font-size: 100%;
flex: 1;
border-radius: 0.5em;
line-height: 2em;
/*the transitions */
transition-property: border-color, color, background;
client/assets/styles/styles.mobile.css → client/assets/styles/styles.mobile.less
+4 -8
View File
@@ -14,10 +14,6 @@
overflow-y: initial;
}
#mnml button {
font-size: 10pt;
}
table td {
height: 2.5em;
}
@@ -35,6 +31,10 @@
position: fixed;
bottom: 0;
width: 100%;
button {
font-size: 90%;
}
}
#nav-btn, #instance-nav {
@@ -52,10 +52,6 @@
display: none;
}
/* header {
display: none;
}
*/
main {
overflow-x: hidden;
overflow-y: initial;
client/assets/styles/vbox.less
+1
View File
@@ -33,6 +33,7 @@
margin: 0;
background-color: @gray-box;
height: 3em;
line-height: 1em;
border-width: 0;
:active, :hover, :focus {
client/index.js
+1 -1
View File
@@ -8,7 +8,7 @@ require('./assets/styles/instance.less');
require('./assets/styles/vbox.less');
require('./assets/styles/game.less');
require('./assets/styles/player.less');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/styles.mobile.less');
require('./assets/styles/instance.mobile.less');
// kick it off
client/src/animations.test.jsx
+21 -21
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>
@@ -69,13 +69,31 @@ document.fonts.load('16pt "Jura"').then(() => {
});
const SKILLS = [
'Absorb',
'Absorption',
'Amplify',
'Attack',
'Banish',
'Bash',
'Blast',
'Block',
'Break',
'Buff',
'Chaos',
'Counter',
'CounterAttack',
'Curse',
'Debuff',
'Decay',
'DecayTick',
'Electrify',
'Electrocute',
'ElectrocuteTick',
'Haste',
'HasteStrike',
'Heal',
'HybridBlast',
'Hybrid',
'HybridBlast',
'Intercept',
'Invert',
'Link',
@@ -95,22 +113,4 @@ const SKILLS = [
'Sustain',
'Triage',
'TriageTick',
'Absorb',
'Absorption',
'Amplify',
'Attack',
'Banish',
'Bash',
'Blast',
'Block',
'Break',
'Buff',
'Chaos',
'CounterAttack',
'Counter',
'Curse',
'Debuff',
'Decay',
'DecayTick',
'Electrify',
];
client/src/components/anims/chaos.jsx
+16 -42
View File
@@ -19,10 +19,7 @@ function projectile(x, y, radius, colour) {
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
filter="url(#explosion)"
fill={colour}
/>
);
}
@@ -31,8 +28,11 @@ class Chaos extends Component {
constructor() {
super();
this.animations = [];
const points = randomPoints(7, 30, { x: 0, y: 0, width: 300, height: 100 });
this.charges = points.map(coord => projectile(coord[0], coord[1], 14, '#A25AC1'));
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], 14, colour);
});
}
render() {
@@ -43,19 +43,6 @@ class Chaos extends Component {
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
// {this.charges}
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
<stop offset="100%" style={'stop-color:#A25AC1;stop-opacity:1'} />
</radialGradient>
</defs>
<filter id="explosion">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{this.charges}
</svg>
);
@@ -63,20 +50,11 @@ class Chaos extends Component {
componentDidMount() {
const projectiles = document.querySelectorAll('.skill-anim circle');
projectiles.forEach(proj => {
const colour = Math.random() >= 0.5 ? '#a52a2a' : '#3050f8';
anime.set(proj, {
stroke: colour,
});
});
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,
});
anime.set('#explosion feDisplacementMap', {
scale: 1,
});
this.animations.push(anime({
targets: '.skill-anim',
@@ -96,23 +74,19 @@ class Chaos extends Component {
duration: (TIMES.TARGET_DURATION_MS * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#explosion feDisplacementMap',
scale: 75,
loop: false,
delay: (TIMES.TARGET_DELAY_MS + TIMES.TARGET_DURATION_MS * 2 / 3),
duration: (TIMES.TARGET_DURATION_MS * 1 / 3),
easing: 'easeInQuad',
}));
projectiles.forEach(proj => anime({
projectiles.forEach(proj => this.animations.push(anime({
targets: proj,
cx: Math.random() * 250 + 25,
cy: Math.random() * 300 + 50,
// 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,
duration: (TIMES.TARGET_DURATION_MS * 2 / 3),
easing: 'easeInQuad',
}));
})));
}
componentWillUnmount() {
client/src/components/anims/heal.jsx
+3 -3
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',
}));
client/src/components/anims/intercept.jsx
+1 -1
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,
client/src/components/anims/slay.jsx
+14 -26
View File
@@ -21,20 +21,14 @@ function projectile(x, y, radius, colour) {
cx={x}
cy={y}
r={radius}
fill="url(#grad1)"
stroke-width="2"
stroke={colour}
fill={colour}
/>
);
}
function sword(colour) {
return (
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<g transform="rotate(90, 640, 360) translate(0,720) scale(0.1,-0.1)" fill={colour} stroke={colour} filter="url(#explosion)" id="sword">
<path d="M4110 5071 c-294 -119 -436 -228 -457 -350 -4 -25 -7 -230 -6 -454 2 -380 1 -408 -15 -402 -9 4 -48 16 -87 26 -160 41 -215 44 -815 41 -719 -4 -1088 13 -1475 69 -270 38 -384 75 -468 148 -67 58 -111 75 -193 74 -104 -1 -204 -59 -264 -153 -130 -202 -159 -698 -59 -998 62 -188 174 -282 335 -282 77 0 114 14 174 67 87 77 198 114 456 152 386 56 724 73 1459 70 676 -2 728 1 937 68 15 4 16 -29 15 -419 -2 -500 -4 -492 93 -582 45 -41 99 -74 217 -133 87 -43 182 -86 212 -96 172 -55 197 16 78 226 -114 202 -160 347 -187 587 -16 144 -27 371 -18 376 4 3 299 0 655 -5 2030 -31 2627 -35 3953 -23 903 8 1433 17 1665 28 l340 16 450 79 c248 44 491 88 540 99 234 50 777 180 796 190 18 10 19 14 7 26 -7 8 -198 57 -423 109 -346 80 -483 106 -885 170 -417 66 -517 78 -815 100 -312 24 -424 27 -1370 36 -1039 11 -2548 7 -3645 -10 -327 -5 -748 -11 -934 -13 l-339 -3 2 75 c3 130 22 331 41 441 25 147 71 276 142 404 34 61 70 127 80 147 21 42 24 108 6 126 -23 23 -100 13 -198 -27z"/>
</g>
</svg>
<polygon points='150,150 75,75, 150,300, 225,75' fill={colour} id="sword" filter="url(#slayFilter)"></polygon>
);
}
@@ -54,18 +48,11 @@ class Slay extends Component {
version="1.1"
id="slay"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 300 400">
<defs>
<radialGradient id="grad1" cx="50%" cy="0%" r="85%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:#dba9a9;stop-opacity:0.6" />
<stop offset="100%" style={`stop-color:${this.colour};stop-opacity:1`} />
</radialGradient>
</defs>
<filter id="explosion">
viewBox="0 0 300 300">
<filter id="slayFilter">
<feGaussianBlur stdDeviation="4"/>
<feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="3" result="turbulence"/>
<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="1" xChannelSelector="A" yChannelSelector="A"/>
</filter>
{sword(this.colour)}
{this.charges}
@@ -91,16 +78,17 @@ class Slay extends Component {
});
anime.set('#slay', {
translateY: -1 * (window.screen.height) * 0.35,
translateY: -1 * (window.innerHeight) * 0.35,
translateX: 0,
});
anime.set('#explosion feDisplacementMap', {
scale: 100,
anime.set('#slayFilter feDisplacementMap', {
scale: 0,
});
anime.set('#sword', {
fill: this.colour,
stroke: this.colour,
opacity: 1,
});
this.animations.push(anime({
@@ -119,10 +107,11 @@ class Slay extends Component {
duration: (duration * 1 / 2),
easing: 'easeInQuad',
}));
this.animations.push(anime({
targets: '#explosion feDisplacementMap',
scale: 10000,
loop: false,
targets: ['#slayFilter feTurbulence', '#slayFilter feDisplacementMap'],
baseFrequency: 10,
scale: 100,
delay: (TIMES.TARGET_DELAY_MS + duration * 1 / 2),
duration: (duration * 1 / 2),
easing: 'easeInQuad',
@@ -130,8 +119,7 @@ class Slay extends Component {
this.animations.push(anime({
targets: '#sword',
fill: '#1FF01F',
stroke: '#1FF01F',
opacity: 0,
delay: (TIMES.TARGET_DELAY_MS + duration + TIMES.POST_SKILL_DURATION_MS * 0.7),
}));
client/src/components/anims/strike.jsx
+1 -1
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,
}));
client/src/components/anims/wiggle.jsx
+2 -2
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({