
<!--
    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, 24px);
  grid-template-rows: repeat(9, 24px);
  width: 240px;
  height: 216px;
  margin: auto;

  background: url(spritesheet.png);
}

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

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

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


 <h1>
  D.I.Y. Maxi Biz (Punks) Previewer
 </h1>




<p>
  Directions: click on the map below to preview your DIY Maxi Biz (Punk).
  Press clear to start over.<br>
  When you're happy, use the og standard mint text generated.
  </p>
  <div id="spritesheet"></div>

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

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

DIY Maxi Biz (Punks)  is a project by the ordgen / ORC-721 community.
  Learn more on the <a href="https://ordinalpunks.com">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 cols = 10;
 let rows = 9;
 let tiles = cols * rows;
 let width = 24;
 let height = 24;

 let scaleFactor = 10;

let canvas = document.getElementById('canvas');
canvas.width =  width * scaleFactor;   // 240px
canvas.height = height * scaleFactor;  // 240px
let ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false; // Disable image smoothing
let img = new Image();
img.src = 'spritesheet.png';

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


img.onload = function() {
  for(let i = 0; i < tiles; i++) {
        let sprite = document.createElement('div');
        sprite.className = 'sprite';

        let x = i % cols;
        let y = Math.floor(i / cols);
        // console.log( `==> add sprite ${i} - x: ${x} y: ${y}` );

        let pos = `-${x * width}px -${y * height}px`;
        sprite.style.backgroundPosition = pos;
        // console.log( `  pos: ${pos}` );


        sprite.addEventListener('click', () => {
            ctx.drawImage(img,
                          x * width,
                          y * height,
                          width, height, 0, 0,
                          width * scaleFactor,
                          height * scaleFactor);
            selectedSprites.push(i);
            output.textContent = "og mint diymaxibiz " + selectedSprites.join(' ');
        });
        document.getElementById('spritesheet').appendChild(sprite);
    }
};

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