app.js

(function () {
    'use strict';

    // example code
    const DEFAULT_CODE = `#include <stdio.h>

int main() {
    int a = 5;
    int b = 10;
    int c = a + b;        // used
    int d = a * b;        // DEAD: d is never used
    int e = c + 1;        // used in printf
    int f = 20;           // DEAD: f is never used
    int g = a - b;        // DEAD: g is never used

    if (c > 10) {
        int h = c * 2;    // used in printf
        printf("%d", h);
    } else {
        int k = 100;      // DEAD: k is never used
        printf("%d", e);
    }

    int i = 0;
    while (i < 3) {
        int temp = i * 2; // used in printf
        printf("%d", temp);
        i = i + 1;
    }

    return 0;
}`;

    // state
    let currentTheme = 'blush';
    let lastResult = null;

    // DOM Elements
    const $ = (sel) => document.querySelector(sel);
    const $$ = (sel) => document.querySelectorAll(sel);

    // nitialization
    document.addEventListener('DOMContentLoaded', () => {
        initTheme();
        initTabs();
        initActions();
        $('#code-input').value = DEFAULT_CODE;
    });

    // theme management
    function initTheme() {
        const saved = localStorage.getItem('compiler-theme') || 'blush';
        setTheme(saved);

        $$('.theme-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                setTheme(btn.dataset.theme);
            });
        });
    }

    function setTheme(theme) {
        currentTheme = theme;
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('compiler-theme', theme);
        $$('.theme-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.theme === theme);
        });
    }

    // tab management
    function initTabs() {
        $$('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                const target = tab.dataset.tab;
                $$('.tab').forEach(t => t.classList.remove('active'));
                $$('.tab-content').forEach(c => c.classList.remove('active'));
                tab.classList.add('active');
                $(`#${target}`).classList.add('active');
            });
        });
    }

    // actions
    function initActions() {
        $('#compile-btn').addEventListener('click', runPipeline);

        // allow Ctrl+Enter to compile
        $('#code-input').addEventListener('keydown', (e) => {
            if (e.ctrlKey && e.key === 'Enter') {
                e.preventDefault();
                runPipeline();
            }
            // tab key inserts tab
            if (e.key === 'Tab') {
                e.preventDefault();
                const ta = e.target;
                const start = ta.selectionStart;
                const end = ta.selectionEnd;
                ta.value = ta.value.substring(0, start) + '    ' + ta.value.substring(end);
                ta.selectionStart = ta.selectionEnd = start + 4;
            }
        });
    }

    // pipeline execution
    function runPipeline() {
        const source = $('#code-input').value.trim();
        if (!source) {
            showError('Please enter some C code to compile.');
            return;
        }

        hideError();
        showProcessing(true);

        // use setTimeout to allow UI to update
        setTimeout(() => {
            try {
                // step 1: lex
                const lexer = new Lexer(source);
                const tokens = lexer.tokenize();

                // step 2: parse
                const parser = new Parser(tokens);
                const ast = parser.parseProgram();

                // step 3: generate 3AC
                const tacGen = new TACGenerator();
                const originalTAC = tacGen.generate(ast);
                const originalLines = TACGenerator.formatInstructions(originalTAC);

                // step 4: optimize (dead dode elimination)
                const optimizer = new Optimizer();
                const optimizedTAC = optimizer.optimize(JSON.parse(JSON.stringify(originalTAC)));
                const optimizedLines = TACGenerator.formatInstructions(optimizedTAC);

                // find dead lines by comparing
                const deadLineIndices = findDeadLines(originalTAC, optimizedTAC);

                // step 5: reconstruct (if enabled)
                let reconstructedCode = '';
                const showReconstruction = $('#reconstruct-toggle').checked;
                if (showReconstruction) {
                    const reconstructor = new Reconstructor();
                    reconstructedCode = reconstructor.reconstruct(optimizedTAC);
                }

                // store result
                lastResult = {
                    originalLines,
                    optimizedLines,
                    deadLineIndices,
                    reconstructedCode,
                    stats: {
                        originalCount: originalLines.length,
                        optimizedCount: optimizedLines.length,
                        eliminated: originalLines.length - optimizedLines.length
                    }
                };

                // render
                renderOutput();
                showProcessing(false);

            } catch (e) {
                showProcessing(false);
                showError(e.message);
            }
        }, 50);
    }

    function findDeadLines(original, optimized) {
        // create a signature for each optimized instruction
        const optimizedSigs = new Set();
        const optimizedUsed = [];

        for (const instr of optimized) {
            optimizedSigs.add(JSON.stringify(instr));
        }

        // walk through original, marking which are not in optimized
        const deadIndices = [];
        const tempOptimized = optimized.map(i => JSON.stringify(i));

        for (let i = 0; i < original.length; i++) {
            const sig = JSON.stringify(original[i]);
            const idx = tempOptimized.indexOf(sig);
            if (idx === -1) {
                deadIndices.push(i);
            } else {
                // remove from temp to handle duplicates
                tempOptimized.splice(idx, 1);
            }
        }

        return deadIndices;
    }

    // rendering
    function renderOutput() {
        if (!lastResult) return;

        // render original 3AC with dead lines highlighted
        renderCodePanel('original-tac', lastResult.originalLines, lastResult.deadLineIndices);

        // render optimized 3AC (clean)
        renderCodePanel('optimized-tac', lastResult.optimizedLines, []);

        // render reconstructed C
        const reconstructPanel = $('#reconstructed-c');
        const showReconstruction = $('#reconstruct-toggle').checked;
        if (showReconstruction && lastResult.reconstructedCode) {
            const lines = lastResult.reconstructedCode.split('\n');
            renderCodePanel('reconstructed-c', lines, []);
        } else {
            reconstructPanel.innerHTML = `<div class="placeholder"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-3-3v6m-7 4h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg><span>Enable reconstruction to see C-like output</span></div>`;
        }

        // update stats
        renderStats();

        // switch to original TAC tab
        $$('.tab')[0].click();

        // show the output card with animation
        $('.output-panel').classList.add('fade-in');
    }

    function renderCodePanel(panelId, lines, deadIndices) {
        const panel = $(`#${panelId}`);
        const deadSet = new Set(deadIndices);

        let html = '<div class="code-output">';
        for (let i = 0; i < lines.length; i++) {
            const isDead = deadSet.has(i);
            const lineClass = isDead ? 'line dead' : 'line';
            const escapedLine = escapeHtml(lines[i] || ' ');
            html += `<span class="${lineClass}"><span class="line-number">${i + 1}</span>${escapedLine}</span>`;
        }
        html += '</div>';
        panel.innerHTML = html;
    }

    function renderStats() {
        if (!lastResult) return;
        const s = lastResult.stats;
        $('#stat-original').textContent = s.originalCount;
        $('#stat-optimized').textContent = s.optimizedCount;
        $('#stat-eliminated').textContent = s.eliminated;
        const pct = s.originalCount > 0 ? ((s.eliminated / s.originalCount) * 100).toFixed(1) : 0;
        $('#stat-reduction').textContent = pct + '%';
    }

    // error handling
    function showError(msg) {
        const el = $('#error-display');
        el.textContent = '⚠ ' + msg;
        el.classList.add('visible');

        // clear output panels
        ['original-tac', 'optimized-tac', 'reconstructed-c'].forEach(id => {
            $(`#${id}`).innerHTML = '';
        });
    }

    function hideError() {
        $('#error-display').classList.remove('visible');
    }

    function showProcessing(on) {
        const btn = $('#compile-btn');
        if (on) {
            btn.textContent = 'Compiling...';
            btn.classList.add('processing');
            btn.disabled = true;
        } else {
            btn.textContent = 'Compile & Optimize';
            btn.classList.remove('processing');
            btn.disabled = false;
        }
    }

    // utilities
    function escapeHtml(str) {
        return str
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;');
    }

})();