
<!--
    source based on fiddle by @jokie
       see https://jsfiddle.net/a6mnft3d/34/
-->


<style>
  body {
    text-align: center;
  }

  #spritesheet {
    display: grid;
    grid-template-columns: repeat(10, 32px);
    grid-template-rows: repeat(3, 32px);
    width: 320px;
    height: 96px;
    margin: auto;

    background: url(https://raw.githubusercontent.com/ordbase/generative-orc-721/master/diyordibots/spritesheet.png);
  }

  .sprite {
    width: 32px;
    height: 32px;
  }

  #canvas {
    width: 320px;
    height: 320px;
    border: 2px solid #ccc;
    margin: 10px;
    background-color: #eee;
  }

  #cleardiv {
    margin:auto;
    text-align:center;
    }
  </style>


   <h1>
    DIY Ordibots Previewer
    </h1>
    <p>
    Directions: click on the map below to preview your DIY Ordibot.
    Press clear to start over.<br><br>
    When you're happy, use the attribute list generated.
    </p>
    <div id="spritesheet"></div>

    <canvas id="canvas" width="320" height="320"></canvas>

    <div id="cleardiv">
     <button id="clear">Clear</button>
    </div>
    <p id="output"></p>

    DIY Ordibots is a project by the ORC-721 community.
    Learn more on the <a href="https://discord.gg/swBWd827qM">Ordinal Punks discord</a> (in the #generative-orc-721 channel)
    and the <a href="https://github.com/ordbase/generative-orc-721">generative-orc-721 github</a>
    <footer>This previewer adopted from a fiddle written by Jokie </footer>


    <script>
  let canvas = document.getElementById('canvas');
  canvas.width = 320;
  canvas.height = 320;
  let ctx = canvas.getContext('2d');
  ctx.imageSmoothingEnabled = false; // Disable image smoothing
  let img = new Image();
  img.src = 'https://raw.githubusercontent.com/ordbase/generative-orc-721/master/diyordibots/spritesheet.png';

  let output = document.getElementById('output');
  let selectedSprites = [];
  let scaleFactor = 10;

  img.onload = function() {
      for(let i = 0; i < 26; i++) {
          let sprite = document.createElement('div');
          sprite.className = 'sprite';
          sprite.style.backgroundPosition = `-${(i % 10) * 32}px -${Math.floor(i / 10) * 32}px`;
          sprite.addEventListener('click', () => {
              ctx.drawImage(img, (i % 10) * 32, Math.floor(i / 10) * 32, 32, 32, 0, 0, 32 * scaleFactor, 32 * scaleFactor);
              selectedSprites.push(i);
              output.textContent = '"g":[' + selectedSprites.join(', ') + ']';
          });
          document.getElementById('spritesheet').appendChild(sprite);
      }
  };

  document.getElementById('clear').addEventListener('click', () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      selectedSprites = [];
      output.textContent = '';
  });
    </script>