Merge pull request #1433 from tomo666/develop

Fix Hardcoded strings for L10N ready
chrismaltby · May 28, 2024 · ac2404e · ac2404e
2 parents cf713b8 + b6f3246
commit ac2404e
Show file tree

Hide file tree

Showing 13 changed files with 168 additions and 76 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Darkened conditional event header colours in dark theme
 - Patron list in credits now fetches most up to date list of members from GitHub if an internet connection is available
 - Previous "Name in Credits" tier members on Patreon are now still shown even after their membership has finished (your support is still very much appreciated!)
+- Updated Japanese localisation. [@tomo666](https://github.com/tomo666)
 - Update GBVM script view in debugger to show human readable labels
 
 ### Fixed

diff --git a/src/components/forms/ActorSelect.tsx b/src/components/forms/ActorSelect.tsx
@@ -36,7 +36,7 @@ type ActorOption = Option & {
 
 const allCustomEventActors = Array.from(Array(10).keys()).map((i) => ({
   id: String(i),
-  name: `Actor ${String.fromCharCode("A".charCodeAt(0) + i)}`,
+  letter: String.fromCharCode("A".charCodeAt(0) + i),
 }));
 
 export const ActorSelect = ({
@@ -77,13 +77,15 @@ export const ActorSelect = ({
     if (context.type === "script" && customEvent) {
       setOptions([
         {
-          label: "Player",
+          label: l10n("FIELD_PLAYER"),
           value: "player",
           spriteSheetId: playerSpriteSheetId,
         },
         ...allCustomEventActors.map((actor) => {
           return {
-            label: customEvent.actors[actor.id]?.name ?? actor.name,
+            label:
+              customEvent.actors[actor.id]?.name ??
+              `${l10n("FIELD_ACTOR")} ${actor.letter}`,
             value: actor.id,
           };
         }),
@@ -106,7 +108,7 @@ export const ActorSelect = ({
             ]
           : []),
         {
-          label: "Player",
+          label: l10n("FIELD_PLAYER"),
           value: "player",
           spriteSheetId: playerSpriteSheetId,
         },

diff --git a/src/components/forms/ColorModeSelect.tsx b/src/components/forms/ColorModeSelect.tsx
@@ -6,6 +6,7 @@ import {
   Select,
   SelectCommonProps,
 } from "ui/form/Select";
+import l10n from "shared/lib/lang/l10n";
 
 interface ColorModeSelectProps extends SelectCommonProps {
   name: string;
@@ -18,35 +19,35 @@ export interface ColorModeOption {
   label: string;
 }
 
-const colorModeOptions: ColorModeOption[] = [
-  {
-    value: "mono",
-    label: "Monochrome",
-  },
-  {
-    value: "mixed",
-    label: "Color + Monochrome",
-  },
-  {
-    value: "color",
-    label: "Color Only",
-  },
-];
-
 export const ColorModeSelect: FC<ColorModeSelectProps> = ({
   value,
   onChange,
 }) => {
   const [currentValue, setCurrentValue] = useState<Option>();
   const colorModeOptionsInfo: { [key: string]: string } = useMemo(
     () => ({
-      mono: "GB, GB Color, Pocket",
-      mixed: "GB, GB Color, Pocket",
-      color: "GB Color, Pocket",
+      mono: l10n("FIELD_COLOR_MODE_MONO_INFO"),
+      mixed: l10n("FIELD_COLOR_MODE_COLOR_MONO_INFO"),
+      color: l10n("FIELD_COLOR_MODE_COLOR_ONLY_INFO"),
     }),
     []
   );
 
+  const colorModeOptions: ColorModeOption[] = [
+    {
+	  value: "mono",
+	  label: l10n("FIELD_COLOR_MODE_MONO"),
+    },
+    {
+	  value: "mixed",
+	  label: l10n("FIELD_COLOR_MODE_COLOR_MONO"),
+    },
+    {
+	  value: "color",
+	  label: l10n("FIELD_COLOR_MODE_COLOR_ONLY"),
+    },
+  ];
+
   useEffect(() => {
     const currentColorMode = colorModeOptions.find((e) => e.value === value);
     if (currentColorMode) {

diff --git a/src/components/forms/ObjPaletteSelect.tsx b/src/components/forms/ObjPaletteSelect.tsx
@@ -6,6 +6,7 @@ import {
   Select,
   SingleValueWithPreview,
 } from "ui/form/Select";
+import l10n from "shared/lib/lang/l10n";
 
 interface ObjPaletteSelectProps {
   name: string;
@@ -22,12 +23,12 @@ interface ObjPaletteOption {
 const options: ObjPaletteOption[] = [
   {
     value: "OBP0",
-    label: "Palette 0: OBP0",
+    label: "0: OBP0",
     colors: ["E8F8E0", "B0F088", "", "202850"],
   },
   {
     value: "OBP1",
-    label: "Palette 1: OBP1",
+    label: "1: OBP1",
     colors: ["E8F8E0", "509878", "", "202850"],
   },
 ];
@@ -53,7 +54,7 @@ export const ObjPaletteSelect: FC<ObjPaletteSelectProps> = ({
               <PaletteBlock type="sprite" colors={option.colors} size={20} />
             }
           >
-            {option.label}
+            {l10n("FIELD_PALETTE")} {option.label}
           </OptionLabelWithPreview>
         );
       }}
@@ -68,7 +69,7 @@ export const ObjPaletteSelect: FC<ObjPaletteSelectProps> = ({
               />
             }
           >
-            {currentValue?.label}
+            {l10n("FIELD_PALETTE")} {currentValue?.label}
           </SingleValueWithPreview>
         ),
       }}

diff --git a/src/components/forms/PaletteIndexSelect.tsx b/src/components/forms/PaletteIndexSelect.tsx
@@ -1,9 +1,9 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useMemo, useState } from "react";
 import { useAppSelector } from "store/hooks";
-import { DMG_PALETTE } from "consts";
 import l10n from "shared/lib/lang/l10n";
 import {
-  paletteSelectors,
+  getLocalisedDMGPalette,
+  getLocalisedPalettesLookup,
   sceneSelectors,
 } from "store/features/entities/entitiesState";
 import { Palette } from "shared/lib/entities/entitiesTypes";
@@ -41,11 +41,12 @@ export const PaletteIndexSelect: FC<PaletteIndexSelectProps> = ({
     sceneSelectors.selectById(state, previewAsSceneId)
   );
   const palettesLookup = useAppSelector((state) =>
-    paletteSelectors.selectEntities(state)
+    getLocalisedPalettesLookup(state)
   );
   const defaultSpritePaletteIds = useAppSelector(
     (state) => state.project.present.settings.defaultSpritePaletteIds
   );
+  const dmgPalette = useMemo(getLocalisedDMGPalette, []);
 
   useEffect(() => {
     setOptions(
@@ -81,14 +82,14 @@ export const PaletteIndexSelect: FC<PaletteIndexSelectProps> = ({
             preview={
               <PaletteBlock
                 type="sprite"
-                colors={option.palette?.colors || DMG_PALETTE.colors}
+                colors={option.palette?.colors || dmgPalette.colors}
                 size={20}
               />
             }
           >
             {option.label}
             {": "}
-            {option.palette?.name || DMG_PALETTE.name}
+            {option.palette?.name || dmgPalette.name}
           </OptionLabelWithPreview>
         );
       }}
@@ -98,14 +99,14 @@ export const PaletteIndexSelect: FC<PaletteIndexSelectProps> = ({
             preview={
               <PaletteBlock
                 type="sprite"
-                colors={currentValue?.palette?.colors || DMG_PALETTE.colors}
+                colors={currentValue?.palette?.colors || dmgPalette.colors}
                 size={20}
               />
             }
           >
             {currentValue?.label}
             {": "}
-            {currentValue?.palette?.name || DMG_PALETTE.name}
+            {currentValue?.palette?.name || dmgPalette.name}
           </SingleValueWithPreview>
         ),
       }}

diff --git a/src/components/forms/PaletteSelect.tsx b/src/components/forms/PaletteSelect.tsx
@@ -1,8 +1,10 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useMemo, useState } from "react";
 import { useAppSelector } from "store/hooks";
 import styled from "styled-components";
-import { DMG_PALETTE } from "consts";
-import { paletteSelectors } from "store/features/entities/entitiesState";
+import {
+  getLocalisedDMGPalette,
+  getLocalisedPalettes,
+} from "store/features/entities/entitiesState";
 import { Palette } from "shared/lib/entities/entitiesTypes";
 import PaletteBlock from "components/forms/PaletteBlock";
 import {
@@ -13,7 +15,6 @@ import {
   SelectCommonProps,
 } from "ui/form/Select";
 import l10n from "shared/lib/lang/l10n";
-import { paletteName } from "shared/lib/entities/entitiesHelpers";
 
 interface PaletteSelectProps extends SelectCommonProps {
   name: string;
@@ -53,10 +54,11 @@ export const PaletteSelect: FC<PaletteSelectProps> = ({
   keepLabel,
   ...selectProps
 }) => {
-  const palettes = useAppSelector((state) => paletteSelectors.selectAll(state));
+  const palettes = useAppSelector((state) => getLocalisedPalettes(state));
   const [options, setOptions] = useState<PaletteOption[]>([]);
   const [currentPalette, setCurrentPalette] = useState<Palette>();
   const [currentValue, setCurrentValue] = useState<PaletteOption>();
+  const dmgPalette = useMemo(getLocalisedDMGPalette, []);
 
   useEffect(() => {
     setOptions(
@@ -84,18 +86,18 @@ export const PaletteSelect: FC<PaletteSelectProps> = ({
                 label: optionalLabel || "None",
                 palette:
                   palettes.find((p) => p.id === optionalDefaultPaletteId) ||
-                  DMG_PALETTE,
+                  dmgPalette,
               },
             ] as PaletteOption[])
           : ([] as PaletteOption[]),
         {
-          value: DMG_PALETTE.id,
-          label: DMG_PALETTE.name,
-          palette: DMG_PALETTE as Palette,
+          value: dmgPalette.id,
+          label: dmgPalette.name,
+          palette: dmgPalette,
         },
-        palettes.map((palette, index) => ({
+        palettes.map((palette) => ({
           value: palette.id,
-          label: paletteName(palette, index),
+          label: palette.name,
           palette,
         }))
       )
@@ -108,15 +110,16 @@ export const PaletteSelect: FC<PaletteSelectProps> = ({
     optional,
     optionalDefaultPaletteId,
     optionalLabel,
+    dmgPalette,
   ]);
 
   useEffect(() => {
-    if (value === DMG_PALETTE.id) {
-      setCurrentPalette(DMG_PALETTE as Palette);
+    if (value === dmgPalette.id) {
+      setCurrentPalette(dmgPalette);
     } else {
       setCurrentPalette(palettes.find((v) => v.id === value));
     }
-  }, [palettes, value]);
+  }, [dmgPalette, palettes, value]);
 
   useEffect(() => {
     if (canKeep && value === "keep") {
@@ -137,7 +140,7 @@ export const PaletteSelect: FC<PaletteSelectProps> = ({
       });
     } else if (optional) {
       const optionalPalette =
-        palettes.find((p) => p.id === optionalDefaultPaletteId) || DMG_PALETTE;
+        palettes.find((p) => p.id === optionalDefaultPaletteId) || dmgPalette;
       setCurrentValue({
         value: "",
         label: optionalLabel || "None",
@@ -146,8 +149,8 @@ export const PaletteSelect: FC<PaletteSelectProps> = ({
     } else {
       setCurrentValue({
         value: "",
-        label: DMG_PALETTE.name,
-        palette: DMG_PALETTE as Palette,
+        label: dmgPalette.name,
+        palette: dmgPalette,
       });
     }
   }, [
@@ -160,6 +163,7 @@ export const PaletteSelect: FC<PaletteSelectProps> = ({
     keepLabel,
     value,
     canRestore,
+    dmgPalette,
   ]);
 
   const onSelectChange = (newValue: Option) => {

diff --git a/src/components/forms/PaletteSelectButton.tsx b/src/components/forms/PaletteSelectButton.tsx
@@ -1,12 +1,14 @@
 import React, { FC, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
-import { paletteSelectors } from "store/features/entities/entitiesState";
+import {
+  getLocalisedDMGPalette,
+  getLocalisedPaletteById,
+} from "store/features/entities/entitiesState";
 import PaletteBlock from "components/forms/PaletteBlock";
 import { SelectMenu, selectMenuStyleProps } from "ui/form/Select";
 import { RelativePortal } from "ui/layout/RelativePortal";
 import { PaletteSelect } from "./PaletteSelect";
 import navigationActions from "store/features/navigation/navigationActions";
-import { DMG_PALETTE } from "consts";
 import { useAppDispatch, useAppSelector } from "store/hooks";
 
 type PaletteSelectProps = {
@@ -77,13 +79,11 @@ export const PaletteSelectButton: FC<PaletteSelectProps> = ({
 }) => {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const timerRef = useRef<number | null>(null);
+
   const palette =
     useAppSelector((state) =>
-      paletteSelectors.selectById(
-        state,
-        value || optionalDefaultPaletteId || ""
-      )
-    ) || DMG_PALETTE;
+      getLocalisedPaletteById(state, value || optionalDefaultPaletteId || "")
+    ) || getLocalisedDMGPalette();
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [buttonFocus, setButtonFocus] = useState<boolean>(false);
   const dispatch = useAppDispatch();

diff --git a/src/components/sprites/SpriteEditor.tsx b/src/components/sprites/SpriteEditor.tsx
@@ -682,7 +682,7 @@ export const SpriteEditor = ({
               </FormSectionTitle>
               {!isDefaultState && (
                 <FormRow>
-                  <FormField name="stateName" label="State Name">
+                  <FormField name="stateName" label={l10n("FIELD_STATE_NAME")}>
                     <AnimationStateSelect
                       name="stateName"
                       value={spriteState.name}

diff --git a/src/components/world/BrushToolbar.tsx b/src/components/world/BrushToolbar.tsx
@@ -79,6 +79,7 @@ import {
 } from "./BrushToolbarIcons";
 import { RelativePortal } from "ui/layout/RelativePortal";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import { paletteName } from "shared/lib/entities/entitiesHelpers";
 
 interface BrushToolbarProps {
   hasFocusForKeyboardShortcuts: () => boolean;
@@ -569,7 +570,7 @@ const BrushToolbar = ({ hasFocusForKeyboardShortcuts }: BrushToolbarProps) => {
               active={paletteIndex === selectedPalette}
               title={`${l10n("TOOL_PALETTE_N", {
                 number: paletteIndex + 1,
-              })} (${paletteIndex + 1}) - ${palettes[paletteIndex]?.name}`}
+              })} (${paletteIndex + 1}) - ${paletteName(palettes[paletteIndex], -1)}`}
             >
               <PaletteBlock
                 colors={palettes[paletteIndex]?.colors ?? []}