87 lines
No EOL
2.5 KiB
Text
87 lines
No EOL
2.5 KiB
Text
---
|
|
title: FPV
|
|
tags:
|
|
- game
|
|
---
|
|
{% assign bodyClass = 'body_fpv' -%}
|
|
{% layout 'hippie/simple.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 %} |