<!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="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);
});
}
// Load all scripts in order
async function loadAllScripts() {
try {
debugAlert('index.html main script');
await loadScript('object.js');
await loadScript('tilemap.js');
await loadScript('tilepicker.js');
await loadScript('files.js');
// Initialize the application after all scripts are loaded
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>