From a72dd96bf428f0ed9eff9528e41a189f3c6b9b71 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 7 Oct 2019 12:15:48 +1100 Subject: [PATCH 1/6] instance mobile stuff and no sword slay --- README.md | 6 ++-- WORKLOG.md | 2 ++ client/animations.test.js | 2 +- client/assets/styles/controls.less | 5 ++- client/assets/styles/instance.mobile.less | 19 ++++++++++++ client/assets/styles/styles.less | 1 + client/assets/styles/vbox.less | 1 + client/src/components/anims/slay.jsx | 38 ++++++++--------------- ops/package.json | 4 ++- 9 files changed, 47 insertions(+), 31 deletions(-) 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 8f93a003..fd015ca9 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/animations.test.js b/client/animations.test.js index 3271b840..b447e649 100644 --- a/client/animations.test.js +++ b/client/animations.test.js @@ -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'); 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/instance.mobile.less b/client/assets/styles/instance.mobile.less index 07c76286..21283a59 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: 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 { diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 6f47fe2d..db252346 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -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; 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/src/components/anims/slay.jsx b/client/src/components/anims/slay.jsx index ef862a2f..0fe0f1c2 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} @@ -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), })); 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" From 0a327786cec88e777ed1addf1a9846c6d4d42dca Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 7 Oct 2019 12:25:43 +1100 Subject: [PATCH 2/6] remove stroke from chaos --- client/src/animations.test.jsx | 38 +++++++++--------- client/src/components/anims/chaos.jsx | 57 +++++++++------------------ 2 files changed, 38 insertions(+), 57 deletions(-) diff --git a/client/src/animations.test.jsx b/client/src/animations.test.jsx index 5a676a23..4c346f9e 100644 --- a/client/src/animations.test.jsx +++ b/client/src/animations.test.jsx @@ -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..1b0b9f56 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], 7, 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,14 @@ 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, opacity: 0, }); - anime.set('#explosion feDisplacementMap', { - scale: 1, - }); + // anime.set('#explosion feDisplacementMap', { + // scale: 1, + // }); this.animations.push(anime({ targets: '.skill-anim', @@ -96,19 +77,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', - })); + // 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({ 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)), delay: TIMES.TARGET_DELAY_MS, duration: (TIMES.TARGET_DURATION_MS * 2 / 3), easing: 'easeInQuad', From d88b0815afdddf303778befb313e5696dc3ae4b3 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 7 Oct 2019 12:32:00 +1100 Subject: [PATCH 3/6] chaos tweak --- client/src/components/anims/chaos.jsx | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 1b0b9f56..08635b26 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -55,9 +55,6 @@ class Chaos extends Component { translateX: -(window.screen.width) * 0.15 * this.props.direction.x, opacity: 0, }); - // anime.set('#explosion feDisplacementMap', { - // scale: 1, - // }); this.animations.push(anime({ targets: '.skill-anim', @@ -77,23 +74,17 @@ 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: 150 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)), cy: 200 + (Math.random() * 50 * (Math.random() < 0.5 ? -1 : 1)), + // opacity: 0, + delay: TIMES.TARGET_DELAY_MS, duration: (TIMES.TARGET_DURATION_MS * 2 / 3), easing: 'easeInQuad', - })); + }))); } componentWillUnmount() { From 504b0826d1d500d86ca2eec1efca60e9f80daf0a Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 7 Oct 2019 18:48:47 +1100 Subject: [PATCH 4/6] gud --- client/assets/styles/game.less | 20 +++++++++----------- client/assets/styles/instance.mobile.less | 2 +- client/assets/styles/styles.less | 10 ++-------- client/src/animations.test.jsx | 4 ++-- client/src/components/anims/chaos.jsx | 12 +++++++----- client/src/components/anims/heal.jsx | 6 +++--- client/src/components/anims/intercept.jsx | 2 +- client/src/components/anims/slay.jsx | 4 ++-- client/src/components/anims/source.cast.jsx | 4 ++-- client/src/components/anims/strike.jsx | 2 +- client/src/components/anims/wiggle.jsx | 4 ++-- 11 files changed, 32 insertions(+), 38 deletions(-) diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index 5e9586de..d345329f 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; } } @@ -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) { diff --git a/client/assets/styles/instance.mobile.less b/client/assets/styles/instance.mobile.less index 21283a59..d957da40 100644 --- a/client/assets/styles/instance.mobile.less +++ b/client/assets/styles/instance.mobile.less @@ -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" diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index db252346..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%; } } } diff --git a/client/src/animations.test.jsx b/client/src/animations.test.jsx index 4c346f9e..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 = () => (
- +
diff --git a/client/src/components/anims/chaos.jsx b/client/src/components/anims/chaos.jsx index 08635b26..3b415520 100644 --- a/client/src/components/anims/chaos.jsx +++ b/client/src/components/anims/chaos.jsx @@ -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, 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 0fe0f1c2..fe07c228 100644 --- a/client/src/components/anims/slay.jsx +++ b/client/src/components/anims/slay.jsx @@ -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), diff --git a/client/src/components/anims/source.cast.jsx b/client/src/components/anims/source.cast.jsx index 74a17184..5dba217a 100644 --- a/client/src/components/anims/source.cast.jsx +++ b/client/src/components/anims/source.cast.jsx @@ -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, 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 995af86a..68b623bb 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({ From a13674754e5ac9368cb927abeffd3a6ac54ac260 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 7 Oct 2019 19:01:50 +1100 Subject: [PATCH 5/6] better --- client/assets/styles/game.less | 13 +++- client/assets/styles/styles.mobile.css | 97 -------------------------- client/index.js | 2 +- 3 files changed, 12 insertions(+), 100 deletions(-) delete mode 100644 client/assets/styles/styles.mobile.css diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index d345329f..78133824 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -327,6 +327,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; } @@ -361,9 +366,13 @@ font-size: 100%; } - .skills button, .stats, .name { + .stats, .name { font-size: 75%; } + + .skills button { + font-size: 50%; + } } .opponent { @@ -374,4 +383,4 @@ } } } -} \ No newline at end of file +} diff --git a/client/assets/styles/styles.mobile.css b/client/assets/styles/styles.mobile.css deleted file mode 100644 index 137e57b8..00000000 --- a/client/assets/styles/styles.mobile.css +++ /dev/null @@ -1,97 +0,0 @@ -@media (max-width: 800px) { - #mnml { - font-size: 12pt; - padding: 0; - grid-template-columns: 1fr; - grid-template-rows: 10fr 1fr; - grid-template-areas: - "main" - "footer"; - - height: 100vh; - max-height: initial; - min-height: initial; - overflow-y: initial; - } - - #mnml button { - font-size: 10pt; - } - - table td { - height: 2.5em; - } - - nav { - display: none; - } - - aside { - display: none; - } - - footer { - display: flex; - position: fixed; - bottom: 0; - width: 100%; - } - - #nav-btn, #instance-nav { - display: unset; - } - - #mnml.nav-visible nav { - padding: 0.5em; - margin: 0; - display: block; - grid-area: main; - } - - #mnml.nav-visible main { - display: none; - } - -/* header { - display: none; - } -*/ - main { - overflow-x: hidden; - overflow-y: initial; - max-height: 100vh; - padding: 0 0.5em; - } - - .welcome .login { - width: 100%; - } - - .welcome .options { - width: 100%; - flex-flow: row wrap; - } - - .welcome .options button { - flex: 1 0 50%; - } - - .timer-container { - margin: 0.5em 0 0 0; - } - - .mobile-title { - display: block; - margin-bottom: 1em; - } - - .menu-instances { - display: grid; - - grid-template-columns: 1fr; - grid-template-areas: - "constructs" - "inventory" - "games"; - } -} 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 From 76ae1d009416e9e8a64ad3a3262a5aba3a88baa4 Mon Sep 17 00:00:00 2001 From: ntr Date: Mon, 7 Oct 2019 19:02:34 +1100 Subject: [PATCH 6/6] mobile less --- client/assets/styles/styles.mobile.less | 93 +++++++++++++++++++++++++ 1 file changed, 93 insertions(+) create mode 100644 client/assets/styles/styles.mobile.less diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less new file mode 100644 index 00000000..0b88dac7 --- /dev/null +++ b/client/assets/styles/styles.mobile.less @@ -0,0 +1,93 @@ +@media (max-width: 800px) { + #mnml { + font-size: 12pt; + padding: 0; + grid-template-columns: 1fr; + grid-template-rows: 10fr 1fr; + grid-template-areas: + "main" + "footer"; + + height: 100vh; + max-height: initial; + min-height: initial; + overflow-y: initial; + } + + table td { + height: 2.5em; + } + + nav { + display: none; + } + + aside { + display: none; + } + + footer { + display: flex; + position: fixed; + bottom: 0; + width: 100%; + + button { + font-size: 90%; + } + } + + #nav-btn, #instance-nav { + display: unset; + } + + #mnml.nav-visible nav { + padding: 0.5em; + margin: 0; + display: block; + grid-area: main; + } + + #mnml.nav-visible main { + display: none; + } + + main { + overflow-x: hidden; + overflow-y: initial; + max-height: 100vh; + padding: 0 0.5em; + } + + .welcome .login { + width: 100%; + } + + .welcome .options { + width: 100%; + flex-flow: row wrap; + } + + .welcome .options button { + flex: 1 0 50%; + } + + .timer-container { + margin: 0.5em 0 0 0; + } + + .mobile-title { + display: block; + margin-bottom: 1em; + } + + .menu-instances { + display: grid; + + grid-template-columns: 1fr; + grid-template-areas: + "constructs" + "inventory" + "games"; + } +}