feat: Change file structure

- Move return object to named export for 11ty config
- screens is now view
- 11ty data files moved to view/_data
- templates is now view/_includes
- Both are the default directories
- data is now used as intended, for user data
- Update index to reflect filenames and structure

source/view/demo/examples/game/mwo.liquid

@@ -0,0 +1,86 @@
+---
+title: MWO
+tags:
+- game
+---
+{% assign bodyClass = 'body_mwo' -%}
+{% layout 'hippie/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>
+</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 %}