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({