\n' +
'
' +
' I\'ll generate a fielding plan with corners: ' +
' Color: ' +
'
' +
'
\n';
// Attach click event to find-hcf-plan-button after the dialog is created
self.openDialog = function() {
if (!self.dialogIsOpen()) {
dialog({
title: 'Fielding Plan View',
id: 'hcf-plan-view',
html: self.dialog_html,
width: '40%',
minHeight: 460,
});
self.attachEventHandler();
self.updateDialog();
$('#dialog-hcf-plan-view').css("height", "370px");
}
};
// Attach click event to find-hcf-plan-button after the dialog is created
self.open_info_dialog = function() {
if (!self.infoDialogIsOpen()) {
dialog({
title: 'Plugin And Other Information',
id: 'hcf-info-view',
html: self.info_dialog_html,
width: '30%',
minHeight: 120,
});
self.attachEventHandler();
self.updateDialog();
$('#dialog-hcf-info-view').css("height", "220px");
}
};
// Store the animation circle layers in an array to manipulate them later
self.circleAnimationLayers = {};
// Store the animation request IDs in an object to handle multiple animations
self.animationRequestIds = {};
/**
* @summary Animates a circle line expanding from a given portal location.
* @description This function animates a circle line that expands from a portal location with a pulsating effect.
* @author AI Assistant: ChatGPT v3.5
* @author Heistergand
*
* @param {string} portalGuid - The GUID of the portal.
*/
self.animateCircle = function(guid) {
if (self.animationStartTime === null) {
// Set the timestamp when the animation starts, but only if it's null
self.animationStartTime = performance.now();
}
/**
* The options for the circle line.
*
* @typedef {Object} CircleOptions
* @property {string} color - The color of the circle line.
* @property {number} weight - The line weight (thickness) of the circle line.
* @property {number} opacity - The opacity of the circle line.
* @property {number} fillOpacity - The opacity of the circle's fill.
*/
const circleOptions = {
// todo color
color: 'red',
weight: 2,
opacity: 1,
fillOpacity: 0,
};
const minRadius = 20; // Set the minimum radius to 20
const maxRadius = 120; // Set the maximum radius to 120
const animationDuration = 1000; // Adjust the animation speed as needed
/**
* Updates the circle's radius for the animation.
*
* @param {DOMHighResTimeStamp} timestamp - The current timestamp.
*/
function updateRadius(timestamp) {
const progress = timestamp - self.animationStartTime;
const circleRadius = (progress / animationDuration) * maxRadius;
circle.setRadius(circleRadius);
if (circleRadius < maxRadius) {
// Continue the animation
self.animationRequestIds[guid] = requestAnimationFrame(updateRadius);
} else {
// Reset the circle layer to its initial state
circle.setRadius(minRadius);
// Reset the self.animationStartTime so it can start fresh on the next hover
self.animationStartTime = timestamp;
// repeat
self.animationRequestIds[guid] = requestAnimationFrame(updateRadius);
}
}
const ll = portals[guid].getLatLng();
var circle = L.circle(ll, {
...circleOptions,
radius: minRadius, // Start with the minimum radius
});
circle.addTo(self.highlightLayergroup);
self.circleAnimationLayers[guid] = circle;
// const startTime = performance.now();
self.animationRequestId = requestAnimationFrame(updateRadius);
}; // end of animateCircle
/**
* @summary Animates a triangle polygon pulsating around a given portal location.
* @description This function animates a triangle polygon on a portal location with a pulsating effect.
* @author AI Assistant: ChatGPT v4.0
* @author Heistergand
*
* @param {string} guid - The GUID of the portal.
*/
self.animateTriangle = function(guid) {
const portalLocation = map.latLngToContainerPoint(portals[guid].getLatLng()); // Convert to pixel coordinates
const minTriangleRadius = 30;
const maxTriangleRadius = 38;
const triangleRotationSpeed = 0.02; // This can also be adjusted
const colorPulseFrequency = 0.8; // Hz
const triangleColorStart = 'ffff00'; // Yellow
const triangleColorEnd = 'ff0000'; // Red
const lineWeight = 3; // px
let rotationAngle = 0;
let triangleRadius = minTriangleRadius;
const triangleCoordinates = [
[0, triangleRadius],
[triangleRadius * Math.sqrt(3) / 2, -triangleRadius / 2],
[-triangleRadius * Math.sqrt(3) / 2, -triangleRadius / 2]
].map(coord => [coord[0] + portalLocation.x, coord[1] + portalLocation.y]); // Translate to portal location
const triangle = L.polygon(triangleCoordinates.map(coord => map.containerPointToLatLng(coord)), { color: `#${triangleColorStart}`, weight: lineWeight }); // Convert back to geographical coordinates
triangle.addTo(self.highlightLayergroup);
let colorPulseStartTime = performance.now();
function animate(timestamp) {
let radius = triangleRadius + (Math.sin((timestamp - colorPulseStartTime) * 2 * Math.PI * colorPulseFrequency / 1000) + 1) / 2 * (maxTriangleRadius - minTriangleRadius); // Pulsate between min and max radius
const newTriangleCoordinates = triangleCoordinates.map(coord => {
const x = coord[0] - portalLocation.x;
const y = coord[1] - portalLocation.y;
const angle = Math.atan2(y, x) - rotationAngle;
const newX = portalLocation.x + radius * Math.cos(angle);
const newY = portalLocation.y + radius * Math.sin(angle);
return map.containerPointToLatLng([newX, newY]); // Convert back to geographical coordinates
});
triangle.setLatLngs(newTriangleCoordinates);
const triangleColor = interpolateColor(triangleColorStart, triangleColorEnd, (Math.sin((timestamp - colorPulseStartTime) * 2 * Math.PI * colorPulseFrequency / 1000) + 1) / 2); // Pulsate color between start and end color
const sideLength = calculateSideLength(radius); // Calculate side length based on current radius
const sectorLength = sideLength / 3 ; // Divide side length into three sectors
triangle.setStyle({
color: `#${triangleColor}`,
dashArray: [sectorLength, sectorLength, 2 * sectorLength, sectorLength, 2 * sectorLength, sectorLength, sectorLength]
}); // Set dashArray style
rotationAngle += triangleRotationSpeed;
self.animationRequestIds[guid] = requestAnimationFrame(animate);
}
self.animationRequestIds[guid] = requestAnimationFrame(animate);
// Calculate the side length of an equilateral triangle based on the radius
function calculateSideLength(radius) {
return radius * Math.sqrt(3);
}
// Interpolates between two colors in hexadecimal format
function interpolateColor(colorStart, colorEnd, interpolationFactor) {
const startRGB = hexToRgb(colorStart);
const endRGB = hexToRgb(colorEnd);
const resultRGB = [
Math.round(startRGB[0] + interpolationFactor * (endRGB[0] - startRGB[0])),
Math.round(startRGB[1] + interpolationFactor * (endRGB[1] - startRGB[1])),
Math.round(startRGB[2] + interpolationFactor * (endRGB[2] - startRGB[2]))
];
return rgbToHex(resultRGB);
}
// Converts a color from hexadecimal to RGB format
function hexToRgb(hex) {
return [parseInt(hex.substring(0, 2), 16), parseInt(hex.substring(2, 4), 16), parseInt(hex.substring(4, 6), 16)];
}
// Converts a color from RGB to hexadecimal format
function rgbToHex(rgb) {
return rgb.map(value => value.toString(16).padStart(2, '0')).join('');
}
}
// Constants for animation styles
const ANIMATION_STYLE_DEFAULT = 'default';
const ANIMATION_STYLE_TRIANGLE = 'triangle';
// self.animationRequestId = null; // Global variable to keep track of the animation loop
self.animationStartTime = null; // Timestamp when the animation starts
// Set the default animation style
// let currentAnimationStyle = ANIMATION_STYLE_DEFAULT;
let currentAnimationStyle = ANIMATION_STYLE_TRIANGLE;
self.attachEventHandler = function() {
$("#hcf-simulator-btn").click(function() {
self.simulator(self.plan);
});
$("#hcf-to-arc-btn").click(function() {
self.drawArcPlan(self.plan);
window.plugin.arcs.list();
});
$("#field-type-general").change(function() {
if ($(this).is(":checked")) {
$("#hcf-layers-container").css("display", "none");
$("#hcf-mode-container").css("display", "block");
}
});
$("#field-type-cobweb").change(function() {
if ($(this).is(":checked")) {
$("#hcf-layers-container").css("display", "none");
$("#hcf-mode-container").css("display", "none");
}
});
$("#field-type-hcf").change(function() {
if ($(this).is(":checked")) {
$("#hcf-layers-container").css("display", "block");
$("#hcf-mode-container").css("display", "block");
}
});
$("#hcf-to-dt-btn").click(function() {
self.exportToDrawtools(self.plan);
});
$("#hcf-clear-btn").click(function() {
self.clearLayers();
self.selectedPortals = [];
self.plan = null;
$("#hcf-to-dt-btn").hide();
$("#hcf-to-arc-btn").hide();
self.updateDialog();
});
$("#find-hcf-plan").mousedown(function() {
// Clear text field
// setTimeout($("#hcf-plan-text").val("Please wait..."), 1);
$("#hcf-plan-text").val("Please wait...");
});
$("#find-hcf-plan").click(function() {
self.find_hcf_plan();
});
$("#more-info").click(function() {
self.open_info_dialog();
});
$("#hcf-portal-details").mouseover(function() {
if (window.map.hasLayer(self.highlightLayergroup)) {
self.highlightLayergroup.clearLayers();
}
self.selectedPortals.forEach(({guid, details}) => {
if (currentAnimationStyle === ANIMATION_STYLE_DEFAULT) {
self.animateCircle(guid);
} else if (currentAnimationStyle === ANIMATION_STYLE_TRIANGLE) {
self.animateTriangle(guid);
}
});
});
$("#hcf-portal-details").mouseout(function() {
for (const guid in self.animationRequestIds) {
const requestId = self.animationRequestIds[guid];
cancelAnimationFrame(requestId);
const circle = self.circleAnimationLayers[guid];
if (circle) {
circle.remove();
}
}
self.animationStartTime = null;
// Clear the animationRequestIds object after canceling the animations
self.animationRequestIds = {};
self.circleAnimationLayers = {};
if (window.map.hasLayer(self.highlightLayergroup)) {
self.highlightLayergroup.clearLayers();
}
});
// color picker event:
$("#hcf-colorPicker").change(function() {
console.debug('Field Planner | Selected color:', this.value); // Output the selected color
self.linkStyle.color = this.value;
self.fieldStyle.fillColor = this.value;
self.updateLayer();
});
} // end of attachEventHandler
self.find_hcf_plan = function() {
// Get selected portals and desired level
// let corners = self.selectedPortals;
let corners = self.selectedPortals.map(portal => portal.guid);
// If not enough portals have been selected, show an error and return
if (corners.length < 3) {
$("#hcf-plan-text").val("Please select at least three portals.");
return;
}
let level = parseInt($("#layers").val());
let mode = $( "input[type=radio][name=hcf-mode]:checked" ).val();
let fieldType = $( "input[type=radio][name=field-type]:checked" ).val();
let hcf = null;
// Try to construct HCF
$("#hcf-plan-text").val(`Calculating ${level} layers...`);
try {
hcf = self.findHCF(level, corners, null, mode, fieldType);
}
finally {
$("#hcf-plan-text").val("");
}
if (hcf === null) {
$("#hcf-plan-text").val("No HCF found. Try fewer layers, or different portals.");
} else {
// Generate portal data
let portalData = self.generatePortalData(hcf);
// let fieldData = self.generateFieldData(hcf);
// Generate the initial path
let t = Math.random() * 2 * Math.PI; // random angle in radians
let initialPath = Object.keys(portalData).sort((a, b) => {
let aValue = portalData[a].latLng.lat * Math.cos(t) + portalData[a].latLng.lng * Math.sin(t);
let bValue = portalData[b].latLng.lat * Math.cos(t) + portalData[b].latLng.lng * Math.sin(t);
return aValue - bValue;
}); // the "sweep" method: see https://youtu.be/iH0JMfR7BTI
// Find a shorter path
let shortestPath = self.findShortestPath(portalData, initialPath, fieldType);
// Generate the plan
self.plan = null;
self.plan = self.generatePlan(portalData, shortestPath, level, fieldType);
if (!self.plan) {
$("#hcf-plan-text").val('Something went wrong. Wait for all portals to load, and try again.');
$("#hcf-to-dt-btn").hide();
$("#hcf-to-arc-btn").hide();
} else {
$("#hcf-plan-text").val(self.planToText(self.plan));
self.drawPlan(self.plan);
if(typeof window.plugin.drawTools !== 'undefined') {
$("#hcf-to-dt-btn").show();
};
// don't tell anyone:
if(typeof window.plugin.arcs !== 'undefined') {
$("#hcf-to-arc-btn").show();
};
}
}
};
self.portalSelected = function(data) {
// ignore if dialog closed
if (!self.dialogIsOpen()) {
return;
};
// Ignore if already selected
let portalDetails = window.portalDetail.get(data.selectedPortalGuid);
if (portalDetails === undefined) return;
if (self.selectedPortals.some(({guid}) => guid === data.selectedPortalGuid)) return;
// Add selected portal to list
// debugger;
self.selectedPortals.push({guid: data.selectedPortalGuid, details: portalDetails});
while (self.selectedPortals.length > 3) {
self.selectedPortals.shift(); // remove the first item
}
self.updateDialog();
};
self.dialogIsOpen = function() {
return ($("#dialog-hcf-plan-view").hasClass("ui-dialog-content") && $("#dialog-hcf-plan-view").dialog('isOpen'));
};
self.infoDialogIsOpen = function() {
return ($("#dialog-hcf-info-view").hasClass("ui-dialog-content") && $("#dialog-hcf-info-view").dialog('isOpen'));
};
self.updateDialog = function() {
// Update portal details in dialog
let portalDetailsDiv = $('#hcf-portal-details');
let portalDetailsHTML = '';
// wipe placeholders and previous images
portalDetailsDiv.empty();
// ATTENTION! DO NOT EVER TOUCH THE STYLES WITHOUT INTENSE TESTING!
portalDetailsHTML += '
\n';
// debugger;
self.selectedPortals.forEach(({guid, details}) => {
// ATTENTION! DO NOT EVER TOUCH THE STYLES WITHOUT INTENSE TESTING!
portalDetailsHTML += '
' +
''+details.title +' \n';
});
// self.selectedPortalDetails
for (let i=0; i < (3 - self.selectedPortals.length); i++) {
// portalDetailsHTML += '
Please select ' + (3-self.selectedPortals.length) + ' more
\n';
portalDetailsHTML += self.cornerPreviewPlaceholderHTML;
}
portalDetailsHTML += '
';
portalDetailsDiv.append(portalDetailsHTML);
$('#hcf-plan-text').val(portalDetailsDiv.text());
// Enable "Find HCF Plan" button if three portals have been selected
if (self.selectedPortals.length === 3) {
$('#find-hcf-plan').prop('disabled', false);
$('#find-hcf-plan').css('cursor', 'pointer')
} else {
$('#find-hcf-plan').prop('disabled', false);
$('#find-hcf-plan').css('cursor', 'not-allowed')
};
};
self.distance = function(portal1, portal2) {
return portal1.distanceTo(portal2);
};
// PLUGIN END
self.pluginLoadedTimeStamp = performance.now();
console.log('Field Planner | plugin is ready')
// Add an info property for IITC's plugin system
var setup = self.setup;
setup.info = plugin_info;
// export changelog
if (typeof changelog !== 'undefined') setup.info.changelog = changelog;
// Make sure window.bootPlugins exists and is an array
if (!window.bootPlugins) window.bootPlugins = [];
// Add our startup hook
window.bootPlugins.push(setup);
// If IITC has already booted, immediately run the 'setup' function
if (window.iitcLoaded && typeof setup === 'function') setup();
} // wrapper end
// Create a script element to hold our content script
var script = document.createElement('script');
var info = {};
// GM_info is defined by the assorted monkey-themed browser extensions
// and holds information parsed from the script header.
if (typeof GM_info !== 'undefined' && GM_info && GM_info.script) {
info.script = {
version: GM_info.script.version,
name: GM_info.script.name,
description: GM_info.script.description
};
}
// Create a text node and our IIFE inside of it
var textContent = document.createTextNode('('+ wrapper +')('+ JSON.stringify(info) +')');
// Add some content to the script element
script.appendChild(textContent);
// Finally, inject it... wherever.
(document.body || document.head || document.documentElement).appendChild(script);