<!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" style="display:none">
<button id="overlayClose">✖️</button>
<div id="overlayContent"></div>
</div>
<script>
// ===== Mobile debugging =====
const DEBUG_MODE = true; // Set to false to disable alerts
const CACHE_BUSTER = Date.now(); // Cache-bust CSS & JS
function debugAlert(msg) {
if (DEBUG_MODE) alert(msg);
}
// ===== Script loader with cache-busting =====
function loadScript(filename) {
return new Promise((resolve, reject) => {
debugAlert(`Loading: ${filename}`);
const s = document.createElement('script');
s.src = `${filename}?v=${CACHE_BUSTER}`;
s.onload = () => { console.log(`✓ Loaded: ${filename}`); resolve(); };
s.onerror = () => {
console.error(`✗ Failed to load: ${filename}`);
if (DEBUG_MODE) alert(`ERROR loading: ${filename}`);
reject(new Error(`Failed to load ${filename}`));
};
document.head.appendChild(s);
});
}
// ===== Overlay delegator =====
function openOverlay(type) {
const overlay = document.getElementById('overlay');
const overlayContent = document.getElementById('overlayContent');
overlayContent.innerHTML = '';
overlay.style.display = 'block';
if (type === 'tiles') {
if (typeof openTilePickerOverlay === 'function') openTilePickerOverlay();
else overlayContent.innerHTML = '<p>Tile picker module not loaded</p>';
} else if (type === 'map') {
if (typeof openTilemapOverlay === 'function') openTilemapOverlay();
else overlayContent.innerHTML = '<p>Tilemap module not loaded</p>';
} else if (type === 'movement') {
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') {
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(n => n.includes('Game') || n.includes('game')).join(', ')
}</p>
</div>`;
}
}
// ===== Load modules in order, then init =====
async function loadAllScripts() {
try {
debugAlert('index.html main script');
await loadScript('tilepicker.js');
await loadScript('tilemap.js');
await loadScript('object.js');
await loadScript('files.js'); // contains the local sheet tile
await loadScript('movement.js'); // optional
initializeApp();
} catch (err) {
console.error('Script loading failed:', err);
if (DEBUG_MODE) alert(`Script loading failed: ${err.message}`);
}
}
function initializeApp() {
debugAlert('Initializing app');
// Buttons
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' && typeof loadFiles === 'function') loadFiles('');
} else if (btn.dataset.overlay) {
openOverlay(btn.dataset.overlay);
}
});
});
// Start on Files
document.querySelectorAll('.btn')[0].click();
// Overlay close
document.getElementById('overlayClose').onclick = () => {
document.getElementById('overlay').style.display = 'none';
};
if (DEBUG_MODE) alert('App initialized successfully!');
}
// Cache-bust CSS & boot
document.addEventListener('DOMContentLoaded', () => {
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>