// Debug alert for mobile debugging
if (typeof debugAlert === 'function') {
debugAlert('object.js loaded');
}
// Game object data structure
let gameObject = {
id: 'game_001',
name: 'My Tile Game',
version: '1.0.0',
rules: {
win: 'reach_exit',
lose: 'no_health',
score: 'collect'
},
physics: {
gravity: 300,
friction: 0.8,
bounce: 0.3
},
theme: 'retro-pixel',
uiLayout: 'minimal-hud',
progressionMode: 'linear',
settings: {
difficulty: 'normal',
mode: 'single'
}
};
/**
* Open the game controller overlay - main entry point called by files.js
*/
function openGameController() {
try {
const overlayContent = document.getElementById('overlayContent');
overlayContent.innerHTML = `
<div style="height: 100%; overflow: auto; padding: 10px;">
<div id="gameController"></div>
</div>
`;
renderCompleteGameController();
} catch (error) {
if (typeof debugAlert === 'function') {
debugAlert('Error in openGameController: ' + error.message);
}
}
}
/**
* Render complete game controller interface
*/
function renderCompleteGameController() {
const container = document.getElementById('gameController');
if (!container) return;
container.innerHTML = '';
try {
// Game Object Section
const gameSection = createGameObjectSection();
container.appendChild(gameSection);
// Tile Groups Section
const groupsSection = createTileGroupsSection();
container.appendChild(groupsSection);
// Tilemaps Section
const mapsSection = createTilemapsSection();
container.appendChild(mapsSection);
// Export section
const exportSection = createExportSection();
container.appendChild(exportSection);
} catch (error) {
container.innerHTML = '<div style="color: #f44; padding: 20px;">Error: ' + error.message + '</div>';
}
}
/**
* Create Game Object section with editable fields
*/
function createGameObjectSection() {
const section = document.createElement('div');
section.style.cssText = 'padding: 15px; background: #1a1a1a; border-radius: 8px; margin-bottom: 20px;';
section.innerHTML = `
<h3 style="color: #6cf; margin: 0 0 15px 0;">🎮 Game Object</h3>
<div style="margin-bottom: 15px;">
<strong style="color: #f44;">Mandatory:</strong>
<div style="margin: 8px 0; padding: 10px; background: #333; border-radius: 4px; color: #ccc; font-size: 12px;">
<div>ID: ${gameObject.id}</div>
<div>Name: ${gameObject.name}</div>
<div>Version: ${gameObject.version}</div>
</div>
</div>
<div style="margin-bottom: 15px;">
<strong style="color: #4a4;">Changeable:</strong>
<div style="margin: 8px 0; padding: 10px; background: #333; border-radius: 4px; color: #ccc; font-size: 12px;">
<div>Rules: ${JSON.stringify(gameObject.rules)}</div>
<div>Physics: ${JSON.stringify(gameObject.physics)}</div>
<div>Theme: ${gameObject.theme}</div>
</div>
</div>
<div>
<strong style="color: #888;">Optional:</strong>
<div style="margin: 8px 0; padding: 10px; background: #333; border-radius: 4px; color: #ccc; font-size: 12px;">
<div>UI Layout: ${gameObject.uiLayout}</div>
<div>Progression Mode: ${gameObject.progressionMode}</div>
<div>Settings: ${JSON.stringify(gameObject.settings)}</div>
</div>
</div>
`;
return section;
}
/**
* Create Tile Groups section
*/
function createTileGroupsSection() {
const section = document.createElement('div');
section.style.cssText = 'padding: 15px; background: #1a1a1a; border-radius: 8px; margin-bottom: 20px;';
const title = document.createElement('h3');
title.textContent = '🧱 Tile Groups';
title.style.cssText = 'color: #6cf; margin: 0 0 15px 0;';
section.appendChild(title);
try {
if (typeof groups !== 'undefined' && groups && groups.length > 0) {
groups.forEach((group, index) => {
const groupDiv = document.createElement('div');
groupDiv.style.cssText = 'margin-bottom: 15px; padding: 10px; background: #2a2a2a; border-radius: 6px; border-left: 4px solid #6cf;';
groupDiv.innerHTML = `
<h4 style="margin: 0 0 10px 0; color: #fff;">Group ${index + 1}: ${group.name || 'Unnamed'}</h4>
<div style="font-size: 12px; color: #ccc;">
<div>ID: group_${index + 1}</div>
<div>Atlas Key: ${group.url ? group.url.split('/').pop() : 'none'}</div>
<div>Tile Size: ${group.tiles && group.tiles[0] ? group.tiles[0].size : 32}px</div>
<div>Members: ${group.tiles ? group.tiles.length : 0} tiles</div>
</div>
`;
section.appendChild(groupDiv);
});
} else {
section.innerHTML += '<div style="color: #888; font-style: italic; padding: 10px;">No tile groups created yet. Use the Tile Picker to create groups.</div>';
}
} catch (error) {
section.innerHTML += '<div style="color: #f44; padding: 10px;">Error loading tile groups: ' + error.message + '</div>';
}
return section;
}
/**
* Create Tilemaps section
*/
function createTilemapsSection() {
const section = document.createElement('div');
section.style.cssText = 'padding: 15px; background: #1a1a1a; border-radius: 8px; margin-bottom: 20px;';
const title = document.createElement('h3');
title.textContent = '🗺️ Tile Maps';
title.style.cssText = 'color: #6cf; margin: 0 0 15px 0;';
section.appendChild(title);
try {
if (typeof tilemaps !== 'undefined' && tilemaps && tilemaps.length > 0) {
tilemaps.forEach((tilemap, index) => {
const tilemapDiv = document.createElement('div');
tilemapDiv.style.cssText = 'margin-bottom: 15px; padding: 10px; background: #2a2a2a; border-radius: 6px; border-left: 4px solid #6cf;';
const isActive = typeof currentTilemapIndex !== 'undefined' && currentTilemapIndex === index;
const totalTiles = tilemap.data ? tilemap.data.filter(t => t !== 0).length : 0;
const fillPercent = tilemap.width && tilemap.height ? ((totalTiles / (tilemap.width * tilemap.height)) * 100).toFixed(1) : '0.0';
tilemapDiv.innerHTML = `
<h4 style="margin: 0 0 10px 0; color: ${isActive ? '#6cf' : '#fff'};">${tilemap.name}${isActive ? ' (Active)' : ''}</h4>
<div style="font-size: 12px; color: #ccc;">
<div>ID: map_${tilemap.id}</div>
<div>Dimensions: ${tilemap.width} x ${tilemap.height}</div>
<div>Fill: ${fillPercent}% (${totalTiles} tiles)</div>
</div>
`;
section.appendChild(tilemapDiv);
});
} else {
section.innerHTML += '<div style="color: #888; font-style: italic; padding: 10px;">No tilemaps created yet. Use the Tilemap Editor to create maps.</div>';
}
} catch (error) {
section.innerHTML += '<div style="color: #f44; padding: 10px;">Error loading tilemaps: ' + error.message + '</div>';
}
return section;
}
/**
* Create export section
*/
function createExportSection() {
const section = document.createElement('div');
section.style.cssText = 'padding: 15px; background: #1a1a1a; border-radius: 8px;';
section.innerHTML = `
<h3 style="margin: 0 0 10px 0; color: #6cf;">📦 Export Project</h3>
<button onclick="exportCompleteProject()" style="background: #4a4; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px; margin-right: 10px;">
Export Complete Project
</button>
<button onclick="previewExport()" style="background: #44a; color: white; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-size: 14px;">
Preview Export
</button>
<div id="exportPreview" style="margin-top: 10px; display: none;"></div>
`;
return section;
}
/**
* Preview what will be exported
*/
function previewExport() {
const preview = document.getElementById('exportPreview');
if (!preview) return;
const stats = calculateProjectStats();
preview.innerHTML = `
<div style="background: #333; padding: 10px; border-radius: 4px; font-size: 12px; color: #ccc;">
<div><strong>Export Preview:</strong></div>
<div>• Game Object: ${gameObject.name} v${gameObject.version}</div>
<div>• Tile Groups: ${stats.totalGroups} groups, ${stats.totalTiles} tiles</div>
<div>• Tilemaps: ${stats.totalMaps} maps, ${stats.totalPlacedTiles} placed tiles</div>
<div>• Source Images: ${stats.sourceImages}</div>
<div>• Tile Sizes: ${stats.tileSizes.join(', ')}px</div>
</div>
`;
preview.style.display = 'block';
}
/**
* Export complete project data
*/
function exportCompleteProject() {
try {
const projectData = {
metadata: {
exportDate: new Date().toISOString(),
version: "1.0",
editor: "Tile Game Editor"
},
gameObject: gameObject,
tileGroups: typeof groups !== 'undefined' ? groups : [],
tilemaps: typeof tilemaps !== 'undefined' ? tilemaps : [],
statistics: calculateProjectStats()
};
const dataStr = JSON.stringify(projectData, null, 2);
if (typeof debugAlert === 'function') {
debugAlert('Project exported! ' + dataStr.length + ' characters');
}
} catch (error) {
if (typeof debugAlert === 'function') {
debugAlert('Export failed: ' + error.message);
}
}
}
/**
* Calculate project statistics
*/
function calculateProjectStats() {
const stats = {
totalGroups: 0,
totalTiles: 0,
totalMaps: 0,
totalPlacedTiles: 0,
sourceImages: 0,
tileSizes: []
};
try {
if (typeof groups !== 'undefined' && groups) {
stats.totalGroups = groups.length;
stats.totalTiles = groups.reduce((sum, group) => sum + (group.tiles ? group.tiles.length : 0), 0);
const uniqueUrls = new Set(groups.map(g => g.url).filter(url => url));
stats.sourceImages = uniqueUrls.size;
const sizes = new Set();
groups.forEach(group => {
if (group.tiles) {
group.tiles.forEach(tile => {
if (tile.size) sizes.add(tile.size);
});
}
});
stats.tileSizes = Array.from(sizes).sort((a, b) => a - b);
}
if (typeof tilemaps !== 'undefined' && tilemaps) {
stats.totalMaps = tilemaps.length;
stats.totalPlacedTiles = tilemaps.reduce((sum, map) => {
return sum + (map.data ? map.data.filter(t => t !== 0).length : 0);
}, 0);
}
} catch (error) {
// Silent fail for stats calculation
}
return stats;
}
// Debug alert for mobile debugging - success
if (typeof debugAlert === 'function') {
debugAlert('object.js loaded successfully');
}