Spaces:

C50BARZ
/

nes-rom-editor

Running

File size: 34,309 Bytes

cbe02bc

[ <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NES ROM Editor Tool</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
    <style>
        .hex-cell {
            cursor: pointer;
            transition: all 0.2s;
        }
        .hex-cell:hover {
            background-color: rgba(59, 130, 246, 0.2);
        }
        .hex-cell.selected {
            background-color: rgba(59, 130, 246, 0.5);
            color: white;
        }
        .ascii-cell {
            font-family: monospace;
            cursor: pointer;
            transition: all 0.2s;
        }
        .ascii-cell:hover {
            background-color: rgba(59, 130, 246, 0.2);
        }
        .ascii-cell.selected {
            background-color: rgba(59, 130, 246, 0.5);
            color: white;
        }
        .hex-editor {
            height: 500px;
            overflow-y: auto;
            font-family: monospace;
        }
        /* Custom scrollbar */
        .hex-editor::-webkit-scrollbar {
            width: 8px;
        }
        .hex-editor::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        .hex-editor::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        .hex-editor::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <header class="mb-8 text-center">
            <h1 class="text-4xl font-bold text-blue-600 mb-2">
                <i class="fas fa-gamepad mr-2"></i> NES ROM Editor
            </h1>
            <p class="text-gray-600">Edit NES ROM files directly in your browser</p>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- File Upload Section -->
            <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-1">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fas fa-file-upload mr-2 text-blue-500"></i> ROM File
                </h2>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Upload NES ROM</label>
                    <div class="flex items-center justify-center w-full">
                        <label class="flex flex-col w-full h-32 border-2 border-dashed hover:border-blue-500 transition-all rounded-lg cursor-pointer">
                            <div class="flex flex-col items-center justify-center pt-7">
                                <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
                                <p class="text-sm text-gray-500">Drag & drop your ROM file here</p>
                                <p class="text-xs text-gray-400">or click to browse</p>
                            </div>
                            <input type="file" id="romFile" class="opacity-0" accept=".nes" />
                        </label>
                    </div>
                </div>
                
                <div id="fileInfo" class="hidden mt-4 p-3 bg-blue-50 rounded-lg">
                    <div class="flex justify-between mb-2">
                        <span class="font-medium">Filename:</span>
                        <span id="fileName" class="text-blue-600"></span>
                    </div>
                    <div class="flex justify-between mb-2">
                        <span class="font-medium">Size:</span>
                        <span id="fileSize" class="text-blue-600"></span>
                    </div>
                    <div class="flex justify-between">
                        <span class="font-medium">ROM Type:</span>
                        <span id="romType" class="text-blue-600"></span>
                    </div>
                </div>

                <div class="mt-6">
                    <button id="downloadBtn" disabled class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed">
                        <i class="fas fa-download mr-2"></i> Save Edited ROM
                    </button>
                </div>

                <div class="mt-4 border-t pt-4">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">Quick Actions</h3>
                    <button id="findTextBtn" disabled class="w-full mb-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition-colors disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed">
                        <i class="fas fa-search mr-2"></i> Find Text
                    </button>
                    <button id="exportPRGBtn" disabled class="w-full mb-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition-colors disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed">
                        <i class="fas fa-code mr-2"></i> Export PRG ROM
                    </button>
                    <button id="exportCHRBtn" disabled class="w-full bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-2 px-4 rounded transition-colors disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed">
                        <i class="fas fa-palette mr-2"></i> Export CHR ROM
                    </button>
                </div>
            </div>

            <!-- Hex Editor Section -->
            <div class="bg-white p-6 rounded-lg shadow-md lg:col-span-2">
                <h2 class="text-xl font-semibold mb-4 flex items-center">
                    <i class="fas fa-memory mr-2 text-blue-500"></i> Hex Editor
                </h2>
                <div class="flex justify-between items-center mb-4">
                    <div class="flex">
                        <button id="gotoBtn" disabled class="mr-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium py-1 px-3 rounded text-sm transition-colors disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed">
                            <i class="fas fa-location-arrow mr-1"></i> Go to...
                        </button>
                        <input type="text" id="gotoInput" placeholder="0x8000" disabled class="w-24 px-2 py-1 border rounded text-sm disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed">
                    </div>
                    <div class="text-sm text-gray-500">
                        <span id="selectionInfo">No selection</span>
                    </div>
                </div>

                <div class="hex-editor border rounded-lg p-2 bg-gray-50" id="hexEditorContainer">
                    <div class="text-center text-gray-400 py-20">
                        <i class="fas fa-file-alt text-4xl mb-4"></i>
                        <p>Upload an NES ROM file to begin editing</p>
                    </div>
                </div>

                <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Selected Value (Hex)</label>
                        <input type="text" id="hexValueInput" disabled class="w-full px-3 py-2 border rounded bg-gray-100 text-gray-400 cursor-not-allowed">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Selected Value (Dec)</label>
                        <input type="text" id="decValueInput" disabled class="w-full px-3 py-2 border rounded bg-gray-100 text-gray-400 cursor-not-allowed">
                    </div>
                </div>
            </div>
        </div>

        <!-- Text Editor Section -->
        <div class="bg-white p-6 rounded-lg shadow-md mt-6">
            <h2 class="text-xl font-semibold mb-4 flex items-center">
                <i class="fas fa-font mr-2 text-blue-500"></i> Text Editor
            </h2>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">String to Find</label>
                <div class="flex">
                    <input type="text" id="searchText" disabled class="flex-grow px-3 py-2 border rounded-l disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed" placeholder="Enter text to search">
                    <button id="searchBtn" disabled class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed">
                        <i class="fas fa-search"></i>
                    </button>
                </div>
            </div>
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Replacement Text</label>
                <div class="flex">
                    <input type="text" id="replaceText" disabled class="flex-grow px-3 py-2 border rounded-l disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed" placeholder="Enter replacement text">
                    <button id="replaceBtn" disabled class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed">
                        <i class="fas fa-exchange-alt"></i>
                    </button>
                </div>
            </div>
            <div class="border rounded-lg p-3 bg-gray-50 h-40 overflow-auto" id="textPreview">
                <div class="text-center text-gray-400 py-10">
                    <i class="fas fa-file-alt text-2xl mb-2"></i>
                    <p>No ROM loaded to display text</p>
                </div>
            </div>
        </div>

        <!-- Status Bar -->
        <div class="bg-gray-800 text-white p-2 rounded-b-lg text-sm mt-6 flex justify-between items-center">
            <div class="flex items-center">
                <i class="fas fa-info-circle mr-2 text-blue-300"></i>
                <span id="statusMessage">Ready to upload NES ROM file</span>
            </div>
            <div id="loadingSpinner" class="hidden">
                <i class="fas fa-spinner fa-spin mr-2"></i>
                <span>Processing...</span>
            </div>
        </div>
    </div>

    <script>
        // Global variables
        let romData = null;
        let selectedOffset = null;
        let searchResults = [];

        // DOM elements
        const romFileInput = document.getElementById('romFile');
        const downloadBtn = document.getElementById('downloadBtn');
        const hexEditorContainer = document.getElementById('hexEditorContainer');
        const fileInfo = document.getElementById('fileInfo');
        const fileName = document.getElementById('fileName');
        const fileSize = document.getElementById('fileSize');
        const romType = document.getElementById('romType');
        const gotoBtn = document.getElementById('gotoBtn');
        const gotoInput = document.getElementById('gotoInput');
        const selectionInfo = document.getElementById('selectionInfo');
        const hexValueInput = document.getElementById('hexValueInput');
        const decValueInput = document.getElementById('decValueInput');
        const searchText = document.getElementById('searchText');
        const searchBtn = document.getElementById('searchBtn');
        const replaceText = document.getElementById('replaceText');
        const replaceBtn = document.getElementById('replaceBtn');
        const textPreview = document.getElementById('textPreview');
        const statusMessage = document.getElementById('statusMessage');
        const loadingSpinner = document.getElementById('loadingSpinner');
        const findTextBtn = document.getElementById('findTextBtn');
        const exportPRGBtn = document.getElementById('exportPRGBtn');
        const exportCHRBtn = document.getElementById('exportCHRBtn');

        // Helper functions
        function formatHex(value, length) {
            return value.toString(16).toUpperCase().padStart(length, '0');
        }

        function parseHex(hexString) {
            return parseInt(hexString, 16);
        }

        function formatFileSize(bytes) {
            if (bytes < 1024) return bytes + ' bytes';
            else if (bytes < 1048576) return (bytes / 1024).toFixed(2) + ' KB';
            else return (bytes / 1048576).toFixed(2) + ' MB';
        }

        function updateStatus(message) {
            statusMessage.textContent = message;
        }

        function showLoading(show) {
            if (show) {
                loadingSpinner.classList.remove('hidden');
            } else {
                loadingSpinner.classList.add('hidden');
            }
        }

        function enableControls(enable) {
            const controls = [
                downloadBtn, gotoBtn, gotoInput, searchText, 
                searchBtn, replaceText, replaceBtn, findTextBtn,
                exportPRGBtn, exportCHRBtn
            ];
            
            controls.forEach(control => {
                control.disabled = !enable;
            });
            
            if (enable) {
                hexValueInput.disabled = false;
                decValueInput.disabled = false;
                hexValueInput.classList.remove('bg-gray-100', 'text-gray-400', 'cursor-not-allowed');
                decValueInput.classList.remove('bg-gray-100', 'text-gray-400', 'cursor-not-allowed');
            } else {
                hexValueInput.disabled = true;
                decValueInput.disabled = true;
                hexValueInput.classList.add('bg-gray-100', 'text-gray-400', 'cursor-not-allowed');
                decValueInput.classList.add('bg-gray-100', 'text-gray-400', 'cursor-not-allowed');
            }
        }

        function renderHexEditor(data) {
            if (!data) return;
            
            showLoading(true);
            updateStatus("Rendering hex editor...");
            
            // Start rendering in chunks to avoid freezing the UI
            setTimeout(() => {
                const chunkSize = 4096; // bytes per chunk
                let offset = 0;
                
                hexEditorContainer.innerHTML = '';
                
                // Create header
                const header = document.createElement('div');
                header.className = 'flex text-sm font-mono mb-1 sticky top-0 bg-gray-100 z-10';
                
                // Address header
                const addrHeader = document.createElement('div');
                addrHeader.className = 'w-20 font-semibold text-gray-600';
                addrHeader.textContent = 'Offset';
                header.appendChild(addrHeader);
                
                // Hex values header
                for (let i = 0; i < 16; i++) {
                    const hexHeader = document.createElement('div');
                    hexHeader.className = 'w-6 text-center font-semibold text-gray-600';
                    hexHeader.textContent = formatHex(i, 2);
                    header.appendChild(hexHeader);
                }
                
                // ASCII header
                const asciiHeader = document.createElement('div');
                asciiHeader.className = 'w-64 ml-4 font-semibold text-gray-600';
                asciiHeader.textContent = 'ASCII';
                header.appendChild(asciiHeader);
                
                hexEditorContainer.appendChild(header);
                
                // Render chunks
                function renderChunk() {
                    const fragment = document.createDocumentFragment();
                    const end = Math.min(offset + chunkSize, data.byteLength);
                    
                    for (; offset < end; offset += 16) {
                        const row = document.createElement('div');
                        row.className = 'flex text-sm font-mono hover:bg-gray-50';
                        
                        // Address
                        const addrCell = document.createElement('div');
                        addrCell.className = 'w-20 text-gray-500';
                        addrCell.textContent = formatHex(offset, 6);
                        row.appendChild(addrCell);
                        
                        // Hex values
                        const hexRow = document.createElement('div');
                        hexRow.className = 'flex';
                        
                        for (let i = 0; i < 16; i++) {
                            const pos = offset + i;
                            if (pos >= data.byteLength) break;
                            
                            const value = data[pos];
                            const hexCell = document.createElement('div');
                            hexCell.className = 'hex-cell w-6 text-center';
                            hexCell.textContent = formatHex(value, 2);
                            hexCell.dataset.offset = pos;
                            
                            hexCell.addEventListener('click', () => {
                                selectCell(pos);
                            });
                            
                            hexRow.appendChild(hexCell);
                        }
                        
                        row.appendChild(hexRow);
                        
                        // ASCII representation
                        const asciiRow = document.createElement('div');
                        asciiRow.className = 'flex ml-4';
                        
                        for (let i = 0; i < 16; i++) {
                            const pos = offset + i;
                            if (pos >= data.byteLength) break;
                            
                            const value = data[pos];
                            let char = value >= 32 && value <= 126 ? String.fromCharCode(value) : '.';
                            
                            const asciiCell = document.createElement('div');
                            asciiCell.className = 'ascii-cell w-4 text-center';
                            asciiCell.textContent = char;
                            asciiCell.dataset.offset = pos;
                            
                            asciiCell.addEventListener('click', () => {
                                selectCell(pos);
                            });
                            
                            asciiRow.appendChild(asciiCell);
                        }
                        
                        row.appendChild(asciiRow);
                        fragment.appendChild(row);
                    }
                    
                    hexEditorContainer.appendChild(fragment);
                    
                    if (offset < data.byteLength) {
                        // Continue rendering in next animation frame
                        requestAnimationFrame(renderChunk);
                    } else {
                        showLoading(false);
                        updateStatus("ROM loaded successfully");
                        
                        // Analyze ROM header
                        analyzeRomHeader(data);
                        
                        // Update text preview
                        updateTextPreview(data);
                    }
                }
                
                requestAnimationFrame(renderChunk);
            }, 100);
        }

        function selectCell(offset) {
            // Clear previous selection
            const prevSelected = document.querySelectorAll('.hex-cell.selected, .ascii-cell.selected');
            prevSelected.forEach(el => el.classList.remove('selected'));
            
            // Find and highlight new selection
            const hexCells = document.querySelectorAll(`.hex-cell[data-offset="${offset}"]`);
            const asciiCells = document.querySelectorAll(`.ascii-cell[data-offset="${offset}"]`);
            
            hexCells.forEach(el => el.classList.add('selected'));
            asciiCells.forEach(el => el.classList.add('selected'));
            
            // Scroll into view
            if (hexCells.length > 0) {
                hexCells[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
            
            // Update selection info
            selectedOffset = offset;
            selectionInfo.textContent = `Selected: 0x${formatHex(offset, 6)}`;
            
            // Update value inputs
            const value = romData[offset];
            hexValueInput.value = formatHex(value, 2);
            decValueInput.value = value.toString();
            
            // Enable editing
            hexValueInput.addEventListener('change', handleHexValueChange);
            decValueInput.addEventListener('change', handleDecValueChange);
        }

        function handleHexValueChange(e) {
            const hexValue = e.target.value.trim();
            if (!hexValue) return;
            
            const intValue = parseInt(hexValue, 16);
            if (isNaN(intValue) || intValue < 0 || intValue > 255) {
                alert('Please enter a valid hex value (00-FF)');
                e.target.value = formatHex(romData[selectedOffset], 2);
                return;
            }
            
            // Update ROM data
            romData[selectedOffset] = intValue;
            
            // Update dec value
            decValueInput.value = intValue.toString();
            
            // Update UI
            const hexCells = document.querySelectorAll(`.hex-cell[data-offset="${selectedOffset}"]`);
            const asciiCells = document.querySelectorAll(`.ascii-cell[data-offset="${selectedOffset}"]`);
            
            hexCells.forEach(el => el.textContent = formatHex(intValue, 2));
            asciiCells.forEach(el => el.textContent = intValue >= 32 && intValue <= 126 ? String.fromCharCode(intValue) : '.');
            
            updateStatus(`Changed byte at 0x${formatHex(selectedOffset, 6)} to 0x${formatHex(intValue, 2)}`);
        }

        function handleDecValueChange(e) {
            const decValue = e.target.value.trim();
            if (!decValue) return;
            
            const intValue = parseInt(decValue, 10);
            if (isNaN(intValue) || intValue < 0 || intValue > 255) {
                alert('Please enter a valid decimal value (0-255)');
                e.target.value = romData[selectedOffset].toString();
                return;
            }
            
            // Update ROM data
            romData[selectedOffset] = intValue;
            
            // Update hex value
            hexValueInput.value = formatHex(intValue, 2);
            
            // Update UI
            const hexCells = document.querySelectorAll(`.hex-cell[data-offset="${selectedOffset}"]`);
            const asciiCells = document.querySelectorAll(`.ascii-cell[data-offset="${selectedOffset}"]`);
            
            hexCells.forEach(el => el.textContent = formatHex(intValue, 2));
            asciiCells.forEach(el => el.textContent = intValue >= 32 && intValue <= 126 ? String.fromCharCode(intValue) : '.');
            
            updateStatus(`Changed byte at 0x${formatHex(selectedOffset, 6)} to ${intValue}`);
        }

        function analyzeRomHeader(data) {
            if (data.byteLength < 16) return;
            
            // Check NES header
            if (data[0] !== 0x4E || data[1] !== 0x45 || data[2] !== 0x53 || data[3] !== 0x1A) {
                updateStatus("Warning: File may not be a valid NES ROM (missing header magic)", 'warning');
                return;
            }
            
            // Get ROM info
            const prgSize = data[4] * 16; // 16KB units
            const chrSize = data[5] * 8;   // 8KB units
            const flags6 = data[6];
            const flags7 = data[7];
            
            // Determine mapper number
            const mapper = (flags6 >> 4) | (flags7 & 0xF0);
            
            // Determine mirroring type
            const mirroring = (flags6 & 0x1) ? 'Vertical' : 'Horizontal';
            const fourScreen = (flags6 & 0x8) ? ' (Four-screen)' : '';
            
            // Determine console type
            const nes2Format = (flags7 & 0x0C) === 0x08;
            const consoleType = nes2Format ? 'NES 2.0' : 'iNES';
            
            // Update info display
            fileInfo.classList.remove('hidden');
            romType.textContent = `${consoleType} ROM - Mapper ${mapper}`;
            
            updateStatus(`Analyzed ROM: ${prgSize}KB PRG, ${chrSize}KB CHR, ${mirroring}${fourScreen} mirroring`);
        }

        function updateTextPreview(data) {
            if (!data) return;
            
            // Extract text from ROM (simple ASCII)
            let text = '';
            let inString = false;
            
            for (let i = 16; i < data.byteLength; i++) { // Skip header
                const byte = data[i];
                
                if (byte >= 32 && byte <= 126) {
                    if (!inString) {
                        text += '\n'; // New line for new string
                        inString = true;
                    }
                    text += String.fromCharCode(byte);
                } else {
                    inString = false;
                }
            }
            
            // Display text
            textPreview.innerHTML = '';
            const pre = document.createElement('pre');
            pre.className = 'whitespace-pre-wrap font-mono text-sm';
            pre.textContent = text.trim();
            textPreview.appendChild(pre);
        }

        function searchTextInRom() {
            const searchString = searchText.value.trim();
            if (!searchString || !romData) return;
            
            showLoading(true);
            updateStatus(`Searching for "${searchString}"...`);
            
            searchResults = [];
            const searchBytes = [];
            
            // Convert search string to bytes
            for (let i = 0; i < searchString.length; i++) {
                searchBytes.push(searchString.charCodeAt(i));
            }
            
            // Search through ROM data
            for (let i = 0; i <= romData.byteLength - searchBytes.length; i++) {
                let match = true;
                
                for (let j = 0; j < searchBytes.length; j++) {
                    if (romData[i + j] !== searchBytes[j]) {
                        match = false;
                        break;
                    }
                }
                
                if (match) {
                    searchResults.push(i);
                }
            }
            
            showLoading(false);
            
            if (searchResults.length > 0) {
                // Highlight first match
                selectCell(searchResults[0]);
                
                updateStatus(`Found ${searchResults.length} occurrence(s) of "${searchString}"`);
            } else {
                updateStatus(`Text "${searchString}" not found in ROM`);
            }
        }

        function replaceTextInRom() {
            const searchStr = searchText.value.trim();
            const replaceStr = replaceText.value.trim();
            
            if (!searchStr || !replaceStr || searchResults.length === 0 || !romData) return;
            
            if (searchStr.length !== replaceStr.length) {
                alert('Search and replace strings must be the same length');
                return;
            }
            
            showLoading(true);
            updateStatus(`Replacing ${searchResults.length} occurrence(s)...`);
            
            const replaceBytes = [];
            
            // Convert replace string to bytes
            for (let i = 0; i < replaceStr.length; i++) {
                replaceBytes.push(replaceStr.charCodeAt(i));
            }
            
            // Perform replacements
            searchResults.forEach(offset => {
                for (let i = 0; i < replaceBytes.length; i++) {
                    romData[offset + i] = replaceBytes[i];
                }
            });
            
            // Update UI
            setTimeout(() => {
                renderHexEditor(romData);
                updateTextPreview(romData);
                showLoading(false);
                updateStatus(`Replaced ${searchResults.length} occurrence(s) of "${searchStr}" with "${replaceStr}"`);
            }, 100);
        }

        function exportPRG() {
            if (!romData || romData.byteLength < 16) return;
            
            const prgSize = romData[4] * 16384; // 16KB pages
            if (prgSize <= 0) return;
            
            const prgStart = 16; // Skip header
            const prgEnd = prgStart + prgSize;
            
            const prgData = new Uint8Array(romData.slice(prgStart, prgEnd));
            downloadData(prgData, 'prg_rom.bin');
            
            updateStatus(`Exported ${formatFileSize(prgSize)} PRG ROM`);
        }

        function exportCHR() {
            if (!romData || romData.byteLength < 16) return;
            
            const prgSize = romData[4] * 16384; // 16KB pages
            const chrSize = romData[5] * 8192;   // 8KB pages
            if (chrSize <= 0) return;
            
            const chrStart = 16 + prgSize; // Skip header and PRG ROM
            const chrEnd = chrStart + chrSize;
            
            const chrData = new Uint8Array(romData.slice(chrStart, chrEnd));
            downloadData(chrData, 'chr_rom.bin');
            
            updateStatus(`Exported ${formatFileSize(chrSize)} CHR ROM`);
        }

        function downloadData(data, filename) {
            const blob = new Blob([data], { type: 'application/octet-stream' });
            const url = URL.createObjectURL(blob);
            
            const a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            
            setTimeout(() => {
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }, 100);
        }

        // Event listeners
        romFileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            
            showLoading(true);
            updateStatus(`Loading ${file.name}...`);
            
            const reader = new FileReader();
            
            reader.onload = function(e) {
                try {
                    const arrayBuffer = e.target.result;
                    romData = new Uint8Array(arrayBuffer);
                    
                    // Update file info
                    fileName.textContent = file.name;
                    fileSize.textContent = formatFileSize(file.size);
                    
                    // Render editor
                    renderHexEditor(romData);
                    enableControls(true);
                } catch (err) {
                    console.error(err);
                    updateStatus('Error loading ROM file', 'error');
                    showLoading(false);
                }
            };
            
            reader.onerror = function() {
                updateStatus('Error reading file', 'error');
                showLoading(false);
            };
            
            reader.readAsArrayBuffer(file);
        });

        downloadBtn.addEventListener('click', function() {
            if (!romData) return;
            
            showLoading(true);
            updateStatus("Preparing download...");
            
            setTimeout(() => {
                // Get filename from input or use default
                let filename = fileName.textContent || 'edited_rom.nes';
                
                // Ensure .nes extension
                if (!filename.toLowerCase().endsWith('.nes')) {
                    filename += '.nes';
                }
                
                downloadData(romData, filename);
                showLoading(false);
                updateStatus(`Downloaded edited ROM as ${filename}`);
            }, 100);
        });

        searchBtn.addEventListener('click', searchTextInRom);
        replaceBtn.addEventListener('click', replaceTextInRom);
        
        findTextBtn.addEventListener('click', function() {
            searchText.focus();
        });
        
        exportPRGBtn.addEventListener('click', exportPRG);
        exportCHRBtn.addEventListener('click', exportCHR);
        
        gotoBtn.addEventListener('click', function() {
            const offsetStr = gotoInput.value.trim();
            if (!offsetStr || !romData) return;
            
            let offset;
            
            if (offsetStr.startsWith('0x')) {
                offset = parseHex(offsetStr.substring(2));
            } else {
                offset = parseInt(offsetStr, 10);
            }
            
            if (isNaN(offset) || offset < 0 || offset >= romData.byteLength) {
                alert('Invalid offset');
                return;
            }
            
            selectCell(offset);
        });
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=C50BARZ/nes-rom-editor" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>