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}