Component: Home Base

Home Base

https://codepen.io/ianjmacintosh/pen/GXebOE

Model

// Coordinates are [ x, y ]; x is (0-3), y = (0-3)
// Orientation is (NESW)
// Status is the enemy type it is capable of clearing

{
	"size": [ 4, 4 ], // How wide, how tall?
	"1P": {
		"coords": [	0, 0 ], // Where is 1P in the base?
		"orientation": "N", // What direction is 1P facing?
		"status": "A" // What color is 1P?
	}
}

View

<div class="home-base">
	<div class="home-base__square">
		<div class="player player--a player--north">
			<!-- The `player--a` bit indicates his color; could be `...b` or `...c` or whatever -->
			<!-- The `player--north` bit indicates his orientation; could be `...north` or `...south` or whatever -->
		</div>
	</div>
	<div class="home-base__square"></div>
	<div class="home-base__square"></div>
	<div class="home-base__square"></div>

	<div class="home-base__square"></div>
	<div class="home-base__square"></div>
	<div class="home-base__square"></div>
	<div class="home-base__square"></div>

	<div class="home-base__square"></div>
	<div class="home-base__square"></div>
	<div class="home-base__square"></div>
	<div class="home-base__square"></div>

	<div class="home-base__square"></div>
	<div class="home-base__square"></div>
	<div class="home-base__square"></div>
	<div class="home-base__square"></div>
</div>

Controller

• When the player presses a direction key his orientation is updated to that direction
• When the player presses a direction key, if there are any empty squares in that direction from the player's avatar, the controller updates the homebase's 1P coords state to reflect the new location
• When the player presses a direction key, if there are no empty squares in that direction from the player's avatar, the homebase's 1P coords are not updated
• When the player presses the spacebar, he attacks in the direction he is oriented