+ {background && })
}
+
+ );
+ }
+
+ public renderPlayers(players: JSX.Element[]) {
+ return
+ {options.header && headerImg ? (
+
+
+ })
+
+ ) : null}
+ {options.header.title}
+{options.header.subtitle}
+
+ {await Promise.all(winners.map((winner) => this.renderTop(winner)))}
+
+ {this.renderPlayers(
+ await Promise.all(options.players.filter((f) => !winners.includes(f)).map((m) => this.renderPlayer(m)))
+ )}
+ {players}
;
+ }
+
+ 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 crown = rank === 1;
+
+ return (
+
+ {crown && (
+
+ );
+ }
+
+ public async renderPlayer({ avatar, displayName, level, rank, username, xp }: LeaderboardProps['players'][number]) {
+ const image = await loadImage(avatar);
+
+ return (
+
+
+ )}
+
+ })
+
+
+ {rank}
+
+
+
+ {displayName}
+@{username}
+Level {level}
+{fixed(xp)} XP
+
+
+ );
+ }
+}
diff --git a/src/components/RankCardBuilder.tsx b/src/components/RankCardBuilder.tsx
new file mode 100644
index 00000000..3ba89500
--- /dev/null
+++ b/src/components/RankCardBuilder.tsx
@@ -0,0 +1,329 @@
+import { Font, FontFactory } from '../assets';
+import { CSSPropertiesLike, ImageSource, JSX, loadImage, StyleSheet } from '../helpers';
+import { fixed, getDefaultFont } from '../helpers/utils';
+import { Builder } from '../templates/Builder';
+
+type StatusType = 'online' | 'idle' | 'dnd' | 'invisible';
+
+interface RankCardBuilderProps {
+ avatar: ImageSource | null;
+ style: CSSPropertiesLike | null;
+ fonts: Partial<{
+ username: string;
+ progress: string;
+ stats: string;
+ }>;
+ status: StatusType;
+ currentXP: number;
+ requiredXP: number;
+ username: string;
+ displayName: string;
+ discriminator: string;
+ level: number;
+ rank: number;
+ background: ImageSource;
+ tw: {
+ username: string;
+ discriminator: string;
+ displayName: string;
+ level: string;
+ rank: string;
+ xp: string;
+ progress: {
+ track: string;
+ thumb: string;
+ };
+ overlay: string;
+ percentage: string;
+ avatar: string;
+ status: string;
+ };
+ renders: {
+ avatar: boolean;
+ background: boolean;
+ level: boolean;
+ rank: boolean;
+ status: boolean;
+ username: boolean;
+ displayName: boolean;
+ discriminator: boolean;
+ progress: boolean;
+ xp: boolean;
+ progressbar: boolean;
+ constants: {
+ rank: string;
+ level: string;
+ xp: string;
+ statusColors: {
+ LightGray: string;
+ Gray: string;
+ DarkGray: string;
+ White: string;
+ Green: string;
+ Yellow: string;
+ Red: string;
+ Blue: string;
+ };
+ };
+ };
+}
+
+export class RankCardBuilder extends Builder
+
+
+
+
+ {rank}
+Rank
+
+
+ {displayName}
+@{username}
+
+
+ Level {level}
+{fixed(xp)} XP
+
+
+ );
+ }
+}
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 00000000..5ad8a64e
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './LeaderboardBuilder';
+export * from './RankCardBuilder';
diff --git a/src/fabric/ContainerNode.tsx b/src/fabric/ContainerNode.tsx
deleted file mode 100644
index 54bd4d78..00000000
--- a/src/fabric/ContainerNode.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Node, NodeProps } from './Node';
-import { Element, JSX, render } from '../helpers';
-
-export class ContainerNode extends Node {
- public toElement(): Element {
- return (
-
+
+
+ {config.avatar ? (
+ <>
+ })
+ {config.status ? (
+
+ ) : null}
+
+ ) : null}
+
+
+
+
+
+ {config.progressbar && (
+
+ {config.displayName && (
+
+ {config.progress && + {displayName} +
+ )} + {username && ( ++ @{username} +
+ )} +{percentage}%
} +
+
+
+ )}
+
+ {config.level && (
+
+ + {config.constants.level}: + {level} +
+ )} + {config.xp && ( ++ {config.constants.xp}: + + {fixed(xp)}/{fixed(requiredXP)} + +
+ )} + {config.rank && ( ++ {config.constants.rank}: + #{rank} +
+ )} +
- {render(this.children as unknown[])}
-
- );
- }
-}
-
-export function Container(props: NodeProps) {
- const node = new ContainerNode(props);
-
- return node.toElement();
-}
diff --git a/src/fabric/ImageNode.tsx b/src/fabric/ImageNode.tsx
deleted file mode 100644
index d9d3c874..00000000
--- a/src/fabric/ImageNode.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Node, NodeProps } from './Node';
-import { JSX } from '../helpers';
-import { CanvacordImage } from '../helpers/image';
-
-export interface ImageNodeProps {
- src: CanvacordImage;
- alt?: string;
- width?: number;
- height?: number;
-}
-
-export class ImageNode extends Node- {this.getProperty('data')} -
- ); - } -} - -export function Text(props: NodeProps- {this.#data.username} - - {this.#data.discriminator ? `#${this.#data.discriminator}` : ''} - -
-
-
- );
- }
-
- public async render() {
- switch (this.#data.variant) {
- case 'modern':
- return this.renderModern();
- default:
- return this.renderClassic();
- }
- }
-}
diff --git a/src/templates/index.ts b/src/templates/index.ts
index 10a88707..b4fa2dd5 100644
--- a/src/templates/index.ts
+++ b/src/templates/index.ts
@@ -1,2 +1,2 @@
export * from './Builder';
-export * from './RankCardBuilder';
+export * from './BuilderOptionsManager';
diff --git a/test/bg.png b/test/bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..dde4650c16fb38022fc072b86e9679bb93f7a2cd
GIT binary patch
literal 1975577
zcmaf)S5y<<_x1rP0wN$yML
-
-
- {config.avatar ? (
- <>
-
- {config.status ? (
-
- ) : null}
-
- ) : null}
-
-
-
-
-
- {config.progressbar && (
-
- {config.displayName && (
-
- {config.progress && - {displayName} -
- )} - {username && ( -- @{username} -
- )} -{percentage}%
} -
-
-
- )}
-
- {config.level && (
-
-