refactor: separate card renderer from uid endpoint
Build and Deploy / build-and-deploy (push) Successful in 3m0s
Build and Deploy / build-and-deploy (push) Successful in 3m0s
This commit is contained in:
+106
-695
@@ -1,9 +1,8 @@
|
||||
import { feature } from "bun:bundle";
|
||||
|
||||
import { file, hash, inspect } from "bun";
|
||||
import { status, t } from "elysia";
|
||||
import { redirect, status, t } from "elysia";
|
||||
import {
|
||||
EquipType,
|
||||
enka,
|
||||
InternalError,
|
||||
InvalidFormatError,
|
||||
@@ -12,45 +11,33 @@ import {
|
||||
RatelimitError,
|
||||
TTLCache,
|
||||
} from "enka.ts";
|
||||
import { ImageResponse } from "takumi-js/response";
|
||||
import type { ImageResponse } from "takumi-js/response";
|
||||
|
||||
import { font, iconFont, sansFont } from "@/assets/fonts";
|
||||
import { generateBackground } from "@/games/genshin/assets/background";
|
||||
import { ConstsSvg } from "@/games/genshin/assets/consts";
|
||||
import { featherImage } from "@/games/genshin/assets/feather";
|
||||
import { EnkaIcon } from "@/games/genshin/assets/icons";
|
||||
import type { library } from "@/games/genshin/assets/icons-library";
|
||||
import ListDiffExample from "@/games/genshin/assets/listoriginal.webp" with { type: "file" };
|
||||
import DiffPageExample from "@/games/genshin/assets/ororo.png" with { type: "file" };
|
||||
import shadeSvg from "@/games/genshin/assets/shade.svg" with { type: "file" };
|
||||
import { star } from "@/games/genshin/assets/stars";
|
||||
import { TalentSvg } from "@/games/genshin/assets/talent";
|
||||
import { WeaponGlazeSvg } from "@/games/genshin/assets/weapon-glaze";
|
||||
import { assets, batchStore, getAvatar } from "@/games/genshin/data/assets";
|
||||
import { assets, batchStore } from "@/games/genshin/data/assets";
|
||||
import { cardErrorLocs } from "@/games/genshin/data/locs";
|
||||
import { resolveShowcaseChar } from "@/games/genshin/data/matcher";
|
||||
import { mockData } from "@/games/genshin/data/mock";
|
||||
import { buildDisplayRows } from "@/games/genshin/data/rows";
|
||||
import type { RollSummary } from "@/games/genshin/data/substat";
|
||||
import { buildRollSummary } from "@/games/genshin/data/substat";
|
||||
import { Locale, SubstatOrder } from "@/games/genshin/types/enka";
|
||||
import {
|
||||
FightPropMapEnum,
|
||||
PercentageFightProp,
|
||||
} from "@/games/genshin/types/fightPropMap";
|
||||
import type { NumberLike } from "@/games/genshin/types/enka";
|
||||
import { Locale } from "@/games/genshin/types/enka";
|
||||
import type { App } from "@/index";
|
||||
import { Deduplicator } from "@/lib/dedupe";
|
||||
import { createLogger } from "@/lib/logger";
|
||||
import { throwNotOk } from "@/lib/util";
|
||||
import { ErrorPage } from "@/v1/error";
|
||||
|
||||
import DiffPage from "../../../hmr.html";
|
||||
import {
|
||||
CharacterPage,
|
||||
NotInShowcaseError,
|
||||
PrivateShowcaseError,
|
||||
UnsupportedCharacterError,
|
||||
} from "./render/character";
|
||||
import { ListPage } from "./render/list";
|
||||
|
||||
const cache = new TTLCache();
|
||||
const deduper = new Deduplicator();
|
||||
|
||||
const shade = file(shadeSvg);
|
||||
|
||||
var purging = 0;
|
||||
|
||||
queueMicrotask(() => {
|
||||
@@ -302,36 +289,13 @@ export function card(app: App) {
|
||||
: mockData,
|
||||
]);
|
||||
|
||||
const enkaLoc = locs[lang ?? "en"];
|
||||
|
||||
if (typeof data.avatarInfoList === "undefined")
|
||||
return error(400, errorLoc.private);
|
||||
const char = resolveShowcaseChar(charId, data.avatarInfoList);
|
||||
if (!char) return error(400, errorLoc.notInShowcase);
|
||||
|
||||
const avatar = getAvatar(
|
||||
avatarStore,
|
||||
data.playerInfo,
|
||||
char.avatar.avatarId,
|
||||
);
|
||||
if (!avatar) return error(400, errorLoc.unsupported);
|
||||
|
||||
if (!char.equipList)
|
||||
return error(501, "INTERNAL: No equipList provided");
|
||||
const weaponRaw = char.equipList.find((e) => e.weapon)!;
|
||||
const weapon = {
|
||||
data: weaponRaw.weapon!,
|
||||
flat: weaponRaw.flat,
|
||||
store: weaponStore[weaponRaw.itemId ?? "Unknown"],
|
||||
};
|
||||
|
||||
const height =
|
||||
typeof w === "number" ? w / (1218 / 508) : heightRaw;
|
||||
|
||||
const cacheKey = hash(
|
||||
JSON.stringify({
|
||||
data,
|
||||
charId: char.avatar.avatarId,
|
||||
charId,
|
||||
lang,
|
||||
height,
|
||||
enableSubstat,
|
||||
@@ -341,619 +305,32 @@ export function card(app: App) {
|
||||
}),
|
||||
).toString(36);
|
||||
if (feature("API")) {
|
||||
const cached = cache.get<ImageResponse>(cacheKey);
|
||||
if (cached) return cached.clone();
|
||||
const cached = cache.get<ImageResponse | string>(cacheKey);
|
||||
if (cached)
|
||||
return typeof cached === "string" ? cached : cached.clone();
|
||||
}
|
||||
|
||||
// #region Processing
|
||||
const charLvl = char.propMap?.[4001].val ?? 1;
|
||||
const ascension = char.propMap?.[1002].val ?? 1;
|
||||
const promoteMaxLevelMap = [20, 40, 50, 60, 70, 80, 90, 100];
|
||||
const charLvlMax =
|
||||
ascension * 10 +
|
||||
(ascension > 0 ? 10 : 0) +
|
||||
20 +
|
||||
(charLvl > 90 ? 10 : 0);
|
||||
|
||||
const statRows = buildDisplayRows(char, enkaLoc);
|
||||
|
||||
const artifacts = (
|
||||
Object.keys(EquipType) as (keyof typeof EquipType)[]
|
||||
).map((t) => {
|
||||
const a = char.equipList!.find((e) => e.flat.equipType === t);
|
||||
if (!a) return null;
|
||||
const appendPropIdList = a.reliquary?.appendPropIdList ?? [];
|
||||
const props = enableRollQuality
|
||||
? appendPropIdList.map((id) => ({
|
||||
id: FightPropMapEnum[affixes[`${id}`].PropType],
|
||||
...affixes[`${id}`],
|
||||
}))
|
||||
: [];
|
||||
return {
|
||||
set: a.flat.setId!, // it is an artifact, therefore this always exist
|
||||
stars: a.flat.rankLevel,
|
||||
level: a.reliquary!.level - 1,
|
||||
appendPropIdList,
|
||||
icon: `/ui/${a.flat.icon}.png`,
|
||||
main: a.flat.reliquaryMainstat!,
|
||||
sub: (a.flat.reliquarySubstats ?? [])
|
||||
.map((s) => ({
|
||||
...s,
|
||||
props: props.filter((p) => p.id === s.appendPropId),
|
||||
}))
|
||||
.sort(
|
||||
(a, b) =>
|
||||
(SubstatOrder[a.appendPropId] ?? 999) -
|
||||
(SubstatOrder[b.appendPropId] ?? 999),
|
||||
),
|
||||
};
|
||||
const res = await CharacterPage({
|
||||
data,
|
||||
charId,
|
||||
avatarStore,
|
||||
weaponStore,
|
||||
relicStore,
|
||||
locs,
|
||||
affixes,
|
||||
lang,
|
||||
height,
|
||||
debug,
|
||||
enableSubstat,
|
||||
enableRollQuality,
|
||||
format,
|
||||
log,
|
||||
});
|
||||
const setCounts = artifacts.reduce<Record<number, number>>(
|
||||
(acc, a) => {
|
||||
if (!a) return acc;
|
||||
acc[a.set] = (acc[a.set] || 0) + 1;
|
||||
return acc;
|
||||
},
|
||||
{},
|
||||
);
|
||||
const artifactSets = Object.entries(setCounts)
|
||||
.filter(([, count]) => count >= 2)
|
||||
.map(([set, count]) => ({
|
||||
set: enkaLoc[relicStore.Sets[set].Name],
|
||||
count,
|
||||
}));
|
||||
|
||||
// substat breakdown
|
||||
const rollSummary = enableSubstat
|
||||
? buildRollSummary(
|
||||
artifacts
|
||||
.filter((a) => !!a)
|
||||
.flatMap((a) => a!.appendPropIdList.map(String)),
|
||||
affixes,
|
||||
)
|
||||
: undefined;
|
||||
|
||||
// #region Assets loading
|
||||
const resources = await Promise.all([
|
||||
assets
|
||||
.load(
|
||||
// when reached level 40, then ascend, promoteLevel is 2
|
||||
weapon.data.promoteLevel >= 2
|
||||
? weapon.store.AwakenIcon
|
||||
: weapon.store.Icon,
|
||||
)
|
||||
.then((data) => ({
|
||||
src: "/weapon",
|
||||
data,
|
||||
})),
|
||||
...[...avatar.Consts, ...Object.values(avatar.Skills)].map(
|
||||
async (path) => ({
|
||||
src: path,
|
||||
data: await assets.load(path),
|
||||
}),
|
||||
),
|
||||
...artifacts
|
||||
.filter(
|
||||
(x): x is NonNullable<(typeof artifacts)[number]> => !!x,
|
||||
)
|
||||
.map(async (art) => ({
|
||||
src: art.icon,
|
||||
data: await assets.hook(art.icon, (buf) =>
|
||||
featherImage(buf, {
|
||||
passes: [
|
||||
[0, 0.7, 0, 0],
|
||||
[0, 0.6, 0, 0],
|
||||
],
|
||||
}),
|
||||
),
|
||||
})),
|
||||
assets
|
||||
.hook(
|
||||
(char.costumeId && avatar.Costumes?.[char.costumeId].Art) ||
|
||||
avatar.SideIconName.replace(
|
||||
"AvatarIcon_Side",
|
||||
"Gacha_AvatarImg",
|
||||
),
|
||||
(buf) =>
|
||||
featherImage(buf, {
|
||||
passes: [[0, 0.3, 0, 0]],
|
||||
ratio: 1024 / 1124,
|
||||
}),
|
||||
)
|
||||
.then(async (data) => ({
|
||||
src: "/avatar",
|
||||
data,
|
||||
})),
|
||||
assets
|
||||
.fnCache(`bg-${avatar.Element}`, () =>
|
||||
generateBackground({
|
||||
element: avatar.Element,
|
||||
width: 1218,
|
||||
height: 508,
|
||||
}).then((r) => r.canvas.toBuffer("image/webp")),
|
||||
)
|
||||
.then((data) => ({
|
||||
src: `/bg-${avatar.Element}`,
|
||||
data,
|
||||
})),
|
||||
] satisfies Promise<{
|
||||
src: string;
|
||||
data: ArrayBuffer | Buffer;
|
||||
}>[]);
|
||||
log`Image resources loaded\n${resources.map((r) => `- ${r.src} ${(r.data.byteLength / 1000).toFixed(2)}Kb`).join("\n")}`;
|
||||
|
||||
if (debug === "dump") {
|
||||
log`Debug endpoint, returning JSON`;
|
||||
return JSON.stringify(
|
||||
{
|
||||
charLvl,
|
||||
charLvlMax,
|
||||
cacheKey,
|
||||
cache: assets.health,
|
||||
assets: Object.fromEntries(
|
||||
resources.map((e) => [
|
||||
e.src,
|
||||
`${(e.data.byteLength / 1000).toFixed(2)}Kb`,
|
||||
]),
|
||||
),
|
||||
char,
|
||||
weapon,
|
||||
statRows,
|
||||
rollSummary,
|
||||
artifacts,
|
||||
artifactSets,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
// #region Rendering
|
||||
const res = new ImageResponse(
|
||||
<div
|
||||
tw={`flex text-[${30.466 * (height / 1024)}px] font-[ShinShin]`}
|
||||
>
|
||||
<SubstatDisplay
|
||||
substat={rollSummary}
|
||||
element={avatar.Element}
|
||||
>
|
||||
<div
|
||||
tw={`flex relative text-white rounded-[.5em] overflow-hidden aspect-[1218/508] h-[${height}px]`}
|
||||
>
|
||||
<div tw="flex aspect-[1218/508] h-full">
|
||||
<img
|
||||
src={`/bg-${avatar.Element}`}
|
||||
alt="background"
|
||||
tw="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
{/* left section */}
|
||||
<div
|
||||
tw="absolute top-0 bottom-0 left-0 w-[30.4em] p-[1.6em] flex flex-col"
|
||||
style={{
|
||||
textShadow:
|
||||
"0 .08em .1em black,0 .1em .3em rgba(0,0,0,.4)",
|
||||
}}
|
||||
>
|
||||
{/* avatar */}
|
||||
<img
|
||||
src="/avatar"
|
||||
alt="char"
|
||||
tw="absolute h-full aspect-[1024/1124] left-[50%] top-[55%] max-w-none"
|
||||
style={{
|
||||
transform: "translate(-50%, -50%) scale(1.3)",
|
||||
transformOrigin: "50% 50%",
|
||||
}}
|
||||
/>
|
||||
{/* left side vignette */}
|
||||
<div tw="flex absolute top-0 left-0 bottom-0 right-0">
|
||||
<img src="shade" alt="shade" tw="opacity-40" />
|
||||
</div>
|
||||
{/* char and username */}
|
||||
<div tw="text-[120%] pb-[.5%] flex items-center gap-[.5em]">
|
||||
{char.avatar.name}
|
||||
<div tw="text-[0.77em] opacity-80 flex items-center gap-[.7em] pl-[.28em] pt-[.5em]">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 100 100"
|
||||
tw="mt-[.2em] h-[.7em] w-[.7em]"
|
||||
>
|
||||
<title>doritos</title>
|
||||
<polygon
|
||||
points="50,10 90,90 10,90"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
{data.playerInfo.nickname}
|
||||
</div>
|
||||
</div>
|
||||
{/* level */}
|
||||
<div tw="flex text-[102%] pt-[.3em]">
|
||||
Lv. <span tw="px-[.1em]">{charLvl}</span> /
|
||||
<span tw="opacity-60 pl-[.3em]">{charLvlMax}</span>
|
||||
</div>
|
||||
{/* fren */}
|
||||
<div tw="text-[110%] flex gap-[.3em] items-end pt-[.35em]">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
tw="h-[1.2em] mb-[.2em]"
|
||||
viewBox="0 0 14 14"
|
||||
>
|
||||
<title>fren</title>
|
||||
<path
|
||||
fill="white"
|
||||
d="M6.922 12.375c0-.134-.97-1.102-1.669-1.663l-.697-.56.728-.045c.426-.027.931-.11 1.218-.203l.49-.157.457.155a4.4 4.4 0 0 0 1.2.202l.744.048-.77.618c-.825.663-1.555 1.4-1.555 1.571 0 .058-.033.105-.073.105a.07.07 0 0 1-.073-.071M4.163 9.43q-1.678-.451-2.552-2.236C1.225 6.407.679 5.763.39 5.756c-.082-.002-.032-.055.135-.143.348-.184.749-.66.979-1.162.373-.814.44-.915.94-1.426.553-.566 1.156-.909 1.86-1.06.449-.096 1.677-.051 1.99.073l.21.083-.468.428c-.257.236-.558.56-.668.718-.177.255-.253.3-.63.375a2.094 2.094 0 0 0-1.487 3c.798 1.591 3.044 1.548 3.83-.072.137-.28.163-.45.155-1.006-.009-.664-.007-.67.247-.967.285-.333.755-.606.983-.572.367.056.632 1.656.422 2.545-.323 1.37-1.443 2.51-2.818 2.868-.519.135-1.39.132-1.907-.007Zm3.65-.017-.384-.123.48-.427c.264-.235.562-.553.663-.706.154-.232.246-.29.56-.358.526-.112.95-.332 1.21-.628.965-1.1.677-2.697-.607-3.36-.306-.158-.471-.193-.92-.193-.626 0-1.013.156-1.48.6-.477.454-.59.748-.602 1.557-.009.651-.026.73-.207.968-.25.327-.687.62-.957.639-.19.014-.223-.023-.388-.422-.255-.62-.264-1.744-.018-2.459C5.713 2.906 7.125 1.9 8.816 1.9c1.538 0 2.764.79 3.47 2.236.41.84.74 1.274 1.09 1.44l.273.13-.262.135c-.37.19-.722.651-1.067 1.4-.497 1.08-1.461 1.905-2.567 2.2-.525.139-1.462.126-1.94-.027z"
|
||||
></path>
|
||||
</svg>
|
||||
{char.fetterInfo?.expLevel ?? 0}
|
||||
</div>
|
||||
{/* sep */}
|
||||
<div tw="flex grow" />
|
||||
{/* constellation */}
|
||||
<div
|
||||
tw="flex align-start flex-col text-[1.12em]"
|
||||
className={`${avatar.Element} locked`}
|
||||
>
|
||||
{avatar.Consts.filter((c) => c !== "None").map(
|
||||
(c, i) => (
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "flex",
|
||||
margin: "-.55em 0 0em -.6em",
|
||||
}}
|
||||
>
|
||||
<ConstsSvg
|
||||
locked={i >= (char.talentIdList?.length || 0)}
|
||||
/>
|
||||
<img
|
||||
src={c}
|
||||
alt={`Constellation ${i + 1}`}
|
||||
tw={`absolute top-0 left-0 w-[1.6em] mt-[.72em] ml-[.7em] pointer-events-auto ${
|
||||
i >= (char.talentIdList?.length || 0)
|
||||
? "opacity-40"
|
||||
: ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
{/* talent-wrap */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
position: "absolute",
|
||||
right: "4.1%",
|
||||
bottom: "6%",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-end",
|
||||
width: "60%",
|
||||
fontSize: "1.05em",
|
||||
}}
|
||||
>
|
||||
{avatar.SkillOrder.map(
|
||||
(s) =>
|
||||
Object.entries(avatar.Skills).find(
|
||||
(k) => k[0] === `${s}`,
|
||||
)!,
|
||||
).map(([key, src]) => {
|
||||
if (src === "None") return;
|
||||
const extra =
|
||||
char.proudSkillExtraLevelMap?.[
|
||||
`${avatar.ProudMap[key]}`
|
||||
] ?? 0;
|
||||
const talentLevel =
|
||||
(char.skillLevelMap?.[key] ?? 0) + extra;
|
||||
return (
|
||||
<div tw="mt-[.6em] relative flex">
|
||||
<TalentSvg
|
||||
tw={`Talents ${avatar.Element} w-[3.6em] opacity-60 text-black mb-[.5em] -mt-[.25em]`}
|
||||
/>
|
||||
<img
|
||||
key={key}
|
||||
src={src}
|
||||
alt={`Talent ${key}`}
|
||||
tw="w-[2.5em] absolute left-[.15em] top-[.05em] m-[.4em_0_0_.4em]"
|
||||
/>
|
||||
<div tw="absolute -bottom-[.1em] w-full flex justify-center">
|
||||
<div
|
||||
tw={`flex ${extra ? "bg-[#45deffcc]" : "bg-[#323232b3]"} pt-[5%] pb-[2%] text-[.85em] rounded-[1.4em]`}
|
||||
>
|
||||
<span tw="px-[.6em]">{talentLevel}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div tw="flex mb-[-1em] ml-[-.3em] mt-[.3em] text-[.96em] opacity-80">
|
||||
{data.uid}
|
||||
</div>
|
||||
</div>
|
||||
{/* middle section */}
|
||||
<div tw="absolute top-0 bottom-0 right-[24.2em] w-[25.5em] p-[1.5em_.7em_.7em] flex flex-col text-[1.01em]">
|
||||
{/* weapon */}
|
||||
<div tw="flex flex-start" className="Weapon">
|
||||
{/* display */}
|
||||
<div tw="flex w-[27%] leading-none shrink-0 min-h-[5.5em] relative">
|
||||
<img src="/weapon" alt="Weapon" tw="w-full" />
|
||||
<WeaponGlazeSvg
|
||||
tw="absolute top-[90%] -left-[15%] w-[130%]"
|
||||
style={{
|
||||
color: {
|
||||
1: "#868a82",
|
||||
2: "#70ca7a",
|
||||
3: "#5cabff",
|
||||
4: "#cc7bff",
|
||||
5: "#dd8637",
|
||||
}[weapon.store.Rarity],
|
||||
}}
|
||||
/>
|
||||
<div tw="absolute w-full top-[91%] flex justify-center">
|
||||
{Array.from({ length: weapon.store.Rarity }, () =>
|
||||
star(".8em"),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* caption */}
|
||||
<div tw="px-[5%] grow text-white self-center flex flex-col">
|
||||
<div
|
||||
tw="flex text-[108%] leading-[1.3]"
|
||||
style={{
|
||||
textShadow:
|
||||
"0 .08em .1em rgba(0,0,0,.4),0 .1em .3em rgba(0,0,0,.4)",
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
{enkaLoc[weapon.store.NameTextMapHash]}
|
||||
</span>
|
||||
</div>
|
||||
{/* stats */}
|
||||
<div tw="pt-[3%] pb-[2%] flex gap-[.7em]">
|
||||
{weapon.flat.weaponStats?.map((s) => (
|
||||
<div tw="rounded-[.2em] leading-none bg-white/15 px-[.34em] py-[0.25em] flex items-center gap-[.7em] text-[1.03em]">
|
||||
<EnkaIcon
|
||||
icon={
|
||||
s.appendPropId as keyof typeof library
|
||||
}
|
||||
tw="h-[1.1em]"
|
||||
/>
|
||||
<div tw="pt-[.1em]">
|
||||
{s.statValue}
|
||||
{(PercentageFightProp as string[]).includes(
|
||||
s.appendPropId,
|
||||
)
|
||||
? "%"
|
||||
: ""}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div tw="flex gap-[.85em]">
|
||||
<div tw="rounded-[.2em] leading-none bg-black/50 px-[.34em] py-[0.175em] flex items-center gap-[.7em] text-[1.03em] text-[wheat]">
|
||||
<div tw="pt-[.1em]">
|
||||
R
|
||||
{Object.values(
|
||||
weapon.data.affixMap || { _: 0 },
|
||||
)[0] + 1}
|
||||
</div>
|
||||
</div>
|
||||
<div tw="rounded-[.2em] leading-none bg-black/50 px-[.34em] py-[0.175em] flex items-center gap-[.7em] text-[1.03em]">
|
||||
<div tw="pt-[.1em] flex items-center">
|
||||
<span tw="pr-[.1em]">Lv.</span>{" "}
|
||||
{weapon.data.level}/
|
||||
<div tw="opacity-60 pl-[.25em]">
|
||||
{
|
||||
promoteMaxLevelMap[
|
||||
weapon.data.promoteLevel ?? 0
|
||||
]
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* stats table */}
|
||||
<div tw="text-white flex flex-col pt-[2.2em] pr-[4.7%] -mb-[.8em] grow text-[.96em] justify-between">
|
||||
{/* <div /> justify spacer */}
|
||||
{statRows.map((r, i) => (
|
||||
<div tw="flex items-center whitespace-nowrap">
|
||||
<EnkaIcon
|
||||
icon={
|
||||
(
|
||||
{
|
||||
FIGHT_PROP_MAX_HP: "FIGHT_PROP_HP",
|
||||
FIGHT_PROP_CUR_ATTACK:
|
||||
"FIGHT_PROP_ATTACK",
|
||||
FIGHT_PROP_CUR_DEFENSE:
|
||||
"FIGHT_PROP_DEFENSE",
|
||||
} satisfies Record<
|
||||
string,
|
||||
keyof typeof library
|
||||
>
|
||||
)[r.key] || (r.key as keyof typeof library)
|
||||
}
|
||||
tw="h-[1em] mr-[1em] -mt-[.05em]"
|
||||
/>
|
||||
<div tw="flex grow justify-between text-[1.03em]">
|
||||
<div>{r.name}</div>
|
||||
<div tw={i < 3 ? "-top-[.3em]" : ""}>
|
||||
{r.formatted}
|
||||
</div>
|
||||
</div>
|
||||
{i < 3 && (
|
||||
<div tw="flex text-[.83em] opacity-70 absolute w-full -bottom-[.75em]">
|
||||
<div tw="flex grow justify-end">
|
||||
<div tw="flex">
|
||||
{Math.round(r.base).toLocaleString()}
|
||||
<div tw="flex text-[#82ff9a] pl-1">
|
||||
+{Math.round(r.delta).toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{artifactSets.length && (
|
||||
<div
|
||||
tw="flex w-full gap-[.5em]"
|
||||
style={{
|
||||
textShadow:
|
||||
"0 .08em .1em rgba(0,0,0,.4),0 .1em .3em rgba(0,0,0,.4)",
|
||||
}}
|
||||
>
|
||||
<div tw="w-[2em] h-[2em] shrink-0 text-[1.15em] bg-[#00000030] flex justify-center items-center font-[shicon] leading-[2.3em] rounded-[.2em]">
|
||||
|
||||
</div>
|
||||
<div tw="flex flex-col grow justify-center gap-[.1em]">
|
||||
{artifactSets.map((s) => (
|
||||
<div tw="flex text-[.92em]">
|
||||
<div tw="grow flex justify-center items-center leading-none text-[#90ee90] whitespace-nowrap overflow-ellipsis overflow-hidden px-[.3em]">
|
||||
{s.set}
|
||||
</div>
|
||||
<div tw="flex bg-[#00000030] rounded-[.2em] justify-center items-center w-[2em] ml-[.5em] shrink-0 pt-[.2em]">
|
||||
{s.count}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* right section */}
|
||||
<div tw="absolute top-0 bottom-0 right-0 w-[25.7em] p-[.7em] flex flex-col justify-between">
|
||||
{artifacts.map((a) =>
|
||||
a ? (
|
||||
<div tw="h-[18%] bg-[#0000004f] rounded-[.3em] relative text-white overflow-hidden flex justify-between gap-[.5em]">
|
||||
<img
|
||||
src={a.icon}
|
||||
alt="artifact"
|
||||
tw="absolute top-[48%] -left-[8%] w-[45%] -translate-y-1/2 -translate-x-[10%] object-contain aspect-square scale-90"
|
||||
/>
|
||||
{/* main */}
|
||||
<div tw="h-full w-[30%] text-[105%] text-right shrink-0 flex flex-col justify-center mr-[.25em]">
|
||||
<EnkaIcon
|
||||
icon={a.main.mainPropId}
|
||||
tw="h-[1em] w-[1em] ml-auto max-h-[22%] mt-[.5em]"
|
||||
/>
|
||||
<div
|
||||
tw="text-[1.1em] pt-[2%] ml-auto"
|
||||
style={{ textShadow: "0 .07em .1em black" }}
|
||||
>
|
||||
{PercentageFightProp.includes(
|
||||
a.main
|
||||
.mainPropId as (typeof PercentageFightProp)[number],
|
||||
)
|
||||
? `${a.main.statValue.toFixed(1)}%`
|
||||
: a.main.statValue.toLocaleString()}
|
||||
</div>
|
||||
<div tw="flex grow max-h-[20%] items-center justify-end">
|
||||
<div>
|
||||
{Array.from({ length: a.stars ?? 0 }, () =>
|
||||
star(".6em"),
|
||||
)}
|
||||
</div>
|
||||
<div tw="w-[2em] flex justify-end">
|
||||
<div tw="text-[75%] leading-none bg-black/50 px-[.25em] py-[.2em] rounded-[.2em] -mb-[.2em]">
|
||||
+{a.level}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* sep */}
|
||||
<hr tw="border-none h-[84%] w-[2px] mt-[2%] bg-white/60" />
|
||||
{/* substats */}
|
||||
<div tw="flex flex-col flex-wrap mt-[.35em] mb-[.35em] mr-[.35em] w-full">
|
||||
{a.sub.map((s, i) => (
|
||||
<div
|
||||
tw={`flex items-center pl-[.7em] relative gap-[.5em] w-1/2 h-1/2 ${i === 3 ? "opacity-80" : ""} ${i > 1 ? "pl-[.3em]" : ""}`}
|
||||
>
|
||||
{enableRollQuality && (
|
||||
<div tw="absolute top-0 m-[.1em] left-[-.25em] bottom-0 right-[.25em] bg-gradient-to-t from-transparent to-black/25 rounded-[.2em] flex gap-0.5">
|
||||
{s.props.map((p) => (
|
||||
<div
|
||||
tw="flex justify-center items-end grow bg-gradient-to-t from-transparent to-white/10"
|
||||
style={{
|
||||
borderBottomWidth: "1px",
|
||||
borderStyle: "solid",
|
||||
borderColor:
|
||||
"rgba(255,255,255,.8)",
|
||||
maxWidth: `${(p.Efficiency / s.props.length) * 100}%`,
|
||||
}}
|
||||
>
|
||||
{Array(p.Position).fill(
|
||||
<div tw="flex bg-[#fff8] w-1 h-1 mr-[3px] mb-[3px] rounded-full" />,
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<EnkaIcon
|
||||
icon={s.appendPropId}
|
||||
tw="h-[1.1em] w-[1.1em]"
|
||||
/>
|
||||
<div tw="flex text-[1.05em]">
|
||||
+
|
||||
{PercentageFightProp.includes(
|
||||
s.appendPropId as (typeof PercentageFightProp)[number],
|
||||
)
|
||||
? `${s.statValue.toFixed(1)}%`
|
||||
: s.statValue.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div tw="flex h-[18%] bg-[#0000004f] rounded-[.3em] opacity-20" />
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SubstatDisplay>
|
||||
</div>,
|
||||
{
|
||||
fonts: await Promise.all([
|
||||
font.arrayBuffer(),
|
||||
sansFont.arrayBuffer(),
|
||||
iconFont.arrayBuffer(),
|
||||
]),
|
||||
persistentImages: [
|
||||
{ data: await shade.arrayBuffer(), src: "shade" },
|
||||
],
|
||||
fetchedResources: resources.filter((e) => e.data.byteLength),
|
||||
format,
|
||||
drawDebugBorder: debug === "render",
|
||||
stylesheets: [
|
||||
/* css */ `
|
||||
.Rock { color: #ffc64a; }
|
||||
.Talents.Rock { color: #4a3a18!important }
|
||||
.Wind { color: #71fdec; }
|
||||
.Talents.Wind { color: #1d4d47!important }
|
||||
.Ice { color: #98efff; }
|
||||
.Talents.Ice { color: #193d43!important }
|
||||
.Water { color: #56a2ff; }
|
||||
.Talents.Water { color: #18293e!important }
|
||||
.Electric { color: #ffa1ff; }
|
||||
.Talents.Electric { color: #34123b!important }
|
||||
.Fire { color: #f58453; }
|
||||
.Talents.Fire { color: #541900!important }
|
||||
.Grass { color: #a5ffab; }
|
||||
.Talents.Grass { color: #134517!important }
|
||||
`,
|
||||
],
|
||||
},
|
||||
);
|
||||
queueMicrotask(() => {
|
||||
cache.set(cacheKey, res, 1000 * 60 * 60 * 24); // cache for 24 hour
|
||||
});
|
||||
|
||||
return res.clone();
|
||||
return typeof res === "string" ? res : res.clone();
|
||||
} catch (err) {
|
||||
if (err instanceof InvalidFormatError)
|
||||
return error(400, errorLoc.uidFormat);
|
||||
@@ -965,6 +342,12 @@ export function card(app: App) {
|
||||
return error(429, errorLoc.ratelimit);
|
||||
else if (err instanceof InternalError)
|
||||
return status(502, errorLoc.internal);
|
||||
else if (err instanceof PrivateShowcaseError)
|
||||
return error(400, errorLoc.private);
|
||||
else if (err instanceof NotInShowcaseError)
|
||||
return error(400, errorLoc.notInShowcase);
|
||||
else if (err instanceof UnsupportedCharacterError)
|
||||
return error(400, errorLoc.unsupported);
|
||||
log.error`${err}`;
|
||||
try {
|
||||
return error(
|
||||
@@ -1054,7 +437,74 @@ export function card(app: App) {
|
||||
},
|
||||
afterResponse: ({ log }) => log`Rendering completed`,
|
||||
},
|
||||
),
|
||||
)
|
||||
.get("/enka/:username", async ({ params: { username } }) => {
|
||||
const cacheKey = `enka-redir::${username}`;
|
||||
if (feature("API")) {
|
||||
const cached = cache.get<Response>(cacheKey);
|
||||
if (cached) return cached.clone();
|
||||
}
|
||||
|
||||
const [hoyo] = await fetch(
|
||||
`https://enka.network/api/profile/${username}/hoyos/`,
|
||||
)
|
||||
.then(throwNotOk)
|
||||
.then(
|
||||
(r) =>
|
||||
r.json() as Promise<
|
||||
Record<string, { hoyo_type: number; order: NumberLike }>
|
||||
>,
|
||||
)
|
||||
.then((e) =>
|
||||
Object.entries(e)
|
||||
.map(([k, v]) => ({ hash: k, ...v }))
|
||||
.sort((a, b) => Number(a.order) - Number(b.order))
|
||||
.filter((e) => e.hoyo_type === 0),
|
||||
);
|
||||
if (!hoyo) return status(404, "this needs to be changed.");
|
||||
const builds = await fetch(
|
||||
`https://enka.network/api/profile/${username}/hoyos/${hoyo.hash}/builds/`,
|
||||
)
|
||||
.then(throwNotOk)
|
||||
.then(
|
||||
(r) =>
|
||||
r.json() as Promise<
|
||||
Record<string, { id: number; order: NumberLike }[]>
|
||||
>,
|
||||
)
|
||||
.then((e) =>
|
||||
((
|
||||
pair:
|
||||
| [string, { id: number; order: `${number}` }[]]
|
||||
| undefined,
|
||||
) =>
|
||||
pair
|
||||
? {
|
||||
char: pair[0],
|
||||
...pair[1]
|
||||
.sort((a, b) => Number(a.order) - Number(b.order))
|
||||
.shift(),
|
||||
}
|
||||
: undefined)(Object.entries(e).shift()),
|
||||
);
|
||||
if (!builds?.id) return status(404, "this needs to be changed.");
|
||||
|
||||
const res = redirect(
|
||||
`/v1/card/enka/${username}/${hoyo.hash}/${builds.char}/${builds.id}`,
|
||||
);
|
||||
queueMicrotask(() => {
|
||||
cache.set(
|
||||
`enka-redir::${username}::${hoyo.hash}`,
|
||||
builds,
|
||||
1000 * 120,
|
||||
);
|
||||
cache.set(cacheKey, res, 1000 * 60); // cache for 1 minute
|
||||
});
|
||||
|
||||
return res.clone();
|
||||
})
|
||||
.get("/enka/:username/:hash/:char/:build", () => {
|
||||
}),
|
||||
)
|
||||
.get(
|
||||
"/health/enka",
|
||||
@@ -1086,42 +536,3 @@ export function card(app: App) {
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function SubstatDisplay({
|
||||
substat,
|
||||
element,
|
||||
children,
|
||||
}: {
|
||||
substat: RollSummary[] | undefined;
|
||||
element: string;
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
if (!substat) return children;
|
||||
|
||||
return (
|
||||
<div tw="flex flex-col-reverse">
|
||||
<div
|
||||
tw="flex h-[2.3em] bg-current relative -top-[.5em] pt-[.5em] -mb-[.5em] rounded-b-[.5em]"
|
||||
className={`Talents ${element}`}
|
||||
>
|
||||
<div tw="text-white w-full flex items-center flex-wrap justify-end bg-black/25">
|
||||
{/* substat */}
|
||||
{substat.map((s) => (
|
||||
<div tw="mr-[1.2em] flex gap-[.2em] items-center whitespace-nowrap">
|
||||
{/* arq */}
|
||||
<div tw="ml-[.2em] mb-[.1em] text-[.75em] flex flex-col items-center font-[Open_Sans]">
|
||||
{s.efficiency}
|
||||
{/* hr */}
|
||||
<div tw="flex w-full h-[1px] bg-white"></div>
|
||||
{s.level}
|
||||
</div>
|
||||
<EnkaIcon icon={s.id} tw="h-[1em]" />
|
||||
{s.formatted}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,565 @@
|
||||
import { file } from "bun";
|
||||
|
||||
import type { ResolvedRoot } from "enka.ts";
|
||||
import { EquipType } from "enka.ts";
|
||||
import { ImageResponse } from "takumi-js/response";
|
||||
|
||||
import { font, iconFont, sansFont } from "@/assets/fonts";
|
||||
import { generateBackground } from "@/games/genshin/assets/background";
|
||||
import { ConstsSvg } from "@/games/genshin/assets/consts";
|
||||
import { featherImage } from "@/games/genshin/assets/feather";
|
||||
import { EnkaIcon } from "@/games/genshin/assets/icons";
|
||||
import type { library } from "@/games/genshin/assets/icons-library";
|
||||
import shadeSvg from "@/games/genshin/assets/shade.svg" with { type: "file" };
|
||||
import { star } from "@/games/genshin/assets/stars";
|
||||
import { TalentSvg } from "@/games/genshin/assets/talent";
|
||||
import { WeaponGlazeSvg } from "@/games/genshin/assets/weapon-glaze";
|
||||
import { assets, getAvatar } from "@/games/genshin/data/assets";
|
||||
import { resolveShowcaseChar } from "@/games/genshin/data/matcher";
|
||||
import { buildDisplayRows } from "@/games/genshin/data/rows";
|
||||
import type { RollSummary } from "@/games/genshin/data/substat";
|
||||
import { buildRollSummary } from "@/games/genshin/data/substat";
|
||||
import type {
|
||||
AvatarStore,
|
||||
EnkaAffixes,
|
||||
EnkaLocs,
|
||||
RelicStore,
|
||||
WeaponStore,
|
||||
} from "@/games/genshin/types/enka";
|
||||
import { SubstatOrder } from "@/games/genshin/types/enka";
|
||||
import {
|
||||
FightPropMapEnum,
|
||||
PercentageFightProp,
|
||||
} from "@/games/genshin/types/fightPropMap";
|
||||
import type { Logger } from "@/lib/logger";
|
||||
|
||||
const shade = file(shadeSvg);
|
||||
|
||||
export class PrivateShowcaseError extends Error {
|
||||
constructor() {
|
||||
super("PRIVATE_SHOWCASE");
|
||||
}
|
||||
}
|
||||
|
||||
export class NotInShowcaseError extends Error {
|
||||
constructor() {
|
||||
super("NOT_IN_SHOWCASE");
|
||||
}
|
||||
}
|
||||
|
||||
export class UnsupportedCharacterError extends Error {
|
||||
constructor() {
|
||||
super("UNSUPPORTED_CHARACTER");
|
||||
}
|
||||
}
|
||||
|
||||
type CharacterPageOptions = {
|
||||
data: ResolvedRoot;
|
||||
charId: string;
|
||||
avatarStore: AvatarStore;
|
||||
weaponStore: WeaponStore;
|
||||
relicStore: RelicStore;
|
||||
locs: EnkaLocs;
|
||||
affixes: EnkaAffixes;
|
||||
lang?: keyof EnkaLocs;
|
||||
height: number;
|
||||
debug?: "none" | "render" | "dump";
|
||||
enableSubstat?: boolean;
|
||||
enableRollQuality?: boolean;
|
||||
format?: "jpeg" | "webp" | "png";
|
||||
log: Logger;
|
||||
};
|
||||
|
||||
export async function CharacterPage({
|
||||
data,
|
||||
charId,
|
||||
avatarStore,
|
||||
weaponStore,
|
||||
relicStore,
|
||||
locs,
|
||||
affixes,
|
||||
lang,
|
||||
height,
|
||||
debug = "none",
|
||||
enableSubstat = false,
|
||||
enableRollQuality = false,
|
||||
format = "webp",
|
||||
log,
|
||||
}: CharacterPageOptions) {
|
||||
const enkaLoc = locs[lang ?? "en"];
|
||||
|
||||
if (typeof data.avatarInfoList === "undefined")
|
||||
throw new PrivateShowcaseError();
|
||||
|
||||
const char = resolveShowcaseChar(charId, data.avatarInfoList);
|
||||
if (!char) throw new NotInShowcaseError();
|
||||
|
||||
const avatar = getAvatar(avatarStore, data.playerInfo, char.avatar.avatarId);
|
||||
if (!avatar) throw new UnsupportedCharacterError();
|
||||
|
||||
if (!char.equipList) throw new Error("INTERNAL: No equipList provided");
|
||||
const weaponRaw = char.equipList.find((e) => e.weapon)!;
|
||||
const weapon = {
|
||||
data: weaponRaw.weapon!,
|
||||
flat: weaponRaw.flat,
|
||||
store: weaponStore[weaponRaw.itemId ?? "Unknown"],
|
||||
};
|
||||
|
||||
const charLvl = char.propMap?.[4001].val ?? 1;
|
||||
const ascension = char.propMap?.[1002].val ?? 1;
|
||||
const promoteMaxLevelMap = [20, 40, 50, 60, 70, 80, 90, 100];
|
||||
const charLvlMax =
|
||||
ascension * 10 +
|
||||
(ascension > 0 ? 10 : 0) +
|
||||
20 +
|
||||
(charLvl > 90 ? 10 : 0);
|
||||
|
||||
const statRows = buildDisplayRows(char, enkaLoc);
|
||||
|
||||
const artifactSlots = Object.keys(EquipType) as (keyof typeof EquipType)[];
|
||||
const artifacts = artifactSlots.map((t) => {
|
||||
const a = char.equipList!.find((e) => e.flat.equipType === t);
|
||||
if (!a) return null;
|
||||
const appendPropIdList = a.reliquary?.appendPropIdList ?? [];
|
||||
const props = enableRollQuality
|
||||
? appendPropIdList.map((id) => ({
|
||||
id: FightPropMapEnum[affixes[`${id}`].PropType],
|
||||
...affixes[`${id}`],
|
||||
}))
|
||||
: [];
|
||||
return {
|
||||
set: a.flat.setId!,
|
||||
stars: a.flat.rankLevel,
|
||||
level: a.reliquary!.level - 1,
|
||||
appendPropIdList,
|
||||
icon: `/ui/${a.flat.icon}.png`,
|
||||
main: a.flat.reliquaryMainstat!,
|
||||
sub: (a.flat.reliquarySubstats ?? [])
|
||||
.map((s) => ({
|
||||
...s,
|
||||
props: props.filter((p) => p.id === s.appendPropId),
|
||||
}))
|
||||
.sort(
|
||||
(a, b) =>
|
||||
(SubstatOrder[a.appendPropId] ?? 999) -
|
||||
(SubstatOrder[b.appendPropId] ?? 999),
|
||||
),
|
||||
};
|
||||
});
|
||||
|
||||
const setCounts = artifacts.reduce<Record<number, number>>((acc, a) => {
|
||||
if (!a) return acc;
|
||||
acc[a.set] = (acc[a.set] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const artifactSets = Object.entries(setCounts)
|
||||
.filter(([, count]) => count >= 2)
|
||||
.map(([set, count]) => ({
|
||||
set: enkaLoc[relicStore.Sets[set].Name],
|
||||
count,
|
||||
}));
|
||||
|
||||
const rollSummary = enableSubstat
|
||||
? buildRollSummary(
|
||||
artifacts
|
||||
.filter((a) => !!a)
|
||||
.flatMap((a) => a!.appendPropIdList.map(String)),
|
||||
affixes,
|
||||
)
|
||||
: undefined;
|
||||
|
||||
const resources = await Promise.all([
|
||||
assets
|
||||
.load(
|
||||
weapon.data.promoteLevel >= 2 ? weapon.store.AwakenIcon : weapon.store.Icon,
|
||||
)
|
||||
.then((data) => ({ src: "/weapon", data })),
|
||||
...[...avatar.Consts, ...Object.values(avatar.Skills)].map(async (path) => ({
|
||||
src: path,
|
||||
data: await assets.load(path),
|
||||
})),
|
||||
...artifacts
|
||||
.filter((x): x is NonNullable<(typeof artifacts)[number]> => !!x)
|
||||
.map(async (art) => ({
|
||||
src: art.icon,
|
||||
data: await assets.hook(art.icon, (buf) =>
|
||||
featherImage(buf, {
|
||||
passes: [
|
||||
[0, 0.7, 0, 0],
|
||||
[0, 0.6, 0, 0],
|
||||
],
|
||||
}),
|
||||
),
|
||||
})),
|
||||
assets
|
||||
.hook(
|
||||
(char.costumeId && avatar.Costumes?.[char.costumeId].Art) ||
|
||||
avatar.SideIconName.replace("AvatarIcon_Side", "Gacha_AvatarImg"),
|
||||
(buf) =>
|
||||
featherImage(buf, {
|
||||
passes: [[0, 0.3, 0, 0]],
|
||||
ratio: 1024 / 1124,
|
||||
}),
|
||||
)
|
||||
.then((data) => ({ src: "/avatar", data })),
|
||||
assets
|
||||
.fnCache(`bg-${avatar.Element}`, () =>
|
||||
generateBackground({
|
||||
element: avatar.Element,
|
||||
width: 1218,
|
||||
height: 508,
|
||||
}).then((r) => r.canvas.toBuffer("image/webp")),
|
||||
)
|
||||
.then((data) => ({ src: `/bg-${avatar.Element}`, data })),
|
||||
] satisfies Promise<{ src: string; data: ArrayBuffer | Buffer; }>[]);
|
||||
|
||||
log`Image resources loaded\n${resources.map((r) => `- ${r.src} ${(r.data.byteLength / 1000).toFixed(2)}Kb`).join("\n")}`;
|
||||
|
||||
if (debug === "dump") {
|
||||
log`Debug endpoint, returning JSON`;
|
||||
return JSON.stringify(
|
||||
{
|
||||
charLvl,
|
||||
charLvlMax,
|
||||
cache: assets.health,
|
||||
assets: Object.fromEntries(
|
||||
resources.map((e) => [e.src, `${(e.data.byteLength / 1000).toFixed(2)}Kb`]),
|
||||
),
|
||||
char,
|
||||
weapon,
|
||||
statRows,
|
||||
rollSummary,
|
||||
artifacts,
|
||||
artifactSets,
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
return new ImageResponse(
|
||||
<div tw={`flex text-[${30.466 * (height / 1024)}px] font-[ShinShin]`}>
|
||||
<SubstatDisplay substat={rollSummary} element={avatar.Element}>
|
||||
<div
|
||||
tw={`flex relative text-white rounded-[.5em] overflow-hidden aspect-[1218/508] h-[${height}px]`}
|
||||
>
|
||||
<div tw="flex aspect-[1218/508] h-full">
|
||||
<img src={`/bg-${avatar.Element}`} alt="background" tw="w-full h-full object-cover" />
|
||||
</div>
|
||||
<div
|
||||
tw="absolute top-0 bottom-0 left-0 w-[30.4em] p-[1.6em] flex flex-col"
|
||||
style={{ textShadow: "0 .08em .1em black,0 .1em .3em rgba(0,0,0,.4)" }}
|
||||
>
|
||||
<img
|
||||
src="/avatar"
|
||||
alt="char"
|
||||
tw="absolute h-full aspect-[1024/1124] left-[50%] top-[55%] max-w-none"
|
||||
style={{
|
||||
transform: "translate(-50%, -50%) scale(1.3)",
|
||||
transformOrigin: "50% 50%",
|
||||
}}
|
||||
/>
|
||||
<div tw="flex absolute top-0 left-0 bottom-0 right-0">
|
||||
<img src="shade" alt="shade" tw="opacity-40" />
|
||||
</div>
|
||||
<div tw="text-[120%] pb-[.5%] flex items-center gap-[.5em]">
|
||||
{char.avatar.name}
|
||||
<div tw="text-[0.77em] opacity-80 flex items-center gap-[.7em] pl-[.28em] pt-[.5em]">
|
||||
<svg width="16" height="16" viewBox="0 0 100 100" tw="mt-[.2em] h-[.7em] w-[.7em]">
|
||||
<title>doritos</title>
|
||||
<polygon points="50,10 90,90 10,90" fill="currentColor" />
|
||||
</svg>
|
||||
{data.playerInfo.nickname}
|
||||
</div>
|
||||
</div>
|
||||
<div tw="flex text-[102%] pt-[.3em]">
|
||||
Lv. <span tw="px-[.1em]">{charLvl}</span> /
|
||||
<span tw="opacity-60 pl-[.3em]">{charLvlMax}</span>
|
||||
</div>
|
||||
<div tw="text-[110%] flex gap-[.3em] items-end pt-[.35em]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" tw="h-[1.2em] mb-[.2em]" viewBox="0 0 14 14">
|
||||
<title>fren</title>
|
||||
<path
|
||||
fill="white"
|
||||
d="M6.922 12.375c0-.134-.97-1.102-1.669-1.663l-.697-.56.728-.045c.426-.027.931-.11 1.218-.203l.49-.157.457.155a4.4 4.4 0 0 0 1.2.202l.744.048-.77.618c-.825.663-1.555 1.4-1.555 1.571 0 .058-.033.105-.073.105a.07.07 0 0 1-.073-.071M4.163 9.43q-1.678-.451-2.552-2.236C1.225 6.407.679 5.763.39 5.756c-.082-.002-.032-.055.135-.143.348-.184.749-.66.979-1.162.373-.814.44-.915.94-1.426.553-.566 1.156-.909 1.86-1.06.449-.096 1.677-.051 1.99.073l.21.083-.468.428c-.257.236-.558.56-.668.718-.177.255-.253.3-.63.375a2.094 2.094 0 0 0-1.487 3c.798 1.591 3.044 1.548 3.83-.072.137-.28.163-.45.155-1.006-.009-.664-.007-.67.247-.967.285-.333.755-.606.983-.572.367.056.632 1.656.422 2.545-.323 1.37-1.443 2.51-2.818 2.868-.519.135-1.39.132-1.907-.007Zm3.65-.017-.384-.123.48-.427c.264-.235.562-.553.663-.706.154-.232.246-.29.56-.358.526-.112.95-.332 1.21-.628.965-1.1.677-2.697-.607-3.36-.306-.158-.471-.193-.92-.193-.626 0-1.013.156-1.48.6-.477.454-.59.748-.602 1.557-.009.651-.026.73-.207.968-.25.327-.687.62-.957.639-.19.014-.223-.023-.388-.422-.255-.62-.264-1.744-.018-2.459C5.713 2.906 7.125 1.9 8.816 1.9c1.538 0 2.764.79 3.47 2.236.41.84.74 1.274 1.09 1.44l.273.13-.262.135c-.37.19-.722.651-1.067 1.4-.497 1.08-1.461 1.905-2.567 2.2-.525.139-1.462.126-1.94-.027z"
|
||||
></path>
|
||||
</svg>
|
||||
{char.fetterInfo?.expLevel ?? 0}
|
||||
</div>
|
||||
<div tw="flex grow" />
|
||||
<div tw="flex align-start flex-col text-[1.12em]" className={`${avatar.Element} locked`}>
|
||||
{avatar.Consts.filter((c) => c !== "None").map((c, i) => (
|
||||
<div
|
||||
key={c}
|
||||
style={{ position: "relative", display: "flex", margin: "-.55em 0 0em -.6em" }}
|
||||
>
|
||||
<ConstsSvg locked={i >= (char.talentIdList?.length || 0)} />
|
||||
<img
|
||||
src={c}
|
||||
alt={`Constellation ${i + 1}`}
|
||||
tw={`absolute top-0 left-0 w-[1.6em] mt-[.72em] ml-[.7em] pointer-events-auto ${i >= (char.talentIdList?.length || 0) ? "opacity-40" : ""}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
position: "absolute",
|
||||
right: "4.1%",
|
||||
bottom: "6%",
|
||||
flexDirection: "column",
|
||||
alignItems: "flex-end",
|
||||
width: "60%",
|
||||
fontSize: "1.05em",
|
||||
}}
|
||||
>
|
||||
{avatar.SkillOrder.map((s) => Object.entries(avatar.Skills).find((k) => k[0] === `${s}`)!).map(
|
||||
([key, src]) => {
|
||||
if (src === "None") return null;
|
||||
const extra = char.proudSkillExtraLevelMap?.[`${avatar.ProudMap[key]}`] ?? 0;
|
||||
const talentLevel = (char.skillLevelMap?.[key] ?? 0) + extra;
|
||||
return (
|
||||
<div key={key} tw="mt-[.6em] relative flex">
|
||||
<TalentSvg tw={`Talents ${avatar.Element} w-[3.6em] opacity-60 text-black mb-[.5em] -mt-[.25em]`} />
|
||||
<img src={src} alt={`Talent ${key}`} tw="w-[2.5em] absolute left-[.15em] top-[.05em] m-[.4em_0_0_.4em]" />
|
||||
<div tw="absolute -bottom-[.1em] w-full flex justify-center">
|
||||
<div tw={`flex ${extra ? "bg-[#45deffcc]" : "bg-[#323232b3]"} pt-[5%] pb-[2%] text-[.85em] rounded-[1.4em]`}>
|
||||
<span tw="px-[.6em]">{talentLevel}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
</div>
|
||||
<div tw="flex mb-[-1em] ml-[-.3em] mt-[.3em] text-[.96em] opacity-80">{data.uid}</div>
|
||||
</div>
|
||||
<div tw="absolute top-0 bottom-0 right-[24.2em] w-[25.5em] p-[1.5em_.7em_.7em] flex flex-col text-[1.01em]">
|
||||
<div tw="flex flex-start" className="Weapon">
|
||||
<div tw="flex w-[27%] leading-none shrink-0 min-h-[5.5em] relative">
|
||||
<img src="/weapon" alt="Weapon" tw="w-full" />
|
||||
<WeaponGlazeSvg
|
||||
tw="absolute top-[90%] -left-[15%] w-[130%]"
|
||||
style={{
|
||||
color: {
|
||||
1: "#868a82",
|
||||
2: "#70ca7a",
|
||||
3: "#5cabff",
|
||||
4: "#cc7bff",
|
||||
5: "#dd8637",
|
||||
}[weapon.store.Rarity],
|
||||
}}
|
||||
/>
|
||||
<div tw="absolute w-full top-[91%] flex justify-center">
|
||||
{Array.from({ length: weapon.store.Rarity }, () => star(".8em"))}
|
||||
</div>
|
||||
</div>
|
||||
<div tw="px-[5%] grow text-white self-center flex flex-col">
|
||||
<div tw="flex text-[108%] leading-[1.3]" style={{ textShadow: "0 .08em .1em rgba(0,0,0,.4),0 .1em .3em rgba(0,0,0,.4)" }}>
|
||||
<span>{enkaLoc[weapon.store.NameTextMapHash]}</span>
|
||||
</div>
|
||||
<div tw="pt-[3%] pb-[2%] flex gap-[.7em]">
|
||||
{weapon.flat.weaponStats?.map((s) => (
|
||||
<div key={s.appendPropId} tw="rounded-[.2em] leading-none bg-white/15 px-[.34em] py-[0.25em] flex items-center gap-[.7em] text-[1.03em]">
|
||||
<EnkaIcon icon={s.appendPropId as keyof typeof library} tw="h-[1.1em]" />
|
||||
<div tw="pt-[.1em]">
|
||||
{s.statValue}
|
||||
{(PercentageFightProp as string[]).includes(s.appendPropId) ? "%" : ""}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div tw="flex gap-[.85em]">
|
||||
<div tw="rounded-[.2em] leading-none bg-black/50 px-[.34em] py-[0.175em] flex items-center gap-[.7em] text-[1.03em] text-[wheat]">
|
||||
<div tw="pt-[.1em]">R{Object.values(weapon.data.affixMap || { _: 0 })[0] + 1}</div>
|
||||
</div>
|
||||
<div tw="rounded-[.2em] leading-none bg-black/50 px-[.34em] py-[0.175em] flex items-center gap-[.7em] text-[1.03em]">
|
||||
<div tw="pt-[.1em] flex items-center">
|
||||
<span tw="pr-[.1em]">Lv.</span> {weapon.data.level}/
|
||||
<div tw="opacity-60 pl-[.25em]">{promoteMaxLevelMap[weapon.data.promoteLevel ?? 0]}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tw="text-white flex flex-col pt-[2.2em] pr-[4.7%] -mb-[.8em] grow text-[.96em] justify-between">
|
||||
{statRows.map((r, i) => (
|
||||
<div key={r.key} tw="flex items-center whitespace-nowrap">
|
||||
<EnkaIcon
|
||||
icon={
|
||||
(
|
||||
{
|
||||
FIGHT_PROP_MAX_HP: "FIGHT_PROP_HP",
|
||||
FIGHT_PROP_CUR_ATTACK: "FIGHT_PROP_ATTACK",
|
||||
FIGHT_PROP_CUR_DEFENSE: "FIGHT_PROP_DEFENSE",
|
||||
} satisfies Record<string, keyof typeof library>
|
||||
)[r.key] || (r.key as keyof typeof library)
|
||||
}
|
||||
tw="h-[1em] mr-[1em] -mt-[.05em]"
|
||||
/>
|
||||
<div tw="flex grow justify-between text-[1.03em]">
|
||||
<div>{r.name}</div>
|
||||
<div tw={i < 3 ? "-top-[.3em]" : ""}>{r.formatted}</div>
|
||||
</div>
|
||||
{i < 3 && (
|
||||
<div tw="flex text-[.83em] opacity-70 absolute w-full -bottom-[.75em]">
|
||||
<div tw="flex grow justify-end">
|
||||
<div tw="flex">
|
||||
{Math.round(r.base).toLocaleString()}
|
||||
<div tw="flex text-[#82ff9a] pl-1">+{Math.round(r.delta).toLocaleString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
{artifactSets.length && (
|
||||
<div tw="flex w-full gap-[.5em]" style={{ textShadow: "0 .08em .1em rgba(0,0,0,.4),0 .1em .3em rgba(0,0,0,.4)" }}>
|
||||
<div tw="w-[2em] h-[2em] shrink-0 text-[1.15em] bg-[#00000030] flex justify-center items-center font-[shicon] leading-[2.3em] rounded-[.2em]">
|
||||
|
||||
</div>
|
||||
<div tw="flex flex-col grow justify-center gap-[.1em]">
|
||||
{artifactSets.map((s) => (
|
||||
<div key={s.set} tw="flex text-[.92em]">
|
||||
<div tw="grow flex justify-center items-center leading-none text-[#90ee90] whitespace-nowrap overflow-ellipsis overflow-hidden px-[.3em]">
|
||||
{s.set}
|
||||
</div>
|
||||
<div tw="flex bg-[#00000030] rounded-[.2em] justify-center items-center w-[2em] ml-[.5em] shrink-0 pt-[.2em]">
|
||||
{s.count}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div tw="absolute top-0 bottom-0 right-0 w-[25.7em] p-[.7em] flex flex-col justify-between">
|
||||
{artifacts.map((a, index) =>
|
||||
a ? (
|
||||
<div key={artifactSlots[index]} tw="h-[18%] bg-[#0000004f] rounded-[.3em] relative text-white overflow-hidden flex justify-between gap-[.5em]">
|
||||
<img src={a.icon} alt="artifact" tw="absolute top-[48%] -left-[8%] w-[45%] -translate-y-1/2 -translate-x-[10%] object-contain aspect-square scale-90" />
|
||||
<div tw="h-full w-[30%] text-[105%] text-right shrink-0 flex flex-col justify-center mr-[.25em]">
|
||||
<EnkaIcon icon={a.main.mainPropId} tw="h-[1em] w-[1em] ml-auto max-h-[22%] mt-[.5em]" />
|
||||
<div tw="text-[1.1em] pt-[2%] ml-auto" style={{ textShadow: "0 .07em .1em black" }}>
|
||||
{PercentageFightProp.includes(a.main.mainPropId as (typeof PercentageFightProp)[number])
|
||||
? `${a.main.statValue.toFixed(1)}%`
|
||||
: a.main.statValue.toLocaleString()}
|
||||
</div>
|
||||
<div tw="flex grow max-h-[20%] items-center justify-end">
|
||||
<div>{Array.from({ length: a.stars ?? 0 }, () => star(".6em"))}</div>
|
||||
<div tw="w-[2em] flex justify-end">
|
||||
<div tw="text-[75%] leading-none bg-black/50 px-[.25em] py-[.2em] rounded-[.2em] -mb-[.2em]">+{a.level}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr tw="border-none h-[84%] w-[2px] mt-[2%] bg-white/60" />
|
||||
<div tw="flex flex-col flex-wrap mt-[.35em] mb-[.35em] mr-[.35em] w-full">
|
||||
{a.sub.map((s, i) => (
|
||||
<div key={`${s.appendPropId}-${s.statValue}`} tw={`flex items-center pl-[.7em] relative gap-[.5em] w-1/2 h-1/2 ${i === 3 ? "opacity-80" : ""} ${i > 1 ? "pl-[.3em]" : ""}`}>
|
||||
{enableRollQuality && (
|
||||
<div tw="absolute top-0 m-[.1em] left-[-.25em] bottom-0 right-[.25em] bg-gradient-to-t from-transparent to-black/25 rounded-[.2em] flex gap-0.5">
|
||||
{s.props.map((p) => (
|
||||
<div
|
||||
key={`${p.Position}-${p.Value}-${p.Efficiency}`}
|
||||
tw="flex justify-center items-end grow bg-gradient-to-t from-transparent to-white/10"
|
||||
style={{
|
||||
borderBottomWidth: "1px",
|
||||
borderStyle: "solid",
|
||||
borderColor: "rgba(255,255,255,.8)",
|
||||
maxWidth: `${(p.Efficiency / s.props.length) * 100}%`,
|
||||
}}
|
||||
>
|
||||
{Array(p.Position).fill(<div tw="flex bg-[#fff8] w-1 h-1 mr-[3px] mb-[3px] rounded-full" />)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<EnkaIcon icon={s.appendPropId} tw="h-[1.1em] w-[1.1em]" />
|
||||
<div tw="flex text-[1.05em]">
|
||||
+
|
||||
{PercentageFightProp.includes(s.appendPropId as (typeof PercentageFightProp)[number])
|
||||
? `${s.statValue.toFixed(1)}%`
|
||||
: s.statValue.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div key={artifactSlots[index]} tw="flex h-[18%] bg-[#0000004f] rounded-[.3em] opacity-20" />
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</SubstatDisplay>
|
||||
</div>,
|
||||
{
|
||||
fonts: await Promise.all([
|
||||
font.arrayBuffer(),
|
||||
sansFont.arrayBuffer(),
|
||||
iconFont.arrayBuffer(),
|
||||
]),
|
||||
persistentImages: [{ data: await shade.arrayBuffer(), src: "shade" }],
|
||||
fetchedResources: resources.filter((e) => e.data.byteLength),
|
||||
format,
|
||||
drawDebugBorder: debug === "render",
|
||||
stylesheets: [
|
||||
/* css */ `
|
||||
.Rock { color: #ffc64a; }
|
||||
.Talents.Rock { color: #4a3a18!important }
|
||||
.Wind { color: #71fdec; }
|
||||
.Talents.Wind { color: #1d4d47!important }
|
||||
.Ice { color: #98efff; }
|
||||
.Talents.Ice { color: #193d43!important }
|
||||
.Water { color: #56a2ff; }
|
||||
.Talents.Water { color: #18293e!important }
|
||||
.Electric { color: #ffa1ff; }
|
||||
.Talents.Electric { color: #34123b!important }
|
||||
.Fire { color: #f58453; }
|
||||
.Talents.Fire { color: #541900!important }
|
||||
.Grass { color: #a5ffab; }
|
||||
.Talents.Grass { color: #134517!important }
|
||||
`,
|
||||
],
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function SubstatDisplay({
|
||||
substat,
|
||||
element,
|
||||
children,
|
||||
}: {
|
||||
substat: RollSummary[] | undefined;
|
||||
element: string;
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
if (!substat) return children;
|
||||
|
||||
return (
|
||||
<div tw="flex flex-col-reverse">
|
||||
<div
|
||||
tw="flex h-[2.3em] bg-current relative -top-[.5em] pt-[.5em] -mb-[.5em] rounded-b-[.5em]"
|
||||
className={`Talents ${element}`}
|
||||
>
|
||||
<div tw="text-white w-full flex items-center flex-wrap justify-end bg-black/25">
|
||||
{substat.map((s) => (
|
||||
<div key={s.id} tw="mr-[1.2em] flex gap-[.2em] items-center whitespace-nowrap">
|
||||
<div tw="ml-[.2em] mb-[.1em] text-[.75em] flex flex-col items-center font-[Open_Sans]">
|
||||
{s.efficiency}
|
||||
<div tw="flex w-full h-[1px] bg-white"></div>
|
||||
{s.level}
|
||||
</div>
|
||||
<EnkaIcon icon={s.id} tw="h-[1em]" />
|
||||
{s.formatted}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,17 @@
|
||||
export function arrRandom<T>(arr: readonly T[]): T | undefined {
|
||||
return arr[Math.floor(Math.random() * arr.length)];
|
||||
}
|
||||
|
||||
export class ResponseNotOkError extends Error {
|
||||
constructor(
|
||||
readonly status: number,
|
||||
readonly response: Response,
|
||||
) {
|
||||
super(`RESPONSE_NOT_OK: Got status ${status}`);
|
||||
}
|
||||
}
|
||||
|
||||
export function throwNotOk(res: Response) {
|
||||
if (!res.ok) throw new ResponseNotOkError(res.status, res);
|
||||
return res;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user