Merge pull request #343 from MakinoharaShoko/dev

4.4.3

packages/webgal/package.json

@@ -1,7 +1,7 @@
 {
   "name": "webgal",
   "private": true,
-  "version": "4.4.2",
+  "version": "4.4.3",
   "scripts": {
     "dev": "vite --host --port 3000",
     "build": "cross-env NODE_ENV=production tsc && vite build --base=./",

packages/webgal/public/game/scene/demo_en.txt

@@ -0,0 +1,52 @@
+bgm:ontama_piano1_youkoso.mp3 -volume=80 -enter=3000;
+unlockBgm:ontama_piano1_youkoso.mp3 -name=welcome;
+intro:*Getting started| The image materials used in this demo game are AI-generated images;
+intro:*Credit| Created By ondoku3.com;
+changeBg:bg.png -next;
+unlockCg:bg.png -name=良い夜;
+changeFigure:stand.png -left -enter=enter-from-left -next;
+miniAvatar:miniavatar.png;
+WebGAL:Hello -e001_Hello.mp3;
+Welcome to WebGAL! -e002_Welcome_to_WebGAL.mp3;
+WebGAL is a completely new web visual engine never seen before. -e003_WebGAL_is_a_completely_new_web.mp3;
+changeFigure:stand2.png -right -next;
+It is an engine developed using web technology, so it performs well on web pages. -e004_It_is_an_engine_developedusing_web.mp3;
+Thanks to this feature, once published on your website's platform,|players can simply click a link to play your game on your website anytime, anywhere! -e005_Thanks_to_this_ feature_once.mp3;
+setAnimation:move-front-and-back -target=fig-left -next;
+Very attractive, don't you think? -e006_Very attractive.mp3;
+changeFigure:none -right -next;
+setAnimation:l2c -target=fig-left -next;
+In addition, WebGAL allows you to add animations and special effects to create high quality games. -e007_In_addition_ WebGAL_allows you.mp3;
+pixiInit;
+pixiPerform:snow;
+For example, let's make it snow as a special effect. -e008_For_example_let's_make.mp3;
+As you can see, WebGAL has attractive features. |Try it out and experience it. -e009_As_you_can see_WebGAL.mp3;
+That's all for the feature introduction. -e010_That's_all_for_the_feature introduction.mp3;
+Next,I will introduce the history and trivia of WebGAL. -e011_Next_I_will introduce_the_ history.mp3;
+pixiInit;
+choose:WebGAL History:choose1|WebGAL Trivia:choose2;
+;選択１
+label:choose1;
+WebGAL was developed to make it easier for more people to create their own visual novel games. -e012_WebGAL _was_developed to_make_it_ easier.mp3;
+Initially, WebGAL had very few features, supporting only standing and background image display, audio playback, and choices. -e013_Initially_ WebGAL_had_very_few_features.mp3;
+After a long development period, it has now been reborn as an engine with many excellent functions. -e014_After_a_long _development period.mp3;
+Additionally, the release of the WebGAL editor makes creating and outputting games simpler and easier. -e015_Additionally,_the release_of_the WebGAL_editor.mp3;
+jumpLabel:end;
+;選択２
+label:choose2;
+The WebGAL project has reached 1000 stars on GitHub in just under a year! -e016_The_WebGAL project_has reached_1000.mp3;
+The development process of WebGAL is a process of learning development while developing. -e017_The_development process_of WebGAL_is_a process.mp3;
+WebGAL's scripting language was designed from the ground up to simplify production difficulty! -e018_WebGAL's _scripting language_was designed_from the_ground.mp3;
+;エンド
+label:end;
+;changeFigure:none -left -next;
+;changeFigure:stand.png -next;
+The WebGAL project supports many keyboard shortcuts and the ability to go back to scenes to more closely match the functionality of a visual novel game engine for the desktop. -e019_The_WebGAL_project_supports_many_keyboard shortcuts.mp3;
+Try pressing the "Backlog" button on the menu or scrolling the mouse wheel up! -e020_Try_pressing the_Backlog button.mp3;
+Features like quick save, quick load, auto mode and skip mode are also supported. -e021_Features_like_quick_save_quick_load.mp3;
+setTempAnimation:[{"position": {"x": 500,"y": 0},"duration": 0},{"position": {"x": 400,"y": 0},"duration": 250},{"position": {"x": 600,"y": 0},"duration": 500},{"position": {"x": 500,"y": 0},"duration": 250}] -target=fig-left -next;
+For developers who are developing games for the first time, we provide beautiful general-purpose UI and rich preset functions and animations. -e022_For developers_who_ are_developing_ games.mp3;
+So you can start making games quickly. -e023_So_you_can_ start_making_ games_quickly.mp3;
+We hope that your work will be exhibited at WebGAL. -e024_We_hope_ that_your_work.mp3;
+Thank you for your interest in the WebGAL project! -e025_Thank_you_ for_your_interest_in_the_WebGAL_project!.mp3;
+end;

packages/webgal/public/game/scene/start.txt

@@ -1,2 +1,2 @@
 ; WebGAL 引擎会默认读取 start.txt 作为初始场景，因此请不要删除，并在初始场景内跳转到其他场景
-choose:简体中文:demo_zh_cn.txt|日本語:demo_ja.txt;
+choose:简体中文:demo_zh_cn.txt|日本語:demo_ja.txt|English:demo_en.txt;

packages/webgal/public/webgal-serviceworker.js

@@ -8,7 +8,7 @@ self.addEventListener('fetch', function (event) {
   const url = event.request.url;
   const isReturnCache = !!(url.match('/assets/') && !url.match('game'));
   if (isReturnCache) {
-    console.log('%cCACHED: ' + url, 'color: #005CAF; padding: 2px;');
+    // console.log('%cCACHED: ' + url, 'color: #005CAF; padding: 2px;');
   }
   if (!isReturnCache) {
     event.respondWith(fetch(event.request));
@@ -24,6 +24,28 @@ self.addEventListener('fetch', function (event) {
         // 同时将获取的资源存入缓存
         return fetch(event.request)
           .then(function (networkResponse) {
+            console.log('%cCACHED: ' + url, 'color: #005CAF; padding: 2px;');
+            if (networkResponse.status === 206 && event.request.headers.has('range')) {
+              // 如果是部分响应且请求带有Range头，则创建新的请求，将完整响应返回给客户端
+              // eslint-disable-next-line max-nested-callbacks
+              return fetch(event.request.url).then(function (fullNetworkResponse) {
+                const headers = {};
+                for (let entry of fullNetworkResponse.headers.entries()) {
+                  headers[entry[0]] = entry[1];
+                }
+                const fullResponse = new Response(fullNetworkResponse.body, {
+                  status: fullNetworkResponse.status,
+                  statusText: fullNetworkResponse.statusText,
+                  headers: headers,
+                });
+                const clonedResponse = fullResponse.clone();
+                // eslint-disable-next-line max-nested-callbacks
+                caches.open('my-cache').then(function (cache) {
+                  cache.put(event.request, clonedResponse);
+                });
+                return fullResponse;
+              });
+            }
             const clonedResponse = networkResponse.clone();
             // eslint-disable-next-line max-nested-callbacks
             caches.open('my-cache').then(function (cache) {

packages/webgal/src/App.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { initializeScript } from './Core/initializeScript';
 import Menu from './Components/UI/Menu/Menu';
 import { Stage } from './Components/Stage/Stage';
-import { BottomControlPanel } from './Components/UI/BottomControlPanel/ButtomControlPanel';
+import { BottomControlPanel } from './Components/UI/BottomControlPanel/BottomControlPanel';
 import { Backlog } from './Components/UI/Backlog/Backlog';
 import { Provider } from 'react-redux';
 import { webgalStore } from './store/store';

packages/webgal/src/Components/Stage/AudioContainer/AudioContainer.tsx

@@ -1,5 +1,6 @@
 import { useSelector } from 'react-redux';
-import { RootState } from '@/store/store';
+import { RootState, webgalStore } from '@/store/store';
+import { setStage } from '@/store/stageReducer';
 import { useEffect } from 'react';
 import { logger } from '@/Core/util/etc/logger';
 
@@ -12,6 +13,9 @@ export const AudioContainer = () => {
   const vocalVol = mainVol * 0.01 * userDataState.optionData.vocalVolume * 0.01 * stageStore.vocalVolume * 0.01;
   const bgmVol = mainVol * 0.01 * userDataState.optionData.bgmVolume * 0.01 * stageStore.bgmVolume * 0.01;
   const bgmEnter = stageStore.bgmEnter;
+  const uiSoundEffects = stageStore.uiSe;
+  const seVol = mainVol * 0.01 * (userDataState.optionData?.seVolume ?? 100) * 0.01;
+  const uiSeVol = mainVol * 0.01 * (userDataState.optionData.uiSeVolume ?? 50) * 0.01;
   const isEnterGame = useSelector((state: RootState) => state.GUI.isEnterGame);
 
   /**
@@ -67,6 +71,36 @@ export const AudioContainer = () => {
     }
   }, [vocalVol]);
 
+  useEffect(() => {
+    if (uiSoundEffects === '') return;
+    const uiSeAudioElement = document.createElement('audio');
+    uiSeAudioElement.src = uiSoundEffects;
+    uiSeAudioElement.loop = false;
+    // 设置音量
+    if (!isNaN(uiSeVol)) {
+      uiSeAudioElement.volume = uiSeVol;
+    } else {
+      // 针对原来使用 WebGAL version <= 4.4.2 的用户数据中不存在UI音效音量的情况
+      logger.error('UI SE Vol is NaN');
+      uiSeAudioElement.volume = isNaN(seVol) ? mainVol / 100 : seVol / 100;
+    }
+    // 播放UI音效
+    uiSeAudioElement.play();
+    uiSeAudioElement.addEventListener('ended', () => {
+      // Processing after sound effects are played
+      uiSeAudioElement.remove();
+    });
+    webgalStore.dispatch(setStage({ key: 'uiSe', value: '' }));
+  }, [uiSoundEffects]);
+
+  useEffect(() => {
+    logger.debug(`设置音效音量: ${seVol}`);
+  }, [seVol]);
+
+  useEffect(() => {
+    logger.debug(`设置用户界面音效音量: ${uiSeVol}`);
+  }, [uiSeVol]);
+
   return (
     <div>
       <audio

packages/webgal/src/Components/Stage/TextBox/TextBox.tsx

@@ -162,6 +162,9 @@ export function splitChars(sentence: string) {
         } else if (words.length > 0) {
           // If no preceding word in the current iteration, but there are already words in the array, append to the last word
           words[words.length - 1] += character;
+        } else {
+          // If no preceding word, still add the punctuation as a new word
+          words.push(character);
         }
         continue;
       }

packages/webgal/src/Components/Stage/TextBox/textbox.module.scss

@@ -54,6 +54,7 @@ $height: 330px;
 
 .TextBox_textElement_start {
   @include text_shadow_textElement;
+  position: relative;
   animation: TextDelayShow 1000ms ease-out forwards;
   opacity: 0;
 }
@@ -97,6 +98,7 @@ $height: 330px;
 //}
 
 .TextBox_textElement_Settled {
+  position: relative;
   @include text_shadow_textElement;
   opacity: 1;
 }

packages/webgal/src/Components/UI/Backlog/Backlog.tsx

@@ -9,10 +9,13 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import useTrans from '@/hooks/useTrans';
 import { WebGAL } from '@/main';
 import { splitChars } from '@/Components/Stage/TextBox/TextBox';
+import useSoundEffect from '@/hooks/useSoundEffect';
 
 export const Backlog = () => {
   const t = useTrans('gaming.');
   // logger.info('Backlog render');
+  const { playSeClickBacklogJumpButton, playSeEnter, playSeClickCloseButton, playSeEnterCloseButton } =
+    useSoundEffect();
   const GUIStore = useSelector((state: RootState) => state.GUI);
   const dispatch = useDispatch();
   const iconSize = '0.8em';
@@ -43,17 +46,20 @@ export const Backlog = () => {
             <div className={styles.backlog_item_button_list}>
               <div
                 onClick={(e) => {
+                  playSeClickBacklogJumpButton();
                   jumpFromBacklog(i);
                   e.preventDefault();
                   e.stopPropagation();
                 }}
+                onMouseEnter={playSeEnter}
                 className={styles.backlog_item_button_element}
               >
                 <Return theme="outline" size={iconSize} fill="#ffffff" strokeWidth={3} />
               </div>
               {backlogItem.currentStageState.vocal ? (
                 <div
                   onClick={() => {
+                    playSeClickBacklogJumpButton();
                     // 获取到播放 backlog 语音的元素
                     const backlog_audio_element: any = document.getElementById('backlog_audio_play_element_' + i);
                     if (backlog_audio_element) {
@@ -64,6 +70,7 @@ export const Backlog = () => {
                       backlog_audio_element?.play();
                     }
                   }}
+                  onMouseEnter={playSeEnter}
                   className={styles.backlog_item_button_element}
                 >
                   <VolumeNotice theme="outline" size={iconSize} fill="#ffffff" strokeWidth={3} />
@@ -129,9 +136,11 @@ export const Backlog = () => {
             <CloseSmall
               className={styles.backlog_top_icon}
               onClick={() => {
+                playSeClickCloseButton();
                 dispatch(setVisibility({ component: 'showBacklog', visibility: false }));
                 dispatch(setVisibility({ component: 'showTextBox', visibility: true }));
               }}
+              onMouseEnter={playSeEnterCloseButton}
               theme="outline"
               size="4em"
               fill="#ffffff"