fix: vite.config.ts 端口与 hotReload 端口不一致

packages-user/client-modules/src/render/shared.ts

@@ -1,10 +1,19 @@
+// 地图格子宽高，此处仅影响画面，不影响游戏内逻辑，游戏内逻辑地图大小请在 core.js 中修改
+export const MAP_BLOCK_WIDTH = 15;
+export const MAP_BLOCK_HEIGHT = 15;
+
+// 状态栏像素宽高
 export const STATUS_BAR_WIDTH = 180;
-export const STATUS_BAR_HEIGHT = 480;
+export const STATUS_BAR_HEIGHT = 32 * MAP_BLOCK_HEIGHT;
 
+// 是否启用右侧状态栏
 export const ENABLE_RIGHT_STATUS_BAR = true;
+export const STATUS_BAR_COUNT = ENABLE_RIGHT_STATUS_BAR ? 2 : 1;
 
-export const MAP_WIDTH = 480;
+// 地图像素宽高
-export const MAP_HEIGHT = 480;
+export const MAP_WIDTH = 32 * MAP_BLOCK_WIDTH;
+export const MAP_HEIGHT = 32 * MAP_BLOCK_HEIGHT;
 
-export const MAIN_WIDTH = 480 + 180 * 2;
+// 游戏画面像素宽高，宽=地图宽度+状态栏宽度*状态栏数量
-export const MAIN_HEIGHT = 480;
+export const MAIN_WIDTH = MAP_WIDTH + STATUS_BAR_WIDTH * STATUS_BAR_COUNT;
+export const MAIN_HEIGHT = MAP_HEIGHT;

packages-user/legacy-plugin-client/src/dev/hotReload.ts

@@ -2,9 +2,16 @@
 
 export {};
 
-/* @__PURE__ */ (function () {
+interface PortResponse {
+    server: number;
+}
+
+/* @__PURE__ */ (async function () {
     if (main.mode !== 'play' || main.replayChecking) return;
 
+    const res = await fetch('/getPort');
+    const { server } = (await res.json()) as PortResponse;
+
     /**
      * 热重载css
      * @param {string} data
@@ -127,7 +134,7 @@ export {};
         console.log(`Data hot reload: ${data}`);
     }
 
-    const ws = new WebSocket('ws://127.0.0.1:3000');
+    const ws = new WebSocket(`ws://127.0.0.1:${server}`);
     ws.addEventListener('open', () => {
         console.log(`Web socket connect successfully`);
     });

script/dev.ts

@@ -1,5 +1,10 @@
 /* eslint-disable no-console */
-import { createServer } from 'vite';
+import {
+    createServer,
+    loadConfigFromFile,
+    mergeConfig,
+    UserConfig
+} from 'vite';
 import { Server } from 'http';
 import { ensureDir, move, pathExists, remove } from 'fs-extra';
 import { readFile, readdir, writeFile } from 'fs/promises';
@@ -500,6 +505,14 @@ const apiGetEsmFiles = async (req: Request, res: Response) => {
     return getEsmFile(req, res, path.resolved);
 };
 
+const apiGetPort = async (_req: Request, res: Response) => {
+    const port = {
+        vite: vitePort,
+        server: serverPort
+    };
+    res.end(JSON.stringify(port));
+};
+
 /**
  * 声明某种类型
  * @param {string} type 类型
@@ -677,12 +690,49 @@ async function ensureConfig() {
 }
 
 (async function () {
-    // 1. 启动vite服务
+    // 1. 加载 vite.config.ts
-    const vite = await createServer();
+    const fsHost = `http://127.0.0.1:${serverPort}`;
+    const config = await loadConfigFromFile({
+        command: 'serve',
+        mode: 'development'
+    });
+    if (!config) {
+        console.error(`Cannot load config file.`);
+        return;
+    }
+    const merged = mergeConfig(config.config, {
+        server: {
+            proxy: {
+                '/readFile': fsHost,
+                '/writeFile': fsHost,
+                '/writeMultiFiles': fsHost,
+                '/listFile': fsHost,
+                '/makeDir': fsHost,
+                '/moveFile': fsHost,
+                '/deleteFile': fsHost,
+                '/getPort': fsHost,
+                '^/all/.*': fsHost,
+                '^/forceTem/.*': {
+                    target: fsHost,
+                    changeOrigin: true,
+                    rewrite(path) {
+                        return path.replace(/^\/forceTem/, '');
+                    }
+                },
+                '/danmaku': 'https://h5mota.com/backend/tower/barrage.php'
+            }
+        }
+    } satisfies UserConfig);
+
+    // 2. 启动vite服务
+    const vite = await createServer({
+        ...merged,
+        configFile: false
+    });
     await vite.listen(vitePort);
     console.log(`游戏地址：http://localhost:${vitePort}/`);
 
-    // 2. 启动样板http服务
+    // 3. 启动样板http服务
     await ensureConfig();
 
     const app = express();
@@ -700,6 +750,7 @@ async function ensureConfig() {
     app.get('/all/__all_floors__.js', apiGetAllFloors);
     app.get('/all/__all_animates__', apiGetAllAnimates);
     app.get('/esm', apiGetEsmFiles);
+    app.get('/getPort', apiGetPort);
 
     const server = app.listen(serverPort);
 
@@ -710,7 +761,7 @@ async function ensureConfig() {
         );
     });
 
-    // 3. 启动样板ws热重载服务
+    // 4. 启动样板ws热重载服务
     startWsServer(server);
 
     process.on('SIGTERM', () => {

vite.config.ts

@@ -57,24 +57,6 @@ export default defineConfig({
         }
     },
     server: {
-        proxy: {
-            '/readFile': FSHOST,
-            '/writeFile': FSHOST,
-            '/writeMultiFiles': FSHOST,
-            '/listFile': FSHOST,
-            '/makeDir': FSHOST,
-            '/moveFile': FSHOST,
-            '/deleteFile': FSHOST,
-            '^/all/.*': FSHOST,
-            '^/forceTem/.*': {
-                target: FSHOST,
-                changeOrigin: true,
-                rewrite(path) {
-                    return path.replace(/^\/forceTem/, '');
-                },
-            },
-            '/danmaku': 'https://h5mota.com/backend/tower/barrage.php'
-        },
         watch: {
             ignored: ['**/public/**']
         },