deps: upgrade takumi to v1, fix visual bugs
This commit is contained in:
+29
-28
@@ -1,6 +1,5 @@
|
||||
import { feature } from "bun:bundle";
|
||||
|
||||
import { ImageResponse } from "@takumi-rs/image-response";
|
||||
import { file, hash, inspect } from "bun";
|
||||
import { status, t } from "elysia";
|
||||
import {
|
||||
@@ -13,6 +12,7 @@ import {
|
||||
RatelimitError,
|
||||
TTLCache,
|
||||
} from "enka.ts";
|
||||
import { ImageResponse } from "takumi-js/response";
|
||||
|
||||
import { generateBackground } from "@/assets/background";
|
||||
import { ConstsSvg } from "@/assets/consts";
|
||||
@@ -469,22 +469,23 @@ export function card(app: App) {
|
||||
|
||||
// #region Rendering
|
||||
const res = new ImageResponse(
|
||||
<div tw={`text-[${30.466 * (height / 1024)}px]`}>
|
||||
<div
|
||||
tw={`flex text-[${30.466 * (height / 1024)}px] font-[ShinShin]`}
|
||||
>
|
||||
<SubstatDisplay
|
||||
substat={rollSummary}
|
||||
element={avatar.Element}
|
||||
>
|
||||
<div
|
||||
tw={`relative text-white rounded-[.5em] overflow-hidden aspect-[1218/508] h-[${height}px]`}
|
||||
tw={`flex relative text-white rounded-[.5em] overflow-hidden aspect-[1218/508] h-[${height}px]`}
|
||||
>
|
||||
<div tw="aspect-[1218/508] h-full">
|
||||
<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"
|
||||
@@ -504,13 +505,13 @@ export function card(app: App) {
|
||||
}}
|
||||
/>
|
||||
{/* left side vignette */}
|
||||
<div tw="absolute top-0 left-0 bottom-0 right-0">
|
||||
<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.75em] opacity-80 flex items-center gap-[.7em] pl-[.4em] pt-[.5em]">
|
||||
<div tw="text-[0.77em] opacity-80 flex items-center gap-[.7em] pl-[.28em] pt-[.5em]">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
@@ -527,12 +528,12 @@ export function card(app: App) {
|
||||
</div>
|
||||
</div>
|
||||
{/* level */}
|
||||
<div tw="text-[105%] pt-[.2em]">
|
||||
Lv. <span tw="px-[.3em]">{charLvl}</span> /
|
||||
<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-[.3em]">
|
||||
<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]"
|
||||
@@ -546,9 +547,8 @@ export function card(app: App) {
|
||||
</svg>
|
||||
{char.fetterInfo?.expLevel ?? 0}
|
||||
</div>
|
||||
|
||||
{/* sep */}
|
||||
<div tw="grow" />
|
||||
<div tw="flex grow" />
|
||||
{/* constellation */}
|
||||
<div
|
||||
tw="flex align-start flex-col text-[1.12em]"
|
||||
@@ -558,7 +558,8 @@ export function card(app: App) {
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
margin: "-.5em 0 0em -.6em",
|
||||
display: "flex",
|
||||
margin: "-.55em 0 0em -.6em",
|
||||
}}
|
||||
>
|
||||
<ConstsSvg
|
||||
@@ -602,7 +603,7 @@ export function card(app: App) {
|
||||
const talentLevel =
|
||||
(char.skillLevelMap?.[key] ?? 0) + extra;
|
||||
return (
|
||||
<div tw="mt-[.6em] relative">
|
||||
<div tw="mt-[.6em] relative flex">
|
||||
<TalentSvg
|
||||
tw={`Talents ${avatar.Element} w-[3.6em] opacity-60 text-black mb-[.5em] -mt-[.25em]`}
|
||||
/>
|
||||
@@ -610,11 +611,11 @@ export function card(app: App) {
|
||||
key={key}
|
||||
src={src}
|
||||
alt={`Talent ${key}`}
|
||||
tw="w-[2.5em] absolute left-[.15em] top-[.15em] m-[.4em_0_0_.4em]"
|
||||
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={`${extra ? "bg-[#45deffcc]" : "bg-[#323232b3]"} pt-[5%] pb-[2%] text-[.8em] rounded-[1.4em]`}
|
||||
tw={`${extra ? "bg-[#45deffcc]" : "bg-[#323232b3]"} pt-[5%] pb-[2%] text-[.85em] rounded-[1.4em]`}
|
||||
>
|
||||
<span tw="px-[.6em]">{talentLevel}</span>
|
||||
</div>
|
||||
@@ -623,7 +624,7 @@ export function card(app: App) {
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div tw="mb-[-1em] ml-[-.3em] mt-[.3em] text-[.96em] opacity-80">
|
||||
<div tw="flex mb-[-1em] ml-[-.3em] mt-[.3em] text-[.96em] opacity-80">
|
||||
{data.uid}
|
||||
</div>
|
||||
</div>
|
||||
@@ -632,7 +633,7 @@ export function card(app: App) {
|
||||
{/* weapon */}
|
||||
<div tw="flex flex-start" className="Weapon">
|
||||
{/* display */}
|
||||
<div tw="w-[27%] leading-none shrink-0 min-h-[5.5em] relative">
|
||||
<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%]"
|
||||
@@ -655,7 +656,7 @@ export function card(app: App) {
|
||||
{/* caption */}
|
||||
<div tw="px-[5%] grow text-white self-center flex flex-col">
|
||||
<div
|
||||
tw="text-[108%] leading-[1.3]"
|
||||
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)",
|
||||
@@ -740,11 +741,11 @@ export function card(app: App) {
|
||||
</div>
|
||||
</div>
|
||||
{i < 3 && (
|
||||
<div tw="text-[.83em] opacity-70 absolute w-full -bottom-[.75em]">
|
||||
<div tw="flex text-[.83em] opacity-70 absolute w-full -bottom-[.75em]">
|
||||
<div tw="flex grow justify-end">
|
||||
<div>
|
||||
<div tw="flex">
|
||||
{Math.round(r.base)}
|
||||
<div tw="text-[#82ff9a] pl-1">
|
||||
<div tw="flex text-[#82ff9a] pl-1">
|
||||
+{Math.round(r.delta)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -770,7 +771,7 @@ export function card(app: App) {
|
||||
<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="bg-[#00000030] rounded-[.2em] justify-center items-center w-[2em] ml-[.5em] shrink-0 pt-[.2em]">
|
||||
<div tw="flex bg-[#00000030] rounded-[.2em] justify-center items-center w-[2em] ml-[.5em] shrink-0 pt-[.2em]">
|
||||
{s.count}
|
||||
</div>
|
||||
</div>
|
||||
@@ -842,7 +843,7 @@ export function card(app: App) {
|
||||
}}
|
||||
>
|
||||
{Array(p.Position).fill(
|
||||
<div tw="bg-[#fff8] w-1 h-1 mr-[3px] mb-[3px] rounded-full" />,
|
||||
<div tw="flex bg-[#fff8] w-1 h-1 mr-[3px] mb-[3px] rounded-full" />,
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
@@ -852,7 +853,7 @@ export function card(app: App) {
|
||||
icon={s.appendPropId}
|
||||
tw="h-[1.1em] w-[1.1em]"
|
||||
/>
|
||||
<div tw="text-[1.05em]">
|
||||
<div tw="flex text-[1.05em]">
|
||||
+
|
||||
{PercentageFightProp.includes(
|
||||
s.appendPropId as (typeof PercentageFightProp)[number],
|
||||
@@ -865,7 +866,7 @@ export function card(app: App) {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div tw="h-[18%] bg-[#0000004f] rounded-[.3em] opacity-20" />
|
||||
<div tw="flex h-[18%] bg-[#0000004f] rounded-[.3em] opacity-20" />
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
@@ -1056,7 +1057,7 @@ function SubstatDisplay({
|
||||
return (
|
||||
<div tw="flex flex-col-reverse">
|
||||
<div
|
||||
tw="h-[2.3em] bg-current relative -top-[.5em] pt-[.5em] -mb-[.5em] rounded-b-[.5em]"
|
||||
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">
|
||||
@@ -1067,7 +1068,7 @@ function SubstatDisplay({
|
||||
<div tw="ml-[.2em] mb-[.1em] text-[.75em] flex flex-col items-center font-[Open_Sans]">
|
||||
{s.efficiency}
|
||||
{/* hr */}
|
||||
<div tw="w-full h-[1px] bg-white"></div>
|
||||
<div tw="flex w-full h-[1px] bg-white"></div>
|
||||
{s.level}
|
||||
</div>
|
||||
<EnkaIcon icon={s.id} tw="h-[1em]" />
|
||||
|
||||
+1
-1
@@ -1,8 +1,8 @@
|
||||
import { feature } from "bun:bundle";
|
||||
|
||||
import ImageResponse from "@takumi-rs/image-response";
|
||||
import type { MaybePromise } from "bun";
|
||||
import type { ReactNode } from "react";
|
||||
import ImageResponse from "takumi-js/response";
|
||||
|
||||
import { font, iconFont, sansFont } from "@/assets/fonts";
|
||||
import { createLogger } from "@/lib/logger";
|
||||
|
||||
Reference in New Issue
Block a user