From 4f029a1a73e77fa4d11c4c3c7b085ef18703ec51 Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 24 Mar 2026 20:59:14 +0100 Subject: [PATCH] feat: Change HippieCrosshair - Change structure for options - Add mergeOptions method to combine defaults with options - Rename stuff --- source/code/game.js | 126 ++++++++++++------- source/screens/demo/examples/game/fpv.liquid | 22 ++-- 2 files changed, 93 insertions(+), 55 deletions(-) diff --git a/source/code/game.js b/source/code/game.js index bab55c4..9b75f3f 100644 --- a/source/code/game.js +++ b/source/code/game.js @@ -5,24 +5,48 @@ class HippieCrosshair { this.debug = options.debug || false; + const defaults = { + crosshair: { + size: 16, + thickness: 2, + color: '#000', + gapSize: 8, + style: 'cross' + }, + connector: { + distance: 128, // Distance to draw next symbol + spacing: 64, // Space between symbols + size: 8, + color: '#000', + style: 'arrow', + visibility: true + }, + line: { + color: 'rgba(0, 0, 0, 0.1)', + width: 1 + } + }; + const merged = this.mergeOptions(defaults, options); + const { crosshair, connector, line } = merged; + // Crosshair options - this.size = options.size || 16; - this.thickness = options.thickness || 2; - this.color = options.color || '#000'; - this.gapSize = options.gapSize || 8; - this.style = options.style || 'cross'; + this.size = crosshair.size; + this.thickness = crosshair.thickness; + this.color = crosshair.color; + this.gapSize = crosshair.gapSize; + this.style = crosshair.style; + + // Connector options + this.distance = connector.distance; + this.spacing = connector.spacing; + this.connectorSize = connector.size; + this.connectorColor = connector.color; + this.connectorStyle = connector.style; + this.connectorShow = connector.visibility; // Line options - this.lineColor = options.lineColor || '#fff'; - this.lineWidth = options.lineWidth || 1; - this.showConnector = options.showConnector !== false; - - // Symbol options - this.symbolDistance = options.symbolDistance || 128; // Distance to draw next symbol - this.symbolSpacing = options.symbolSpacing || 64; // Space between symbols - this.symbolSize = options.symbolSize || 8; - this.symbolColor = options.symbolColor || '#000'; - this.symbolStyle = options.symbolStyle || 'arrow'; + this.lineColor = line.color || '#fff'; + this.lineWidth = line.width || 1; this.mouseX = canvas.width / 2; this.mouseY = canvas.height / 2; @@ -35,6 +59,22 @@ class HippieCrosshair { this.animate(); } + mergeOptions(defaults, options) { + const merged = JSON.parse(JSON.stringify(defaults)); + + if (options.crosshair) { + Object.assign(merged.crosshair, options.crosshair); + } + if (options.connector) { + Object.assign(merged.connector, options.connector); + } + if (options.line) { + Object.assign(merged.line, options.line); + } + + return merged; + } + setupEventListeners() { document.addEventListener('mousemove', (event) => { this.mouseX = event.clientX; @@ -50,7 +90,7 @@ class HippieCrosshair { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - if (this.showConnector) { + if (this.connectorShow) { if (this.debug) this.drawLine(); this.drawConnector(); } @@ -80,40 +120,38 @@ class HippieCrosshair { const dx = this.mouseX - centerX; const dy = this.mouseY - centerY; - const distance = Math.sqrt(dx * dx + dy * dy); + const delta = Math.sqrt(dx * dx + dy * dy); - // Only draw symbols if cursor is far enough from center - if (distance < this.symbolDistance) { + // Only draw connectors if cursor is far enough from center + if (delta < this.distance) { return; } const angle = Math.atan2(dy, dx); + const count = Math.floor((delta - this.distance) / this.spacing); - // Calculate how many symbols to draw - const symbolCount = Math.floor((distance - this.symbolDistance) / this.symbolSpacing); + for (let i = 0; i < count; i++) { + const distance = this.distance + (i * this.spacing); + const x = centerX + Math.cos(angle) * distance; + const y = centerY + Math.sin(angle) * distance; - for (let i = 0; i < symbolCount; i++) { - const symbolDistance = this.symbolDistance + (i * this.symbolSpacing); - const symbolX = centerX + Math.cos(angle) * symbolDistance; - const symbolY = centerY + Math.sin(angle) * symbolDistance; - - this.drawSymbol(symbolX, symbolY, angle); + this.drawSymbol(x, y, angle); } } drawSymbol(x, y, angle = 0) { - this.ctx.fillStyle = this.symbolColor; - this.ctx.strokeStyle = this.symbolColor; + this.ctx.fillStyle = this.connectorColor; + this.ctx.strokeStyle = this.connectorColor; this.ctx.lineWidth = 1; - switch (this.symbolStyle) { + switch (this.connectorStyle) { case 'circle': this.ctx.beginPath(); - this.ctx.arc(x, y, this.symbolSize / 2, 0, Math.PI * 2); + this.ctx.arc(x, y, this.connectorSize / 2, 0, Math.PI * 2); this.ctx.fill(); break; case 'diamond': - const size = this.symbolSize - (this.symbolSize / 4); + const size = this.connectorSize - (this.connectorSize / 4); this.ctx.beginPath(); this.ctx.moveTo(x, y - size); this.ctx.lineTo(x + size, y); @@ -124,10 +162,10 @@ class HippieCrosshair { break; case 'square': this.ctx.fillRect( - x - this.symbolSize / 2, - y - this.symbolSize / 2, - this.symbolSize, - this.symbolSize + x - this.connectorSize / 2, + y - this.connectorSize / 2, + this.connectorSize, + this.connectorSize ); break; case 'arrow': @@ -137,7 +175,7 @@ class HippieCrosshair { } arrow(x, y, angle) { - const size = this.symbolSize - (this.symbolSize / 4); + const size = this.connectorSize - (this.connectorSize / 4); this.ctx.save(); this.ctx.translate(x, y); @@ -221,20 +259,20 @@ class HippieCrosshair { this.style = style; } - setColor(color) { + setCrosshairColor(color) { this.color = color; } - setSymbolStyle(style) { - this.symbolStyle = style; + setConnectorStyle(style) { + this.connectorStyle = style; } - setSymbolColor(color) { - this.symbolColor = color; + setConnectorColor(color) { + this.connectorColor = color; } - setLineVisible(visible) { - this.showConnector = visible; + setConnectorVisibility(visible) { + this.connectorShow = visible; } startAnimation() { diff --git a/source/screens/demo/examples/game/fpv.liquid b/source/screens/demo/examples/game/fpv.liquid index 7dd1b54..1a1fa13 100644 --- a/source/screens/demo/examples/game/fpv.liquid +++ b/source/screens/demo/examples/game/fpv.liquid @@ -33,12 +33,12 @@ tags: {% endblock %} @@ -59,18 +59,18 @@ tags: crosshair.setCrosshairStyle(style); } - function changeSymbolStyle(style) { - crosshair.setSymbolStyle(style); + function changeConnectorStyle(style) { + crosshair.setConnectorStyle(style); } function changeColor(color) { - crosshair.setColor(color); - crosshair.setSymbolColor(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 toggleLine() { - crosshair.setLineVisible(!crosshair.showConnector); + function toggleConnector() { + crosshair.setConnectorVisibility(!crosshair.connectorShow); } function toggleAnimation() {