Merge branch 'main' into deploy

.vscode/extensions.json

@@ -2,6 +2,7 @@
     "recommendations": [
         "ms-vscode.vscode-typescript-next",
         "dbaeumer.vscode-eslint",
-        "antiantisepticeye.vscode-color-picker"
+        "antiantisepticeye.vscode-color-picker",
+        "pflannery.vscode-versionlens"
     ]
 }

README.md

@@ -74,7 +74,7 @@ Core libraries:
 UI libraries:
 
 * [Mui Joy](https://mui.com/joy-ui/getting-started/): A React UI framework that provides a set of components and styles for building a website.
-* [Framer Motion](https://www.framer.com/motion/): A simple yet powerful motion library for React.
+* [Framer Motion](https://motion.dev/): A simple yet powerful motion library for React.
 * [Notistack](https://iamhosseindhv.com/notistack): A library that provides snackbar notifications for React.
 * [React Color Palette](https://www.npmjs.com/package/react-color-palette): A library that provides a color picker for React.
 

package.json

@@ -12,21 +12,21 @@
     "publish": "npm run build && firebase deploy"
   },
   "dependencies": {
-    "@drincs/pixi-vn": "^0.8.4",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.6",
+    "@drincs/pixi-vn": "^0.8.9",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@mui/icons-material": "^6.1.8",
     "@mui/joy": "^5.0.0-beta.28",
-    "@tanstack/react-query": "^5.59.16",
-    "framer-motion": "^11.11.11",
-    "i18next": "^23.16.4",
+    "@tanstack/react-query": "^5.61.0",
+    "i18next": "^23.16.8",
     "i18next-browser-languagedetector": "^8.0.0",
+    "motion": "^11.11.17",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
     "react-color-palette": "^7.3.0",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
-    "react-i18next": "^15.1.0",
+    "react-i18next": "^15.1.1",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.27.0",
     "recoil": "^0.7.7",
@@ -36,18 +36,18 @@
     "vite-plugin-checker": "^0.8.0"
   },
   "devDependencies": {
-    "@tanstack/react-query-devtools": "^5.59.16",
+    "@tanstack/react-query-devtools": "^5.61.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.12.2",
-    "@typescript-eslint/parser": "^8.12.2",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
     "@vitejs/plugin-react": "^4.3.3",
-    "eslint": "^9.13.0",
+    "eslint": "^9.15.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
     "typescript": "^5.6.3",
-    "vite": "^5.4.10",
-    "vite-plugin-pwa": "^0.20.5"
+    "vite": "^5.4.11",
+    "vite-plugin-pwa": "^0.21.0"
   },
   "keywords": [
     "game",

src/components/MenuButton.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonProps, ButtonTypeMap } from "@mui/joy";
-import { motion, Variants } from "framer-motion";
+import { motion, Variants } from "motion/react";
 
 interface MenuButtonProps extends ButtonProps<ButtonTypeMap['defaultComponent'], {
     component?: React.ElementType;

src/components/ModalDialog.tsx

@@ -1,7 +1,7 @@
 import { DialogActions, DialogContent, Divider, ModalClose } from '@mui/joy';
 import Modal from '@mui/joy/Modal';
 import { default as ModalDialogJoy, ModalDialogProps } from '@mui/joy/ModalDialog';
-import { AnimatePresence, motion } from "framer-motion";
+import { AnimatePresence, motion } from "motion/react";
 import { useEffect, useState } from 'react';
 
 export interface ModalDialogCustomProps extends ModalDialogProps {

src/components/NextButton.tsx

@@ -1,6 +1,6 @@
 import { StepLabelProps } from '@drincs/pixi-vn/dist/override';
 import { Button } from '@mui/joy';
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { useSnackbar } from 'notistack';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';

src/components/SliderResizer.tsx

@@ -1,5 +1,5 @@
 import { Slider, SliderProps, Stack, useTheme } from "@mui/joy";
-import { AnimationProps, motion } from "framer-motion";
+import { AnimationProps, motion } from "motion/react";
 
 interface SliderResizerProps extends SliderProps, AnimationProps { }
 

src/components/Typewriter.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from "@mui/joy";
-import { motion, Variants } from "framer-motion";
+import { motion, Variants } from "motion/react";
 import { useMemo, useRef } from "react";
 import Markdown from "react-markdown";
 import rehypeRaw from "rehype-raw";

src/models/GameSaveData.ts

@@ -1,4 +1,4 @@
-import { ISaveData as PiviVNSaveData } from "@drincs/pixi-vn"
+import { SaveData as PiviVNSaveData } from "@drincs/pixi-vn"
 
 export default interface GameSaveData {
     saveData: PiviVNSaveData

src/screens/ChoiceMenu.tsx

@@ -2,7 +2,7 @@ import { ChoiceMenuOption, ChoiceMenuOptionClose, narration } from '@drincs/pixi
 import KeyboardReturnIcon from '@mui/icons-material/KeyboardReturn';
 import { Box, Grid } from '@mui/joy';
 import { useQueryClient } from '@tanstack/react-query';
-import { motion, Variants } from "framer-motion";
+import { motion, Variants } from "motion/react";
 import { useSnackbar } from 'notistack';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';

src/screens/LoadingScreen.tsx

@@ -1,5 +1,5 @@
 import { Box, CircularProgress } from "@mui/joy";
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 
 export default function LoadingScreen() {
     return (

src/screens/MainMenu.tsx

@@ -1,7 +1,7 @@
 import { addImage, canvas, clearAllGameDatas, narration, pixivnTestStartLabel } from '@drincs/pixi-vn';
 import Stack from '@mui/joy/Stack';
 import { useQueryClient } from '@tanstack/react-query';
-import { motion } from 'framer-motion';
+import { motion } from "motion/react";
 import { useSnackbar } from 'notistack';
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';

src/screens/NarrationScreen.tsx

@@ -4,7 +4,7 @@ import Card from '@mui/joy/Card';
 import CardContent from '@mui/joy/CardContent';
 import Sheet from '@mui/joy/Sheet';
 import Typography from '@mui/joy/Typography';
-import { motion, Variants } from "framer-motion";
+import { motion, Variants } from "motion/react";
 import { useRef } from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { dialogueCardHeightState } from '../atoms/dialogueCardHeightState';

src/screens/QuickTools.tsx

@@ -1,7 +1,7 @@
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { IconButton, Stack, useTheme } from '@mui/joy';
 import { useQueryClient } from '@tanstack/react-query';
-import { motion } from "framer-motion";
+import { motion } from "motion/react";
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
 import { useRecoilState, useSetRecoilState } from 'recoil';