> For the complete documentation index, see [llms.txt](https://fivesobes.gitbook.io/canvafy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fivesobes.gitbook.io/canvafy/top-rank-card.md).

# Top / Rank Card

## 🐈‍⬛ Canvafy Design;

<figure><img src="https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FQ8KI56rkXEQp2Ao9aeTJ%2Fuploads%2FKZkdUc38JrMv0x0QYbck%2Ftop.png?alt=media&#x26;token=02e25694-c836-44f4-8128-bc281c2e6c7b" alt=""><figcaption></figcaption></figure>

```javascript
await new canvafy.Top()
```

## [.setColors(color)](#.setcolors-color)

| PARAMETER                                  | TYPE                                          | DESCRIPTION               |
| ------------------------------------------ | --------------------------------------------- | ------------------------- |
| <mark style="color:blue;">**color**</mark> | <mark style="color:orange;">**Object**</mark> | **Setting Title Message** |

#### Example

```javascript
.setColors({ box: '#212121', username: '#ffffff', score: '#ffffff', firstRank: '#f7c716', secondRank: '#9e9e9e', thirdRank: '#94610f' })
```

## [.setabbreviateNumber(bool)](#.setabbreviatenumber-false)

| PARAMETER                                 | TYPE                                          | DESCRIPTION                                                                                                                                                                                                                                       |
| ----------------------------------------- | --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**bool**</mark> | <mark style="color:green;">**Boolean**</mark> | <p><strong>Setting Abbreviate Numbers</strong> <br><mark style="background-color:purple;"><strong>Example; 10000 => 10K</strong></mark><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.setUsersData(users)](#.setusersdata-users)

| PARAMETER                                  | TYPE                                                | DESCRIPTION       |
| ------------------------------------------ | --------------------------------------------------- | ----------------- |
| <mark style="color:blue;">**users**</mark> | <mark style="color:orange;">**Array Object**</mark> | **Setting Users** |

#### Example

```javascript
.setUsersData([
{ top: 1, avatar: "https://cdn.discordapp.com/avatars/928259219038302258/cb1bcc0c5616d3fb1527b4ea03c9ae17.png", tag: "Beş#0005", score: 5 },
{ top: 2, avatar: "https://cdn.discordapp.com/avatars/928259219038302258/cb1bcc0c5616d3fb1527b4ea03c9ae17.png", tag: "Lulushu#1337", score: 5 }, 
])

```

## [.setScoreMessage(message)](#.setscoremessage-message)

| PARAMETER                                    | TYPE                                       | DESCRIPTION                                                                                                                                                |
| -------------------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**message**</mark> | <mark style="color:red;">**String**</mark> | <p><strong>Setting Description Message</strong><br> <mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.setBackground(type,source)](#.setbackground-type-source-1)

| PARAMETER                                   | TYPE                                       | DESCRIPTION                                                                                                                                                       |
| ------------------------------------------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**type**</mark>   | <mark style="color:red;">**String**</mark> | <p><strong>"image" or "color" adjustment</strong> <br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p>      |
| <mark style="color:blue;">**source**</mark> | <mark style="color:red;">**String**</mark> | <p><strong>"imageURL" or "hexColor" adjustment</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.setOpacity(opac)](#.setoverlayopacity-opac)

| PARAMETER                                 | TYPE                                                   | DESCRIPTION                  |
| ----------------------------------------- | ------------------------------------------------------ | ---------------------------- |
| <mark style="color:blue;">**opac**</mark> | <mark style="color:yellow;">**Number / Double**</mark> | **Boxs Transparent Opacity** |

## [.build()](#.build)

| PARAMETER                                       | TYPE                                            | DESCRIPTION                                                                                                            |
| ----------------------------------------------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| ~~<mark style="color:purple;">**None**</mark>~~ | ~~<mark style="color:purple;">**None**</mark>~~ | <p><strong>Image Maker.</strong><br><em><mark style="color:orange;"><strong>❗Required to Use!</strong></mark></em></p> |

### **🌙 Example Of Code With Discord.js v14** <a href="#usage" id="usage"></a>

```javascript
client.on("messageCreate", async message => {
  if (message.content === "!top") {
    const top = await new canvafy.Top()
.setOpacity(0.6)
.setScoreMessage("Message:") //(Preferred Option)
.setabbreviateNumber(false) //(Preferred Option)
.setBackground("image", "https://cdn.discordapp.com/attachments/1041745966186909826/1091378469000183848/4326598.png") //(Preferred Option)
.setColors({ box: '#212121', username: '#ffffff', score: '#ffffff', firstRank: '#f7c716', secondRank: '#9e9e9e', thirdRank: '#94610f' }) //(Preferred Option)
.setUsersData([
{ top: 1, avatar: "https://cdn.discordapp.com/avatars/928259219038302258/cb1bcc0c5616d3fb1527b4ea03c9ae17.png", tag: "Beş#0005", score: 5555 },
{ top: 2, avatar: "https://cdn.discordapp.com/avatars/852103749228036136/4d5eac54076d6b72edbddd3339d39b49.png", tag: "Lulushu#1337", score: 1337 },
{ top: 3, avatar: "https://cdn.discordapp.com/avatars/852800814808694814/a_677337d2fb6701459f402a44e74b33e6.png", tag: "Approval.#0001", score: 1054 },
{ top: 4, avatar: "https://cdn.discordapp.com/avatars/341592492224806914/1d7fdb35d4403f84a5ad29880dd802af.png", tag: "luhux#1937", score: 903 },
{ top: 5, avatar: "https://cdn.discordapp.com/embed/avatars/0.png", tag: "Deleted User#0000", score: 0 },
{ top: 6, avatar: "https://cdn.discordapp.com/embed/avatars/0.png", tag: "Deleted User#0000", score: 0 },
{ top: 7, avatar: "https://cdn.discordapp.com/embed/avatars/0.png", tag: "Deleted User#0000", score: 0 },
{ top: 8, avatar: "https://cdn.discordapp.com/embed/avatars/0.png", tag: "Deleted User#0000", score: 0 },
{ top: 9, avatar: "https://cdn.discordapp.com/embed/avatars/0.png", tag: "Deleted User#0000", score: 0 },
{ top: 10, avatar: "https://cdn.discordapp.com/embed/avatars/0.png", tag: "Deleted User#0000", score: 0 },
])
.build();


    message.reply({
      files: [{
        attachment: top,
        name: `top-${message.member.id}.png`
      }]
    });
  }
});
```

## 📃Support Server; [discord.gg/luppux](https://discord.gg/luppux)