> 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/rank-level-card.md).

# Rank / Level Card

## 🐈‍⬛ Canvafy Design;

<figure><img src="/files/UAN9bS5toNBKA8awNMQU" alt=""><figcaption></figcaption></figure>

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

## [.setAvatar(imageURL)](#.setavatar-imageurl)

| PARAMETER                                     | TYPE                                       | DESCRIPTION             |
| --------------------------------------------- | ------------------------------------------ | ----------------------- |
| <mark style="color:blue;">**imageURL**</mark> | <mark style="color:red;">**String**</mark> | **Setting User Avatar** |

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

| PARAMETER                                   | TYPE                                       | DESCRIPTION                             |
| ------------------------------------------- | ------------------------------------------ | --------------------------------------- |
| <mark style="color:blue;">**type**</mark>   | <mark style="color:red;">**String**</mark> | **"image" or "color" adjustment**       |
| <mark style="color:blue;">**source**</mark> | <mark style="color:red;">**String**</mark> | **"imageURL" or "hexColor" adjustment** |

## [.setUsername(username,color)](#.setusername-username)

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

## [.setStatus(status)](#.setstatus-status)

| PARAMETER                                   | TYPE                                       | DESCRIPTION                                                                                                                                |
| ------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| <mark style="color:blue;">**status**</mark> | <mark style="color:red;">**String**</mark> | <p><strong>Setting Avatar Border Color</strong> <br><strong>=> </strong><mark style="color:green;"><strong>User Status</strong></mark></p> |

## [.setCustomStatus(status)](#.setcustomstatus-status)

| PARAMETER                                   | TYPE                                       | DESCRIPTION                                                                                                                                                                                                                                          |
| ------------------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**status**</mark> | <mark style="color:red;">**String**</mark> | <p><strong>Setting Avatar Border Color</strong><br><strong>=> </strong><mark style="color:green;"><strong>Custom Hex Color</strong></mark><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.setBorder(color)](#.setborder-color)

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

## [.setBarColor(color)](#.setbarcolor-color)

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

## [.setBarOpacity(opac)](#.setbaropacity-opac)

| PARAMETER                                 | TYPE                                                   | DESCRIPTION                                                                                                                                       |
| ----------------------------------------- | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**opac**</mark> | <mark style="color:yellow;">**Number / Double**</mark> | <p><strong>Setting Bar Opacity</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.setOverlayOpacity(opac)](#.setforegroundopacity-opac)

| PARAMETER                                 | TYPE                                                   | DESCRIPTION                                                                                                                                              |
| ----------------------------------------- | ------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**opac**</mark> | <mark style="color:yellow;">**Number / Double**</mark> | <p><strong>Setting Foreground Opacity</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.setLevel(level,text)](#.setlevel-level)

| PARAMETER                                  | TYPE                                          | DESCRIPTION                                                                                                                                           |
| ------------------------------------------ | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**level**</mark> | <mark style="color:yellow;">**Number**</mark> | **Setting Card Level Number**                                                                                                                         |
| <mark style="color:blue;">**text**</mark>  | <mark style="color:red;">**String**</mark>    | <p><strong>Setting Card Level Text</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.setLevelColor({text,number})](#.setlevelcolor-text-number)

| PARAMETER                                   | TYPE                                       | DESCRIPTION                                                                                                                                              |
| ------------------------------------------- | ------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**text**</mark>   | <mark style="color:red;">**String**</mark> | <p><strong>Setting Level Text Color</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p>   |
| <mark style="color:blue;">**number**</mark> | <mark style="color:red;">**String**</mark> | <p><strong>Setting Level Number Color</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

#### Example

```javascript
.setLevelColor({text:"#ff0000",number:"#00ff00"})
```

## [.setRank(rank,text)](#.setrank-rank)

| PARAMETER                                 | TYPE                                          | DESCRIPTION                                                                                                                                          |
| ----------------------------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**rank**</mark> | <mark style="color:yellow;">**Number**</mark> | **Setting Card Rank Number**                                                                                                                         |
| <mark style="color:blue;">**text**</mark> | <mark style="color:red;">**String**</mark>    | <p><strong>Setting Card Rank Text</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.setRankColor({text,number})](#.setrank-rank)

| PARAMETER                                   | TYPE                                       | DESCRIPTION                                                                                                                                             |
| ------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**text**</mark>   | <mark style="color:red;">**String**</mark> | <p><strong>Setting Rank Text Color</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p>   |
| <mark style="color:blue;">**number**</mark> | <mark style="color:red;">**String**</mark> | <p><strong>Setting Rank Number Color</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

#### Example

```javascript
.setRankColor({text:"#ff0000",number:"#00ff00"})
```

## [.setCurrentXp(number,color)](#.setcurrentxp-number)

| PARAMETER                                   | TYPE                                          | DESCRIPTION                                                                                                                                         |
| ------------------------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**number**</mark> | <mark style="color:yellow;">**Number**</mark> | **Current xp Quantity**                                                                                                                             |
| <mark style="color:blue;">**color**</mark>  | <mark style="color:red;">**String**</mark>    | <p><strong>Current xp Text Color</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.setRequiredXp(number,color)](#.setrequiredxp-number)

| PARAMETER                                   | TYPE                                          | DESCRIPTION                                                                                                                                          |
| ------------------------------------------- | --------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">**number**</mark> | <mark style="color:yellow;">**Number**</mark> | **Required xp Quantity**                                                                                                                             |
| <mark style="color:blue;">**color**</mark>  | <mark style="color:red;">**String**</mark>    | <p><strong>Required xp Text Color</strong><br><mark style="background-color:purple;"><strong>(</strong>Preferred Option<strong>)</strong></mark></p> |

## [.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 === "!rank") {
    const rank = await new canvafy.Rank()
    .setAvatar(message.author.displayAvatarURL({ forceStatic: true, extension: "png" }))
    .setBackground("image", "https://th.bing.com/th/id/R.248b992f15fb255621fa51ee0ca0cecb?rik=K8hIsVFACWQ8%2fw&pid=ImgRaw&r=0")
    .setUsername(message.author.username)
    .setBorder("#fff")
    .setStatus(message.member.presence?.status)
    .setLevel(2)
    .setRank(1)
    .setCurrentXp(100)
    .setRequiredXp(400)
    .build();

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

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