Tweak model ordering on gallery page

docs/_next/static/4l4DZUQ-zNiHjEP_q5Mfw/_buildManifest.js

@@ -1 +1 @@
-self.__BUILD_MANIFEST=function(s){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,"static/chunks/e21e5bbe-b28e0079b469d4e8.js","static/chunks/ebc70433-4eccd1cb3af29a3e.js","static/chunks/6eb5140f-31a2b2da7903b885.js","static/chunks/85d7bc83-1ca530d7d3f44153.js","static/chunks/3a17f596-9aeae038dfa51955.js","static/chunks/f580fadb-2911e2fbf64aae5a.js","static/chunks/515-13ff0773d41722ae.js","static/chunks/pages/index-85d791f6f54d7f5e.js"],"/_error":["static/chunks/pages/_error-54b9fcf45cb5bc62.js"],"/gallery":[s,"static/chunks/737a5600-aea383aaa2061cc6.js","static/chunks/918-3c6747f76df39072.js","static/css/4d43ac65e204759a.css","static/chunks/pages/gallery-d26bf35c2ee9c5b4.js"],sortedPages:["/","/_app","/_error","/gallery"]}}("static/chunks/cb355538-dbf1c108320fc6a1.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
+self.__BUILD_MANIFEST=function(s){return{__rewrites:{afterFiles:[],beforeFiles:[],fallback:[]},"/":[s,"static/chunks/e21e5bbe-b28e0079b469d4e8.js","static/chunks/ebc70433-4eccd1cb3af29a3e.js","static/chunks/6eb5140f-31a2b2da7903b885.js","static/chunks/85d7bc83-1ca530d7d3f44153.js","static/chunks/3a17f596-9aeae038dfa51955.js","static/chunks/f580fadb-2911e2fbf64aae5a.js","static/chunks/515-13ff0773d41722ae.js","static/chunks/pages/index-85d791f6f54d7f5e.js"],"/_error":["static/chunks/pages/_error-54b9fcf45cb5bc62.js"],"/gallery":[s,"static/chunks/737a5600-aea383aaa2061cc6.js","static/chunks/918-3c6747f76df39072.js","static/css/4d43ac65e204759a.css","static/chunks/pages/gallery-114a7231e5ec5591.js"],sortedPages:["/","/_app","/_error","/gallery"]}}("static/chunks/cb355538-dbf1c108320fc6a1.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();

docs/_next/static/chunks/pages/gallery-114a7231e5ec5591.js

@@ -0,0 +1,2 @@
+(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[214],{4080:function(e,l,a){(window.__NEXT_P=window.__NEXT_P||[]).push(["/gallery",function(){return a(1560)}])},1560:function(e,l,a){"use strict";a.r(l),a.d(l,{default:function(){return GalleryPage}});var n=a(5893),i=a(7294),r=a(3181),s=a(2091),t=a(1163),o=a(5316),c=a.n(o);let m={customSkins:{},newSkins:{}};var u=a(9746),d=a.n(u),h=a(9008),_=a.n(h),x=a(1664),f=a.n(x);let g=[],y={lmale:0,mmale:1,lfemale:2,mfemale:3,hmale:4,lbioderm:5,mbioderm:6,hbioderm:7};function GalleryPage(){var e,l;let a=(0,t.useRouter)(),[o,u]=function(){let[e,l]=(0,i.useState)(m);(0,i.useEffect)(()=>{let e=new AbortController,a=e.signal,n=!1,loadCustomSkins=async()=>{let e;try{if(e=await fetch("".concat("https://exogen.github.io/t2-skins","/skins.json"),{signal:a}),!n){let a=await e.json();n||l(a)}}catch(e){console.error(e)}};return loadCustomSkins(),()=>{n=!0,e.abort()}},[]);let a=e!==m;return[e,a]}(),[h,x]=(0,i.useState)("lmale"),b="hfemale"===h?"hmale":h,p=null!==(l=null===(e=o.customSkins)||void 0===e?void 0:e[b])&&void 0!==l?l:g,j=(0,i.useMemo)(()=>{if(null==o||!o.newSkins||"new"!==h)return[];{let e=[];return Object.entries(o.newSkins).forEach(l=>{let[a,n]=l;e.push(...n.map(e=>({name:e,model:a})))}),c()(e,[e=>e.name.toLowerCase(),e=>y[e.model]],["asc","asc"])}},[h,o]),v="new"===h?j:p,k=a.query.filter&&"string"==typeof a.query.filter?a.query.filter:"lmale";return(0,i.useEffect)(()=>{x(k)},[k]),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(_(),{children:(0,n.jsx)("title",{children:"Tribes 2 Skin Gallery"})}),(0,n.jsxs)("main",{className:d().GalleryPage,children:[(0,n.jsxs)("div",{className:d().Tools,children:[(0,n.jsxs)(f(),{className:d().Back,href:"../",children:[(0,n.jsx)(s.bUI,{size:12,className:d().Icon})," ",(0,n.jsx)("span",{className:d().Label,children:"Back to Editor"})]}),(0,n.jsxs)("select",{tabIndex:0,id:"ModelSelect","aria-label":"Player model",onChange:e=>{a.push("?filter=".concat(e.target.value))},value:h,children:[(0,n.jsx)("option",{value:"new",children:"All new skins ✨"}),(0,n.jsx)("option",{value:"lmale",children:"Human Male \xb7 Light"}),(0,n.jsx)("option",{value:"mmale",children:"Human Male \xb7 Medium"}),(0,n.jsx)("option",{value:"hmale",children:"Human Male \xb7 Heavy"}),(0,n.jsx)("option",{value:"lfemale",children:"Human Female \xb7 Light"}),(0,n.jsx)("option",{value:"mfemale",children:"Human Female \xb7 Medium"}),(0,n.jsx)("option",{value:"hfemale",children:"Human Female \xb7 Heavy"}),(0,n.jsx)("option",{value:"lbioderm",children:"Bioderm \xb7 Light"}),(0,n.jsx)("option",{value:"mbioderm",children:"Bioderm \xb7 Medium"}),(0,n.jsx)("option",{value:"hbioderm",children:"Bioderm \xb7 Heavy"})]}),(0,n.jsx)("a",{href:"https://github.com/exogen/t2-model-skinner",className:d().IconLink,children:(0,n.jsx)(s.hJX,{size:32})})]}),u?(0,n.jsx)("div",{className:d().Gallery,children:v.map(e=>{let l,a;"string"==typeof e?(l=e,a=b):(l=e.name,a=e.model);let i="".concat("https://exogen.github.io/t2-skins","/gallery/").concat(encodeURIComponent(l),".").concat(a,".webp");return(0,n.jsxs)("div",{className:d().Skin,children:[(0,n.jsx)("img",{className:d().Preview,loading:"lazy",src:i,width:680,height:800,alt:l}),(0,n.jsx)("div",{className:d().Name,children:l})]},"".concat(l,":").concat(a))})}):(0,n.jsx)(r.xHo,{className:d().Spinner})]})]})}},9746:function(e){e.exports={GalleryPage:"gallery_GalleryPage__QyCLn",Tools:"gallery_Tools__COicv",Back:"gallery_Back__xvbOe",IconLink:"gallery_IconLink__7NlBA",Gallery:"gallery_Gallery__ZMJE_",Skin:"gallery_Skin__Ep_rb",Preview:"gallery_Preview__JGf2f",Name:"gallery_Name__W9Aoc",Spinner:"gallery_Spinner__9jTLL",spin:"gallery_spin__EVmH5",Label:"gallery_Label__kJfDw"}}},function(e){e.O(0,[774,365,648,918,888,179],function(){return e(e.s=4080)}),_N_E=e.O()}]);
+//# sourceMappingURL=gallery-114a7231e5ec5591.js.map

docs/_next/static/chunks/pages/gallery-d26bf35c2ee9c5b4.js

@@ -1,2 +0,0 @@
-(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[214],{4080:function(e,l,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/gallery",function(){return n(1560)}])},1560:function(e,l,n){"use strict";n.r(l),n.d(l,{default:function(){return GalleryPage}});var a=n(5893),i=n(7294),r=n(3181),s=n(2091),t=n(1163),o=n(5316),c=n.n(o);let u={customSkins:{},newSkins:{}};var m=n(9746),d=n.n(m),h=n(9008),_=n.n(h),x=n(1664),f=n.n(x);let g=[];function GalleryPage(){var e,l;let n=(0,t.useRouter)(),[o,m]=function(){let[e,l]=(0,i.useState)(u);(0,i.useEffect)(()=>{let e=new AbortController,n=e.signal,a=!1,loadCustomSkins=async()=>{let e;try{if(e=await fetch("".concat("https://exogen.github.io/t2-skins","/skins.json"),{signal:n}),!a){let n=await e.json();a||l(n)}}catch(e){console.error(e)}};return loadCustomSkins(),()=>{a=!0,e.abort()}},[]);let n=e!==u;return[e,n]}(),[h,x]=(0,i.useState)("lmale"),y="hfemale"===h?"hmale":h,p=null!==(l=null===(e=o.customSkins)||void 0===e?void 0:e[y])&&void 0!==l?l:g,v=(0,i.useMemo)(()=>{if(null==o||!o.newSkins||"new"!==h)return[];{let e=new Map;Object.entries(o.newSkins).forEach(l=>{let[n,a]=l;a.forEach(l=>{var a;let i=null!==(a=e.get(l))&&void 0!==a?a:[];i.push(n),e.set(l,i)})});let l=c()(Array.from(e.keys()),[e=>e.toLowerCase()],["asc"]),n=[];return l.forEach(l=>{var a;let i=null!==(a=e.get(l))&&void 0!==a?a:[];n.push(...i.map(e=>({name:l,model:e})))}),n}},[h,o]),b="new"===h?v:p,j=n.query.filter&&"string"==typeof n.query.filter?n.query.filter:"lmale";return(0,i.useEffect)(()=>{x(j)},[j]),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(_(),{children:(0,a.jsx)("title",{children:"Tribes 2 Skin Gallery"})}),(0,a.jsxs)("main",{className:d().GalleryPage,children:[(0,a.jsxs)("div",{className:d().Tools,children:[(0,a.jsxs)(f(),{className:d().Back,href:"../",children:[(0,a.jsx)(s.bUI,{size:12,className:d().Icon})," ",(0,a.jsx)("span",{className:d().Label,children:"Back to Editor"})]}),(0,a.jsxs)("select",{tabIndex:0,id:"ModelSelect","aria-label":"Player model",onChange:e=>{n.push("?filter=".concat(e.target.value))},value:h,children:[(0,a.jsx)("option",{value:"new",children:"All new skins ✨"}),(0,a.jsx)("option",{value:"lmale",children:"Human Male \xb7 Light"}),(0,a.jsx)("option",{value:"mmale",children:"Human Male \xb7 Medium"}),(0,a.jsx)("option",{value:"hmale",children:"Human Male \xb7 Heavy"}),(0,a.jsx)("option",{value:"lfemale",children:"Human Female \xb7 Light"}),(0,a.jsx)("option",{value:"mfemale",children:"Human Female \xb7 Medium"}),(0,a.jsx)("option",{value:"hfemale",children:"Human Female \xb7 Heavy"}),(0,a.jsx)("option",{value:"lbioderm",children:"Bioderm \xb7 Light"}),(0,a.jsx)("option",{value:"mbioderm",children:"Bioderm \xb7 Medium"}),(0,a.jsx)("option",{value:"hbioderm",children:"Bioderm \xb7 Heavy"})]}),(0,a.jsx)("a",{href:"https://github.com/exogen/t2-model-skinner",className:d().IconLink,children:(0,a.jsx)(s.hJX,{size:32})})]}),m?(0,a.jsx)("div",{className:d().Gallery,children:b.map(e=>{let l,n;"string"==typeof e?(l=e,n=y):(l=e.name,n=e.model);let i="".concat("https://exogen.github.io/t2-skins","/gallery/").concat(encodeURIComponent(l),".").concat(n,".webp");return(0,a.jsxs)("div",{className:d().Skin,children:[(0,a.jsx)("img",{className:d().Preview,loading:"lazy",src:i,width:680,height:800,alt:l}),(0,a.jsx)("div",{className:d().Name,children:l})]},"".concat(l,":").concat(n))})}):(0,a.jsx)(r.xHo,{className:d().Spinner})]})]})}},9746:function(e){e.exports={GalleryPage:"gallery_GalleryPage__QyCLn",Tools:"gallery_Tools__COicv",Back:"gallery_Back__xvbOe",IconLink:"gallery_IconLink__7NlBA",Gallery:"gallery_Gallery__ZMJE_",Skin:"gallery_Skin__Ep_rb",Preview:"gallery_Preview__JGf2f",Name:"gallery_Name__W9Aoc",Spinner:"gallery_Spinner__9jTLL",spin:"gallery_spin__EVmH5",Label:"gallery_Label__kJfDw"}}},function(e){e.O(0,[774,365,648,918,888,179],function(){return e(e.s=4080)}),_N_E=e.O()}]);
-//# sourceMappingURL=gallery-d26bf35c2ee9c5b4.js.map

src/pages/gallery.tsx

@@ -11,6 +11,17 @@ import Link from "next/link";
 const baseManifestPath = `https://exogen.github.io/t2-skins`;
 const emptySkins: string[] = [];
 
+const modelOrder: Record<string, number> = {
+  lmale: 0,
+  mmale: 1,
+  lfemale: 2,
+  mfemale: 3,
+  hmale: 4,
+  lbioderm: 5,
+  mbioderm: 6,
+  hbioderm: 7,
+};
+
 export default function GalleryPage() {
   const router = useRouter();
   const [manifest, isLoaded] = useManifest();
@@ -20,25 +31,17 @@ export default function GalleryPage() {
 
   const newSkinList = useMemo(() => {
     if (manifest?.newSkins && selectedModel === "new") {
-      const skinsByName = new Map<string, string[]>();
-      Object.entries(manifest.newSkins).forEach(([model, names]) => {
-        names.forEach((name) => {
-          const skinModels = skinsByName.get(name) ?? [];
-          skinModels.push(model);
-          skinsByName.set(name, skinModels);
-        });
-      });
-      const sortedSkinNames = orderBy(
-        Array.from(skinsByName.keys()),
-        [(name: string) => name.toLowerCase()],
-        ["asc"]
-      );
       const allNewSkins: Array<{ name: string; model: string }> = [];
-      sortedSkinNames.forEach((name: string) => {
-        const skinModels = skinsByName.get(name) ?? [];
-        allNewSkins.push(...skinModels.map((model) => ({ name, model })));
+
+      Object.entries(manifest.newSkins).forEach(([model, names]) => {
+        allNewSkins.push(...names.map((name) => ({ name, model })));
       });
-      return allNewSkins;
+
+      return orderBy(
+        allNewSkins,
+        [(skin) => skin.name.toLowerCase(), (skin) => modelOrder[skin.model]],
+        ["asc", "asc"]
+      );
     } else {
       return [];
     }