From ff3771743cf13dc018a9cef72793c9abda99b260 Mon Sep 17 00:00:00 2001 From: Tibowl Date: Sat, 8 Jan 2022 01:45:35 +0100 Subject: [PATCH] Improve chars page --- pages/characters/index.tsx | 370 ++++++++++++++++++------------------- 1 file changed, 184 insertions(+), 186 deletions(-) diff --git a/pages/characters/index.tsx b/pages/characters/index.tsx index 88ae5a4..d631527 100644 --- a/pages/characters/index.tsx +++ b/pages/characters/index.tsx @@ -10,222 +10,220 @@ import { elements, ElementType, isFullCharacter, weapons } from "../../utils/uti interface SmallChar { - name: string - stars?: number - element?: ElementType[] - weapon?: WeaponType - icon?: string + name: string + stars?: number + element?: ElementType[] + weapon?: WeaponType + icon?: string } interface Props { - characters: SmallChar[] + characters: SmallChar[] } const defaultElements: ElementType[] = Object.keys(elements) as ElementType[] const defaultWeapons: WeaponType[] = Object.keys(weapons) as WeaponType[] export default function Characters(props: Props & { location: string }) { - const [filter, setFilter] = useState(false) - - const [starFilter, setStarFilter] = useState(0) - const [elementFilter, setElementFilter] = useState(defaultElements) - const [weaponFilter, setWeaponFilter] = useState(defaultWeapons) - - return ( -
- - Characters | Hu Tao - - - - - -

- Characters -

- - {filter ?
-
-
- - Hide filters - -
-
- Rarity filter -
-
- - All - - - 5★ Only - - - 4★ Only - -
+ const [filter, setFilter] = useState(false) + + const [starFilter, setStarFilter] = useState(0) + const [elementFilter, setElementFilter] = useState(defaultElements) + const [weaponFilter, setWeaponFilter] = useState(defaultWeapons) + + return ( +
+ + Characters | Hu Tao + + + + + +

+ Characters +

+ + {filter ?
+
+
+ + Hide filters + +
+
+ Rarity filter +
+
+ + All + + + 5★ Only + + + 4★ Only + +
+
+ +
+
+ Element filter + + All + +
+
+ {defaultElements.map(e => ( + +
+ {`${e}
- -
-
- Element filter - - All - -
-
- {defaultElements.map(e => ( - -
- {`${e} -
- {e} - - ))} -
-
- -
-
- Weapon filter - - All - -
-
- {defaultWeapons.map(e => ( - -
- {e} -
- {e} - - ))} -
+ {e} + + ))} +
+
+ +
+
+ Weapon filter + + All + +
+
+ {defaultWeapons.map(e => ( + +
+ {e}
-
:
- - Show filters - -
- } - -
- {props.characters - .filter(c => starFilter == 0 || starFilter == c.stars) - .filter(c => elementFilter.some(e => c.element?.includes(e)) || c.element == undefined) - .filter(c => weaponFilter.some(e => c.weapon?.includes(e)) || c.weapon == undefined) - .map(char => { - let color = "" - if (char.stars == 5) color = "bg-amber-700" - if (char.stars == 4) color = "bg-purple-800" - - return -
-
- - -
- {char.element && char.element.map(e =>
- {`${e} -
)} -
- - -
- {char.weapon &&
- {char.weapon} -
} -
- -
- - {char.name} - -
- - })} -
-
- ) + {e} + + ))} +
+
+ :
+ + Show filters + +
+ } + +
+ {props.characters + .filter(c => starFilter == 0 || starFilter == c.stars) + .filter(c => elementFilter.some(e => c.element?.includes(e)) || c.element == undefined) + .filter(c => weaponFilter.some(e => c.weapon?.includes(e)) || c.weapon == undefined) + .map(char => { + let color = "" + if (char.stars == 5) color = "bg-amber-600 dark:bg-amber-700" + if (char.stars == 4) color = "bg-purple-700 dark:bg-purple-800" + + return +
+ + +
+ {char.element && char.element.map(e =>
+ {`${e} +
)} +
+ + +
+ {char.weapon &&
+ {char.weapon} +
} +
+ +
+ + {char.name} + + + })} +
+
+ ) } function ExclusiveButton({ type, value, setter, children }: { type: T, value: T, setter: Dispatch>, children: any }) { - return
setter(value)} - className={`${type == value ? "bg-slate-400 dark:bg-slate-700 outline-slate-400 outline" : "bg-slate-300 dark:bg-slate-800"} px-2 py-0.5 rounded-lg cursor-pointer selection:bg-transparent`} - > - {children} -
+ return
setter(value)} + className={`${type == value ? "bg-slate-400 dark:bg-slate-700 outline-slate-400 outline" : "bg-slate-300 dark:bg-slate-800"} px-2 py-0.5 rounded-lg cursor-pointer selection:bg-transparent`} + > + {children} +
} function ToggleAllButton({ type, value, setter, children }: { type: T[], value: T[], setter: Dispatch>, children: any }) { - const equal = type.length == value.length && type.every(e => value.includes(e)) - - return
equal ? setter([]) : setter(value)} - className={`${equal ? "bg-slate-400 dark:bg-slate-700 outline-slate-400 outline" : "bg-slate-300 dark:bg-slate-800"} px-2 py-0.5 rounded-lg cursor-pointer selection:bg-transparent`} - > - {children} -
+ const equal = type.length == value.length && type.every(e => value.includes(e)) + + return
equal ? setter([]) : setter(value)} + className={`${equal ? "bg-slate-400 dark:bg-slate-700 outline-slate-400 outline" : "bg-slate-300 dark:bg-slate-800"} px-2 py-0.5 rounded-lg cursor-pointer selection:bg-transparent`} + > + {children} +
} function ToggleButton({ type, value, setter, children }: { type: T[], value: T, setter: Dispatch>, children: any }) { - const has = type.includes(value) - return
{ - if (has) setter(type.filter(x => x != value)) - else setter([value, ...type]) - }} - className={`${has ? "bg-slate-400 dark:bg-slate-700 outline-slate-400 outline" : "bg-slate-300 dark:bg-slate-800" - } px-2 py-0.5 rounded-lg cursor-pointer selection:bg-transparent`} - > - {children} -
+ const has = type.includes(value) + return
{ + if (has) setter(type.filter(x => x != value)) + else setter([value, ...type]) + }} + className={`${has ? "bg-slate-400 dark:bg-slate-700 outline-slate-400 outline" : "bg-slate-300 dark:bg-slate-800" + } px-2 py-0.5 rounded-lg cursor-pointer selection:bg-transparent`} + > + {children} +
} function Icon({ char, className }: { char: SmallChar, className?: string }) { - let src = char.icon ?? "img/unknown.png" + let src = char.icon ?? "img/unknown.png" - if (src.startsWith("img")) src = "/" + src + if (src.startsWith("img")) src = "/" + src - return {char.name} (e.target as HTMLImageElement).src = "/img/unknown.png"} /> + return {char.name} (e.target as HTMLImageElement).src = "/img/unknown.png"} /> } export async function getStaticProps(context: GetStaticPropsContext): Promise> { - const data = await getCharacters() - - if (!data) { - return { - notFound: true, - revalidate: 5 * 60 - } - } + const data = await getCharacters() + if (!data) { return { - props: { - characters: Object - .values(data) - .sort((a, b) => { - if (isFullCharacter(a) && isFullCharacter(b)) - return b.releasedOn.localeCompare(a.releasedOn) || b.star - a.star || a.name.localeCompare(b.name) - else if (!isFullCharacter(b)) - return 1 - else if (!isFullCharacter(a)) - return -1 - else return a.name.localeCompare(b.name) - }) - .map(c => { - const char: SmallChar = { name: c.name } - if (c.star) char.stars = c.star - if (c.skills) char.element = c.skills.map(skill => skill.ult?.type).filter(x => x) as ElementType[] - if (c.weaponType) char.weapon = c.weaponType - if (c.icon) char.icon = c.icon - return char - }) - }, - revalidate: 60 * 60 + notFound: true, + revalidate: 5 * 60 } + } + + return { + props: { + characters: Object + .values(data) + .sort((a, b) => { + if (isFullCharacter(a) && isFullCharacter(b)) + return b.releasedOn.localeCompare(a.releasedOn) || b.star - a.star || a.name.localeCompare(b.name) + else if (!isFullCharacter(b)) + return 1 + else if (!isFullCharacter(a)) + return -1 + else return a.name.localeCompare(b.name) + }) + .map(c => { + const char: SmallChar = { name: c.name } + if (c.star) char.stars = c.star + if (c.skills) char.element = c.skills.map(skill => skill.ult?.type).filter(x => x) as ElementType[] + if (c.weaponType) char.weapon = c.weaponType + if (c.icon) char.icon = c.icon + return char + }) + }, + revalidate: 60 * 60 + } }