index.js
/* Build the matrix based on the provided width and height */
Build the matrix based on the provided width and height
Build the matrix based on the provided width and height
function buildTable(width, height) {
    const editor = document.getElementById('editor');
    let content = '';
    for (let y = 0; y < height; y++) {
        content += "<tr>";
        for (let x = 0; x < width; x++) {
            content += "<td data-x='" + x + "' data-y='" + y + "' data-color='000000'></td>";
        }
        content += "</tr>";
    }
    editor.innerHTML = content;
    function mouseHandler(e) {
        if (e.which) {
            drawPixel(e.target);
        }
        e.preventDefault();
    }
    editor.addEventListener('mousedown', mouseHandler);
    editor.addEventListener('mouseover', mouseHandler);
    function touchHandler(e) {
        for (let i = 0; i < e.changedTouches.length; i++) {
          let pageX = e.changedTouches[i].pageX;
          let pageY = e.changedTouches[i].pageY;
          let el = document.elementFromPoint(pageX, pageY);
          if (el.tagName && el.tagName == 'TD' && editor.contains(el)) {
              drawPixel(el);
          }
        }
        e.preventDefault();
    }
    editor.addEventListener('touchstart', touchHandler);
    editor.addEventListener('touchmove', touchHandler);
    [...editor.querySelectorAll("td")].forEach(cell => { 
        cell.style.backgroundColor = '#' + cell.dataset.color;
    })
}
function buildTable ( width , height ) { const editor = document . getElementById ( 'editor' ) ; let content = '' ; for ( let y = 0 ; y < height ; y ++ ) { content += "<tr>" ; for ( let x = 0 ; x < width ; x ++ ) { content += "<td data-x='" + x + "' data-y='" + y + "' data-color='000000'></td>" ; } content += "</tr>" ; } editor . innerHTML = content ; function mouseHandler ( e ) { if ( e . which ) { drawPixel ( e . target ) ; } e . preventDefault ( ) ; } editor . addEventListener ( 'mousedown' , mouseHandler ) ; editor . addEventListener ( 'mouseover' , mouseHandler ) ; function touchHandler ( e ) { for ( let i = 0 ; i < e . changedTouches . length ; i ++ ) { let pageX = e . changedTouches [ i ] . pageX ; let pageY = e . changedTouches [ i ] . pageY ; let el = document . elementFromPoint ( pageX , pageY ) ; if ( el . tagName && el . tagName == 'TD' && editor . contains ( el ) ) { drawPixel ( el ) ; } } e . preventDefault ( ) ; } editor . addEventListener ( 'touchstart' , touchHandler ) ; editor . addEventListener ( 'touchmove' , touchHandler ) ; [ ... editor . querySelectorAll ( "td" ) ] . forEach ( cell => { cell . style . backgroundColor = '#' + cell . dataset . color ; } ) }
Build the matrix based on the provided width and height
Build the matrix based on the provided width and height