Skip to content

Commit

Permalink
chore: prettier
Browse files Browse the repository at this point in the history
  • Loading branch information
@twlite
twlite committed Dec 31, 2023
1 parent 2e350ea commit 4db1dde
Show file tree
Hide file tree
Showing 7 changed files with 86 additions and 262 deletions.
98 changes: 20 additions & 78 deletions packages/canvacord/src/components/LeaderboardBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,7 @@ export interface LeaderboardProps {

const Crown = () => {
return (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M16.5 17.5H3.5C3.225 17.5 3 17.7813 3 18.125V19.375C3 19.7188 3.225 20 3.5 20H16.5C16.775 20 17 19.7188 17 19.375V18.125C17 17.7813 16.775 17.5 16.5 17.5ZM18.5 5C17.6719 5 17 5.83984 17 6.875C17 7.15234 17.05 7.41016 17.1375 7.64844L14.875 9.34375C14.3937 9.70313 13.7719 9.5 13.4937 8.89063L10.9469 3.32031C11.2812 2.97656 11.5 2.46094 11.5 1.875C11.5 0.839844 10.8281 0 10 0C9.17188 0 8.5 0.839844 8.5 1.875C8.5 2.46094 8.71875 2.97656 9.05313 3.32031L6.50625 8.89063C6.22812 9.5 5.60312 9.70313 5.125 9.34375L2.86562 7.64844C2.95 7.41406 3.00312 7.15234 3.00312 6.875C3.00312 5.83984 2.33125 5 1.50312 5C0.675 5 0 5.83984 0 6.875C0 7.91016 0.671875 8.75 1.5 8.75C1.58125 8.75 1.6625 8.73438 1.74063 8.71875L4 16.25H16L18.2594 8.71875C18.3375 8.73438 18.4188 8.75 18.5 8.75C19.3281 8.75 20 7.91016 20 6.875C20 5.83984 19.3281 5 18.5 5Z"
fill="#FFAA00"
Expand Down Expand Up @@ -197,49 +191,29 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
headerImg = await loadImage(options.header.image);
}

const winners = [
options.players[1],
options.players[0],
options.players[2],
].filter(Boolean);
const winners = [options.players[1], options.players[0], options.players[2]].filter(Boolean);

return (
<div className="h-full w-full flex relative">
{background && (
<img
src={background.toDataURL()}
className="absolute top-0 left-0 h-full w-full"
/>
)}
{background && <img src={background.toDataURL()} className="absolute top-0 left-0 h-full w-full" />}
<div className="py-[30px] flex flex-col items-center w-full">
{options.header && headerImg ? (
<div className="flex items-center justify-center flex-col w-full">
<img
src={headerImg.toDataURL()}
className="rounded-full w-16 h-w-16"
/>
<h1 className="text-white text-xl font-extrabold m-0 mt-2">
{options.header.title}
</h1>
<h2 className="text-white text-sm font-thin m-0">
{options.header.subtitle}
</h2>
<img src={headerImg.toDataURL()} className="rounded-full w-16 h-w-16" />
<h1 className="text-white text-xl font-extrabold m-0 mt-2">{options.header.title}</h1>
<h2 className="text-white text-sm font-thin m-0">{options.header.subtitle}</h2>
</div>
) : null}
<div
className={StyleSheet.cn(
"flex flex-row w-[90%] justify-center items-center mt-16",
winners.length ? "mt-24" : ""
winners.length ? "mt-24" : "",
)}
>
{await Promise.all(winners.map((winner) => this.renderTop(winner)))}
</div>
{this.renderPlayers(
await Promise.all(
options.players
.filter((f) => !winners.includes(f))
.map((m) => this.renderPlayer(m))
)
await Promise.all(options.players.filter((f) => !winners.includes(f)).map((m) => this.renderPlayer(m))),
)}
</div>
</div>
Expand All @@ -250,35 +224,23 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
* Render players ui on the canvas
*/
public renderPlayers(players: JSX.Element[]) {
return (
<div className="mt-4 flex flex-col items-center justify-center w-[95%]">
{players}
</div>
);
return <div className="mt-4 flex flex-col items-center justify-center w-[95%]">{players}</div>;
}

/**
* Render top players ui on the canvas
*/
public async renderTop({
avatar,
displayName,
level,
rank,
username,
xp,
}: LeaderboardProps["players"][number]) {
public async renderTop({ avatar, displayName, level, rank, username, xp }: LeaderboardProps["players"][number]) {
const image = await loadImage(avatar);
const currentColor =
DefaultColors[rank === 1 ? "Yellow" : rank === 2 ? "Blue" : "Green"];
const currentColor = DefaultColors[rank === 1 ? "Yellow" : rank === 2 ? "Blue" : "Green"];
const crown = rank === 1;

return (
<div
className={StyleSheet.cn(
"relative flex flex-col items-center justify-center p-4 bg-[#1E2237CC] w-[35%] rounded-md",
crown ? "-mt-4 bg-[#252A40CC] rounded-b-none h-[113%]" : "",
rank === 2 ? "rounded-br-none" : rank === 3 ? "rounded-bl-none" : ""
rank === 2 ? "rounded-br-none" : rank === 3 ? "rounded-bl-none" : "",
)}
>
{crown && (
Expand All @@ -289,9 +251,7 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
<div className="flex items-center justify-center flex-col absolute -top-10">
<img
src={image.toDataURL()}
className={StyleSheet.cn(
`border-[3px] border-[${currentColor}] rounded-full h-18 w-18`
)}
className={StyleSheet.cn(`border-[3px] border-[${currentColor}] rounded-full h-18 w-18`)}
/>
<div
className={`flex items-center justify-center text-xs p-2 text-center font-bold h-3 w-3 rounded-full text-white absolute bg-[${currentColor}] -bottom-[0.4rem]`}
Expand All @@ -300,16 +260,13 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
</div>
</div>
<div className="flex flex-col items-center justify-center mt-5">
<h1 className="text-white text-base font-extrabold m-0">
{displayName}
</h1>
<h1 className="text-white text-base font-extrabold m-0">{displayName}</h1>
<h2 className="text-white text-xs font-thin m-0 mb-2">@{username}</h2>
<h4 className={`text-sm text-[${currentColor}] m-0`}>
{this.options.get("text").level} {level}
</h4>
<h4 className={`text-sm text-[${currentColor}] m-0`}>
{fixed(xp, this.options.get("abbreviate"))}{" "}
{this.options.get("text").xp}
{fixed(xp, this.options.get("abbreviate"))} {this.options.get("text").xp}
</h4>
</div>
</div>
Expand All @@ -319,33 +276,19 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
/**
* Render player ui on the canvas
*/
public async renderPlayer({
avatar,
displayName,
level,
rank,
username,
xp,
}: LeaderboardProps["players"][number]) {
public async renderPlayer({ avatar, displayName, level, rank, username, xp }: LeaderboardProps["players"][number]) {
const image = await loadImage(avatar);

return (
<div className="bg-[#252A40BB] p-4 rounded-md flex flex-row justify-between items-center w-full mb-2">
<div className="flex flex-row">
<div className="flex flex-col items-center justify-center mr-2">
<h1 className="text-white font-extrabold text-xl m-0">{rank}</h1>
<h4 className="text-white font-medium text-sm m-0">
{this.options.get("text").rank}
</h4>
<h4 className="text-white font-medium text-sm m-0">{this.options.get("text").rank}</h4>
</div>
<img
src={image.toDataURL()}
className="rounded-full h-14 w-14 mr-2"
/>
<img src={image.toDataURL()} className="rounded-full h-14 w-14 mr-2" />
<div className="flex flex-col items-start justify-center">
<h1 className="text-white font-extrabold text-xl m-0">
{displayName}
</h1>
<h1 className="text-white font-extrabold text-xl m-0">{displayName}</h1>
<h4 className="text-white font-medium text-sm m-0">@{username}</h4>
</div>
</div>
Expand All @@ -354,8 +297,7 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
{this.options.get("text").level} {level}
</h4>
<h4 className="text-white font-medium text-sm m-0">
{fixed(xp, this.options.get("abbreviate"))}{" "}
{this.options.get("text").xp}
{fixed(xp, this.options.get("abbreviate"))} {this.options.get("text").xp}
</h4>
</div>
</div>
Expand Down
23 changes: 6 additions & 17 deletions packages/canvacord/src/components/RankCardBuilder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,12 @@ import { FontFactory } from "../assets";
import { ImageSource, JSX, loadImage } from "../helpers";
import { getDefaultFont } from "../helpers/utils";
import { Builder } from "../templates/Builder";
import {
NeoClassicalCard,
RankCardProps,
RankCardUserStatus,
StatusData,
} from "./rank-card/NeoClassicalCard";
import { NeoClassicalCard, RankCardProps, RankCardUserStatus, StatusData } from "./rank-card/NeoClassicalCard";

/**
* The rank card builder props.
*/
interface RankCardBuilderProps
extends Omit<RankCardProps, "avatar" | "backgroundColor"> {
interface RankCardBuilderProps extends Omit<RankCardProps, "avatar" | "backgroundColor"> {
avatar: ImageSource;
background: ImageSource;
backgroundCrop?: Partial<{
Expand Down Expand Up @@ -82,8 +76,7 @@ export class RankCardBuilder extends Builder<RankCardBuilderProps> {
texts: {},
username: null,
fonts: {},
calculateProgress: (currentXP, requiredXP) =>
((currentXP ?? 0) / (requiredXP ?? 0)) * 100,
calculateProgress: (currentXP, requiredXP) => ((currentXP ?? 0) / (requiredXP ?? 0)) * 100,
});
}

Expand Down Expand Up @@ -197,9 +190,7 @@ export class RankCardBuilder extends Builder<RankCardBuilderProps> {
/**
* Set background crop for this rank card.
*/
public setBackgroundCrop(
pos: Partial<RankCardBuilderProps["backgroundCrop"]>
) {
public setBackgroundCrop(pos: Partial<RankCardBuilderProps["backgroundCrop"]>) {
this.options.set("backgroundCrop", pos);
return this;
}
Expand Down Expand Up @@ -244,16 +235,14 @@ export class RankCardBuilder extends Builder<RankCardBuilderProps> {
const width = options.backgroundCrop.width ?? this.width;
const height = options.backgroundCrop.height ?? this.height;

const buffer = await new Transformer(e.data)
.crop(x, y, width, height)
.png();
const buffer = await new Transformer(e.data).crop(x, y, width, height).png();

e.data = buffer;
}

return `url(${e.toDataURL()})`;
},
() => options.background as string
() => options.background as string,
);
}

Expand Down
Loading

0 comments on commit 4db1dde

Please sign in to comment.