feat: template file load and font inject

Author: MakinoharaShoko

packages/webgal/src/Core/initializeScript.ts

@@ -14,6 +14,7 @@ import PixiStage from '@/Core/controller/stage/pixi/PixiController';
 import axios from 'axios';
 import { __INFO } from '@/config/info';
 import { WebGAL } from '@/Core/WebGAL';
+import { loadTemplate } from '@/Core/util/coreInitialFunction/templateLoader';
 
 const u = navigator.userAgent;
 export const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 判断是否是 iOS终端
@@ -26,6 +27,7 @@ export const initializeScript = (): void => {
   logger.info(`WebGAL v${__INFO.version}`);
   logger.info('Github: https://github.com/OpenWebGAL/WebGAL ');
   logger.info('Made with ❤ by OpenWebGAL');
+  loadTemplate();
   // 激活强制缩放
   // 在调整窗口大小时重新计算宽高，设计稿按照 1600*900。
   if (isIOS) {

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

@@ -0,0 +1,61 @@
+import axios from 'axios';
+import { logger } from '@/Core/util/logger';
+import { WebGAL } from '@/Core/WebGAL';
+import { TemplateFontDescriptor, WebgalTemplate } from '@/types/template';
+
+const TEMPLATE_PATH = './game/template/template.json';
+const TEMPLATE_FONT_STYLE_SELECTOR = 'style[data-webgal-template-fonts]';
+
+export async function loadTemplate(): Promise<WebgalTemplate | null> {
+  try {
+    const { data } = await axios.get<WebgalTemplate>(TEMPLATE_PATH);
+    WebGAL.template = data;
+    injectTemplateFonts(data.fonts ?? []);
+    return data;
+  } catch (error) {
+    logger.warn('加载模板文件失败', error);
+    return null;
+  }
+}
+
+function injectTemplateFonts(fonts: TemplateFontDescriptor[]): void {
+  if (!fonts.length) return;
+  const rules = fonts.map((font) => generateFontFaceRule(font)).filter((rule): rule is string => Boolean(rule));
+
+  if (!rules.length) return;
+
+  const styleElement = document.createElement('style');
+  styleElement.setAttribute('data-webgal-template-fonts', 'true');
+  styleElement.appendChild(document.createTextNode(rules.join('\n')));
+
+  const head = document.head;
+  if (!head) return;
+
+  const existing = head.querySelector<HTMLStyleElement>(TEMPLATE_FONT_STYLE_SELECTOR);
+  existing?.remove();
+
+  head.appendChild(styleElement);
+}
+
+function generateFontFaceRule(font: TemplateFontDescriptor): string | null {
+  const fontFamily = font['font-family'];
+  if (!fontFamily || !font.url || !font.type) {
+    logger.warn('忽略无效的模板字体配置', font);
+    return null;
+  }
+
+  const src = resolveTemplateAssetPath(font.url);
+  const weight = font.weight !== undefined ? `font-weight: ${font.weight};` : '';
+  const style = font.style ? `font-style: ${font.style};` : '';
+  const display = `font-display: ${font.display ?? 'swap'};`;
+
+  return `@font-face { font-family: '${fontFamily}'; src: url('${src}') format('${font.type}'); ${weight} ${style} ${display} }`;
+}
+
+function resolveTemplateAssetPath(path: string): string {
+  if (/^(https?:)?\/\//i.test(path) || path.startsWith('data:')) {
+    return path;
+  }
+  const normalized = path.replace(/^[./]+/, '');
+  return `./game/template/${normalized}`;
+}

packages/webgal/src/Core/webgalCore.ts

@@ -4,6 +4,7 @@ import { SceneManager } from '@/Core/Modules/scene';
 import { AnimationManager } from '@/Core/Modules/animations';
 import { Gameplay } from './Modules/gamePlay';
 import { Events } from '@/Core/Modules/events';
+import { WebgalTemplate } from '@/types/template';
 
 export class WebgalCore {
   public sceneManager = new SceneManager();
@@ -13,4 +14,5 @@ export class WebgalCore {
   public gameName = '';
   public gameKey = '';
   public events = new Events();
+  public template: WebgalTemplate | null = null;
 }

packages/webgal/src/types/template.ts

@@ -0,0 +1,25 @@
+export type TemplateFontFormat =
+  | 'truetype'
+  | 'opentype'
+  | 'woff'
+  | 'woff2'
+  | 'embedded-opentype'
+  | 'svg'
+  | 'collection';
+
+export interface TemplateFontDescriptor {
+  'font-family': string;
+  url: string;
+  type: TemplateFontFormat;
+  weight?: string | number;
+  style?: string;
+  display?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+}
+
+export interface WebgalTemplate {
+  name: string;
+  id?: string;
+  'webgal-version': string;
+  fonts?: TemplateFontDescriptor[];
+  [key: string]: unknown;
+}