@jolibox/implement 1.1.4-beta.4

package/src/h5/api/index.ts

@@ -0,0 +1,4 @@
+import './get-system-info';
+import './lifecycle';
+import './storage';
+import './task';

package/src/h5/api/lifecycle.ts

@@ -0,0 +1,110 @@
+import { BaseError, createCommands, EventEmitter, hostEmitter, wrapUserFunction } from '@jolibox/common';
+import { createAPI, createSyncAPI, registerCanIUse, t } from './base';
+import { reportError } from '@/common/report/errors/report';
+import { h5TaskEmitter } from '../report';
+
+const EXIT_GAME = 'exitGame';
+const ON_GAME_SHOW = 'onGameShow';
+const ON_GAME_HIDE = 'onGameHide';
+const ON_READY = 'onReady';
+
+const commands = createCommands();
+
+const safeCallbackWrapper = wrapUserFunction(reportError as (err: Error | BaseError) => void);
+const exitGame = createAPI(EXIT_GAME, {
+  async implement(onBeforeExit: () => void) {
+    const safeCallback = safeCallbackWrapper(onBeforeExit);
+    // 集中上报
+    safeCallback.call(this);
+
+    //exit
+  }
+});
+
+let isPageVisible = true;
+let isPageFocused = true;
+let lastEventTime = 0;
+
+const visibleEmitter = h5TaskEmitter;
+
+// 防止交叉触发
+function handleVisibilityChange() {
+  const currentTime = Date.now();
+  if (currentTime - lastEventTime < 100) return; // 忽略100ms内的重复触发
+  lastEventTime = currentTime;
+
+  const currentState = document.visibilityState === 'visible';
+  if (currentState !== isPageVisible) {
+    isPageVisible = currentState;
+    visibleEmitter.emit('visible', isPageVisible);
+  }
+}
+
+function handleFocusBlur(eventType: string) {
+  const currentTime = Date.now();
+  if (currentTime - lastEventTime < 100) return; // 忽略100ms内的重复触发
+  lastEventTime = currentTime;
+
+  if (eventType === 'focus' && !isPageFocused) {
+    isPageFocused = true;
+  } else if (eventType === 'blur' && isPageFocused) {
+    isPageFocused = false;
+  }
+
+  visibleEmitter.emit('visible', isPageFocused);
+}
+
+document.addEventListener('visibilitychange', handleVisibilityChange);
+window.addEventListener('focus', () => handleFocusBlur('focus'));
+window.addEventListener('blur', () => handleFocusBlur('blur'));
+
+const onGameShow = createSyncAPI(ON_GAME_SHOW, {
+  paramsSchema: t.tuple(t.function()),
+  implement(callback) {
+    const safeCallback = safeCallbackWrapper(callback);
+    visibleEmitter.on('visible', (visible) => {
+      visible && safeCallback();
+    });
+  }
+});
+
+const onGameHide = createSyncAPI(ON_GAME_HIDE, {
+  paramsSchema: t.tuple(t.function()),
+  implement(callback) {
+    const safeCallback = safeCallbackWrapper(callback);
+    visibleEmitter.on('visible', (visible) => {
+      !visible && safeCallback();
+    });
+  }
+});
+
+const onReadyHandler = createSyncAPI(ON_READY, {
+  paramsSchema: t.tuple(t.function()),
+  implement(callback) {
+    const safeCallback = safeCallbackWrapper(callback);
+    hostEmitter.on('LifecycleEvent.onReady', (info) => {
+      safeCallback(info);
+    });
+  }
+});
+
+commands.registerCommand('LifecycleSDK.exit', exitGame);
+commands.registerCommand('LifecycleSDK.onReady', onReadyHandler);
+commands.registerCommand('LifecycleSDK.onJoliboxShow', onGameShow);
+commands.registerCommand('LifecycleSDK.onJoliboxHide', onGameHide);
+
+registerCanIUse('lifeCycle.exitGame', {
+  version: '1.0.0' // mock
+});
+
+registerCanIUse('lifeCycle.onReady', {
+  version: '1.0.0' // mock
+});
+
+registerCanIUse('lifeCycle.onGameShow', {
+  version: '1.0.0' // mock
+});
+
+registerCanIUse('lifeCycle.onGameHide', {
+  version: '1.0.0' // mock
+});

package/src/h5/api/storage.ts

@@ -0,0 +1,173 @@
+import { createAPI, t, registerCanIUse } from './base';
+import { createCommands, isBoolean, isNumber, isString } from '@jolibox/common';
+import JoliboxHttpClient from '@/h5/http';
+import { context } from '@/common/context';
+import { API_CODE, StorageResponse } from '@jolibox/types';
+import localForage from 'localforage';
+
+const commands = createCommands();
+
+export class JoliboxCloudStorage {
+  private gameId: string;
+  private httpClient: JoliboxHttpClient;
+  private gameStore: LocalForage;
+  constructor() {
+    this.gameId = this.getGameId();
+    this.httpClient = new JoliboxHttpClient({
+      baseUrl: context.testMode ? 'https://stg-api.jolibox.com' : 'https://api.jolibox.com'
+    });
+    //没有game的情况使用全局空间
+    this.gameStore = localForage.createInstance({
+      name: this.gameId.length ? this.gameId : 'default'
+    });
+  }
+  /**
+   *  Cloud storage getItem api
+   */
+  private getGameId = () => context.game_id;
+  /**
+   *
+   * @param key getItem key
+   */
+  getItem = async (key: string): Promise<StorageResponse<string | null>> => {
+    const {
+      code,
+      data: originData,
+      message
+    } = await this.httpClient.get<
+      StorageResponse<{
+        key: string;
+        value: string | null;
+      }>
+    >(`/api/games/user-storage/${this.gameId}`, {
+      query: {
+        key
+      }
+    });
+    let data = originData?.value;
+    let fallbackmsg = message;
+    if (code !== 'SUCCESS') {
+      // Only when data cannot be retrieved from the cloud should it be read locally.
+      data = await this.gameStore.getItem<string>(key);
+      console.info('[SDK] cloud storage getItem failed, read from localstorage', data);
+      fallbackmsg += 'fallback to localstorage';
+    }
+    const res = {
+      code,
+      message: fallbackmsg,
+      data: data && data !== 'undefined' ? data : null
+    };
+    return res;
+  };
+
+  /**
+   * Cloud storage setItem api
+   * @param progress - The progress of the loading, should be an integer between 0 and 100
+   */
+  setItem = async (key: string, value: string | boolean | number): Promise<StorageResponse<void>> => {
+    const valueToStore = typeof value == 'string' ? value : String(value);
+    //Regardless of whether the cloud operation is successful, corresponding changes should be made locally.
+    const { code, message } = await this.httpClient.post(`/api/games/user-storage/${this.gameId}`, {
+      data: {
+        key,
+        value: valueToStore
+      }
+    });
+    await this.gameStore.setItem(key, valueToStore);
+    return {
+      code,
+      message
+    };
+  };
+
+  removeItem = async (key: string): Promise<StorageResponse<void>> => {
+    await this.gameStore.removeItem(key);
+    const { code, message } = await this.httpClient.post(`/api/games/user-storage/${this.gameId}/remove`, {
+      data: {
+        key
+      }
+    });
+    return {
+      code,
+      message
+    };
+  };
+
+  clear = async (): Promise<StorageResponse<void>> => {
+    await this.gameStore.clear();
+    const { code, message } = await this.httpClient.post(`/api/games/user-storage/${this.gameId}/clear`, {});
+    return {
+      code,
+      message
+    };
+  };
+}
+
+const storageImpl = new JoliboxCloudStorage();
+const getStorage = createAPI('getLocalStorage', {
+  paramsSchema: t.tuple(t.string()),
+  async implement(key) {
+    return await storageImpl.getItem(key);
+  }
+});
+
+commands.registerCommand('StorageSDK.getItem', getStorage);
+
+registerCanIUse('storage.getItem', {
+  version: '1.0.0',
+  properties: {
+    key: '1.0.0',
+    value: '1.0.0'
+  }
+});
+
+const setStorage = createAPI('setStorage', {
+  paramsSchema: t.tuple(t.string(), t.or(t.string(), t.boolean(), t.number())),
+  async implement(key, value) {
+    return await storageImpl.setItem(key, value);
+  }
+});
+
+commands.registerCommand('StorageSDK.setItem', setStorage);
+
+registerCanIUse('storage.setItem', {
+  version: '1.0.0',
+  properties: {
+    key: '1.0.0',
+    value: '1.0.0'
+  }
+});
+
+/**
+ * 移除指定key
+ */
+export const removeStorage = createAPI('removeStorage', {
+  paramsSchema: t.tuple(t.string()),
+  async implement(key) {
+    return await storageImpl.removeItem(key);
+  }
+});
+
+commands.registerCommand('StorageSDK.removeItem', removeStorage);
+
+registerCanIUse('storage.removeItem', {
+  version: '1.0.0',
+  properties: {
+    key: '1.0.0'
+  }
+});
+
+/**
+ * 清理本地数据缓存
+ */
+const clearStorage = createAPI('clearStorage', {
+  async implement() {
+    return await storageImpl.clear();
+  }
+});
+
+commands.registerCommand('StorageSDK.clear', clearStorage);
+
+registerCanIUse('storage.clear', {
+  version: '1.0.0'
+});

package/src/h5/api/task.ts

@@ -0,0 +1,197 @@
+import { createCommands, logger } from '@jolibox/common';
+
+import { createAPI, registerCanIUse, t } from './base';
+import { taskTracker } from '../report';
+
+const commands = createCommands();
+
+const onLevelFinished = createAPI('levelFinished', {
+  paramsSchema: t.tuple(
+    t.string(),
+    t.object({
+      result: t.boolean(),
+      duration: t.number()
+    })
+  ),
+  implement: async (levelId, parmas) => {
+    const { result, duration } = parmas;
+    logger.info(`onLevelFinished`, result, duration);
+    return taskTracker.reporter({
+      event: 'COMPLETE_QUEST'
+    });
+  }
+});
+
+const onTaskFinished = createAPI('taskFinished', {
+  paramsSchema: t.tuple(
+    t.string(),
+    t.object({
+      duration: t.number()
+    })
+  ),
+  implement: async (taskId, params) => {
+    const { duration } = params;
+    logger.info(`onTaskFinished`, duration);
+  }
+});
+
+const onLevelUpgrade = createAPI('levelUpgrade', {
+  paramsSchema: t.tuple(t.string(), t.string()),
+  implement: async (levelId, name) => {
+    return await taskTracker.reporter({
+      event: 'COMPLETE_QUEST'
+    });
+  }
+});
+
+const onHistoryUserLevel = createAPI('onHistoryUserLevel', {
+  paramsSchema: t.tuple(t.number()),
+  implement: async (level) => {
+    logger.info('onHistoryUserLevel', level);
+  }
+});
+
+const onHistoryUserScore = createAPI('onHistoryUserScore', {
+  paramsSchema: t.tuple(t.number()),
+  implement: async (score) => {
+    logger.info('onHistoryUserScore', score);
+  }
+});
+
+const onTaskEvent = createAPI('taskEvent', {
+  paramsSchema: t.tuple(
+    t.string(),
+    t.object({
+      tools: t
+        .array(
+          t.object({
+            id: t.string(),
+            name: t.string(),
+            count: t.number(),
+            description: t.string().optional(),
+            price: t
+              .object({
+                amount: t.number(),
+                unit: t.string()
+              })
+              .optional()
+          })
+        )
+        .optional(),
+      awards: t
+        .array(
+          t.object({
+            id: t.string(),
+            name: t.string()
+          })
+        )
+        .optional()
+    })
+  ),
+  implement: async (taskId, params) => {
+    if (params.tools?.length) {
+      return await taskTracker.reporter({
+        event: 'USE_GAME_ITEM'
+      });
+    }
+  }
+});
+
+const onTaskPayment = createAPI('taskPayment', {
+  paramsSchema: t.tuple(
+    t.string(),
+    t.object({
+      id: t.string(),
+      amount: t.number(),
+      unit: t.string()
+    })
+  ),
+  implement: async () => {
+    return await taskTracker.reporter({
+      event: 'IN_GAME_PURCHASES'
+    });
+  }
+});
+
+commands.registerCommand('TaskTrackerSDK.levelFinished', onLevelFinished);
+commands.registerCommand('TaskTrackerSDK.taskFinished', onTaskFinished);
+commands.registerCommand('TaskTrackerSDK.levelUpgrade', onLevelUpgrade);
+commands.registerCommand('TaskTrackerSDK.historyUserLevel', onHistoryUserLevel);
+commands.registerCommand('TaskTrackerSDK.historyUserScore', onHistoryUserScore);
+commands.registerCommand('TaskTrackerSDK.taskEvent', onTaskEvent);
+commands.registerCommand('TaskTrackerSDK.taskPayment', onTaskPayment);
+
+registerCanIUse('TaskTrackerSDK.onLevelFinished', {
+  version: '1.0.0',
+  properties: {
+    levelId: '1.0.0',
+    params: {
+      result: '1.0.0',
+      duration: '1.0.0'
+    }
+  }
+});
+
+registerCanIUse('TaskTrackerSDK.onTaskFinished', {
+  version: '1.0.0',
+  properties: {
+    taskId: '1.0.0',
+    duration: '1.0.0'
+  }
+});
+
+registerCanIUse('TaskTrackerSDK.onLevelUpgrade', {
+  version: '1.0.0',
+  properties: {
+    levelId: '1.0.0',
+    name: '1.0.0'
+  }
+});
+
+registerCanIUse('TaskTrackerSDK.onHistoryUserLevel', {
+  version: '1.0.0',
+  properties: {
+    level: '1.0.0'
+  }
+});
+
+registerCanIUse('TaskTrackerSDK.onHistoryUserScore', {
+  version: '1.0.0',
+  properties: {
+    score: '1.0.0'
+  }
+});
+
+registerCanIUse('TaskTrackerSDK.onTaskEvent', {
+  version: '1.0.0',
+  properties: {
+    taskId: '1.0.0',
+    params: {
+      tools: {
+        id: '1.0.0',
+        name: '1.0.0',
+        count: '1.0.0',
+        description: '1.0.0',
+        price: {
+          amount: '1.0.0',
+          unit: '1.0.0'
+        }
+      },
+      awards: {
+        id: '1.0.0',
+        name: '1.0.0'
+      }
+    }
+  }
+});
+
+registerCanIUse('TaskTrackerSDK.onTaskPayment', {
+  version: '1.0.0',
+  properties: {
+    taskId: '1.0.0',
+    params: {
+      amount: '1.0.0',
+      unit: '1.0.0'
+    }
+  }
+});

package/src/h5/bootstrap/index.ts

@@ -0,0 +1,16 @@
+import { hostEmitter } from '@jolibox/common';
+import { taskTracker } from '../report';
+
+function addDomContentLoaded() {
+  hostEmitter.on('onDocumentReady', (startTime: number) => {
+    hostEmitter.emit('LifecycleEvent.onReady', {
+      isLogin: false
+    });
+
+    taskTracker.start(Date.now() - startTime);
+  });
+}
+
+export function config(): void {
+  addDomContentLoaded();
+}

package/src/h5/http/index.ts

@@ -0,0 +1,189 @@
+import { IHttpClient } from '@/common/http';
+import { xUserAgent } from '../../common/http/xua';
+import { context } from '@/common/context';
+
+declare global {
+  interface Window {
+    JoliboxHttpClient: typeof JoliboxHttpClient;
+  }
+}
+
+interface IHttpClientInitParams {
+  baseUrl?: string;
+}
+
+const timeoutFn = (ms: number) => {
+  const ctrl = new AbortController();
+  setTimeout(() => ctrl.abort(), ms);
+  return ctrl.signal;
+};
+
+(AbortSignal as any).timeout ??= timeoutFn;
+
+export class JoliboxHttpClient implements IHttpClient {
+  private baseUrl: string;
+  private xua = xUserAgent();
+
+  private getJoliSource = () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.get('joliSource') ?? null;
+  };
+
+  // private getApiBaseURL = () => {
+  //   const urlParams = new URLSearchParams(window.location.search);
+  //   return urlParams.get('apiBaseURL') ?? null;
+  // };
+
+  constructor(config?: IHttpClientInitParams) {
+    const defaultUrl = context.testMode ? 'https://stg-api.jolibox.com' : 'https://api.jolibox.com';
+    this.baseUrl = config?.baseUrl ?? defaultUrl;
+  }
+
+  async get<T>(
+    path: string,
+    {
+      query,
+      headers,
+      timeout
+    }: {
+      query?: Record<string, string>;
+      headers?: Record<string, string>;
+      timeout?: number;
+    }
+  ) {
+    const searchParams = new URLSearchParams(query);
+    const search = searchParams.toString();
+    const url = `${this.baseUrl}${path}${search ? `?${search}` : ''}`;
+    const xua = this.xua;
+    const joliSource = this.getJoliSource();
+    headers = Object.assign(
+      {},
+      headers,
+      xua ? { 'x-user-agent': xua } : {},
+      joliSource ? { 'x-joli-source': joliSource } : {}
+    );
+    const response = await fetch(url, {
+      method: 'GET',
+      headers,
+      signal: timeoutFn(timeout ?? 30000)
+    });
+    return (await response.json()) as T;
+  }
+
+  async post<T = any>(
+    path: string,
+    {
+      data,
+      query,
+      headers,
+      timeout
+    }: {
+      data?: any;
+      query?: Record<string, string>;
+      headers?: Record<string, string>;
+      timeout?: number;
+    }
+  ) {
+    const searchParams = new URLSearchParams(query);
+    const search = searchParams.toString();
+    const url = `${this.baseUrl}${path}${search ? `?${search}` : ''}`;
+    const xua = this.xua;
+    const joliSource = this.getJoliSource();
+    headers = Object.assign(
+      {},
+      headers,
+      { 'Content-Type': 'application/json' },
+      xua ? { 'x-user-agent': xua } : {},
+      joliSource ? { 'x-joli-source': joliSource } : {}
+    );
+    const response = await fetch(url, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(data),
+      signal: timeoutFn(timeout ?? 30000)
+    });
+    const responseContentType = response.headers.get('content-type');
+
+    // return blob
+    if (responseContentType?.includes('application/octet-stream')) {
+      try {
+        return response.blob() as unknown as T;
+      } catch (e) {
+        return (await response.arrayBuffer()) as unknown as T;
+      }
+    }
+
+    // return form data
+    if (
+      responseContentType?.includes('multipart/form-data') ||
+      responseContentType?.includes('application/x-www-form-urlencoded')
+    ) {
+      try {
+        return response.formData() as unknown as T;
+      } catch (e) {
+        return (await response.text()) as unknown as T;
+      }
+    }
+
+    // return json
+    if (responseContentType?.includes('application/json')) {
+      try {
+        return (await response.json()) as T;
+      } catch (e) {
+        return (await response.text()) as unknown as T;
+      }
+    }
+
+    // return text
+    return response as unknown as T;
+  }
+
+  async put<T>(
+    path: string,
+    {
+      data,
+      query,
+      headers
+    }: {
+      data?: any;
+      query?: Record<string, string>;
+      headers?: Record<string, string>;
+      timeout?: number;
+    }
+  ) {
+    try {
+      const searchParams = new URLSearchParams(query);
+      const search = searchParams.toString();
+      const url = `${this.baseUrl}${path}${search ? `?${search}` : ''}`;
+      const xua = this.xua;
+      const joliSource = this.getJoliSource();
+      headers = Object.assign(
+        {},
+        headers,
+        { 'Content-Type': 'application/json' },
+        xua ? { 'x-user-agent': xua } : {},
+        joliSource ? { 'x-joli-source': joliSource } : {}
+      );
+      const response = await fetch(url, {
+        method: 'PUT',
+        headers,
+        body: JSON.stringify(data ?? {}) // 将数据转换为 JSON 字符串
+      });
+
+      // 检查响应状态
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      const result = (await response.json()) as T;
+      return result;
+    } catch (error) {
+      console.error('Error:', error);
+      throw error;
+    }
+  }
+}
+
+window.JoliboxHttpClient = JoliboxHttpClient;
+
+export default JoliboxHttpClient;

package/src/h5/http/utils/__tests__/uuid.test.ts

@@ -0,0 +1,16 @@
+// import { expect, test } from "vitest";
+import { isValidUUIDV4, uuidv4 } from '../../../../common/http/uuid';
+
+describe('uuid', () => {
+  it('test uuid', () => {
+    const uuid = uuidv4();
+    expect(uuid.length).toBe(36);
+    expect(isValidUUIDV4(uuid)).toBe(true);
+  });
+
+  it('isValidUUIDV4', () => {
+    const randomUUIDV4 = '5b1e0b7b-3b3b-4b4b-8b8b-9b9b0b1b2b3b';
+    expect(isValidUUIDV4(randomUUIDV4)).toBe(true);
+    expect(isValidUUIDV4('')).toBe(false);
+  });
+});