ulidtko/mahjong-tileset.html

## mahjong-tileset.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Mahjong tile set</title>

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

<style>
body {
	font-size: 48pt;
	margin: 1em;
}

p {
	margin: 0.3em;
}

div {
	display: inline-block;
}
span {
	width: 1em;
	word-wrap: break-word;
	display: inline-block;
}

a {
	cursor: pointer;
}
</style>

<script>
$(document).ready(function(){
	reset()
	console.log("ready!")
})

function reset() {
	$("p").each(function(idx, p) {
		var tiles = $(p).text()
		var res = ""
		for(var j = 0; j < $(p).text().length; j += 2) {
			var tile = '<a>' + tiles[j] + tiles[j+1] + '</a>'
			res += '<span>' + tile + tile + tile + tile + '</span>'
		}
		$(p).html(res)
	})

	$("a").click(function() {
		$(this).animate({
			"opacity": 0
		}, 400)
	})
}
</script>

</head>

<body>

<div><p>🀇🀈🀉🀊🀋🀌🀍🀎🀏</p></div>
<div><p>🀐🀑🀒🀓🀔🀕🀖🀗🀘</p></div>
<div><p>🀙🀚🀛🀜🀝🀞🀟🀠🀡</p></div>
<div><p>🀀🀁🀂🀃  🀄🀅🀆</p></div>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Mahjong tile set</title>

	<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>

	<style>
	body {
	font-size: 48pt;
	margin: 1em;
	}

	p {
	margin: 0.3em;
	}

	div {
	display: inline-block;
	}
	span {
	width: 1em;
	word-wrap: break-word;
	display: inline-block;
	}

	a {
	cursor: pointer;
	}
	</style>

	<script>
	$(document).ready(function(){
	reset()
	console.log("ready!")
	})

	function reset() {
	$("p").each(function(idx, p) {
	var tiles = $(p).text()
	var res = ""
	for(var j = 0; j < $(p).text().length; j += 2) {
	var tile = '<a>' + tiles[j] + tiles[j+1] + '</a>'
	res += '<span>' + tile + tile + tile + tile + '</span>'
	}
	$(p).html(res)
	})

	$("a").click(function() {
	$(this).animate({
	"opacity": 0
	}, 400)
	})
	}
	</script>

	</head>

	<body>

	<div><p>🀇🀈🀉🀊🀋🀌🀍🀎🀏</p></div>
	<div><p>🀐🀑🀒🀓🀔🀕🀖🀗🀘</p></div>
	<div><p>🀙🀚🀛🀜🀝🀞🀟🀠🀡</p></div>
	<div><p>🀀🀁🀂🀃 🀄🀅🀆</p></div>

	</body>
	</html>