Add collision detection, initial player render

public/assets/css/dragon.css

@@ -35,6 +35,7 @@ body {
     text-align: center;
     border-radius: 3px;
     user-select: none;
+	-webkit-user-select: none;
 	text-decoration: none;
     transition: opacity 0.1s ease, background-color 0.1s ease, color 0.1s ease, background 0.1s ease;
     -webkit-tap-highlight-color: transparent;
@@ -529,6 +530,7 @@ body::-webkit-scrollbar-thumb {
 		height: 440px;
 		image-rendering: pixelated;
 		image-rendering: crisp-edges;
+		image-rendering: -webkit-optimize-contrast;
 		background-color: rgba(0, 0, 0, 0.5);
 	}
 }

src/helpers.php

@@ -275,7 +275,7 @@ function ajax_only()
  */
 function json_response($data)
 {
-	header('Content-Type: application/json');
+	header('Content-Type: application/json; charset=utf-8');
 	echo json_encode($data);
 	exit;
 }

templates/components/left_nav.php

@@ -11,7 +11,7 @@
 
 		foreach (links as $link): ?>
 			<a href="<?= $link[0] ?>" class="<?= ce(($GLOBALS['active_nav_tab'] ?? '') == $link[1], 'active') ?>">
-				<img src="/assets/img/icons/<?= $link[2] ?>.png">
+				<img src="/assets/img/icons/<?= $link[2] ?>.png" title="<?= $link[3] ?>">
 				<?= $link[3] ?>
 			</a>
 	<?php endforeach; ?>

templates/pages/world/base.php

@@ -76,6 +76,18 @@
 		}[e.key];
 
 		if (direction !== undefined) {
+			// If player would move outside map bounds, return early
+			if (direction === 0 && player.y === 0) return;
+			if (direction === 1 && player.y === map.length - 1) return;
+			if (direction === 2 && player.x === 0) return;
+			if (direction === 3 && player.x === map[0].length - 1) return;
+
+			// Return early if the player is trying to move into a wall
+			if (direction === 0 && map[player.y - 1][player.x] === 2) return;
+			if (direction === 1 && map[player.y + 1][player.x] === 2) return;
+			if (direction === 2 && map[player.y][player.x - 1] === 2) return;
+			if (direction === 3 && map[player.y][player.x + 1] === 2) return;
+
 			// Execute a POST request to /move. If successful, the server will return a new x,y position
 			fetch('/move', {
 				method: 'POST',
@@ -156,6 +168,7 @@
 	}
 
 	window.addEventListener('load', () => {
+		map[player.y][player.x] = 1
 		updateCanvasSize()
 		setupEventListeners()
 		render()