Add translation to screen ban feature Closes #1591

app/features/sendouq-settings/routes/q.settings.tsx

@@ -33,6 +33,7 @@ import { assertUnreachable } from "~/utils/types";
 import {
   SENDOUQ_PAGE,
   SENDOUQ_SETTINGS_PAGE,
+  SPLATTERCOLOR_SCREEN_TWITTER_URL,
   navIconUrl,
   preferenceEmojiUrl,
 } from "~/utils/urls";
@@ -673,13 +674,13 @@ function SoundCheckboxes() {
 function Misc() {
   const data = useLoaderData<typeof loader>();
   const [checked, setChecked] = React.useState(Boolean(data.settings.noScreen));
-  const { t } = useTranslation(["common", "q"]);
+  const { t } = useTranslation(["common", "q", "weapons"]);
   const fetcher = useFetcher();
 
   return (
     <details>
       <summary className="q-settings__summary">
-        <div>Misc</div>
+        <div>{t("q:settings.misc.header")}</div>
       </summary>
       <fetcher.Form method="post" className="mb-4 ml-2-5 stack sm">
         <div className="stack horizontal xs items-center">
@@ -690,20 +691,20 @@ function Misc() {
             name="noScreen"
           />
           <label className="mb-0" htmlFor="noScreen">
-            Avoid Splattercolor Screen
+            {t("q:settings.avoid.label", {
+              special: t("weapons:SPECIAL_19"),
+            })}
           </label>
         </div>
         <FormMessage type="info">
-          Accessibility concerns related to the new special have been raised.{" "}
+          {t("q:settings.avoid.explanation")}{" "}
           <a
-            href="https://twitter.com/ProChara/status/1730986554078945562"
+            href={SPLATTERCOLOR_SCREEN_TWITTER_URL}
             target="_blank"
             rel="noopener noreferrer"
           >
-            Read more here
+            {t("q:settings.avoid.readMore")}
           </a>
-          . Enabling this setting will make the special banned in SendouQ
-          lobbies and tournament matches you play via sendou.ink
         </FormMessage>
         <div className="mt-6">
           <SubmitButton

app/features/sendouq/routes/q.match.$id.tsx

@@ -1224,6 +1224,8 @@ function BottomSection({
 }
 
 function ScreenLegalityInfo({ ban }: { ban: boolean }) {
+  const { t } = useTranslation(["q", "weapons"]);
+
   return (
     <div className="q-match__screen-legality">
       <Popover
@@ -1238,8 +1240,12 @@ function ScreenLegalityInfo({ ban }: { ban: boolean }) {
         }
       >
         {ban
-          ? "Weapons with Splattercolor Screen are not allowed in this match"
-          : "Weapons with Splattercolor Screen are allowed in this match"}
+          ? t("q:match.screen.ban", {
+              special: t("weapons:SPECIAL_19"),
+            })
+          : t("q:match.screen.allowed", {
+              special: t("weapons:SPECIAL_19"),
+            })}
       </Popover>
     </div>
   );

app/utils/urls.ts

@@ -70,6 +70,8 @@ export const ipLabsMaps = (pool: string) =>
 export const SPLATOON_3_INK = "https://splatoon3.ink/";
 export const RHODESMAS_FREESOUND_PROFILE_URL =
   "https://freesound.org/people/rhodesmas/";
+export const SPLATTERCOLOR_SCREEN_TWITTER_URL =
+  "https://twitter.com/ProChara/status/1730986554078945562";
 
 export const twitterUrl = (accountName: string) =>
   `https://twitter.com/${accountName}`;

public/locales/en/q.json

@@ -63,7 +63,11 @@
   "settings.sounds.likeReceived": "Like received",
   "settings.sounds.groupNewMember": "Group new member",
   "settings.sounds.matchStarted": "Match started",
+  "settings.misc.header": "Misc",
   "settings.banned": "Banned",
+  "settings.avoid.label": "Avoid {{special}}",
+  "settings.avoid.explanation": "Accessibility concerns related to the new special have been raised. Enabling this setting will make the special banned in SendouQ lobbies and tournament matches you play via sendou.ink.",
+  "settings.avoid.readMore": "Read more about the issues here",
 
   "looking.joiningGroupError": "Before joining another group, leave the current one",
   "looking.goToSettingsPrompt": "To help group finding set your weapon pool and voice chat status on the settings page",
@@ -143,6 +147,8 @@
   "match.reporting": "Reporting {{score}} {{outcome}}",
   "match.outcome.win": "win",
   "match.outcome.loss": "loss",
+  "match.screen.ban": "Weapons with {{special}} are not allowed in this match",
+  "match.screen.allowed": "Weapons with {{special}} are allowed in this match",
 
   "preparing.joinQ": "Join the queue",