Add URL syncing

docs/_next/static/W-bR6TvITwFNxuS2DPD5f/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/78e521c3-312593b4f3190cc4.js","static/chunks/95b64a6e-6f3d919198a9be32.js","static/chunks/31664189-7261674e93dbb0a6.js","static/chunks/545f34e4-f96cf9e26b6b92a5.js","static/chunks/1bfc9850-6b316c8ef06e5170.js","static/chunks/d7eeaac4-06e64d251e2cbda7.js","static/chunks/f580fadb-a8e2c6896615a304.js","static/chunks/50-cece886aa17c1d5e.js","static/chunks/pages/index-1a76b27dafc9b8ab.js"],"/_error":["static/chunks/pages/_error-479484f6c157e921.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST={__rewrites:{beforeFiles:[],afterFiles:[],fallback:[]},"/":["static/chunks/78e521c3-312593b4f3190cc4.js","static/chunks/95b64a6e-6f3d919198a9be32.js","static/chunks/31664189-7261674e93dbb0a6.js","static/chunks/545f34e4-f96cf9e26b6b92a5.js","static/chunks/1bfc9850-6b316c8ef06e5170.js","static/chunks/d7eeaac4-06e64d251e2cbda7.js","static/chunks/f580fadb-a8e2c6896615a304.js","static/chunks/349-cd0ab84c2c42d713.js","static/chunks/pages/index-f220571689d4d3b1.js"],"/_error":["static/chunks/pages/_error-479484f6c157e921.js"],sortedPages:["/","/_app","/_error"]},self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

src/WarriorProvider.tsx

@@ -3,6 +3,7 @@ import getConfig from "next/config";
 import useSettings from "./useSettings";
 import { WarriorContext } from "./useWarrior";
 import type { MaterialDefinition } from "./Material";
+import Router, { useRouter } from "next/router";
 
 const { publicRuntimeConfig } = getConfig();
 const { materials, modelDefaults } = publicRuntimeConfig;
@@ -81,14 +82,43 @@ function getModelUrl(
   }
 }
 
+function parseQuerySelection(query: {
+  model?: string | string[];
+  skin?: string | string[];
+}) {
+  const { model: modelWithTypeFromUrl, skin: skinWithTypeFromUrl } = query;
+  let selectedModel;
+  let selectedModelType;
+  if (typeof modelWithTypeFromUrl === "string") {
+    [selectedModelType, selectedModel] = modelWithTypeFromUrl.split("|");
+  }
+  let selectedSkin;
+  let selectedSkinType;
+  if (typeof skinWithTypeFromUrl === "string") {
+    [selectedSkinType, selectedSkin] = skinWithTypeFromUrl.split("|");
+  }
+  return {
+    selectedModel: selectedModel || null,
+    selectedModelType: selectedModelType || null,
+    selectedSkin: selectedSkin || null,
+    selectedSkinType: selectedSkinType || null,
+  };
+}
+
 export default function WarriorProvider({ children }: { children: ReactNode }) {
-  const [selectedModel, setSelectedModel] = useState<string>("lmale");
+  const router = useRouter();
-  const [selectedModelType, setSelectedModelType] = useState("player");
+  const defaultsFromUrl = parseQuerySelection(router.query);
+  const [selectedModel, setSelectedModel] = useState<string>(
+    defaultsFromUrl.selectedModel || "lmale"
+  );
+  const [selectedModelType, setSelectedModelType] = useState(
+    defaultsFromUrl.selectedModelType || "player"
+  );
   const [selectedSkin, setSelectedSkin] = useState<string | null>(
-    "Blood Eagle"
+    defaultsFromUrl.selectedSkin || "Blood Eagle"
   );
   const [selectedSkinType, setSelectedSkinType] = useState<string | null>(
-    "default"
+    defaultsFromUrl.selectedSkinType || "default"
   );
   const [selectedAnimation, setSelectedAnimation] = useState<string | null>(
     null
@@ -185,6 +215,15 @@ export default function WarriorProvider({ children }: { children: ReactNode }) {
     selectedSkinType,
   ]);
 
+  useEffect(() => {
+    Router.replace({
+      query: {
+        model: `${selectedModelType ?? ""}|${selectedModel ?? ""}`,
+        skin: `${selectedSkinType ?? ""}|${selectedSkin ?? ""}`,
+      },
+    });
+  }, [selectedModel, selectedModelType, selectedSkin, selectedSkinType]);
+
   return (
     <WarriorContext.Provider value={context}>
       {children}

src/WarriorSelector.tsx

@@ -102,7 +102,7 @@ export default function WarriorSelector() {
           <select
             id="SkinSelect"
             value={selectedSkin ?? ""}
-            onChange={async (event) => {
+            onChange={(event) => {
               const parentNode = event.target.selectedOptions[0]
                 .parentNode as HTMLElement;
               const skinType = event.target.value