diff --git a/README.md b/README.md
index 19e7ce8d..e2ead233 100644
--- a/README.md
+++ b/README.md
@@ -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.
diff --git a/WORKLOG.md b/WORKLOG.md
index 4419f540..20cd76e7 100644
--- a/WORKLOG.md
+++ b/WORKLOG.md
@@ -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 =\
diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less
index f267351a..80612c3e 100644
--- a/client/assets/styles/controls.less
+++ b/client/assets/styles/controls.less
@@ -44,7 +44,10 @@ aside {
button {
width: 100%;
font-size: 150%;
- margin-bottom: 0.5em;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
}
button.ready:enabled {
diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less
index 58996b52..8ea9ddf3 100644
--- a/client/assets/styles/game.less
+++ b/client/assets/styles/game.less
@@ -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 @@
}
}
}
-}
\ No newline at end of file
+}
diff --git a/client/assets/styles/instance.mobile.less b/client/assets/styles/instance.mobile.less
index 07c76286..d957da40 100644
--- a/client/assets/styles/instance.mobile.less
+++ b/client/assets/styles/instance.mobile.less
@@ -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 {
diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less
index 6f47fe2d..c9729698 100644
--- a/client/assets/styles/styles.less
+++ b/client/assets/styles/styles.less
@@ -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;
diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.less
similarity index 93%
rename from client/assets/styles/styles.mobile.css
rename to client/assets/styles/styles.mobile.less
index 137e57b8..0b88dac7 100644
--- a/client/assets/styles/styles.mobile.css
+++ b/client/assets/styles/styles.mobile.less
@@ -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;
diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less
index 52a75939..fe62f0a2 100644
--- a/client/assets/styles/vbox.less
+++ b/client/assets/styles/vbox.less
@@ -33,6 +33,7 @@
margin: 0;
background-color: @gray-box;
height: 3em;
+ line-height: 1em;
border-width: 0;
:active, :hover, :focus {
diff --git a/client/index.js b/client/index.js
index 8ad272c9..c169c5ee 100644
--- a/client/index.js
+++ b/client/index.js
@@ -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
diff --git a/client/src/animations.test.jsx b/client/src/animations.test.jsx
index 5a676a23..e230a58b 100644
--- a/client/src/animations.test.jsx
+++ b/client/src/animations.test.jsx
@@ -56,9 +56,9 @@ document.fonts.load('16pt "Jura"').then(() => {
const Animations = () => (
@@ -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',
];
diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx
index 0d19b281..3b415520 100644
--- a/client/src/components/anims/chaos.jsx
+++ b/client/src/components/anims/chaos.jsx
@@ -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}
-
-
-
-
-
-
-
-
-
-
-
-
{this.charges}
);
@@ -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() {
diff --git a/client/src/components/anims/heal.jsx b/client/src/components/anims/heal.jsx
index 5a36cd98..c0459ffd 100644
--- a/client/src/components/anims/heal.jsx
+++ b/client/src/components/anims/heal.jsx
@@ -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',
}));
diff --git a/client/src/components/anims/intercept.jsx b/client/src/components/anims/intercept.jsx
index c5ee6b2a..1edb45a1 100644
--- a/client/src/components/anims/intercept.jsx
+++ b/client/src/components/anims/intercept.jsx
@@ -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,
diff --git a/client/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx
index ef862a2f..fe07c228 100644
--- a/client/src/components/anims/slay.jsx
+++ b/client/src/components/anims/slay.jsx
@@ -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 (
-
+
);
}
@@ -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">
-
-
-
-
-
-
-
+ viewBox="0 0 300 300">
+
-
{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),
}));
diff --git a/client/src/components/anims/strike.jsx b/client/src/components/anims/strike.jsx
index 00dbbb18..c5023837 100644
--- a/client/src/components/anims/strike.jsx
+++ b/client/src/components/anims/strike.jsx
@@ -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,
}));
diff --git a/client/src/components/anims/wiggle.jsx b/client/src/components/anims/wiggle.jsx
index b11a69c3..a9615181 100644
--- a/client/src/components/anims/wiggle.jsx
+++ b/client/src/components/anims/wiggle.jsx
@@ -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({
diff --git a/ops/package.json b/ops/package.json
index f0210790..323e1d24 100755
--- a/ops/package.json
+++ b/ops/package.json
@@ -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"