UI: 'Disable Text Effects' setting applies to "corrupted text" (#944)

src/ui/React/CorruptableText.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import { Settings } from "../../Settings/Settings";
 
 function replace(str: string, i: number, char: string): string {
   return str.substring(0, i) + char + str.substring(i + 1);
@@ -6,13 +7,18 @@ function replace(str: string, i: number, char: string): string {
 
 interface CorruptableTextProps {
   content: string;
+  spoiler: boolean;
 }
 
-function randomize(char: string): string {
+function randomize(char: string, obfuscate: boolean): string {
   const randFrom = (str: string): string => str[Math.floor(Math.random() * str.length)];
   const classes = ["abcdefghijklmnopqrstuvwxyz", "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "1234567890", " _", "()[]{}<>"];
   const other = `!@#$%^&*()_+|\\';"/.,?\`~`;
 
+  if (obfuscate && Math.random() < 0.75) {
+    return randFrom(other);
+  }
+
   for (const c of classes) {
     if (c.includes(char)) return randFrom(c);
   }
@@ -24,6 +30,10 @@ export function CorruptableText(props: CorruptableTextProps): JSX.Element {
   const [content, setContent] = useState(props.content);
 
   useEffect(() => {
+    if (Settings.DisableTextEffects) {
+      return;
+    }
+
     let counter = 5;
     const timers: number[] = [];
     const intervalId = setInterval(() => {
@@ -32,7 +42,7 @@ export function CorruptableText(props: CorruptableTextProps): JSX.Element {
       counter = Math.random() * 5;
       const index = Math.random() * props.content.length;
       const letter = props.content.charAt(index);
-      setContent((content) => replace(content, index, randomize(letter)));
+      setContent((content) => replace(content, index, randomize(letter, false)));
       timers.push(
         window.setTimeout(() => {
           setContent((content) => replace(content, index, letter));
@@ -46,5 +56,10 @@ export function CorruptableText(props: CorruptableTextProps): JSX.Element {
     };
   }, [props.content]);
 
+  if (Settings.DisableTextEffects) {
+    const spoileredContent = content.replaceAll(/./g, (c) => randomize(c, true));
+    return <span>{props.spoiler ? spoileredContent : content}</span>;
+  }
+
   return <span>{content}</span>;
 }