+ {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 00000000..dde4650c
Binary files /dev/null and b/test/bg.png differ
diff --git a/test/index.ts b/test/index.ts
index 7b3e58c3..b98c2862 100644
--- a/test/index.ts
+++ b/test/index.ts
@@ -4,7 +4,8 @@ import { manropeBold } from './common';
async function main() {
const card = new RankCardBuilder()
- .setUsername('@wumpus')
+ .setUsername('wumpus')
+ .setDisplayName('Wumpus')
.setDiscriminator('1234')
.setAvatar('https://cdn.discordapp.com/embed/avatars/0.png?size=256')
.setCurrentXP(300)
@@ -18,9 +19,13 @@ async function main() {
username: manropeBold.name
});
- card.build().then((data) => {
- writeFileSync(`${__dirname}/normal/rankCard.png`, data);
- });
+ card
+ .build({
+ format: 'png'
+ })
+ .then((data) => {
+ writeFileSync(`${__dirname}/normal/rankCard.png`, data);
+ });
card
.build({
diff --git a/test/leaderboard.png b/test/leaderboard.png
new file mode 100644
index 00000000..4c1a6f03
Binary files /dev/null and b/test/leaderboard.png differ
diff --git a/test/leaderboard.svg b/test/leaderboard.svg
new file mode 100644
index 00000000..9f5ef5a8
--- /dev/null
+++ b/test/leaderboard.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/test/leaderboard.ts b/test/leaderboard.ts
new file mode 100644
index 00000000..974d0980
--- /dev/null
+++ b/test/leaderboard.ts
@@ -0,0 +1,104 @@
+import { Font, LeaderboardBuilder } from '../src';
+import { writeFileSync } from 'fs';
+
+Font.loadDefault();
+
+const lb = new LeaderboardBuilder()
+ .setHeader({
+ title: 'NeplexLabs',
+ image: 'https://github.com/neplextech.png',
+ subtitle: '3258 members'
+ })
+ .setPlayers([
+ {
+ avatar: 'https://github.com/twlite.png',
+ username: 'twlite',
+ displayName: 'Archaeopteryx',
+ level: 32,
+ xp: 2420,
+ rank: 1
+ },
+ {
+ avatar: 'https://github.com/notunderctrl.png',
+ username: 'avrajs',
+ displayName: 'Avraj',
+ level: 30,
+ xp: 2390,
+ rank: 2
+ },
+ {
+ avatar: 'https://github.com/insypher.png',
+ username: 'insypher01',
+ displayName: 'insypher',
+ level: 29,
+ xp: 2280,
+ rank: 3
+ },
+ {
+ avatar: 'https://github.com/Luna-devv.png',
+ username: 'mwlica',
+ displayName: 'Luna',
+ level: 27,
+ xp: 2280,
+ rank: 4
+ },
+ {
+ avatar: 'https://github.com/insypher.png',
+ username: 'com6235',
+ displayName: 'CatGPT',
+ level: 24,
+ xp: 2280,
+ rank: 5
+ },
+ {
+ avatar: 'https://github.com/insypher.png',
+ username: 'talyzman',
+ displayName: 'Talisman',
+ level: 21,
+ xp: 2280,
+ rank: 6
+ },
+ {
+ avatar: 'https://github.com/insypher.png',
+ username: 'madaleine',
+ displayName: 'Madaleine Sakurai',
+ level: 20,
+ xp: 2280,
+ rank: 7
+ },
+ {
+ avatar: 'https://github.com/insypher.png',
+ username: 'tempest0006',
+ displayName: 'Tempest',
+ level: 17,
+ xp: 2280,
+ rank: 8
+ },
+ {
+ avatar: 'https://github.com/insypher.png',
+ username: 'rinceri',
+ displayName: 'bottle',
+ level: 16,
+ xp: 2280,
+ rank: 9
+ },
+ {
+ avatar: 'https://cdn.discordapp.com/embed/avatars/0.png',
+ username: 'mrcrack_',
+ displayName: 'MrCRACK',
+ level: 14,
+ xp: 2280,
+ rank: 10
+ }
+ ])
+ .setBackground(`${__dirname}/bg.png`);
+
+lb.build({
+ format: 'svg'
+}).then((res) => {
+ writeFileSync(`${__dirname}/leaderboard.svg`, res);
+});
+
+lb.build().then((res) => {
+ writeFileSync(`${__dirname}/leaderboard.png`, res);
+});
diff --git a/test/normal/leaderboard.png b/test/normal/leaderboard.png
new file mode 100644
index 00000000..83adfd09
Binary files /dev/null and b/test/normal/leaderboard.png differ
diff --git a/test/normal/rankCard.jpg b/test/normal/rankCard.jpg
new file mode 100644
index 00000000..187d3817
Binary files /dev/null and b/test/normal/rankCard.jpg differ
diff --git a/test/normal/rankCard.png b/test/normal/rankCard.png
index c4166213..8c9ed186 100644
Binary files a/test/normal/rankCard.png and b/test/normal/rankCard.png differ
diff --git a/test/normal/rankCard.svg b/test/normal/rankCard.svg
index 8d5b27ff..67daaf2a 100644
--- a/test/normal/rankCard.svg
+++ b/test/normal/rankCard.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 0db4430c..74116f23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -721,6 +721,135 @@ __metadata:
languageName: node
linkType: hard
+"@resvg/resvg-js-android-arm-eabi@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-android-arm-eabi@npm:2.6.0"
+ conditions: os=android & cpu=arm
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-android-arm64@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-android-arm64@npm:2.6.0"
+ conditions: os=android & cpu=arm64
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-darwin-arm64@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-darwin-arm64@npm:2.6.0"
+ conditions: os=darwin & cpu=arm64
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-darwin-x64@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-darwin-x64@npm:2.6.0"
+ conditions: os=darwin & cpu=x64
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-linux-arm-gnueabihf@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-linux-arm-gnueabihf@npm:2.6.0"
+ conditions: os=linux & cpu=arm
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-linux-arm64-gnu@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-linux-arm64-gnu@npm:2.6.0"
+ conditions: os=linux & cpu=arm64 & libc=glibc
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-linux-arm64-musl@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-linux-arm64-musl@npm:2.6.0"
+ conditions: os=linux & cpu=arm64 & libc=musl
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-linux-x64-gnu@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-linux-x64-gnu@npm:2.6.0"
+ conditions: os=linux & cpu=x64 & libc=glibc
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-linux-x64-musl@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-linux-x64-musl@npm:2.6.0"
+ conditions: os=linux & cpu=x64 & libc=musl
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-win32-arm64-msvc@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-win32-arm64-msvc@npm:2.6.0"
+ conditions: os=win32 & cpu=arm64
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-win32-ia32-msvc@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-win32-ia32-msvc@npm:2.6.0"
+ conditions: os=win32 & cpu=ia32
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js-win32-x64-msvc@npm:2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js-win32-x64-msvc@npm:2.6.0"
+ conditions: os=win32 & cpu=x64
+ languageName: node
+ linkType: hard
+
+"@resvg/resvg-js@npm:^2.6.0":
+ version: 2.6.0
+ resolution: "@resvg/resvg-js@npm:2.6.0"
+ dependencies:
+ "@resvg/resvg-js-android-arm-eabi": 2.6.0
+ "@resvg/resvg-js-android-arm64": 2.6.0
+ "@resvg/resvg-js-darwin-arm64": 2.6.0
+ "@resvg/resvg-js-darwin-x64": 2.6.0
+ "@resvg/resvg-js-linux-arm-gnueabihf": 2.6.0
+ "@resvg/resvg-js-linux-arm64-gnu": 2.6.0
+ "@resvg/resvg-js-linux-arm64-musl": 2.6.0
+ "@resvg/resvg-js-linux-x64-gnu": 2.6.0
+ "@resvg/resvg-js-linux-x64-musl": 2.6.0
+ "@resvg/resvg-js-win32-arm64-msvc": 2.6.0
+ "@resvg/resvg-js-win32-ia32-msvc": 2.6.0
+ "@resvg/resvg-js-win32-x64-msvc": 2.6.0
+ dependenciesMeta:
+ "@resvg/resvg-js-android-arm-eabi":
+ optional: true
+ "@resvg/resvg-js-android-arm64":
+ optional: true
+ "@resvg/resvg-js-darwin-arm64":
+ optional: true
+ "@resvg/resvg-js-darwin-x64":
+ optional: true
+ "@resvg/resvg-js-linux-arm-gnueabihf":
+ optional: true
+ "@resvg/resvg-js-linux-arm64-gnu":
+ optional: true
+ "@resvg/resvg-js-linux-arm64-musl":
+ optional: true
+ "@resvg/resvg-js-linux-x64-gnu":
+ optional: true
+ "@resvg/resvg-js-linux-x64-musl":
+ optional: true
+ "@resvg/resvg-js-win32-arm64-msvc":
+ optional: true
+ "@resvg/resvg-js-win32-ia32-msvc":
+ optional: true
+ "@resvg/resvg-js-win32-x64-msvc":
+ optional: true
+ checksum: 27744f3954b7b0af1578db0c8a2fee19a1751c0d791596b67990c48d8921a0d31436f206a143d0c6bb2bcdd7daa0a8c81c599a5d4f18d357884d5d89000c6a75
+ languageName: node
+ linkType: hard
+
"@shuding/opentype.js@npm:1.4.0-beta.0":
version: 1.4.0-beta.0
resolution: "@shuding/opentype.js@npm:1.4.0-beta.0"
@@ -1060,13 +1189,14 @@ __metadata:
dependencies:
"@napi-rs/canvas": ^0.1.41
"@napi-rs/image": ^1.7.0
+ "@resvg/resvg-js": ^2.6.0
"@skyra/gifenc": ^1.0.1
"@types/node": ^20.3.1
"@types/react": ^18.2.12
benny: ^3.7.1
file-type: 16.5.4
prettier: ^2.8.8
- satori: ^0.10.1
+ satori: ^0.10.9
tailwind-merge: ^1.14.0
tailwindcss: ^3.3.3
tsup: ^7.2.0
@@ -2784,21 +2914,21 @@ __metadata:
languageName: node
linkType: hard
-"satori@npm:^0.10.1":
- version: 0.10.1
- resolution: "satori@npm:0.10.1"
+"satori@npm:^0.10.9":
+ version: 0.10.9
+ resolution: "satori@npm:0.10.9"
dependencies:
- "@shuding/opentype.js": "npm:1.4.0-beta.0"
- css-background-parser: "npm:^0.1.0"
- css-box-shadow: "npm:1.0.0-3"
- css-to-react-native: "npm:^3.0.0"
- emoji-regex: "npm:^10.2.1"
- escape-html: "npm:^1.0.3"
- linebreak: "npm:^1.1.0"
- parse-css-color: "npm:^0.2.1"
- postcss-value-parser: "npm:^4.2.0"
- yoga-wasm-web: "npm:^0.3.3"
- checksum: fd6df0f80002bb1387bbec413f0d07414c1c1d6825abecf79a59f17283ca87db88c6928898ff494230946b9ee4773e389e71e6c4ed8ce5964323ef3baf2ed884
+ "@shuding/opentype.js": 1.4.0-beta.0
+ css-background-parser: ^0.1.0
+ css-box-shadow: 1.0.0-3
+ css-to-react-native: ^3.0.0
+ emoji-regex: ^10.2.1
+ escape-html: ^1.0.3
+ linebreak: ^1.1.0
+ parse-css-color: ^0.2.1
+ postcss-value-parser: ^4.2.0
+ yoga-wasm-web: ^0.3.3
+ checksum: 56cb35e553cf8a65ee08ec29357e441a10adcc7c0cd68977c4e24c613f8999b0862ae05fe3c648498c4bda8dfc5a1c15d883cfbc30c815a9117fd99531ee4355
languageName: node
linkType: hard
-
-
- {config.avatar ? (
- <>
-
- {config.status ? (
-
- ) : null}
-
- ) : null}
-
-
-
-
-
- {config.progressbar && (
-
- {config.displayName && (
-
- {config.progress && - {displayName} -
- )} - {username && ( -- @{username} -
- )} -{percentage}%
} -
-
-
- )}
-
- {config.level && (
-
-