comatory/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script>
      function activateDirection(direction, vector) {
        document.getElementById(vector).style.background = 'red';

        return {
          ...direction,
          [vector]: true,
        }
      }

      function deactivateDirection(direction, vector) {
        document.getElementById(vector).style.background = 'transparent';

        return {
          ...direction,
          [vector]: false,
        }
      }

      function resetDirection() {
        return {
          up: false,
          down: false,
          left: false,
          right: false
        }
      }

      function attachKeyboardListeners() {
        let direction = resetDirection();

        window.addEventListener('keyup', function(event) {
          switch (event.key) {
            case 'ArrowUp':
              direction = deactivateDirection(direction, 'up');
              break;
            case 'ArrowDown':
              direction = deactivateDirection(direction, 'down');
              break;
            case 'ArrowLeft':
              direction = deactivateDirection(direction, 'left');
              break;
            case 'ArrowRight':
              direction = deactivateDirection(direction, 'right');
              break;
          }

          console.info(direction);
        });

        window.addEventListener('keydown', function(event) {
          switch (event.key) {
            case 'ArrowUp':
              direction = activateDirection(direction, 'up');
              break;
            case 'ArrowDown':
              direction = activateDirection(direction, 'down');
              break;
            case 'ArrowLeft':
              direction = activateDirection(direction, 'left');
              break;
            case 'ArrowRight':
              direction = activateDirection(direction, 'right');
              break;
          }

          console.info(direction);
        });
      }

      function boot() {
        attachKeyboardListeners();
      }

      document.addEventListener('DOMContentLoaded', boot);
    </script>
    <style>
      * {
        box-sizing: border-box;
      }
      html, body {
        width: 100%;
        margin: 0;
      }

      body {
        height: 100vh;
      }

      .box {
        width: 130px;
        height: 130px;
        outline: 1px solid silver;
        margin: 2px;
      }
    </style>
  </head>
  <body>
    <div style='display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%'>
      <div style='display: flex'>
        <div id='up' class='box' style='background: transparent;'></div>
      </div>
      <div style='display: flex'>
        <div id='left' class='box' style='background: transparent;'></div>
        <div id='down' class='box' style='background: transparent;'></div>
        <div id='right' class='box' style='background: transparent;'></div>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script>
	function activateDirection(direction, vector) {
	document.getElementById(vector).style.background = 'red';

	return {
	...direction,
	[vector]: true,
	}
	}

	function deactivateDirection(direction, vector) {
	document.getElementById(vector).style.background = 'transparent';

	return {
	...direction,
	[vector]: false,
	}
	}

	function resetDirection() {
	return {
	up: false,
	down: false,
	left: false,
	right: false
	}
	}

	function attachKeyboardListeners() {
	let direction = resetDirection();

	window.addEventListener('keyup', function(event) {
	switch (event.key) {
	case 'ArrowUp':
	direction = deactivateDirection(direction, 'up');
	break;
	case 'ArrowDown':
	direction = deactivateDirection(direction, 'down');
	break;
	case 'ArrowLeft':
	direction = deactivateDirection(direction, 'left');
	break;
	case 'ArrowRight':
	direction = deactivateDirection(direction, 'right');
	break;
	}

	console.info(direction);
	});

	window.addEventListener('keydown', function(event) {
	switch (event.key) {
	case 'ArrowUp':
	direction = activateDirection(direction, 'up');
	break;
	case 'ArrowDown':
	direction = activateDirection(direction, 'down');
	break;
	case 'ArrowLeft':
	direction = activateDirection(direction, 'left');
	break;
	case 'ArrowRight':
	direction = activateDirection(direction, 'right');
	break;
	}

	console.info(direction);
	});
	}

	function boot() {
	attachKeyboardListeners();
	}

	document.addEventListener('DOMContentLoaded', boot);
	</script>
	<style>
	* {
	box-sizing: border-box;
	}
	html, body {
	width: 100%;
	margin: 0;
	}

	body {
	height: 100vh;
	}

	.box {
	width: 130px;
	height: 130px;
	outline: 1px solid silver;
	margin: 2px;
	}
	</style>
	</head>
	<body>
	<div style='display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%'>
	<div style='display: flex'>
	<div id='up' class='box' style='background: transparent;'></div>
	</div>
	<div style='display: flex'>
	<div id='left' class='box' style='background: transparent;'></div>
	<div id='down' class='box' style='background: transparent;'></div>
	<div id='right' class='box' style='background: transparent;'></div>
	</div>
	</div>
	</body>
	</html>