DK2/templates/pages/world/base.php

<div id="target_world_map">
<h1>World</h1>
<p>Use WASD keys to move the character</p>
<p>Current location: <?= location('x') ?>, <?= location('y') ?></p>

<canvas id="canvas"></canvas>

<form hx-post="/move" hx-target="target_world_map" hx-swap="outerHTML" id="form_move">
	<?= csrf_field() ?>
	<input type="hidden" name="direction" value="">
</form>

<script>
	const canvas = document.getElementById('canvas');
	const ctx = canvas.getContext('2d');

	let char_x = <?= location('x') ?>;
	let char_y = <?= location('y') ?>;

	// Configuration
	const TILE_SIZE = 40; // Fixed size for each tile

	// Sample tile map (0 = empty, 1 = filled)
	const tileMap = [
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
	];

	// Turn the value at the player's coordinates to be 1 in the map array
	tileMap[char_y][char_x] = 1;

	const tileColors = {
		0: '#fff',  // Empty tile
		1: '#333'   // Wall tile
	};

	function resizeCanvas() {
		// Calculate the actual dimensions needed for the map
		const mapWidth = tileMap[0].length * TILE_SIZE;
		const mapHeight = tileMap.length * TILE_SIZE;

		// Get the container's width
		const containerWidth = canvas.parentElement.clientWidth;

		// Calculate the scale factor to fit the map width to the container
		const scale = Math.min(1, containerWidth / mapWidth);

		// Set canvas size using the scale factor
		canvas.width = mapWidth * scale;
		canvas.height = mapHeight * scale;

		// Scale the context to maintain tile dimensions
		ctx.scale(scale, scale);

		// Render the map after resize
		renderMap();
	}

	function renderMap() {
		// Clear the canvas
		ctx.clearRect(0, 0, canvas.width, canvas.height);

		// Draw each tile
		for (let row = 0; row < tileMap.length; row++) {
			for (let col = 0; col < tileMap[row].length; col++) {
				const tileType = tileMap[row][col];
				const x = col * TILE_SIZE;
				const y = row * TILE_SIZE;

				ctx.fillStyle = tileColors[tileType];
				ctx.fillRect(x, y, TILE_SIZE, TILE_SIZE);

				// Draw tile borders
				ctx.strokeStyle = '#999';
				ctx.strokeRect(x, y, TILE_SIZE, TILE_SIZE);
			}
		}
	}

	// Initial setup
	resizeCanvas();

	// Handle window resizing
	window.addEventListener('resize', resizeCanvas);

	// On WASD key press, send a POST request to move the character using the form
	window.addEventListener('keydown', (e) => {
		if (!['w', 'a', 's', 'd'].includes(e.key)) return;

		el = document.querySelector('input[name="direction"]');

		// update the direction input to be 0-3 based on the key pressed
		// 0 = up, 1 = down, 2 = left, 3 = right
		el.value = {
			'w': 0,
			's': 1,
			'a': 2,
			'd': 3
		}[e.key];

		htmx.trigger(document.getElementById('form_move'), 'submit');
	});
</script>
</div>