From 3c7600b70392d712dd8cf8649008cfa5d3231d57 Mon Sep 17 00:00:00 2001 From: BudzioT Date: Tue, 24 Dec 2024 16:13:47 +0100 Subject: [PATCH 1/2] Turned off animation on reduced motion --- src/app/harbor/battles/battles.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/harbor/battles/battles.tsx b/src/app/harbor/battles/battles.tsx index 08f954fa..1d3573a3 100644 --- a/src/app/harbor/battles/battles.tsx +++ b/src/app/harbor/battles/battles.tsx @@ -124,6 +124,9 @@ export default function Matchups({ session }: { session: HsSession }) { 'https://cloud-1v9k8a4x7-hack-club-bot.vercel.app/0yr_sweep_up_01_audio.mp4', ].map((path) => new Howl({ src: path })) + const reducedMotion = window.matchMedia( + '(prefers-reduced-motion: reduce)', + ).matches let shuffling = false function shuffle() { shuffling = true @@ -132,7 +135,7 @@ export default function Matchups({ session }: { session: HsSession }) { document.body.style.willChange = 'transform' let rotation = 0 - const duration = 1000 // total duration in milliseconds + const duration = reducedMotion ? 0 : 1000 // total duration in milliseconds const interval = 20 // interval in milliseconds const totalSteps = duration / interval let currentStep = 0 From 733f717d168a939497f9868d727c53ce6c6bf6f0 Mon Sep 17 00:00:00 2001 From: BudzioT Date: Tue, 24 Dec 2024 16:20:07 +0100 Subject: [PATCH 2/2] Fixed white border at the top and bottom --- src/app/harbor/battles/battles.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/app/harbor/battles/battles.tsx b/src/app/harbor/battles/battles.tsx index 1d3573a3..33da9921 100644 --- a/src/app/harbor/battles/battles.tsx +++ b/src/app/harbor/battles/battles.tsx @@ -166,7 +166,10 @@ export default function Matchups({ session }: { session: HsSession }) { if (currentStep >= totalSteps) { clearInterval(spinInterval) document.body.style.transform = 'rotate(0deg)' // reset to initial state - document.body.style.paddingTop = '1px' + document.body.style.paddingTop = '0' + document.body.style.paddingBottom = '0' + document.body.style.transform = 'none' + document.body.style.willChange = 'auto' } }, interval) }