Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

kiosk: lf all the strings #9710

Merged
merged 1 commit into from
Oct 6, 2023
Merged

kiosk: lf all the strings #9710

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion kiosk/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,6 @@ function App() {
} else if (addGame) {
navigate(KioskState.ScanQR);
}
window.location.hash = "";
}
}, [hash, ready]);

Expand Down
18 changes: 8 additions & 10 deletions kiosk/src/Components/AddingGame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions kiosk/src/Components/AppModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions kiosk/src/Components/ConfirmModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
];
Expand Down
8 changes: 4 additions & 4 deletions kiosk/src/Components/EnterHighScore.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion kiosk/src/Components/ErrorModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const ErrorModal: React.FC<IProps> = ({
className={`common-modal-button confirm error`}
onClick={cancelClicked}
>
Okay
{lf("Okay")}
</button>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion kiosk/src/Components/GameList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
Expand Down
2 changes: 1 addition & 1 deletion kiosk/src/Components/GameMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions kiosk/src/Components/GameOver.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions kiosk/src/Components/GameSlide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && (
Expand Down
4 changes: 2 additions & 2 deletions kiosk/src/Components/HighScoresList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
10 changes: 3 additions & 7 deletions kiosk/src/Components/MainMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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>
Expand All @@ -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>
)}
Expand Down
7 changes: 3 additions & 4 deletions kiosk/src/Components/QrScanner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions kiosk/src/Components/QrSuccess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
};
Expand Down
20 changes: 10 additions & 10 deletions kiosk/src/Components/ScanQR.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.")
);
}
}
Expand Down Expand Up @@ -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)}
Copy link
Contributor

@srietkerk srietkerk Oct 6, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we want the kioskId to be in this lf, unless lf doesn't do anything to random alpha-numeric strings. I'm pretty sure that the backend will always generate a code that has letters in English, so if any of the alpha characters are translated, users would never be able to upload to their kiosk.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

kioskId just gets substituted in here, not translated -- only first parameter in lf / rlf is pulled for translation

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I figured that the whole string would get translated once the kioskId was passed in. So that means if you have a string that possibly changes, like maybe a string that changes with state, you would need to wrap that string in lf to make sure that the string stored as a different variable gets translated?

Ex:

const [stateString, setStateString] = useState(lf("hello"));
<>
<p>
{ lf("Kiosk {0}", stateString) }
</p>
</>

So in this example, if stateString didn't have that lf, then stateString would just be in English when the Kiosk {stateString} string is translated?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The first argument to lf (the string literal) is sent to translation. But this doesn't happen at runtime. How I think it works:

  1. As part of the gulp ci build, the strings are sent off to translation.
  2. We get translated strings back and upload them to CDN.
  3. The app downloads the strings for its locale at startup.
  4. The app falls back to the original string literal for any non-translated strings.

</h2>
<div className="scanInstructions">
<div className="qrOption">
Expand All @@ -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>
Expand All @@ -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"
Expand All @@ -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>
Expand All @@ -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 && (
Expand Down
Loading