const fetch = require("node-fetch");
-const path = require("path");
-const { createCanvas, loadImage, registerFont } = require("canvas");
+ const fetch = require('node-fetch');
+const path = require('path');
+const { createCanvas, loadImage, registerFont } = require('canvas');
+
+const createIlvlFilter = require('./create-ilvl-filter');
function absolute(relativePath) {
- return path.join(__dirname, relativePath);
+ return path.join(__dirname, relativePath);
}
-registerFont(absolute('SourceSansPro-Regular.ttf'), { family: 'Source Sans Pro', style: 'Regular' });
-registerFont(absolute('SourceSansPro-SemiBold.ttf'), { family: 'Source Sans Pro', style: 'SemiBold' });
+registerFont(absolute('./resources/SourceSansPro-Regular.ttf'), { family: 'Source Sans Pro', style: 'Regular' });
+registerFont(absolute('./resources/SourceSansPro-SemiBold.ttf'), { family: 'Source Sans Pro', style: 'SemiBold' });
-const primary = "rgba(178, 214, 249, 1)";
-const white = "rgba(255, 255, 255,1)";
-const grey = "#868686";
-const black = "rgba(0,0,0,0.5)";
-const copyright = '"11px "Source Sans Pro"';
-const small = '"18px "Source Sans Pro"';
+const primary = 'rgba(178, 214, 249, 1)';
+const white = 'rgba(255, 255, 255,1)';
+const grey = '#868686';
+const black = 'rgba(0,0,0,0.5)';
+const copyright = '11px "Source Sans Pro"';
+const small = '18px "Source Sans Pro"';
const med = '30px "Source Sans Pro"';
const smed = '25px "Source Sans Pro"';
const large = '45px "Source Sans Pro SemiBold"';
@@ -107,13 +109,43 @@ const infoTextSmallStartY = rectStartRow3Y + infoTextStartSpacing;
const infoTextBigStartY = infoTextSmallStartY + 25;
const infoTextSpacing = 50;
+const xivApiSupportedLanguages = ['en', 'ja', 'de', 'fr'];
+const languageStrings = {
+ en: {
+ raceAndClan: 'Race & Clan',
+ guardian: 'Guardian',
+ grandCompany: 'Grand Company',
+ freeCompany: 'Free Company',
+ elementalLevel: 'Elemental Level',
+ eurekaLevel: 'Level',
+ resistanceRank: 'Resistance Rank',
+ bozjaRank: 'Rank',
+ mounts: 'Mounts',
+ minions: 'Minions',
+ },
+ de: {
+ raceAndClan: 'Volk & Stamm',
+ guardian: 'Schutzgott',
+ grandCompany: 'Staatliche Gesellschaft',
+ freeCompany: 'Freie Gesellschaft',
+ elementalLevel: 'Das Verbotene Land Eureka',
+ eurekaLevel: 'Elementarstufe',
+ resistanceRank: 'Bozja-Südfront',
+ bozjaRank: 'Widerstandsstufe',
+ mounts: 'Reittiere',
+ minions: 'Begleiter',
+ },
+};
+
class CardCreator {
/**
* Creates a new card creator.
* @constructor
+ * @param {string} [xivApiKey] The API key for the XIV API to be used in all requests.
*/
- constructor() {
- this.isInit = false;
+ constructor(xivApiKey = undefined) {
+ this.xivApiKey = typeof xivApiKey === 'string' && xivApiKey !== '' ? xivApiKey : undefined;
+ this.initPromise = null;
}
/**
@@ -140,535 +172,459 @@ class CardCreator {
* @returns {Promise} A promise representing the initialization state of this generator.
*/
async ensureInit() {
- if (this.isInit) {
- return;
- }
+ if (this.initPromise == null) this.initPromise = this.init();
- await this.init();
- this.isInit = true;
+ await this.initPromise;
}
async init() {
- var d = new Date();
- this.copyrightYear = d.getFullYear();
+ const commonImagesPromise = Promise.all([
+ loadImage(absolute('./resources/background.png')),
+ loadImage(absolute('./resources/minion.png')),
+ loadImage(absolute('./resources/mount.png')),
+ loadImage(absolute('./resources/ilvl-icon.png')),
+ loadImage(absolute('./resources/shadow.png')),
+ ]).then(([background, minion, mount, ilvl, shadow]) => {
+ this.images = {
+ background, minion, mount, ilvl, shadow,
+ };
+ });
- this.bgImage = await loadImage(absolute("./chara_top.png"));
+ const classJobs = [
+ 'alchemist', 'armorer', 'blacksmith', 'carpenter', 'culinarian', 'goldsmith', 'leatherworker', 'weaver',
+ 'botanist', 'fisher', 'miner',
+ 'gladiator', 'paladin', 'marauder', 'warrior', 'darkknight', 'gunbreaker',
+ 'conjurer', 'whitemage', 'scholar', 'astrologian',
+ 'archer', 'bard', 'machinist', 'dancer',
+ 'lancer', 'dragoon', 'pugilist', 'monk', 'rogue', 'ninja', 'samurai',
+ 'thaumaturge', 'blackmage', 'arcanist', 'summoner', 'redmage',
+ 'bluemage',
+ ];
- this.imgMinion = await loadImage(absolute("./minion.png"));
- this.imgMount = await loadImage(absolute("./mount.png"));
- this.imgIlvl = await loadImage(absolute("./ilvl_n.png"));
- this.imgShadow = await loadImage(absolute("./shadow.png"));
+ const classJobIconsPromise = Promise.all(
+ classJobs.map(name => loadImage(absolute(`./resources/class-jobs-icons/${name}.png`)))
+ ).then(images => {
+ this.cjIcons = {};
+ images.forEach((image, index) => this.cjIcons[classJobs[index]] = image);
+ });
- this.imgAlchemist = await loadImage(absolute("./cj/1/alchemist.png"));
- this.imgArmorer = await loadImage(absolute("./cj/1/armorer.png"));
- this.imgBlacksmith = await loadImage(absolute("./cj/1/blacksmith.png"));
- this.imgCarpenter = await loadImage(absolute("./cj/1/carpenter.png"));
- this.imgCulinarian = await loadImage(absolute("./cj/1/culinarian.png"));
- this.imgGoldsmith = await loadImage(absolute("./cj/1/goldsmith.png"));
- this.imgLeatherworker = await loadImage(absolute("./cj/1/leatherworker.png"));
- this.imgWeaver = await loadImage(absolute("./cj/1/weaver.png"));
+ const jobBackgroundsPromise = Promise.all(
+ Array.from({ length: 38 }, (_, index) => loadImage(absolute(`./resources/class-jobs-backgrounds/${index + 1}.png`)))
+ ).then(images => this.jobBackgrounds = images);
- this.imgBotanist = await loadImage(absolute("./cj/1/botanist.png"));
- this.imgFisher = await loadImage(absolute("./cj/1/fisher.png"));
- this.imgMiner = await loadImage(absolute("./cj/1/miner.png"));
+ const ilevelFilterPromise = createIlvlFilter(this.xivApiKey).then(filterIds => this.ilvlFilterIds = filterIds);
- this.imgGladiator = await loadImage(absolute("./cj/1/gladiator.png"));
- this.imgPaladin = await loadImage(absolute("./cj/1/paladin.png"));
- this.imgMarauder = await loadImage(absolute("./cj/1/marauder.png"));
- this.imgWarrior = await loadImage(absolute("./cj/1/warrior.png"));
- this.imgDarkKnight = await loadImage(absolute("./cj/1/darkknight.png"));
- this.imgGunbreaker = await loadImage(absolute("./cj/1/gunbreaker.png"));
+ const minionCountPromise = fetch(`https://ffxivcollect.com/api/minions/`)
+ .then(response => response.json())
+ .then(data => this.minionCount = data.count);
- this.imgConjurer = await loadImage(absolute("./cj/1/conjurer.png"));
- this.imgWhitemage = await loadImage(absolute("./cj/1/whitemage.png"));
- this.imgScholar = await loadImage(absolute("./cj/1/scholar.png"));
- this.imgAstrologian = await loadImage(absolute("./cj/1/astrologian.png"));
+ const mountCountPromise = fetch(`https://ffxivcollect.com/api/mounts/`)
+ .then(response => response.json())
+ .then(data => this.mountCount = data.count);
- this.imgArcher = await loadImage(absolute("./cj/1/archer.png"));
- this.imgBard = await loadImage(absolute("./cj/1/bard.png"));
- this.imgMachinist = await loadImage(absolute("./cj/1/machinist.png"));
- this.imgDancer = await loadImage(absolute("./cj/1/dancer.png"));
-
- this.imgLancer = await loadImage(absolute("./cj/1/lancer.png"));
- this.imgDragoon = await loadImage(absolute("./cj/1/dragoon.png"));
- this.imgPugilist = await loadImage(absolute("./cj/1/pugilist.png"));
- this.imgMonk = await loadImage(absolute("./cj/1/monk.png"));
- this.imgRogue = await loadImage(absolute("./cj/1/rogue.png"));
- this.imgNinja = await loadImage(absolute("./cj/1/ninja.png"));
- this.imgSamurai = await loadImage(absolute("./cj/1/samurai.png"));
-
- this.imgThaumaturge = await loadImage(absolute("./cj/1/thaumaturge.png"));
- this.imgBlackmage = await loadImage(absolute("./cj/1/blackmage.png"));
- this.imgArcanist = await loadImage(absolute("./cj/1/arcanist.png"));
- this.imgSummoner = await loadImage(absolute("./cj/1/summoner.png"));
- this.imgRedmage = await loadImage(absolute("./cj/1/redmage.png"));
-
- this.imgBluemage = await loadImage(absolute('./cj/1/bluemage.png'));
-
- this.imgJobBg = {};
- for (var i = 1; i <= 38; i++) {
- this.imgJobBg[i] = await loadImage(absolute(`./cj/bg/${i}.png`));
- }
-
- await this.countMountsMinions();
+ await Promise.all([
+ commonImagesPromise,
+ classJobIconsPromise,
+ jobBackgroundsPromise,
+ ilevelFilterPromise,
+ minionCountPromise,
+ mountCountPromise,
+ ]);
}
- async countMountsMinions() {
- var response = await fetch(`https://ffxivcollect.com/api/minions/`);
- var data = await response.json();
+ async createCrest(crests) {
+ if (!Array.isArray(crests) || crests.length == 0) return null;
- this.countMinion = data.count;
-
- var response = await fetch(`https://ffxivcollect.com/api/mounts/`);
- var data = await response.json();
-
- this.countMount = data.count;
-
- console.log(`Refreshed counts: ${this.countMinion} - ${this.countMount}`);
- }
-
- async createCrest(crestAry) {
const canvas = createCanvas(128, 128);
- const ctx = canvas.getContext("2d");
+ const ctx = canvas.getContext('2d');
- if (crestAry.length == 0)
- return null;
+ const crestLayers = await Promise.all(crests.map(crest => loadImage(crest)));
- for (var i = 0; i < crestAry.length; i++) {
- var crestLayer = await loadImage(crestAry[i]);
- ctx.drawImage(crestLayer, 0, 0, 128, 128);
+ for (const layer of crestLayers) {
+ ctx.drawImage(layer, 0, 0, 128, 128);
}
- var imgd = ctx.getImageData(0, 0, 128, 128),
- pix = imgd.data,
- newColor = { r: 0, g: 0, b: 0, a: 0 };
+ const imageData = ctx.getImageData(0, 0, 128, 128);
+ const pixelData = imageData.data;
- for (var i = 0, n = pix.length; i < n; i += 4) {
- var r = pix[i],
- g = pix[i + 1],
- b = pix[i + 2];
+ // Iterate over all pixels, where one consists of 4 numbers: r, g, b and a
+ for (let index = 0; index < pixelData.length; index += 4) {
+ const [r, g, b] = pixelData.slice(index, index + 3);
- // If its white then change it
+ // If the pixel is a special grey, change it to be transparent (a = 0)
if (r == 64 && g == 64 && b == 64) {
- // Change the white to whatever.
- pix[i] = newColor.r;
- pix[i + 1] = newColor.g;
- pix[i + 2] = newColor.b;
- pix[i + 3] = newColor.a;
+ pixelData[index] = 0;
+ pixelData[index + 1] = 0;
+ pixelData[index + 2] = 0;
+ pixelData[index + 3] = 0;
}
}
- ctx.putImageData(imgd, 0, 0);
-
+ ctx.putImageData(imageData, 0, 0);
return canvas;
}
getItemLevel(gearset) {
- var ilvl = 0;
- var cnt = 0;
- var mainHandLvl = 0;
- var hasOffHand = false;
+ let itemLevelSum = 0;
- for (var key in gearset) {
- var piece = gearset[key];
+ for (const [key, piece] of Object.entries(gearset)) {
- if (key == 'SoulCrystal')
- continue;
+ // Exclude SoulCrystal from item level sum
+ if (key !== 'SoulCrystal') {
- if (key == 'MainHand')
- mainHandLvl = piece.Item.LevelItem;
-
- if (key == 'OffHand')
- hasOffHand = true;
-
- ilvl += piece.Item.LevelItem;
- cnt++;
+ // If this item is a special one, increase the total item level by only 1
+ if (this.ilvlFilterIds.includes(piece.Item.ID) == true) {
+ itemLevelSum += 1;
+ } else {
+ itemLevelSum += piece.Item.LevelItem;
+ }
+ }
}
- if (!hasOffHand) {
- ilvl += mainHandLvl;
- cnt++;
+ // If there is no OffHand, the MainHand item level counts twice
+ if (gearset.Offhand != null && typeof gearset.MainHand != 'number') {
+ const piece = gearset.MainHand;
+
+ // If this item is a special one, increase the total item level by only 1
+ if (this.ilvlFilterIds.includes(piece.Item.ID) == true) {
+ itemLevelSum += 1;
+ } else {
+ itemLevelSum += piece.Item.LevelItem;
+ }
}
- if (cnt == 0)
- return 0;
-
- // ilvl division is always out of 13 items
- // mainhand counts twice if there's no offhand
- // job stones are ignored
- return this.pad(Math.floor(ilvl / 13), 4);
+ // Average item level computation is always for 13 items
+ // Job stones are ignored
+ return this.pad(Math.floor(itemLevelSum / 13), 4);
}
- pad(num, size) {
- num = num.toString();
- while (num.length < size) num = "0" + num;
- return num;
+ pad(number, size) {
+ const string = String(number);
+ const paddingCount = Math.max(size - string.length, 0);
+ return '0'.repeat(paddingCount) + string;
+ }
+
+ classOrJobIcon(classJob, unlockId, className, jobName) {
+ if (classJob?.UnlockedState?.ID === unlockId) return this.cjIcons[jobName];
+ else return this.cjIcons[className];
}
/**
* Creates a character card for a character.
- * @param {number | string} charaId The Lodestone ID of the character to generate a card for.
+ * @param {number | string} characterId The Lodestone ID of the character to generate a card for.
* @param {string | Buffer | null | undefined} customImage Optional parameter providing a custom
* image to be drawn between the background of the character card and the black information boxes.
* The image should be the same resolution as the default image. The default image size can be
* retrieved with {@link CardCreator#canvasSize}. May be a URL, `data: `URI, a local file path,
* or a Buffer instance.
+ * @param {string} [language] The language that the cards should be in use for the request
* @example
- * const fs = require("fs");
+ * const fs = require('fs');
*
* const card = new CardCreator();
- * const lodestoneId = "13821878";
+ * const lodestoneId = '13821878';
*
* await card.ensureInit();
* const png = await card.createCard(lodestoneId);
*
- * fs.writeFile("./test.png", png, err => {
+ * fs.writeFile('./test.png', png, err => {
* if (err) console.error(err);
* });
* @returns {Promise<Buffer>} A promise representating the construction of the card's image data.
*/
- async createCard(charaId, customImage) {
- const characterInfoUrl = `https://xivapi.com/character/${charaId}?extended=1&data=FC,mimo`;
- let response = await fetch(characterInfoUrl);
- if (!response.ok) {
+ async createCard(characterId, customImage, language = 'en') {
+ const supportedLanguage = xivApiSupportedLanguages.includes(language) ? language : 'en';
+ const strings = Object.keys(languageStrings).includes(supportedLanguage) ? languageStrings[supportedLanguage] : languageStrings.en;
+
+ // Request all API data as early as possible
+ const neededFields = [
+ 'Character.ActiveClassJob.UnlockedState.ID', 'Character.ClassJobs.*.Level', 'Character.ClassJobs.*.UnlockedState.ID', 'Character.ClassJobsBozjan.Level', 'Character.ClassJobsElemental.Level',
+ 'Character.DC', 'Character.FreeCompanyName', 'Character.GearSet.Gear', 'Character.GrandCompany.Company.Name', 'Character.GrandCompany.Rank.Icon', 'Character.GuardianDeity.Name',
+ 'Character.GuardianDeity.Icon', 'Character.Name', 'Character.Portrait', 'Character.Race.Name', 'Character.Tribe.Name', 'Character.Server', 'Character.Title.Name',
+ 'FreeCompany.Crest', 'FreeCompany.Tag', 'Minions.*.dummy', 'Mounts.*.dummy',
+ ];
+
+ const characterInfoUrl = new URL(`https://xivapi.com/character/${encodeURIComponent(characterId)}`)
+ characterInfoUrl.searchParams.set('language', supportedLanguage);
+ characterInfoUrl.searchParams.set('extended', '1');
+ characterInfoUrl.searchParams.set('data', 'FC,MIMO');
+ characterInfoUrl.searchParams.set('columns', neededFields.join(','));
+ if (typeof this.xivApiKey === 'string' && this.xivApiKey !== '') url.searchParams.set('private_key', this.xivApiKey);
+
+ const dataPromise = fetch(characterInfoUrl)
// Retry once if the request fails
- response = await fetch(characterInfoUrl);
- }
+ .then(response => response.ok ? response : fetch(characterInfoUrl))
+ .then(response => response.json());
- const data = await response.json();
+ const customImagePromise = customImage != null ? loadImage(customImage) : Promise.resolve();
+ const portraitPromise = dataPromise.then(data => loadImage(data.Character.Portrait));
+ const deityPromise = dataPromise.then(data => loadImage(`https://xivapi.com/${data.Character.GuardianDeity.Icon}`));
+ const gcRankPromise = dataPromise.then(data => data.Character.GrandCompany.Company != null ? loadImage(`https://xivapi.com/${data.Character.GrandCompany.Rank.Icon}`) : null);
+ const fcCrestPromise = dataPromise.then(data => data.Character.FreeCompanyName != null ? this.createCrest(data.FreeCompany.Crest) : null);
+ // Build canvas and only await data, when actually needed
const canvasSize = this.canvasSize;
const canvas = createCanvas(canvasSize.width, canvasSize.height);
- const ctx = canvas.getContext("2d");
+ const ctx = canvas.getContext('2d');
+ ctx.save();
- const portrait = await loadImage(data.Character.Portrait);
+ // Draw background
+ ctx.drawImage(this.images.background, 0, 0, canvasSize.width, canvasSize.height + 2);
- ctx.drawImage(this.bgImage, 0, 0, canvasSize.width, canvasSize.height + 2);
-
- ctx.drawImage(portrait, 0, 120, 441, 600);
-
- if (customImage != null) {
- const bg = await loadImage(customImage);
-
- ctx.drawImage(bg, 0, 0, canvasSize.width, canvasSize.height);
+ // Draw custom background image
+ const customLoadedImage = await customImagePromise;
+ if (customLoadedImage != null) {
+ ctx.drawImage(customLoadedImage, 0, 0, canvasSize.width, canvasSize.height);
}
- ctx.strokeStyle = white;
+ // Draw dark background boxes
ctx.fillStyle = black;
- ctx.beginPath();
- // Name, Title, Server Rect
- ctx.fillRect(25, 10, 840, 100);
+ ctx.fillRect(25, 10, 840, 100); // Name, Title, Server
+ ctx.fillRect(rectStartX, rectStartRow2Y, rectHalfWidth, rectHeightRow2); // Mounts
+ ctx.fillRect(rectStartXHalf, rectStartRow2Y, rectHalfWidth, rectHeightRow2); // Minions
+ ctx.fillRect(rectStartX, rectStartRow3Y, rectFullWidth, rectHeightRow3); // Character information
+ ctx.fillRect(rectStartX, rectStartRow4Y, rectFullWidth, rectHeightRow4); // Eureka & Bozja
+ ctx.fillRect(rectStartX, rectStartRow5Y, rectFullWidth, rectHeightRow5); // Classes & Jobs
+ ctx.restore(); ctx.save();
- // BLU returns a null UnlockedState.ID so we can't use it to pick the job image.
- if (data.Character.ActiveClassJob.UnlockedState.ID != null) {
- ctx.drawImage(this.imgJobBg[data.Character.ActiveClassJob.UnlockedState.ID], 450, 4, rectFullWidth, 110);
- } else {
- ctx.drawImage(this.imgJobBg[36], 450, 4, rectFullWidth, 110);
- }
-
- ctx.fillRect(rectStartX, rectStartRow2Y, rectHalfWidth, rectHeightRow2);
- ctx.fillRect(rectStartXHalf, rectStartRow2Y, rectHalfWidth, rectHeightRow2);
-
- ctx.fillRect(rectStartX, rectStartRow3Y, rectFullWidth, rectHeightRow3); //info
- ctx.fillRect(rectStartX, rectStartRow4Y, rectFullWidth, rectHeightRow4); // bozja
- ctx.fillRect(rectStartX, rectStartRow5Y, rectFullWidth, rectHeightRow5);
- ctx.stroke();
-
- ctx.textAlign = "center";
- ctx.font = med;
+ // Draw non data dependent text
+ ctx.textAlign = 'left';
+ ctx.font = small;
ctx.fillStyle = primary;
-
- if (data.Character.Title.Name !== undefined)
- ctx.fillText(data.Character.Title.Name, 450, 40);
+ ctx.fillText(strings.raceAndClan, 480, infoTextSmallStartY); // Race & Clan
+ ctx.fillText(strings.guardian, 480, infoTextSmallStartY + infoTextSpacing); // Guardian
+ ctx.fillText(strings.elementalLevel, 480, 425); // Elemental level
+ ctx.fillText(strings.resistanceRank, 480, 475); // Resistance rank
- ctx.font = small;
- ctx.fillText(`${data.Character.Server} (${data.Character.DC})`, 450, 100);
-
- // Race, Clan, Guardian, GC, FC Titles
- ctx.font = small;
- ctx.textAlign = "left";
- ctx.fillText("Race & Clan", 480, infoTextSmallStartY);
- ctx.fillText("Guardian", 480, infoTextSmallStartY + infoTextSpacing);
- if (data.Character.GrandCompany.Company != null) {
- ctx.fillText("Grand Company", 480, infoTextSmallStartY + infoTextSpacing * 2);
- }
- if (data.Character.FreeCompanyName != null) {
- ctx.fillText("Free Company", 480, infoTextSmallStartY + infoTextSpacing * 3);
- }
- ctx.fillText("Elemental Level", 480, 425);
- ctx.fillText("Resistance Rank", 480, 475);
-
-
- ctx.fillStyle = grey;
- ctx.font = smed;
-
- var ilvl = this.getItemLevel(data.Character.GearSet.Gear);
- ctx.drawImage(this.imgShadow, 441 - 143, 110, 170, 90);
- ctx.drawImage(this.imgIlvl, 441 - 92, 132, 24, 27);
- ctx.fillText(ilvl, 441 - 65, 155);
-
- ctx.fillStyle = white;
- ctx.font = large;
-
- ctx.textAlign = "center";
- // Chara Name
- if (data.Character.Title === undefined || data.Character.Title.Name == null || data.Character.Title.Name == "") {
- ctx.fillText(data.Character.Name, 450, 80);
- } else {
- ctx.fillText(data.Character.Name, 450, 80);
- }
- // Race, Clan, Guardian, GC, FC Info
- ctx.font = smed;
- ctx.textAlign = "left";
- ctx.fillText(`${data.Character.Race.Name}, ${data.Character.Tribe.Name}`, 480, infoTextBigStartY);
-
- ctx.fillText(data.Character.GuardianDeity.Name, 480, infoTextBigStartY + infoTextSpacing);
- var deityIcon = await loadImage('https://xivapi.com/' + data.Character.GuardianDeity.Icon);
- ctx.drawImage(deityIcon, deityIconX, deityIconY, 28, 28);
-
- if (data.Character.GrandCompany.Company != null) {
- ctx.fillText(data.Character.GrandCompany.Company.Name, 480, infoTextBigStartY + infoTextSpacing * 2);
-
- var gcRankIcon = await loadImage('https://xivapi.com/' + data.Character.GrandCompany.Rank.Icon);
- ctx.drawImage(gcRankIcon, gcRankIconX, gcRankIconY, 40, 40);
- }
-
- if (data.Character.FreeCompanyName != null) {
- var crestImage = await this.createCrest(data.FreeCompany.Crest);
-
- if (crestImage !== null)
- ctx.drawImage(crestImage, fcCrestX, fcCrestY, fcCrestScale, fcCrestScale);
-
-
- const fcMeasure = ctx.measureText(data.Character.FreeCompanyName);
- ctx.fillText(data.Character.FreeCompanyName, 480, infoTextBigStartY + infoTextSpacing * 3);
-
- ctx.fillStyle = grey;
- ctx.font = small;
- ctx.fillText(`«${data.FreeCompany.Tag}»`, 480 + fcMeasure.width + 10, infoTextBigStartY + infoTextSpacing * 3);
- }
-
- ctx.font = smed;
- ctx.fillStyle = white;
-
- if (data.Character.ClassJobsElemental.Level != null) {
- ctx.fillText(`Level ${data.Character.ClassJobsElemental.Level}`, 480, 450);
- } else {
- ctx.fillText(`Level 0`, 480, 450);
- }
-
- if (data.Character.ClassJobsBozjan.Level != null) {
- ctx.fillText(`Rank ${data.Character.ClassJobsBozjan.Level}`, 480, 500);
- } else {
- ctx.fillText(`Rank 0`, 480, 500);
- }
-
- // Minion & Mount percentages
- var mountsPct = '0';
- if (data.Mounts !== null) {
- mountsPct = Math.ceil((data.Mounts.length / this.countMount) * 100);
- }
-
- var minionsPct = '0';
- if (data.Minions !== null) {
- minionsPct = Math.ceil((data.Minions.length / this.countMinion) * 100);
- }
-
- const mountsMeasure = ctx.measureText(`${mountsPct}%`);
- const minionsMeasure = ctx.measureText(`${minionsPct}%`);
-
- ctx.fillText(`${mountsPct}%`, 480, textMountMinionY);
- ctx.fillText(`${minionsPct}%`, 685, textMountMinionY);
-
- ctx.fillStyle = grey;
- ctx.font = small;
-
- ctx.fillText("Mounts", 480 + mountsMeasure.width + 5, textMountMinionY);
- ctx.fillText("Minions", 685 + minionsMeasure.width + 5, textMountMinionY);
-
- ctx.drawImage(this.imgMount, 620, iconMountMinionY, 32, 32);
- ctx.drawImage(this.imgMinion, 834, iconMountMinionY, 19, 32);
-
- ctx.fillStyle = white;
-
-
- // Why are there so many fucking jobs in this game?
- // Crafting
- ctx.textAlign = "center";
-
- var cJobsRowTextX = jobsRowTextStartX;
- ctx.drawImage(this.imgAlchemist, 480, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[24].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgArmorer, 510, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[20].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgBlacksmith, 540, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[19].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgCarpenter, 570, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[18].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgCulinarian, 600, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[25].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgGoldsmith, 630, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[21].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgLeatherworker, 660, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[22].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgWeaver, 690, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[23].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSpacer;
-
- // Gathering
- ctx.drawImage(this.imgBotanist, 750, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[27].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgFisher, 780, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[28].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgMiner, 810, jobsRowIcon3Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[26].Level, cJobsRowTextX, jobsRowText3Y);
- cJobsRowTextX += jobsRowTextSize;
-
- // Tanks
- cJobsRowTextX = jobsRowTextStartX;
-
- if (data.Character.ClassJobs[0].UnlockedState.ID == 19) {
- ctx.drawImage(this.imgPaladin, 480, jobsRowIcon1Y, 30, 30);
- } else {
- ctx.drawImage(this.imgGladiator, 480, jobsRowIcon1Y, 30, 30);
- }
- ctx.fillText(data.Character.ClassJobs[0].Level, cJobsRowTextX, jobsRowText1Y);
- cJobsRowTextX += jobsRowTextSize;
-
- if (data.Character.ClassJobs[1].UnlockedState.ID == 21) {
- ctx.drawImage(this.imgWarrior, 510, jobsRowIcon1Y, 30, 30);
- } else {
- ctx.drawImage(this.imgMarauder, 510, jobsRowIcon1Y, 30, 30);
- }
- ctx.fillText(data.Character.ClassJobs[1].Level, cJobsRowTextX, jobsRowText1Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgDarkKnight, 540, jobsRowIcon1Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[2].Level, cJobsRowTextX, jobsRowText1Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgGunbreaker, 570, jobsRowIcon1Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[3].Level, cJobsRowTextX, jobsRowText1Y);
- cJobsRowTextX += jobsRowTextSpacer;
-
- // Healers
- if (data.Character.ClassJobs[8].UnlockedState.ID == 24) {
- ctx.drawImage(this.imgWhitemage, 630, jobsRowIcon1Y, 30, 30);
- } else {
- ctx.drawImage(this.imgConjurer, 630, jobsRowIcon1Y, 30, 30);
- }
- ctx.fillText(data.Character.ClassJobs[8].Level, cJobsRowTextX, jobsRowText1Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgScholar, 660, jobsRowIcon1Y, 30, 30);
- if (data.Character.ClassJobs[9].Level >= 30) {
- ctx.fillText(data.Character.ClassJobs[9].Level, cJobsRowTextX, jobsRowText1Y);
- } else {
- ctx.fillText("0", cJobsRowTextX, jobsRowText1Y);
- }
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgAstrologian, 690, jobsRowIcon1Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[10].Level, cJobsRowTextX, jobsRowText1Y);
- cJobsRowTextX += jobsRowTextSpacer;
-
- // DPS
- // Ranged
- if (data.Character.ClassJobs[11].UnlockedState.ID == 23) {
- ctx.drawImage(this.imgBard, 750, jobsRowIcon1Y, 30, 30);
- } else {
- ctx.drawImage(this.imgArcher, 750, jobsRowIcon1Y, 30, 30);
- }
- ctx.fillText(data.Character.ClassJobs[11].Level, cJobsRowTextX, jobsRowText1Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgMachinist, 780, jobsRowIcon1Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[12].Level, cJobsRowTextX, jobsRowText1Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgDancer, 810, jobsRowIcon1Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[13].Level, cJobsRowTextX, jobsRowText1Y);
- cJobsRowTextX += jobsRowTextSize;
-
- // Melee
- cJobsRowTextX = jobsRowTextStartX;
-
- if (data.Character.ClassJobs[5].UnlockedState.ID == 22) {
- ctx.drawImage(this.imgDragoon, 480, jobsRowIcon2Y, 30, 30);
- } else {
- ctx.drawImage(this.imgLancer, 480, jobsRowIcon2Y, 30, 30);
- }
- ctx.fillText(data.Character.ClassJobs[5].Level, cJobsRowTextX, jobsRowText2Y);
- cJobsRowTextX += jobsRowTextSize;
-
- if (data.Character.ClassJobs[4].UnlockedState.ID == 20) {
- ctx.drawImage(this.imgMonk, 510, jobsRowIcon2Y, 30, 30);
- } else {
- ctx.drawImage(this.imgPugilist, 510, jobsRowIcon2Y, 30, 30);
- }
- ctx.fillText(data.Character.ClassJobs[4].Level, cJobsRowTextX, jobsRowText2Y);
- cJobsRowTextX += jobsRowTextSize;
-
- if (data.Character.ClassJobs[6].UnlockedState.ID == 30) {
- ctx.drawImage(this.imgNinja, 540, jobsRowIcon2Y, 30, 30);
- } else {
- ctx.drawImage(this.imgRogue, 540, jobsRowIcon2Y, 30, 30);
- }
- ctx.fillText(data.Character.ClassJobs[6].Level, cJobsRowTextX, jobsRowText2Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgSamurai, 570, jobsRowIcon2Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[7].Level, cJobsRowTextX, jobsRowText2Y);
- cJobsRowTextX += jobsRowTextSpacer;
-
- // Caster
- if (data.Character.ClassJobs[14].UnlockedState.ID == 25) {
- ctx.drawImage(this.imgBlackmage, 630, jobsRowIcon2Y, 30, 30);
- } else {
- ctx.drawImage(this.imgThaumaturge, 630, jobsRowIcon2Y, 30, 30);
- }
- ctx.fillText(data.Character.ClassJobs[14].Level, cJobsRowTextX, jobsRowText2Y);
- cJobsRowTextX += jobsRowTextSize;
-
- if (data.Character.ClassJobs[15].UnlockedState.ID == 27) {
- ctx.drawImage(this.imgSummoner, 660, jobsRowIcon2Y, 30, 30);
- } else {
- ctx.drawImage(this.imgArcanist, 660, jobsRowIcon2Y, 30, 30);
- }
- ctx.fillText(data.Character.ClassJobs[15].Level, cJobsRowTextX, jobsRowText2Y);
- cJobsRowTextX += jobsRowTextSize;
-
- ctx.drawImage(this.imgRedmage, 690, jobsRowIcon2Y, 30, 30);
- ctx.fillText(data.Character.ClassJobs[16].Level, cJobsRowTextX, jobsRowText2Y);
- cJobsRowTextX += jobsRowTextSize;
-
- // Limited
- ctx.drawImage(this.imgBluemage, 780, jobsRowIcon2Y, 33, 33);
- ctx.fillText(data.Character.ClassJobs[17].Level, 796, jobsRowText2Y);
-
- ctx.textAlign = "left";
- ctx.fillStyle = black;
ctx.font = copyright;
+ ctx.fillStyle = black;
+ ctx.fillText(`© 2010 - ${new Date().getFullYear()} SQUARE ENIX CO., LTD. All Rights Reserved`, rectStartX, 720 - 5); // Copyright
+ ctx.restore(); ctx.save();
- ctx.fillText(`© 2010 - ${this.copyrightYear} SQUARE ENIX CO., LTD. All Rights Reserved`, rectStartX, 720 - 5);
+ // Draw non data dependent images
+ ctx.drawImage(this.images.shadow, 441 - 143, 110, 170, 90); // Item level shadow
+ ctx.drawImage(this.images.ilvl, 441 - 92, 132, 24, 27); // Item level icon
+ ctx.drawImage(this.images.mount, 620, iconMountMinionY, 32, 32); // Mount icon
+ ctx.drawImage(this.images.minion, 834, iconMountMinionY, 19, 32); // Minion icon
+
+ // Draw non data dependent job icons
+ {
+ ctx.drawImage(this.cjIcons.darkknight, 540, jobsRowIcon1Y, 30, 30); // Darkknight
+ ctx.drawImage(this.cjIcons.gunbreaker, 570, jobsRowIcon1Y, 30, 30); // Gunbreaker
+ ctx.drawImage(this.cjIcons.scholar, 660, jobsRowIcon1Y, 30, 30); // Scholar
+ ctx.drawImage(this.cjIcons.astrologian, 690, jobsRowIcon1Y, 30, 30); // Astrologian
+
+ ctx.drawImage(this.cjIcons.machinist, 780, jobsRowIcon1Y, 30, 30); // Machinist
+ ctx.drawImage(this.cjIcons.dancer, 810, jobsRowIcon1Y, 30, 30); // Dancer
+ ctx.drawImage(this.cjIcons.samurai, 570, jobsRowIcon2Y, 30, 30); // Samurai
+ ctx.drawImage(this.cjIcons.redmage, 690, jobsRowIcon2Y, 30, 30); // Redmage
+ ctx.drawImage(this.cjIcons.bluemage, 780, jobsRowIcon2Y, 33, 33); // Bluemage
+
+ ctx.drawImage(this.cjIcons.carpenter, 480, jobsRowIcon3Y, 30, 30); // Carpenter
+ ctx.drawImage(this.cjIcons.blacksmith, 510, jobsRowIcon3Y, 30, 30); // Blacksmith
+ ctx.drawImage(this.cjIcons.armorer, 540, jobsRowIcon3Y, 30, 30); // Armorer
+ ctx.drawImage(this.cjIcons.goldsmith, 570, jobsRowIcon3Y, 30, 30); // Goldsmith
+ ctx.drawImage(this.cjIcons.leatherworker, 600, jobsRowIcon3Y, 30, 30); // Leatherworker
+ ctx.drawImage(this.cjIcons.weaver, 630, jobsRowIcon3Y, 30, 30); // Weaver
+ ctx.drawImage(this.cjIcons.alchemist, 660, jobsRowIcon3Y, 30, 30); // Alchemist
+ ctx.drawImage(this.cjIcons.culinarian, 690, jobsRowIcon3Y, 30, 30); // Culinarian
+ ctx.drawImage(this.cjIcons.miner, 750, jobsRowIcon3Y, 30, 30); // Miner
+ ctx.drawImage(this.cjIcons.botanist, 780, jobsRowIcon3Y, 30, 30); // Botanist
+ ctx.drawImage(this.cjIcons.fisher, 810, jobsRowIcon3Y, 30, 30); // Fisher
+ }
+
+ // Draw info from character data
+ const { Character, FreeCompany, Mounts, Minions } = await dataPromise;
+
+ // Header
+ {
+ const activeClassJob = Character.ActiveClassJob.UnlockedState.ID ?? 36; // BLU returns a null UnlockedState.ID so we can't use it to pick the job image
+ ctx.drawImage(this.jobBackgrounds[activeClassJob - 1], 450, 4, rectFullWidth, 110); // Current class/job background
+
+ ctx.textAlign = 'center';
+ ctx.font = med;
+ ctx.fillStyle = primary;
+ if (Character.Title.Name != null) ctx.fillText(Character.Title.Name, 450, 40); // Character title
+
+ ctx.font = small;
+ ctx.fillText(`${Character.Server} (${Character.DC})`, 450, 100); // Character service & DC
+
+ ctx.font = large;
+ ctx.fillStyle = white;
+ ctx.fillText(Character.Name, 450, 80); // Character name
+ ctx.restore(); ctx.save();
+ }
+
+ // Item level
+ {
+ ctx.font = smed;
+ ctx.fillStyle = grey;
+ ctx.fillText(this.getItemLevel(Character.GearSet.Gear), 441 - 65, 155); // Item level
+ ctx.restore(); ctx.save();
+ }
+
+ // Mounts & Minions
+ {
+ const mountsPercentage = Math.ceil(((Mounts.length ?? 0) / this.mountCount) * 100);
+ const minionsPercentage = Math.ceil(((Minions.length ?? 0) / this.minionCount) * 100);
+
+ ctx.font = smed;
+ ctx.fillStyle = white;
+ const mountsMeasure = ctx.measureText(`${mountsPercentage}%`);
+ const minionsMeasure = ctx.measureText(`${minionsPercentage}%`);
+ ctx.fillText(`${mountsPercentage}%`, 480, textMountMinionY); // Mounts percentage
+ ctx.fillText(`${minionsPercentage}%`, 685, textMountMinionY); // Minions percentage
+
+ ctx.font = small;
+ ctx.fillStyle = grey;
+ ctx.fillText(strings.mounts, 480 + mountsMeasure.width + 5, textMountMinionY); // Mounts
+ ctx.fillText(strings.minions, 685 + minionsMeasure.width + 5, textMountMinionY); // Minions
+ ctx.restore(); ctx.save();
+ }
+
+ // Character information
+ {
+ ctx.font = smed;
+ ctx.fillStyle = white;
+ ctx.fillText(`${Character.Race.Name}, ${Character.Tribe.Name}`, 480, infoTextBigStartY); // Race & Clan
+ ctx.fillText(Character.GuardianDeity.Name, 480, infoTextBigStartY + infoTextSpacing); // Guardian
+
+ if (Character.GrandCompany.Company != null) {
+ ctx.font = small;
+ ctx.fillStyle = primary;
+ ctx.fillText(strings.grandCompany, 480, infoTextSmallStartY + infoTextSpacing * 2); // Grand Company
+
+ ctx.font = smed;
+ ctx.fillStyle = white;
+ ctx.fillText(Character.GrandCompany.Company.Name.replace('[p]', ''), 480, infoTextBigStartY + infoTextSpacing * 2); // Grand Company name
+ }
+
+ if (Character.FreeCompanyName != null) {
+ ctx.font = small;
+ ctx.fillStyle = primary;
+ ctx.fillText(strings.freeCompany, 480, infoTextSmallStartY + infoTextSpacing * 3); // Free Company
+
+ ctx.font = smed;
+ ctx.fillStyle = white;
+ ctx.fillText(Character.FreeCompanyName, 480, infoTextBigStartY + infoTextSpacing * 3); // Free Company name
+
+ const nameMeasure = ctx.measureText(Character.FreeCompanyName);
+ ctx.font = small;
+ ctx.fillStyle = grey;
+ ctx.fillText(`«${FreeCompany.Tag}»`, 480 + nameMeasure.width + 10, infoTextBigStartY + infoTextSpacing * 3); // Free Company tag
+ }
+ ctx.restore(); ctx.save();
+ }
+
+ // Eureka & Bozja
+ {
+ ctx.font = smed;
+ ctx.fillStyle = white;
+ ctx.fillText(`${strings.eurekaLevel} ${Character.ClassJobsElemental.Level ?? 0}`, 480, 450); // Elemental level
+ ctx.fillText(`${strings.bozjaRank} ${Character.ClassJobsBozjan.Level ?? 0}`, 480, 500); // Resistance rank
+ ctx.restore(); ctx.save();
+ }
+
+ // Classes & Jobs - data dependant job or class icons
+ {
+ const { ClassJobs } = Character;
+ ctx.drawImage(this.classOrJobIcon(ClassJobs[0], 19, 'gladiator', 'paladin'), 480, jobsRowIcon1Y, 30, 30); // Gladiator/Paladin
+ ctx.drawImage(this.classOrJobIcon(ClassJobs[1], 21, 'marauder', 'warrior'), 510, jobsRowIcon1Y, 30, 30); // Marauder/Warrior
+ ctx.drawImage(this.classOrJobIcon(ClassJobs[8], 24, 'conjurer', 'whitemage'), 630, jobsRowIcon1Y, 30, 30); // Conjurer/Whitemage
+ ctx.drawImage(this.classOrJobIcon(ClassJobs[11], 23, 'archer', 'bard'), 750, jobsRowIcon1Y, 30, 30); // Archer/Bard
+ ctx.drawImage(this.classOrJobIcon(ClassJobs[5], 22, 'lancer', 'dragoon'), 480, jobsRowIcon2Y, 30, 30); // Lancer/Dragoon
+ ctx.drawImage(this.classOrJobIcon(ClassJobs[4], 20, 'pugilist', 'monk'), 510, jobsRowIcon2Y, 30, 30); // Monk/Pugilist
+ ctx.drawImage(this.classOrJobIcon(ClassJobs[6], 30, 'rogue', 'ninja'), 540, jobsRowIcon2Y, 30, 30); // Ninja/Rogue
+ ctx.drawImage(this.classOrJobIcon(ClassJobs[14], 25, 'thaumaturge', 'blackmage'), 630, jobsRowIcon2Y, 30, 30); // Thaumaturge/Blackmage
+ ctx.drawImage(this.classOrJobIcon(ClassJobs[15], 27, 'arcanist', 'summoner'), 660, jobsRowIcon2Y, 30, 30); // Summoner/Arcanist
+ }
+
+ // Classes & Jobs - levels
+ {
+ ctx.textAlign = 'center';
+ ctx.font = small;
+ ctx.fillStyle = white;
+
+ const { ClassJobs } = Character;
+
+ // First row
+ let rowTextX = jobsRowTextStartX;
+ ctx.fillText(ClassJobs[0].Level, rowTextX, jobsRowText1Y); // Gladiator/Paladin
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[1].Level, rowTextX, jobsRowText1Y); // Marauder/Warrior
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[2].Level, rowTextX, jobsRowText1Y); // Darkknight
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[3].Level, rowTextX, jobsRowText1Y); // Gunbreaker
+ rowTextX += jobsRowTextSpacer;
+ ctx.fillText(ClassJobs[8].Level, rowTextX, jobsRowText1Y); // Conjurer/Whitemage
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[9].Level >= 30 ? ClassJobs[9].Level : '0', rowTextX, jobsRowText1Y); // Scholar
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[10].Level, rowTextX, jobsRowText1Y); // Astrologian
+ rowTextX += jobsRowTextSpacer;
+ ctx.fillText(ClassJobs[11].Level, rowTextX, jobsRowText1Y); // Archer/Bard
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[12].Level, rowTextX, jobsRowText1Y); // Machinist
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[13].Level, rowTextX, jobsRowText1Y); // Dancer
+
+ // Second row
+ rowTextX = jobsRowTextStartX;
+ ctx.fillText(ClassJobs[5].Level, rowTextX, jobsRowText2Y); // Lancer/Dragoon
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[4].Level, rowTextX, jobsRowText2Y); // Monk/Pugilist
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[6].Level, rowTextX, jobsRowText2Y); // Ninja/Rogue
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[7].Level, rowTextX, jobsRowText2Y); // Samurai
+ rowTextX += jobsRowTextSpacer;
+ ctx.fillText(ClassJobs[14].Level, rowTextX, jobsRowText2Y); // Thaumaturge/Blackmage
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[15].Level, rowTextX, jobsRowText2Y); // Summoner/Arcanist
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[16].Level, rowTextX, jobsRowText2Y); // Redmage
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[17].Level, 796, jobsRowText2Y); // Bluemage
+
+ // Third row
+ rowTextX = jobsRowTextStartX;
+ ctx.fillText(ClassJobs[18].Level, rowTextX, jobsRowText3Y); // Carpenter
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[19].Level, rowTextX, jobsRowText3Y); // Blacksmith
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[20].Level, rowTextX, jobsRowText3Y); // Armorer
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[21].Level, rowTextX, jobsRowText3Y); // Goldsmith
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[22].Level, rowTextX, jobsRowText3Y); // Leatherworker
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[23].Level, rowTextX, jobsRowText3Y); // Weaver
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[24].Level, rowTextX, jobsRowText3Y); // Alchemist
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[25].Level, rowTextX, jobsRowText3Y); // Culinarian
+ rowTextX += jobsRowTextSpacer;
+ ctx.fillText(ClassJobs[26].Level, rowTextX, jobsRowText3Y); // Miner
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[27].Level, rowTextX, jobsRowText3Y); // Botanist
+ rowTextX += jobsRowTextSize;
+ ctx.fillText(ClassJobs[28].Level, rowTextX, jobsRowText3Y); // Fisher
+ }
+
+ // Remaining asynchronous drawing
+ {
+ await Promise.all([
+ portraitPromise.then(portrait => ctx.drawImage(portrait, 0, 120, 441, 600)),
+ deityPromise.then(deityIcon => ctx.drawImage(deityIcon, deityIconX, deityIconY, 28, 28)),
+ gcRankPromise.then(gcRankIcon => {
+ if (gcRankIcon != null) ctx.drawImage(gcRankIcon, gcRankIconX, gcRankIconY, 40, 40);
+ }),
+ fcCrestPromise.then(fcCrestIcon => {
+ if (fcCrestIcon != null) ctx.drawImage(fcCrestIcon, fcCrestX, fcCrestY, fcCrestScale, fcCrestScale);
+ }),
+ ]);
+ }
return canvas.toBuffer();
}
@@ -691,7 +647,7 @@ exports.CardCreator = CardCreator;
diff --git a/index.html b/index.html
index cf4c8fb..ec11fe1 100644
--- a/index.html
+++ b/index.html
@@ -46,61 +46,54 @@
XIV Character Cards
-API to create fancy cards for FFXIV characters based on their Lodestone data, hosted at https://ffxiv-character-cards.herokuapp.com.
+Library and API to create fancy cards for FFXIV characters based on their Lodestone data, powered by xivapi.com and hosted at https://ffxiv-character-cards.herokuapp.com.
-Endpoints
-Getting images
-https://ffxiv-character-cards.herokuapp.com/characters/id/<LODESTONE ID>.png
-
Get the PNG for a character by its Lodestone ID.
+API
+All API calls support the lang query parameter to create a character card with information in the specified language. The supported languages are the same as xivapi.com, which are English (en), Japanese (ja), German (de) and French (fr).
+E.g. a request for a german character card would look like this: https://ffxiv-character-cards.herokuapp.com/characters/id/<LODESTONE ID>.png?lang=de
+Getting a card for a character by its Lodestone ID
+GET https://ffxiv-character-cards.herokuapp.com/characters/id/<LODESTONE ID>.png
+Getting card for a character by its world and name
+GET https://ffxiv-character-cards.herokuapp.com/characters/name/<WORLD>/<CHARACTER NAME>.png
+
Note: This is considerably slower than the creation by ID, since the character has to be looked up in the Lodestone first.
-https://ffxiv-character-cards.herokuapp.com/characters/name/<WORLD>/<CHARACTER NAME>.png
-
Get the PNG for a character by its world and name.
-Requesting images to be cached
-If you are using this API together with an application that requires the API to respond very quickly, like Discord, you need to ask it to "prepare" the image for a character beforehand.
-https://ffxiv-character-cards.herokuapp.com/prepare/id/<LODESTONE ID>
-
Request a character image to be cached by its Lodestone ID.
-
-https://ffxiv-character-cards.herokuapp.com/prepare/name/<WORLD>/<CHARACTER NAME>
-
Request a character image to be cached by its world and name.
-The API will reply with its status, and in case of success, the URL to the final image.
+
If you are using this API together with an application that requires the API to respond very quickly, like Discord, you may need to ask it to "prepare" the card image for a character beforehand. The API will reply with its status, and in case of success, the URL to the final image.
{"status":"ok","url":"/characters/id/123456789.png"}
-Using in your application
-yarn add xiv-character-cards
+Requesting a card to be cached for a character by its Lodestone ID
+GET https://ffxiv-character-cards.herokuapp.com/prepare/id/<LODESTONE ID>
+Requesting a card to be cached for a character by its world and name
+GET https://ffxiv-character-cards.herokuapp.com/prepare/name/<WORLD>/<CHARACTER NAME>
+Library
+To use the card creator as a library in your Node.JS application, first install it as a dependency with:
+yarn add xiv-character-cards
# or
npm i xiv-character-cards
-You will receive a PNG-buffer for you to use in your bot or application.
Check index.js for other usage examples.
-Example
+You can then instantiate the class CardCreator from the library, call the asynchronous insureInit() function to make sure all resources are loaded and then use the asynchronous createCard() function with your characters Lodestone ID. You will receive a promise that resolves to a Buffer of the PNG image of your card, that you can use in your bot or application.
+Check the library documentation for more details.
+
+Note: The API server is not published as an NPM package, so if you want to host it yourself, clone the Github repository and put the Express.JS webserver defined in the index.js file behind a reverse proxy.
+
+Library example
const { CardCreator } = require("xiv-character-cards");
-const fs = require("fs");
+const { writeFileSync } = require("fs");
-const card = new CardCreator();
-const lodestoneid = "13821878";
+const creator = new CardCreator();
+const lodestoneId = "13821878";
-function example(cb) {
- card.ensureInit()
- .then(
- () => card.createCard(lodestoneid),
- (reason) => cb("Init failed: " + reason, null)
- )
- .then((image) =>
- cb(null, {
- binary: {
- image: image,
- },
- })
- )
- .catch((reason) => cb("createCard failed: " + reason, null));
+async function example() {
+ await creator.ensureInit();
+ return creator.createCard(lodestoneId);
}
-example((err, response) => {
- const buffer = response.binary.image;
- fs.writeFileSync(`./${lodestoneid}.png`, response.binary.image, (err) => {
- if (err) {
- console.log(err);
- }
+example()
+ .then(card => {
+ writeFileSync(`./${lodestoneId}.png`, card);
+ })
+ .catch(error => {
+ console.error('Creator initialization or card creation failed!');
+ console.error(error);
});
-});