DEVLOG TIME:>

During this session, I incorporated complete mobile compatibility. The directional pad appears automatically on touch devices through (pointer:coarse) through CSS thus eliminating the need for any device detection as it will be shown as soon as the browser detects a device with touch input. Each button utilizes touchstart instead of click, so there is no 300ms tap delay that would make the controls slow or laggy.

I also introduced swipe detection on the canvas as a substitute for the directional pad. The minimum distance for swipe detection is 30px, filtering unintended touches and also utilizing the main axis (horizontal or vertical) in order to identify the direction even in case of diagonal swipes.

I added responsive CSS for screens smaller than 480px thus allowing the fonts, buttons, and HUD to resize, so no overflowing occurs on small screens. I verified this by checking the local network IP through my mobile, as both devices were connected to the same Wi-Fi network.

The InputManager is now capable of working with three types of input in one place - keyboard, touch directional pad, and swipe, all of them leading to a single nextDirection property, which is accessed by the main game loop.