✅Code Checker

If you followed the Kodahash template, and you finished with your art, its time to test it. your art should include everything that is needed to be deployed on KodaDot. to be sure that you did not miss anything, we created our KodaDot Code Checker to help you find any missing details in the code.

KodaDot's Code Checker

Open https://kodadot.xyz/code-checker and prepare your zip file to be uploaded. once you upload it, wait a few moments. Your code validation will appear on the screen.

Code Validation

  • CanvasSize - if its dynamic

  • Name of the collection

  • WebGL in code

  • Local p5js

There are five other categories we are evaluating. Read below to understand what each category means and what to change in your code in case you are not fulfilling it.

1) Automatic Sizing - Responsiveness

Failure means the art is not responsive to screen size changes. In order to fix need to use resizeCanvas like this:

function windowResized() {  canvasSize = min(windowWidth, windowHeight)

  resizeCanvas(canvasSize, canvasSize)
}

2) Correct html name

An issue in this category means that the html should have a title tag and the title should be different from kodaHash. Like this:

<!DOCTYPE html><html>
  <head>
    <title>artwork name goes here</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./style.css">
    <script src="./p5.min.js"></script>
  
  </head>
  <body>
    <script src="./sketch.js"></script>
  </body>
</html>

3) Using Kodahash Render

Once the rendering of art is done, a message needs to be sent signaling the end of the render. This message is necessary for art to work properly on KodaDot. More details can be found in the Kodahash template. This message should look like this:

function postMessageKoda() {
  console.log('Talking')
  const canvas = document.querySelector('canvas')
  const message = {
    id: Date.now(),
    type: 'kodahash/render/completed',
    payload: {
      hash: hash,
      type: 'image/png',
      image: canvas ? canvas.toDataURL('image/png') : null,
      search: location.search,
      attributes: [],
    },
  }
  console.log('Sending', message)

  window.parent.postMessage(message, '*')
}

4) Param Hash From URL For Rendering

Your artwork is expected to use hash url param. Like this:

const params = getURLParams()

  hash = params.hash || DEFAULT_HASH

5) Variation loading time < 3 seconds

The time between the start of render and message kodahash/render/completed is measured. As we mentioned in the documentation, art should be quick, to make the experience for the user better. Loading time check could fail if:

  • Artwork is not rendered in the checker.

  • Takes too long to render, no clear way to fix that, the artist needs to find a way to cut down time.

Export the NFTs

Under the picture, you should see an option to export art. You can select several art pieces you want to download.

Use this option to export the maximum amount of NFTs - this will help you to see more variations at once and you can asses if your art has enough variations. Keep in mind the size of your collection. The bigger the collection, the more variations it should have. So everyone can get their unique NFT!


If you followed the Kodahash template, your code should pass all tests. This is our first version of code checker, so there may be something you need help with. In case you are having any issues, questions, or suggestions on how to improve our Code Checker, please connect with the team on Telegarm or GitHub.

Last updated

Logo

Feel Free Fork Us @ 2023