Adds feat to reduce animations.

public/locales/de.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "Erweitert",
 	"Dialog.advanced.displayDuration": "Anzeigedauer für Overlay",
 	"Dialog.advanced.displayDurationUnit": "Sek.",
+	"Dialog.advanced.otherOptions": "Weitere Optionen",
+	"Dialog.advanced.reduceAnimations": "Animationen reduzieren",
 
 	"Dialog.data": "Daten",
 	"Dialog.dataSource": "Datenquelle",

public/locales/en.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "Advanced",
 	"Dialog.advanced.displayDuration": "Display Duration for Overlay",
 	"Dialog.advanced.displayDurationUnit": "sec",
+	"Dialog.advanced.otherOptions": "Other Options",
+	"Dialog.advanced.reduceAnimations": "Reduce Animations",
 
 	"Dialog.data": "Data",
 	"Dialog.dataSource": "Data Source",

public/locales/es-419.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "Avanzado",
 	"Dialog.advanced.displayDuration": "Duración de visualización para la superposición",
 	"Dialog.advanced.displayDurationUnit": "seg",
+	"Dialog.advanced.otherOptions": "Otras opciones",
+	"Dialog.advanced.reduceAnimations": "Reducir animaciones",
 
 	"Dialog.data": "Datos",
 	"Dialog.dataSource": "Fuente de datos",
@@ -37,8 +39,8 @@
 	"EggGraph.quota": "Cupo",
 	"EggGraph.wave": "Oleada <big>{wave}</big>",
 	"EggGraph.extraWave": "Oleada extra",
-	"EggGraph.clear": "✓",
-	"EggGraph.fail": "✘",
+	"EggGraph.clear": "âÿÿ",
+	"EggGraph.fail": "âÿÿ",
 
 	"Dialog.log": "Registro",
 

public/locales/es.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "Avanzado",
 	"Dialog.advanced.displayDuration": "Duración de visualización para la superposición",
 	"Dialog.advanced.displayDurationUnit": "seg",
+	"Dialog.advanced.otherOptions": "Otras opciones",
+	"Dialog.advanced.reduceAnimations": "Reducir animaciones",
 
 	"Dialog.data": "Datos",
 	"Dialog.dataSource": "Fuente de datos",
@@ -37,8 +39,8 @@
 	"EggGraph.quota": "Cupo",
 	"EggGraph.wave": "Ofensiva <big>{wave}</big>",
 	"EggGraph.extraWave": "Ofensiva extra",
-	"EggGraph.clear": "✓",
-	"EggGraph.fail": "✘",
+	"EggGraph.clear": "âÿÿ",
+	"EggGraph.fail": "âÿÿ",
 
 	"Dialog.log": "Registro",
 

public/locales/fr-CA.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "Avancé",
 	"Dialog.advanced.displayDuration": "Durée d'affichage pour la superposition",
 	"Dialog.advanced.displayDurationUnit": "sec",
+	"Dialog.advanced.otherOptions": "Autres options",
+	"Dialog.advanced.reduceAnimations": "Réduire les animations",
 
 	"Dialog.data": "Données",
 	"Dialog.dataSource": "Source de données",

public/locales/fr.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "Avancé",
 	"Dialog.advanced.displayDuration": "Durée d'affichage pour la superposition",
 	"Dialog.advanced.displayDurationUnit": "sec",
+	"Dialog.advanced.otherOptions": "Autres options",
+	"Dialog.advanced.reduceAnimations": "Réduire les animations",
 
 	"Dialog.data": "Données",
 	"Dialog.dataSource": "Source de données",

public/locales/it.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "Avanzate",
 	"Dialog.advanced.displayDuration": "Durata di visualizzazione per la sovrapposizione",
 	"Dialog.advanced.displayDurationUnit": "sec",
+	"Dialog.advanced.otherOptions": "Altre opzioni",
+	"Dialog.advanced.reduceAnimations": "Riduci le animazioni",
 
 	"Dialog.data": "Dati",
 	"Dialog.dataSource": "Fonte di dati",

public/locales/ja.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "詳細",
 	"Dialog.advanced.displayDuration": "オーバーレイの表示時間",
 	"Dialog.advanced.displayDurationUnit": "秒",
+	"Dialog.advanced.otherOptions": "その他のオプション",
+	"Dialog.advanced.reduceAnimations": "アニメーションを減らす",
 
 	"Dialog.data": "データ",
 	"Dialog.dataSource": "データソース",

public/locales/ko.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "고급",
 	"Dialog.advanced.displayDuration": "오버레이 표시 시간",
 	"Dialog.advanced.displayDurationUnit": "초",
+	"Dialog.advanced.otherOptions": "기타 옵션",
+	"Dialog.advanced.reduceAnimations": "애니메이션 줄이기",
 
 	"Dialog.data": "데이터",
 	"Dialog.dataSource": "데이터 소스",

public/locales/nl.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "Geavanceerd",
 	"Dialog.advanced.displayDuration": "Weergaveduur voor overlay",
 	"Dialog.advanced.displayDurationUnit": "sec",
+	"Dialog.advanced.otherOptions": "Andere Opties",
+	"Dialog.advanced.reduceAnimations": "Animaties verminderen",
 
 	"Dialog.data": "Gegevens",
 	"Dialog.dataSource": "Gegevensbron",

public/locales/zh-CN.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "高级",
 	"Dialog.advanced.displayDuration": "叠加显示时长",
 	"Dialog.advanced.displayDurationUnit": "秒",
+	"Dialog.advanced.otherOptions": "其他选项",
+	"Dialog.advanced.reduceAnimations": "减少动画",
 
 	"Dialog.data": "数据",
 	"Dialog.dataSource": "数据源",

public/locales/zh-TW.json

@@ -5,6 +5,8 @@
 	"Dialog.advanced": "高級",
 	"Dialog.advanced.displayDuration": "疊加顯示時長",
 	"Dialog.advanced.displayDurationUnit": "秒",
+	"Dialog.advanced.otherOptions": "其他選項",
+	"Dialog.advanced.reduceAnimations": "減少動畫",
 
 	"Dialog.data": "資料",
 	"Dialog.dataSource": "資料來源",

src/app/App.tsx

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
 import { IntlProvider } from 'react-intl'
 
 import { useEnvironment } from '@/core/components/EnvironmentProvider'
+import { useBodyClass } from '@/core/hooks/bodyclass'
 import { loadLocale } from '@/core/utils/language'
 import NotificationController from '@/notification/components/NotificationController'
 import OverlayController from '@/overlay/components/OverlayController'
@@ -15,7 +16,10 @@ import { useAppSelector } from './hooks'
 const App = () => {
 	const [messages, setMessages] = useState(null)
 
-	const userLanguage = useEnvironment()?.lang ?? 'en'
+	useBodyClass()
+
+	const environment = useEnvironment()
+	const userLanguage = environment?.lang ?? 'en'
 	const lang = useAppSelector(state => state.config.language) ?? userLanguage
 	useEffect(() => {
 		const fetchMessages = async () => {
@@ -24,6 +28,7 @@ const App = () => {
 			setMessages(messages)
 		}
 		if (lang === 'en') {
+			document.documentElement.setAttribute('lang', 'en')
 			setMessages(null)
 		} else {
 			fetchMessages()

src/index.css

@@ -244,3 +244,13 @@ button {
 	border-radius: var(--ctl-radius);
 	outline: 2px solid #FFFC;
 }
+
+@keyframes fadeIn {
+	from { opacity: 0; }
+	to { opacity: 1; }
+}
+
+@keyframes fadeOut {
+	from { opacity: 1; }
+	to { opacity: 0; }
+}

src/modules/core/components/EnvironmentProvider/index.tsx

@@ -7,6 +7,7 @@ import { type BroadcastSoftwareInfo, detectBroadcast } from '../../utils/broadca
 interface EnvrionmentInfo {
 	broadcast?: BroadcastSoftwareInfo
 	lang: string
+	reduced: boolean
 	secure: boolean
 }
 
@@ -15,10 +16,11 @@ const EnvironmentContext = createContext<EnvrionmentInfo | undefined>(undefined)
 const EnvironmentProvider = ({ children }: PropsWithChildren) => {
 	const broadcast = detectBroadcast()
 	const lang = detectLanguage()
+	const reduced = window.matchMedia('(prefers-reduced-motion:reduce)').matches
 	const secure = window.location.protocol === 'https:'
 	const environment: EnvrionmentInfo = broadcast
-		? { broadcast, lang, secure }
-		: { lang, secure }
+		? { broadcast, lang, reduced, secure }
+		: { lang, reduced, secure }
 
 	return (
 		<EnvironmentContext.Provider value={environment}>

src/modules/core/hooks/bodyclass.ts

@@ -0,0 +1,35 @@
+import { useLayoutEffect } from 'react'
+
+import { useAppSelector } from 'app/hooks'
+
+import { useEnvironment } from '../components/EnvironmentProvider'
+
+export const useBodyClass = () => {
+	const environment = useEnvironment()
+	const broadcastEnabled = (environment && 'broadcast' in environment) ?? false
+
+	let reducedEnabled = useAppSelector(state => state.config.reduced)
+	if (reducedEnabled === undefined) {
+		reducedEnabled = environment?.reduced
+		if (reducedEnabled === undefined) {
+			reducedEnabled = false
+		}
+	}
+
+	useLayoutEffect(() => {
+		if (broadcastEnabled) {
+			document.body.classList.add('env-nonblur')
+		}
+		if (reducedEnabled) {
+			document.body.classList.add('ax-reduced')
+		}
+		return () => {
+			if (broadcastEnabled) {
+				document.body.classList.remove('env-nonblur')
+			}
+			if (reducedEnabled) {
+				document.body.classList.remove('ax-reduced')
+			}
+		}
+	}, [reducedEnabled])
+}

src/modules/notification/components/NotificationHost/styles.css

@@ -32,16 +32,6 @@
 	}
 }
 
-@keyframes fadeIn {
-	from { opacity: 0; }
-	to { opacity: 1; }
-}
-
-@keyframes fadeOut {
-	from { opacity: 1; }
-	to { opacity: 0; }
-}
-
 @keyframes slideRight {
 	from {
 		transform: translateX(var(--radix-toast-swipe-end-x));

src/modules/settings/index.tsx

@@ -1,5 +1,6 @@
 import './styles.css'
 
+import { memo } from 'react'
 import { useIntl } from 'react-intl'
 
 import { XMarkIcon } from '@heroicons/react/16/solid'
@@ -76,4 +77,4 @@ const SettingsWindow = () => {
 	)
 }
 
-export default SettingsWindow
+export default memo(SettingsWindow)

src/modules/settings/messages.ts

@@ -22,6 +22,14 @@ const DialogMessages = defineMessages({
 		id: 'Dialog.advanced.displayDurationUnit',
 		defaultMessage: 'sec',
 	},
+	advancedOtherOptions: {
+		id: 'Dialog.advanced.otherOptions',
+		defaultMessage: 'Other Options',
+	},
+	advancedReduceAnimations: {
+		id: 'Dialog.advanced.reduceAnimations',
+		defaultMessage: 'Reduce Animations',
+	},
 
 	dataSource: {
 		id: 'Dialog.dataSource',

src/modules/settings/pages/AdvancedPage.tsx

@@ -2,6 +2,8 @@ import { useCallback } from 'react'
 import { useIntl } from 'react-intl'
 import { useDispatch } from 'react-redux'
 
+import CheckBox from '@/core/components/CheckBox'
+import { useEnvironment } from '@/core/components/EnvironmentProvider'
 import SliderBox from '@/core/components/SliderBox'
 
 import { useAppSelector } from 'app/hooks'
@@ -10,6 +12,7 @@ import DialogMessages from '../messages'
 import {
 	setNotifyOnQuotaMetDuration,
 	setNotifyOnWaveFinishedDuration,
+	setReduced,
 } from '../slicers'
 
 const AdvancedPage = () => {
@@ -21,13 +24,24 @@ const AdvancedPage = () => {
 	const notifyOnWaveFinished = useAppSelector(state => state.config.notifyOnWaveFinished)
 	const notifyOnWaveFinishedDuration = useAppSelector(state => state.config.notifyOnWaveFinishedDuration) ?? 12.0
 
+	let reducedEnabled = useAppSelector(state => state.config.reduced)
+	if (reducedEnabled === undefined) {
+		reducedEnabled = useEnvironment()?.reduced
+		if (reducedEnabled === undefined) {
+			reducedEnabled = false
+		}
+	}
+
 	const dispatch = useDispatch()
 	const handleNotifyOnQuotaMetDuration = useCallback((notifyOnQuotaMetDuration: number) => {
 		dispatch(setNotifyOnQuotaMetDuration(notifyOnQuotaMetDuration))
 	}, [dispatch])
 	const handleNotifyOnWaveFinishedDuration = useCallback((notifyOnWaveFinishedDuration: number) => {
 		dispatch(setNotifyOnWaveFinishedDuration(notifyOnWaveFinishedDuration))
 	}, [dispatch])
+	const handleReduced = useCallback((reduced: boolean) => {
+		dispatch(setReduced(reduced))
+	}, [dispatch])
 
 	return (
 		<>
@@ -64,6 +78,19 @@ const AdvancedPage = () => {
 					onValueChange={handleNotifyOnWaveFinishedDuration}
 				/>
 			</section>
+
+			<section className='Form-group'>
+				<h3>
+					{intl.formatMessage(DialogMessages.advancedOtherOptions)}
+				</h3>
+				<CheckBox
+					id='reduced'
+					checked={reducedEnabled}
+					onCheckedChange={handleReduced}
+				>
+					{intl.formatMessage(DialogMessages.advancedReduceAnimations)}
+				</CheckBox>
+			</section>
 		</>
 	)
 }

src/modules/settings/slicers/index.ts

@@ -11,6 +11,7 @@ interface ConfigState {
 	notifyOnQuotaMetDuration?: number
 	notifyOnWaveFinished?: boolean
 	notifyOnWaveFinishedDuration?: number
+	reduced?: boolean
 	server?: string
 }
 
@@ -43,6 +44,9 @@ const configSlice = createSlice({
 		setNotifyOnWaveFinishedDuration(state, action: PayloadAction<number | undefined>) {
 			state.notifyOnWaveFinishedDuration = action.payload
 		},
+		setReduced(state, action: PayloadAction<boolean | undefined>) {
+			state.reduced = action.payload
+		},
 		setServer(state, action: PayloadAction<string | undefined>) {
 			const server = action.payload
 			if (server && server != import.meta.env.VITE_WS_SERVER) {
@@ -70,6 +74,7 @@ export const {
 	setNotifyOnQuotaMetDuration,
 	setNotifyOnWaveFinished,
 	setNotifyOnWaveFinishedDuration,
+	setReduced,
 	setServer,
 } = configSlice.actions
 export default persistConfigReducer

src/modules/settings/styles.css

@@ -33,6 +33,9 @@ body:not(.env-nonblur) .Dialog-content {
 	-webkit-backdrop-filter: var(--wnd-backdrop);
 	backdrop-filter: var(--wnd-backdrop);
 }
+.ax-reduced .Dialog-content {
+	animation: fadeIn 167ms ease-out;
+}
 
 .Dialog-tab {
 	display: flex;
@@ -96,6 +99,9 @@ body:not(.env-nonblur) .Dialog-content {
 
 	animation: tabContentShow 167ms ease-in-out;
 }
+.ax-reduced .Dialog-tabcontent {
+	animation: none;
+}
 
 .Form-title {
 	margin: 0;