JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q45735F
  • License MIT

A simple card module with Canvas.

Package Exports

  • custom-cards
  • custom-cards/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (custom-cards) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Custom Cards

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

Downloads NPM Version

Spanish - Español:

📦 Instalación

npm install custom-cards

❔ Uso

Puede experimentar problemas al usar Node.js v18 debido a la dependencia Canvas, se recomienda usar la versión LTS de Node.js

Importar módulo

  • ES6:
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:

img

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:

img

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:

img

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:

img

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:

Gracias :D