Merge pull request #876 from OpenWebGAL/dev

4.5.18

Author: MakinoharaShoko

.github/workflows/pr-check.yml

@@ -27,6 +27,10 @@ jobs:
       - name: Install
         run: npm install yarn -g && yarn install
 
+      # 运行 parser 测试
+      - name: Parser Test
+        run: yarn parser:test --run
+
       # 生成静态文件
       - name: Build
         run: yarn build && cd ./packages/webgal && touch dist/.nojekyll

packages/parser/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webgal-parser",
-  "version": "4.5.17",
+  "version": "4.5.18",
   "description": "WebGAL script parser",
   "scripts": {
     "test": "vitest",

packages/parser/src/interface/sceneInterface.ts

@@ -73,6 +73,7 @@ export interface ISentence {
   args: Array<arg>; // 参数列表
   sentenceAssets: Array<IAsset>; // 语句携带的资源列表
   subScene: Array<string>; // 语句包含子场景列表
+  inlineComment: string; // 行内注释
 }
 
 /**

packages/parser/src/scriptParser/scriptParser.ts

@@ -49,6 +49,7 @@ export const scriptParser = (
       args: [{ key: 'next', value: true }], // 参数列表
       sentenceAssets: [], // 语句携带的资源列表
       subScene: [], // 语句携带的子场景
+      inlineComment: '', // 行内注释
     };
   }
   // 截取命令
@@ -102,6 +103,7 @@ export const scriptParser = (
       args.push(e);
     }
   }
+
   content = contentParser(newSentenceRaw.trim(), command, assetSetter); // 将语句内容里的文件名转为相对或绝对路径
   sentenceAssets = assetsScanner(command, content, args); // 扫描语句携带资源
   subScene = subSceneScanner(command, content); // 扫描语句携带子场景
@@ -112,5 +114,6 @@ export const scriptParser = (
     args: args, // 参数列表
     sentenceAssets: sentenceAssets, // 语句携带的资源列表
     subScene: subScene, // 语句携带的子场景
+    inlineComment: sentenceComment.trim(), // 行内注释
   };
 };

packages/parser/test/parser.test.ts

@@ -24,7 +24,8 @@ test("label", async () => {
       { key: "next", value: true }
     ],
     sentenceAssets: [],
-    subScene: []
+    subScene: [],
+    inlineComment: ""
   };
   expect(result.sentenceList).toContainEqual(expectSentenceItem);
 });
@@ -49,7 +50,8 @@ test("args", async () => {
       { key: "next", value: true }
     ],
     sentenceAssets: [{ name: "m2.png", url: 'm2.png', type: fileType.figure, lineNumber: 0 }],
-    subScene: []
+    subScene: [],
+    inlineComment: ""
   };
   expect(result.sentenceList).toContainEqual(expectSentenceItem);
 });
@@ -71,7 +73,8 @@ test("choose", async () => {
     content: "",
     args: [],
     sentenceAssets: [],
-    subScene: []
+    subScene: [],
+    inlineComment: ""
   };
   expect(result.sentenceList).toContainEqual(expectSentenceItem);
 });
@@ -98,7 +101,8 @@ test("long-script", async () => {
       { key: "next", value: true }
     ],
     sentenceAssets: [],
-    subScene: []
+    subScene: [],
+    inlineComment: ""
   };
   expect(result.sentenceList).toContainEqual(expectSentenceItem);
 });
@@ -120,7 +124,8 @@ test("var", async () => {
     content: "a=1?",
     args: [{ key: 'speaker', value: 'WebGAL' }, { key: 'when', value: "a==1" }],
     sentenceAssets: [],
-    subScene: []
+    subScene: [],
+    inlineComment: ""
   };
   expect(result.sentenceList).toContainEqual(expectSentenceItem);
 });
@@ -185,14 +190,16 @@ test("say statement", async () => {
   }, ADD_NEXT_ARG_LIST, SCRIPT_CONFIG);
 
   const result = parser.parse(`say:123 -speaker=xx;`, 'test', 'test');
-  expect(result.sentenceList).toContainEqual({
+  const expectSentenceItem: ISentence = {
     command: commandType.say,
     commandRaw: "say",
     content: "123",
     args: [{ key: 'speaker', value: 'xx' }],
     sentenceAssets: [],
-    subScene: []
-  });
+    subScene: [],
+    inlineComment: ""
+  };
+  expect(result.sentenceList).toContainEqual(expectSentenceItem);
 });
 
 test("wait command", async () => {
@@ -202,14 +209,16 @@ test("wait command", async () => {
   }, ADD_NEXT_ARG_LIST, SCRIPT_CONFIG);
 
   const result = parser.parse(`wait:1000;`, 'test', 'test');
-  expect(result.sentenceList).toContainEqual({
+  const expectSentenceItem: ISentence = {
     command: commandType.wait,
     commandRaw: "wait",
     content: "1000",
     args: [],
     sentenceAssets: [],
-    subScene: []
-  });
+    subScene: [],
+    inlineComment: ""
+  };
+  expect(result.sentenceList).toContainEqual(expectSentenceItem);
 });
 
 test("changeFigure with duration and animation args", async () => {
@@ -219,7 +228,7 @@ test("changeFigure with duration and animation args", async () => {
   }, ADD_NEXT_ARG_LIST, SCRIPT_CONFIG);
 
   const result = parser.parse(`changeFigure:stand.webp -duration=1000 -enter=fadeIn -exit=fadeOut;`, 'test', 'test');
-  expect(result.sentenceList).toContainEqual({
+  const expectSentenceItem: ISentence = {
     command: commandType.changeFigure,
     commandRaw: "changeFigure",
     content: "stand.webp",
@@ -229,8 +238,10 @@ test("changeFigure with duration and animation args", async () => {
       { key: 'exit', value: 'fadeOut' }
     ],
     sentenceAssets: [{ name: "stand.webp", url: 'stand.webp', type: fileType.figure, lineNumber: 0 }],
-    subScene: []
-  });
+    subScene: [],
+    inlineComment: ""
+  };
+  expect(result.sentenceList).toContainEqual(expectSentenceItem);
 });
 
 test("changeBg with animation parameters", async () => {
@@ -240,7 +251,7 @@ test("changeBg with animation parameters", async () => {
   }, ADD_NEXT_ARG_LIST, SCRIPT_CONFIG);
 
   const result = parser.parse(`changeBg:background.jpg -duration=2000 -enter=slideIn -transform={"alpha":0.8};`, 'test', 'test');
-  expect(result.sentenceList).toContainEqual({
+  const expectSentenceItem: ISentence = {
     command: commandType.changeBg,
     commandRaw: "changeBg",
     content: "background.jpg",
@@ -250,6 +261,65 @@ test("changeBg with animation parameters", async () => {
       { key: 'transform', value: '{"alpha":0.8}' }
     ],
     sentenceAssets: [{ name: "background.jpg", url: 'background.jpg', type: fileType.background, lineNumber: 0 }],
-    subScene: []
-  });
+    subScene: [],
+    inlineComment: ""
+  };
+  expect(result.sentenceList).toContainEqual(expectSentenceItem);
+});
+
+test("inline comment is preserved on normal statement", async () => {
+  const parser = new SceneParser((assetList) => {
+  }, (fileName, assetType) => {
+    return fileName;
+  }, ADD_NEXT_ARG_LIST, SCRIPT_CONFIG);
+
+  const result = parser.parse(`say:123 -speaker=xx; // this is an inline comment`, 'test', 'test');
+  const expectSentenceItem: ISentence = {
+    command: commandType.say,
+    commandRaw: "say",
+    content: "123",
+    args: [{ key: 'speaker', value: 'xx' }],
+    sentenceAssets: [],
+    subScene: [],
+    inlineComment: "// this is an inline comment"
+  };
+  expect(result.sentenceList).toContainEqual(expectSentenceItem);
+});
+
+test("escaped semicolon is preserved in content and inline comment is preserved", async () => {
+  const parser = new SceneParser((assetList) => {
+  }, (fileName, assetType) => {
+    return fileName;
+  }, ADD_NEXT_ARG_LIST, SCRIPT_CONFIG);
+
+  const result = parser.parse(String.raw`say:price\;100;comment-part`, 'test', 'test');
+  const expectSentenceItem: ISentence = {
+    command: commandType.say,
+    commandRaw: "say",
+    content: "price;100",
+    args: [],
+    sentenceAssets: [],
+    subScene: [],
+    inlineComment: "comment-part"
+  };
+  expect(result.sentenceList).toContainEqual(expectSentenceItem);
+});
+
+test("comment-only line keeps comment in content", async () => {
+  const parser = new SceneParser((assetList) => {
+  }, (fileName, assetType) => {
+    return fileName;
+  }, ADD_NEXT_ARG_LIST, SCRIPT_CONFIG);
+
+  const result = parser.parse(`; only comment here`, 'test', 'test');
+  const expectSentenceItem: ISentence = {
+    command: commandType.comment,
+    commandRaw: "comment",
+    content: "only comment here",
+    args: [{ key: 'next', value: true }],
+    sentenceAssets: [],
+    subScene: [],
+    inlineComment: ""
+  };
+  expect(result.sentenceList).toContainEqual(expectSentenceItem);
 });

packages/webgal/index.html

@@ -7,6 +7,10 @@
     <link rel="manifest" href="/manifest.json" />
     <title>WebGAL</title>
     <style>
+      body {
+        background: black;
+      }
+
       .html-body__effect-background {
         height: 100vh;
         width: 100vw;
@@ -17,6 +21,20 @@
         position: absolute;
         top: 0;
         left: 0;
+        background-color: black;
+      }
+
+      .html-body__effect-background-overlay {
+        height: 100%;
+        width: 100%;
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: black;
+        opacity: 0;
       }
 
       .html-body__title-enter {
@@ -115,7 +133,9 @@
   </head>
   <body>
     <!-- 背景模糊 -->
-    <div class="html-body__effect-background"></div>
+    <div id="ebg" class="html-body__effect-background">
+      <div id="ebgOverlay" class="html-body__effect-background-overlay"></div>
+    </div>
     <!-- 落地页 -->
     <div class="html-body__title-enter">
       <div class="title-enter__initial-background"></div>

packages/webgal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webgal-engine",
-  "version": "4.5.17",
+  "version": "4.5.18",
   "scripts": {
     "dev": "vite --host --port 3000",
     "build": "cross-env NODE_ENV=production tsc && vite build --base=./",

packages/webgal/public/game/template/template.json

@@ -1,4 +1,4 @@
 {
   "name":"Default Template",
-  "webgal-version":"4.5.17"
+  "webgal-version":"4.5.18"
 }

packages/webgal/src/Core/Modules/animationFunctions.ts

@@ -13,6 +13,7 @@ import {
   DEFAULT_FIG_IN_DURATION,
   DEFAULT_FIG_OUT_DURATION,
 } from '../constants';
+import { stageActions } from '@/store/stageReducer';
 
 // eslint-disable-next-line max-params
 export function getAnimationObject(animationName: string, target: string, duration: number, writeDefault: boolean) {
@@ -28,7 +29,7 @@ export function getAnimationObject(animationName: string, target: string, durati
         newEffect = cloneDeep({ ...baseTransform, duration: 0, ease: '' });
       }
 
-      PixiStage.assignTransform(newEffect, effect);
+      PixiStage.assignTransform(newEffect, effect, false);
       newEffect.duration = effect.duration;
       newEffect.ease = effect.ease;
       return newEffect;
@@ -90,19 +91,23 @@ export function getEnterExitAnimation(
     if (isBg) {
       duration = DEFAULT_BG_OUT_DURATION;
     }
-    duration =
-      webgalStore.getState().stage.animationSettings.find((setting) => setting.target + '-off' === target)
-        ?.exitDuration ?? duration;
+    const animationSettings = webgalStore
+      .getState()
+      .stage.animationSettings.find((setting) => setting.target === target);
+    duration = animationSettings?.exitDuration ?? duration;
     // 走默认动画
     let animation: IAnimationObject | null = generateUniversalSoftOffAnimationObj(realTarget ?? target, duration);
-    const animationName = webgalStore
-      .getState()
-      .stage.animationSettings.find((setting) => setting.target + '-off' === target)?.exitAnimationName;
+    const animationName = animationSettings?.exitAnimationName;
     if (animationName) {
       logger.debug('取代默认退出动画', target);
       animation = getAnimationObject(animationName, realTarget ?? target, getAnimateDuration(animationName), false);
       duration = getAnimateDuration(animationName);
     }
+    if (animationSettings) {
+      // 退出动画拿完后，删了这个设定
+      webgalStore.dispatch(stageActions.removeAnimationSettingsByTargetOff(target));
+      logger.debug('删除退出动画设定', target);
+    }
     return { duration, animation };
   }
 }

packages/webgal/src/Core/Modules/events.ts

@@ -11,6 +11,7 @@ export class Events {
   public userInteractNext = formEvent('__NEXT');
   public fullscreenDbClick = formEvent('fullscreen-dbclick');
   public styleUpdate = formEvent('style-update');
+  public afterStyleUpdate = formEvent('after-style-update');
 }
 
 const eventBus = mitt();