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

instance mobile stuff and no sword slay

Browse Source
This commit is contained in:
ntr 2019-10-07 12:15:48 +11:00
parent 2cab610575
commit a72dd96bf4
9 changed files with 47 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -1,8 +1,8 @@
# mnml
mnml is a turn-based 1v1 strategy game in an abstract setting.
players craft a team of 3 constructs combining a deep pool of skills, effects and specialisations to mindgame & outplay their opponents in a rapid series of duels.
featuring complex interactions arising from simple rules, simultaneous turns to increase the pace, and a unique speed mechanic mnml is a tactical game in a genre of its own.
it is completely free to play and requires no installation.
Craft a team of 3 constructs combining a deep pool of skills, effects and specialisations to mindgame & outplay opponents in a rapid series of duels.
Featuring complex interactions arising from simple rules, simultaneous turns to increase the pace, and a unique speed mechanic mnml is a tactical game in a genre of its own.
It is completely free to play and requires no installation.
minimal studios is ntr & mashy: 2 mates with a friendship forged in the fires of warcraft 3 dota.
we have both bailed out of the big city life and have dedicated ourselves to growing farm fresh, organic, ethical gaming produce in the rolling hills of brisbane and leaves of melbourne.

2
WORKLOG.md
View File

@ -6,6 +6,8 @@
* mobile styles
* mobile info page
* fix info page for tablet layout
* Add TOS and accept to register page
* can't reset password without knowing password =\

2
client/animations.test.js
View File

@ -9,6 +9,6 @@ require('./assets/styles/vbox.less');
require('./assets/styles/game.less');
require('./assets/styles/player.less');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.mobile.css');
require('./assets/styles/instance.mobile.less');
require('./src/animations.test.jsx');

5
client/assets/styles/controls.less
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 {

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

@ -1,5 +1,20 @@
@import 'colours.less';
// tablet / ipad
@media (max-width: 1100px) {
.instance {
grid-template-columns: 1fr2;
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 {

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

@ -124,6 +124,7 @@ button, input {
font-size: 100%;
flex: 1;
border-radius: 0.5em;
line-height: 2em;
/*the transitions */
transition-property: border-color, color, background;

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

@ -33,6 +33,7 @@
margin: 0;
background-color: @gray-box;
height: 3em;
line-height: 1em;
border-width: 0;
:active, :hover, :focus {

38
client/src/components/anims/slay.jsx
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}
@ -94,13 +81,14 @@ class Slay extends Component {
translateY: -1 * (window.screen.height) * 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: 100,
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),
}));

4
ops/package.json
View File

@ -8,13 +8,15 @@
"migrate": "knex migrate:latest",
"migrate:make": "knex migrate:make --",
"test": "echo \"Error: no test specified\" && exit 1",
"nginx:dev": "sudo cp mnml.gg.DEV.SAMPLE.nginx.conf /etc/nginx/sites-available/mnml.gg.DEV.nginx.conf && sudo ln -nfs /etc/nginx/sites-available/mnml.gg.DEV.nginx.conf /etc/nginx/sites-enabled"
"nginx:dev": "sudo cp mnml.gg.DEV.SAMPLE.nginx.conf /etc/nginx/sites-available/mnml.gg.DEV.nginx.conf && sudo ln -nfs /etc/nginx/sites-available/mnml.gg.DEV.nginx.conf /etc/nginx/sites-enabled",
"qr": "qrcode-svg --color whitesmoke --background black -f -o mnml.qr.svg \"https://mnml.gg\""
},
"author": "",
"license": "UNLICENSED",
"dependencies": {
"knex": "^0.15.2",
"pg": "^7.4.3",
"qrcode-svg": "^1.0.0",
"request": "^2.88.0",
"sdftosvg": "0.0.4",
"uuid": "^3.3.3"