Created
February 8, 2023 02:58
-
-
Save pond/4138e07f0a121828d403759b95b816ef to your computer and use it in GitHub Desktop.
No-framework ES6 "pixel painter" example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment