<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tile Map Editor</title>
<link rel="stylesheet" href="styles.css" id="mainCSS">
</head>
<body>
<div class="topbar">
<button class="btn" data-target="files">📂</button>
<button class="btn" data-overlay="tiles">🧩</button>
<button class="btn" data-overlay="map">🗺️</button>
<button class="btn" data-overlay="movement">🏃</button>
<button class="btn" data-overlay="game">🎮</button>
</div>
<div id="files" class="section">
<h2>Files 📂</h2>
<div class="breadcrumb"></div>
<div class="scroll-x" id="fileList"></div>
<div id="preview"></div>
</div>
<!-- Shared Overlay -->
<div id="overlay">
<button id="overlayClose">✖️</button>
<div id="overlayContent"></div>
</div>
<script>
// Mobile debugging configuration
const DEBUG_MODE = true; // Set to false to disable alerts
const CACHE_BUSTER = Date.now();
// Debug alert function
function debugAlert(filename) {
if (DEBUG_MODE) {
alert(`Loading: ${filename}`);
}
}
// Function to load script with cache busting and debug alert
function loadScript(filename) {
return new Promise((resolve, reject) => {
debugAlert(filename);
const script = document.createElement('script');
script.src = `${filename}?v=${CACHE_BUSTER}`;
script.onload = () => {
console.log(`✓ Loaded: ${filename}`);
resolve();
};
script.onerror = () => {
console.error(`✗ Failed to load: ${filename}`);
if (DEBUG_MODE) {
alert(`ERROR loading: ${filename}`);
}
reject(new Error(`Failed to load ${filename}`));
};
document.head.appendChild(script);
});
}
/**
* Open overlay with specified content type - delegates to appropriate modules
* @param {string} type - Type of overlay content ('tiles', 'map', 'movement', '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 === 'movement') {
// Delegate to movement module
if (typeof openMovementOverlay === 'function') {
openMovementOverlay();
} else {
overlayContent.innerHTML = `
<div style="padding: 20px; text-align: center;">
<h2>Movement System 🏃</h2>
<p>Movement module not loaded</p>
<p>Create movement.js to handle character movement and physics</p>
</div>
`;
}
} 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>
`;
}
}
}
// Load all scripts in order
async function loadAllScripts() {
try {
debugAlert('index.html main script');
await loadScript('tilepicker.js'); // Second - tile picking logic
await loadScript('tilemap.js'); // Third - map editing logic
await loadScript('object.js'); // Fourth - project overview
await loadScript('files.js');
await loadScript('movement.js');
// Last - file browser and coordination
initializeApp();
} catch (error) {
console.error('Script loading failed:', error);
if (DEBUG_MODE) {
alert(`Script loading failed: ${error.message}`);
}
}
}
// Initialize the application
function initializeApp() {
debugAlert('Initializing app');
// Initialize button handling
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', () => {
if (btn.dataset.target) {
document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
document.querySelectorAll('.section').forEach(sec => sec.classList.remove('active'));
btn.classList.add('active');
document.getElementById(btn.dataset.target).classList.add('active');
if (btn.dataset.target === 'files') loadFiles('');
} else if (btn.dataset.overlay) {
openOverlay(btn.dataset.overlay);
}
});
});
// Click first button to start
document.querySelectorAll('.btn')[0].click();
// Initialize overlay close button
document.getElementById('overlayClose').onclick = () => {
document.getElementById('overlay').style.display = 'none';
};
if (DEBUG_MODE) {
alert('App initialized successfully!');
}
}
// Start loading when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
// Add cache buster to CSS
const cssLink = document.getElementById('mainCSS');
if (cssLink) {
cssLink.href = `styles.css?v=${CACHE_BUSTER}`;
debugAlert(`CSS cache busting applied: v${CACHE_BUSTER}`);
}
loadAllScripts();
});
</script>
</body>
</html>