Merge branch 'main' into deploy

README.md

@@ -50,7 +50,7 @@ If you use Visual Studio Code, you can use the debug configuration that comes wi
 * `Shift` + `L`: Quick load the game.
 * `Shift` + `H`: Open the history modal.
 * `Esc`: Open the settings modal.
-* `Shift` + `V`: Hide the Interface (Show only the canvas).
+* `Shift` + `V`: Hide the UI (Show only the canvas).
 
 ## Used libraries
 

package.json

@@ -12,14 +12,14 @@
     "publish": "npm run build && firebase deploy"
   },
   "dependencies": {
-    "@drincs/pixi-vn": "^0.8.2",
+    "@drincs/pixi-vn": "^0.8.3",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.1.3",
     "@mui/joy": "^5.0.0-beta.28",
     "@tanstack/react-query": "^5.59.13",
     "framer-motion": "^11.11.8",
-    "i18next": "^23.15.2",
+    "i18next": "^23.16.0",
     "i18next-browser-languagedetector": "^8.0.0",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
@@ -45,7 +45,7 @@
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.12",
     "typescript": "^5.6.3",
-    "vite": "^5.4.8",
+    "vite": "^5.4.9",
     "vite-plugin-pwa": "^0.20.5"
   },
   "keywords": [

src/components/ModalConfirmation.tsx

@@ -21,7 +21,7 @@ export default function ModalConfirmation(props: ModalConfirmationProps) {
         , startDecorator
         , ...rest
     } = props
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
     const [loadingConfirm, setLoadingConfirm] = useState<boolean>(false)
 
     return (

src/components/NextButton.tsx

@@ -20,7 +20,7 @@ export default function NextButton({ nextOnClick }: {
     const hideNextButton = useRecoilValue(hideInterfaceState) || !canGoNext
     const { enqueueSnackbar } = useSnackbar();
     const navigate = useMyNavigate();
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
     const { t: tNarration } = useTranslation(["narration"]);
     useEffect(() => {
         window.addEventListener("keypress", onkeypress);

src/screens/GameSaveScreen.tsx

@@ -23,7 +23,7 @@ import { downloadGameSave, loadGameSaveFromFile } from '../utilities/save-utilit
 
 export default function GameSaveScreen() {
     const [open, setOpen] = useRecoilState(openGameSaveScreenState);
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
     const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down("lg"));
     const setOpenLoadAlert = useSetRecoilState(saveLoadAlertState);
     const [page, setPage] = useRecoilState(saveScreenPageState);
@@ -128,7 +128,7 @@ function GameSaveSlot({ saveId, onDelete, onLoad, onOverwriteSave, onSave }: {
     onOverwriteSave: (data: GameSaveData) => Promise<void> | void,
     onLoad: (saveData: GameSaveData) => Promise<void> | void,
 }) {
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
     const {
         isLoading,
         data: saveData,

src/screens/HistoryScreen.tsx

@@ -16,7 +16,7 @@ import ModalDialogCustom from '../components/ModalDialog';
 export default function HistoryScreen() {
     const [open, setOpen] = useRecoilState(openHistoryScreenState);
     const [searchString, setSearchString] = useState("")
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
     const smScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down("md"));
     const { t: tNarration } = useTranslation(["narration"]);
 

src/screens/MainMenu.tsx

@@ -21,7 +21,7 @@ export default function MainMenu() {
     const setHideInterface = useSetRecoilState(hideInterfaceState);
     const setGameSaveScreen = useSetRecoilState(openGameSaveScreenState);
     const { enqueueSnackbar } = useSnackbar();
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
     const { t: tNarration } = useTranslation(["narration"]);
     const queryClient = useQueryClient()
     const { data: lastSave = null, isLoading } = useQueryLastSave()

src/screens/QuickTools.tsx

@@ -26,7 +26,7 @@ export default function QuickTools() {
     const openSaveScreen = useSetRecoilState(openGameSaveScreenState);
     const navigate = useMyNavigate();
     const setOpenLoadAlert = useSetRecoilState(saveLoadAlertState);
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
     const [hideInterface, setHideInterface] = useRecoilState(hideInterfaceState);
     const [skip, setSkip] = useRecoilState(skipEnabledState)
     const [auto, setAuto] = useRecoilState(autoInfoState)

src/screens/Settings.tsx

@@ -54,7 +54,7 @@ export default function Settings() {
     const [openYouSure, setOpenYouSure] = useState(false)
     const [typewriterDelay, setTypewriterDelay] = useRecoilState(typewriterDelayState)
     const [fullScreenEnabled, setFullScreenEnabled] = useState(false)
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
     const [skip, setSkip] = useRecoilState(skipEnabledState)
     const [auto, setAuto] = useRecoilState(autoInfoState)
     const setOpenHistory = useSetRecoilState(openHistoryScreenState);
@@ -261,7 +261,7 @@ export default function Settings() {
                                         onClick={() => setHideInterface((prev) => !prev)}
                                     >
                                         <VisibilityOffIcon />
-                                        <Typography level="title-md">{t("hide_interface")}</Typography>
+                                        <Typography level="title-md">{t("hide_ui")}</Typography>
                                         <Typography
                                             sx={{
                                                 position: 'absolute',

src/screens/modals/SaveLoadAlert.tsx

@@ -17,7 +17,7 @@ import { deleteSaveFromIndexDB, loadSave, putSaveIntoIndexDB } from '../../utili
 export default function SaveLoadAlert() {
     const navigate = useMyNavigate();
     const [alertData, setAlertData] = useRecoilState(saveLoadAlertState);
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
     const { enqueueSnackbar } = useSnackbar();
     const queryClient = useQueryClient()
     const [tempSaveName, setTempSaveName] = useState<string>("")

src/screens/modals/TextInput.tsx

@@ -15,7 +15,7 @@ export default function TextInput() {
     const open = (!useRecoilValue(typewriterIsAnimatedState)) && isRequired
     const [tempValue, setTempValue] = useState();
     const queryClient = useQueryClient()
-    const { t } = useTranslation(["interface"]);
+    const { t } = useTranslation(["ui"]);
 
     return (
         <ModalDialogCustom

src/values/translations/strings_en.json

@@ -1,5 +1,5 @@
 {
-	"interface": {
+	"ui": {
 		"allert_error_occurred": "An error occurred, please report it to the developer",
 		"attention": "Attention",
 		"auto_forward_time": "Auto Forward Time",
@@ -21,7 +21,7 @@
 		"fail_save": "Save failed",
 		"fullscreen": "Fullscreen",
 		"fullscreen_description": "Toggle fullscreen mode.",
-		"hide_interface": "Hide Interface",
+		"hide_ui": "Hide UI",
 		"history": "History",
 		"load": "Load",
 		"load_from_file": "Load from File",