Skip to content

Commit 4db1dde

Browse files
twlitetwlite
committed
chore: prettier
1 parent 2e350ea commit 4db1dde

File tree

7 files changed

+86
-262
lines changed

7 files changed

+86
-262
lines changed

‎packages/canvacord/src/components/LeaderboardBuilder.tsx

+20-78
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,7 @@ export interface LeaderboardProps {
8080

8181
const Crown = () => {
8282
return (
83-
<svg
84-
width="20"
85-
height="20"
86-
viewBox="0 0 20 20"
87-
fill="none"
88-
xmlns="http://www.w3.org/2000/svg"
89-
>
83+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
9084
<path
9185
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"
9286
fill="#FFAA00"
@@ -197,49 +191,29 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
197191
headerImg = await loadImage(options.header.image);
198192
}
199193

200-
const winners = [
201-
options.players[1],
202-
options.players[0],
203-
options.players[2],
204-
].filter(Boolean);
194+
const winners = [options.players[1], options.players[0], options.players[2]].filter(Boolean);
205195

206196
return (
207197
<div className="h-full w-full flex relative">
208-
{background && (
209-
<img
210-
src={background.toDataURL()}
211-
className="absolute top-0 left-0 h-full w-full"
212-
/>
213-
)}
198+
{background && <img src={background.toDataURL()} className="absolute top-0 left-0 h-full w-full" />}
214199
<div className="py-[30px] flex flex-col items-center w-full">
215200
{options.header && headerImg ? (
216201
<div className="flex items-center justify-center flex-col w-full">
217-
<img
218-
src={headerImg.toDataURL()}
219-
className="rounded-full w-16 h-w-16"
220-
/>
221-
<h1 className="text-white text-xl font-extrabold m-0 mt-2">
222-
{options.header.title}
223-
</h1>
224-
<h2 className="text-white text-sm font-thin m-0">
225-
{options.header.subtitle}
226-
</h2>
202+
<img src={headerImg.toDataURL()} className="rounded-full w-16 h-w-16" />
203+
<h1 className="text-white text-xl font-extrabold m-0 mt-2">{options.header.title}</h1>
204+
<h2 className="text-white text-sm font-thin m-0">{options.header.subtitle}</h2>
227205
</div>
228206
) : null}
229207
<div
230208
className={StyleSheet.cn(
231209
"flex flex-row w-[90%] justify-center items-center mt-16",
232-
winners.length ? "mt-24" : ""
210+
winners.length ? "mt-24" : "",
233211
)}
234212
>
235213
{await Promise.all(winners.map((winner) => this.renderTop(winner)))}
236214
</div>
237215
{this.renderPlayers(
238-
await Promise.all(
239-
options.players
240-
.filter((f) => !winners.includes(f))
241-
.map((m) => this.renderPlayer(m))
242-
)
216+
await Promise.all(options.players.filter((f) => !winners.includes(f)).map((m) => this.renderPlayer(m))),
243217
)}
244218
</div>
245219
</div>
@@ -250,35 +224,23 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
250224
* Render players ui on the canvas
251225
*/
252226
public renderPlayers(players: JSX.Element[]) {
253-
return (
254-
<div className="mt-4 flex flex-col items-center justify-center w-[95%]">
255-
{players}
256-
</div>
257-
);
227+
return <div className="mt-4 flex flex-col items-center justify-center w-[95%]">{players}</div>;
258228
}
259229

260230
/**
261231
* Render top players ui on the canvas
262232
*/
263-
public async renderTop({
264-
avatar,
265-
displayName,
266-
level,
267-
rank,
268-
username,
269-
xp,
270-
}: LeaderboardProps["players"][number]) {
233+
public async renderTop({ avatar, displayName, level, rank, username, xp }: LeaderboardProps["players"][number]) {
271234
const image = await loadImage(avatar);
272-
const currentColor =
273-
DefaultColors[rank === 1 ? "Yellow" : rank === 2 ? "Blue" : "Green"];
235+
const currentColor = DefaultColors[rank === 1 ? "Yellow" : rank === 2 ? "Blue" : "Green"];
274236
const crown = rank === 1;
275237

276238
return (
277239
<div
278240
className={StyleSheet.cn(
279241
"relative flex flex-col items-center justify-center p-4 bg-[#1E2237CC] w-[35%] rounded-md",
280242
crown ? "-mt-4 bg-[#252A40CC] rounded-b-none h-[113%]" : "",
281-
rank === 2 ? "rounded-br-none" : rank === 3 ? "rounded-bl-none" : ""
243+
rank === 2 ? "rounded-br-none" : rank === 3 ? "rounded-bl-none" : "",
282244
)}
283245
>
284246
{crown && (
@@ -289,9 +251,7 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
289251
<div className="flex items-center justify-center flex-col absolute -top-10">
290252
<img
291253
src={image.toDataURL()}
292-
className={StyleSheet.cn(
293-
`border-[3px] border-[${currentColor}] rounded-full h-18 w-18`
294-
)}
254+
className={StyleSheet.cn(`border-[3px] border-[${currentColor}] rounded-full h-18 w-18`)}
295255
/>
296256
<div
297257
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]`}
@@ -300,16 +260,13 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
300260
</div>
301261
</div>
302262
<div className="flex flex-col items-center justify-center mt-5">
303-
<h1 className="text-white text-base font-extrabold m-0">
304-
{displayName}
305-
</h1>
263+
<h1 className="text-white text-base font-extrabold m-0">{displayName}</h1>
306264
<h2 className="text-white text-xs font-thin m-0 mb-2">@{username}</h2>
307265
<h4 className={`text-sm text-[${currentColor}] m-0`}>
308266
{this.options.get("text").level} {level}
309267
</h4>
310268
<h4 className={`text-sm text-[${currentColor}] m-0`}>
311-
{fixed(xp, this.options.get("abbreviate"))}{" "}
312-
{this.options.get("text").xp}
269+
{fixed(xp, this.options.get("abbreviate"))} {this.options.get("text").xp}
313270
</h4>
314271
</div>
315272
</div>
@@ -319,33 +276,19 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
319276
/**
320277
* Render player ui on the canvas
321278
*/
322-
public async renderPlayer({
323-
avatar,
324-
displayName,
325-
level,
326-
rank,
327-
username,
328-
xp,
329-
}: LeaderboardProps["players"][number]) {
279+
public async renderPlayer({ avatar, displayName, level, rank, username, xp }: LeaderboardProps["players"][number]) {
330280
const image = await loadImage(avatar);
331281

332282
return (
333283
<div className="bg-[#252A40BB] p-4 rounded-md flex flex-row justify-between items-center w-full mb-2">
334284
<div className="flex flex-row">
335285
<div className="flex flex-col items-center justify-center mr-2">
336286
<h1 className="text-white font-extrabold text-xl m-0">{rank}</h1>
337-
<h4 className="text-white font-medium text-sm m-0">
338-
{this.options.get("text").rank}
339-
</h4>
287+
<h4 className="text-white font-medium text-sm m-0">{this.options.get("text").rank}</h4>
340288
</div>
341-
<img
342-
src={image.toDataURL()}
343-
className="rounded-full h-14 w-14 mr-2"
344-
/>
289+
<img src={image.toDataURL()} className="rounded-full h-14 w-14 mr-2" />
345290
<div className="flex flex-col items-start justify-center">
346-
<h1 className="text-white font-extrabold text-xl m-0">
347-
{displayName}
348-
</h1>
291+
<h1 className="text-white font-extrabold text-xl m-0">{displayName}</h1>
349292
<h4 className="text-white font-medium text-sm m-0">@{username}</h4>
350293
</div>
351294
</div>
@@ -354,8 +297,7 @@ export class LeaderboardBuilder extends Builder<LeaderboardProps> {
354297
{this.options.get("text").level} {level}
355298
</h4>
356299
<h4 className="text-white font-medium text-sm m-0">
357-
{fixed(xp, this.options.get("abbreviate"))}{" "}
358-
{this.options.get("text").xp}
300+
{fixed(xp, this.options.get("abbreviate"))} {this.options.get("text").xp}
359301
</h4>
360302
</div>
361303
</div>

‎packages/canvacord/src/components/RankCardBuilder.tsx

+6-17
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,12 @@ import { FontFactory } from "../assets";
33
import { ImageSource, JSX, loadImage } from "../helpers";
44
import { getDefaultFont } from "../helpers/utils";
55
import { Builder } from "../templates/Builder";
6-
import {
7-
NeoClassicalCard,
8-
RankCardProps,
9-
RankCardUserStatus,
10-
StatusData,
11-
} from "./rank-card/NeoClassicalCard";
6+
import { NeoClassicalCard, RankCardProps, RankCardUserStatus, StatusData } from "./rank-card/NeoClassicalCard";
127

138
/**
149
* The rank card builder props.
1510
*/
16-
interface RankCardBuilderProps
17-
extends Omit<RankCardProps, "avatar" | "backgroundColor"> {
11+
interface RankCardBuilderProps extends Omit<RankCardProps, "avatar" | "backgroundColor"> {
1812
avatar: ImageSource;
1913
background: ImageSource;
2014
backgroundCrop?: Partial<{
@@ -82,8 +76,7 @@ export class RankCardBuilder extends Builder<RankCardBuilderProps> {
8276
texts: {},
8377
username: null,
8478
fonts: {},
85-
calculateProgress: (currentXP, requiredXP) =>
86-
((currentXP ?? 0) / (requiredXP ?? 0)) * 100,
79+
calculateProgress: (currentXP, requiredXP) => ((currentXP ?? 0) / (requiredXP ?? 0)) * 100,
8780
});
8881
}
8982

@@ -197,9 +190,7 @@ export class RankCardBuilder extends Builder<RankCardBuilderProps> {
197190
/**
198191
* Set background crop for this rank card.
199192
*/
200-
public setBackgroundCrop(
201-
pos: Partial<RankCardBuilderProps["backgroundCrop"]>
202-
) {
193+
public setBackgroundCrop(pos: Partial<RankCardBuilderProps["backgroundCrop"]>) {
203194
this.options.set("backgroundCrop", pos);
204195
return this;
205196
}
@@ -244,16 +235,14 @@ export class RankCardBuilder extends Builder<RankCardBuilderProps> {
244235
const width = options.backgroundCrop.width ?? this.width;
245236
const height = options.backgroundCrop.height ?? this.height;
246237

247-
const buffer = await new Transformer(e.data)
248-
.crop(x, y, width, height)
249-
.png();
238+
const buffer = await new Transformer(e.data).crop(x, y, width, height).png();
250239

251240
e.data = buffer;
252241
}
253242

254243
return `url(${e.toDataURL()})`;
255244
},
256-
() => options.background as string
245+
() => options.background as string,
257246
);
258247
}
259248

0 commit comments

Comments
 (0)