feat: add custom font choose and apply

Author: MakinoharaShoko

packages/webgal/src/Core/gameScripts/choose/index.tsx

@@ -6,14 +6,14 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import styles from './choose.module.scss';
 import { webgalStore } from '@/store/store';
-import { textFont } from '@/store/userDataInterface';
 import { PerformController } from '@/Core/Modules/perform/performController';
 import { useSEByWebgalStore } from '@/hooks/useSoundEffect';
 import { WebGAL } from '@/Core/WebGAL';
 import { whenChecker } from '@/Core/controller/gamePlay/scriptExecutor';
 import useEscape from '@/hooks/useEscape';
 import useApplyStyle from '@/hooks/useApplyStyle';
 import { Provider } from 'react-redux';
+import { useFontFamily } from '@/hooks/useFontFamily';
 
 class ChooseOption {
   /**
@@ -81,8 +81,7 @@ export const choose = (sentence: ISentence): IPerform => {
 };
 
 function Choose(props: { chooseOptions: ChooseOption[] }) {
-  const fontFamily = webgalStore.getState().userData.optionData.textboxFont;
-  const font = fontFamily === textFont.song ? '"思源宋体", serif' : '"WebgalUI", serif';
+  const font = useFontFamily();
   const { playSeEnter, playSeClick } = useSEByWebgalStore();
   const applyStyle = useApplyStyle('Stage/Choose/choose.scss');
   // 运行时计算JSX.Element[]

packages/webgal/src/Core/gameScripts/getUserInput/index.tsx

@@ -6,13 +6,13 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import styles from './getUserInput.module.scss';
 import { webgalStore } from '@/store/store';
-import { textFont } from '@/store/userDataInterface';
 import { PerformController } from '@/Core/Modules/perform/performController';
 import { useSEByWebgalStore } from '@/hooks/useSoundEffect';
 import { WebGAL } from '@/Core/WebGAL';
 import { getStringArgByKey } from '@/Core/util/getSentenceArg';
 import { nextSentence } from '@/Core/controller/gamePlay/nextSentence';
 import { setStageVar } from '@/store/stageReducer';
+import { getCurrentFontFamily } from '@/hooks/useFontFamily';
 
 /**
  * 显示选择枝
@@ -27,8 +27,7 @@ export const getUserInput = (sentence: ISentence): IPerform => {
   buttonText = buttonText === '' ? 'OK' : buttonText;
   const defaultValue = getStringArgByKey(sentence, 'defaultValue');
 
-  const fontFamily = webgalStore.getState().userData.optionData.textboxFont;
-  const font = fontFamily === textFont.song ? '"思源宋体", serif' : '"WebgalUI", serif';
+  const font = getCurrentFontFamily();
 
   const { playSeEnter, playSeClick } = useSEByWebgalStore();
   const chooseElements = (

packages/webgal/src/Core/util/coreInitialFunction/templateLoader.ts

@@ -2,6 +2,10 @@ import axios from 'axios';
 import { logger } from '@/Core/util/logger';
 import { WebGAL } from '@/Core/WebGAL';
 import { TemplateFontDescriptor, WebgalTemplate } from '@/types/template';
+import { buildFontOptionsFromTemplate } from '@/Core/util/fonts/fontOptions';
+import { webgalStore } from '@/store/store';
+import { setFontOptions } from '@/store/GUIReducer';
+import { setOptionData } from '@/store/userDataReducer';
 
 const TEMPLATE_PATH = './game/template/template.json';
 const TEMPLATE_FONT_STYLE_SELECTOR = 'style[data-webgal-template-fonts]';
@@ -10,14 +14,27 @@ export async function loadTemplate(): Promise<WebgalTemplate | null> {
   try {
     const { data } = await axios.get<WebgalTemplate>(TEMPLATE_PATH);
     WebGAL.template = data;
-    injectTemplateFonts(data.fonts ?? []);
+    const fonts = data.fonts ?? [];
+    injectTemplateFonts(fonts);
+    updateFontOptions(fonts);
     return data;
   } catch (error) {
     logger.warn('加载模板文件失败', error);
+    updateFontOptions([]);
     return null;
   }
 }
 
+function updateFontOptions(fonts: TemplateFontDescriptor[]): void {
+  const options = buildFontOptionsFromTemplate(fonts);
+  webgalStore.dispatch(setFontOptions(options));
+  const currentIndex = webgalStore.getState().userData.optionData.textboxFont ?? 0;
+  if (options.length === 0) return;
+  if (currentIndex >= options.length) {
+    webgalStore.dispatch(setOptionData({ key: 'textboxFont', value: 0 }));
+  }
+}
+
 function injectTemplateFonts(fonts: TemplateFontDescriptor[]): void {
   if (!fonts.length) return;
   const rules = fonts.map((font) => generateFontFaceRule(font)).filter((rule): rule is string => Boolean(rule));

packages/webgal/src/Core/util/fonts/fontOptions.ts

@@ -0,0 +1,46 @@
+import { FontOption } from '@/store/guiInterface';
+import { TemplateFontDescriptor } from '@/types/template';
+
+export const DEFAULT_FONT_OPTIONS: FontOption[] = [
+  {
+    family: `'思源宋体', serif`,
+    source: 'default',
+    labelKey: 'textFont.options.siYuanSimSun',
+  },
+  {
+    family: `'WebgalUI', serif`,
+    source: 'default',
+    labelKey: 'textFont.options.SimHei',
+  },
+  {
+    family: `'LXGW', serif`,
+    source: 'default',
+    labelKey: 'textFont.options.lxgw',
+  },
+];
+
+export const FALLBACK_FONT_FAMILY = DEFAULT_FONT_OPTIONS[1].family;
+
+export function buildFontOptionsFromTemplate(fonts: TemplateFontDescriptor[]): FontOption[] {
+  const templateOptions: FontOption[] = fonts.map((font) => ({
+    family: formatFontFamily(font['font-family']),
+    source: 'template',
+    label: font['font-family'],
+  }));
+
+  const combined = [...templateOptions, ...DEFAULT_FONT_OPTIONS];
+
+  const seen = new Set<string>();
+  return combined.filter((option) => {
+    if (seen.has(option.family)) return false;
+    seen.add(option.family);
+    return true;
+  });
+}
+
+export function formatFontFamily(fontFamily: string): string {
+  const trimmed = fontFamily.trim();
+  const needsQuote = /\s/.test(trimmed);
+  const normalized = needsQuote ? `'${trimmed}'` : trimmed;
+  return `${normalized}, serif`;
+}

packages/webgal/src/UI/Menu/Options/Display/Display.tsx

@@ -6,7 +6,7 @@ import styles from '@/UI/Menu/Options/options.module.scss';
 import useFullScreen from '@/hooks/useFullScreen';
 import useTrans from '@/hooks/useTrans';
 import { RootState } from '@/store/store';
-import { textFont, textSize } from '@/store/userDataInterface';
+import { textSize } from '@/store/userDataInterface';
 import { setOptionData } from '@/store/userDataReducer';
 import { useDispatch, useSelector } from 'react-redux';
 import { OptionSlider } from '../OptionSlider';
@@ -16,6 +16,15 @@ export function Display() {
   const dispatch = useDispatch();
   const t = useTrans('menu.options.pages.display.options.');
   const { isSupported: isFullscreenSupported, enter: enterFullscreen, exit: exitFullscreen } = useFullScreen();
+  const fontOptions = useSelector((state: RootState) => state.GUI.fontOptions);
+  const fontOptionTexts = fontOptions.map((option) => {
+    if (option.labelKey) return t(option.labelKey);
+    if (option.label) return option.label;
+    return option.family;
+  });
+  const currentFontIndex = fontOptions.length
+    ? Math.min(userDataState.optionData.textboxFont, fontOptions.length - 1)
+    : 0;
 
   return (
     <div className={styles.Options_main_content_half}>
@@ -50,22 +59,12 @@ export function Display() {
       </NormalOption>
       <NormalOption key="textFont" title={t('textFont.title')}>
         <NormalButton
-          textList={t('textFont.options.siYuanSimSun', 'textFont.options.SimHei', 'textFont.options.lxgw')}
-          functionList={[
-            () => {
-              dispatch(setOptionData({ key: 'textboxFont', value: textFont.song }));
-              setStorage();
-            },
-            () => {
-              dispatch(setOptionData({ key: 'textboxFont', value: textFont.hei }));
-              setStorage();
-            },
-            () => {
-              dispatch(setOptionData({ key: 'textboxFont', value: textFont.lxgw }));
-              setStorage();
-            },
-          ]}
-          currentChecked={userDataState.optionData.textboxFont}
+          textList={fontOptionTexts}
+          functionList={fontOptions.map((_, index) => () => {
+            dispatch(setOptionData({ key: 'textboxFont', value: index }));
+            setStorage();
+          })}
+          currentChecked={currentFontIndex}
         />
       </NormalOption>
       <NormalOption key="textSpeed" title={t('textSpeed.title')}>

packages/webgal/src/hooks/useFontFamily.ts

@@ -1,18 +1,23 @@
 import { useSelector } from 'react-redux';
-import { RootState } from '@/store/store';
-import { textFont } from '@/store/userDataInterface';
-import { match } from '@/Core/util/match';
+import { RootState, webgalStore } from '@/store/store';
+import { FALLBACK_FONT_FAMILY } from '@/Core/util/fonts/fontOptions';
 
-export function useFontFamily() {
-  const fontFamily = useSelector((state: RootState) => state.userData.optionData.textboxFont);
+export function useFontFamily(): string {
+  return useSelector(selectFontFamily);
+}
 
-  function getFont() {
-    return match(fontFamily)
-      .with(textFont.song, () => '"思源宋体", serif')
-      .with(textFont.lxgw, () => '"LXGW", serif')
-      .with(textFont.hei, () => '"WebgalUI", serif')
-      .default(() => '"WebgalUI", serif');
-  }
+export function getCurrentFontFamily(): string {
+  return selectFontFamily(webgalStore.getState());
+}
 
-  return getFont();
+export function selectFontFamily(state: RootState): string {
+  const index = state.userData.optionData.textboxFont ?? 0;
+  const fonts = state.GUI.fontOptions;
+  if (fonts[index]) {
+    return fonts[index].family;
+  }
+  if (fonts.length > 0) {
+    return fonts[0].family;
+  }
+  return FALLBACK_FONT_FAMILY;
 }

packages/webgal/src/store/GUIReducer.ts

@@ -1,16 +1,20 @@
-/**
- * @file 记录当前GUI的状态信息，引擎初始化时会重置。
- * @author Mahiru
- */
 import { getStorage } from '@/Core/controller/storage/storageController';
-import { GuiAsset, IGuiState, MenuPanelTag, setAssetPayload, setVisibilityPayload } from '@/store/guiInterface';
+import {
+  FontOption,
+  GuiAsset,
+  IGuiState,
+  MenuPanelTag,
+  setAssetPayload,
+  setVisibilityPayload,
+} from '@/store/guiInterface';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-import { key } from 'localforage';
+import { DEFAULT_FONT_OPTIONS } from '@/Core/util/fonts/fontOptions';
 
 /**
  * 初始GUI状态表
  */
 const initState: IGuiState = {
+  fontOptions: [...DEFAULT_FONT_OPTIONS],
   showBacklog: false,
   showStarter: true,
   showTitle: true,
@@ -80,6 +84,9 @@ const GUISlice = createSlice({
     setFontOptimization: (state, action: PayloadAction<boolean>) => {
       state.fontOptimization = action.payload;
     },
+    setFontOptions: (state, action: PayloadAction<FontOption[]>) => {
+      state.fontOptions = [...action.payload];
+    },
   },
 });
 
@@ -90,6 +97,7 @@ export const {
   setLogoImage,
   setEnableAppreciationMode,
   setFontOptimization,
+  setFontOptions,
 } = GUISlice.actions;
 export default GUISlice.reducer;
 

packages/webgal/src/store/guiInterface.ts

@@ -1,5 +1,3 @@
-import { IWebGalTextBoxTheme } from '@/Stage/themeInterface';
-
 /**
  * 当前Menu页面显示的Tag
  */
@@ -13,6 +11,7 @@ export enum MenuPanelTag {
  * @interface IGuiState GUI状态接口
  */
 export interface IGuiState {
+  fontOptions: FontOption[];
   showStarter: boolean; // 是否显示初始界面（用于使得bgm可以播放)
   showTitle: boolean; // 是否显示标题界面
   showMenuPanel: boolean; // 是否显示Menu界面
@@ -35,7 +34,7 @@ export interface IGuiState {
 
 export type componentsVisibility = Pick<
   IGuiState,
-  Exclude<keyof IGuiState, 'currentMenuTag' | 'titleBg' | 'titleBgm' | 'logoImage' | 'theme'>
+  Exclude<keyof IGuiState, 'currentMenuTag' | 'titleBg' | 'titleBgm' | 'logoImage' | 'theme' | 'fontOptions'>
 >;
 // 标题资源
 export type GuiAsset = Pick<IGuiState, 'titleBgm' | 'titleBg'>;
@@ -58,3 +57,12 @@ export interface setAssetPayload {
 }
 
 export type GuiStore = IGuiStore;
+
+export type FontOptionSource = 'default' | 'template';
+
+export interface FontOption {
+  family: string;
+  source: FontOptionSource;
+  labelKey?: string;
+  label?: string;
+}

packages/webgal/src/store/userDataInterface.ts

@@ -18,12 +18,6 @@ export enum textSize {
   large,
 }
 
-export enum textFont {
-  song,
-  hei,
-  lxgw,
-}
-
 export enum voiceOption {
   yes,
   no,
@@ -47,7 +41,7 @@ export interface IOptionData {
   seVolume: number; // 音效音量
   uiSeVolume: number; // 用户界面音效音量
   slPage: number; // 存读档界面所在页面
-  textboxFont: textFont;
+  textboxFont: number;
   textboxOpacity: number;
   language: language;
   voiceInterruption: voiceOption; // 是否中断语音

packages/webgal/src/store/userDataReducer.ts

@@ -13,7 +13,6 @@ import {
   IUserData,
   fullScreenOption,
   playSpeed,
-  textFont,
   textSize,
   voiceOption,
 } from '@/store/userDataInterface';
@@ -31,7 +30,7 @@ const initialOptionSet: IOptionData = {
   bgmVolume: 25, // 背景音乐音量
   seVolume: 100, // 音效音量
   uiSeVolume: 50, // UI音效音量
-  textboxFont: textFont.song,
+  textboxFont: 0,
   textboxOpacity: 75,
   language: language.zhCn,
   voiceInterruption: voiceOption.yes,