feat: 🎸 Implement initial translation system

✅ Closes: #27

CHANGELOG.md

@@ -4,6 +4,7 @@ Lost Dutchman Mine Change Log
 0.0.2 March 24, 2024
 -------------------
 
+- Enh #27: Implement initial translation system (MadejaMaciej)
 - Bug #40: For player resizing with change of window height (MadejaMaciej)
 - Bug #39: For player moving a little bit while resizing the window of game (MadejaMaciej)
 

code-desktop/src/components/Main.tsx

@@ -2,6 +2,8 @@ import React, { useState, useEffect, useCallback } from "react";
 import Menu from "./ui/Menu";
 import Game from "./game/Game";
 import splash from "../images/ui/cover.jpg";
+import { setText } from "../context/language";
+import { SavedGame } from "../types/game";
 
 function getWindowDimensions() {
     const { innerWidth: width, innerHeight: height } = window;
@@ -23,7 +25,7 @@ function Main() {
     const [screen, setScreen] = useState('menu');
     const [gameState, setGameState] = useState({
         location: 'town',
-        backgroundAlt: 'Town background',
+        backgroundAlt: setText('bgTown'),
         playerPosition: {
             x: 0.5,
             y: 0,
@@ -32,10 +34,33 @@ function Main() {
             frame: 0,
         }
     });
-    const [language, setLanguage] = useState('en');
+    const [language, setLanguage] = useState(window.localStorage.getItem('language') || 'en');
+    const [error, setError] = useState('');
 
-    const loadGame = useCallback(() => {
+    const saveGame = useCallback((gameName: string) => {
+        try {
+            const stringifiedGame = JSON.stringify(gameState);
+            window.localStorage.setItem(`${gameName}`, stringifiedGame);
+        } catch (e) {
+            setError(setText('couldNotSave'));
+        }
+    }, []);
+
+    const loadGame = useCallback((gameName: string) => {
+        const gameToLoad: string | undefined = window.localStorage.getItem(gameName);
+
+        if (!gameToLoad) {
+            setError(setText('couldNotLoad'));
+            return;
+        }
 
+        try {
+            const game: SavedGame = JSON.parse(gameToLoad);
+            setGameState(game);
+        } catch(e) {
+            setError(setText('fileCorrupted'));
+            return;
+        }
     }, []);
 
     const setSplashInterval = useCallback(() => {
@@ -45,7 +70,7 @@ function Main() {
             const deltaModifier = delta / 100
             setLastUpdate(now);
             setSplashScreenOpacity(splashScreenOpacity + (0.02 * deltaModifier));
-        }, 20)
+        }, 20);
     }, [])
 
     useEffect(() => {
@@ -76,7 +101,11 @@ function Main() {
                 clearInterval(i);
             }
         }
-    }, [splashScreenOpacity])
+    }, [splashScreenOpacity]);
+
+    useEffect(() => {
+        document.title = setText('title');
+    }, [language])
 
     if (splashScreenOpacity < 1) {
         return (
@@ -91,7 +120,7 @@ function Main() {
     }
 
     if (screen === 'game') {
-        return <Game savedGame={gameState} setGameState={setGameState} windowDimensions={windowDimensions} />;
+        return <Game savedGame={gameState} saveGame={saveGame} setGameState={setGameState} windowDimensions={windowDimensions} />;
     }
 
     return <Menu loadGame={loadGame} setScreen={setScreen} language={language} setLanguage={setLanguage} />;

code-desktop/src/components/game/Game.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import Player from "./Player";
 import Background from "./Background";
-import { GameProps } from "../../types/game";
+import { SaveGameProps } from "../../types/game";
 import map from "../../images/map/map.png";
 import town from "../../images/map/town.png";
 
-function Game({ savedGame, setGameState, windowDimensions }: GameProps) {
+function Game({ savedGame, setGameState, windowDimensions, saveGame }: SaveGameProps) {
     return (
         <>
             {

code-desktop/src/components/game/Player.tsx

@@ -3,6 +3,7 @@ import idleDown from "../../animations/player/down/idle.png";
 import idleUp from "../../animations/player/up/idle.png";
 import idleLeft from "../../animations/player/left/idle.png";
 import idleRight from "../../animations/player/right/idle.png";
+import { setText } from "../../context/language";
 import { GameProps, AnimationsEngine } from "../../types/game";
 
 function Player({ savedGame, windowDimensions, setGameState }: GameProps) {
@@ -27,7 +28,7 @@ function Player({ savedGame, windowDimensions, setGameState }: GameProps) {
     return <img 
         src={animations[savedGame.playerPosition.direction][savedGame.playerPosition.currentAnimation][savedGame.playerPosition.frame]}
         height={windowDimensions.height/ratio}
-        alt={"Player"}
+        alt={setText('player')}
         style={{ 
             position: 'absolute', 
             transition: 'linear', 

code-desktop/src/components/ui/Language.tsx

@@ -1,13 +1,24 @@
-import React from "react";
+import React, { useCallback } from "react";
+import { setText } from "../../context/language";
 import { LanguageProps } from "../../types/menu";
 
 function Language({ language, setLanguage }: LanguageProps) {
+    const chooseAndSaveLanguage = useCallback((lang: string) => {
+        setLanguage(lang);
+        window.localStorage.setItem('language', lang);
+    }, [])
 
     return (
         <>
-            <label htmlFor="language">Language</label>
-            <select name="language">
-                <option></option>
+            <label htmlFor="language" className="white">{setText('language')}</label>
+            <select name="language" onChange={(e) => chooseAndSaveLanguage(e.target.value)} value={language}>
+                <option value={'en'}>EN</option>
+                <option value={'pl'}>PL</option>
+                <option value={'ger'}>GER</option>
+                <option value={'sp'}>SP</option>
+                <option value={'fr'}>FR</option>
+                <option value={'ua'}>UA</option>
+                <option value={'sil'}>SIL</option>
             </select>
         </>
     )

code-desktop/src/components/ui/Menu.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from "react";
 import Language from "./Language";
 import MenuButton from "../common/MenuButton";
 import Title from "../common/Title";
+import { setText } from "../../context/language";
 import { MenuProps } from "../../types/menu";
 
 function Menu({ loadGame, setScreen, language, setLanguage }: MenuProps) {
@@ -15,10 +16,10 @@ function Menu({ loadGame, setScreen, language, setLanguage }: MenuProps) {
 
     return (
         <div>
-            <Title classes="center white" text="Main Menu" />
+            <Title classes="center white" text={setText('mainMenu')} />
             <Language language={language} setLanguage={setLanguage} />
-            <MenuButton clickHandler={startNewGame} text={'Start game'} />
-            <MenuButton clickHandler={quitGame} text={'Quit game'} />
+            <MenuButton clickHandler={startNewGame} text={setText('startGame')} />
+            <MenuButton clickHandler={quitGame} text={setText('quitGame')} />
         </div>
     )
 }

code-desktop/src/context/language.ts

@@ -0,0 +1,12 @@
+import english from "../language/en.json";
+import polish from "../language/pl.json";
+
+const languageContext: any = {
+    en: english,
+    pl: polish,
+}
+
+export const setText = (text: string) => {
+    const lang = window.localStorage.getItem('language') || 'en';
+    return languageContext[lang][text] || languageContext.en[text];
+}

code-desktop/src/language/en.json

@@ -0,0 +1,12 @@
+{
+    "title": "Goldrush",
+    "mainMenu": "Main Menu",
+    "startGame": "Start Game",
+    "quitGame": "Quit Game",
+    "bgTown": "Town background",
+    "language": "Language",
+    "player": "player",
+    "fileCorrupted": "Save file corrupted.",
+    "couldNotLoad": "Could not find game to load.",
+    "couldNotSave": "Could not save the game."
+}

code-desktop/src/language/pl.json

@@ -0,0 +1,12 @@
+{
+    "title": "Gorączka Złota",
+    "mainMenu": "Menu Główne",
+    "startGame": "Zacznij grę",
+    "quitGame": "Wyjdź z gry",
+    "bgTown": "Tło miasteczka",
+    "language": "Język",
+    "player": "Gracz",
+    "fileCorrupted": "Plik zapisu uszkodzony.",
+    "couldNotLoad": "Nie znaleziono pliku z zapisem gry.",
+    "couldNotSave": "Nie można zapisać gry."
+}

code-desktop/src/types/game.d.ts

@@ -6,7 +6,7 @@ type PlayerPosition = {
     frame: number;
 };
 
-type SavedGame = {
+export type SavedGame = {
     location: string;
     backgroundAlt: string;
     playerPosition: PlayerPosition;
@@ -46,4 +46,8 @@ export interface BackgroundProps extends GameAndDimension {
 
 export interface GameProps extends GameAndDimension {
     setGameState:React.Dispatch<React.SetStateAction<SavedGame>>;
-};
+};
+
+export interface SaveGameProps extends GameProps {
+    saveGame:React.Dispatch<React.SetStateAction<string>>;
+}