State Synchronization to WebView

CHANGELOG.md

@@ -11,6 +11,8 @@
 - Athena.player.appearance.setHeadBlendData
 - Athena.player.appearance.setSkin
 - Athena.player.appearance.clearSkin
+- Added automatic character document synchronization to WebViews
+--- Available as a prop, or from the "import * as state from '@utility/state';" export
 
 --------------------------------------
 --- Everything Below is Before April 2

src-webviews/src/App.vue

@@ -38,10 +38,13 @@ import { CORE_IMPORTS } from './pages/components';
 import { PLUGIN_IMPORTS } from './plugins/imports';
 import { WebViewEventNames } from '../../src/core/shared/enums/webViewEvents';
 import VueDevMenu from './components/VueDevMenu.vue';
-import './utility/state';
+import { SYSTEM_EVENTS } from '@AthenaShared/enums/system';
+import { Character } from '@AthenaShared/interfaces/character';
+import * as state from '@utility/state';
 
 // Interfaces
 import IPageData from './interfaces/IPageData';
+import WebViewEvents from '@utility/webViewEvents';
 
 const ALL_THE_COMPONENTS = {
  ...CORE_IMPORTS,
@@ -143,8 +146,14 @@ export default defineComponent({
  this.handleSetPages(currentPages, 'pages');
  localStorage.setItem('pages', JSON.stringify(currentPages));
  },
+ setCharacterState(characterData: Character) {
+ state.set('data', characterData);
+ this.state = characterData;
+ },
  },
  mounted() {
+ WebViewEvents.on(SYSTEM_EVENTS.PLAYER_EMIT_STATE, this.setCharacterState);
+
  // What to show when 'alt' is not present.
  // Basically if alt:V isn't running with this page present inside of it.
  if (!('alt' in window)) {

src-webviews/src/utility/state.ts

@@ -1,3 +1,5 @@
+import { Character } from '@AthenaShared/interfaces/character';
+
 const state: { [key: string]: any } = {};
 
 /**
@@ -24,3 +26,14 @@ export function set(key: string, value: any) {
 export function get<T>(key: string): T | undefined {
  return state[key];
 }
+
+/**
+ * Returns character data when synchronized from server.
+ *
+ * @export
+ * @template T
+ * @return {*} {(T | undefined)}
+ */
+export function getCharacterData<T = Character>(): T | undefined {
+ return state['data'];
+}

src/core/server/document/character.ts

@@ -2,6 +2,7 @@ import * as alt from 'alt-server';
 import * as Athena from '@AthenaServer/api';
 import { Character } from '@AthenaShared/interfaces/character';
 import { KnownKeys } from '@AthenaShared/utility/knownKeys';
+import { SYSTEM_EVENTS } from '@AthenaShared/enums/system';
 import Database from '@stuyk/ezmongodb';
 
 export type KeyChangeCallback = (player: alt.Player, newValue: any, oldValue: any) => void;
@@ -206,6 +207,7 @@ export async function set<T = {}, Keys = keyof KnownKeys<Character & T>>(
  );
  }
 
+ Athena.webview.emit(player, SYSTEM_EVENTS.PLAYER_EMIT_STATE, cache[player.id]);
  if (typeof callbacks[typeSafeFieldName] === 'undefined') {
  return;
  }
@@ -248,6 +250,7 @@ export async function setBulk<T = {}, Keys = Partial<Character & T>>(player: alt
 
  cache[player.id] = Object.assign(cache[player.id], fields);
  await Database.updatePartialData(cache[player.id]._id, fields, Athena.database.collections.Characters);
+ Athena.webview.emit(player, SYSTEM_EVENTS.PLAYER_EMIT_STATE, cache[player.id]);
 
  Object.keys(fields).forEach((key) => {
  if (typeof callbacks[key] === 'undefined') {

src/core/server/systems/character.ts

@@ -194,6 +194,7 @@ export async function select(player: alt.Player, character: Character) {
 
  Athena.player.emit.fadeScreenFromBlack(player, 2000);
  Athena.player.events.trigger('selected-character', player);
+ Athena.webview.emit(player, SYSTEM_EVENTS.PLAYER_EMIT_STATE, data);
  }, 500);
 }
 

src/core/shared/enums/system.ts

@@ -87,6 +87,7 @@ export enum SYSTEM_EVENTS {
  PLAYER_EMIT_TEMP_OBJECT_LERP = 'temp:Object:Lerp',
  PLAYER_EMIT_WHEEL_MENU = 'wheelMenu:Dynamic',
  PLAYER_EMIT_MISSION_TEXT = 'missionText:Create',
+ PLAYER_EMIT_STATE = 'playerEmit:state',
  //
  PLAYER_SET_FREEZE = 'freeze:Set',
  PLAYER_SET_DEATH = 'death:Toggle',