UPDATE: Lua in extra setting

bun.lock

@@ -15,9 +15,11 @@
         "lucide-react": "^0.563.0",
         "next": "16.1.6",
         "next-intl": "^4.8.2",
+        "prismjs": "^1.30.0",
         "react": "19.2.4",
         "react-dom": "19.2.4",
         "react-select": "^5.10.2",
+        "react-simple-code-editor": "^0.14.1",
         "react-toastify": "^11.0.5",
         "sharp": "^0.34.5",
         "zod": "^4.3.6",
@@ -1035,6 +1037,8 @@
 
     "prism-react-renderer": ["prism-react-renderer@2.4.1", "", { "dependencies": { "@types/prismjs": "^1.26.0", "clsx": "^2.0.0" }, "peerDependencies": { "react": ">=16.0.0" } }, "sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig=="],
 
+    "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
+
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
 
     "proxy-from-env": ["proxy-from-env@1.1.0", "", {}, "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="],
@@ -1051,6 +1055,8 @@
 
     "react-select": ["react-select@5.10.2", "", { "dependencies": { "@babel/runtime": "^7.12.0", "@emotion/cache": "^11.4.0", "@emotion/react": "^11.8.1", "@floating-ui/dom": "^1.0.1", "@types/react-transition-group": "^4.4.0", "memoize-one": "^6.0.0", "prop-types": "^15.6.0", "react-transition-group": "^4.3.0", "use-isomorphic-layout-effect": "^1.2.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Z33nHdEFWq9tfnfVXaiM12rbJmk+QjFEztWLtmXqQhz6Al4UZZ9xc0wiatmGtUOCCnHN0WizL3tCMYRENX4rVQ=="],
 
+    "react-simple-code-editor": ["react-simple-code-editor@0.14.1", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-BR5DtNRy+AswWJECyA17qhUDvrrCZ6zXOCfkQY5zSmb96BVUbpVAv03WpcjcwtCwiLbIANx3gebHOcXYn1EHow=="],
+
     "react-toastify": ["react-toastify@11.0.5", "", { "dependencies": { "clsx": "^2.1.1" }, "peerDependencies": { "react": "^18 || ^19", "react-dom": "^18 || ^19" } }, "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA=="],
 
     "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],

package.json

@@ -19,9 +19,11 @@
     "lucide-react": "^0.563.0",
     "next": "16.1.6",
     "next-intl": "^4.8.2",
+    "prismjs": "^1.30.0",
     "react": "19.2.4",
     "react-dom": "19.2.4",
     "react-select": "^5.10.2",
+    "react-simple-code-editor": "^0.14.1",
     "react-toastify": "^11.0.5",
     "sharp": "^0.34.5",
     "zod": "^4.3.6",

src/components/extraSettingBar/index.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { motion } from "framer-motion"
-import { EyeOff, Eye, Hammer, RefreshCw, ShieldBan, User, Swords, SkipForward, BowArrow, Info, RouteIcon, Search } from "lucide-react"
+import { EyeOff, Eye, Hammer, RefreshCw, ShieldBan, User, Swords, SkipForward, BowArrow, Info, RouteIcon, Search, CupSoda } from "lucide-react"
 import useGlobalStore from '@/stores/globalStore'
 import { useTranslations } from "next-intl"
 import { getLocaleName, getNameChar } from "@/helper"
@@ -8,9 +8,13 @@ import useLocaleStore from "@/stores/localeStore"
 import SelectCustomImage from "../select/customSelectImage"
 import { useMemo, useState } from "react"
 import useDetailDataStore from "@/stores/detailDataStore"
+import Editor from "react-simple-code-editor"
+import Prism from "prismjs"
+import "prismjs/components/prism-lua"
+import "prismjs/themes/prism-tomorrow.css"
 
 export default function ExtraSettingBar() {
-  const { extraData, setExtraData, isEnableChangePath, setIsEnableChangePath } = useGlobalStore()
+  const { extraData, setExtraData, isEnableChangePath, setIsEnableChangePath, isEnableLua, setIsEnableLua } = useGlobalStore()
   const transI18n = useTranslations("DataPage")
   const { mapAvatar, mapPeak, stage, baseType } = useDetailDataStore()
   const { locale } = useLocaleStore()
@@ -259,7 +263,8 @@ export default function ExtraSettingBar() {
                         main: Number(it) || 8001,
                         multi_path_main: extraData?.multi_path?.multi_path_main || [],
                         multi_path_march_7: extraData?.multi_path?.multi_path_march_7 || []
-                      }
+                      },
+                      lua: extraData?.lua || null
                     })
                   }}
                 />
@@ -289,7 +294,8 @@ export default function ExtraSettingBar() {
                         main: extraData?.multi_path?.main || 8001,
                         multi_path_main: extraData?.multi_path?.multi_path_main || [],
                         multi_path_march_7: extraData?.multi_path?.multi_path_march_7 || []
-                      }
+                      },
+                      lua: extraData?.lua || null
                     })
                   }}
                 />
@@ -320,7 +326,8 @@ export default function ExtraSettingBar() {
                     skip_node: extraData?.challenge?.skip_node || 0,
                     challenge_peak_group_id: parseInt(e.target.value) || 0,
                     challenge_peak_group_id_list: extraData?.challenge?.challenge_peak_group_id_list || []
-                  }
+                  },
+                  lua: extraData?.lua || null
                 })
               }
             >
@@ -350,7 +357,8 @@ export default function ExtraSettingBar() {
                     challenge_peak_group_id: extraData?.challenge?.challenge_peak_group_id || 0,
                     challenge_peak_group_id_list: extraData?.challenge?.challenge_peak_group_id_list || [],
                     skip_node: parseInt(e.target.value) || 0
-                  }
+                  },
+                  lua: extraData?.lua || null
                 })
               }
             >
@@ -427,6 +435,52 @@ export default function ExtraSettingBar() {
         )}
       </div>
 
+      <div className="space-y-4">
+        <h3 className="text-lg font-bold flex items-center gap-2">
+          {"Lua"}
+          <div className="tooltip tooltip-info tooltip-bottom">
+            <CupSoda className="text-primary" size={20} />
+          </div>
+          <input
+            type="checkbox"
+            className="toggle toggle-primary"
+            checked={isEnableLua}
+            onChange={(e) => setIsEnableLua(e.target.checked)}
+          />
+        </h3>
+        {isEnableLua && (
+          <>
+            <div className="form-control bg-base-200 p-4 rounded-xl shadow">
+              <label className="label">
+                <span className="label-text">Lua Script</span>
+              </label>
+
+              <div className="rounded-xl overflow-hidden border border-base-300">
+                <Editor
+                  value={extraData?.lua || ""}
+                  onValueChange={(code) =>
+                    setExtraData(
+                      {
+                        ...extraData,
+                        lua: code
+                      }
+                    )
+                  }
+                  highlight={(code) => Prism.highlight(code, Prism.languages.lua, "lua")}
+                  padding={16}
+                  textareaClassName="outline-none"
+                  className="text-sm font-mono min-h-[300px]"
+                  style={{
+                    background: "#1e1e1e",
+                    color: "#fff",
+                  }}
+                />
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
     </div>
   )
 }

src/helper/connect.ts

@@ -45,6 +45,7 @@ export const connectToPS = async (): Promise<{ success: boolean, message: string
         return { success: false, message: response.message }
     } else {
         setIsConnectPS(true)
+        
         setExtraData(response?.extra_data)
         return { success: true, message: "" }
     }
@@ -59,7 +60,7 @@ export const syncDataToPS = async (): Promise<{ success: boolean, message: strin
         password
     } = useConnectStore.getState()
 
-    const {extraData, setIsConnectPS, setExtraData, isEnableChangePath} = useGlobalStore.getState()
+    const {extraData, setIsConnectPS, setExtraData, isEnableChangePath, isEnableLua} = useGlobalStore.getState()
 
 
     const {avatars, battle_type, moc_config, pf_config, as_config, ce_config, peak_config} = useUserDataStore.getState()
@@ -91,6 +92,10 @@ export const syncDataToPS = async (): Promise<{ success: boolean, message: strin
         newExtra.multi_path = undefined
     }
 
+    if (newExtra && !isEnableLua) {
+        newExtra.lua = null
+    }
+
     const response = await SendDataToServer(username, password, urlQuery, data, newExtra)
     if (typeof response === "string") {
         setIsConnectPS(false)
@@ -100,7 +105,11 @@ export const syncDataToPS = async (): Promise<{ success: boolean, message: strin
         return { success: false, message: response.message }
     } else {
         setIsConnectPS(true)
-        setExtraData(response?.extra_data)
+        const newData = structuredClone(response?.extra_data)
+        if (newData) {
+            newData.lua = extraData?.lua || null
+        }
+        setExtraData(newData)
         return { success: true, message: "" }
     }
 }

src/stores/globalStore.ts

@@ -5,7 +5,9 @@ interface GlobalState {
     isConnectPS: boolean;
     extraData?: ExtraData;
     isEnableChangePath: boolean
+    isEnableLua: boolean
     setIsEnableChangePath: (newIsEnableChangePath: boolean) => void;
+    setIsEnableLua: (newIsEnableLua: boolean) => void;
     setExtraData: (newExtraData: ExtraData | undefined) => void;
     setIsConnectPS: (newIsConnectPS: boolean) => void;
 }
@@ -14,7 +16,9 @@ const useGlobalStore = create<GlobalState>((set) => ({
     isConnectPS: false,
     extraData: undefined,
     isEnableChangePath: false,
+    isEnableLua: false,
     setIsEnableChangePath: (newIsEnableChangePath: boolean) => set({ isEnableChangePath: newIsEnableChangePath }),
+    setIsEnableLua: (newIsEnableLua: boolean) => set({ isEnableLua: newIsEnableLua }),
     setExtraData: (newExtraData: ExtraData | undefined) => set({ extraData: newExtraData }),
     setIsConnectPS: (newIsConnectPS: boolean) => set({ isConnectPS: newIsConnectPS }),
 }));

src/types/extraData.ts

@@ -21,5 +21,6 @@ export interface ExtraData {
         march_7: number
         multi_path_main: number[]
         multi_path_march_7: number[]
-    }
+    },
+    lua: string | null
 }

src/zod/extraData.zod.ts

@@ -24,5 +24,6 @@ export const extraDataSchema = z.object({
         march_7: z.number(),
         multi_path_main: z.array(z.number()),
         multi_path_march_7: z.array(z.number())
-    })
+    }),
+    lua: z.string().optional()
 });