Implement equipable (composable) viewer.

[vikiival]

I don't see items equipped on the subtraknights in https://rmrk2.kodadot.xyz/rmrk2/collection/7472058104f9f93924-SKC?page=11
See comparaison with Singular:
https://rmrk2.kodadot.xyz/rmrk2/gallery/12126283-7472058104f9f93924-SKC-soldier_1-00000001
and
https://singular.app/collectibles/kusama/7472058104f9f93924-SKC/12126283-7472058104f9f93924-SKC-soldier_1-00000001

Originally posted by @joelamouche in #3725 (comment)

[joelamouche]

This is on Koda

This is on Singular

This is the view to equip items

[preschian]

@vikiival how do we get the equipable item list?

[vikiival]

@vikiival how do we get the equipable item list?

to get the inventory

query itemInventory($id: String!) {
  nftEntities(where: { parent: { id_eq: $id } }) {
    image
    name
    image
  }
}

To find out which are equipped I will do it today:

• Logic for EQUIPing resource rubick#217

[vikiival]

Found the React code by RMRK CTO
https://github.com/rmrk-team/rmrk2-examples/blob/master/projects/react-demo/components/rmrk-svg-composer.tsx

We may need similar package
https://www.npmjs.com/package/vue-inline-svg

[preschian]

this is my snippet code, to merge the images. not tested

// List of image URLs
const imageURLs = [
  'path/to/image1.jpg',
  'path/to/image2.jpg',
  // ...
];

// Load all images
const loadImages = (imageURLs) => {
  const images = imageURLs.map((url) => {
    const img = new Image();
    img.src = url;
    return new Promise((resolve, reject) => {
      img.onload = () => resolve(img);
      img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
    });
  });
  return Promise.all(images);
};

// Combine images into one
const combineImages = async (imageURLs) => {
  const images = await loadImages(imageURLs);

  // Calculate the combined width and maximum height of the images
  const combinedWidth = images.reduce((width, img) => width + img.width, 0);
  const maxHeight = Math.max(...images.map(img => img.height));

  // Create an offscreen canvas
  const offscreenCanvas = new OffscreenCanvas(combinedWidth, maxHeight);
  const ctx = offscreenCanvas.getContext('2d');

  // Draw images on the canvas side by side
  let currentX = 0;
  images.forEach((img) => {
    ctx.drawImage(img, currentX, 0);
    currentX += img.width;
  });

  // Get the combined image as a data URL
  const dataURL = offscreenCanvas.toDataURL('image/png');
  return dataURL;
};

// Check for OffscreenCanvas support
if (typeof OffscreenCanvas !== 'undefined') {
  // Example usage
  combineImages(imageURLs).then((dataURL) => {
    // Do something with the combined image data URL
    console.log(dataURL);
  });
} else {
  // OffscreenCanvas is not supported, handle the fallback or show an error message
  console.error('Your browser does not support OffscreenCanvas.');
}

[vikiival]

cc @preschian

• Setup local v2 rubick#248

I also made a resolver for this case

URL: https://squid.subsquid.io/marck/v/v3/graphql

query MyQuery {
  childListByNftId(id: "12126283-7472058104f9f93924-SKC-soldier_1-00000001") {
    id
    name
    image
    media
    pending
    resourceMetadata
    resourceSrc
    resourceThumb
  }
}

[Matehoo]

👋

[kodabot]

ASSIGNED - @Matehoo 🔒 LOCKED -> Friday, April 21st 2023, 09:58:13 UTC -> 24 hours

[kodabot]

ASSIGNMENT EXPIRED - @Matehoo has been unassigned.