// Debug alert for mobile debugging
if (typeof debugAlert === 'function') {
debugAlert('files.js loaded');
}
// Global variables for file management
let selectedImage = null;
let selectedImageName = null;
let selectedImageDiv = null;
let selectedTileSize = null;
// DOM elements
const fileList = document.getElementById('fileList');
const breadcrumb = document.querySelector('.breadcrumb');
const preview = document.getElementById('preview');
/**
* Load files from the server for a given subdirectory
* @param {string} sub - The subdirectory path
*/
function loadFiles(sub) {
fetch('media.php?sub=' + encodeURIComponent(sub))
.then(r => r.json())
.then(data => {
renderBreadcrumb(data.breadcrumb);
renderFiles(data);
})
.catch(err => console.error('Error loading files:', err));
}
/**
* Render the breadcrumb navigation
* @param {Array} crumbs - Array of breadcrumb objects
*/
function renderBreadcrumb(crumbs) {
breadcrumb.innerHTML = '';
crumbs.forEach(c => {
const span = document.createElement('span');
span.textContent = c.label;
span.onclick = () => loadFiles(c.sub);
breadcrumb.appendChild(span);
});
}
/**
* Render the file list (folders and images)
* @param {Object} data - Data object containing folders and images arrays
*/
function renderFiles(data) {
fileList.innerHTML = '';
preview.innerHTML = '';
// Render folders
data.folders.forEach(f => {
const div = document.createElement('div');
div.className = 'folder';
div.textContent = f.name;
div.onclick = () => {
// If folder name is numeric, treat it as tile size
if (/^\d+$/.test(f.name)) {
selectedTileSize = parseInt(f.name, 10);
loadFiles(f.sub);
} else {
loadFiles(f.sub);
}
};
fileList.appendChild(div);
});
// Render images
data.images.forEach(img => {
const div = document.createElement('div');
div.className = 'image';
const imgElement = document.createElement('img');
imgElement.src = img.url;
imgElement.alt = img.name;
div.appendChild(imgElement);
div.onclick = () => {
// Remove previous selection
if (selectedImageDiv) {
selectedImageDiv.classList.remove('selected');
}
// Set new selection
div.classList.add('selected');
selectedImageDiv = div;
selectedImage = img.url;
selectedImageName = img.name;
showPreview(img);
};
fileList.appendChild(div);
});
}
/**
* Show preview of selected image
* @param {Object} img - Image object with name and url
*/
function showPreview(img) {
preview.innerHTML = `
<h3>Selected: ${img.name}</h3>
<img id="previewImg" src="${img.url}" alt="${img.name}">
`;
// Click big preview image to open tile picker
document.getElementById('previewImg').onclick = () => openOverlay('tiles');
}
/**
* Open overlay with specified content type - delegates to appropriate modules
* @param {string} type - Type of overlay content ('tiles', 'map', 'game')
*/
function openOverlay(type) {
const overlay = document.getElementById('overlay');
const overlayContent = document.getElementById('overlayContent');
overlayContent.innerHTML = '';
overlay.style.display = 'block';
if (type === 'tiles') {
// Delegate to tile picker module
if (typeof openTilePickerOverlay === 'function') {
openTilePickerOverlay();
} else {
overlayContent.innerHTML = '<p>Tile picker module not loaded</p>';
}
} else if (type === 'map') {
// Delegate to tilemap module
if (typeof openTilemapOverlay === 'function') {
openTilemapOverlay();
} else {
overlayContent.innerHTML = '<p>Tilemap module not loaded</p>';
}
} else if (type === 'game') {
// Delegate to game controller module
if (typeof openGameController === 'function') {
openGameController();
} else {
overlayContent.innerHTML = `
<div style="padding: 20px; text-align: center;">
<h2>Game Controller</h2>
<p>Game controller module not loaded</p>
<p>Check that object.js is loaded properly</p>
<p>Available functions: ${Object.getOwnPropertyNames(window).filter(name => name.includes('Game') || name.includes('game')).join(', ')}</p>
</div>
`;
}
}
}