pond/painter.html

## painter.html
<!DOCTYPE html>
<html>
  <head>
    <title>Painter</title>

    <style>
      body {
        margin: 0;
        padding: 0;
        background: #eee;
      }

      #tools {
        display: flex;
        width: 100%;
      }

      .tool {
        width: 33%;
        text-align: center;
        border: 1px solid #ddd;
        padding: 5px;
        margin: 5px;
      }

      .tool.selected {
        border-bottom-width: 4px;
        background: white;
      }

      #painting {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
      }

      .pixel {
        box-sizing: border-box;
        border: 1px solid #eee;
        background: #fff;
      }
    </style>

    <script>

      // Select a tool with the given element ID, deselecting all others.
      //
      function selectTool(id) {
        for(toolElt of document.getElementsByClassName('tool')) {
          toolElt.classList.remove('selected');
          toolElt.style.borderBottomColor = toolElt.style.borderTopColor;
        }

        var selectedToolElt = document.getElementById(id);
        var selectedColor   = selectedToolElt.dataset.colour;

        selectedToolElt.classList.add('selected');
        selectedToolElt.style.borderBottomColor = selectedColor == '#fff' ? '#ddd' : selectedColor;
      }

      // Once the document has loaded...
      //
      window.addEventListener('DOMContentLoaded', function () {

        // Add on-click listeners to all tools and pre-select "black".
        //
        for(toolElt of document.getElementsByClassName('tool')) {
          toolElt.addEventListener('click', function() {
            selectTool(this.id);
          });
        }

        selectTool('tool-black');

        // Set up the "pixels" in the painting to produce the pixel grid,
        // filling the available painting area at the time of rendering but
        // not worrying about subsequent page resizes.
        //
        const toolsElt       = document.getElementById('tools');
        const paintingElt    = document.getElementById('painting');
        const pixelSize      = 30;
        const paintingWidth  = document.documentElement.clientWidth;
        const paintingHeight = document.documentElement.clientHeight - toolsElt.clientHeight;
        const rows           = Math.floor(paintingHeight / pixelSize);
        const cols           = Math.floor(paintingWidth  / pixelSize);
        const pixels         = rows * cols;

        for (var pixel = 0; pixel < pixels; pixel++) {
          var pixelElt = document.createElement('div');

          pixelElt.className    = 'pixel';
          pixelElt.style.width  = pixelSize + 'px';
          pixelElt.style.height = pixelSize + 'px';

          pixelElt.addEventListener('click', function() {
            var selectedToolElt = document.getElementsByClassName('selected').item(0);
            var selectedColor   = selectedToolElt.dataset.colour;

            this.style.backgroundColor = selectedColor;
          });

          paintingElt.appendChild(pixelElt);
        }
      });
    </script>
  </head>

  <body>
    <div id="tools">
      <span class="tool" id='tool-white' data-colour="#fff">White</span>
      <span class="tool" id='tool-black' data-colour="#000">Black</span>
      <span class="tool" id='tool-red'   data-colour="#f00">Red</span>
    </div>

    <div id="painting"></div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Painter</title>

	<style>
	body {
	margin: 0;
	padding: 0;
	background: #eee;
	}

	#tools {
	display: flex;
	width: 100%;
	}

	.tool {
	width: 33%;
	text-align: center;
	border: 1px solid #ddd;
	padding: 5px;
	margin: 5px;
	}

	.tool.selected {
	border-bottom-width: 4px;
	background: white;
	}

	#painting {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	}

	.pixel {
	box-sizing: border-box;
	border: 1px solid #eee;
	background: #fff;
	}
	</style>

	<script>

	// Select a tool with the given element ID, deselecting all others.
	//
	function selectTool(id) {
	for(toolElt of document.getElementsByClassName('tool')) {
	toolElt.classList.remove('selected');
	toolElt.style.borderBottomColor = toolElt.style.borderTopColor;
	}

	var selectedToolElt = document.getElementById(id);
	var selectedColor = selectedToolElt.dataset.colour;

	selectedToolElt.classList.add('selected');
	selectedToolElt.style.borderBottomColor = selectedColor == '#fff' ? '#ddd' : selectedColor;
	}

	// Once the document has loaded...
	//
	window.addEventListener('DOMContentLoaded', function () {

	// Add on-click listeners to all tools and pre-select "black".
	//
	for(toolElt of document.getElementsByClassName('tool')) {
	toolElt.addEventListener('click', function() {
	selectTool(this.id);
	});
	}

	selectTool('tool-black');

	// Set up the "pixels" in the painting to produce the pixel grid,
	// filling the available painting area at the time of rendering but
	// not worrying about subsequent page resizes.
	//
	const toolsElt = document.getElementById('tools');
	const paintingElt = document.getElementById('painting');
	const pixelSize = 30;
	const paintingWidth = document.documentElement.clientWidth;
	const paintingHeight = document.documentElement.clientHeight - toolsElt.clientHeight;
	const rows = Math.floor(paintingHeight / pixelSize);
	const cols = Math.floor(paintingWidth / pixelSize);
	const pixels = rows * cols;

	for (var pixel = 0; pixel < pixels; pixel++) {
	var pixelElt = document.createElement('div');

	pixelElt.className = 'pixel';
	pixelElt.style.width = pixelSize + 'px';
	pixelElt.style.height = pixelSize + 'px';

	pixelElt.addEventListener('click', function() {
	var selectedToolElt = document.getElementsByClassName('selected').item(0);
	var selectedColor = selectedToolElt.dataset.colour;

	this.style.backgroundColor = selectedColor;
	});

	paintingElt.appendChild(pixelElt);
	}
	});
	</script>
	</head>

	<body>
	<div id="tools">
	<span class="tool" id='tool-white' data-colour="#fff">White</span>
	<span class="tool" id='tool-black' data-colour="#000">Black</span>
	<span class="tool" id='tool-red' data-colour="#f00">Red</span>
	</div>

	<div id="painting"></div>
	</body>
	</html>