Icons

[dtruffaut]

Motivation:
Make the builder attractive.

1. Get icons

   • https://d4planner.io
   • https://d4builds.gg

2. Increase size

   • https://bigjpg.com

3. Implement icons

   In Canvas, using Device Pixel Ratio to scale images accordingly.

[dtruffaut]

In progress :)

But images look pixelated on high DPR screens.

Use something like this:

const loadImage = async ({ src }) => {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      resolve(img);
    };
    img.src = src;
  });
}

const drawImage = async ({ img, ctx, canvasWidth, canvasHeight }) => {
  ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
}

const resizeCanvas = async (src) => {
  const dpr = window.devicePixelRatio || 1;
  const img = await loadImage({ src });
  const canvas = document.querySelector('#canvas');
  const ctx = canvas.getContext('2d', { alpha: true });
  // Compute Client dimensions
  const canvasWidth = window.innerWidth;
  const canvasHeight = (img.height / img.width) * window.innerWidth;
  // Will draw at higher dimensions (High resolution)
  canvas.width = canvasWidth * dpr;
  canvas.height = canvasHeight * dpr;
  ctx.scale(dpr, dpr);
  // Set style to Client dimensions
  canvas.style.width = `${canvasWidth}px`;
  canvas.style.height = `${canvasHeight}px`;
  await drawImage({ img, canvas, ctx, canvasWidth, canvasHeight });
}