DarkWiiPlayer/benchmark.html

## benchmark.html
<!doctype html>

<!-- Set type to one of "full", "all" or "selective" -->
<fun-matrix type="selective">
</fun-matrix>

<script type="module">
	import {html} from "https://darkwiiplayer.github.io/js/skooma.js"
	import element from "https://darkwiiplayer.github.io/js/element.js"

	element(class FunMatrix extends HTMLElement {
		constructor() {
			super()
			this.items = Array(100).fill(100).map(width => Array(width).fill(0))
			this.addEventListener("click", event => this.update())
			this.render()
		}
		render() {
			this.replaceChildren(
				html.table(
					this.items.map(row => html.tr(
						row.map(item => html.td(item))
					))
				)
			)
		}

		connectedCallback() {
			window.setInterval(() => {
				this.mutate()
				this.update(this.getAttribute("type"))
			}, 1e2)
		}

		mutate() {
			const row = this.items[Math.floor(Math.random() * this.items.length)]
			row[Math.floor(Math.random() * row.length)] = Math.floor(Math.random() * 10)
		}

		update(type="full") { this[`update_${type}`]() }

		update_full() { this.render() }

		update_all() {
			this.querySelectorAll("tr").forEach((row, y) => {
				row.querySelectorAll("td").forEach((items, x) => {
					items.innerText = this.items[y][x]
				})
			})
		}

		update_selective() {
			this.querySelectorAll("tr").forEach((row, y) => {
				row.querySelectorAll("td").forEach((cell, x) => {
					const value = this.items[y][x]
					if (cell.innerText != String(value))
					cell.innerText = value
				})
			})
		}
	})
</script>
	<!doctype html>

	<!-- Set type to one of "full", "all" or "selective" -->
	<fun-matrix type="selective">
	</fun-matrix>

	<script type="module">
	import {html} from "https://darkwiiplayer.github.io/js/skooma.js"
	import element from "https://darkwiiplayer.github.io/js/element.js"

	element(class FunMatrix extends HTMLElement {
	constructor() {
	super()
	this.items = Array(100).fill(100).map(width => Array(width).fill(0))
	this.addEventListener("click", event => this.update())
	this.render()
	}
	render() {
	this.replaceChildren(
	html.table(
	this.items.map(row => html.tr(
	row.map(item => html.td(item))
	))
	)
	)
	}

	connectedCallback() {
	window.setInterval(() => {
	this.mutate()
	this.update(this.getAttribute("type"))
	}, 1e2)
	}

	mutate() {
	const row = this.items[Math.floor(Math.random() * this.items.length)]
	row[Math.floor(Math.random() * row.length)] = Math.floor(Math.random() * 10)
	}

	update(type="full") { this[`update_${type}`]() }

	update_full() { this.render() }

	update_all() {
	this.querySelectorAll("tr").forEach((row, y) => {
	row.querySelectorAll("td").forEach((items, x) => {
	items.innerText = this.items[y][x]
	})
	})
	}

	update_selective() {
	this.querySelectorAll("tr").forEach((row, y) => {
	row.querySelectorAll("td").forEach((cell, x) => {
	const value = this.items[y][x]
	if (cell.innerText != String(value))
	cell.innerText = value
	})
	})
	}
	})
	</script>