Custom Cards

Un simple módulo de manipulación de imágenes con Canvas, escrito en TypeScript.

• ESPAÑOL

  • Instalación
  • Uso
    • Importar Módulo
    • Métodos
    • Clase Welcome
      • Parámetros
      • Métodos
        • setAvatar()
        • setBackground()
        • setText()
      • Ejemplo
      • Resultado final
    • Clase Level
      • Parámetros
      • Métodos
        • setAvatar()
        • setBackground()
        • setText()
        • setXPLevel()
      • Ejemplo
      • Resultado final
    • Función render
      • Parámetros
      • Ejemplo de uso

• ENGLISH

  • Installation
  • Use
    • Import module
    • Methods
    • Welcome class
      • Parameters
      • Methods
        • setAvatar()
        • setBackground()
        • setText()
      • Usage example
      • Result
    • Level class
      • Parameteres
      • Methods
        • setAvatar()
        • setBackground()
        • setText()
        • setXPLevel()
      • Usage example
      • Result
    • render function
      • Parameters
      • Usage example

• Detalles del proyecto

---

Spanish - Español:

Instalación

npm install custom-cards

Uso

Importar módulo

• ESM:

import * as CustomCards from "custom-cards";

• CommonJS:

const CustomCards = require("custom-cards");

Métodos de Custom Cards:

Los métodos disponibles al importar el módulo.

Método	Tipo	Devuelve
Welcome	Class	Welcome
Level	Class	Level
render	Function	Buffer
Colors	Enum	Enum

Clase Welcome:

El uso de la clase Welcome (teoría).

Parámetros:

Parámetro	Tipo	Descripción
options	Object	Las opciones de la tarjeta.
options#fontFamily	String	El estilo de la tipografía a usar.

Métodos:

Nota: En la v1.5.0 se agregaron las propiedades type en Métodos que usen imágenes.

El tipo cambia dependiendo de lo que eligió en <property>#type, si eligió "url" el tipo sera String, si eligió "buffer" el tipo sera Buffer.

El Buffer es para imágenes locales, que no tengan una dirección URL.

Esto le puede traer problemas con los tipos si no los usa correctamente.

Método	Parámetros	Descripción
Welcome#setAvatar	options: Object	Las opciones del Avatar.
Welcome#setBackground	options: Object	Las opciones del fondo (opcional).
Welcome#setText	options: Object	Las opciones de los textos.

setAvatar():

Propiedad	Tipo	Descripción
setAvatar#type	"url" | "buffer"	El tipo de la imágen (URL o Buffer).
setAvatar#data	String | Buffer	Los datos de la imágen.
setAvatar#circleColor	Colors | string	El color de círculo del Avatar.

setBackground():

Propiedad	Tipo	Descripción
setBackground#type	"url" | "buffer"	El tipo de la imágen (URL o Buffer).
setBackground#data	String | Buffer	Los datos de la imágen.

setText():

Propiedad	Tipo	Descripción
setText#title	Object	Las propiedades del título.
setText#title#content	String	El contenido del título.
setText#title#color	Colors | String	El color del título.
setText#title#shadowColor	Colors | String	El color de las sombras del título.
setTitle#description	Object	Las propiedades de la descripción.
setText#description#content	String	El contenido de la descripción.
setText#description#color	Colors | String	El color de la descripción.
setText#description#shadowColor	Colors | String	El color de las sombras de la descripción.

Ejemplo de uso:

const card = new CustomCards.Welcome({
  fontFamily: "FredokaOne",
})
  .setAvatar({
    type: "url",
    data: "https://cdn.discordapp.com/avatars/752918867273187378/de580e21ed76965a55395c6ab4646d2e.png?size=1024",
    circleColor: Colors.White,
  })
  .setBackground({
    type: "url",
    data: "https://cdn.nekos.life/wallpaper/cGsBtWbjaGs.jpg",
  })
  .setText({
    title: {
      content: "Bienvenid@ usuario",
      color: Colors.Pink,
      shadowColor: Colors.Black,
    },
    description: {
      content: "Descripción aquí.",
      color: Colors.White,
      shadowColor: Colors.Black,
    },
  });

Resultado final:

Clase Level:

Parámetros:

Parámetro	Tipo	Descripción
options	Object	Las opciones de la tarjeta
options#fontFamily	String	El estilo de la tipografía a usar.

Métodos:

Método	Parámetros	Descripción
Level#setAvatar	options: Object	Las opciones del Avatar.
Level#setBackground	options: Object	Las opciones del fondo (opcional).
Level#setText	options: Object	Las opciones de los textos.
Level#setXPLevel	options: Object	Las opciones del nivel.

setAvatar():

Propiedad	Tipo	Descripción
setAvatar#type	"url" | "buffer"	El tipo de la imágen (URL o Buffer).
setAvatar#data	String | Buffer	Los datos de la imágen.
setAvatar#circleColor	Colors | string	El color de círculo del Avatar.

setBackground():

Propiedad	Tipo	Descripción
setBackground#type	"url" | "buffer"	El tipo de la imágen (URL o Buffer).
setBackground#data	String | Buffer	Los datos de la imágen.

setText():

Propiedad	Tipo	Descripción
setText#user	Object	Las propiedades del usuario.
setText#user#name	String	El nombre de usuario.
setText#user#color	Colors | String	El color del nombre de usuario.
setText#user#shadowColor	Colors | String	El color del nombre de usuario.
setText#rank	Object	Las propiedades del rango.
setText#rank#name	String	El texto del rango (opcional).
setText#rank#color	Colors | String	El color del texto del rango.
setText#rank#shadowColor	Colors | String	El color del texto del rango.
setText#level	Object	Las propiedades del nivel.
setText#level#name	String	El texto del nivel (opcional).
setText#level#color	Colors | String	El color del texto del nivel.
setText#level#shadowColor	Colors | String	El color del texto del nivel.

setXPLevel():

Propiedades	Tipo	Descripción
setXPLevel#barColor	Object	Las propiedades del color de la barra de XP.
setXPLevel#barColor#empty	Color | String	El color de la barra de XP vacía.
setXPLevel#barColor#filled	Color | String	El color de la barra de XP llena.
setXPLevel#barColor#shadowColor	Color | String	El color de la sombra de la barra de XP.
setXPLevel#rank	String | Number	El número del rango.
setXPLevel#level	String | Number	El número del nivel.
setXPLevel#xp	Object	Las propiedades de la barra de XP.
setXPLevel#xp#current	String | Number	La cantidad de XP actual.
setXPLevel#xp#max	String | Number	La cantidad de XP máxima.
setXPLevel#xp#levelColor	Colors | String	El color del texto de la barra de XP.

Ejemplo de uso:

const card = new CustomCards.Level({
  fontFamily: "FredokaOne",
})
  .setAvatar({
    type: "url",
    data: "https://cdn.discordapp.com/avatars/752918867273187378/de580e21ed76965a55395c6ab4646d2e.png?size=1024",
    circleColor: Colors.Pink,
  })
  .setBackground({
    type: "url",
    data: "https://cdn.nekos.life/wallpaper/cGsBtWbjaGs.jpg",
  })
  .setText({
    user: {
      name: "usuario#0000",
      color: Colors.White,
      shadowColor: Colors.Black,
    },
    level: {
      name: "Nivel",
      color: Colors.Pink,
      shadowColor: Colors.Black,
    },
    rank: {
      name: "Rango",
      color: Colors.White,
      shadowColor: Colors.Black,
    },
  })
  .setXPLevel({
    barColor: {
      empty: Colors.White,
      filled: Colors.Pink,
      shadowColor: Colors.Gray,
    },
    rank: 8,
    level: 15,
    xp: {
      current: 363,
      max: 646,
      levelColor: Colors.Pink,
    },
  });

Resultado final:

Función render:

El uso de la función render (teoría).

Nota: La propiedad type del parámetros options es necesaria, pues especifíca cuál será el tipo de tarjeta (Bienvenida o Nivel), configurarlo incorrectamente puede traerle errores.

La función render es asíncrona, por lo que tendra que usar Promesas o async / await.

Parámetros

Parámetros	Tipo	Descripción
options	Object	Las opciones de la función render.
options#type	"level" | "welcome"	El tipo de la tarjeta.
options#model	Welcome | Level	El modelo de la tarjeta.

Ejemplo de uso:

(async () => {
  try {
    let buffer = await CustomCard.render({
      type: "welcome",
      model: card,
    });

    console.log(buffer);
  } catch (err) {
    console.error(err);
  }
})();

---

English - Inglés

Installation

npm install custom-cards

Use

You may experience issues using Node.js v18 due to the Canvas dependency, it is recommended to use the LTS version of Node.js

Import module

• ES6:

import * as CustomCards from "custom-cards";

• CommonJS:

const CustomCards = require("custom-cards");

Custom Card Methods:

The methods available when importing the module.

Method	Type	Return
Welcome	Class	Welcome
Level	Class	Level
render	Function	Buffer
Colors	Enum	Enum

Welcome class:

The use of the Welcome class (theory).

Parameters:

Parameter	Type	Description
options	Object	Card options.
options#fontFamily	String	The font style to use.

Methods:

Note: In v1.5.0 type properties were added in Methods that use images.

The type changes depending on what you chose in <property>#type, if you chose "url" the type would be String, if you chose "buffer" the type would be Buffer.

The Buffer is for local images, which do not have a URL.

This can get you in trouble with types if you don't use them correctly.

Method	Parameter	Description
Welcome#setAvatar	options: Object	Avatar options.
Welcome#setBackground	options: Object	Background options (optional).
Welcome#setText	options: Object	Text options.

setAvatar():

Property	Type	Description
setAvatar#type	"url" | "buffer"	The type of the image (URL or Buffer).
setAvatar#data	String | Buffer	The image data.
setAvatar#circleColor	Colors | string	The circle color of the Avatar.

setBackground():

Property	Type	Description
setBackground#type	"url" | "buffer"	The type of the image (URL or Buffer).
setBackground#data	String | Buffer	The image data.

setText():

Property	Type	Description
setText#title	Object	Title properties.
setText#title#content	String	The content of the title.
setText#title#color	Colors | String	The color of the title.
setText#title#shadowColor	Colors | String	The color of the shadows of the title.
setTitle#description	Object	The properties of the description.
setText#description#content	String	The content of the description.
setText#description#color	Colors | String	The color of the description.
setText#description#shadowColor	Colors | String	The color of the shadows of the description.

Usage example:

const card = new CustomCards.Welcome({
  fontFamily: "FredokaOne",
})
  .setAvatar({
    type: "url",
    data: "https://cdn.discordapp.com/avatars/752918867273187378/de580e21ed76965a55395c6ab4646d2e.png?size=1024",
    circleColor: Colors.White,
  })
  .setBackground({
    type: "url",
    data: "https://cdn.nekos.life/wallpaper/cGsBtWbjaGs.jpg",
  })
  .setText({
    title: {
      content: "Bienvenid@ usuario",
      color: Colors.Pink,
      shadowColor: Colors.Black,
    },
    description: {
      content: "Descripción aquí.",
      color: Colors.White,
      shadowColor: Colors.Black,
    },
  });

Result:

Level class:

Parameters:

Parameter	Type	Description
options	Object	Card options.
options#fontFamily	String	The font style to use.

Methods:

Method	Parameter	Description
Level#setAvatar	options: Object	Avatar options.
Level#setBackground	options: Object	Background options (optional).
Level#setText	options: Object	Text options.
Level#setXPLevel	options: Object	Level options.

setAvatar():

Property	Type	Description
setAvatar#type	"url" | "buffer"	The type of the image (URL or Buffer).
setAvatar#data	String | Buffer	The image data.
setAvatar#circleColor	Colors | string	The circle color of the Avatar.

setBackground():

Propiedad	Tipo	Descripción
setBackground#type	"url" | "buffer"	The type of the image (URL or Buffer).
setBackground#data	String | Buffer	The image data.

setText():

Property	Type	Description
setText#user	Object	The user properties.
setText#user#name	String	The username.
setText#user#color	Colors | String	The color of the username.
setText#user#shadowColor	Colors | String	The color of the username.
setText#rank	Object	The properties of the range.
setText#rank#name	String	The text of the range (optional).
setText#rank#color	Colors | String	The text color of the range.
setText#rank#shadowColor	Colors | String	The text color of the range.
setText#level	Object	The properties of the level.
setText#level#name	String	The level text (optional).
setText#level#color	Colors | String	The text color of the level.
setText#level#shadowColor	Colors | String	The text color of the level.

setXPLevel():

Property	Type	Description
setXPLevel#barColor	Object	The properties of the color of the XP bar.
setXPLevel#barColor#empty	Color | String	The color of the empty XP bar.
setXPLevel#barColor#filled	Color | String	The color of the XP bar fills.
setXPLevel#barColor#shadowColor	Color | String	The shadow color of the XP bar.
setXPLevel#rank	String | Number	The range number.
setXPLevel#level	String | Number	The level number.
setXPLevel#xp	Object	The properties of the XP bar.
setXPLevel#xp#current	String | Number	The current amount of XP.
setXPLevel#xp#max	String | Number	The amount of maximum XP.
setXPLevel#xp#levelColor	Colors | String	The text color of the XP bar.

Usage example:

const card = new CustomCards.Level({
  fontFamily: "FredokaOne",
})
  .setAvatar({
    type: "url",
    data: "https://cdn.discordapp.com/avatars/752918867273187378/de580e21ed76965a55395c6ab4646d2e.png?size=1024",
    circleColor: Colors.Pink,
  })
  .setBackground({
    type: "url",
    data: "https://cdn.nekos.life/wallpaper/cGsBtWbjaGs.jpg",
  })
  .setText({
    user: {
      name: "usuario#0000",
      color: Colors.White,
      shadowColor: Colors.Black,
    },
    level: {
      name: "Nivel",
      color: Colors.Pink,
      shadowColor: Colors.Black,
    },
    rank: {
      name: "Rango",
      color: Colors.White,
      shadowColor: Colors.Black,
    },
  })
  .setXPLevel({
    barColor: {
      empty: Colors.White,
      filled: Colors.Pink,
      shadowColor: Colors.Gray,
    },
    rank: 8,
    level: 15,
    xp: {
      current: 363,
      max: 646,
      levelColor: Colors.Pink,
    },
  });

Result:

render function:

The use of the render function (theory).

Note: The type property of the options parameter is necessary, since it specifies what the type of card will be (Welcome or Level), configuring it incorrectly can lead to errors.

The render function is asynchronous, so you'll have to use Promises or async / await.

Parameters

Parameter	Type	Description
options	Object	The options of the render function.
options#type	"level" | "welcome"	The type of the card.
options#model	Welcome | Level	The model of the card.

Usage example:

(async () => {
  try {
    let buffer = await CustomCard.render({
      type: "welcome",
      model: card,
    });

    console.log(buffer);
  } catch (err) {
    console.error(err);
  }
})();

---

Detalles del proyecto:

• Licencia: MIT License
• Autor: Yasu Yumiko

Gracias :D