lf all the strings (#9710)

microsoft · Oct 6, 2023 · 0fe377e · 0fe377e
1 parent 28852f6
commit 0fe377e
Show file tree

Hide file tree

Showing 15 changed files with 45 additions and 53 deletions.
diff --git a/kiosk/src/App.tsx b/kiosk/src/App.tsx
@@ -70,7 +70,6 @@ function App() {
             } else if (addGame) {
                 navigate(KioskState.ScanQR);
             }
-            window.location.hash = "";
         }
     }, [hash, ready]);
 

diff --git a/kiosk/src/Components/AddingGame.tsx b/kiosk/src/Components/AddingGame.tsx
@@ -69,7 +69,7 @@ const AddingGame: React.FC<IProps> = ({}) => {
             const kioskUrl = `${window.location.origin}/kiosk#add-game:${kiosk.kioskCode}`;
             return (
                 <div className="innerQRCodeContent">
-                    <h3>{kioskTimeOutInMinutes} minute Kiosk ID</h3>
+                    <h3>{lf("{0} minute Kiosk ID", kioskTimeOutInMinutes)}</h3>
                     <h1 className="kioskCode">{kiosk.kioskCode}</h1>
                     <QRCodeSVG value={kioskUrl} />
                     <div className="kioskLink">
@@ -87,35 +87,33 @@ const AddingGame: React.FC<IProps> = ({}) => {
         } else {
             return (
                 <div className="innerQRCodeContent">
-                    <h3>Generating Kiosk ID...</h3>
+                    <h3>{lf("Generating Kiosk ID...")}</h3>
                 </div>
             );
         }
     };
 
     return (
         <div className="addGame">
-            <h1>Add your game</h1>
+            <h1>{lf("Add your game")}</h1>
             <div className="addGameContent">
                 <div className="addInstructions">
-                    <h2>How to upload your game</h2>
+                    <h2>{lf("How to upload your game")}</h2>
                     <ol>
-                        <li>Use your mobile device to scan the QR code</li>
+                        <li>{lf("Use your mobile device to scan the QR code")}</li>
                         <li>
-                            Use the new page to scan or enter your game's share
-                            code
+                            {lf("Use the new page to scan or enter your game's share code")}
                         </li>
                         <li>
-                            If your game is uploaded successfully, it will be
-                            added to the game list
+                            {lf("If your game is uploaded successfully, it will be added to the game list")}
                         </li>
                     </ol>
                 </div>
                 <div style={{ flexGrow: 1 }} />
                 {qrDivContent()}
             </div>
             <GenericButton autofocus={true} onClick={gotoMainMenu}>
-                {"Return to menu"}
+                {lf("Return to menu")}
             </GenericButton>
         </div>
     );

diff --git a/kiosk/src/Components/AppModal.tsx b/kiosk/src/Components/AppModal.tsx
@@ -57,9 +57,9 @@ export default function AppModal() {
                 >
                     <div className="common-modal-body">
                         <p>
-                            <b>{`Delete "${selectedGame?.name}"? `}</b>
+                            <b>{lf("Delete {0}?", selectedGame?.name)}{" "}</b>
                             {
-                                "The only way to get the game back is by re-uploading it."
+                                lf("The only way to get the game back is by re-uploading it.")
                             }
                         </p>
                     </div>

diff --git a/kiosk/src/Components/ConfirmModal.tsx b/kiosk/src/Components/ConfirmModal.tsx
@@ -20,12 +20,12 @@ const ConfirmModal: React.FC<IProps> = ({
 }) => {
     const actions: ModalAction[] = [
         {
-            label: cancelLabel ?? "Cancel",
+            label: cancelLabel ?? lf("Cancel"),
             onClick: onCancel,
             autofocus: true,
         },
         {
-            label: confirmLabel ?? "Confirm",
+            label: confirmLabel ?? lf("Confirm"),
             onClick: onConfirm,
         },
     ];

diff --git a/kiosk/src/Components/EnterHighScore.tsx b/kiosk/src/Components/EnterHighScore.tsx
@@ -20,8 +20,8 @@ const EnterHighScore: React.FC<IProps> = ({}) => {
     return (
         <div className="enterHighScore">
             <div className="highScoreTitle">
-                <h1>YOU GOT A HIGH SCORE!</h1>
-                <h2>Enter your initials</h2>
+                <h1>{lf("YOU GOT A HIGH SCORE!")}</h1>
+                <h2>{lf("Enter your initials")}</h2>
             </div>
             <div className="highScoreContent">
                 <div className="highScoreList">
@@ -48,8 +48,8 @@ const EnterHighScore: React.FC<IProps> = ({}) => {
 
                 <div className="highScoreInstructions">
                     <ul>
-                        <li>Use up/down to scroll through the alphabet</li>
-                        <li>When you find your initial, press A</li>
+                        <li>{lf("Use up/down to scroll through the alphabet")}</li>
+                        <li>{lf("When you find your initial, press A")}</li>
                     </ul>
                 </div>
             </div>

diff --git a/kiosk/src/Components/ErrorModal.tsx b/kiosk/src/Components/ErrorModal.tsx
@@ -30,7 +30,7 @@ const ErrorModal: React.FC<IProps> = ({
                             className={`common-modal-button confirm error`}
                             onClick={cancelClicked}
                         >
-                            Okay
+                            {lf("Okay")}
                         </button>
                     </div>
                 </div>

diff --git a/kiosk/src/Components/GameList.tsx b/kiosk/src/Components/GameList.tsx
@@ -118,7 +118,7 @@ const GameList: React.FC<IProps> = ({}) => {
     if (!kiosk.allGames?.length) {
         return (
             <div>
-                <p>Currently no kiosk games</p>
+                <p>{lf("Currently no kiosk games")}</p>
             </div>
         );
     }

diff --git a/kiosk/src/Components/GameMenu.tsx b/kiosk/src/Components/GameMenu.tsx
@@ -40,7 +40,7 @@ export const GameMenu: React.FC<IProps> = () => {
                     >
                         <path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z" />
                     </svg>
-                    <p>Delete Game</p>
+                    <p>{lf("Delete Game")}</p>
                 </GenericButton>
             )}
         </div>

diff --git a/kiosk/src/Components/GameOver.tsx b/kiosk/src/Components/GameOver.tsx
@@ -34,17 +34,17 @@ const GameOver: React.FC<IProps> = ({}) => {
 
     return (
         <div className="gameOverPage">
-            <h1>GAME OVER</h1>
-            <h2>Would you like to retry?</h2>
+            <h1>{lf("GAME OVER")}</h1>
+            <h2>{lf("Would you like to retry?")}</h2>
             <div className="gameOverButtons">
                 <GenericButton
                     onClick={handleRetryButtonClick}
                     autofocus={true}
                 >
-                    {"Retry"}
+                    {lf("Retry")}
                 </GenericButton>
                 <GenericButton onClick={gotoMainMenu}>
-                    {"Main Menu"}
+                    {lf("Main Menu")}
                 </GenericButton>
             </div>
         </div>

diff --git a/kiosk/src/Components/GameSlide.tsx b/kiosk/src/Components/GameSlide.tsx
@@ -38,11 +38,11 @@ const GameSlide: React.FC<IProps> = ({ highScores, game }) => {
                     highScores={highScores}
                     highScoreMode={game.highScoreMode}
                 />
-                {game.date && <div className="gameDate">Added {game.date}</div>}
+                {game.date && <div className="gameDate">{lf("Added {0}", game.date)}</div>}
             </div>
 
             {kiosk.selectedGameId && game.id === kiosk.selectedGameId && (
-                <div className="pressStart">Press A to Start</div>
+                <div className="pressStart">{lf("Press A to Start")}</div>
             )}
 
             {kiosk.selectedGameId && game.id === kiosk.selectedGameId && (

diff --git a/kiosk/src/Components/HighScoresList.tsx b/kiosk/src/Components/HighScoresList.tsx
@@ -14,9 +14,9 @@ const HighScoresList: React.FC<IProps> = ({ highScores, highScoreMode }) => {
 
     return (
         <div className="gameHighScores">
-            <h2 className="gameHighScoreHeader">High Scores</h2>
+            <h2 className="gameHighScoreHeader">{lf("High Scores")}</h2>
             {!highScoresExist && (
-                <p className="gameHighScoreContent">None yet</p>
+                <p className="gameHighScoreContent">{lf("None yet")}</p>
             )}
             {highScoresExist && (
                 <ol className="gameHighScoreContent">

diff --git a/kiosk/src/Components/MainMenu.tsx b/kiosk/src/Components/MainMenu.tsx
@@ -12,10 +12,6 @@ interface IProps {}
 const MainMenu: React.FC<IProps> = ({}) => {
     const { state: kiosk } = useContext(AppStateContext);
 
-    const selectedGame = kiosk.allGames.find(
-        g => g.id === kiosk.selectedGameId
-    );
-
     const lockedClassName = kiosk.locked ? " locked" : "";
 
     const ready = usePromise(AppStateReady, false);
@@ -32,7 +28,7 @@ const MainMenu: React.FC<IProps> = ({}) => {
                 <div className="mainMenu">
                     <nav className="mainMenuTopBar">
                         <h1 className={`mainMenuHeader${lockedClassName}`}>
-                            Initializing...
+                            {lf("Initializing...")}
                         </h1>
                     </nav>
                 </div>
@@ -41,15 +37,15 @@ const MainMenu: React.FC<IProps> = ({}) => {
                 <div className="mainMenu">
                     <nav className="mainMenuTopBar">
                         <h1 className={`mainMenuHeader${lockedClassName}`}>
-                            Select a Game
+                            {lf("Select a Game")}
                         </h1>
                         {!kiosk.locked && (
                             <div className="mainMenuButton">
                                 <GenericButton
                                     onClick={gotoAddingGame}
                                     exitDirections={[NavGrid.NavDirection.Down]}
                                 >
-                                    {"Add your game"}
+                                    {lf("Add your game")}
                                 </GenericButton>
                             </div>
                         )}

diff --git a/kiosk/src/Components/QrScanner.tsx b/kiosk/src/Components/QrScanner.tsx
@@ -22,17 +22,16 @@ export const play = async (
             setAddError(error.toString());
             if (error.toString().includes("404")) {
                 setDesc(
-                    "This is likely because the kiosk code is expired. Go back to the kiosk to make a new code."
+                    lf("This is likely because the kiosk code is expired. Go back to the kiosk to make a new code.")
                 );
             } else {
-                setDesc("Something went wrong. Please try again later.");
+                setDesc(lf("Something went wrong. Please try again later."));
             }
         }
     }
 
     function onScanFailure(errorMessage: string, error: any) {
-        console.log("scan failed");
-        throw new Error("bad scan");
+        setDesc(lf("Failed to scan QR code. Please try again."));
     }
 
     try {

diff --git a/kiosk/src/Components/QrSuccess.tsx b/kiosk/src/Components/QrSuccess.tsx
@@ -8,8 +8,8 @@ const QrSuccess: React.FC<{}> = () => {
 
     return (
         <div className="qrSuccess">
-            <p>You have successfully uploaded your game to the kiosk!</p>
-            <p>You can close this window. Happy playing!</p>
+            <p>{lf("You have successfully uploaded your game to the kiosk!")}</p>
+            <p>{lf("You can close this window. Happy playing!")}</p>
         </div>
     );
 };

diff --git a/kiosk/src/Components/ScanQR.tsx b/kiosk/src/Components/ScanQR.tsx
@@ -87,11 +87,11 @@ const ScanQR: React.FC<IProps> = ({}) => {
                 setAddingError(error.toString());
                 if (error.toString().includes("404")) {
                     setErrorDesc(
-                        "The kiosk code expired. Go back to the kiosk to make a new code."
+                        lf("The kiosk code expired. Go back to the kiosk to make a new code.")
                     );
                 } else {
                     setErrorDesc(
-                        "Something went wrong. Please try again later."
+                        lf("Something went wrong. Please try again later.")
                     );
                 }
             }
@@ -131,9 +131,9 @@ const ScanQR: React.FC<IProps> = ({}) => {
     return (
         <div className="scanQrPage">
             <h2>
-                Add game to
+                {lf("Add game to")}
                 <br />
-                Kiosk {kioskId}
+                {lf("Kiosk {0}", kioskId)}
             </h2>
             <div className="scanInstructions">
                 <div className="qrOption">
@@ -142,7 +142,7 @@ const ScanQR: React.FC<IProps> = ({}) => {
                             className="kioskButton"
                             onClick={renderQrScanner}
                         >
-                            Scan QR code
+                            {lf("Scan QR code")}
                         </GenericButton>
                     )}
                     <div id="qrReader" ref={qrReaderRendered}></div>
@@ -152,17 +152,17 @@ const ScanQR: React.FC<IProps> = ({}) => {
                                 className="scanQrButton"
                                 onClick={stopQrScanner}
                             >
-                                Cancel Scan
+                                {lf("Cancel Scan")}
                             </GenericButton>
                             <p className="scanTip">
-                                Tip: Do not use the kiosk's QR code
+                                {lf("Tip: Do not use the kiosk's QR code")}
                             </p>
                         </div>
                     )}
                     <p>OR</p>
                 </div>
                 <div className="linkOption">
-                    <label>Submit share link</label>
+                    <label>{lf("Submit share link")}</label>
                     <input
                         type="url"
                         id="kiosk-share-link"
@@ -182,7 +182,7 @@ const ScanQR: React.FC<IProps> = ({}) => {
                     />
                     {linkError && (
                         <p className="linkError">
-                            Incorrect format for a share link
+                            {lf("Incorrect format for a share link")}
                         </p>
                     )}
                 </div>
@@ -194,7 +194,7 @@ const ScanQR: React.FC<IProps> = ({}) => {
                     tabIndex={0}
                     ref={handleHelpLinkRef}
                 >
-                    How do I get a game's share link or QR code?
+                    {lf("How do I get a game's share link or QR code?")}
                 </a>
             </div>
             {!!addingError && (