Save WIP

[rbdr/canvas] / src / lib / components / hud.svelte

<script>
	import { coordinateLength } from '$lib/config';
	import { canvas } from '$lib/stores/canvas';

	const kSeparatorRegex = /([0-9a-z]{2})/g;

	const formatCoordinate = function formatCoordinate(coordinate) {
		return coordinate.toString(16).padStart(coordinateLength, 0).replace(kSeparatorRegex, '$1 ');
	};
</script>

<div class="hud">
	{formatCoordinate($canvas.x)} × {formatCoordinate($canvas.y)}
</div>

<style>
	.hud {
		background-color: #fff;
		padding: 4px;
		position: fixed;
		bottom: 2px;
		right: 2px;
		font-smooth: never;
		-webkit-font-smoothing: none;
	}
</style>