chore: apply prettier with new conf
This commit is contained in:
Helias
parent
6a4720e59b
commit
db2a04c03f
13 changed files with 2107 additions and 2109 deletions
|
|
@ -1,118 +1,118 @@
|
|||
function waitForEmblemImages($emblem) {
|
||||
return Promise.all(
|
||||
$emblem.find('.images img').map((idx, img) => {
|
||||
return new Promise((res, rej) => {
|
||||
if (img.complete) {
|
||||
res();
|
||||
} else {
|
||||
img.addEventListener('load', res);
|
||||
img.addEventListener('error', rej);
|
||||
}
|
||||
});
|
||||
}),
|
||||
);
|
||||
return Promise.all(
|
||||
$emblem.find(".images img").map((idx, img) => {
|
||||
return new Promise((res, rej) => {
|
||||
if (img.complete) {
|
||||
res();
|
||||
} else {
|
||||
img.addEventListener("load", res);
|
||||
img.addEventListener("error", rej);
|
||||
}
|
||||
});
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
function createGuildEmblem(emblem, el) {
|
||||
const $emblem = $(el);
|
||||
const canvas = $emblem.find('canvas')[0];
|
||||
const ctx = canvas.getContext('2d');
|
||||
const $emblem = $(el);
|
||||
const canvas = $emblem.find("canvas")[0];
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
const imgUrl = (type, section, value, value2) =>
|
||||
`${handlebarsData.websiteRoot}/img/guild-emblems/${type}_${value}${value2 ? '_' + value2 : ''}_T${section}_U.PNG`;
|
||||
const imgUrl = (type, section, value, value2) =>
|
||||
`${handlebarsData.websiteRoot}/img/guild-emblems/${type}_${value}${value2 ? "_" + value2 : ""}_T${section}_U.PNG`;
|
||||
|
||||
const $images = $('<div>').addClass('images').appendTo($emblem);
|
||||
const bgUpper = $('<img>').attr('src', imgUrl('Background', 'U', emblem.background)).appendTo($images)[0];
|
||||
const bgLower = $('<img>').attr('src', imgUrl('Background', 'L', emblem.background)).appendTo($images)[0];
|
||||
const iconUpper = $('<img>').attr('src', imgUrl('Emblem', 'U', emblem.icon, emblem.iconColor)).appendTo($images)[0];
|
||||
const iconLower = $('<img>').attr('src', imgUrl('Emblem', 'L', emblem.icon, emblem.iconColor)).appendTo($images)[0];
|
||||
const borderUpper = $('<img>').attr('src', imgUrl('Border', 'U', emblem.border, emblem.borderColor)).appendTo($images)[0];
|
||||
const borderLower = $('<img>').attr('src', imgUrl('Border', 'L', emblem.border, emblem.borderColor)).appendTo($images)[0];
|
||||
const $images = $("<div>").addClass("images").appendTo($emblem);
|
||||
const bgUpper = $("<img>").attr("src", imgUrl("Background", "U", emblem.background)).appendTo($images)[0];
|
||||
const bgLower = $("<img>").attr("src", imgUrl("Background", "L", emblem.background)).appendTo($images)[0];
|
||||
const iconUpper = $("<img>").attr("src", imgUrl("Emblem", "U", emblem.icon, emblem.iconColor)).appendTo($images)[0];
|
||||
const iconLower = $("<img>").attr("src", imgUrl("Emblem", "L", emblem.icon, emblem.iconColor)).appendTo($images)[0];
|
||||
const borderUpper = $("<img>").attr("src", imgUrl("Border", "U", emblem.border, emblem.borderColor)).appendTo($images)[0];
|
||||
const borderLower = $("<img>").attr("src", imgUrl("Border", "L", emblem.border, emblem.borderColor)).appendTo($images)[0];
|
||||
|
||||
const drawEmblemLayer = (ctx, layer) => {
|
||||
const [upper, lower] = layer;
|
||||
const drawEmblemLayer = (ctx, layer) => {
|
||||
const [upper, lower] = layer;
|
||||
|
||||
const w = upper.width / 2;
|
||||
const uh = upper.height;
|
||||
const lh = lower.height;
|
||||
const w = upper.width / 2;
|
||||
const uh = upper.height;
|
||||
const lh = lower.height;
|
||||
|
||||
ctx.drawImage(upper, 0, 0, w, uh, w, 0, w, uh);
|
||||
ctx.drawImage(lower, 0, 0, w, lh, w, upper.height, w, lh);
|
||||
ctx.save();
|
||||
ctx.scale(-1, 1);
|
||||
ctx.drawImage(upper, 0, 0, w, uh, 0, 0, -w, uh);
|
||||
ctx.drawImage(lower, 0, 0, w, lh, 0, upper.height, -w, lh);
|
||||
ctx.restore();
|
||||
};
|
||||
ctx.drawImage(upper, 0, 0, w, uh, w, 0, w, uh);
|
||||
ctx.drawImage(lower, 0, 0, w, lh, w, upper.height, w, lh);
|
||||
ctx.save();
|
||||
ctx.scale(-1, 1);
|
||||
ctx.drawImage(upper, 0, 0, w, uh, 0, 0, -w, uh);
|
||||
ctx.drawImage(lower, 0, 0, w, lh, 0, upper.height, -w, lh);
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
waitForEmblemImages($emblem).then(() => {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(26, 0);
|
||||
ctx.lineTo(64, 28);
|
||||
ctx.lineTo(102, 0);
|
||||
ctx.lineTo(128, 0);
|
||||
ctx.lineTo(128, 96);
|
||||
ctx.lineTo(0, 96);
|
||||
ctx.closePath();
|
||||
ctx.clip();
|
||||
drawEmblemLayer(ctx, [bgUpper, bgLower]);
|
||||
drawEmblemLayer(ctx, [iconUpper, iconLower]);
|
||||
drawEmblemLayer(ctx, [borderUpper, borderLower]);
|
||||
});
|
||||
waitForEmblemImages($emblem).then(() => {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(26, 0);
|
||||
ctx.lineTo(64, 28);
|
||||
ctx.lineTo(102, 0);
|
||||
ctx.lineTo(128, 0);
|
||||
ctx.lineTo(128, 96);
|
||||
ctx.lineTo(0, 96);
|
||||
ctx.closePath();
|
||||
ctx.clip();
|
||||
drawEmblemLayer(ctx, [bgUpper, bgLower]);
|
||||
drawEmblemLayer(ctx, [iconUpper, iconLower]);
|
||||
drawEmblemLayer(ctx, [borderUpper, borderLower]);
|
||||
});
|
||||
}
|
||||
|
||||
function createArenaEmblem(teamSize, emblem, el) {
|
||||
const $emblem = $(el);
|
||||
const canvas = $emblem.find('canvas')[0];
|
||||
const ctx = canvas.getContext('2d');
|
||||
const $emblem = $(el);
|
||||
const canvas = $emblem.find("canvas")[0];
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
const imgUrl = (teamSize, type, value) =>
|
||||
`${handlebarsData.websiteRoot}/img/arena-banners/PVP-Banner${teamSize ? '-' + teamSize : ''}${type ? '-' + type : ''}${
|
||||
value ? '-' + value : ''
|
||||
}.PNG`;
|
||||
const imgUrl = (teamSize, type, value) =>
|
||||
`${handlebarsData.websiteRoot}/img/arena-banners/PVP-Banner${teamSize ? "-" + teamSize : ""}${type ? "-" + type : ""}${
|
||||
value ? "-" + value : ""
|
||||
}.PNG`;
|
||||
|
||||
const $images = $('<div>').addClass('images').appendTo($emblem);
|
||||
const banner = $('<img>').attr('src', imgUrl(teamSize)).appendTo($images)[0];
|
||||
const bannerCrop = $('<img>').attr('src', imgUrl(teamSize, 'Crop')).appendTo($images)[0];
|
||||
const border = $('<img>').attr('src', imgUrl(teamSize, 'Border', emblem.border)).appendTo($images)[0];
|
||||
const icon = $('<img>').attr('src', imgUrl(undefined, 'Emblem', emblem.icon)).appendTo($images)[0];
|
||||
const $images = $("<div>").addClass("images").appendTo($emblem);
|
||||
const banner = $("<img>").attr("src", imgUrl(teamSize)).appendTo($images)[0];
|
||||
const bannerCrop = $("<img>").attr("src", imgUrl(teamSize, "Crop")).appendTo($images)[0];
|
||||
const border = $("<img>").attr("src", imgUrl(teamSize, "Border", emblem.border)).appendTo($images)[0];
|
||||
const icon = $("<img>").attr("src", imgUrl(undefined, "Emblem", emblem.icon)).appendTo($images)[0];
|
||||
|
||||
const colorToHex = (color) => '#' + parseInt(color).toString(16).substring(2);
|
||||
const colorToHex = (color) => "#" + parseInt(color).toString(16).substring(2);
|
||||
|
||||
waitForEmblemImages($emblem).then(() => {
|
||||
const srcH = 224;
|
||||
const h = 128;
|
||||
const w = (banner.width / srcH) * h;
|
||||
const iconW = icon.width * 0.35;
|
||||
const iconH = icon.height * 0.35;
|
||||
ctx.drawImage(banner, 0, 0, banner.width, srcH, 0, 0, w, h);
|
||||
ctx.drawImage(tintImage(bannerCrop, colorToHex(emblem.background)), 0, 0, banner.width, srcH, 0, 0, w, h);
|
||||
ctx.drawImage(tintImage(border, colorToHex(emblem.borderColor)), 0, 0, border.width, srcH, 0, 0, w, h);
|
||||
ctx.drawImage(tintImage(icon, colorToHex(emblem.iconColor)), w * 0.385 - iconW / 2, h * 0.325 - iconH / 2, iconW, iconH);
|
||||
});
|
||||
waitForEmblemImages($emblem).then(() => {
|
||||
const srcH = 224;
|
||||
const h = 128;
|
||||
const w = (banner.width / srcH) * h;
|
||||
const iconW = icon.width * 0.35;
|
||||
const iconH = icon.height * 0.35;
|
||||
ctx.drawImage(banner, 0, 0, banner.width, srcH, 0, 0, w, h);
|
||||
ctx.drawImage(tintImage(bannerCrop, colorToHex(emblem.background)), 0, 0, banner.width, srcH, 0, 0, w, h);
|
||||
ctx.drawImage(tintImage(border, colorToHex(emblem.borderColor)), 0, 0, border.width, srcH, 0, 0, w, h);
|
||||
ctx.drawImage(tintImage(icon, colorToHex(emblem.iconColor)), w * 0.385 - iconW / 2, h * 0.325 - iconH / 2, iconW, iconH);
|
||||
});
|
||||
}
|
||||
|
||||
const tintCanvas = document.createElement('canvas');
|
||||
const tintContext = tintCanvas.getContext('2d');
|
||||
const tintCanvas = document.createElement("canvas");
|
||||
const tintContext = tintCanvas.getContext("2d");
|
||||
function tintImage(image, color, opacity = 1.0) {
|
||||
const ctx = tintContext;
|
||||
const ctx = tintContext;
|
||||
|
||||
ctx.canvas.width = image.width;
|
||||
ctx.canvas.height = image.height;
|
||||
ctx.canvas.width = image.width;
|
||||
ctx.canvas.height = image.height;
|
||||
|
||||
// First draw the image to the buffer
|
||||
ctx.drawImage(image, 0, 0);
|
||||
// First draw the image to the buffer
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
// Multiply with a rectangle of the specified color
|
||||
ctx.fillStyle = color;
|
||||
ctx.globalCompositeOperation = 'multiply';
|
||||
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
// Multiply with a rectangle of the specified color
|
||||
ctx.fillStyle = color;
|
||||
ctx.globalCompositeOperation = "multiply";
|
||||
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
|
||||
// Finally, fix masking issues and globalAlpha
|
||||
ctx.globalAlpha = opacity;
|
||||
ctx.globalCompositeOperation = 'destination-in';
|
||||
ctx.drawImage(image, 0, 0);
|
||||
// Finally, fix masking issues and globalAlpha
|
||||
ctx.globalAlpha = opacity;
|
||||
ctx.globalCompositeOperation = "destination-in";
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
return ctx.canvas;
|
||||
return ctx.canvas;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue