Selected wanderer

packages/client/src/App.tsx

@@ -2,6 +2,8 @@ import { SyncState } from "@latticexyz/network";
 import { useComponentValue } from "@latticexyz/react";
 import { useMUD } from "./mud/MUDContext";
 import { AppRouter } from "./AppRouter";
+import { WandererProvider } from "./contexts/WandererContext";
+import { useLocalStorage } from "./utils/hooks/useLocalStorage";
 
 export const App = () => {
   const {
@@ -15,19 +17,23 @@ export const App = () => {
     percentage: 0,
   });
 
+  const [selectedWandererEntity, selectWandererEntity] = useLocalStorage([], "selectedWandererEntity");
+
   return (
-    <div>
-      {loadingState.state !== SyncState.LIVE ? (
-        <div className="flex w-full items-center justify-center mt-10">
-          <div className="text-center text-xl">
-            {loadingState.msg} {"("}
-            <span className="text-dark-number">{Math.floor(loadingState.percentage)}</span>
-            {"%)"}
+    <WandererProvider selectedWandererEntity={selectedWandererEntity} selectWandererEntity={selectWandererEntity}>
+      <div>
+        {loadingState.state !== SyncState.LIVE ? (
+          <div className="flex w-full items-center justify-center mt-10">
+            <div className="text-center text-xl">
+              {loadingState.msg} {"("}
+              <span className="text-dark-number">{Math.floor(loadingState.percentage)}</span>
+              {"%)"}
+            </div>
           </div>
-        </div>
-      ) : (
-        <AppRouter />
-      )}
-    </div>
+        ) : (
+          <AppRouter />
+        )}
+      </div>
+    </WandererProvider>
   );
 };

packages/client/src/AppRouter.tsx

@@ -69,14 +69,14 @@ export function AppRouter() {
 }
 
 function Layout() {
-  const { wandererMode, toggleWandererMode } = useWandererContext();
+  const { wandererMode, setWandererMode } = useWandererContext();
   const bg = useMemo(() => (wandererMode ? "bg-dark-600" : "bg-dark-500"), [wandererMode]);
 
   return (
     <div>
       <div className={`flex flex-row flex-wrap items-center justify-around h-16 ${bg} border border-dark-400`}>
         <div>
-          <CustomButton className="w-20" onClick={toggleWandererMode}>
+          <CustomButton className="w-20" onClick={setWandererMode}>
             {wandererMode ? "return" : "void"}
           </CustomButton>
         </div>

packages/client/src/components/Wanderer/index.tsx

@@ -6,6 +6,11 @@ import { useWandererContext } from "../../contexts/WandererContext";
 export default function Wanderer({ wandererEntity }: { wandererEntity: EntityIndex }) {
   const { selectedWandererEntity, selectWandererEntity } = useWandererContext();
 
+  const selectHandler = () => {
+    selectWandererEntity(wandererEntity);
+    localStorage.setItem("selectedWanderer", JSON.stringify(selectedWandererEntity));
+  };
+
   return (
     <div className="border border-dark-400 w-72 h-auto py-2 px-4 flex flex-col justify-between items-center bg-dark-500 transform delay-500">
       <WandererImage entity={wandererEntity} />
@@ -16,7 +21,7 @@ export default function Wanderer({ wandererEntity }: { wandererEntity: EntityInd
           </CustomButton>
         )}
         {wandererEntity !== selectedWandererEntity && (
-          <CustomButton style={{ width: "6rem" }} onClick={() => selectWandererEntity(wandererEntity)}>
+          <CustomButton style={{ width: "6rem" }} onClick={selectHandler}>
             Select
           </CustomButton>
         )}

packages/client/src/contexts/WandererContext.tsx

@@ -11,9 +11,11 @@ import {
 import { useLearnCycleSkill } from "../mud/hooks/skill";
 import { useLearnedSkillEntities } from "../mud/hooks/skill";
 import { useMUD } from "../mud/MUDContext";
+import useToggle from "../utils/hooks/useToggle";
+import { useLocalStorage } from "../utils/hooks/useLocalStorage";
 
 type WandererContextType = {
-  selectedWandererEntity?: EntityIndex;
+  selectedWandererEntity: EntityIndex;
   selectWandererEntity: (wanderer: EntityIndex | undefined) => void;
   cycleEntity?: EntityIndex;
   previousCycleEntity?: EntityIndex;
@@ -24,21 +26,24 @@ type WandererContextType = {
   learnCycleSkill: ReturnType<typeof useLearnCycleSkill>;
   learnedSkillEntities: EntityIndex[];
   wandererMode: boolean;
-  toggleWandererMode: () => void;
+  setWandererMode: () => void;
+};
+
+type WandererProviderType = {
+  children: ReactNode;
+  selectWandererEntity: (wanderer: EntityIndex | undefined) => void;
+  selectedWandererEntity: EntityIndex | undefined;
 };
 
 const WandererContext = createContext<WandererContextType | undefined>(undefined);
 
-export const WandererProvider = (props: { children: ReactNode }) => {
+export const WandererProvider = ({ children, selectWandererEntity, selectedWandererEntity }: WandererProviderType) => {
   const currentValue = useContext(WandererContext);
   if (currentValue) throw new Error("WandererProvider can only be used once");
-
-  const [selectedWandererEntity, selectWandererEntity] = useState<EntityIndex>();
   const {
     world,
     components: { ActiveCycle, ActiveCyclePrevious },
   } = useMUD();
-
   // current cycle
   const activeCycle = useComponentValue(ActiveCycle, selectedWandererEntity);
   const cycleEntity = useMemo(() => {
@@ -60,8 +65,7 @@ export const WandererProvider = (props: { children: ReactNode }) => {
   const learnCycleSkill = useLearnCycleSkill(selectedWandererEntity);
   const learnedSkillEntities = useLearnedSkillEntities(cycleEntity);
 
-  const [wandererMode, setWandererMode] = useState(false);
-  const toggleWandererMode = useCallback(() => setWandererMode((value) => !value), []);
+  const [wandererMode, setWandererMode] = useToggle(false);
 
   const value = {
     selectedWandererEntity,
@@ -75,9 +79,9 @@ export const WandererProvider = (props: { children: ReactNode }) => {
     learnedSkillEntities,
     learnCycleSkill,
     wandererMode,
-    toggleWandererMode,
+    setWandererMode,
   };
-  return <WandererContext.Provider value={value}>{props.children}</WandererContext.Provider>;
+  return <WandererContext.Provider value={value}>{children}</WandererContext.Provider>;
 };
 
 export const useWandererContext = () => {

packages/client/src/index.tsx

@@ -7,7 +7,6 @@ import { setup } from "./mud/setup";
 import { MUDProvider } from "./mud/MUDContext";
 import { ComponentBrowser } from "./ComponentBrowser";
 import "../index.css";
-import { WandererProvider } from "./contexts/WandererContext";
 import { defaultToastOptions } from "./mud/utils/toast";
 
 const rootElement = document.getElementById("react-root");
@@ -18,10 +17,8 @@ const root = createRoot(rootElement);
 setup().then((result) => {
   root.render(
     <MUDProvider {...result}>
-      <WandererProvider>
-        <App />
-        <ToastContainer {...defaultToastOptions} />
-      </WandererProvider>
+      <App />
+      <ToastContainer {...defaultToastOptions} />
       {import.meta.env.DEV ? <ComponentBrowser /> : null}
     </MUDProvider>
   );

packages/client/src/utils/hooks/useLocalStorage.ts

@@ -0,0 +1,27 @@
+import { useState, useEffect } from "react";
+
+type LocalStorageData = {
+  initialValue: any;
+  key: string;
+};
+function useLocalStorage(initialValue, key): LocalStorageData {
+  const getValue = () => {
+    const storage = localStorage.getItem(key);
+
+    if (storage) {
+      return JSON.parse(storage);
+    }
+
+    return initialValue;
+  };
+
+  const [value, setValue] = useState(getValue);
+
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(value));
+  }, [value, key]);
+
+  return [value, setValue];
+}
+
+export { useLocalStorage };

packages/client/src/utils/hooks/useToggle.ts

@@ -0,0 +1,11 @@
+import { useCallback, useState } from "react";
+
+export default function useToggle(initialValue: boolean) {
+  const [value, setValue] = useState(initialValue);
+
+  const toggle = useCallback(() => {
+    setValue(!value);
+  }, [setValue, value]);
+
+  return [value, toggle];
+}