Rebane2001's mapartcraft enhancments

mapart_marker.txt

javascript:(function(){let e={x:0,y:0},t=document.querySelector(".viewOnline2DContainer"),n=t?t.querySelector("canvas"):null;if(!n)return void console.error("Canvas not found in the specified container!");let a=n.getContext("2d"),l=33,c=new Set,o=Math.floor(n.height/l),r=Math.floor(n.width/l),i=a.getImageData(0,0,n.width,n.height);function d(){a.strokeStyle="rgba(0,0,255,0.7)",a.lineWidth=6,a.strokeRect(e.x*l,e.y*l,l,l)}function s(){c.forEach((e=>{let[t,n]=e.split(",").map(Number);a.fillStyle="rgba(0,0,255,0.2)",a.fillRect(t*l,n*l,l,l)}))}function w(t){let{key:n}=t;"ArrowUp"!==n&&"w"!==n|| (e.y=Math.max(0,e.y-1)),"ArrowDown"!==n&&"s"!==n||(e.y=Math.min(o-1,e.y+1)),"ArrowLeft"!==n&&"a"!==n||(e.x=Math.max(0,e.x-1)),"ArrowRight"!==n&&"d"!==n||(e.x=Math.min(r-1,e.x+1)),"q"===n&&((n=`${e.x},${e.y}`),c.has(n)?c.delete(n):c.add(n)),requestAnimationFrame((()=>{a.putImageData(i,0,0),d(),s()}))}window.addEventListener("keydown",w),d();})();

mapart_marker_pretty.js

(function () {
  // Variables to track canvas and selected cell
  let selectedCell = { x: 0, y: 0 };
  const container = document.querySelector('.viewOnline2DContainer');
  const canvas = container ? container.querySelector('canvas') : null;

  if (!canvas) {
    console.error('Canvas not found in the specified container!');
    return;
  }

  const ctx = canvas.getContext('2d');
  const cellSize = 33; // Adjusted cell size to 33
  let markedCells = new Set();

  // Get grid dimensions based on canvas size and cell size
  const rows = Math.floor(canvas.height / cellSize);
  const cols = Math.floor(canvas.width / cellSize);

  // Store the original image data to restore later if needed
  let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

  // Draw selected cell with highlighted edges (blue)
  function drawSelectedCell() {
    ctx.strokeStyle = 'rgba(0, 0, 255, 0.7)';  // Blue edge for selected cell
    ctx.lineWidth = 6;  // Increased line width for better visibility of the selected cell's edge
    ctx.strokeRect(selectedCell.x * cellSize, selectedCell.y * cellSize, cellSize, cellSize);
  }

  // Draw marked cells with subtle blue marking
  function drawMarkedCells() {
    markedCells.forEach(cellKey => {
      const [x, y] = cellKey.split(',').map(Number);
      ctx.fillStyle = 'rgba(0, 0, 255, 0.2)';  // More subtle blue with opacity
      ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
    });
  }

  // Handle movement with arrow keys or WASD
  function handleKeydown(event) {
    const { key } = event;
    if (key === 'ArrowUp' || key === 'w') {
      selectedCell.y = Math.max(0, selectedCell.y - 1);
    } else if (key === 'ArrowDown' || key === 's') {
      selectedCell.y = Math.min(rows - 1, selectedCell.y + 1);
    } else if (key === 'ArrowLeft' || key === 'a') {
      selectedCell.x = Math.max(0, selectedCell.x - 1);
    } else if (key === 'ArrowRight' || key === 'd') {
      selectedCell.x = Math.min(cols - 1, selectedCell.x + 1);
    } else if (key === 'q') { // Toggle mark on "q" key
      const cellKey = ${selectedCell.x},${selectedCell.y};
      if (markedCells.has(cellKey)) {
        markedCells.delete(cellKey);  // Unmark
      } else {
        markedCells.add(cellKey);  // Mark
      }
    }

    // Optimize drawing with requestAnimationFrame for smooth updates
    requestAnimationFrame(() => {
      // Redraw only the necessary parts: the selected cell and marked cells
      ctx.putImageData(imageData, 0, 0);  // Restore the original canvas state
      drawSelectedCell();
      drawMarkedCells();
    });
  }

  // Initial setup
  window.addEventListener('keydown', handleKeydown);

  // Draw initial canvas content (without grid) and show the selected cell
  drawSelectedCell();
})();

Minified version can be directly copied in the bookmarklet for regular use. Pretty version is for you to made any updates you need or want. The code enables to mark down which blocks were already placed and make navigation in the blueprint much easier.