tripolskypetr/fillRect.html

## fillRect.html
<!DOCTYPE html>
<html>
  <head>
    <title>Omg</title>
  </head>
  <body>
    <pre contenteditable>
    </pre>
    <p>X: <input type="number" value="3"></p>
    <p>Y: <input type="number" value="5"></p>
    <button>Fill</button>
    <script>
      (function() {
        const button = document.querySelector('button');
        const content = document.querySelector('pre');
        const area = [
          "110000000",
          "100010000",
          "001111100",
          "000010000",
          "000000000"
        ].map((s) => s.split(''));

        const inRange = (x,y) => {
          if (x < 0 || x > area.length) {
            return false;
          } else if (y < 0 || y > area[0].length) {
            return false;
          } else {
            return true;
          }
        }

        const border = (x,y) => [
          [x-1,y-1],
          [x,y],
          [x-1,y+1],
          [x,y+1],
          [x,y-1],
          [x+1,y],
          [x+1,y+1],
          [x+1,y-1]
        ].filter(([x, y]) => inRange(x,y));

        const print = () => content.innerText = area.map((line) => line.join('')).join("\n");

        button.onclick = () => {
          const x = document.querySelectorAll('input')[0].value - 1;
          const y = document.querySelectorAll('input')[1].value - 1;

          const ignore = new Set();

          const fill = (x, y) => {
            const pos = `${x}:${y}`;
            if (ignore.has(pos)) {
              return;
            } else if (area[x][y] == 1) {
              ignore.add(pos);
              area[x][y] = 0;
              border(x, y).forEach(([x, y]) => fill(x,y));
            } else {
              return;
            }
          }

          fill(x, y);
          print();
        }

        print();

      })();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Omg</title>
	</head>
	<body>
	<pre contenteditable>
	</pre>
	<p>X: <input type="number" value="3"></p>
	<p>Y: <input type="number" value="5"></p>
	<button>Fill</button>
	<script>
	(function() {
	const button = document.querySelector('button');
	const content = document.querySelector('pre');
	const area = [
	"110000000",
	"100010000",
	"001111100",
	"000010000",
	"000000000"
	].map((s) => s.split(''));

	const inRange = (x,y) => {
	if (x < 0 \|\| x > area.length) {
	return false;
	} else if (y < 0 \|\| y > area[0].length) {
	return false;
	} else {
	return true;
	}
	}

	const border = (x,y) => [
	[x-1,y-1],
	[x,y],
	[x-1,y+1],
	[x,y+1],
	[x,y-1],
	[x+1,y],
	[x+1,y+1],
	[x+1,y-1]
	].filter(([x, y]) => inRange(x,y));

	const print = () => content.innerText = area.map((line) => line.join('')).join("\n");

	button.onclick = () => {
	const x = document.querySelectorAll('input')[0].value - 1;
	const y = document.querySelectorAll('input')[1].value - 1;

	const ignore = new Set();

	const fill = (x, y) => {
	const pos = `${x}:${y}`;
	if (ignore.has(pos)) {
	return;
	} else if (area[x][y] == 1) {
	ignore.add(pos);
	area[x][y] = 0;
	border(x, y).forEach(([x, y]) => fill(x,y));
	} else {
	return;
	}
	}

	fill(x, y);
	print();
	}

	print();

	})();
	</script>
	</body>
	</html>