3026 lines
111 KiB
JavaScript
3026 lines
111 KiB
JavaScript
// Enhanced Map Editor with Zoom, Pan, Connections, and Live Stats
|
||
let currentLocations = [];
|
||
let availableNPCs = [];
|
||
let availableItems = [];
|
||
let availableInteractables = [];
|
||
let selectedLocationId = null;
|
||
let selectedNPCId = null;
|
||
let selectedItemId = null;
|
||
let selectedInteractableId = null;
|
||
let connections = [];
|
||
let liveStats = {players: {}, enemies: {}};
|
||
let canvas, ctx;
|
||
let currentTab = 'locations';
|
||
|
||
// View state
|
||
let scale = 50;
|
||
let minScale = 10;
|
||
let maxScale = 200;
|
||
let offsetX = 0;
|
||
let offsetY = 0;
|
||
let isDragging = false;
|
||
let dragStartX = 0;
|
||
let dragStartY = 0;
|
||
let clickStartTime = 0;
|
||
let clickStartPos = {x: 0, y: 0};
|
||
|
||
// Live stats refresh
|
||
let liveStatsInterval = null;
|
||
|
||
// Check authentication on load
|
||
window.addEventListener('DOMContentLoaded', async () => {
|
||
const response = await fetch('/api/check-auth');
|
||
const data = await response.json();
|
||
|
||
if (data.authenticated) {
|
||
showEditor();
|
||
} else {
|
||
document.getElementById('loginContainer').style.display = 'flex';
|
||
}
|
||
});
|
||
|
||
// Ensure canvas is properly sized after everything loads
|
||
window.addEventListener('load', () => {
|
||
if (canvas) {
|
||
setTimeout(resizeCanvas, 100);
|
||
}
|
||
});
|
||
|
||
// Login form handler
|
||
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||
e.preventDefault();
|
||
const password = document.getElementById('password').value;
|
||
|
||
try {
|
||
const response = await fetch('/api/login', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({password})
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showEditor();
|
||
} else {
|
||
showError(data.message);
|
||
}
|
||
} catch (error) {
|
||
showError('Login failed: ' + error.message);
|
||
}
|
||
});
|
||
|
||
function showError(message) {
|
||
const errorDiv = document.getElementById('loginError');
|
||
errorDiv.textContent = message;
|
||
errorDiv.style.display = 'block';
|
||
}
|
||
|
||
function showSuccess(message) {
|
||
const successDiv = document.getElementById('saveSuccess');
|
||
successDiv.textContent = message;
|
||
successDiv.style.display = 'block';
|
||
setTimeout(() => {
|
||
successDiv.style.display = 'none';
|
||
}, 3000);
|
||
}
|
||
|
||
async function showEditor() {
|
||
document.getElementById('loginContainer').style.display = 'none';
|
||
document.getElementById('editorContainer').style.display = 'flex';
|
||
|
||
// Initialize canvas
|
||
canvas = document.getElementById('editorCanvas');
|
||
ctx = canvas.getContext('2d');
|
||
|
||
// Load data
|
||
await loadLocations();
|
||
await loadConnections();
|
||
await loadAvailableNPCs();
|
||
await loadAvailableInteractablesForLocations(); // Load interactables for location instances
|
||
await loadAvailableItemsForLocations(); // Load items for interactable rewards
|
||
await loadLiveStats();
|
||
|
||
// Resize canvas after everything is loaded and rendered
|
||
setTimeout(() => {
|
||
resizeCanvas();
|
||
window.addEventListener('resize', resizeCanvas);
|
||
}, 100);
|
||
|
||
// Start live stats refresh (every 5 seconds)
|
||
liveStatsInterval = setInterval(loadLiveStats, 5000);
|
||
|
||
// Draw map
|
||
drawMap();
|
||
|
||
// Canvas event handlers
|
||
canvas.addEventListener('mousedown', handleMouseDown);
|
||
canvas.addEventListener('mousemove', handleMouseMove);
|
||
canvas.addEventListener('mouseup', handleMouseUp);
|
||
canvas.addEventListener('wheel', handleWheel, {passive: false});
|
||
canvas.addEventListener('mouseleave', () => { isDragging = false; });
|
||
}
|
||
|
||
function resizeCanvas() {
|
||
canvas.width = canvas.offsetWidth;
|
||
canvas.height = canvas.offsetHeight;
|
||
drawMap();
|
||
}
|
||
|
||
async function loadLocations() {
|
||
try {
|
||
const response = await fetch('/api/editor/locations', {
|
||
credentials: 'same-origin'
|
||
});
|
||
const data = await response.json();
|
||
currentLocations = data.locations;
|
||
renderLocationList();
|
||
// Trigger resize after locations are rendered
|
||
setTimeout(resizeCanvas, 50);
|
||
} catch (error) {
|
||
console.error('Failed to load locations:', error);
|
||
}
|
||
}
|
||
|
||
async function loadConnections() {
|
||
try {
|
||
const response = await fetch('/api/editor/connections', {
|
||
credentials: 'same-origin'
|
||
});
|
||
const data = await response.json();
|
||
connections = data.connections;
|
||
console.log('Loaded connections:', connections.length);
|
||
} catch (error) {
|
||
console.error('Failed to load connections:', error);
|
||
}
|
||
}
|
||
|
||
async function loadAvailableNPCs() {
|
||
try {
|
||
const response = await fetch('/api/editor/available-npcs', {
|
||
credentials: 'same-origin'
|
||
});
|
||
const data = await response.json();
|
||
availableNPCs = data.npcs;
|
||
} catch (error) {
|
||
console.error('Failed to load NPCs:', error);
|
||
}
|
||
}
|
||
|
||
async function loadLiveStats() {
|
||
try {
|
||
const response = await fetch('/api/editor/live-stats', {
|
||
credentials: 'same-origin'
|
||
});
|
||
if (!response.ok) {
|
||
console.error('Live stats request failed:', response.status);
|
||
return;
|
||
}
|
||
const data = await response.json();
|
||
liveStats.players = data.players_by_location || {};
|
||
liveStats.enemies = data.enemies_by_location || {};
|
||
drawMap(); // Redraw to show updated stats
|
||
} catch (error) {
|
||
console.error('Failed to load live stats:', error);
|
||
}
|
||
}
|
||
|
||
function renderLocationList() {
|
||
const list = document.getElementById('locationList');
|
||
list.innerHTML = '';
|
||
|
||
currentLocations.forEach(location => {
|
||
const item = document.createElement('div');
|
||
item.className = 'location-item';
|
||
item.dataset.name = location.name;
|
||
item.dataset.id = location.id;
|
||
if (location.id === selectedLocationId) {
|
||
item.classList.add('active');
|
||
}
|
||
|
||
const playerCount = liveStats.players[location.id] || 0;
|
||
const enemyCount = liveStats.enemies[location.id] || 0;
|
||
|
||
item.innerHTML = `
|
||
<div class="location-item-name">${location.name}</div>
|
||
<div class="location-item-coords">📍 (${location.x}, ${location.y}) | Danger: ${location.danger_level}</div>
|
||
${playerCount > 0 || enemyCount > 0 ? `<div class="location-item-stats">👥 ${playerCount} | 👹 ${enemyCount}</div>` : ''}
|
||
`;
|
||
|
||
item.onclick = () => selectLocation(location.id);
|
||
list.appendChild(item);
|
||
});
|
||
}
|
||
|
||
async function selectLocation(locationId) {
|
||
selectedLocationId = locationId;
|
||
renderLocationList();
|
||
|
||
// Load full location details
|
||
try {
|
||
const response = await fetch(`/api/editor/location/${locationId}`);
|
||
const location = await response.json();
|
||
populateForm(location);
|
||
} catch (error) {
|
||
console.error('Failed to load location details:', error);
|
||
}
|
||
|
||
drawMap();
|
||
}
|
||
|
||
function populateForm(location) {
|
||
document.getElementById('noSelectionMessage').classList.add('hidden');
|
||
document.getElementById('propertiesForm').classList.remove('hidden');
|
||
|
||
document.getElementById('locationId').value = location.id;
|
||
document.getElementById('locationName').value = location.name;
|
||
document.getElementById('locationDescription').value = location.description;
|
||
document.getElementById('locationX').value = location.x;
|
||
document.getElementById('locationY').value = location.y;
|
||
document.getElementById('dangerLevel').value = location.danger_level;
|
||
document.getElementById('encounterRate').value = location.encounter_rate;
|
||
document.getElementById('wanderingChance').value = location.wandering_chance;
|
||
document.getElementById('imagePath').value = location.image_path || '';
|
||
|
||
// Update image preview
|
||
updateImagePreview(location.image_path);
|
||
|
||
// Render spawn list
|
||
renderSpawnList(location.spawn_npcs);
|
||
|
||
// Render interactables list
|
||
renderInteractablesList(location.interactables || {});
|
||
|
||
// Render connections
|
||
renderConnectionsList(location.id, location.exits);
|
||
}
|
||
|
||
function updateImagePreview(imagePath) {
|
||
const preview = document.getElementById('imagePreview');
|
||
if (imagePath) {
|
||
preview.innerHTML = `<img src="/${imagePath}" alt="Location image">`;
|
||
} else {
|
||
preview.innerHTML = '<span>No image</span>';
|
||
}
|
||
}
|
||
|
||
function renderSpawnList(spawns) {
|
||
const list = document.getElementById('spawnList');
|
||
list.innerHTML = '';
|
||
|
||
spawns.forEach((spawn, index) => {
|
||
const item = document.createElement('div');
|
||
item.className = 'spawn-item';
|
||
item.innerHTML = `
|
||
<div class="spawn-item-info">
|
||
<div class="spawn-item-name">${spawn.emoji} ${spawn.name}</div>
|
||
<div class="spawn-item-weight">Weight: ${spawn.weight}</div>
|
||
</div>
|
||
<button class="btn btn-remove" onclick="removeSpawn(${index})">Remove</button>
|
||
`;
|
||
list.appendChild(item);
|
||
});
|
||
}
|
||
|
||
function renderConnectionsList(locationId, exits) {
|
||
const list = document.getElementById('connectionsList');
|
||
if (!list) return;
|
||
|
||
list.innerHTML = '';
|
||
|
||
for (const [direction, destId] of Object.entries(exits)) {
|
||
const destLocation = currentLocations.find(l => l.id === destId);
|
||
if (destLocation) {
|
||
const item = document.createElement('div');
|
||
item.className = 'connection-item';
|
||
item.innerHTML = `
|
||
<div class="connection-info">
|
||
<div class="connection-direction">${direction} → ${destLocation.name}</div>
|
||
</div>
|
||
<button class="btn btn-remove" onclick="deleteConnection('${locationId}', '${destId}')">×</button>
|
||
`;
|
||
list.appendChild(item);
|
||
}
|
||
}
|
||
}
|
||
|
||
// ==================== CANVAS DRAWING ====================
|
||
|
||
function drawMap() {
|
||
if (!ctx) return;
|
||
|
||
// Clear canvas
|
||
ctx.fillStyle = '#0f0f1e';
|
||
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
||
|
||
const centerX = canvas.width / 2 + offsetX;
|
||
const centerY = canvas.height / 2 + offsetY;
|
||
|
||
// Draw grid
|
||
drawGrid(centerX, centerY);
|
||
|
||
// Draw connections first (under locations)
|
||
drawConnections(centerX, centerY);
|
||
|
||
// Draw locations
|
||
drawLocations(centerX, centerY);
|
||
|
||
// Draw zoom indicator
|
||
ctx.fillStyle = '#e0e0e0';
|
||
ctx.font = '12px monospace';
|
||
ctx.textAlign = 'left';
|
||
ctx.fillText(`Zoom: ${Math.round(scale)}px/unit`, 10, 20);
|
||
}
|
||
|
||
function drawGrid(centerX, centerY) {
|
||
ctx.strokeStyle = '#1a1a3e';
|
||
ctx.lineWidth = 1;
|
||
|
||
// Vertical lines
|
||
for (let x = centerX % scale; x < canvas.width; x += scale) {
|
||
ctx.beginPath();
|
||
ctx.moveTo(x, 0);
|
||
ctx.lineTo(x, canvas.height);
|
||
ctx.stroke();
|
||
}
|
||
|
||
// Horizontal lines
|
||
for (let y = centerY % scale; y < canvas.height; y += scale) {
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, y);
|
||
ctx.lineTo(canvas.width, y);
|
||
ctx.stroke();
|
||
}
|
||
|
||
// Draw axes
|
||
ctx.strokeStyle = '#3a3a6a';
|
||
ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.moveTo(centerX, 0);
|
||
ctx.lineTo(centerX, canvas.height);
|
||
ctx.stroke();
|
||
|
||
ctx.beginPath();
|
||
ctx.moveTo(0, centerY);
|
||
ctx.lineTo(canvas.width, centerY);
|
||
ctx.stroke();
|
||
}
|
||
|
||
function drawConnections(centerX, centerY) {
|
||
console.log('Drawing connections, total:', connections.length);
|
||
connections.forEach(conn => {
|
||
const fromLoc = currentLocations.find(l => l.id === conn.from);
|
||
const toLoc = currentLocations.find(l => l.id === conn.to);
|
||
|
||
if (fromLoc && toLoc) {
|
||
const x1 = centerX + fromLoc.x * scale;
|
||
const y1 = centerY - fromLoc.y * scale;
|
||
const x2 = centerX + toLoc.x * scale;
|
||
const y2 = centerY - toLoc.y * scale;
|
||
|
||
// Draw arrow
|
||
ctx.strokeStyle = '#00bcd4'; // Cyan color to avoid confusion with axes
|
||
ctx.lineWidth = 2;
|
||
ctx.beginPath();
|
||
ctx.moveTo(x1, y1);
|
||
ctx.lineTo(x2, y2);
|
||
ctx.stroke();
|
||
|
||
// Draw arrowhead
|
||
const angle = Math.atan2(y2 - y1, x2 - x1);
|
||
const headLength = 10;
|
||
ctx.strokeStyle = '#00bcd4'; // Match arrow color
|
||
ctx.beginPath();
|
||
ctx.moveTo(x2, y2);
|
||
ctx.lineTo(
|
||
x2 - headLength * Math.cos(angle - Math.PI / 6),
|
||
y2 - headLength * Math.sin(angle - Math.PI / 6)
|
||
);
|
||
ctx.moveTo(x2, y2);
|
||
ctx.lineTo(
|
||
x2 - headLength * Math.cos(angle + Math.PI / 6),
|
||
y2 - headLength * Math.sin(angle + Math.PI / 6)
|
||
);
|
||
ctx.stroke();
|
||
|
||
// Calculate positions for labels
|
||
const midX = (x1 + x2) / 2;
|
||
const midY = (y1 + y2) / 2;
|
||
|
||
// Position "from" direction closer to origin (25% along the line)
|
||
const fromLabelX = x1 + (x2 - x1) * 0.25;
|
||
const fromLabelY = y1 + (y2 - y1) * 0.25;
|
||
|
||
// Position cost in the middle
|
||
const costX = midX;
|
||
const costY = midY;
|
||
|
||
// Position "to" direction closer to destination (75% along the line)
|
||
const toLabelX = x1 + (x2 - x1) * 0.75;
|
||
const toLabelY = y1 + (y2 - y1) * 0.75;
|
||
|
||
// Calculate perpendicular offset for text positioning
|
||
const perpAngle = angle + Math.PI / 2;
|
||
const textOffset = 8;
|
||
|
||
ctx.fillStyle = '#8a8aaa';
|
||
ctx.font = '10px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
|
||
// Check if there's a reverse connection
|
||
const reverseConn = connections.find(c => c.from === conn.to && c.to === conn.from);
|
||
|
||
if (reverseConn) {
|
||
// If bidirectional, offset labels to avoid overlap
|
||
// "from" direction on one side
|
||
ctx.fillText(
|
||
conn.direction,
|
||
fromLabelX + Math.cos(perpAngle) * textOffset,
|
||
fromLabelY + Math.sin(perpAngle) * textOffset
|
||
);
|
||
|
||
// "to" direction (reverse) on the other side
|
||
ctx.fillText(
|
||
reverseConn.direction,
|
||
toLabelX - Math.cos(perpAngle) * textOffset,
|
||
toLabelY - Math.sin(perpAngle) * textOffset
|
||
);
|
||
} else {
|
||
// Single direction - center the label
|
||
ctx.fillText(conn.direction, fromLabelX, fromLabelY - 5);
|
||
}
|
||
|
||
// Draw distance/cost in the middle
|
||
const distance = Math.sqrt(Math.pow(toLoc.x - fromLoc.x, 2) + Math.pow(toLoc.y - fromLoc.y, 2));
|
||
const cost = conn.stamina_cost || Math.ceil(distance * 2); // Use actual cost if available
|
||
ctx.fillStyle = '#ffb74d';
|
||
ctx.fillText(`⚡${cost}`, costX, costY + 3);
|
||
}
|
||
});
|
||
}
|
||
|
||
function drawLocations(centerX, centerY) {
|
||
const dangerColors = ['#4caf50', '#8bc34a', '#ffa726', '#ff5722', '#d32f2f'];
|
||
|
||
currentLocations.forEach(location => {
|
||
const x = centerX + location.x * scale;
|
||
const y = centerY - location.y * scale;
|
||
|
||
// Draw location circle
|
||
const color = dangerColors[location.danger_level] || '#9e9e9e';
|
||
ctx.fillStyle = color;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 15, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
// Highlight selected
|
||
if (location.id === selectedLocationId) {
|
||
ctx.strokeStyle = '#ffa726';
|
||
ctx.lineWidth = 3;
|
||
ctx.stroke();
|
||
}
|
||
|
||
// Draw label
|
||
ctx.fillStyle = '#e0e0e0';
|
||
ctx.font = '12px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.fillText(location.name, x, y + 30);
|
||
|
||
// Draw live stats badges
|
||
const playerCount = liveStats.players[location.id] || 0;
|
||
const enemyCount = liveStats.enemies[location.id] || 0;
|
||
|
||
let badgeY = y - 20;
|
||
|
||
if (playerCount > 0) {
|
||
drawBadge(x - 10, badgeY, `👥${playerCount}`, '#2196f3');
|
||
badgeY -= 15;
|
||
}
|
||
|
||
if (enemyCount > 0) {
|
||
drawBadge(x + 10, badgeY, `👹${enemyCount}`, '#f44336');
|
||
}
|
||
});
|
||
}
|
||
|
||
function drawBadge(x, y, text, color) {
|
||
ctx.fillStyle = color;
|
||
ctx.beginPath();
|
||
ctx.arc(x, y, 12, 0, Math.PI * 2);
|
||
ctx.fill();
|
||
|
||
ctx.fillStyle = '#ffffff';
|
||
ctx.font = 'bold 9px sans-serif';
|
||
ctx.textAlign = 'center';
|
||
ctx.textBaseline = 'middle';
|
||
ctx.fillText(text, x, y);
|
||
ctx.textBaseline = 'alphabetic';
|
||
}
|
||
|
||
// ==================== MOUSE INTERACTION ====================
|
||
|
||
function handleMouseDown(e) {
|
||
const rect = canvas.getBoundingClientRect();
|
||
const mouseX = e.clientX - rect.left;
|
||
const mouseY = e.clientY - rect.top;
|
||
|
||
clickStartTime = Date.now();
|
||
clickStartPos = {x: mouseX, y: mouseY};
|
||
dragStartX = mouseX - offsetX;
|
||
dragStartY = mouseY - offsetY;
|
||
}
|
||
|
||
function handleMouseMove(e) {
|
||
if (e.buttons === 1) { // Left mouse button
|
||
const rect = canvas.getBoundingClientRect();
|
||
const mouseX = e.clientX - rect.left;
|
||
const mouseY = e.clientY - rect.top;
|
||
|
||
// Check if moved enough to be a drag
|
||
const dx = mouseX - clickStartPos.x;
|
||
const dy = mouseY - clickStartPos.y;
|
||
const distance = Math.sqrt(dx * dx + dy * dy);
|
||
|
||
if (distance > 5) {
|
||
isDragging = true;
|
||
canvas.style.cursor = 'grabbing';
|
||
offsetX = mouseX - dragStartX;
|
||
offsetY = mouseY - dragStartY;
|
||
drawMap();
|
||
}
|
||
}
|
||
}
|
||
|
||
function handleMouseUp(e) {
|
||
const clickDuration = Date.now() - clickStartTime;
|
||
|
||
if (!isDragging && clickDuration < 300) {
|
||
// This was a click, not a drag
|
||
handleCanvasClick(e);
|
||
}
|
||
|
||
isDragging = false;
|
||
canvas.style.cursor = 'crosshair';
|
||
}
|
||
|
||
function handleWheel(e) {
|
||
e.preventDefault();
|
||
|
||
const rect = canvas.getBoundingClientRect();
|
||
const mouseX = e.clientX - rect.left;
|
||
const mouseY = e.clientY - rect.top;
|
||
|
||
// Get world position before zoom
|
||
const centerX = canvas.width / 2 + offsetX;
|
||
const centerY = canvas.height / 2 + offsetY;
|
||
const worldX = (mouseX - centerX) / scale;
|
||
const worldY = -(mouseY - centerY) / scale;
|
||
|
||
// Zoom
|
||
const zoomFactor = e.deltaY < 0 ? 1.1 : 0.9;
|
||
const newScale = Math.max(minScale, Math.min(maxScale, scale * zoomFactor));
|
||
|
||
if (newScale !== scale) {
|
||
// Adjust offset to keep mouse position stable
|
||
const newCenterX = canvas.width / 2 + offsetX;
|
||
const newCenterY = canvas.height / 2 + offsetY;
|
||
const newScreenX = newCenterX + worldX * newScale;
|
||
const newScreenY = newCenterY - worldY * newScale;
|
||
|
||
offsetX += mouseX - newScreenX;
|
||
offsetY += mouseY - newScreenY;
|
||
|
||
scale = newScale;
|
||
drawMap();
|
||
}
|
||
}
|
||
|
||
function handleCanvasClick(e) {
|
||
const rect = canvas.getBoundingClientRect();
|
||
const clickX = e.clientX - rect.left;
|
||
const clickY = e.clientY - rect.top;
|
||
|
||
const centerX = canvas.width / 2 + offsetX;
|
||
const centerY = canvas.height / 2 + offsetY;
|
||
|
||
// Check if clicked on existing location
|
||
for (const location of currentLocations) {
|
||
const screenX = centerX + location.x * scale;
|
||
const screenY = centerY - location.y * scale;
|
||
|
||
const distance = Math.sqrt(Math.pow(clickX - screenX, 2) + Math.pow(clickY - screenY, 2));
|
||
|
||
if (distance < 15) {
|
||
selectLocation(location.id);
|
||
return;
|
||
}
|
||
}
|
||
|
||
// Clicked on empty space - create new location
|
||
const worldX = ((clickX - centerX) / scale).toFixed(1);
|
||
const worldY = (-(clickY - centerY) / scale).toFixed(1);
|
||
|
||
if (confirm(`Create new location at (${worldX}, ${worldY})?`)) {
|
||
createLocationAt(parseFloat(worldX), parseFloat(worldY));
|
||
}
|
||
}
|
||
|
||
// ==================== ZOOM CONTROLS ====================
|
||
|
||
function zoomIn() {
|
||
scale = Math.min(maxScale, scale * 1.2);
|
||
drawMap();
|
||
}
|
||
|
||
function zoomOut() {
|
||
scale = Math.max(minScale, scale / 1.2);
|
||
drawMap();
|
||
}
|
||
|
||
function resetView() {
|
||
scale = 50;
|
||
offsetX = 0;
|
||
offsetY = 0;
|
||
drawMap();
|
||
}
|
||
|
||
// ==================== LOCATION MANAGEMENT ====================
|
||
|
||
function createLocationAt(x, y) {
|
||
const newId = 'location_' + Date.now();
|
||
|
||
const newLocation = {
|
||
id: newId,
|
||
name: 'New Location',
|
||
description: 'Enter description...',
|
||
image_path: '',
|
||
x: x,
|
||
y: y,
|
||
danger_level: 0,
|
||
encounter_rate: 0.0,
|
||
wandering_chance: 0.0,
|
||
spawn_npcs: []
|
||
};
|
||
|
||
currentLocations.push(newLocation);
|
||
selectedLocationId = newId;
|
||
renderLocationList();
|
||
populateForm(newLocation);
|
||
drawMap();
|
||
}
|
||
|
||
function createNewLocation() {
|
||
createLocationAt(0, 0);
|
||
}
|
||
|
||
async function saveLocation() {
|
||
const locationData = {
|
||
id: document.getElementById('locationId').value,
|
||
name: document.getElementById('locationName').value,
|
||
description: document.getElementById('locationDescription').value,
|
||
x: parseFloat(document.getElementById('locationX').value),
|
||
y: parseFloat(document.getElementById('locationY').value),
|
||
danger_level: parseInt(document.getElementById('dangerLevel').value),
|
||
encounter_rate: parseFloat(document.getElementById('encounterRate').value),
|
||
wandering_chance: parseFloat(document.getElementById('wanderingChance').value),
|
||
image_path: document.getElementById('imagePath').value,
|
||
spawn_npcs: getCurrentSpawns(),
|
||
interactables: getInteractableInstances()
|
||
};
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/location', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify(locationData)
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('Location saved successfully!');
|
||
await loadLocations();
|
||
await loadConnections();
|
||
drawMap();
|
||
} else {
|
||
alert('Failed to save: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to save location: ' + error.message);
|
||
}
|
||
}
|
||
|
||
async function deleteCurrentLocation() {
|
||
const locationId = document.getElementById('locationId').value;
|
||
|
||
if (!confirm(`Delete location "${locationId}"? This will also remove all connections to/from this location.`)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`/api/editor/location/${locationId}`, {
|
||
method: 'DELETE'
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('Location deleted successfully!');
|
||
selectedLocationId = null;
|
||
document.getElementById('noSelectionMessage').classList.remove('hidden');
|
||
document.getElementById('propertiesForm').classList.add('hidden');
|
||
await loadLocations();
|
||
await loadConnections();
|
||
drawMap();
|
||
} else {
|
||
alert('Failed to delete: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to delete location: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// Wrapper functions for header buttons
|
||
function saveCurrentLocation() {
|
||
if (!selectedLocationId) {
|
||
alert('Please select a location first');
|
||
return;
|
||
}
|
||
saveLocation();
|
||
}
|
||
|
||
// ==================== CONNECTION MANAGEMENT ====================
|
||
|
||
function showAddConnectionModal() {
|
||
const modal = document.getElementById('addConnectionModal');
|
||
const searchInput = document.getElementById('connectionSearch');
|
||
|
||
// Clear search
|
||
searchInput.value = '';
|
||
|
||
// Populate the list
|
||
filterConnectionList();
|
||
|
||
modal.style.display = 'flex';
|
||
searchInput.focus();
|
||
}
|
||
|
||
function filterConnectionList() {
|
||
const list = document.getElementById('connectionTargetList');
|
||
const searchTerm = document.getElementById('connectionSearch').value.toLowerCase();
|
||
const currentId = document.getElementById('locationId').value;
|
||
|
||
list.innerHTML = '';
|
||
|
||
const filteredLocations = currentLocations.filter(location => {
|
||
if (location.id === currentId) return false;
|
||
if (!searchTerm) return true;
|
||
return location.name.toLowerCase().includes(searchTerm) ||
|
||
location.id.toLowerCase().includes(searchTerm);
|
||
});
|
||
|
||
if (filteredLocations.length === 0) {
|
||
list.innerHTML = '<div style="padding: 20px; text-align: center; opacity: 0.5;">No locations found</div>';
|
||
return;
|
||
}
|
||
|
||
filteredLocations.forEach(location => {
|
||
const item = document.createElement('div');
|
||
item.className = 'connection-target-item';
|
||
item.innerHTML = `
|
||
<div><strong>${location.name}</strong></div>
|
||
<div style="font-size: 0.85em; opacity: 0.7;">
|
||
📍 (${location.x}, ${location.y}) | Danger: ${location.danger_level}
|
||
</div>
|
||
`;
|
||
|
||
item.onclick = () => promptAddConnection(currentId, location.id);
|
||
list.appendChild(item);
|
||
});
|
||
}
|
||
|
||
function closeAddConnectionModal() {
|
||
document.getElementById('addConnectionModal').style.display = 'none';
|
||
}
|
||
|
||
function filterLocationList() {
|
||
const searchTerm = document.getElementById('locationSearchInput').value.toLowerCase();
|
||
const locationList = document.getElementById('locationList');
|
||
const items = locationList.getElementsByClassName('location-item');
|
||
|
||
Array.from(items).forEach(item => {
|
||
const name = item.dataset.name ? item.dataset.name.toLowerCase() : '';
|
||
const id = item.dataset.id ? item.dataset.id.toLowerCase() : '';
|
||
|
||
if (!searchTerm || name.includes(searchTerm) || id.includes(searchTerm)) {
|
||
item.style.display = '';
|
||
} else {
|
||
item.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
function filterNPCList() {
|
||
const searchTerm = document.getElementById('npcSearch').value.toLowerCase();
|
||
const list = document.getElementById('npcSelectList');
|
||
const items = list.getElementsByClassName('npc-item');
|
||
|
||
Array.from(items).forEach(item => {
|
||
const name = item.dataset.name ? item.dataset.name.toLowerCase() : '';
|
||
const id = item.dataset.id ? item.dataset.id.toLowerCase() : '';
|
||
|
||
if (!searchTerm || name.includes(searchTerm) || id.includes(searchTerm)) {
|
||
item.style.display = '';
|
||
} else {
|
||
item.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
async function promptAddConnection(fromId, toId) {
|
||
const direction = prompt('Enter direction (north, south, east, west, northeast, etc.):');
|
||
if (!direction) return;
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/connection', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({from: fromId, to: toId, direction: direction.toLowerCase()})
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('Connection added!');
|
||
await loadConnections();
|
||
await selectLocation(fromId); // Refresh form
|
||
drawMap();
|
||
closeAddConnectionModal();
|
||
} else {
|
||
alert('Failed to add connection: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to add connection: ' + error.message);
|
||
}
|
||
}
|
||
|
||
async function deleteConnection(fromId, toId) {
|
||
if (!confirm('Delete this connection?')) return;
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/connection', {
|
||
method: 'DELETE',
|
||
headers: {'Content-Type': 'application/json'},
|
||
body: JSON.stringify({from: fromId, to: toId})
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('Connection deleted!');
|
||
await loadConnections();
|
||
await selectLocation(fromId); // Refresh form
|
||
drawMap();
|
||
} else {
|
||
alert('Failed to delete connection: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to delete connection: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// ==================== SPAWN MANAGEMENT ====================
|
||
|
||
function getCurrentSpawns() {
|
||
const spawns = [];
|
||
const spawnItems = document.querySelectorAll('.spawn-item');
|
||
|
||
spawnItems.forEach(item => {
|
||
const nameDiv = item.querySelector('.spawn-item-name');
|
||
const weightDiv = item.querySelector('.spawn-item-weight');
|
||
|
||
if (nameDiv && weightDiv) {
|
||
const text = nameDiv.textContent;
|
||
const npcName = text.substring(text.indexOf(' ') + 1).trim();
|
||
const weight = parseInt(weightDiv.textContent.replace('Weight: ', ''));
|
||
|
||
const npc = availableNPCs.find(n => n.name === npcName);
|
||
if (npc) {
|
||
spawns.push({npc_id: npc.id, weight: weight});
|
||
}
|
||
}
|
||
});
|
||
|
||
return spawns;
|
||
}
|
||
|
||
function showAddSpawnModal() {
|
||
const modal = document.getElementById('addSpawnModal');
|
||
const list = document.getElementById('npcSelectList');
|
||
|
||
list.innerHTML = '';
|
||
|
||
// Clear search input
|
||
document.getElementById('npcSearch').value = '';
|
||
|
||
availableNPCs.forEach(npc => {
|
||
const item = document.createElement('div');
|
||
item.className = 'npc-item npc-select-item';
|
||
item.dataset.name = npc.name;
|
||
item.dataset.id = npc.id;
|
||
item.innerHTML = `
|
||
<div><strong>${npc.emoji} ${npc.name}</strong></div>
|
||
<div style="font-size: 0.85em; opacity: 0.7;">
|
||
HP: ${npc.hp_range[0]}-${npc.hp_range[1]} |
|
||
DMG: ${npc.damage_range[0]}-${npc.damage_range[1]} |
|
||
XP: ${npc.xp_reward}
|
||
</div>
|
||
`;
|
||
|
||
item.onclick = () => addSpawn(npc);
|
||
list.appendChild(item);
|
||
});
|
||
|
||
modal.style.display = 'flex';
|
||
|
||
// Focus the search input
|
||
setTimeout(() => document.getElementById('npcSearch').focus(), 100);
|
||
}
|
||
|
||
function closeAddSpawnModal() {
|
||
document.getElementById('addSpawnModal').style.display = 'none';
|
||
}
|
||
|
||
function addSpawn(npc) {
|
||
const weight = prompt(`Enter spawn weight for ${npc.name}:`, '50');
|
||
if (weight && !isNaN(weight)) {
|
||
const list = document.getElementById('spawnList');
|
||
const item = document.createElement('div');
|
||
item.className = 'spawn-item';
|
||
item.innerHTML = `
|
||
<div class="spawn-item-info">
|
||
<div class="spawn-item-name">${npc.emoji} ${npc.name}</div>
|
||
<div class="spawn-item-weight">Weight: ${weight}</div>
|
||
</div>
|
||
<button class="btn btn-remove" onclick="this.parentElement.remove()">Remove</button>
|
||
`;
|
||
list.appendChild(item);
|
||
}
|
||
closeAddSpawnModal();
|
||
}
|
||
|
||
function removeSpawn(index) {
|
||
const spawnItems = document.querySelectorAll('.spawn-item');
|
||
if (spawnItems[index]) {
|
||
spawnItems[index].remove();
|
||
}
|
||
}
|
||
|
||
// ==================== INTERACTABLE INSTANCES ====================
|
||
|
||
let currentEditingInteractableInstanceId = null;
|
||
|
||
async function showAddInteractableModal() {
|
||
const modal = document.getElementById('addInteractableModal');
|
||
const list = document.getElementById('interactableSelectList');
|
||
|
||
list.innerHTML = '<div style="padding: 20px; text-align: center; opacity: 0.5;">Loading interactables...</div>';
|
||
modal.style.display = 'flex';
|
||
|
||
// Clear search input
|
||
document.getElementById('interactableSearch').value = '';
|
||
|
||
console.log('Current availableInteractables:', availableInteractables);
|
||
|
||
// Ensure interactables are loaded
|
||
if (!availableInteractables || availableInteractables.length === 0) {
|
||
console.log('Loading interactables...');
|
||
await loadAvailableInteractablesForLocations();
|
||
}
|
||
|
||
// Clear the loading message
|
||
list.innerHTML = '';
|
||
|
||
console.log('After loading, availableInteractables:', availableInteractables);
|
||
|
||
// Check again after loading
|
||
if (!availableInteractables || availableInteractables.length === 0) {
|
||
console.log('No interactables found after loading');
|
||
list.innerHTML = '<div style="padding: 20px; text-align: center; opacity: 0.5;">No interactables available. Create one in the Interactables tab first.</div>';
|
||
return;
|
||
}
|
||
|
||
console.log(`Rendering ${availableInteractables.length} interactables`);
|
||
|
||
availableInteractables.forEach(interactable => {
|
||
const item = document.createElement('div');
|
||
item.className = 'npc-item npc-select-item';
|
||
item.dataset.name = interactable.name;
|
||
item.dataset.id = interactable.id;
|
||
const actionCount = Object.keys(interactable.actions || {}).length;
|
||
item.innerHTML = `
|
||
<div><strong>${interactable.name}</strong></div>
|
||
<div style="font-size: 0.85em; opacity: 0.7;">
|
||
${interactable.description}<br>
|
||
${actionCount} action(s)
|
||
</div>
|
||
`;
|
||
|
||
item.onclick = () => addInteractableToLocation(interactable);
|
||
list.appendChild(item);
|
||
});
|
||
|
||
// Focus the search input
|
||
setTimeout(() => document.getElementById('interactableSearch').focus(), 100);
|
||
}
|
||
|
||
function closeAddInteractableModal() {
|
||
document.getElementById('addInteractableModal').style.display = 'none';
|
||
}
|
||
|
||
function filterInteractableSelectList() {
|
||
const search = document.getElementById('interactableSearch').value.toLowerCase();
|
||
const items = document.querySelectorAll('#interactableSelectList .npc-select-item');
|
||
|
||
items.forEach(item => {
|
||
const name = item.dataset.name.toLowerCase();
|
||
if (name.includes(search)) {
|
||
item.style.display = 'flex';
|
||
} else {
|
||
item.style.display = 'none';
|
||
}
|
||
});
|
||
}
|
||
|
||
function addInteractableToLocation(interactable) {
|
||
// Generate a unique instance ID
|
||
const instanceId = `${interactable.id}_${Date.now()}`;
|
||
|
||
// Create instance with default outcomes
|
||
const instance = {
|
||
template_id: interactable.id,
|
||
outcomes: {}
|
||
};
|
||
|
||
// Initialize default outcomes for each action
|
||
// Actions is an object, not an array
|
||
for (const [actionId, action] of Object.entries(interactable.actions || {})) {
|
||
instance.outcomes[actionId] = {
|
||
success_rate: 0.5,
|
||
stamina_cost: action.stamina_cost || 0,
|
||
text: {
|
||
success: `You successfully ${action.label.toLowerCase()}.`,
|
||
failure: `You failed to ${action.label.toLowerCase()}.`
|
||
},
|
||
rewards: {
|
||
items: [],
|
||
damage: 0
|
||
}
|
||
};
|
||
}
|
||
|
||
// Add to UI list
|
||
const list = document.getElementById('interactablesList');
|
||
const item = document.createElement('div');
|
||
item.className = 'spawn-item';
|
||
item.dataset.instanceId = instanceId;
|
||
const actionCount = Object.keys(interactable.actions || {}).length;
|
||
item.innerHTML = `
|
||
<div class="spawn-item-info">
|
||
<div class="spawn-item-name">${interactable.name}</div>
|
||
<div class="spawn-item-weight">${actionCount} action(s)</div>
|
||
</div>
|
||
<div style="display: flex; gap: 5px;">
|
||
<button class="btn btn-primary" onclick="editInteractableInstance('${instanceId}', '${interactable.id}')">Edit</button>
|
||
<button class="btn btn-remove" onclick="removeInteractableInstance('${instanceId}')">Remove</button>
|
||
</div>
|
||
`;
|
||
|
||
// Store instance data
|
||
item.dataset.instanceData = JSON.stringify(instance);
|
||
|
||
list.appendChild(item);
|
||
closeAddInteractableModal();
|
||
}
|
||
|
||
function removeInteractableInstance(instanceId) {
|
||
const items = document.querySelectorAll('.spawn-item');
|
||
items.forEach(item => {
|
||
if (item.dataset.instanceId === instanceId) {
|
||
item.remove();
|
||
}
|
||
});
|
||
}
|
||
|
||
function editInteractableInstance(instanceId, templateId) {
|
||
currentEditingInteractableInstanceId = instanceId;
|
||
|
||
// Find the instance element
|
||
const items = document.querySelectorAll('.spawn-item');
|
||
let instanceElement = null;
|
||
items.forEach(item => {
|
||
if (item.dataset.instanceId === instanceId) {
|
||
instanceElement = item;
|
||
}
|
||
});
|
||
|
||
if (!instanceElement) return;
|
||
|
||
const instanceData = JSON.parse(instanceElement.dataset.instanceData);
|
||
const template = availableInteractables.find(i => i.id === templateId);
|
||
|
||
if (!template) {
|
||
alert('Template not found!');
|
||
return;
|
||
}
|
||
|
||
// Build the editor UI
|
||
const editor = document.getElementById('interactableInstanceEditor');
|
||
editor.innerHTML = `
|
||
<div style="background: rgba(255,255,255,0.05); padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
||
<h4 style="margin: 0 0 5px 0;">${template.name}</h4>
|
||
<p style="margin: 0; opacity: 0.7; font-size: 0.9em;">${template.description}</p>
|
||
</div>
|
||
|
||
<div style="display: flex; flex-direction: column; gap: 20px;">
|
||
${Object.entries(template.actions || {}).map(([actionId, action]) => {
|
||
const outcome = instanceData.outcomes[actionId] || {};
|
||
return `
|
||
<div style="background: rgba(255,255,255,0.03); padding: 15px; border-radius: 8px;">
|
||
<h4 style="margin: 0 0 15px 0;">Action: ${action.label}</h4>
|
||
|
||
<div class="property-group">
|
||
<label>Success Rate (0.0-1.0)</label>
|
||
<input type="number" id="success_rate_${actionId}"
|
||
min="0" max="1" step="0.1"
|
||
value="${outcome.success_rate || 0.5}">
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Stamina Cost</label>
|
||
<input type="number" id="stamina_cost_${actionId}"
|
||
min="0" step="1"
|
||
value="${outcome.stamina_cost || action.stamina_cost || 0}">
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Success Text</label>
|
||
<textarea id="success_text_${actionId}" rows="2">${outcome.text?.success || ''}</textarea>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Failure Text</label>
|
||
<textarea id="failure_text_${actionId}" rows="2">${outcome.text?.failure || ''}</textarea>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Critical Success Text</label>
|
||
<textarea id="crit_success_text_${actionId}" rows="2">${outcome.text?.crit_success || ''}</textarea>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Critical Failure Text</label>
|
||
<textarea id="crit_failure_text_${actionId}" rows="2">${outcome.text?.crit_failure || ''}</textarea>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Critical Success Chance (0.0-1.0)</label>
|
||
<input type="number" id="crit_success_chance_${actionId}"
|
||
min="0" max="1" step="0.05"
|
||
value="${outcome.crit_success_chance || 0.1}">
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Critical Failure Chance (0.0-1.0)</label>
|
||
<input type="number" id="crit_failure_chance_${actionId}"
|
||
min="0" max="1" step="0.05"
|
||
value="${outcome.crit_failure_chance || 0.1}">
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Damage on Failure</label>
|
||
<input type="number" id="damage_${actionId}"
|
||
min="0" step="1"
|
||
value="${outcome.rewards?.damage || 0}">
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Damage on Critical Failure</label>
|
||
<input type="number" id="crit_damage_${actionId}"
|
||
min="0" step="1"
|
||
value="${outcome.rewards?.crit_damage || 0}">
|
||
</div>
|
||
|
||
<div class="property-group" style="grid-column: 1 / -1;">
|
||
<label>Item Rewards</label>
|
||
<div style="display: flex; gap: 10px; margin-bottom: 5px; font-size: 0.9em; opacity: 0.7; padding: 0 5px;">
|
||
<div style="flex: 2;">Item (type to search)</div>
|
||
<div style="flex: 1;">Quantity</div>
|
||
<div style="flex: 1;">Chance (0-1)</div>
|
||
<div style="width: 40px;"></div>
|
||
</div>
|
||
<div id="item_rewards_${actionId}" style="margin-bottom: 10px;">
|
||
${(outcome.rewards?.items || []).map((reward, idx) => {
|
||
const selectedItem = availableItems.find(i => i.id === reward.item_id);
|
||
const displayValue = selectedItem ? `${selectedItem.emoji || '📦'} ${selectedItem.name}` : '';
|
||
return `
|
||
<div class="reward-item" style="display: flex; gap: 10px; margin-bottom: 5px; align-items: center; position: relative;">
|
||
<div style="flex: 2; position: relative;">
|
||
<input type="text" class="reward-item-search"
|
||
value="${displayValue}"
|
||
placeholder="Type to search items..."
|
||
oninput="filterItemDropdown(this)"
|
||
onfocus="showItemDropdown(this)"
|
||
style="width: 100%; padding: 8px; background: #1a1a3e; color: #e0e0e0; border: 1px solid #3a3a6a; border-radius: 4px;">
|
||
<input type="hidden" class="reward-item-id" value="${reward.item_id || ''}">
|
||
<div class="item-dropdown" style="display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: #1a1a3e; border: 1px solid #3a3a6a; border-radius: 4px; margin-top: 2px; z-index: 1000;"></div>
|
||
</div>
|
||
<input type="number" placeholder="1" value="${reward.quantity || 1}"
|
||
min="1" style="flex: 1;" class="reward-quantity">
|
||
<input type="number" placeholder="1.0" value="${reward.chance || 1}"
|
||
min="0" max="1" step="0.1" style="flex: 1;" class="reward-chance">
|
||
<button class="btn btn-remove" onclick="this.parentElement.remove()">×</button>
|
||
</div>
|
||
`;
|
||
}).join('')}
|
||
</div>
|
||
<button class="btn btn-add" onclick="addRewardRow('${actionId}')">+ Add Item Reward</button>
|
||
</div>
|
||
|
||
<div class="property-group" style="grid-column: 1 / -1;">
|
||
<label>Critical Success Item Rewards</label>
|
||
<div style="display: flex; gap: 10px; margin-bottom: 5px; font-size: 0.9em; opacity: 0.7; padding: 0 5px;">
|
||
<div style="flex: 2;">Item (type to search)</div>
|
||
<div style="flex: 1;">Quantity</div>
|
||
<div style="flex: 1;">Chance (0-1)</div>
|
||
<div style="width: 40px;"></div>
|
||
</div>
|
||
<div id="crit_item_rewards_${actionId}" style="margin-bottom: 10px;">
|
||
${(outcome.rewards?.crit_items || []).map((reward, idx) => {
|
||
const selectedItem = availableItems.find(i => i.id === reward.item_id);
|
||
const displayValue = selectedItem ? `${selectedItem.emoji || '📦'} ${selectedItem.name}` : '';
|
||
return `
|
||
<div class="reward-item" style="display: flex; gap: 10px; margin-bottom: 5px; align-items: center; position: relative;">
|
||
<div style="flex: 2; position: relative;">
|
||
<input type="text" class="reward-item-search"
|
||
value="${displayValue}"
|
||
placeholder="Type to search items..."
|
||
oninput="filterItemDropdown(this)"
|
||
onfocus="showItemDropdown(this)"
|
||
style="width: 100%; padding: 8px; background: #1a1a3e; color: #e0e0e0; border: 1px solid #3a3a6a; border-radius: 4px;">
|
||
<input type="hidden" class="reward-item-id" value="${reward.item_id || ''}">
|
||
<div class="item-dropdown" style="display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: #1a1a3e; border: 1px solid #3a3a6a; border-radius: 4px; margin-top: 2px; z-index: 1000;"></div>
|
||
</div>
|
||
<input type="number" placeholder="1" value="${reward.quantity || 1}"
|
||
min="1" style="flex: 1;" class="reward-quantity">
|
||
<input type="number" placeholder="1.0" value="${reward.chance || 1}"
|
||
min="0" max="1" step="0.1" style="flex: 1;" class="reward-chance">
|
||
<button class="btn btn-remove" onclick="this.parentElement.remove()">×</button>
|
||
</div>
|
||
`;
|
||
}).join('')}
|
||
</div>
|
||
<button class="btn btn-add" onclick="addCritRewardRow('${actionId}')">+ Add Critical Success Reward</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('')}
|
||
</div>
|
||
`;
|
||
|
||
document.getElementById('editInteractableInstanceModal').style.display = 'flex';
|
||
}
|
||
|
||
function closeEditInteractableInstanceModal() {
|
||
document.getElementById('editInteractableInstanceModal').style.display = 'none';
|
||
currentEditingInteractableInstanceId = null;
|
||
}
|
||
|
||
function addRewardRow(actionId) {
|
||
const container = document.getElementById(`item_rewards_${actionId}`);
|
||
const div = document.createElement('div');
|
||
div.className = 'reward-item';
|
||
div.style.display = 'flex';
|
||
div.style.gap = '10px';
|
||
div.style.marginBottom = '5px';
|
||
div.style.alignItems = 'center';
|
||
div.style.position = 'relative';
|
||
|
||
div.innerHTML = `
|
||
<div style="flex: 2; position: relative;">
|
||
<input type="text" class="reward-item-search"
|
||
placeholder="Type to search items..."
|
||
oninput="filterItemDropdown(this)"
|
||
onfocus="showItemDropdown(this)"
|
||
style="width: 100%; padding: 8px; background: #1a1a3e; color: #e0e0e0; border: 1px solid #3a3a6a; border-radius: 4px;">
|
||
<input type="hidden" class="reward-item-id" value="">
|
||
<div class="item-dropdown" style="display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: #1a1a3e; border: 1px solid #3a3a6a; border-radius: 4px; margin-top: 2px; z-index: 1000;"></div>
|
||
</div>
|
||
<input type="number" placeholder="1" value="1" min="1" style="flex: 1;" class="reward-quantity">
|
||
<input type="number" placeholder="1.0" value="1" min="0" max="1" step="0.1" style="flex: 1;" class="reward-chance">
|
||
<button class="btn btn-remove" onclick="this.parentElement.remove()">×</button>
|
||
`;
|
||
container.appendChild(div);
|
||
}
|
||
|
||
function addCritRewardRow(actionId) {
|
||
const container = document.getElementById(`crit_item_rewards_${actionId}`);
|
||
const div = document.createElement('div');
|
||
div.className = 'reward-item';
|
||
div.style.display = 'flex';
|
||
div.style.gap = '10px';
|
||
div.style.marginBottom = '5px';
|
||
div.style.alignItems = 'center';
|
||
div.style.position = 'relative';
|
||
|
||
div.innerHTML = `
|
||
<div style="flex: 2; position: relative;">
|
||
<input type="text" class="reward-item-search"
|
||
placeholder="Type to search items..."
|
||
oninput="filterItemDropdown(this)"
|
||
onfocus="showItemDropdown(this)"
|
||
style="width: 100%; padding: 8px; background: #1a1a3e; color: #e0e0e0; border: 1px solid #3a3a6a; border-radius: 4px;">
|
||
<input type="hidden" class="reward-item-id" value="">
|
||
<div class="item-dropdown" style="display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: #1a1a3e; border: 1px solid #3a3a6a; border-radius: 4px; margin-top: 2px; z-index: 1000;"></div>
|
||
</div>
|
||
<input type="number" placeholder="1" value="1" min="1" style="flex: 1;" class="reward-quantity">
|
||
<input type="number" placeholder="1.0" value="1" min="0" max="1" step="0.1" style="flex: 1;" class="reward-chance">
|
||
<button class="btn btn-remove" onclick="this.parentElement.remove()">×</button>
|
||
`;
|
||
container.appendChild(div);
|
||
}
|
||
|
||
// Autocomplete functions for item selection
|
||
function showItemDropdown(input) {
|
||
filterItemDropdown(input);
|
||
}
|
||
|
||
function filterItemDropdown(input) {
|
||
const searchText = input.value.toLowerCase();
|
||
const dropdown = input.parentElement.querySelector('.item-dropdown');
|
||
const hiddenInput = input.parentElement.querySelector('.reward-item-id');
|
||
|
||
if (!dropdown) return;
|
||
|
||
// Filter items
|
||
const filteredItems = availableItems.filter(item => {
|
||
const itemText = `${item.emoji || ''} ${item.name || ''} ${item.id}`.toLowerCase();
|
||
return itemText.includes(searchText);
|
||
});
|
||
|
||
// Build dropdown HTML
|
||
dropdown.innerHTML = '';
|
||
dropdown.style.display = 'block';
|
||
|
||
if (filteredItems.length === 0) {
|
||
dropdown.innerHTML = '<div style="padding: 8px; opacity: 0.5;">No items found</div>';
|
||
return;
|
||
}
|
||
|
||
// Create elements dynamically with proper event listeners
|
||
filteredItems.forEach(item => {
|
||
const optionDiv = document.createElement('div');
|
||
optionDiv.className = 'dropdown-item';
|
||
optionDiv.style.padding = '8px';
|
||
optionDiv.style.cursor = 'pointer';
|
||
optionDiv.style.borderBottom = '1px solid #2a2a4a';
|
||
|
||
optionDiv.innerHTML = `
|
||
${item.emoji || '📦'} ${item.name || item.id}
|
||
<span style="opacity: 0.5; font-size: 0.85em; margin-left: 5px;">${item.id}</span>
|
||
`;
|
||
|
||
// Add hover effects
|
||
optionDiv.addEventListener('mouseover', function() {
|
||
this.style.background = '#2a2a4a';
|
||
});
|
||
optionDiv.addEventListener('mouseout', function() {
|
||
this.style.background = 'transparent';
|
||
});
|
||
|
||
// Add click handler
|
||
optionDiv.addEventListener('click', function(e) {
|
||
e.stopPropagation();
|
||
// Set the visible input to show emoji + name
|
||
input.value = `${item.emoji || '📦'} ${item.name || item.id}`;
|
||
// Set the hidden input to store the item_id
|
||
hiddenInput.value = item.id;
|
||
dropdown.style.display = 'none';
|
||
});
|
||
|
||
dropdown.appendChild(optionDiv);
|
||
});
|
||
}
|
||
|
||
function selectItem(element) {
|
||
const itemId = element.dataset.id;
|
||
const itemName = element.dataset.name;
|
||
const container = element.closest('.reward-item');
|
||
const searchInput = container.querySelector('.reward-item-search');
|
||
const hiddenInput = container.querySelector('.reward-item-id');
|
||
const dropdown = container.querySelector('.item-dropdown');
|
||
|
||
searchInput.value = itemName;
|
||
hiddenInput.value = itemId;
|
||
dropdown.style.display = 'none';
|
||
}
|
||
|
||
// Close dropdowns when clicking outside
|
||
document.addEventListener('click', (e) => {
|
||
if (!e.target.closest('.reward-item')) {
|
||
document.querySelectorAll('.item-dropdown').forEach(dropdown => {
|
||
dropdown.style.display = 'none';
|
||
});
|
||
}
|
||
});
|
||
|
||
function saveInteractableInstance() {
|
||
if (!currentEditingInteractableInstanceId) return;
|
||
|
||
// Find the instance element
|
||
const items = document.querySelectorAll('.spawn-item');
|
||
let instanceElement = null;
|
||
items.forEach(item => {
|
||
if (item.dataset.instanceId === currentEditingInteractableInstanceId) {
|
||
instanceElement = item;
|
||
}
|
||
});
|
||
|
||
if (!instanceElement) return;
|
||
|
||
const instanceData = JSON.parse(instanceElement.dataset.instanceData);
|
||
const template = availableInteractables.find(i => i.id === instanceData.template_id);
|
||
|
||
if (!template) return;
|
||
|
||
// Collect all outcomes
|
||
for (const [actionId, action] of Object.entries(template.actions || {})) {
|
||
const successRate = parseFloat(document.getElementById(`success_rate_${actionId}`).value);
|
||
const staminaCost = parseInt(document.getElementById(`stamina_cost_${actionId}`).value);
|
||
const successText = document.getElementById(`success_text_${actionId}`).value;
|
||
const failureText = document.getElementById(`failure_text_${actionId}`).value;
|
||
const critSuccessText = document.getElementById(`crit_success_text_${actionId}`).value;
|
||
const critFailureText = document.getElementById(`crit_failure_text_${actionId}`).value;
|
||
const critSuccessChance = parseFloat(document.getElementById(`crit_success_chance_${actionId}`).value);
|
||
const critFailureChance = parseFloat(document.getElementById(`crit_failure_chance_${actionId}`).value);
|
||
const damage = parseInt(document.getElementById(`damage_${actionId}`).value);
|
||
const critDamage = parseInt(document.getElementById(`crit_damage_${actionId}`).value);
|
||
|
||
// Collect item rewards
|
||
const rewardContainer = document.getElementById(`item_rewards_${actionId}`);
|
||
const rewardItems = rewardContainer.querySelectorAll('.reward-item');
|
||
const items = [];
|
||
|
||
rewardItems.forEach(rewardItem => {
|
||
const itemId = rewardItem.querySelector('.reward-item-id').value;
|
||
const quantity = parseInt(rewardItem.querySelector('.reward-quantity').value);
|
||
const chance = parseFloat(rewardItem.querySelector('.reward-chance').value);
|
||
|
||
if (itemId) {
|
||
items.push({
|
||
item_id: itemId,
|
||
quantity: quantity || 1,
|
||
chance: chance || 1
|
||
});
|
||
}
|
||
});
|
||
|
||
// Collect critical success item rewards
|
||
const critRewardContainer = document.getElementById(`crit_item_rewards_${actionId}`);
|
||
const critRewardItems = critRewardContainer.querySelectorAll('.reward-item');
|
||
const critItems = [];
|
||
|
||
critRewardItems.forEach(rewardItem => {
|
||
const itemId = rewardItem.querySelector('.reward-item-id').value;
|
||
const quantity = parseInt(rewardItem.querySelector('.reward-quantity').value);
|
||
const chance = parseFloat(rewardItem.querySelector('.reward-chance').value);
|
||
|
||
if (itemId) {
|
||
critItems.push({
|
||
item_id: itemId,
|
||
quantity: quantity || 1,
|
||
chance: chance || 1
|
||
});
|
||
}
|
||
});
|
||
|
||
instanceData.outcomes[actionId] = {
|
||
success_rate: successRate,
|
||
stamina_cost: staminaCost,
|
||
crit_success_chance: critSuccessChance,
|
||
crit_failure_chance: critFailureChance,
|
||
text: {
|
||
success: successText,
|
||
failure: failureText,
|
||
crit_success: critSuccessText,
|
||
crit_failure: critFailureText
|
||
},
|
||
rewards: {
|
||
items: items,
|
||
damage: damage,
|
||
crit_items: critItems,
|
||
crit_damage: critDamage
|
||
}
|
||
};
|
||
}
|
||
|
||
// Update the stored data
|
||
instanceElement.dataset.instanceData = JSON.stringify(instanceData);
|
||
|
||
closeEditInteractableInstanceModal();
|
||
showSuccess('Interactable instance updated!');
|
||
}
|
||
|
||
function getInteractableInstances() {
|
||
const instances = {};
|
||
const items = document.querySelectorAll('#interactablesList .spawn-item');
|
||
|
||
items.forEach(item => {
|
||
const instanceId = item.dataset.instanceId;
|
||
const instanceData = JSON.parse(item.dataset.instanceData);
|
||
instances[instanceId] = instanceData;
|
||
});
|
||
|
||
return instances;
|
||
}
|
||
|
||
function renderInteractablesList(interactables) {
|
||
console.log('renderInteractablesList called with:', interactables);
|
||
console.log('availableInteractables:', availableInteractables);
|
||
|
||
const list = document.getElementById('interactablesList');
|
||
if (!list) {
|
||
console.error('interactablesList element not found!');
|
||
return;
|
||
}
|
||
|
||
list.innerHTML = '';
|
||
|
||
if (!interactables || Object.keys(interactables).length === 0) {
|
||
console.log('No interactables to render');
|
||
return;
|
||
}
|
||
|
||
console.log('Rendering', Object.keys(interactables).length, 'interactables');
|
||
|
||
Object.entries(interactables).forEach(([instanceId, instance]) => {
|
||
// Support both old format (template_id) and new format (id)
|
||
const templateId = instance.template_id || instance.id;
|
||
let displayName = instance.name || 'Unknown';
|
||
let actionCount = 0;
|
||
|
||
console.log(`Processing instance ${instanceId}, template_id: ${templateId}`);
|
||
|
||
// Try to find template in available interactables
|
||
const template = availableInteractables.find(i => i.id === templateId);
|
||
if (template) {
|
||
displayName = template.name;
|
||
actionCount = Object.keys(template.actions || {}).length;
|
||
console.log(`Found template: ${displayName} with ${actionCount} actions`);
|
||
} else {
|
||
console.log(`Template ${templateId} not found in availableInteractables`);
|
||
// For new format instances that have full data
|
||
if (instance.name) {
|
||
displayName = instance.name;
|
||
}
|
||
if (instance.actions) {
|
||
actionCount = Object.keys(instance.actions).length;
|
||
} else if (instance.outcomes) {
|
||
actionCount = Object.keys(instance.outcomes).length;
|
||
}
|
||
}
|
||
|
||
const item = document.createElement('div');
|
||
item.className = 'spawn-item';
|
||
item.dataset.instanceId = instanceId;
|
||
item.dataset.instanceData = JSON.stringify(instance);
|
||
item.innerHTML = `
|
||
<div class="spawn-item-info">
|
||
<div class="spawn-item-name">${displayName}</div>
|
||
<div class="spawn-item-weight">${actionCount} action(s)</div>
|
||
</div>
|
||
<div style="display: flex; gap: 5px;">
|
||
<button class="btn btn-primary" onclick="editInteractableInstance('${instanceId}', '${templateId}')">Edit</button>
|
||
<button class="btn btn-remove" onclick="removeInteractableInstance('${instanceId}')">Remove</button>
|
||
</div>
|
||
`;
|
||
|
||
list.appendChild(item);
|
||
console.log(`Appended item for ${instanceId}`);
|
||
});
|
||
|
||
console.log('Finished rendering interactables');
|
||
}
|
||
|
||
// ==================== IMAGE UPLOAD ====================
|
||
|
||
async function uploadImage() {
|
||
const fileInput = document.getElementById('imageUpload');
|
||
const file = fileInput.files[0];
|
||
|
||
if (!file) return;
|
||
|
||
const formData = new FormData();
|
||
formData.append('image', file);
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/upload-image', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
document.getElementById('imagePath').value = data.image_path;
|
||
updateImagePreview(data.image_path);
|
||
showSuccess(data.message);
|
||
} else {
|
||
alert('Upload failed: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Upload failed: ' + error.message);
|
||
}
|
||
}
|
||
|
||
async function uploadNPCImage() {
|
||
const fileInput = document.getElementById('npcImageUpload');
|
||
const file = fileInput.files[0];
|
||
|
||
if (!file) return;
|
||
|
||
const formData = new FormData();
|
||
formData.append('image', file);
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/upload-image', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
document.getElementById('npcImageUrl').value = data.image_path;
|
||
updateNPCImagePreview(data.image_path);
|
||
showSuccess(data.message);
|
||
} else {
|
||
alert('Upload failed: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Upload failed: ' + error.message);
|
||
}
|
||
}
|
||
|
||
function updateNPCImagePreview(imagePath) {
|
||
const preview = document.getElementById('npcImagePreview');
|
||
if (imagePath && imagePath.trim() !== '') {
|
||
preview.innerHTML = `<img src="${imagePath}" alt="NPC image" onerror="this.parentElement.innerHTML='<span>Image not found</span>'">`;
|
||
} else {
|
||
preview.innerHTML = '<span>No image</span>';
|
||
}
|
||
}
|
||
|
||
async function uploadInteractableImage() {
|
||
const fileInput = document.getElementById('interactableImageUpload');
|
||
const file = fileInput.files[0];
|
||
|
||
if (!file) return;
|
||
|
||
const formData = new FormData();
|
||
formData.append('image', file);
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/upload-image', {
|
||
method: 'POST',
|
||
body: formData
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
document.getElementById('interactableImagePath').value = data.image_path;
|
||
updateInteractableImagePreview(data.image_path);
|
||
showSuccess(data.message);
|
||
} else {
|
||
alert('Upload failed: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Upload failed: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// ==================== PYTHON EXPORT ====================
|
||
|
||
async function exportToPython() {
|
||
try {
|
||
const response = await fetch('/api/editor/export-python');
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
// Create a downloadable file
|
||
const blob = new Blob([data.python_code], {type: 'text/plain'});
|
||
const url = URL.createObjectURL(blob);
|
||
const a = document.createElement('a');
|
||
a.href = url;
|
||
a.download = 'world_loader_updates.py';
|
||
a.click();
|
||
URL.revokeObjectURL(url);
|
||
|
||
showSuccess('Python code exported! Review before applying to world_loader.py');
|
||
} else {
|
||
alert('Export failed: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Export failed: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// ==================== UTILITY ====================
|
||
|
||
async function logout() {
|
||
try {
|
||
await fetch('/api/logout', {method: 'POST'});
|
||
if (liveStatsInterval) {
|
||
clearInterval(liveStatsInterval);
|
||
}
|
||
window.location.reload();
|
||
} catch (error) {
|
||
console.error('Logout failed:', error);
|
||
}
|
||
}
|
||
|
||
async function restartBot() {
|
||
if (!confirm('Are you sure you want to restart the bot? This will temporarily disconnect active users.')) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/restart-bot', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
}
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (response.ok) {
|
||
showSuccess('✅ Bot restarted successfully! Changes will be loaded.');
|
||
} else {
|
||
showError(`Failed to restart bot: ${data.error || 'Unknown error'}`);
|
||
}
|
||
} catch (error) {
|
||
console.error('Restart failed:', error);
|
||
showError('Failed to restart bot. Check console for details.');
|
||
}
|
||
}
|
||
|
||
async function refreshBotLogs() {
|
||
try {
|
||
const lineCount = document.getElementById('logsLineCount').value || 100;
|
||
const logsViewer = document.getElementById('logsViewer');
|
||
|
||
logsViewer.innerHTML = '<div style="opacity: 0.5; text-align: center; padding: 20px;">Loading logs...</div>';
|
||
|
||
const response = await fetch(`/api/editor/bot-logs?lines=${lineCount}`);
|
||
const data = await response.json();
|
||
|
||
if (response.ok && data.success) {
|
||
displayLogs(data.logs);
|
||
} else {
|
||
logsViewer.innerHTML = `<div class="log-error">Failed to load logs: ${data.error || 'Unknown error'}</div>`;
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch logs:', error);
|
||
document.getElementById('logsViewer').innerHTML = '<div class="log-error">Failed to fetch logs. Check console for details.</div>';
|
||
}
|
||
}
|
||
|
||
function displayLogs(logsText) {
|
||
const logsViewer = document.getElementById('logsViewer');
|
||
|
||
if (!logsText || logsText.trim() === '') {
|
||
logsViewer.innerHTML = '<div style="opacity: 0.5; text-align: center; padding: 20px;">No logs available</div>';
|
||
return;
|
||
}
|
||
|
||
const lines = logsText.split('\n');
|
||
let html = '';
|
||
|
||
lines.forEach(line => {
|
||
if (!line.trim()) return;
|
||
|
||
let className = 'log-line';
|
||
|
||
// Color code based on log level
|
||
if (line.includes('ERROR') || line.includes('Error') || line.includes('error')) {
|
||
className += ' log-error';
|
||
} else if (line.includes('WARNING') || line.includes('Warning') || line.includes('warning')) {
|
||
className += ' log-warning';
|
||
} else if (line.includes('INFO') || line.includes('Info')) {
|
||
className += ' log-info';
|
||
} else if (line.includes('✅') || line.includes('SUCCESS') || line.includes('Success')) {
|
||
className += ' log-success';
|
||
}
|
||
|
||
// Escape HTML to prevent XSS
|
||
const escapedLine = line
|
||
.replace(/&/g, '&')
|
||
.replace(/</g, '<')
|
||
.replace(/>/g, '>')
|
||
.replace(/"/g, '"')
|
||
.replace(/'/g, ''');
|
||
|
||
html += `<div class="${className}">${escapedLine}</div>`;
|
||
});
|
||
|
||
logsViewer.innerHTML = html;
|
||
|
||
// Auto-scroll to bottom
|
||
logsViewer.scrollTop = logsViewer.scrollHeight;
|
||
}
|
||
|
||
function clearLogsDisplay() {
|
||
document.getElementById('logsViewer').innerHTML = '<div style="opacity: 0.5; text-align: center; padding: 20px;">Logs cleared. Click "Refresh" to reload.</div>';
|
||
}
|
||
|
||
// ==================== TAB SWITCHING ====================
|
||
|
||
function switchTab(tabName) {
|
||
currentTab = tabName;
|
||
|
||
// Update tab buttons
|
||
document.querySelectorAll('.tab-button').forEach(btn => {
|
||
if (btn.textContent.toLowerCase().includes(tabName)) {
|
||
btn.classList.add('active');
|
||
} else {
|
||
btn.classList.remove('active');
|
||
}
|
||
});
|
||
|
||
// Update tab content - ensure all are hidden first
|
||
document.querySelectorAll('.tab-content').forEach(content => {
|
||
content.classList.remove('active');
|
||
content.style.display = 'none';
|
||
});
|
||
|
||
// Show only the selected tab
|
||
const activeTab = document.getElementById(`tab-${tabName}`);
|
||
if (activeTab) {
|
||
activeTab.classList.add('active');
|
||
activeTab.style.display = (tabName === 'locations') ? 'grid' : 'flex';
|
||
}
|
||
|
||
// Load data for the tab
|
||
if (tabName === 'npcs') {
|
||
loadNPCManagement();
|
||
} else if (tabName === 'items') {
|
||
loadItemManagement();
|
||
} else if (tabName === 'interactables') {
|
||
loadInteractableManagement();
|
||
} else if (tabName === 'logs') {
|
||
// Auto-load logs when switching to logs tab
|
||
refreshBotLogs();
|
||
} else if (tabName === 'locations') {
|
||
// Load interactables for the locations tab (needed for adding instances)
|
||
loadAvailableInteractablesForLocations();
|
||
// Force canvas resize when switching to locations tab
|
||
setTimeout(() => {
|
||
resizeCanvas();
|
||
}, 10);
|
||
}
|
||
}
|
||
|
||
async function loadAvailableInteractablesForLocations() {
|
||
try {
|
||
const response = await fetch('/api/editor/interactables');
|
||
const data = await response.json();
|
||
|
||
console.log('Interactables API response:', data);
|
||
|
||
if (data.interactables) {
|
||
// Check if it's an array or object
|
||
if (Array.isArray(data.interactables)) {
|
||
availableInteractables = data.interactables;
|
||
} else {
|
||
// If it's an object, convert to array
|
||
availableInteractables = Object.entries(data.interactables).map(([id, interactable]) => ({
|
||
id,
|
||
...interactable
|
||
}));
|
||
}
|
||
console.log('Loaded interactables:', availableInteractables.length);
|
||
} else {
|
||
console.error('No interactables in response');
|
||
availableInteractables = [];
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load interactables:', error);
|
||
availableInteractables = [];
|
||
}
|
||
}
|
||
|
||
async function loadAvailableItemsForLocations() {
|
||
try {
|
||
const response = await fetch('/api/editor/items');
|
||
const data = await response.json();
|
||
availableItems = data.items || [];
|
||
} catch (error) {
|
||
console.error('Failed to load items:', error);
|
||
}
|
||
}
|
||
|
||
function saveCurrentItem() {
|
||
if (currentTab === 'locations') {
|
||
saveCurrentLocation();
|
||
} else if (currentTab === 'npcs') {
|
||
saveCurrentNPC();
|
||
} else if (currentTab === 'items') {
|
||
saveCurrentItem_();
|
||
} else if (currentTab === 'interactables') {
|
||
saveCurrentInteractable();
|
||
}
|
||
}
|
||
|
||
// ==================== NPC MANAGEMENT ====================
|
||
|
||
async function loadNPCManagement() {
|
||
try {
|
||
const response = await fetch('/api/editor/npcs', {
|
||
credentials: 'same-origin'
|
||
});
|
||
const data = await response.json();
|
||
availableNPCs = data.npcs || [];
|
||
renderNPCManagementList();
|
||
} catch (error) {
|
||
console.error('Failed to load NPCs:', error);
|
||
}
|
||
}
|
||
|
||
function renderNPCManagementList() {
|
||
const list = document.getElementById('npcManagementList');
|
||
list.innerHTML = '';
|
||
|
||
availableNPCs.forEach(npc => {
|
||
const item = document.createElement('div');
|
||
item.className = 'management-item';
|
||
item.dataset.name = npc.name;
|
||
item.dataset.id = npc.id;
|
||
if (npc.id === selectedNPCId) {
|
||
item.classList.add('active');
|
||
}
|
||
|
||
item.innerHTML = `
|
||
<div><strong>${npc.emoji} ${npc.name}</strong></div>
|
||
<div style="font-size: 0.85em; opacity: 0.7; margin-top: 5px;">
|
||
HP: ${npc.hp_min}-${npc.hp_max} | DMG: ${npc.damage_min}-${npc.damage_max}
|
||
</div>
|
||
`;
|
||
|
||
item.onclick = () => selectNPC(npc.id);
|
||
list.appendChild(item);
|
||
});
|
||
}
|
||
|
||
function filterNPCManagementList() {
|
||
const searchTerm = document.getElementById('npcManagementSearch').value.toLowerCase();
|
||
const items = document.querySelectorAll('#npcManagementList .management-item');
|
||
|
||
items.forEach(item => {
|
||
const name = item.dataset.name?.toLowerCase() || '';
|
||
const id = item.dataset.id?.toLowerCase() || '';
|
||
item.style.display = (!searchTerm || name.includes(searchTerm) || id.includes(searchTerm)) ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
function selectNPC(npcId) {
|
||
selectedNPCId = npcId;
|
||
renderNPCManagementList();
|
||
|
||
const npc = availableNPCs.find(n => n.id === npcId);
|
||
if (!npc) return;
|
||
|
||
const editor = document.getElementById('npcEditor');
|
||
editor.innerHTML = `
|
||
<h2>Edit NPC: ${npc.name}</h2>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>ID</label>
|
||
<input type="text" id="npcId" value="${npc.id}" readonly style="opacity: 0.6;">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Name</label>
|
||
<input type="text" id="npcName" value="${npc.name}">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Emoji</label>
|
||
<input type="text" id="npcEmoji" value="${npc.emoji}" maxlength="2">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>HP Min</label>
|
||
<input type="number" id="npcHpMin" value="${npc.hp_min}" min="1">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>HP Max</label>
|
||
<input type="number" id="npcHpMax" value="${npc.hp_max}" min="1">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>Damage Min</label>
|
||
<input type="number" id="npcDamageMin" value="${npc.damage_min}" min="0">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Damage Max</label>
|
||
<input type="number" id="npcDamageMax" value="${npc.damage_max}" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>XP Reward</label>
|
||
<input type="number" id="npcXp" value="${npc.xp_reward}" min="0">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Defense</label>
|
||
<input type="number" id="npcDefense" value="${npc.defense || 0}" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Description</label>
|
||
<textarea id="npcDescription" rows="3" style="width: 100%;">${npc.description || ''}</textarea>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>NPC Image</label>
|
||
<input type="text" id="npcImageUrl" value="${npc.image_url || ''}" placeholder="images/npcs/npc_name.png" oninput="updateNPCImagePreview(this.value)">
|
||
<div class="file-input-wrapper">
|
||
<input type="file" id="npcImageUpload" accept="image/*" onchange="uploadNPCImage()">
|
||
<label for="npcImageUpload" class="file-input-label">📤 Upload New Image</label>
|
||
</div>
|
||
<div class="image-preview" id="npcImagePreview">
|
||
${npc.image_url ? `<img src="${npc.image_url}" alt="NPC image" onerror="this.parentElement.innerHTML='<span>Image not found</span>'">` : '<span>No image</span>'}
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="color: #ffa726; margin: 30px 0 15px;">Loot Table</h3>
|
||
<div id="npcLootTable"></div>
|
||
<button class="btn btn-add" onclick="addNPCLoot()">+ Add Loot Item</button>
|
||
|
||
<h3 style="color: #ffa726; margin: 30px 0 15px;">Corpse Loot</h3>
|
||
<div id="npcCorpseLoot"></div>
|
||
<button class="btn btn-add" onclick="addNPCCorpseLoot()">+ Add Corpse Loot</button>
|
||
|
||
<div style="margin-top: 30px; padding-top: 20px; border-top: 2px solid #3a3a6a; display: flex; gap: 10px;">
|
||
<button class="btn btn-danger" style="flex: 1;" onclick="deleteCurrentNPC()">🗑️ Delete NPC</button>
|
||
</div>
|
||
`;
|
||
|
||
renderNPCLootTable(npc.loot_table || []);
|
||
renderNPCCorpseLoot(npc.corpse_loot || []);
|
||
}
|
||
|
||
function renderNPCLootTable(lootTable) {
|
||
const container = document.getElementById('npcLootTable');
|
||
container.innerHTML = '';
|
||
|
||
lootTable.forEach((loot, index) => {
|
||
// Handle both old and new formats for quantities
|
||
let quantityMin = loot.quantity_min || 1;
|
||
let quantityMax = loot.quantity_max || 1;
|
||
|
||
// Parse quantity_range if it exists (old format)
|
||
if (Array.isArray(loot.quantity_range)) {
|
||
quantityMin = loot.quantity_range[0] || 1;
|
||
quantityMax = loot.quantity_range[1] || 1;
|
||
} else if (typeof loot.quantity_range === 'string') {
|
||
try {
|
||
const parsed = JSON.parse(loot.quantity_range);
|
||
quantityMin = parsed[0] || 1;
|
||
quantityMax = parsed[1] || 1;
|
||
} catch (e) {
|
||
quantityMin = 1;
|
||
quantityMax = 1;
|
||
}
|
||
}
|
||
|
||
const item = document.createElement('div');
|
||
item.className = 'array-item';
|
||
item.innerHTML = `
|
||
<button class="array-item-remove" onclick="removeNPCLoot(${index})">×</button>
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>Item</label>
|
||
<div style="position: relative;">
|
||
<input type="text"
|
||
id="lootItem${index}"
|
||
value="${loot.item_id}"
|
||
placeholder="Type to search items..."
|
||
oninput="filterNPCLootItemDropdown(${index})"
|
||
onfocus="showNPCLootItemDropdown(${index})"
|
||
autocomplete="off">
|
||
<div id="lootItemDropdown${index}" class="item-dropdown" style="display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: #1a1a3e; border: 1px solid #3a3a6a; border-radius: 4px; margin-top: 2px; z-index: 1000;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Quantity Min</label>
|
||
<input type="number" id="lootQuantityMin${index}" value="${quantityMin}" min="1">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Quantity Max</label>
|
||
<input type="number" id="lootQuantityMax${index}" value="${quantityMax}" min="1">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Drop Chance (0-1)</label>
|
||
<input type="number" id="lootChance${index}" value="${loot.drop_chance || 0.5}" step="0.01" min="0" max="1">
|
||
</div>
|
||
</div>
|
||
`;
|
||
container.appendChild(item);
|
||
});
|
||
}
|
||
|
||
function renderNPCCorpseLoot(corpseLoot) {
|
||
const container = document.getElementById('npcCorpseLoot');
|
||
container.innerHTML = '';
|
||
|
||
corpseLoot.forEach((loot, index) => {
|
||
// Handle both old and new formats for quantities
|
||
let quantityMin = loot.quantity_min || 1;
|
||
let quantityMax = loot.quantity_max || 1;
|
||
|
||
const item = document.createElement('div');
|
||
item.className = 'array-item';
|
||
item.innerHTML = `
|
||
<button class="array-item-remove" onclick="removeNPCCorpseLoot(${index})">×</button>
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>Item</label>
|
||
<div style="position: relative;">
|
||
<input type="text"
|
||
id="corpseItem${index}"
|
||
value="${loot.item_id}"
|
||
placeholder="Type to search items..."
|
||
oninput="filterNPCCorpseItemDropdown(${index})"
|
||
onfocus="showNPCCorpseItemDropdown(${index})"
|
||
autocomplete="off">
|
||
<div id="corpseItemDropdown${index}" class="item-dropdown" style="display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: 200px; overflow-y: auto; background: #1a1a3e; border: 1px solid #3a3a6a; border-radius: 4px; margin-top: 2px; z-index: 1000;"></div>
|
||
</div>
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Quantity Min</label>
|
||
<input type="number" id="corpseQuantityMin${index}" value="${quantityMin}" min="1">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Quantity Max</label>
|
||
<input type="number" id="corpseQuantityMax${index}" value="${quantityMax}" min="1">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Required Tool (optional)</label>
|
||
<input type="text" id="corpseRequiredTool${index}" value="${loot.required_tool || ''}" placeholder="e.g., knife">
|
||
</div>
|
||
</div>
|
||
`;
|
||
container.appendChild(item);
|
||
});
|
||
}
|
||
|
||
function createNewNPC() {
|
||
const npcId = prompt('Enter NPC ID (e.g., zombie, raider):');
|
||
if (!npcId) return;
|
||
|
||
const newNPC = {
|
||
id: npcId,
|
||
name: 'New NPC',
|
||
emoji: '👹',
|
||
hp_min: 10,
|
||
hp_max: 20,
|
||
damage_min: 1,
|
||
damage_max: 5,
|
||
xp_reward: 10,
|
||
defense: 0,
|
||
description: '',
|
||
image_url: '',
|
||
loot_table: [],
|
||
corpse_loot: []
|
||
};
|
||
|
||
availableNPCs.push(newNPC);
|
||
renderNPCManagementList();
|
||
selectNPC(npcId);
|
||
}
|
||
|
||
async function saveCurrentNPC() {
|
||
if (!selectedNPCId) {
|
||
alert('No NPC selected');
|
||
return;
|
||
}
|
||
|
||
const npcData = {
|
||
id: document.getElementById('npcId').value,
|
||
name: document.getElementById('npcName').value,
|
||
emoji: document.getElementById('npcEmoji').value,
|
||
hp_min: parseInt(document.getElementById('npcHpMin').value),
|
||
hp_max: parseInt(document.getElementById('npcHpMax').value),
|
||
damage_min: parseInt(document.getElementById('npcDamageMin').value),
|
||
damage_max: parseInt(document.getElementById('npcDamageMax').value),
|
||
xp_reward: parseInt(document.getElementById('npcXp').value),
|
||
defense: parseInt(document.getElementById('npcDefense').value),
|
||
description: document.getElementById('npcDescription').value,
|
||
image_url: document.getElementById('npcImageUrl').value,
|
||
loot_table: getNPCLootTable(),
|
||
corpse_loot: getNPCCorpseLoot()
|
||
};
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/npc', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify(npcData)
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('NPC saved successfully!');
|
||
await loadNPCManagement();
|
||
} else {
|
||
alert('Failed to save: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to save NPC: ' + error.message);
|
||
}
|
||
}
|
||
|
||
function getNPCLootTable() {
|
||
const container = document.getElementById('npcLootTable');
|
||
const items = container.querySelectorAll('.array-item');
|
||
const lootTable = [];
|
||
|
||
items.forEach((item, index) => {
|
||
const itemId = document.getElementById(`lootItem${index}`).value;
|
||
const quantityMin = parseInt(document.getElementById(`lootQuantityMin${index}`).value);
|
||
const quantityMax = parseInt(document.getElementById(`lootQuantityMax${index}`).value);
|
||
const chance = parseFloat(document.getElementById(`lootChance${index}`).value);
|
||
|
||
if (itemId) {
|
||
lootTable.push({
|
||
item_id: itemId,
|
||
quantity_min: quantityMin,
|
||
quantity_max: quantityMax,
|
||
drop_chance: chance
|
||
});
|
||
}
|
||
});
|
||
|
||
return lootTable;
|
||
}
|
||
|
||
function getNPCCorpseLoot() {
|
||
const container = document.getElementById('npcCorpseLoot');
|
||
const items = container.querySelectorAll('.array-item');
|
||
const corpseLoot = [];
|
||
|
||
items.forEach((item, index) => {
|
||
const itemId = document.getElementById(`corpseItem${index}`).value;
|
||
const quantityMin = parseInt(document.getElementById(`corpseQuantityMin${index}`).value);
|
||
const quantityMax = parseInt(document.getElementById(`corpseQuantityMax${index}`).value);
|
||
const requiredTool = document.getElementById(`corpseRequiredTool${index}`).value || null;
|
||
|
||
if (itemId) {
|
||
corpseLoot.push({
|
||
item_id: itemId,
|
||
quantity_min: quantityMin,
|
||
quantity_max: quantityMax,
|
||
required_tool: requiredTool
|
||
});
|
||
}
|
||
});
|
||
|
||
return corpseLoot;
|
||
}
|
||
|
||
// Item dropdown functions for NPC loot tables
|
||
function showNPCLootItemDropdown(index) {
|
||
filterNPCLootItemDropdown(index);
|
||
}
|
||
|
||
function filterNPCLootItemDropdown(index) {
|
||
const input = document.getElementById(`lootItem${index}`);
|
||
const dropdown = document.getElementById(`lootItemDropdown${index}`);
|
||
const searchTerm = input.value.toLowerCase();
|
||
|
||
dropdown.innerHTML = '';
|
||
dropdown.style.display = 'block';
|
||
|
||
const filtered = availableItems.filter(item =>
|
||
item.id.toLowerCase().includes(searchTerm) ||
|
||
(item.name && item.name.toLowerCase().includes(searchTerm)) ||
|
||
(item.emoji && item.emoji.includes(searchTerm))
|
||
);
|
||
|
||
if (filtered.length === 0) {
|
||
dropdown.innerHTML = '<div style="padding: 8px; opacity: 0.5;">No items found</div>';
|
||
return;
|
||
}
|
||
|
||
filtered.forEach(item => {
|
||
const option = document.createElement('div');
|
||
option.className = 'dropdown-item';
|
||
option.style.padding = '8px';
|
||
option.style.cursor = 'pointer';
|
||
option.style.borderBottom = '1px solid #2a2a4a';
|
||
option.innerHTML = `${item.emoji || '📦'} ${item.name || item.id} <span style="opacity: 0.6; font-size: 0.9em;">(${item.id})</span>`;
|
||
|
||
// Add hover effects
|
||
option.addEventListener('mouseover', function() {
|
||
this.style.background = '#2a2a4a';
|
||
});
|
||
option.addEventListener('mouseout', function() {
|
||
this.style.background = 'transparent';
|
||
});
|
||
|
||
option.addEventListener('click', () => {
|
||
input.value = item.id;
|
||
dropdown.style.display = 'none';
|
||
});
|
||
dropdown.appendChild(option);
|
||
});
|
||
}
|
||
|
||
function showNPCCorpseItemDropdown(index) {
|
||
filterNPCCorpseItemDropdown(index);
|
||
}
|
||
|
||
function filterNPCCorpseItemDropdown(index) {
|
||
const input = document.getElementById(`corpseItem${index}`);
|
||
const dropdown = document.getElementById(`corpseItemDropdown${index}`);
|
||
const searchTerm = input.value.toLowerCase();
|
||
|
||
dropdown.innerHTML = '';
|
||
dropdown.style.display = 'block';
|
||
|
||
const filtered = availableItems.filter(item =>
|
||
item.id.toLowerCase().includes(searchTerm) ||
|
||
(item.name && item.name.toLowerCase().includes(searchTerm)) ||
|
||
(item.emoji && item.emoji.includes(searchTerm))
|
||
);
|
||
|
||
if (filtered.length === 0) {
|
||
dropdown.innerHTML = '<div style="padding: 8px; opacity: 0.5;">No items found</div>';
|
||
return;
|
||
}
|
||
|
||
filtered.forEach(item => {
|
||
const option = document.createElement('div');
|
||
option.className = 'dropdown-item';
|
||
option.style.padding = '8px';
|
||
option.style.cursor = 'pointer';
|
||
option.style.borderBottom = '1px solid #2a2a4a';
|
||
option.innerHTML = `${item.emoji || '📦'} ${item.name || item.id} <span style="opacity: 0.6; font-size: 0.9em;">(${item.id})</span>`;
|
||
|
||
// Add hover effects
|
||
option.addEventListener('mouseover', function() {
|
||
this.style.background = '#2a2a4a';
|
||
});
|
||
option.addEventListener('mouseout', function() {
|
||
this.style.background = 'transparent';
|
||
});
|
||
|
||
option.addEventListener('click', () => {
|
||
input.value = item.id;
|
||
dropdown.style.display = 'none';
|
||
});
|
||
dropdown.appendChild(option);
|
||
});
|
||
}
|
||
|
||
// Hide dropdowns when clicking outside
|
||
document.addEventListener('click', function(e) {
|
||
if (!e.target.matches('[id^="lootItem"], [id^="corpseItem"]')) {
|
||
document.querySelectorAll('.item-dropdown').forEach(dropdown => {
|
||
dropdown.style.display = 'none';
|
||
});
|
||
}
|
||
});
|
||
|
||
function addNPCLoot() {
|
||
const npc = availableNPCs.find(n => n.id === selectedNPCId);
|
||
if (!npc) return;
|
||
|
||
if (!npc.loot_table) npc.loot_table = [];
|
||
npc.loot_table.push({item_id: '', quantity_range: [1, 1], drop_chance: 0.5});
|
||
renderNPCLootTable(npc.loot_table);
|
||
}
|
||
|
||
function removeNPCLoot(index) {
|
||
const npc = availableNPCs.find(n => n.id === selectedNPCId);
|
||
if (!npc || !npc.loot_table) return;
|
||
|
||
npc.loot_table.splice(index, 1);
|
||
renderNPCLootTable(npc.loot_table);
|
||
}
|
||
|
||
function addNPCCorpseLoot() {
|
||
const npc = availableNPCs.find(n => n.id === selectedNPCId);
|
||
if (!npc) return;
|
||
|
||
if (!npc.corpse_loot) npc.corpse_loot = [];
|
||
npc.corpse_loot.push({item_id: '', quantity: 1});
|
||
renderNPCCorpseLoot(npc.corpse_loot);
|
||
}
|
||
|
||
function removeNPCCorpseLoot(index) {
|
||
const npc = availableNPCs.find(n => n.id === selectedNPCId);
|
||
if (!npc || !npc.corpse_loot) return;
|
||
|
||
npc.corpse_loot.splice(index, 1);
|
||
renderNPCCorpseLoot(npc.corpse_loot);
|
||
}
|
||
|
||
async function deleteCurrentNPC() {
|
||
if (!selectedNPCId) return;
|
||
|
||
if (!confirm(`Delete NPC "${selectedNPCId}"? This cannot be undone.`)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`/api/editor/npc/${selectedNPCId}`, {
|
||
method: 'DELETE',
|
||
credentials: 'same-origin'
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('NPC deleted successfully!');
|
||
selectedNPCId = null;
|
||
document.getElementById('npcEditor').innerHTML = '<div style="text-align: center; opacity: 0.5; padding: 50px;"><h3>Select an NPC or create a new one</h3></div>';
|
||
await loadNPCManagement();
|
||
} else {
|
||
alert('Failed to delete: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to delete NPC: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// ==================== ITEM MANAGEMENT ====================
|
||
|
||
async function loadItemManagement() {
|
||
try {
|
||
const response = await fetch('/api/editor/items', {
|
||
credentials: 'same-origin'
|
||
});
|
||
const data = await response.json();
|
||
availableItems = data.items || [];
|
||
renderItemManagementList();
|
||
} catch (error) {
|
||
console.error('Failed to load items:', error);
|
||
}
|
||
}
|
||
|
||
function renderItemManagementList() {
|
||
const list = document.getElementById('itemManagementList');
|
||
list.innerHTML = '';
|
||
|
||
availableItems.forEach(item => {
|
||
const elem = document.createElement('div');
|
||
elem.className = 'management-item';
|
||
elem.dataset.name = item.name;
|
||
elem.dataset.id = item.id;
|
||
if (item.id === selectedItemId) {
|
||
elem.classList.add('active');
|
||
}
|
||
|
||
elem.innerHTML = `
|
||
<div><strong>${item.emoji ? item.emoji + ' ' : ''}${item.name}</strong></div>
|
||
<div style="font-size: 0.85em; opacity: 0.7; margin-top: 5px;">
|
||
Type: ${item.type} | Weight: ${item.weight}kg
|
||
</div>
|
||
`;
|
||
|
||
elem.onclick = () => selectItem(item.id);
|
||
list.appendChild(elem);
|
||
});
|
||
}
|
||
|
||
function filterItemManagementList() {
|
||
const searchTerm = document.getElementById('itemManagementSearch').value.toLowerCase();
|
||
const items = document.querySelectorAll('#itemManagementList .management-item');
|
||
|
||
items.forEach(item => {
|
||
const name = item.dataset.name?.toLowerCase() || '';
|
||
const id = item.dataset.id?.toLowerCase() || '';
|
||
item.style.display = (!searchTerm || name.includes(searchTerm) || id.includes(searchTerm)) ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
function selectItem(itemId) {
|
||
selectedItemId = itemId;
|
||
renderItemManagementList();
|
||
|
||
const item = availableItems.find(i => i.id === itemId);
|
||
if (!item) return;
|
||
|
||
const editor = document.getElementById('itemEditor');
|
||
editor.innerHTML = `
|
||
<h2>Edit Item: ${item.name}</h2>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>ID</label>
|
||
<input type="text" id="itemId" value="${item.id}" readonly style="opacity: 0.6;">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Name</label>
|
||
<input type="text" id="itemName" value="${item.name}">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Emoji</label>
|
||
<input type="text" id="itemEmoji" value="${item.emoji || ''}" maxlength="2">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>Type</label>
|
||
<select id="itemType">
|
||
<option value="resource" ${item.type === 'resource' ? 'selected' : ''}>Resource</option>
|
||
<option value="consumable" ${item.type === 'consumable' ? 'selected' : ''}>Consumable</option>
|
||
<option value="weapon" ${item.type === 'weapon' ? 'selected' : ''}>Weapon</option>
|
||
<option value="equipment" ${item.type === 'equipment' ? 'selected' : ''}>Equipment</option>
|
||
<option value="quest" ${item.type === 'quest' ? 'selected' : ''}>Quest Item</option>
|
||
</select>
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Stackable</label>
|
||
<select id="itemStackable">
|
||
<option value="true" ${item.stackable !== false ? 'selected' : ''}>Yes</option>
|
||
<option value="false" ${item.stackable === false ? 'selected' : ''}>No</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>Weight (kg)</label>
|
||
<input type="number" id="itemWeight" value="${item.weight}" step="0.1" min="0">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Volume</label>
|
||
<input type="number" id="itemVolume" value="${item.volume}" step="0.1" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Description</label>
|
||
<textarea id="itemDescription" rows="3" style="width: 100%;">${item.description || ''}</textarea>
|
||
</div>
|
||
|
||
<h3 style="color: #ffa726; margin: 30px 0 15px;">Properties</h3>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>HP Restore</label>
|
||
<input type="number" id="itemHpRestore" value="${item.hp_restore || 0}" min="0">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Stamina Restore</label>
|
||
<input type="number" id="itemStaminaRestore" value="${item.stamina_restore || 0}" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>Damage</label>
|
||
<input type="number" id="itemDamage" value="${item.damage || 0}" min="0">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Defense</label>
|
||
<input type="number" id="itemDefense" value="${item.defense || 0}" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>Capacity Weight Bonus</label>
|
||
<input type="number" id="itemCapacityWeight" value="${item.capacity_weight || 0}" min="0">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Capacity Volume Bonus</label>
|
||
<input type="number" id="itemCapacityVolume" value="${item.capacity_volume || 0}" min="0">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label style="display: flex; align-items: center; gap: 10px;">
|
||
<input type="checkbox" id="itemStackable" ${item.stackable ? 'checked' : ''}>
|
||
<span>Stackable</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div style="margin-top: 30px; padding-top: 20px; border-top: 2px solid #3a3a6a; display: flex; gap: 10px;">
|
||
<button class="btn btn-danger" style="flex: 1;" onclick="deleteCurrentItem()">🗑️ Delete Item</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function createNewItem() {
|
||
const itemId = prompt('Enter Item ID (e.g., health_potion, iron_sword):');
|
||
if (!itemId) return;
|
||
|
||
const newItem = {
|
||
id: itemId,
|
||
name: 'New Item',
|
||
emoji: '',
|
||
type: 'resource',
|
||
weight: 0.1,
|
||
volume: 0.1,
|
||
description: '',
|
||
stackable: true,
|
||
hp_restore: 0,
|
||
stamina_restore: 0,
|
||
damage: 0,
|
||
defense: 0,
|
||
capacity_weight: 0,
|
||
capacity_volume: 0
|
||
};
|
||
|
||
availableItems.push(newItem);
|
||
renderItemManagementList();
|
||
selectItem(itemId);
|
||
}
|
||
|
||
async function saveCurrentItem_() {
|
||
if (!selectedItemId) {
|
||
alert('No item selected');
|
||
return;
|
||
}
|
||
|
||
const itemData = {
|
||
id: document.getElementById('itemId').value,
|
||
name: document.getElementById('itemName').value,
|
||
emoji: document.getElementById('itemEmoji').value,
|
||
type: document.getElementById('itemType').value,
|
||
weight: parseFloat(document.getElementById('itemWeight').value),
|
||
volume: parseFloat(document.getElementById('itemVolume').value),
|
||
description: document.getElementById('itemDescription').value,
|
||
stackable: document.getElementById('itemStackable').value === 'true',
|
||
hp_restore: parseInt(document.getElementById('itemHpRestore').value) || 0,
|
||
stamina_restore: parseInt(document.getElementById('itemStaminaRestore').value) || 0,
|
||
damage: parseInt(document.getElementById('itemDamage').value) || 0,
|
||
defense: parseInt(document.getElementById('itemDefense').value) || 0,
|
||
capacity_weight: parseInt(document.getElementById('itemCapacityWeight').value) || 0,
|
||
capacity_volume: parseInt(document.getElementById('itemCapacityVolume').value) || 0
|
||
};
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/item', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify(itemData)
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('Item saved successfully!');
|
||
await loadItemManagement();
|
||
} else {
|
||
alert('Failed to save: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to save item: ' + error.message);
|
||
}
|
||
}
|
||
|
||
async function deleteCurrentItem() {
|
||
if (!selectedItemId) return;
|
||
|
||
if (!confirm(`Delete item "${selectedItemId}"? This cannot be undone.`)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`/api/editor/item/${selectedItemId}`, {
|
||
method: 'DELETE',
|
||
credentials: 'same-origin'
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('Item deleted successfully!');
|
||
selectedItemId = null;
|
||
document.getElementById('itemEditor').innerHTML = '<div style="text-align: center; opacity: 0.5; padding: 50px;"><h3>Select an item or create a new one</h3></div>';
|
||
await loadItemManagement();
|
||
} else {
|
||
alert('Failed to delete: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to delete item: ' + error.message);
|
||
}
|
||
}
|
||
|
||
// ==================== INTERACTABLES MANAGEMENT ====================
|
||
|
||
async function loadInteractableManagement() {
|
||
try {
|
||
const response = await fetch('/api/editor/interactables', {
|
||
credentials: 'same-origin'
|
||
});
|
||
const data = await response.json();
|
||
availableInteractables = data.interactables;
|
||
renderInteractableManagementList();
|
||
} catch (error) {
|
||
console.error('Failed to load interactables:', error);
|
||
}
|
||
}
|
||
|
||
function renderInteractableManagementList() {
|
||
const list = document.getElementById('interactableManagementList');
|
||
list.innerHTML = '';
|
||
|
||
availableInteractables.forEach(inter => {
|
||
const elem = document.createElement('div');
|
||
elem.className = 'management-item';
|
||
elem.dataset.name = inter.name;
|
||
elem.dataset.id = inter.id;
|
||
if (inter.id === selectedInteractableId) {
|
||
elem.classList.add('active');
|
||
}
|
||
|
||
const actionCount = Object.keys(inter.actions || {}).length;
|
||
elem.innerHTML = `
|
||
<div><strong>${inter.name}</strong></div>
|
||
<div style="font-size: 0.85em; opacity: 0.7; margin-top: 5px;">
|
||
Actions: ${actionCount}
|
||
</div>
|
||
`;
|
||
|
||
elem.onclick = () => selectInteractable(inter.id);
|
||
list.appendChild(elem);
|
||
});
|
||
}
|
||
|
||
function filterInteractableManagementList() {
|
||
const searchTerm = document.getElementById('interactableManagementSearch').value.toLowerCase();
|
||
const items = document.querySelectorAll('#interactableManagementList .management-item');
|
||
|
||
items.forEach(item => {
|
||
const name = item.dataset.name?.toLowerCase() || '';
|
||
const id = item.dataset.id?.toLowerCase() || '';
|
||
item.style.display = (!searchTerm || name.includes(searchTerm) || id.includes(searchTerm)) ? '' : 'none';
|
||
});
|
||
}
|
||
|
||
function selectInteractable(interId) {
|
||
selectedInteractableId = interId;
|
||
renderInteractableManagementList();
|
||
|
||
const inter = availableInteractables.find(i => i.id === interId);
|
||
if (!inter) return;
|
||
|
||
const editor = document.getElementById('interactableEditor');
|
||
|
||
// Render actions
|
||
let actionsHtml = '';
|
||
for (const [actionId, action] of Object.entries(inter.actions || {})) {
|
||
actionsHtml += `
|
||
<div class="array-item" style="margin-bottom: 15px; position: relative;">
|
||
<button class="btn btn-remove" style="position: absolute; top: 10px; right: 10px;"
|
||
onclick="deleteInteractableAction('${actionId}')">× Remove</button>
|
||
<h4 style="color: #ffa726; margin-bottom: 10px;">${action.label}</h4>
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>Action ID</label>
|
||
<input type="text" value="${actionId}" readonly style="opacity: 0.6;">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Label</label>
|
||
<input type="text" class="action-label" data-action="${actionId}" value="${action.label}">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Stamina Cost</label>
|
||
<input type="number" class="action-stamina" data-action="${actionId}" value="${action.stamina_cost}" min="0">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
editor.innerHTML = `
|
||
<h2>Edit Interactable: ${inter.name}</h2>
|
||
|
||
<div class="form-grid">
|
||
<div class="property-group">
|
||
<label>ID</label>
|
||
<input type="text" id="interactableId" value="${inter.id}" readonly style="opacity: 0.6;">
|
||
</div>
|
||
<div class="property-group">
|
||
<label>Name</label>
|
||
<input type="text" id="interactableName" value="${inter.name}">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Description</label>
|
||
<textarea id="interactableDescription" rows="3" style="width: 100%;">${inter.description || ''}</textarea>
|
||
</div>
|
||
|
||
<div class="property-group">
|
||
<label>Interactable Image</label>
|
||
<input type="text" id="interactableImagePath" value="${inter.image_path || ''}"
|
||
placeholder="images/interactables/name.png"
|
||
oninput="updateInteractableImagePreview(this.value)">
|
||
<div class="file-input-wrapper">
|
||
<input type="file" id="interactableImageUpload" accept="image/*" onchange="uploadInteractableImage()">
|
||
<label for="interactableImageUpload" class="file-input-label">📤 Upload New Image</label>
|
||
</div>
|
||
<div class="image-preview" id="interactableImagePreview">
|
||
${inter.image_path ? `<img src="/${inter.image_path}" alt="Interactable image" onerror="this.parentElement.innerHTML='<span>Image not found</span>'">` : '<span>No image</span>'}
|
||
</div>
|
||
</div>
|
||
|
||
<h3 style="color: #ffa726; margin: 30px 0 15px;">Actions</h3>
|
||
<div id="interactableActions">
|
||
${actionsHtml}
|
||
</div>
|
||
<button class="btn btn-add" onclick="addNewInteractableAction()" style="margin-top: 10px;">+ Add Action</button>
|
||
|
||
<div style="margin-top: 30px; padding-top: 20px; border-top: 2px solid #3a3a6a; display: flex; gap: 10px;">
|
||
<button class="btn btn-danger" style="flex: 1;" onclick="deleteCurrentInteractable()">🗑️ Delete Interactable</button>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function createNewInteractable() {
|
||
const interId = prompt('Enter Interactable ID (e.g., rubble, dumpster):');
|
||
if (!interId) return;
|
||
|
||
const newInteractable = {
|
||
id: interId,
|
||
name: 'New Interactable',
|
||
description: '',
|
||
image_path: '',
|
||
actions: {
|
||
'search': {
|
||
id: 'search',
|
||
label: '🔎 Search',
|
||
stamina_cost: 2
|
||
}
|
||
}
|
||
};
|
||
|
||
availableInteractables.push(newInteractable);
|
||
renderInteractableManagementList();
|
||
selectInteractable(interId);
|
||
}
|
||
|
||
async function saveCurrentInteractable() {
|
||
if (!selectedInteractableId) {
|
||
alert('No interactable selected');
|
||
return;
|
||
}
|
||
|
||
// Get basic fields
|
||
const interData = {
|
||
id: document.getElementById('interactableId').value,
|
||
name: document.getElementById('interactableName').value,
|
||
description: document.getElementById('interactableDescription').value,
|
||
image_path: document.getElementById('interactableImagePath').value,
|
||
actions: {}
|
||
};
|
||
|
||
// Get actions
|
||
const inter = availableInteractables.find(i => i.id === selectedInteractableId);
|
||
if (inter && inter.actions) {
|
||
for (const [actionId, action] of Object.entries(inter.actions)) {
|
||
const labelInput = document.querySelector(`.action-label[data-action="${actionId}"]`);
|
||
const staminaInput = document.querySelector(`.action-stamina[data-action="${actionId}"]`);
|
||
|
||
interData.actions[actionId] = {
|
||
id: actionId,
|
||
label: labelInput ? labelInput.value : action.label,
|
||
stamina_cost: staminaInput ? parseInt(staminaInput.value) : action.stamina_cost
|
||
};
|
||
}
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/editor/interactable', {
|
||
method: 'POST',
|
||
headers: {'Content-Type': 'application/json'},
|
||
credentials: 'same-origin',
|
||
body: JSON.stringify(interData)
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('Interactable saved successfully!');
|
||
await loadInteractableManagement();
|
||
} else {
|
||
alert('Failed to save: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to save interactable: ' + error.message);
|
||
}
|
||
}
|
||
|
||
async function deleteCurrentInteractable() {
|
||
if (!selectedInteractableId) {
|
||
alert('No interactable selected');
|
||
return;
|
||
}
|
||
|
||
if (!confirm(`Delete interactable "${selectedInteractableId}"?`)) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch(`/api/editor/interactable/${selectedInteractableId}`, {
|
||
method: 'DELETE',
|
||
credentials: 'same-origin'
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (data.success) {
|
||
showSuccess('Interactable deleted successfully!');
|
||
selectedInteractableId = null;
|
||
document.getElementById('interactableEditor').innerHTML = `
|
||
<h3>Select an interactable to edit</h3>
|
||
<p style="opacity: 0.7;">Choose from the list or create a new one.</p>
|
||
`;
|
||
await loadInteractableManagement();
|
||
} else {
|
||
alert('Failed to delete: ' + data.error);
|
||
}
|
||
} catch (error) {
|
||
alert('Failed to delete interactable: ' + error.message);
|
||
}
|
||
}
|
||
|
||
function updateInteractableImagePreview(imagePath) {
|
||
const preview = document.getElementById('interactableImagePreview');
|
||
if (imagePath && imagePath.trim()) {
|
||
preview.innerHTML = `<img src="/${imagePath}" alt="Interactable image" onerror="this.parentElement.innerHTML='<span>Image not found</span>'">`;
|
||
} else {
|
||
preview.innerHTML = '<span>No image</span>';
|
||
}
|
||
}
|
||
|
||
function addNewInteractableAction() {
|
||
const actionId = prompt('Enter Action ID (e.g., search, break, open):');
|
||
if (!actionId) return;
|
||
|
||
const inter = availableInteractables.find(i => i.id === selectedInteractableId);
|
||
if (!inter) return;
|
||
|
||
// Check if action already exists
|
||
if (inter.actions && inter.actions[actionId]) {
|
||
alert('Action with this ID already exists!');
|
||
return;
|
||
}
|
||
|
||
// Add new action
|
||
if (!inter.actions) {
|
||
inter.actions = {};
|
||
}
|
||
|
||
inter.actions[actionId] = {
|
||
id: actionId,
|
||
label: actionId.charAt(0).toUpperCase() + actionId.slice(1),
|
||
stamina_cost: 2
|
||
};
|
||
|
||
// Re-render the editor
|
||
selectInteractable(selectedInteractableId);
|
||
}
|
||
|
||
function deleteInteractableAction(actionId) {
|
||
if (!confirm(`Delete action "${actionId}"?`)) {
|
||
return;
|
||
}
|
||
|
||
const inter = availableInteractables.find(i => i.id === selectedInteractableId);
|
||
if (!inter || !inter.actions) return;
|
||
|
||
delete inter.actions[actionId];
|
||
|
||
// Re-render the editor
|
||
selectInteractable(selectedInteractableId);
|
||
}
|