Add global state using zustand (schema wip)

package.json

@@ -15,7 +15,8 @@
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.0",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/PrimaryValues.tsx

@@ -6,6 +6,7 @@ import {
   LooksIcon,
   MoraleIcon,
 } from '@/components/Icons';
+import { useGetPrimaryValues } from '@/lib/store/player';
 import { PrimaryValue } from '@/lib/types/general';
 import { CircularProgressbarWithChildren } from 'react-circular-progressbar';
 import 'react-circular-progressbar/dist/styles.css';
@@ -80,12 +81,14 @@ export const PrimaryValueItem = (props: PrimaryValueItemProps) => {
 };
 
 const PrimaryValues = () => {
+  const values = useGetPrimaryValues();
+
   return (
     <div className="flex flex-col items-center justify-center gap-y-12 rounded-xl border border-dark-700 bg-dark-900 py-8">
-      <PrimaryValueItem name={'health'} value={86} />
-      <PrimaryValueItem name={'morale'} value={73} />
-      <PrimaryValueItem name={'intellect'} value={81} />
-      <PrimaryValueItem name={'looks'} value={45} />
+      <PrimaryValueItem name={'health'} value={values?.health || 0} />
+      <PrimaryValueItem name={'morale'} value={values?.morale || 0} />
+      <PrimaryValueItem name={'intellect'} value={values?.intellect || 0} />
+      <PrimaryValueItem name={'looks'} value={values?.looks || 0} />
     </div>
   );
 };

src/lib/store/player.ts

@@ -0,0 +1,33 @@
+import { useStore } from '@/lib/store/store';
+import { create } from 'zustand';
+
+interface PlayerState {
+  name: string;
+  country: string;
+  age: number; // In months
+  money: number;
+  primaryValues: {
+    health: number;
+    morale: number;
+    intellect: number;
+    looks: number;
+  };
+}
+
+export const usePlayer = create<PlayerState>()((set) => ({
+  name: 'Player',
+  country: 'Undefined',
+  age: 12 * 18,
+  money: 0,
+  primaryValues: {
+    health: 100,
+    morale: 90,
+    intellect: 80,
+    looks: 70,
+  },
+}));
+
+export const useGetPrimaryValues = () => {
+  const _values = useStore(usePlayer, (state) => state.primaryValues);
+  return _values;
+};

src/lib/store/store.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+
+export const useStore = <T, F>(
+  store: (callback: (state: T) => unknown) => unknown,
+  callback: (state: T) => F
+) => {
+  const result = store(callback) as F;
+  const [data, setData] = useState<F>();
+
+  useEffect(() => {
+    setData(result);
+  }, [result]);
+
+  return data;
+};