Merge pull request #1038 from hackclub/reduce_motion

Fixed white blocks after shuffling + allowed reduced motion

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
@@ -163,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)
   }