mirror of
https://github.com/exogen/t2-model-skinner.git
synced 2026-01-19 19:24:44 +00:00
Add new filter to gallery
This commit is contained in:
Brian Beck
parent
a1611bb709
commit
c3824afac5
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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/css/4d43ac65e204759a.css","static/chunks/pages/gallery-ad3dcd60b7898f40.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-d26bf35c2ee9c5b4.js"],sortedPages:["/","/_app","/_error","/gallery"]}}("static/chunks/cb355538-dbf1c108320fc6a1.js"),self.__BUILD_MANIFEST_CB&&self.__BUILD_MANIFEST_CB();
|
||||
2
docs/_next/static/chunks/918-3c6747f76df39072.js
Normal file
2
docs/_next/static/chunks/918-3c6747f76df39072.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/_next/static/chunks/918-3c6747f76df39072.js.map
Normal file
1
docs/_next/static/chunks/918-3c6747f76df39072.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
(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
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
!function(){"use strict";var e,r,_,t,n,i,u,c={},o={};function __webpack_require__(e){var r=o[e];if(void 0!==r)return r.exports;var _=o[e]={exports:{}},t=!0;try{c[e].call(_.exports,_,_.exports,__webpack_require__),t=!1}finally{t&&delete o[e]}return _.exports}__webpack_require__.m=c,e=[],__webpack_require__.O=function(r,_,t,n){if(_){n=n||0;for(var i=e.length;i>0&&e[i-1][2]>n;i--)e[i]=e[i-1];e[i]=[_,t,n];return}for(var u=1/0,i=0;i<e.length;i++){for(var _=e[i][0],t=e[i][1],n=e[i][2],c=!0,o=0;o<_.length;o++)u>=n&&Object.keys(__webpack_require__.O).every(function(e){return __webpack_require__.O[e](_[o])})?_.splice(o--,1):(c=!1,n<u&&(u=n));if(c){e.splice(i--,1);var a=t()}}return a},__webpack_require__.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(r,{a:r}),r},__webpack_require__.d=function(e,r){for(var _ in r)__webpack_require__.o(r,_)&&!__webpack_require__.o(e,_)&&Object.defineProperty(e,_,{enumerable:!0,get:r[_]})},__webpack_require__.f={},__webpack_require__.e=function(e){return Promise.all(Object.keys(__webpack_require__.f).reduce(function(r,_){return __webpack_require__.f[_](e,r),r},[]))},__webpack_require__.u=function(e){return"static/chunks/"+(737===e?"fb7d5399":e)+"."+({250:"10c119307e239c98",737:"bc4a70b34221e8c8",767:"0dd6b240996f3455",848:"fc0fe21cdc2e6431"})[e]+".js"},__webpack_require__.miniCssF=function(e){return"static/css/"+({214:"4d43ac65e204759a",888:"4f6df96970b4e27f"})[e]+".css"},__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r={},_="_N_E:",__webpack_require__.l=function(e,t,n,i){if(r[e]){r[e].push(t);return}if(void 0!==n)for(var u,c,o=document.getElementsByTagName("script"),a=0;a<o.length;a++){var p=o[a];if(p.getAttribute("src")==e||p.getAttribute("data-webpack")==_+n){u=p;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",u.timeout=120,__webpack_require__.nc&&u.setAttribute("nonce",__webpack_require__.nc),u.setAttribute("data-webpack",_+n),u.src=__webpack_require__.tu(e)),r[e]=[t];var onScriptComplete=function(_,t){u.onerror=u.onload=null,clearTimeout(b);var n=r[e];if(delete r[e],u.parentNode&&u.parentNode.removeChild(u),n&&n.forEach(function(e){return e(t)}),_)return _(t)},b=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=onScriptComplete.bind(null,u.onerror),u.onload=onScriptComplete.bind(null,u.onload),c&&document.head.appendChild(u)},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.tt=function(){return void 0===t&&(t={createScriptURL:function(e){return e}},"undefined"!=typeof trustedTypes&&trustedTypes.createPolicy&&(t=trustedTypes.createPolicy("nextjs#bundler",t))),t},__webpack_require__.tu=function(e){return __webpack_require__.tt().createScriptURL(e)},__webpack_require__.p="/t2-model-skinner/_next/",n={272:0},__webpack_require__.f.j=function(e,r){var _=__webpack_require__.o(n,e)?n[e]:void 0;if(0!==_){if(_)r.push(_[2]);else if(272!=e){var t=new Promise(function(r,t){_=n[e]=[r,t]});r.push(_[2]=t);var i=__webpack_require__.p+__webpack_require__.u(e),u=Error();__webpack_require__.l(i,function(r){if(__webpack_require__.o(n,e)&&(0!==(_=n[e])&&(n[e]=void 0),_)){var t=r&&("load"===r.type?"missing":r.type),i=r&&r.target&&r.target.src;u.message="Loading chunk "+e+" failed.\n("+t+": "+i+")",u.name="ChunkLoadError",u.type=t,u.request=i,_[1](u)}},"chunk-"+e,e)}else n[e]=0}},__webpack_require__.O.j=function(e){return 0===n[e]},i=function(e,r){var _,t,i=r[0],u=r[1],c=r[2],o=0;if(i.some(function(e){return 0!==n[e]})){for(_ in u)__webpack_require__.o(u,_)&&(__webpack_require__.m[_]=u[_]);if(c)var a=c(__webpack_require__)}for(e&&e(r);o<i.length;o++)t=i[o],__webpack_require__.o(n,t)&&n[t]&&n[t][0](),n[t]=0;return __webpack_require__.O(a)},(u=self.webpackChunk_N_E=self.webpackChunk_N_E||[]).forEach(i.bind(null,0)),u.push=i.bind(null,u.push.bind(u))}();
|
||||
//# sourceMappingURL=webpack-7623f921e68137cc.js.map
|
||||
File diff suppressed because one or more lines are too long
2
docs/_next/static/chunks/webpack-add0ed20cab4e44e.js
Normal file
2
docs/_next/static/chunks/webpack-add0ed20cab4e44e.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
!function(){"use strict";var e,r,_,t,n,i,u,c={},o={};function __webpack_require__(e){var r=o[e];if(void 0!==r)return r.exports;var _=o[e]={id:e,loaded:!1,exports:{}},t=!0;try{c[e].call(_.exports,_,_.exports,__webpack_require__),t=!1}finally{t&&delete o[e]}return _.loaded=!0,_.exports}__webpack_require__.m=c,e=[],__webpack_require__.O=function(r,_,t,n){if(_){n=n||0;for(var i=e.length;i>0&&e[i-1][2]>n;i--)e[i]=e[i-1];e[i]=[_,t,n];return}for(var u=1/0,i=0;i<e.length;i++){for(var _=e[i][0],t=e[i][1],n=e[i][2],c=!0,o=0;o<_.length;o++)u>=n&&Object.keys(__webpack_require__.O).every(function(e){return __webpack_require__.O[e](_[o])})?_.splice(o--,1):(c=!1,n<u&&(u=n));if(c){e.splice(i--,1);var a=t()}}return a},__webpack_require__.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return __webpack_require__.d(r,{a:r}),r},__webpack_require__.d=function(e,r){for(var _ in r)__webpack_require__.o(r,_)&&!__webpack_require__.o(e,_)&&Object.defineProperty(e,_,{enumerable:!0,get:r[_]})},__webpack_require__.f={},__webpack_require__.e=function(e){return Promise.all(Object.keys(__webpack_require__.f).reduce(function(r,_){return __webpack_require__.f[_](e,r),r},[]))},__webpack_require__.u=function(e){return"static/chunks/"+(737===e?"fb7d5399":e)+"."+({250:"10c119307e239c98",737:"bc4a70b34221e8c8",767:"0dd6b240996f3455",848:"fc0fe21cdc2e6431"})[e]+".js"},__webpack_require__.miniCssF=function(e){return"static/css/"+({214:"4d43ac65e204759a",888:"4f6df96970b4e27f"})[e]+".css"},__webpack_require__.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}}(),__webpack_require__.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},r={},_="_N_E:",__webpack_require__.l=function(e,t,n,i){if(r[e]){r[e].push(t);return}if(void 0!==n)for(var u,c,o=document.getElementsByTagName("script"),a=0;a<o.length;a++){var p=o[a];if(p.getAttribute("src")==e||p.getAttribute("data-webpack")==_+n){u=p;break}}u||(c=!0,(u=document.createElement("script")).charset="utf-8",u.timeout=120,__webpack_require__.nc&&u.setAttribute("nonce",__webpack_require__.nc),u.setAttribute("data-webpack",_+n),u.src=__webpack_require__.tu(e)),r[e]=[t];var onScriptComplete=function(_,t){u.onerror=u.onload=null,clearTimeout(b);var n=r[e];if(delete r[e],u.parentNode&&u.parentNode.removeChild(u),n&&n.forEach(function(e){return e(t)}),_)return _(t)},b=setTimeout(onScriptComplete.bind(null,void 0,{type:"timeout",target:u}),12e4);u.onerror=onScriptComplete.bind(null,u.onerror),u.onload=onScriptComplete.bind(null,u.onload),c&&document.head.appendChild(u)},__webpack_require__.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},__webpack_require__.nmd=function(e){return e.paths=[],e.children||(e.children=[]),e},__webpack_require__.tt=function(){return void 0===t&&(t={createScriptURL:function(e){return e}},"undefined"!=typeof trustedTypes&&trustedTypes.createPolicy&&(t=trustedTypes.createPolicy("nextjs#bundler",t))),t},__webpack_require__.tu=function(e){return __webpack_require__.tt().createScriptURL(e)},__webpack_require__.p="/t2-model-skinner/_next/",n={272:0},__webpack_require__.f.j=function(e,r){var _=__webpack_require__.o(n,e)?n[e]:void 0;if(0!==_){if(_)r.push(_[2]);else if(272!=e){var t=new Promise(function(r,t){_=n[e]=[r,t]});r.push(_[2]=t);var i=__webpack_require__.p+__webpack_require__.u(e),u=Error();__webpack_require__.l(i,function(r){if(__webpack_require__.o(n,e)&&(0!==(_=n[e])&&(n[e]=void 0),_)){var t=r&&("load"===r.type?"missing":r.type),i=r&&r.target&&r.target.src;u.message="Loading chunk "+e+" failed.\n("+t+": "+i+")",u.name="ChunkLoadError",u.type=t,u.request=i,_[1](u)}},"chunk-"+e,e)}else n[e]=0}},__webpack_require__.O.j=function(e){return 0===n[e]},i=function(e,r){var _,t,i=r[0],u=r[1],c=r[2],o=0;if(i.some(function(e){return 0!==n[e]})){for(_ in u)__webpack_require__.o(u,_)&&(__webpack_require__.m[_]=u[_]);if(c)var a=c(__webpack_require__)}for(e&&e(r);o<i.length;o++)t=i[o],__webpack_require__.o(n,t)&&n[t]&&n[t][0](),n[t]=0;return __webpack_require__.O(a)},(u=self.webpackChunk_N_E=self.webpackChunk_N_E||[]).forEach(i.bind(null,0)),u.push=i.bind(null,u.push.bind(u))}();
|
||||
//# sourceMappingURL=webpack-add0ed20cab4e44e.js.map
|
||||
1
docs/_next/static/chunks/webpack-add0ed20cab4e44e.js.map
Normal file
1
docs/_next/static/chunks/webpack-add0ed20cab4e44e.js.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
33
package-lock.json
generated
33
package-lock.json
generated
|
|
@ -31,6 +31,7 @@
|
|||
"@next/eslint-plugin-next": "^13.0.6",
|
||||
"@types/fabric": "^4.5.13",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/lodash.orderby": "^4.6.9",
|
||||
"@types/pngjs": "^6.0.5",
|
||||
"@types/react": "^18.3.12",
|
||||
"@typescript-eslint/eslint-plugin": "^6.20.0",
|
||||
|
|
@ -535,6 +536,23 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
|
||||
},
|
||||
"node_modules/@types/lodash": {
|
||||
"version": "4.17.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz",
|
||||
"integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/lodash.orderby": {
|
||||
"version": "4.6.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash.orderby/-/lodash.orderby-4.6.9.tgz",
|
||||
"integrity": "sha512-T9o2wkIJOmxXwVTPTmwJ59W6eTi2FseiLR369fxszG649Po/xe9vqFNhf/MtnvT5jrbDiyWKxPFPZbpSVK0SVQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "18.11.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
|
||||
|
|
@ -5622,6 +5640,21 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||
"integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
|
||||
},
|
||||
"@types/lodash": {
|
||||
"version": "4.17.13",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.13.tgz",
|
||||
"integrity": "sha512-lfx+dftrEZcdBPczf9d0Qv0x+j/rfNCMuC6OcfXmO8gkfeNAY88PgKUbvG56whcN23gc27yenwF6oJZXGFpYxg==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/lodash.orderby": {
|
||||
"version": "4.6.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/lodash.orderby/-/lodash.orderby-4.6.9.tgz",
|
||||
"integrity": "sha512-T9o2wkIJOmxXwVTPTmwJ59W6eTi2FseiLR369fxszG649Po/xe9vqFNhf/MtnvT5jrbDiyWKxPFPZbpSVK0SVQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/lodash": "*"
|
||||
}
|
||||
},
|
||||
"@types/node": {
|
||||
"version": "18.11.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.9.tgz",
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
"@next/eslint-plugin-next": "^13.0.6",
|
||||
"@types/fabric": "^4.5.13",
|
||||
"@types/file-saver": "^2.0.7",
|
||||
"@types/lodash.orderby": "^4.6.9",
|
||||
"@types/pngjs": "^6.0.5",
|
||||
"@types/react": "^18.3.12",
|
||||
"@typescript-eslint/eslint-plugin": "^6.20.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { useState } from "react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { CgSpinnerTwo } from "react-icons/cg";
|
||||
import { FaChevronLeft, FaGithub } from "react-icons/fa";
|
||||
import { useRouter } from "next/router";
|
||||
import orderBy from "lodash.orderby";
|
||||
import useManifest from "../useManifest";
|
||||
import styles from "./gallery.module.css";
|
||||
import Head from "next/head";
|
||||
|
|
@ -10,11 +12,49 @@ const baseManifestPath = `https://exogen.github.io/t2-skins`;
|
|||
const emptySkins: string[] = [];
|
||||
|
||||
export default function GalleryPage() {
|
||||
const router = useRouter();
|
||||
const [manifest, isLoaded] = useManifest();
|
||||
const [selectedModel, setSelectedModel] = useState("lmale");
|
||||
const actualModel = selectedModel === "hfemale" ? "hmale" : selectedModel;
|
||||
const customSkins = manifest.customSkins?.[actualModel] ?? emptySkins;
|
||||
|
||||
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 })));
|
||||
});
|
||||
return allNewSkins;
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
}, [selectedModel, manifest]);
|
||||
|
||||
const filteredSkins = selectedModel === "new" ? newSkinList : customSkins;
|
||||
|
||||
const filter =
|
||||
router.query.filter && typeof router.query.filter === "string"
|
||||
? router.query.filter
|
||||
: "lmale";
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedModel(filter);
|
||||
}, [filter]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
|
|
@ -31,10 +71,11 @@ export default function GalleryPage() {
|
|||
id="ModelSelect"
|
||||
aria-label="Player model"
|
||||
onChange={(event) => {
|
||||
setSelectedModel(event.target.value);
|
||||
router.push(`?filter=${event.target.value}`);
|
||||
}}
|
||||
value={selectedModel}
|
||||
>
|
||||
<option value="new">All new skins ✨</option>
|
||||
<option value="lmale">Human Male · Light</option>
|
||||
<option value="mmale">Human Male · Medium</option>
|
||||
<option value="hmale">Human Male · Heavy</option>
|
||||
|
|
@ -54,20 +95,31 @@ export default function GalleryPage() {
|
|||
</div>
|
||||
{isLoaded ? (
|
||||
<div className={styles.Gallery}>
|
||||
{customSkins.map((name) => {
|
||||
{filteredSkins.map((name) => {
|
||||
let skinName;
|
||||
let skinModel;
|
||||
if (typeof name === "string") {
|
||||
skinName = name;
|
||||
skinModel = actualModel;
|
||||
} else {
|
||||
skinName = name.name;
|
||||
skinModel = name.model;
|
||||
}
|
||||
const url = `${baseManifestPath}/gallery/${encodeURIComponent(
|
||||
skinName
|
||||
)}.${skinModel}.webp`;
|
||||
|
||||
return (
|
||||
<div key={name} className={styles.Skin}>
|
||||
<div key={`${skinName}:${skinModel}`} className={styles.Skin}>
|
||||
<img
|
||||
className={styles.Preview}
|
||||
loading="lazy"
|
||||
src={`${baseManifestPath}/gallery/${encodeURIComponent(
|
||||
name
|
||||
)}.${actualModel}.webp`}
|
||||
src={url}
|
||||
width={680}
|
||||
height={800}
|
||||
alt={name}
|
||||
alt={skinName}
|
||||
/>
|
||||
<div className={styles.Name}>{name}</div>
|
||||
<div className={styles.Name}>{skinName}</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
Loading…
Reference in a new issue