Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5748e51bd9 | |||
| b477eebef1 | |||
|
912863e78f |
@@ -395,7 +395,6 @@
|
||||
<div id="memory-connections-panel" class="memory-connections-panel" style="display:none;" aria-label="Memory Connections Panel"></div>
|
||||
|
||||
<script src="./boot.js"></script>
|
||||
<script src="./js/spatial-search.js"></script>
|
||||
<script src="./avatar-customization.js"></script>
|
||||
<script src="./lod-system.js"></script>
|
||||
<script>
|
||||
|
||||
@@ -1,457 +1,317 @@
|
||||
/**
|
||||
* Spatial Search - Find nearest user/object by name
|
||||
* Issue #1540: feat: spatial search — find nearest user/object by name
|
||||
*
|
||||
* Provides search functionality to find users/objects by name
|
||||
* and show distance, direction, and pathfinding.
|
||||
*/
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
// SPATIAL SEARCH — Find nearest user/object by name
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
//
|
||||
// Search for users/objects by name with distance and direction.
|
||||
// Provides autocomplete, pathfinding arrow, and keyboard shortcuts.
|
||||
//
|
||||
// Usage:
|
||||
// const search = new SpatialSearch({ maxDistance: 1000 });
|
||||
// search.registerEntity('id', { name, type, position });
|
||||
// const results = search.searchEntities('query');
|
||||
// ═══════════════════════════════════════════════════════════════
|
||||
|
||||
class SpatialSearch {
|
||||
constructor(options = {}) {
|
||||
this.maxDistance = options.maxDistance || 1000; // Maximum search distance
|
||||
this.searchDelay = options.searchDelay || 300; // Delay before search (ms)
|
||||
this.onResultSelect = options.onResultSelect || (() => {});
|
||||
this.onError = options.onError || console.error;
|
||||
|
||||
// Track entities in the world
|
||||
this.entities = new Map(); // id -> {name, position, type, ...}
|
||||
|
||||
// Search UI elements
|
||||
this.searchInput = null;
|
||||
this.resultsContainer = null;
|
||||
this.pathArrow = null;
|
||||
|
||||
// Initialize UI
|
||||
this.initUI();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize search UI
|
||||
*/
|
||||
initUI() {
|
||||
// Create search container
|
||||
const searchContainer = document.createElement('div');
|
||||
searchContainer.id = 'spatial-search-container';
|
||||
searchContainer.style.cssText = `
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
`;
|
||||
|
||||
// Create search input
|
||||
this.searchInput = document.createElement('input');
|
||||
this.searchInput.type = 'text';
|
||||
this.searchInput.placeholder = 'Search users/objects...';
|
||||
this.searchInput.style.cssText = `
|
||||
width: 300px;
|
||||
padding: 10px 15px;
|
||||
border: 2px solid #4af0c0;
|
||||
border-radius: 8px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
|
||||
`;
|
||||
|
||||
// Create results container
|
||||
this.resultsContainer = document.createElement('div');
|
||||
this.resultsContainer.id = 'spatial-search-results';
|
||||
this.resultsContainer.style.cssText = `
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border: 1px solid #4af0c0;
|
||||
border-radius: 8px;
|
||||
margin-top: 5px;
|
||||
`;
|
||||
|
||||
// Add event listeners
|
||||
this.searchInput.addEventListener('input', () => this.handleSearch());
|
||||
this.searchInput.addEventListener('keydown', (e) => this.handleKeydown(e));
|
||||
|
||||
// Add to container
|
||||
searchContainer.appendChild(this.searchInput);
|
||||
searchContainer.appendChild(this.resultsContainer);
|
||||
|
||||
// Add to document
|
||||
document.body.appendChild(searchContainer);
|
||||
|
||||
// Create path arrow
|
||||
this.pathArrow = document.createElement('div');
|
||||
this.pathArrow.id = 'spatial-search-arrow';
|
||||
this.pathArrow.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 100px;
|
||||
right: 20px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(74, 240, 192, 0.2);
|
||||
border: 2px solid #4af0c0;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: #4af0c0;
|
||||
cursor: pointer;
|
||||
z-index: 999;
|
||||
`;
|
||||
this.pathArrow.innerHTML = '→';
|
||||
this.pathArrow.addEventListener('click', () => this.clearSearch());
|
||||
document.body.appendChild(this.pathArrow);
|
||||
}
|
||||
|
||||
/**
|
||||
* Show search UI
|
||||
*/
|
||||
show() {
|
||||
const container = document.getElementById('spatial-search-container');
|
||||
if (container) {
|
||||
container.style.display = 'block';
|
||||
this.searchInput.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide search UI
|
||||
*/
|
||||
hide() {
|
||||
const container = document.getElementById('spatial-search-container');
|
||||
if (container) {
|
||||
container.style.display = 'none';
|
||||
this.clearResults();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle search UI
|
||||
*/
|
||||
toggle() {
|
||||
const container = document.getElementById('spatial-search-container');
|
||||
if (container) {
|
||||
if (container.style.display === 'none') {
|
||||
this.show();
|
||||
} else {
|
||||
this.hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle search input
|
||||
*/
|
||||
handleSearch() {
|
||||
const query = this.searchInput.value.trim();
|
||||
|
||||
if (!query) {
|
||||
this.clearResults();
|
||||
return;
|
||||
}
|
||||
|
||||
// Debounce search
|
||||
clearTimeout(this.searchTimeout);
|
||||
this.searchTimeout = setTimeout(() => {
|
||||
this.performSearch(query);
|
||||
}, this.searchDelay);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle keyboard events
|
||||
*/
|
||||
handleKeydown(event) {
|
||||
if (event.key === 'Escape') {
|
||||
this.hide();
|
||||
} else if (event.key === 'Enter') {
|
||||
const firstResult = this.resultsContainer.querySelector('.search-result');
|
||||
if (firstResult) {
|
||||
firstResult.click();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform search
|
||||
*/
|
||||
performSearch(query) {
|
||||
const results = this.searchEntities(query);
|
||||
this.displayResults(results);
|
||||
}
|
||||
|
||||
/**
|
||||
* Search entities by name
|
||||
*/
|
||||
searchEntities(query) {
|
||||
const lowerQuery = query.toLowerCase();
|
||||
const results = [];
|
||||
|
||||
for (const [id, entity] of this.entities) {
|
||||
const name = (entity.name || '').toLowerCase();
|
||||
const type = (entity.type || '').toLowerCase();
|
||||
|
||||
// Check if name or type matches query
|
||||
if (name.includes(lowerQuery) || type.includes(lowerQuery)) {
|
||||
results.push({
|
||||
id,
|
||||
name: entity.name,
|
||||
type: entity.type,
|
||||
position: entity.position,
|
||||
distance: this.calculateDistance(entity.position),
|
||||
direction: this.calculateDirection(entity.position)
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Sort by distance
|
||||
results.sort((a, b) => a.distance - b.distance);
|
||||
|
||||
// Limit results
|
||||
return results.slice(0, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate distance to entity
|
||||
*/
|
||||
calculateDistance(position) {
|
||||
if (!position) return Infinity;
|
||||
|
||||
// Get local player position (would be from game state)
|
||||
const localPos = this.getLocalPlayerPosition();
|
||||
if (!localPos) return Infinity;
|
||||
|
||||
const dx = position.x - localPos.x;
|
||||
const dy = position.y - localPos.y;
|
||||
const dz = position.z - localPos.z;
|
||||
|
||||
return Math.sqrt(dx * dx + dy * dy + dz * dz);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculate direction to entity
|
||||
*/
|
||||
calculateDirection(position) {
|
||||
if (!position) return 'unknown';
|
||||
|
||||
const localPos = this.getLocalPlayerPosition();
|
||||
if (!localPos) return 'unknown';
|
||||
|
||||
const dx = position.x - localPos.x;
|
||||
const dz = position.z - localPos.z;
|
||||
|
||||
// Calculate angle
|
||||
const angle = Math.atan2(dz, dx) * (180 / Math.PI);
|
||||
|
||||
// Convert to direction
|
||||
if (angle >= -22.5 && angle < 22.5) return 'E';
|
||||
if (angle >= 22.5 && angle < 67.5) return 'SE';
|
||||
if (angle >= 67.5 && angle < 112.5) return 'S';
|
||||
if (angle >= 112.5 && angle < 157.5) return 'SW';
|
||||
if (angle >= 157.5 || angle < -157.5) return 'W';
|
||||
if (angle >= -157.5 && angle < -112.5) return 'NW';
|
||||
if (angle >= -112.5 && angle < -67.5) return 'N';
|
||||
if (angle >= -67.5 && angle < -22.5) return 'NE';
|
||||
|
||||
return 'unknown';
|
||||
}
|
||||
|
||||
/**
|
||||
* Get local player position (placeholder)
|
||||
*/
|
||||
getLocalPlayerPosition() {
|
||||
// In real implementation, this would get position from game state
|
||||
// For now, return a placeholder
|
||||
return { x: 0, y: 0, z: 0 };
|
||||
}
|
||||
|
||||
/**
|
||||
* Display search results
|
||||
*/
|
||||
displayResults(results) {
|
||||
this.clearResults();
|
||||
|
||||
if (results.length === 0) {
|
||||
const noResults = document.createElement('div');
|
||||
noResults.className = 'search-no-results';
|
||||
noResults.textContent = 'No results found';
|
||||
noResults.style.cssText = `
|
||||
padding: 10px;
|
||||
color: #888;
|
||||
font-style: italic;
|
||||
`;
|
||||
this.resultsContainer.appendChild(noResults);
|
||||
return;
|
||||
}
|
||||
|
||||
for (const result of results) {
|
||||
const resultElement = this.createResultElement(result);
|
||||
this.resultsContainer.appendChild(resultElement);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Create result element
|
||||
*/
|
||||
createResultElement(result) {
|
||||
const element = document.createElement('div');
|
||||
element.className = 'search-result';
|
||||
element.style.cssText = `
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid rgba(74, 240, 192, 0.2);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
element.innerHTML = `
|
||||
<div>
|
||||
<div style="font-weight: bold; color: #4af0c0;">${result.name}</div>
|
||||
<div style="font-size: 12px; color: #888;">${result.type || 'Unknown'}</div>
|
||||
</div>
|
||||
<div style="text-align: right;">
|
||||
<div style="color: #4af0c0;">${result.distance.toFixed(1)}m</div>
|
||||
<div style="font-size: 12px; color: #888;">${result.direction}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
element.addEventListener('click', () => {
|
||||
this.selectResult(result);
|
||||
});
|
||||
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a search result
|
||||
*/
|
||||
selectResult(result) {
|
||||
console.log('[SpatialSearch] Selected:', result);
|
||||
|
||||
// Show path arrow
|
||||
this.showPathArrow(result);
|
||||
|
||||
// Call callback
|
||||
this.onResultSelect(result);
|
||||
|
||||
// Hide search
|
||||
this.hide();
|
||||
}
|
||||
|
||||
/**
|
||||
* Show path arrow pointing to result
|
||||
*/
|
||||
showPathArrow(result) {
|
||||
if (!this.pathArrow) return;
|
||||
|
||||
// Update arrow direction
|
||||
const arrow = this.pathArrow.querySelector('span') || this.pathArrow;
|
||||
const directionArrows = {
|
||||
'N': '↑',
|
||||
'NE': '↗',
|
||||
'E': '→',
|
||||
'SE': '↘',
|
||||
'S': '↓',
|
||||
'SW': '↙',
|
||||
'W': '←',
|
||||
'NW': '↖'
|
||||
};
|
||||
|
||||
arrow.innerHTML = directionArrows[result.direction] || '?';
|
||||
|
||||
// Show arrow
|
||||
this.pathArrow.style.display = 'flex';
|
||||
|
||||
// Update title
|
||||
this.pathArrow.title = `${result.name} - ${result.distance.toFixed(1)}m ${result.direction}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear search results
|
||||
*/
|
||||
clearResults() {
|
||||
if (this.resultsContainer) {
|
||||
this.resultsContainer.innerHTML = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear search and hide arrow
|
||||
*/
|
||||
clearSearch() {
|
||||
this.clearResults();
|
||||
this.searchInput.value = '';
|
||||
|
||||
if (this.pathArrow) {
|
||||
this.pathArrow.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Register an entity
|
||||
*/
|
||||
registerEntity(id, entity) {
|
||||
this.entities.set(id, entity);
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregister an entity
|
||||
*/
|
||||
unregisterEntity(id) {
|
||||
this.entities.delete(id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update entity position
|
||||
*/
|
||||
updateEntityPosition(id, position) {
|
||||
const entity = this.entities.get(id);
|
||||
if (entity) {
|
||||
entity.position = position;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Get search status
|
||||
*/
|
||||
getStatus() {
|
||||
return {
|
||||
entityCount: this.entities.size,
|
||||
maxDistance: this.maxDistance,
|
||||
searchDelay: this.searchDelay
|
||||
};
|
||||
}
|
||||
}
|
||||
constructor(options = {}) {
|
||||
this.maxDistance = options.maxDistance || 1000;
|
||||
this.onResultSelect = options.onResultSelect || null;
|
||||
this.entities = new Map();
|
||||
this.selectedIndex = -1;
|
||||
this.results = [];
|
||||
this.isOpen = false;
|
||||
this._initUI();
|
||||
this._bindKeys();
|
||||
}
|
||||
|
||||
// Export for use in other modules
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = SpatialSearch;
|
||||
}
|
||||
|
||||
// Global instance for browser use
|
||||
if (typeof window !== 'undefined') {
|
||||
window.SpatialSearch = SpatialSearch;
|
||||
|
||||
// Auto-initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const search = new SpatialSearch({
|
||||
maxDistance: 1000,
|
||||
onResultSelect: (result) => {
|
||||
console.log('Selected:', result);
|
||||
// In real implementation, this would navigate to the entity
|
||||
}
|
||||
});
|
||||
|
||||
// Store globally
|
||||
window.spatialSearch = search;
|
||||
|
||||
// Add keyboard shortcut (Ctrl+F or Cmd+F)
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
|
||||
e.preventDefault();
|
||||
search.toggle();
|
||||
}
|
||||
});
|
||||
// ─── Entity Management ─────────────────────────────────
|
||||
|
||||
registerEntity(id, { name, type = 'object', position }) {
|
||||
this.entities.set(id, {
|
||||
id,
|
||||
name: name.toLowerCase(),
|
||||
displayName: name,
|
||||
type,
|
||||
position: { ...position }
|
||||
});
|
||||
}
|
||||
|
||||
unregisterEntity(id) {
|
||||
this.entities.delete(id);
|
||||
}
|
||||
|
||||
updateEntityPosition(id, position) {
|
||||
const entity = this.entities.get(id);
|
||||
if (entity) {
|
||||
entity.position = { ...position };
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Search ────────────────────────────────────────────
|
||||
|
||||
searchEntities(query, cameraPosition = null) {
|
||||
if (!query || query.length < 1) {
|
||||
this.results = [];
|
||||
this._renderResults();
|
||||
return [];
|
||||
}
|
||||
|
||||
const q = query.toLowerCase();
|
||||
const results = [];
|
||||
|
||||
for (const [id, entity] of this.entities) {
|
||||
if (!entity.name.includes(q)) continue;
|
||||
|
||||
let distance = 0;
|
||||
let direction = '';
|
||||
|
||||
if (cameraPosition) {
|
||||
distance = this._calculateDistance(cameraPosition, entity.position);
|
||||
if (distance > this.maxDistance) continue;
|
||||
direction = this._calculateDirection(cameraPosition, entity.position);
|
||||
}
|
||||
|
||||
results.push({
|
||||
id,
|
||||
name: entity.displayName,
|
||||
type: entity.type,
|
||||
distance: Math.round(distance * 10) / 10,
|
||||
direction,
|
||||
position: entity.position
|
||||
});
|
||||
}
|
||||
|
||||
// Sort by distance
|
||||
results.sort((a, b) => a.distance - b.distance);
|
||||
|
||||
this.results = results.slice(0, 10); // Limit to 10 results
|
||||
this.selectedIndex = this.results.length > 0 ? 0 : -1;
|
||||
this._renderResults();
|
||||
|
||||
return this.results;
|
||||
}
|
||||
|
||||
selectResult(index) {
|
||||
if (index < 0 || index >= this.results.length) return;
|
||||
|
||||
this.selectedIndex = index;
|
||||
this._renderResults();
|
||||
|
||||
const result = this.results[index];
|
||||
if (result && this.onResultSelect) {
|
||||
this.onResultSelect(result);
|
||||
}
|
||||
|
||||
this.close();
|
||||
}
|
||||
|
||||
// ─── Distance & Direction ──────────────────────────────
|
||||
|
||||
_calculateDistance(from, to) {
|
||||
const dx = to.x - from.x;
|
||||
const dy = to.y - from.y;
|
||||
const dz = to.z - from.z;
|
||||
return Math.sqrt(dx * dx + dy * dy + dz * dz);
|
||||
}
|
||||
|
||||
_calculateDirection(from, to) {
|
||||
const dx = to.x - from.x;
|
||||
const dz = to.z - from.z;
|
||||
const angle = Math.atan2(dx, dz) * (180 / Math.PI);
|
||||
|
||||
// Convert to compass direction
|
||||
if (angle >= -22.5 && angle < 22.5) return 'N';
|
||||
if (angle >= 22.5 && angle < 67.5) return 'NE';
|
||||
if (angle >= 67.5 && angle < 112.5) return 'E';
|
||||
if (angle >= 112.5 && angle < 157.5) return 'SE';
|
||||
if (angle >= 157.5 || angle < -157.5) return 'S';
|
||||
if (angle >= -157.5 && angle < -112.5) return 'SW';
|
||||
if (angle >= -112.5 && angle < -67.5) return 'W';
|
||||
if (angle >= -67.5 && angle < -22.5) return 'NW';
|
||||
return 'N';
|
||||
}
|
||||
|
||||
// ─── UI ────────────────────────────────────────────────
|
||||
|
||||
_initUI() {
|
||||
// Search container
|
||||
this.container = document.createElement('div');
|
||||
this.container.id = 'spatial-search';
|
||||
this.container.className = 'spatial-search';
|
||||
this.container.style.display = 'none';
|
||||
|
||||
// Input
|
||||
this.input = document.createElement('input');
|
||||
this.input.type = 'text';
|
||||
this.input.className = 'spatial-search-input';
|
||||
this.input.placeholder = 'Search by name... (Ctrl+F)';
|
||||
this.input.addEventListener('input', () => this._onInput());
|
||||
this.input.addEventListener('keydown', (e) => this._onKeyDown(e));
|
||||
|
||||
// Results dropdown
|
||||
this.dropdown = document.createElement('div');
|
||||
this.dropdown.className = 'spatial-search-dropdown';
|
||||
|
||||
// Path arrow
|
||||
this.arrow = document.createElement('div');
|
||||
this.arrow.className = 'spatial-search-arrow';
|
||||
this.arrow.style.display = 'none';
|
||||
this.arrow.innerHTML = '<span class="arrow-icon">➤</span><span class="arrow-info"></span>';
|
||||
|
||||
this.container.appendChild(this.input);
|
||||
this.container.appendChild(this.dropdown);
|
||||
|
||||
document.body.appendChild(this.container);
|
||||
document.body.appendChild(this.arrow);
|
||||
}
|
||||
|
||||
_bindKeys() {
|
||||
document.addEventListener('keydown', (e) => {
|
||||
// Ctrl+F or Cmd+F to toggle
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'f') {
|
||||
e.preventDefault();
|
||||
this.toggle();
|
||||
return;
|
||||
}
|
||||
|
||||
// Escape to close
|
||||
if (e.key === 'Escape' && this.isOpen) {
|
||||
e.preventDefault();
|
||||
this.close();
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
_onInput() {
|
||||
const query = this.input.value;
|
||||
// Get camera position if available
|
||||
const cameraPos = window.camera ? {
|
||||
x: window.camera.position.x,
|
||||
y: window.camera.position.y,
|
||||
z: window.camera.position.z
|
||||
} : null;
|
||||
|
||||
this.searchEntities(query, cameraPos);
|
||||
}
|
||||
|
||||
_onKeyDown(e) {
|
||||
if (!this.isOpen || this.results.length === 0) return;
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
this.selectedIndex = Math.min(this.selectedIndex + 1, this.results.length - 1);
|
||||
this._renderResults();
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
this.selectedIndex = Math.max(this.selectedIndex - 1, 0);
|
||||
this._renderResults();
|
||||
break;
|
||||
case 'Enter':
|
||||
e.preventDefault();
|
||||
if (this.selectedIndex >= 0) {
|
||||
this.selectResult(this.selectedIndex);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
_renderResults() {
|
||||
this.dropdown.innerHTML = '';
|
||||
|
||||
if (this.results.length === 0) {
|
||||
if (this.input.value) {
|
||||
this.dropdown.innerHTML = '<div class="spatial-search-empty">No results found</div>';
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
this.results.forEach((result, index) => {
|
||||
const item = document.createElement('div');
|
||||
item.className = `spatial-search-item ${index === this.selectedIndex ? 'selected' : ''}`;
|
||||
item.innerHTML = `
|
||||
<span class="item-name">${this._escapeHtml(result.name)}</span>
|
||||
<span class="item-type">${result.type}</span>
|
||||
<span class="item-distance">${result.distance}m ${result.direction}</span>
|
||||
`;
|
||||
item.addEventListener('click', () => this.selectResult(index));
|
||||
this.dropdown.appendChild(item);
|
||||
});
|
||||
}
|
||||
|
||||
_updateArrow(result) {
|
||||
if (!result) {
|
||||
this.arrow.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
this.arrow.style.display = 'flex';
|
||||
const info = this.arrow.querySelector('.arrow-info');
|
||||
if (info) {
|
||||
info.textContent = `${result.name} — ${result.distance}m ${result.direction}`;
|
||||
}
|
||||
|
||||
// Rotate arrow based on direction
|
||||
const rotations = {
|
||||
'N': 0, 'NE': 45, 'E': 90, 'SE': 135,
|
||||
'S': 180, 'SW': 225, 'W': 270, 'NW': 315
|
||||
};
|
||||
const arrowIcon = this.arrow.querySelector('.arrow-icon');
|
||||
if (arrowIcon) {
|
||||
arrowIcon.style.transform = `rotate(${rotations[result.direction] || 0}deg)`;
|
||||
}
|
||||
}
|
||||
|
||||
_escapeHtml(str) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// ─── Public API ────────────────────────────────────────
|
||||
|
||||
open() {
|
||||
this.isOpen = true;
|
||||
this.container.style.display = 'flex';
|
||||
this.input.focus();
|
||||
this.input.value = '';
|
||||
this.results = [];
|
||||
this._renderResults();
|
||||
}
|
||||
|
||||
close() {
|
||||
this.isOpen = false;
|
||||
this.container.style.display = 'none';
|
||||
this.input.blur();
|
||||
this.selectedIndex = -1;
|
||||
this._updateArrow(null);
|
||||
}
|
||||
|
||||
toggle() {
|
||||
if (this.isOpen) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
getStatus() {
|
||||
return {
|
||||
entityCount: this.entities.size,
|
||||
isOpen: this.isOpen,
|
||||
resultCount: this.results.length,
|
||||
selectedIndex: this.selectedIndex
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Export for module systems
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = SpatialSearch;
|
||||
}
|
||||
|
||||
// Make available globally
|
||||
if (typeof window !== 'undefined') {
|
||||
window.SpatialSearch = SpatialSearch;
|
||||
}
|
||||
@@ -1,223 +1,99 @@
|
||||
/**
|
||||
* Tests for Spatial Search
|
||||
* Issue #1540: feat: spatial search — find nearest user/object by name
|
||||
*/
|
||||
// Test suite for SpatialSearch module
|
||||
// Run: node --test tests/test_spatial_search.js
|
||||
|
||||
const test = require('node:test');
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
const { describe, it, beforeEach } = require('node:test');
|
||||
const assert = require('node:assert');
|
||||
|
||||
const ROOT = path.resolve(__dirname, '..');
|
||||
|
||||
// Mock document
|
||||
const mockDocument = {
|
||||
createElement: (tag) => {
|
||||
const element = {
|
||||
style: {},
|
||||
innerHTML: '',
|
||||
textContent: '',
|
||||
placeholder: '',
|
||||
title: '',
|
||||
addEventListener: () => {},
|
||||
appendChild: () => {},
|
||||
querySelector: () => null,
|
||||
querySelectorAll: () => [],
|
||||
focus: () => {}
|
||||
};
|
||||
return element;
|
||||
},
|
||||
body: {
|
||||
appendChild: () => {}
|
||||
},
|
||||
getElementById: () => null,
|
||||
addEventListener: () => {}
|
||||
// Mock DOM for Node.js environment
|
||||
global.document = {
|
||||
createElement: (tag) => ({
|
||||
className: '',
|
||||
style: {},
|
||||
innerHTML: '',
|
||||
textContent: '',
|
||||
addEventListener: () => {},
|
||||
appendChild: () => {},
|
||||
querySelector: () => ({ style: {}, textContent: '' })
|
||||
}),
|
||||
body: { appendChild: () => {} },
|
||||
addEventListener: () => {}
|
||||
};
|
||||
global.window = { camera: null };
|
||||
|
||||
// Mock console
|
||||
const mockConsole = {
|
||||
log: () => {},
|
||||
warn: () => {},
|
||||
error: () => {}
|
||||
};
|
||||
// Load module
|
||||
const SpatialSearch = require('../js/spatial-search.js');
|
||||
|
||||
// Load spatial-search.js
|
||||
const spatialSearchPath = path.join(ROOT, 'js', 'spatial-search.js');
|
||||
const spatialSearchCode = fs.readFileSync(spatialSearchPath, 'utf8');
|
||||
describe('SpatialSearch', () => {
|
||||
let search;
|
||||
|
||||
// Create VM context
|
||||
const context = {
|
||||
module: { exports: {} },
|
||||
exports: {},
|
||||
console: mockConsole,
|
||||
document: mockDocument,
|
||||
window: {
|
||||
addEventListener: () => {},
|
||||
location: { protocol: 'http:', hostname: 'localhost' }
|
||||
},
|
||||
Math: Math,
|
||||
setTimeout: () => {},
|
||||
clearTimeout: () => {}
|
||||
};
|
||||
beforeEach(() => {
|
||||
search = new SpatialSearch({ maxDistance: 1000 });
|
||||
});
|
||||
|
||||
// Execute spatial-search.js in context
|
||||
const vm = require('node:vm');
|
||||
vm.runInNewContext(spatialSearchCode, context);
|
||||
it('loads correctly', () => {
|
||||
assert.ok(SpatialSearch);
|
||||
});
|
||||
|
||||
// Get SpatialSearch class
|
||||
const SpatialSearch = context.window.SpatialSearch || context.module.exports;
|
||||
it('can be instantiated', () => {
|
||||
assert.ok(search instanceof SpatialSearch);
|
||||
});
|
||||
|
||||
test('SpatialSearch loads correctly', () => {
|
||||
assert.ok(SpatialSearch, 'SpatialSearch should be defined');
|
||||
assert.ok(typeof SpatialSearch === 'function', 'SpatialSearch should be a constructor');
|
||||
});
|
||||
|
||||
test('SpatialSearch can be instantiated', () => {
|
||||
const search = new SpatialSearch();
|
||||
assert.ok(search, 'SpatialSearch instance should be created');
|
||||
assert.equal(search.maxDistance, 1000, 'Should have default max distance');
|
||||
assert.equal(search.searchDelay, 300, 'Should have default search delay');
|
||||
assert.ok(search.entities, 'Should have entities Map');
|
||||
});
|
||||
|
||||
test('SpatialSearch can register entities', () => {
|
||||
const search = new SpatialSearch();
|
||||
|
||||
it('can register entities', () => {
|
||||
search.registerEntity('user1', {
|
||||
name: 'Alice',
|
||||
type: 'user',
|
||||
position: { x: 10, y: 0, z: 5 }
|
||||
name: 'Alice',
|
||||
type: 'user',
|
||||
position: { x: 10, y: 0, z: 5 }
|
||||
});
|
||||
|
||||
search.registerEntity('user2', {
|
||||
name: 'Bob',
|
||||
type: 'user',
|
||||
position: { x: 20, y: 0, z: 10 }
|
||||
});
|
||||
|
||||
assert.equal(search.entities.size, 2, 'Should have 2 entities');
|
||||
assert.ok(search.entities.get('user1'), 'Should have user1');
|
||||
assert.ok(search.entities.get('user2'), 'Should have user2');
|
||||
});
|
||||
|
||||
test('SpatialSearch can unregister entities', () => {
|
||||
const search = new SpatialSearch();
|
||||
|
||||
search.registerEntity('user1', { name: 'Alice', type: 'user' });
|
||||
search.registerEntity('user2', { name: 'Bob', type: 'user' });
|
||||
|
||||
assert.equal(search.entities.size, 2, 'Should have 2 entities');
|
||||
|
||||
search.unregisterEntity('user1');
|
||||
assert.equal(search.entities.size, 1, 'Should have 1 entity after unregister');
|
||||
assert.ok(!search.entities.get('user1'), 'Should not have user1');
|
||||
});
|
||||
|
||||
test('SpatialSearch can update entity position', () => {
|
||||
const search = new SpatialSearch();
|
||||
|
||||
search.registerEntity('user1', {
|
||||
name: 'Alice',
|
||||
type: 'user',
|
||||
position: { x: 10, y: 0, z: 5 }
|
||||
});
|
||||
|
||||
const newPos = { x: 15, y: 0, z: 10 };
|
||||
search.updateEntityPosition('user1', newPos);
|
||||
|
||||
const entity = search.entities.get('user1');
|
||||
assert.deepEqual(entity.position, newPos, 'Should update position');
|
||||
});
|
||||
|
||||
test('SpatialSearch calculates distance correctly', () => {
|
||||
const search = new SpatialSearch();
|
||||
|
||||
// Mock getLocalPlayerPosition
|
||||
search.getLocalPlayerPosition = () => ({ x: 0, y: 0, z: 0 });
|
||||
|
||||
const pos1 = { x: 3, y: 0, z: 4 };
|
||||
const distance1 = search.calculateDistance(pos1);
|
||||
assert.equal(distance1, 5, 'Should calculate 3-4-5 triangle correctly');
|
||||
|
||||
const pos2 = { x: 0, y: 0, z: 0 };
|
||||
const distance2 = search.calculateDistance(pos2);
|
||||
assert.equal(distance2, 0, 'Should be 0 at same position');
|
||||
});
|
||||
|
||||
test('SpatialSearch calculates direction correctly', () => {
|
||||
const search = new SpatialSearch();
|
||||
|
||||
// Mock getLocalPlayerPosition
|
||||
search.getLocalPlayerPosition = () => ({ x: 0, y: 0, z: 0 });
|
||||
|
||||
// Test different directions
|
||||
assert.equal(search.calculateDirection({ x: 10, y: 0, z: 0 }), 'E', 'Should be East');
|
||||
assert.equal(search.calculateDirection({ x: 0, y: 0, z: 10 }), 'S', 'Should be South');
|
||||
assert.equal(search.calculateDirection({ x: -10, y: 0, z: 0 }), 'W', 'Should be West');
|
||||
assert.equal(search.calculateDirection({ x: 0, y: 0, z: -10 }), 'N', 'Should be North');
|
||||
});
|
||||
|
||||
test('SpatialSearch searches entities correctly', () => {
|
||||
const search = new SpatialSearch();
|
||||
|
||||
// Mock getLocalPlayerPosition
|
||||
search.getLocalPlayerPosition = () => ({ x: 0, y: 0, z: 0 });
|
||||
|
||||
// Register entities
|
||||
search.registerEntity('user1', {
|
||||
name: 'Alice',
|
||||
type: 'user',
|
||||
position: { x: 10, y: 0, z: 0 }
|
||||
});
|
||||
|
||||
search.registerEntity('user2', {
|
||||
name: 'Bob',
|
||||
type: 'user',
|
||||
position: { x: 20, y: 0, z: 0 }
|
||||
});
|
||||
|
||||
search.registerEntity('obj1', {
|
||||
name: 'Apple',
|
||||
type: 'object',
|
||||
position: { x: 5, y: 0, z: 0 }
|
||||
});
|
||||
|
||||
// Search for 'ali'
|
||||
const results1 = search.searchEntities('ali');
|
||||
assert.equal(results1.length, 1, 'Should find 1 result for "ali"');
|
||||
assert.equal(results1[0].name, 'Alice', 'Should find Alice');
|
||||
|
||||
// Search for 'bob'
|
||||
const results2 = search.searchEntities('bob');
|
||||
assert.equal(results2.length, 1, 'Should find 1 result for "bob"');
|
||||
assert.equal(results2[0].name, 'Bob', 'Should find Bob');
|
||||
|
||||
// Search for 'user' (type)
|
||||
const results3 = search.searchEntities('user');
|
||||
assert.equal(results3.length, 2, 'Should find 2 results for "user"');
|
||||
|
||||
// Search for 'apple'
|
||||
const results4 = search.searchEntities('apple');
|
||||
assert.equal(results4.length, 1, 'Should find 1 result for "apple"');
|
||||
assert.equal(results4[0].name, 'Apple', 'Should find Apple');
|
||||
|
||||
// Search for non-existent
|
||||
const results5 = search.searchEntities('xyz');
|
||||
assert.equal(results5.length, 0, 'Should find 0 results for "xyz"');
|
||||
});
|
||||
|
||||
test('SpatialSearch gets status', () => {
|
||||
const search = new SpatialSearch();
|
||||
|
||||
search.registerEntity('user1', { name: 'Alice', type: 'user' });
|
||||
search.registerEntity('user2', { name: 'Bob', type: 'user' });
|
||||
|
||||
const status = search.getStatus();
|
||||
|
||||
assert.ok(status, 'Should return status object');
|
||||
assert.equal(status.entityCount, 2, 'Should have 2 entities');
|
||||
assert.equal(status.maxDistance, 1000, 'Should have correct max distance');
|
||||
assert.equal(status.searchDelay, 300, 'Should have correct search delay');
|
||||
});
|
||||
assert.strictEqual(status.entityCount, 1);
|
||||
});
|
||||
|
||||
console.log('All SpatialSearch tests passed!');
|
||||
it('can unregister entities', () => {
|
||||
search.registerEntity('user1', { name: 'Alice', type: 'user', position: { x: 0, y: 0, z: 0 } });
|
||||
search.unregisterEntity('user1');
|
||||
assert.strictEqual(search.getStatus().entityCount, 0);
|
||||
});
|
||||
|
||||
it('can update entity position', () => {
|
||||
search.registerEntity('user1', { name: 'Alice', type: 'user', position: { x: 0, y: 0, z: 0 } });
|
||||
search.updateEntityPosition('user1', { x: 10, y: 0, z: 10 });
|
||||
// Verify by searching with camera position
|
||||
const results = search.searchEntities('alice', { x: 0, y: 0, z: 0 });
|
||||
assert.strictEqual(results.length, 1);
|
||||
assert.ok(results[0].distance > 0);
|
||||
});
|
||||
|
||||
it('calculates distance correctly', () => {
|
||||
const from = { x: 0, y: 0, z: 0 };
|
||||
const to = { x: 3, y: 0, z: 4 };
|
||||
const distance = search._calculateDistance(from, to);
|
||||
assert.strictEqual(distance, 5); // 3-4-5 triangle
|
||||
});
|
||||
|
||||
it('calculates direction correctly', () => {
|
||||
const from = { x: 0, y: 0, z: 0 };
|
||||
assert.strictEqual(search._calculateDirection(from, { x: 0, y: 0, z: 10 }), 'N');
|
||||
assert.strictEqual(search._calculateDirection(from, { x: 10, y: 0, z: 0 }), 'E');
|
||||
assert.strictEqual(search._calculateDirection(from, { x: 0, y: 0, z: -10 }), 'S');
|
||||
assert.strictEqual(search._calculateDirection(from, { x: -10, y: 0, z: 0 }), 'W');
|
||||
});
|
||||
|
||||
it('searches entities correctly', () => {
|
||||
search.registerEntity('1', { name: 'Alice', type: 'user', position: { x: 5, y: 0, z: 0 } });
|
||||
search.registerEntity('2', { name: 'Bob', type: 'user', position: { x: 10, y: 0, z: 0 } });
|
||||
search.registerEntity('3', { name: 'Alice Shop', type: 'object', position: { x: 20, y: 0, z: 0 } });
|
||||
|
||||
const results = search.searchEntities('ali', { x: 0, y: 0, z: 0 });
|
||||
assert.strictEqual(results.length, 2);
|
||||
assert.strictEqual(results[0].name, 'Alice'); // Closer
|
||||
assert.strictEqual(results[1].name, 'Alice Shop');
|
||||
});
|
||||
|
||||
it('gets status', () => {
|
||||
search.registerEntity('1', { name: 'Test', type: 'object', position: { x: 0, y: 0, z: 0 } });
|
||||
const status = search.getStatus();
|
||||
assert.strictEqual(status.entityCount, 1);
|
||||
assert.strictEqual(status.isOpen, false);
|
||||
assert.strictEqual(status.resultCount, 0);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user