Merge branch 'custom_path_picker' into develop

docker/Dockerfile

@@ -42,6 +42,7 @@ COPY ./ /app
 # Copy the entrypoint script into the image and make it executable
 COPY ./docker/entrypoint.sh /entrypoint.sh
 RUN chmod +x /entrypoint.sh
+RUN chmod +x /app/setup_and_run.sh
 
 ENTRYPOINT ["/entrypoint.sh"]
 

docker/entrypoint.sh

@@ -17,16 +17,16 @@ chown -R pn:pn /app
 
 
 
-cmd="gosu pn ./setup_and_run.sh"
+cmd="./setup_and_run.sh"
 
 # Check each environment variable and append it to the command if it exists
 if [ -n "$APP_LANG" ]; then cmd="$cmd --lang=\"$APP_LANG\""; fi
 if [ -n "$APP_PORT" ]; then cmd="$cmd --port=$APP_PORT"; fi
 if [ -n "$MODE" ]; then cmd="$cmd --mode=\"$MODE\""; fi
 if [ -n "$SAVE_PATH" ]; then cmd="$cmd --path=\"$SAVE_PATH\""; fi
 if [ -n "$PASSWORD" ]; then cmd="$cmd --password=\"$PASSWORD\""; fi
-if [ -n "$INTERACTIVE" ]; then cmd="$cmd --interactive=\"$INTERACTIVE\""; fi
+if [ -n "$INTERACTIVE" ]; then cmd="$cmd --interactive"; fi
 
 echo "Launching: $cmd"
 
-eval exec $cmd
+eval exec "su pn -c '$cmd'"

frontend/palworld-pal-editor-webui/src/components/PathPicker.vue

@@ -0,0 +1,121 @@
+<script setup>
+import { usePalEditorStore } from '@/stores/paleditor'
+import { computed } from '@vue/reactivity';
+import { ref, onMounted } from 'vue'
+
+import IconButton from './modules/IconButton.vue';
+import InputArea from './modules/InputArea.vue'
+import BarButton from './modules/BarButton.vue'
+const palStore = usePalEditorStore()
+
+const sortedPathChildren = computed(() => {
+    return Array.from(palStore.PATH_CONTEXT.entries()).sort((a, b) => {
+        if (a[1].isDir && !b[1].isDir) {
+            return -1;
+        } else if (!a[1].isDir && b[1].isDir) {
+            return 1;
+        }
+
+        return a[1].filename.localeCompare(b[1].filename);
+    })
+})
+
+const savePickerResult = () => {
+    palStore.SHOW_FILE_PICKER = false
+    palStore.PAL_GAME_SAVE_PATH = palStore.PAL_FILE_PICKER_PATH
+
+}
+
+// const scrollElement = ref(null);
+
+// const checkScroll = () => {
+//     if (!scrollElement.value) return;
+//     const scrollTop = scrollElement.value.scrollTop;
+//     const scrollHeight = scrollElement.value.scrollHeight;
+//     const clientHeight = scrollElement.value.clientHeight;
+
+//     scrollElement.value.classList.toggle('scrolled-top', scrollTop > 0);
+//     scrollElement.value.classList.toggle('scrolled-bottom', scrollTop + clientHeight < scrollHeight);
+// };
+
+// onMounted(() => {
+//     if (scrollElement.value) {
+//         scrollElement.value.addEventListener('scroll', checkScroll);
+//         checkScroll(); // Initial check to update shadow state
+//     }
+// });
+</script>
+
+<template>
+    <div class="popup">
+        <div class="currentPath">
+            <IconButton icon="⤴️" @click="palStore.path_back" />
+            <InputArea v-model="palStore.PAL_FILE_PICKER_PATH" />
+            <IconButton icon="➡️" @click="palStore.update_picker_result(palStore.PAL_FILE_PICKER_PATH)" />
+        </div>
+
+        <ul ref="scrollElement">
+            <li v-for="([key, value], index) of sortedPathChildren" 
+                :key="index" 
+                :isdir="value.isDir"
+                @click="() => { if (value.isDir) palStore.update_picker_result(key) }" 
+                :fullpath="key"
+            >
+                {{ value.isDir ? "📁" : "📄" }} {{ value.filename }}
+            </li>
+        </ul>
+        <BarButton @click="savePickerResult" content="OK" :disabled="!palStore.IS_PAL_SAVE_PATH" />
+    </div>
+</template>
+
+<style scoped>
+.popup {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    border: none;
+    outline: none;
+    width: 75vw;
+    height: 75vh;
+
+    border-radius: 0.5rem;
+    padding: 2rem 4rem;
+    background-color: #515151;
+    z-index: 10;
+    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.1);
+
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.popup .currentPath {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.popup ul {
+    overflow-y: auto;
+    list-style-type: none;
+    padding: 0;
+    flex: 1;
+}
+
+.popup li[isdir=true] {
+    cursor: pointer;
+}
+
+.popup li {
+    margin: .2rem .2rem;
+    padding: .3rem .3rem;
+    border-radius: 0.5rem;
+    color: whitesmoke;
+}
+
+.popup li:hover[isdir=true] {
+    background-color: #4b8d5e;
+}
+</style>

frontend/palworld-pal-editor-webui/src/components/modules/BarButton.vue

@@ -0,0 +1,37 @@
+<script setup>
+import { usePalEditorStore } from '@/stores/paleditor'
+const palStore = usePalEditorStore()
+
+defineProps(['content', 'name', 'value'])
+</script>
+
+<template>
+    <button :name="name" :value="value" :disabled="palStore.LOADING_FLAG">
+        {{ content }}
+    </button>
+</template>
+
+<style scoped>
+button {
+    margin-bottom: 1rem;
+    height: 3rem;
+    background-color: #3365da;
+    color: whitesmoke;
+    border: none;
+    outline: none;
+    border-radius: 0.5rem;
+    font-size: 1.2rem;
+    transition: all 0.3s ease-in-out;
+}
+
+button:hover {
+    background-color: #1b49b4;
+    transition: all 0.3s ease-in-out;
+    cursor: pointer;
+}
+
+button:disabled {
+    background-color: #8a8a8a;
+    cursor: auto;
+}
+</style>

frontend/palworld-pal-editor-webui/src/components/modules/IconButton.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { usePalEditorStore } from '@/stores/paleditor'
+const palStore = usePalEditorStore()
+
+defineProps(['icon', 'name', 'value'])
+defineEmits([])
+</script>
+
+<template>
+    <button :name="name" :value="value" :disabled="palStore.LOADING_FLAG">
+        {{ icon }}
+    </button>
+</template>
+
+<style scoped>
+button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    margin: 0;
+    background-color: #73aa83;
+    color: whitesmoke;
+    border: none;
+    outline: none;
+    border-radius: 0.5rem;
+    transition: all 0.15s ease-in-out;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #4b8d5e;
+    box-shadow: 0px 0px 10px rgb(38, 38, 38);
+    transition: all 0.15s ease-in-out;
+}
+
+button:disabled {
+    background-color: #8a8a8a;
+}
+</style>

frontend/palworld-pal-editor-webui/src/components/modules/InputArea.vue

@@ -0,0 +1,39 @@
+<script setup>
+import { usePalEditorStore } from '@/stores/paleditor'
+const palStore = usePalEditorStore()
+
+defineProps(['placeholder'])
+const model = defineModel()
+
+</script>
+
+<template>
+    <input type="text" v-model="model" :placeholder="placeholder" :disabled="palStore.LOADING_FLAG">
+</template>
+
+<style scoped>
+input {
+    display: flex;
+    align-items: center;
+    background-color: #34353a;
+    height: 1.6rem;
+    max-width: 100%;
+    /* margin: .2rem; */
+    padding: .2rem .4rem;
+    border-radius: .5rem;
+    color: rgb(208, 212, 226);
+    /* box-shadow: 2px 2px 10px rgb(38, 38, 38); */
+    transition: all 0.15s ease-in-out;
+
+    border: none;
+    outline: none;
+    flex: 1;
+}
+
+input:focus {
+    background-color: #b4b7be;
+    transition: all 0.15s ease-in-out;
+
+    color: rgb(0, 0, 0);
+}
+</style>

frontend/palworld-pal-editor-webui/src/i18n/en.js

@@ -16,7 +16,7 @@ export default {
         " > After a successful save loading, the path will be stored and automatically input for you the next time.",
     EntryView_Note_3:
         " > If you are running from the docker container, please make sure you have mapped the directory correctly, and setup the correct file access permission. Then all you need is to enter the mapped path.",
-    EntryView_BTN_Path_Select: "Select Path",
+    EntryView_BTN_Path_Picker: "Select Path",
     EntryView_BTN_Load: "Load Save",
 
     Editor_Note_Ghost_Pal: "THIS PAL IS LIKELY UNREFERENCED IN GAME",

frontend/palworld-pal-editor-webui/src/i18n/ja.js

@@ -16,7 +16,7 @@ export default {
         " > 読み込みに成功すると、次回からはパスが自動的に入力されます。",
     EntryView_Note_3:
         " > Dockerコンテナから実行している場合は、ディレクトリが正しくマッピングされており、適切なファイルアクセス権限が設定されていることを確認してください。その後、マッピングされたパスを入力するだけです。",
-    EntryView_BTN_Path_Select: "パスを選択",
+    EntryView_BTN_Path_Picker: "パスを選択",
     EntryView_BTN_Load: "ロード",
 
     Editor_Note_Ghost_Pal: "このパルはゲーム内に存在しない可能性があります",

frontend/palworld-pal-editor-webui/src/i18n/zh-CN.js

@@ -16,7 +16,7 @@ export default {
         " > 在成功载入存档后，存档的路径将会被保存，并在下次使用时自动为您输入。",
     EntryView_Note_3:
         " > 如果你在通过Docker容器的方式使用这个工具，请确保已经正确的映射了存档的路径，并且容器具有合适的文件访问权限。这里你只需要输入映射的路径。",
-    EntryView_BTN_Path_Select: "选择路径",
+    EntryView_BTN_Path_Picker: "选择路径",
     EntryView_BTN_Load: "载入存档",
 
     Editor_Note_Ghost_Pal: "这只帕鲁很可能不存在于游戏中",