---
title: MWO
tags:
- game
---
{% assign bodyClass = 'body_mwo' -%}
{% layout 'hippie-view/game.liquid' %}

{% block links %}
{{ block.super -}}
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
{% endblock %}

{% block body %}
<canvas id="view"></canvas>

<header class="io controls">
	<nav>
		<button onclick="toggleAnimation()">Toggle</button>
	</nav>
	<nav>
		<span>Color</span>
		<button onclick="changeColor('black')">Black</button>
		<button onclick="changeColor('white')">White</button>
		<button onclick="changeColor('crimson')">Red</button>
		<button onclick="changeColor('#00ffff')">Cyan</button>
	</nav>
	<nav>
		<span>Crosshair</span>
		<button onclick="changeCrosshairStyle('cross')"><i class="bi bi-plus-lg"></i></button>
		<button onclick="changeCrosshairStyle('circle')"><i class="bi bi-circle"></i></button>
		<button onclick="changeCrosshairStyle('dot')"><i class="bi bi-dot"></i></button>
		<button onclick="changeCrosshairStyle('level')"><i class="bi bi-dash-circle"></i></button>
	</nav>
	<nav>
		<span>Connector</span>
		<button onclick="toggleConnector()">Toggle</button>
		<hr class="vertical">
		<button onclick="changeConnectorStyle('arrow')"><i class="bi bi-caret-up-fill"></i></button>
		<button onclick="changeConnectorStyle('square')"><i class="bi bi-square-fill"></i></button>
		<button onclick="changeConnectorStyle('circle')"><i class="bi bi-circle-fill"></i></button>
		<button onclick="changeConnectorStyle('diamond')"><i class="bi bi-diamond-fill"></i></button>
	</nav>
	<nav>
		<span>Drag/Attraction</span>
		<button>Toggle</button>
		<hr class="vertical">
		<div class="group_nav">
			<label>Strength</label>
			<input min="0" max="100" value="16" type="range">
			<span>0.15</span>
		</div>
		<div class="group_nav">
			<label>Distance</label>
			<input min="48" max="512" value="256" type="range">
			<span>256</span>
		</div>
	</nav>
</header>
{% endblock %}

{% block assets %}
<script src="/js/game.js"></script>
{% endblock %}

{% block script %}
<script>
	const canvas = document.getElementById('view');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;

	const crosshair = new HippieCrosshair(canvas);

	function changeCrosshairStyle(style) {
		crosshair.setCrosshairStyle(style);
	}

	function changeConnectorStyle(style) {
		crosshair.setConnectorStyle(style);
	}

	function changeColor(color) {
		crosshair.setCrosshairColor(color);
		crosshair.setConnectorColor(color);
		crosshair.lineColor = `rgba(${parseInt(color.slice(1, 3), 16)}, ${parseInt(color.slice(3, 5), 16)}, ${parseInt(color.slice(5, 7), 16)}, 0.3)`;
	}

	function toggleConnector() {
		crosshair.setConnectorVisibility(!crosshair.connectorShow);
	}

	function toggleAnimation() {
		crosshair.toggleAnimation();
	}

	window.addEventListener('resize', () => {
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	});
</script>
{% endblock %}