// Debug alert for mobile debugging
if (typeof debugAlert === 'function') {
debugAlert('object.js loaded');
}
// Simple game object
let gameObject = {
id: 'game_001',
name: 'My Tile Game',
version: '1.0.0'
};
function openGameController() {
const overlayContent = document.getElementById('overlayContent');
overlayContent.innerHTML = `
<div style="height: 100%; overflow: auto; padding: 10px;">
<div id="gameController"></div>
</div>
`;
renderGameController();
}
function renderGameController() {
const container = document.getElementById('gameController');
container.innerHTML = `
<div style="padding: 15px; background: #1a1a1a; border-radius: 8px; margin-bottom: 20px;">
<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>Physics Engine:
<select onchange="updateSetting('engine', this.value)" style="background: #222; color: #fff; border: 1px solid #555; padding: 2px;">
<option value="arcade">arcade</option>
<option value="matter">matter</option>
</select>
</div>
</div>
</div>
<div>
<strong style="color: #888;">Stats:</strong>
<div style="margin: 8px 0; padding: 10px; background: #333; border-radius: 4px; color: #ccc; font-size: 12px;">
<div>Groups: ${typeof groups !== 'undefined' ? groups.length : 0}</div>
<div>Tilemaps: ${typeof tilemaps !== 'undefined' ? tilemaps.length : 0}</div>
</div>
</div>
</div>
<div id="tileGroupsContainer"></div>
<div id="tilemapsContainer"></div>
`;
// Add tile groups and tilemaps using DOM manipulation
addTileGroupsSection();
addTilemapsSection();
}
function addTileGroupsSection() {
const container = document.getElementById('tileGroupsContainer');
if (!container) return;
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);
if (typeof groups === 'undefined' || !groups || groups.length === 0) {
const noGroups = document.createElement('div');
noGroups.textContent = 'No tile groups created yet. Use the Tile Picker to create groups.';
noGroups.style.cssText = 'color: #888; font-style: italic; padding: 10px;';
section.appendChild(noGroups);
} else {
groups.forEach((group, index) => {
const groupDiv = document.createElement('div');
groupDiv.style.cssText = 'margin-bottom: 20px; padding: 15px; background: #2a2a2a; border-radius: 6px; border-left: 4px solid #6cf;';
const groupTitle = document.createElement('h4');
groupTitle.textContent = 'Group ' + (index + 1) + ': ' + (group.name || 'Unnamed');
groupTitle.style.cssText = 'margin: 0 0 10px 0; color: #fff;';
groupDiv.appendChild(groupTitle);
const info = document.createElement('div');
info.style.cssText = 'font-size: 12px; color: #ccc; margin-bottom: 10px;';
info.innerHTML = 'ID: group_' + (index + 1) + '<br>' +
'Atlas Key: ' + (group.url ? group.url.split('/').pop() : 'none') + '<br>' +
'Tile Size: ' + (group.tiles && group.tiles[0] ? group.tiles[0].size : 32) + 'px<br>' +
'Members: ' + (group.tiles ? group.tiles.length : 0) + ' tiles';
groupDiv.appendChild(info);
// Add tile previews if tiles exist
if (group.tiles && group.tiles.length > 0) {
addTilePreviewsToGroup(groupDiv, group);
}
section.appendChild(groupDiv);
});
}
container.appendChild(section);
}
function addTilePreviewsToGroup(groupDiv, group) {
const previewContainer = document.createElement('div');
previewContainer.style.cssText = 'display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px;';
group.tiles.forEach(tile => {
const tileWrapper = document.createElement('div');
tileWrapper.style.cssText = 'position: relative; display: inline-block;';
// Create canvas for tile display
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
canvas.style.cssText = 'border: 2px solid #666; border-radius: 4px; background: #000;';
// Draw the tile
const ctx = canvas.getContext('2d');
const tempCanvas = document.createElement('canvas');
tempCanvas.width = tile.size;
tempCanvas.height = tile.size;
const tempCtx = tempCanvas.getContext('2d');
tempCtx.putImageData(tile.data, 0, 0);
// Scale to 32x32 for preview
ctx.drawImage(tempCanvas, 0, 0, tile.size, tile.size, 0, 0, 32, 32);
// Create ID badge (bottom-right)
const idBadge = document.createElement('span');
idBadge.textContent = tile.uniqueId;
idBadge.style.cssText = 'position: absolute; bottom: -2px; right: -2px; background: rgba(0,0,0,0.8); color: #fff; font-size: 8px; padding: 1px 3px; border-radius: 2px; border: 1px solid #6cf;';
// Create linear index badge (top-left)
const tileX = Math.floor(tile.sourceX / tile.size);
const tileY = Math.floor(tile.sourceY / tile.size);
const tilesPerRow = 8; // Default assumption
const linearIndex = tileY * tilesPerRow + tileX;
const indexBadge = document.createElement('span');
indexBadge.textContent = linearIndex.toString();
indexBadge.style.cssText = 'position: absolute; top: -2px; left: -2px; background: rgba(0,0,0,0.8); color: #fff; font-size: 7px; padding: 1px 2px; border-radius: 2px; border: 1px solid #4a4;';
// Assemble the tile preview
tileWrapper.appendChild(canvas);
tileWrapper.appendChild(idBadge);
tileWrapper.appendChild(indexBadge);
previewContainer.appendChild(tileWrapper);
});
groupDiv.appendChild(previewContainer);
}
function addTilemapsSection() {
const container = document.getElementById('tilemapsContainer');
if (!container) return;
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);
if (typeof tilemaps === 'undefined' || !tilemaps || tilemaps.length === 0) {
const noMaps = document.createElement('div');
noMaps.textContent = 'No tilemaps created yet. Use the Tilemap Editor to create maps.';
noMaps.style.cssText = 'color: #888; font-style: italic; padding: 10px;';
section.appendChild(noMaps);
} else {
tilemaps.forEach((tilemap, index) => {
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';
const mapDiv = document.createElement('div');
mapDiv.style.cssText = 'margin-bottom: 20px; padding: 15px; background: #2a2a2a; border-radius: 6px; border-left: 4px solid #6cf;';
const mapTitle = document.createElement('h4');
mapTitle.textContent = tilemap.name + (isActive ? ' (Active)' : '');
mapTitle.style.cssText = 'margin: 0 0 10px 0; color: ' + (isActive ? '#6cf' : '#fff') + ';';
mapDiv.appendChild(mapTitle);
const info = document.createElement('div');
info.style.cssText = 'font-size: 12px; color: #ccc; margin-bottom: 10px;';
info.innerHTML = 'ID: map_' + tilemap.id + '<br>' +
'Dimensions: ' + tilemap.width + ' x ' + tilemap.height + '<br>' +
'Fill: ' + fillPercent + '% (' + totalTiles + ' tiles)';
mapDiv.appendChild(info);
// Add Phaser array if data exists
if (tilemap.data && tilemap.data.length > 0) {
addPhaserArrayToMap(mapDiv, tilemap, index);
}
section.appendChild(mapDiv);
});
}
container.appendChild(section);
}
function addPhaserArrayToMap(mapDiv, tilemap, mapIndex) {
const arrayContainer = document.createElement('div');
const arrayLabel = document.createElement('strong');
arrayLabel.textContent = 'Phaser 2D Array:';
arrayLabel.style.cssText = 'color: #6cf;';
arrayContainer.appendChild(arrayLabel);
const arrayDisplay = document.createElement('div');
arrayDisplay.style.cssText = 'background: #1a1a1a; padding: 10px; border-radius: 4px; margin-top: 5px; font-family: "Courier New", monospace; font-size: 10px; color: #ccc; overflow-x: auto; max-height: 150px; overflow-y: auto;';
// Build the array text
let arrayText = '[\n';
for (let y = 0; y < tilemap.height; y++) {
let row = ' [';
for (let x = 0; x < tilemap.width; x++) {
const dataIndex = y * tilemap.width + x;
const tileId = tilemap.data[dataIndex] || 0;
row += tileId.toString().padStart(3, ' ');
if (x < tilemap.width - 1) row += ',';
}
row += ']';
if (y < tilemap.height - 1) row += ',';
arrayText += row + '\n';
}
arrayText += ']';
// Display the formatted array
const lines = arrayText.split('\n');
lines.forEach(line => {
const lineDiv = document.createElement('div');
lineDiv.textContent = line;
lineDiv.style.cssText = 'line-height: 1.2;';
arrayDisplay.appendChild(lineDiv);
});
arrayContainer.appendChild(arrayDisplay);
// Add copy button
const copyBtn = document.createElement('button');
copyBtn.textContent = 'Copy Array';
copyBtn.style.cssText = 'margin-top: 5px; background: #444; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 10px;';
copyBtn.onclick = function() {
copyTilemapArray(arrayText, mapIndex);
};
arrayContainer.appendChild(copyBtn);
mapDiv.appendChild(arrayContainer);
}
function copyTilemapArray(arrayText, mapIndex) {
try {
navigator.clipboard.writeText(arrayText).then(function() {
if (typeof debugAlert === 'function') {
debugAlert('Array copied to clipboard!');
}
}).catch(function() {
if (typeof debugAlert === 'function') {
debugAlert('Array preview: ' + arrayText.substring(0, 50) + '...');
}
});
} catch (error) {
if (typeof debugAlert === 'function') {
debugAlert('Copy failed: ' + error.message);
}
}
}
function updateSetting(key, value) {
if (typeof debugAlert === 'function') {
debugAlert('Updated ' + key + ' = ' + value);
}
}
if (typeof debugAlert === 'function') {
debugAlert('object.js loaded successfully');
}