User:Krinkle/sandboxRenderer.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

function renderGrains(sb, grains) {
	var $p = $('<p>');
	$p.text(grains + ' gains: ' + ('x'.repeat(grains)));
	$p.appendTo(sb);
}
function init() {
	var sb = document.querySelector('div.tpl-krinkle-boxofsand');
	if (!sb) {
		console.log('No sands here (still)');
		return;
	}
	renderGrains(sb, sb.dataset.grains || 0);
	
	var $btn = $('<button>');
	$btn.text('Click me');
	$btn.appendTo(sb);
	
	$btn.on('click', function () {
		console.log('Clicked!');	
		var rnd = Math.ceil(Math.random() * 100);
		renderGrains(sb, rnd);
	});
}
init();