From 66b61215c129e96b7f5ed09a220d7bea2fa136da Mon Sep 17 00:00:00 2001 From: Halit Aksoy Date: Mon, 17 Jun 2024 23:50:13 +0300 Subject: [PATCH] (refactor) add i18n to frontend and refactor --- core/src/index.ts | 3 +- core/src/localization/en.ts | 40 ++++++ core/src/localization/index.ts | 2 + core/src/localization/tr.ts | 40 ++++++ frontend/src/App.tsx | 1 + frontend/src/MancalaApp.tsx | 9 +- frontend/src/components/InfoPanel.tsx | 27 +++-- frontend/src/components/LoadingComponent.tsx | 6 +- frontend/src/components/UserStatus.tsx | 6 +- .../components/headerbar/HeaderbarTitle.tsx | 1 - frontend/src/const/texts.ts | 114 ------------------ frontend/src/context/context.tsx | 4 - frontend/src/localization/i18n.ts | 24 ++++ frontend/src/routes/GamePage.tsx | 35 +++--- frontend/src/routes/Home.tsx | 11 +- frontend/src/routes/LobyPage.tsx | 11 +- frontend/src/routes/PrivacyPage.tsx | 7 +- frontend/src/util/Util.ts | 18 +-- mobile/src/localization/en.ts | 42 ------- mobile/src/localization/i18n.ts | 11 +- mobile/src/localization/tr.ts | 42 ------- 21 files changed, 196 insertions(+), 258 deletions(-) create mode 100644 core/src/localization/en.ts create mode 100644 core/src/localization/index.ts create mode 100644 core/src/localization/tr.ts delete mode 100644 frontend/src/const/texts.ts create mode 100644 frontend/src/localization/i18n.ts delete mode 100644 mobile/src/localization/en.ts delete mode 100644 mobile/src/localization/tr.ts diff --git a/core/src/index.ts b/core/src/index.ts index 60c1161..d7c8ed2 100644 --- a/core/src/index.ts +++ b/core/src/index.ts @@ -1,4 +1,5 @@ export * from './models/index' export * from './rtmt/index' export * from './theme/index' -export * from './storage/storage' \ No newline at end of file +export * from './storage/storage' +export * from './localization/index' \ No newline at end of file diff --git a/core/src/localization/en.ts b/core/src/localization/en.ts new file mode 100644 index 0000000..e60a6e6 --- /dev/null +++ b/core/src/localization/en.ts @@ -0,0 +1,40 @@ +export const en = { + Mancala: "Mancala", + Leave: "Leave The Game", + NewGame: "New Game", + YourTurn: "Your Turn", + OpponentTurn: "Opponent Turn", + GameEnded: "Game Ended", + InternalErrorOccurred: "An internal error has occurred", + YouWon: "You Won", + Won: "Won", + YouLost: "You Lost", + Connecting: "Connecting", + Connected: "Connected", + CannotConnect: "Can't Connect", + ConnectionLost: "Network Connection Lost", + ConnectingAgain: "Connecting Again", + ServerError: "Server Error", + SearchingOpponet: "Searching Opponet", + OpponentLeftTheGame: "Opponent Leaves The Game", + YouLeftTheGame: "You Left The Game", + UserLeftTheGame: "Left The Game", + SearchingOpponent: "Searching Opponent", + PleaseWait: "Please Wait", + GameDraw: "Draw", + Anonymous: "Anonymous", + GameNotFound: "Game Not Found", + Loading: "Loading", + Playing: "Playing", + Error: "Error", + ErrorWhenRetrievingInformation: "An error occured when retrieving information!", + UCanOnlyPlayYourOwnPits: "You can only play your own pits", + UMustWaitUntilCurrentMoveComplete: "You must wait until the current move is complete", + UCanNotPlayEmptyPit: "You can not play empty pit", + AreYouSureToLeaveGame: "Are you sure to leave game?", + Yes: "Yes", + Cancel: "Cancel", + Help: "Help", + WebApp: "Goto WebApp", + Privacy: "Open Privacy Policy" +} \ No newline at end of file diff --git a/core/src/localization/index.ts b/core/src/localization/index.ts new file mode 100644 index 0000000..222c971 --- /dev/null +++ b/core/src/localization/index.ts @@ -0,0 +1,2 @@ +export * from './en' +export * from './tr' \ No newline at end of file diff --git a/core/src/localization/tr.ts b/core/src/localization/tr.ts new file mode 100644 index 0000000..8769fe9 --- /dev/null +++ b/core/src/localization/tr.ts @@ -0,0 +1,40 @@ +export const tr = { + Mancala: "Köçürme", + Leave: "Oyundan Ayrıl", + NewGame: "Yeni Oyun", + YourTurn: "Sıra Sende", + OpponentTurn: "Sıra Rakipte", + GameEnded: "Oyun Bitti", + InternalErrorOccurred: "Dahili bir hata oluştu", + YouWon: "Kazandın", + Won: "Kazandı", + YouLost: "Kaybettin", + Connecting: "Bağlanılıyor", + Connected: "Bağlandı", + CannotConnect: "Bağlanılamadı", + ConnectionLost: "Ağ Bağlantısı Koptu", + ConnectingAgain: "Tekrar Bağlanılıyor", + ServerError: "Sunucu Hatası", + SearchingOpponet: "Rakip Aranıyor", + OpponentLeftTheGame: "Rakip Oyundan Ayrıldı", + YouLeftTheGame: "Sen Oyundan Ayrıldın", + UserLeftTheGame: "Oyundan Ayrıldı", + SearchingOpponent: "Rakip Aranıyor", + PleaseWait: "Lütfen Bekleyin", + GameDraw: "Berabere", + Anonymous: "Anonim", + GameNotFound: "Oyun Bulunamadı", + Loading: "Yükleniyor", + Playing: "Oynuyor", + Error: "Hata", + ErrorWhenRetrievingInformation: "Bilgiler toplanırken bir hata oluştu!", + UCanOnlyPlayYourOwnPits: "Sadece sana ait olan kuyular ile oynayabilirsin", + UMustWaitUntilCurrentMoveComplete: "Devam eden haraketin bitmesini beklemelisin", + UCanNotPlayEmptyPit: "Boş kuyu ile oynayamazsın", + AreYouSureToLeaveGame: "Oyundan ayrılmak istediğine emin misin?", + Yes: "Evet", + Cancel: "İptal", + Help: "Yardım", + WebApp: "Web Uygulamasına Git", + Privacy: "Gizlilik Politikasını Göster" +}; \ No newline at end of file diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index d079d3d..5d670ed 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -2,5 +2,6 @@ import * as React from 'react'; import { createRoot } from 'react-dom/client'; const container = document.getElementById('main'); const root = createRoot(container!); +import './localization/i18n'; import MancalaApp from './MancalaApp'; root.render(); \ No newline at end of file diff --git a/frontend/src/MancalaApp.tsx b/frontend/src/MancalaApp.tsx index 221d773..45ff32b 100644 --- a/frontend/src/MancalaApp.tsx +++ b/frontend/src/MancalaApp.tsx @@ -12,17 +12,20 @@ import Home from './routes/Home'; import { initContext } from './context/context'; import { RTMTWS, ConnectionState } from '@mancala/core'; import { getColorByBrightness } from './util/ColorUtil'; -import { Theme } from './theme/Theme'; +import { Theme } from '@mancala/core'; import LobyPage from './routes/LobyPage'; import PrivacyPage from './routes/PrivacyPage'; import swal from 'sweetalert'; import Util from './util/Util'; import { server } from './const/config'; +import { useTranslation } from 'react-i18next'; const context = initContext(); const MancalaApp: FunctionComponent = () => { + const { t } = useTranslation(); + const [userKey, setUserKey] = useState(undefined); const [connectionState, setConnetionState] = useState("connecting"); @@ -50,7 +53,7 @@ const MancalaApp: FunctionComponent = () => { connectRTMT(userKey); }).catch((error) => { //TODO: check if it is network error! - swal(context.texts.Error + "!", context.texts.ErrorWhenRetrievingInformation, "error"); + swal(t("Error") + "!", t("ErrorWhenRetrievingInformation"), "error"); console.error(error); }); } @@ -88,7 +91,7 @@ const MancalaApp: FunctionComponent = () => { - {Util.getTextByConnectionState(context, connectionState)} + {Util.getTextByConnectionState(context, connectionState, t)} ); diff --git a/frontend/src/components/InfoPanel.tsx b/frontend/src/components/InfoPanel.tsx index 72801b8..da7c2bc 100644 --- a/frontend/src/components/InfoPanel.tsx +++ b/frontend/src/components/InfoPanel.tsx @@ -4,9 +4,11 @@ import { Context } from "../context/context"; import { Game, User } from "@mancala/core"; import { getColorByBrightness } from "../util/ColorUtil"; import CircularPanel from "./CircularPanel"; +import { useTranslation } from "react-i18next"; function getInfoPanelTextByGameState(params: { context: Context; + t: (text: string) => string; game?: Game; currentUser: User; whitePlayer: User; @@ -16,6 +18,7 @@ function getInfoPanelTextByGameState(params: { }): string | undefined { const { context, + t, game, currentUser, whitePlayer, @@ -25,8 +28,8 @@ function getInfoPanelTextByGameState(params: { } = params; if (leftPlayer) { - return isSpectator ? `${leftPlayer.name} ${context.texts.UserLeftTheGame}` : - leftPlayer.id == currentUser.id ? context.texts.YouLeftTheGame : context.texts.OpponentLeftTheGame; + return isSpectator ? `${leftPlayer.name} ${t("UserLeftTheGame")}` : + leftPlayer.id == currentUser.id ? t("YouLeftTheGame") : t("OpponentLeftTheGame"); } const isGameEnded = game?.mancalaGame.state == "ended"; @@ -35,21 +38,21 @@ function getInfoPanelTextByGameState(params: { let whoWon; if (wonPlayerID) { const wonPlayer = wonPlayerID == whitePlayer.id ? whitePlayer : blackPlayer; - whoWon = isSpectator ? `${wonPlayer.name} ${context.texts.Won}` : + whoWon = isSpectator ? `${wonPlayer.name} ${t("Won")}` : game.mancalaGame.getWonPlayerId() === currentUser.id - ? context.texts.YouWon - : context.texts.YouLost; + ? t("YouWon") + : t("YouLost"); } else { - whoWon = context.texts.GameDraw; + whoWon = t("GameDraw"); } - return context.texts.GameEnded + " " + whoWon; + return t("GameEnded") + " " + whoWon; } if (game) { const playingPlayer = game.mancalaGame.checkIsPlayerTurn(whitePlayer.id) ? whitePlayer : blackPlayer; - return isSpectator ? `${playingPlayer.name} ${context.texts.Playing}` : game.mancalaGame.checkIsPlayerTurn(currentUser.id) - ? context.texts.YourTurn - : context.texts.OpponentTurn; + return isSpectator ? `${playingPlayer.name} ${t("Playing")}` : game.mancalaGame.checkIsPlayerTurn(currentUser.id) + ? t("YourTurn") + : t("OpponentTurn"); } return undefined; @@ -76,6 +79,9 @@ const InfoPanel: FunctionComponent<{ visible, isSpectator }) => { + + const { t } = useTranslation(); + if (visible === false) return <>; const isUserTurn = currentUser.id ? game?.mancalaGame.checkIsPlayerTurn(currentUser.id) : false; const containerColor = isUserTurn @@ -88,6 +94,7 @@ const InfoPanel: FunctionComponent<{ ); const text = getInfoPanelTextByGameState({ context, + t, game, currentUser, whitePlayer, diff --git a/frontend/src/components/LoadingComponent.tsx b/frontend/src/components/LoadingComponent.tsx index 5a11337..17ec903 100644 --- a/frontend/src/components/LoadingComponent.tsx +++ b/frontend/src/components/LoadingComponent.tsx @@ -4,8 +4,12 @@ import { Context } from '../context/context'; import { LoadingState } from "@mancala/core"; import { getColorByBrightness } from '../util/ColorUtil'; import CircularPanel from './CircularPanel'; +import { useTranslation } from 'react-i18next'; const LoadingComponent: FunctionComponent<{ context: Context, loadingState: LoadingState }> = ({ context, loadingState }) => { + + const { t } = useTranslation(); + if (loadingState.isUnset() || loadingState.isLoaded()) { return <> } @@ -15,7 +19,7 @@ const LoadingComponent: FunctionComponent<{ context: Context, loadingState: Load context.themeManager.theme.textColor, context.themeManager.theme.textLightColor ); - const text = loadingState.isLoading() ? context.texts.Loading +"..." : loadingState.errorMessage; + const text = loadingState.isLoading() ? t("Loading") +"..." : loadingState.errorMessage; return (

{`${text}`}

diff --git a/frontend/src/components/UserStatus.tsx b/frontend/src/components/UserStatus.tsx index c5c0111..614e48c 100644 --- a/frontend/src/components/UserStatus.tsx +++ b/frontend/src/components/UserStatus.tsx @@ -4,6 +4,7 @@ import { Context } from '../context/context'; import { User } from "@mancala/core"; import { getColorByBrightness } from '../util/ColorUtil'; import Space from './Space'; +import { useTranslation } from 'react-i18next'; export type LayoutMode = "right" | "left"; @@ -15,6 +16,9 @@ const UserStatus: FunctionComponent<{ style?: React.CSSProperties }> = ({ context, user, layoutMode, visible, style }) => { if (visible === false) return <>; + + const { t } = useTranslation(); + const textColorOnBoard = getColorByBrightness( context.themeManager.theme.background, context.themeManager.theme.textColor, @@ -22,7 +26,7 @@ const UserStatus: FunctionComponent<{ ); return (
- {user.isAnonymous ? context.texts.Anonymous : user.name} + {user.isAnonymous ? t("Anonymous") : user.name}