Add Screenshot feature

[ZhengLinLei]

Render the body html to image when the user reach new record and show it, then the user can share it friends and social media to flex their score.

Render image when the user get new record, not in every game over.

Can use this library: https://github.com/tsayen/dom-to-image

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

And share it with native API

async function shareImage() {
  const response = await fetch('nacho.jpg');
  const blob = await response.blob();
  const filesArray = [
    new File(
      [blob],
      'meme.jpg',
      {
        type: "image/jpeg",
        lastModified: new Date().getTime()
      }
   )
  ];
  const shareData = {
    files: filesArray,
  };
  navigator.share(shareData);
}

[ZhengLinLei]

We need this enhancement.

Branch: feature_task_share_record

Leave message if you are developing this branch 😋