//StatContainer.jsx
"use client";
import StatBox from "./Stat";
import { CharacterInfo } from "@/utils/Variables";
import { useEffect, useState } from "react";


export default function StatsContainer() {
 const [EventCallback,setEventCallback] = useState(false);
  const HandleEvent = ()=>{
    setEventCallback(true);
  }
  useEffect(() => {
    document.addEventListener("CharacterFileUpdated",HandleEvent);
  }, []);
  useEffect(()=>{console.log(CharacterInfo)},[EventCallback]);

return(
//my html stuff. 
)
}

variables.js

 let playerInfo = {
  "PlayerName": "",
  "CharacterName": "",
  "Race": "",
  "Class": "",
  "SubClass": "",
  "Background":"",
  "Alignment": "",
  "Experience": "",
};
 let playerStats = {
    "Health": 0,
    "MaxHealth": 0,
    "Proficiency": 0,
    "Strength": 10,
    "Constitution":10,
    "Dexterity":10,
    "Intelligence":10,
    "Wisdom":10,
    "Charisma":10,
  };
 let playerInventory;

export let CharacterInfo = {
  playerInfo,
  playerStats,
  playerInventory
}

//SaveSystem.jsx
"use client";
import { CharacterInfo } from "./Variables";

function SaveFile() {
  localStorage.setItem("Storage", JSON.stringify(CharacterInfo));
}

function LoadFile() {
  const doc = JSON.parse(localStorage.getItem("Storage"));
  if (doc) {
    Object.assign(CharacterInfo, doc);
  }
  document.dispatchEvent(new Event("CharacterFileUpdated"))
}

export { SaveFile, LoadFile};