simulator.js

/**
 * Enhanced Code Simulator with Interactive Dry Run
 * Helps students understand code execution step-by-step with:
 * - Line-by-line execution
 * - Variable value tracking
 * - Interactive input/output
 * - Detailed explanations for each step
 */

class CodeSimulator {
  constructor() {
    this.code = '';
    this.parsedData = null;
    this.currentStep = 0;
    this.totalSteps = 0;
    this.executionSteps = [];
    this.stack = [];
    this.heap = {};
    this.variables = {};
    this.output = [];
    this.isPlaying = false;
    this.playInterval = null;
    this.speed = 800;
    this.executionHistory = [];
  }

  /**
   * Initialize simulator with code
   */
  initialize(code, parsedData) {
    this.code = code;
    this.parsedData = parsedData;
    this.currentStep = 0;
    this.output = [];
    this.executionHistory = [];
    this.generateExecutionSteps();
  }

  /**
   * Generate detailed step-by-step execution plan with explanations
   */
  generateExecutionSteps() {
    this.executionSteps = [];
    const lines = this.code.split('\n');
    
    lines.forEach((line, index) => {
      const trimmed = line.trim();
      if (trimmed && !trimmed.startsWith('//') && !trimmed.startsWith('/*') && trimmed !== '}' && trimmed !== '{') {
        const step = {
          line: index + 1,
          code: line,
          type: this.detectLineType(trimmed),
          explanation: this.generateExplanation(trimmed, index + 1),
          state: {},
          input: null,
          output: null
        };
        this.executionSteps.push(step);
      }
    });
    
    this.totalSteps = this.executionSteps.length;
  }

  /**
   * Detect line type for proper visualization
   */
  detectLineType(line) {
    if (line.match(/function\s+\w+/)) return 'function_declaration';
    if (line.match(/^\w+\s*\(/)) return 'function_call';
    if (line.match(/^(let|const|var)/)) return 'variable_declaration';
    if (line.match(/^if\s*\(/)) return 'conditional_start';
    if (line.match(/^else if\s*\(/)) return 'conditional_elseif';
    if (line.match(/^else/)) return 'conditional_else';
    if (line.match(/^for\s*\(/)) return 'loop_start';
    if (line.match(/^while\s*\(/)) return 'loop_while';
    if (line.match(/^return/)) return 'return';
    if (line.includes('console.log') || line.includes('print')) return 'output';
    if (line.match(/\w+\s*[+\-*/]=\s*.+/)) return 'assignment';
    if (line.match(/\w+\+\+|--\w+/)) return 'increment';
    return 'statement';
  }

  /**
   * Generate human-readable explanation for each line
   */
  generateExplanation(line, lineNum) {
    const type = this.detectLineType(line);
    
    switch (type) {
      case 'function_declaration':
        const funcMatch = line.match(/function\s+(\w+)\s*\((.*?)\)/);
        const funcName = funcMatch ? funcMatch[1] : 'function';
        const params = funcMatch && funcMatch[2] ? funcMatch[2] : '';
        return `📘 Define function "${funcName}"${params ? ' with parameters: ' + params : ''}`;
      
      case 'function_call':
        const callMatch = line.match(/(\w+)\s*\((.*?)\)/);
        const calledFunc = callMatch ? callMatch[1] : '';
        const args = callMatch && callMatch[2] ? callMatch[2] : '';
        return `📞 Call function "${calledFunc}"${args ? ' with arguments: ' + args : ''}`;
      
      case 'variable_declaration':
        const varMatch = line.match(/(let|const|var)\s+(\w+)(?:\s*=\s*(.+?))?[;]?$/);
        if (varMatch) {
          const varName = varMatch[2];
          const value = varMatch[3] || 'undefined';
          return `📦 Create variable "${varName}" and assign value: ${value}`;
        }
        return '📦 Declare variable';
      
      case 'assignment':
        const assignMatch = line.match(/(\w+)\s*([+\-*/]?=)\s*(.+?)[;]?$/);
        if (assignMatch) {
          const varName = assignMatch[1];
          const operator = assignMatch[2];
          const value = assignMatch[3];
          return `✏️ Update "${varName}" ${operator} ${value}`;
        }
        return '✏️ Update variable value';
      
      case 'conditional_start':
        const ifMatch = line.match(/if\s*\((.+?)\)/);
        const condition = ifMatch ? ifMatch[1] : '';
        return `❓ Check condition: ${condition}\n   If TRUE → execute next block\n   If FALSE → skip to else/next`;
      
      case 'conditional_elseif':
        const elifMatch = line.match(/else if\s*\((.+?)\)/);
        const elifCond = elifMatch ? elifMatch[1] : '';
        return `❓ Previous condition was FALSE, now check: ${elifCond}`;
      
      case 'conditional_else':
        return `❓ All previous conditions were FALSE, execute else block`;
      
      case 'loop_start':
        const forMatch = line.match(/for\s*\((.+?)\)/);
        const loopInit = forMatch ? forMatch[1] : '';
        return `🔄 Start loop: ${loopInit}\n   Initialize → Check condition → Execute → Increment → Repeat`;
      
      case 'loop_while':
        const whileMatch = line.match(/while\s*\((.+?)\)/);
        const whileCond = whileMatch ? whileMatch[1] : '';
        return `🔄 While loop: Keep executing as long as ${whileCond} is TRUE`;
      
      case 'return':
        const retMatch = line.match(/return\s+(.+?)[;]?$/);
        const retVal = retMatch ? retMatch[1] : '';
        return `↩️ Return value: ${retVal}\n   Exit function and send this value back`;
      
      case 'output':
        const outputMatch = line.match(/console\.log\((.+?)\)|print\((.+?)\)/);
        const outputVal = outputMatch ? (outputMatch[1] || outputMatch[2]) : '';
        return `📺 Display output: ${outputVal}`;
      
      case 'increment':
        return `➕ Increment/Decrement variable by 1`;
      
      default:
        return `⚙️ Execute: ${line.substring(0, 50)}${line.length > 50 ? '...' : ''}`;
    }
  }

  /**
   * Execute next step with detailed tracking
   */
  nextStep() {
    if (this.currentStep >= this.totalSteps) {
      return null;
    }
    
    const step = this.executionSteps[this.currentStep];
    const executionResult = this.executeStep(step);
    
    // Save to history
    this.executionHistory.push({
      step: this.currentStep,
      ...executionResult
    });
    
    this.currentStep++;
    
    return {
      step: this.currentStep,
      total: this.totalSteps,
      line: step.line,
      code: step.code,
      type: step.type,
      explanation: step.explanation,
      stack: [...this.stack],
      heap: {...this.heap},
      variables: {...this.variables},
      output: [...this.output],
      changes: executionResult.changes
    };
  }

  /**
   * Execute previous step
   */
  previousStep() {
    if (this.currentStep <= 0) {
      return null;
    }
    
    this.currentStep--;
    
    // Restore state from history
    if (this.executionHistory[this.currentStep]) {
      const historyState = this.executionHistory[this.currentStep];
      this.stack = [...historyState.stack];
      this.heap = {...historyState.heap};
      this.variables = {...historyState.variables};
      this.output = [...historyState.output];
    }
    
    const step = this.executionSteps[this.currentStep];
    
    return {
      step: this.currentStep,
      total: this.totalSteps,
      line: step.line,
      code: step.code,
      type: step.type,
      explanation: step.explanation,
      stack: [...this.stack],
      heap: {...this.heap},
      variables: {...this.variables},
      output: [...this.output]
    };
  }

  /**
   * Execute a single step with detailed tracking
   */
  executeStep(step) {
    const { type, code, line } = step;
    const changes = {
      variablesChanged: [],
      stackChanged: false,
      heapChanged: false,
      outputGenerated: false
    };
    
    switch (type) {
      case 'function_declaration':
        changes.variablesChanged = this.handleFunctionDeclaration(code, line);
        break;
      
      case 'function_call':
        changes.stackChanged = this.handleFunctionCall(code, line);
        break;
      
      case 'variable_declaration':
        changes.variablesChanged = this.handleVariableDeclaration(code, line);
        break;
      
      case 'assignment':
        changes.variablesChanged = this.handleAssignment(code, line);
        break;
      
      case 'return':
        changes.stackChanged = this.handleReturn(code, line);
        break;
      
      case 'output':
        changes.outputGenerated = this.handleOutput(code, line);
        break;
      
      case 'increment':
        changes.variablesChanged = this.handleIncrement(code, line);
        break;
    }
    
    return {
      changes,
      stack: [...this.stack],
      heap: {...this.heap},
      variables: {...this.variables},
      output: [...this.output]
    };
  }

  /**
   * Handle function declaration
   */
  handleFunctionDeclaration(code, line) {
    const match = code.match(/function\s+(\w+)/);
    if (match) {
      const functionName = match[1];
      this.variables[functionName] = {
        type: 'function',
        line: line,
        value: 'function'
      };
      return [functionName];
    }
    return [];
  }

  /**
   * Handle function call - create stack frame
   */
  handleFunctionCall(code, line) {
    const match = code.match(/(\w+)\s*\((.*?)\)/);
    if (match) {
      const functionName = match[1];
      const args = match[2].split(',').map(a => a.trim()).filter(Boolean);
      
      this.stack.push({
        function: functionName,
        arguments: args,
        line: line,
        localVars: {},
        returnAddress: line
      });
      return true;
    }
    return false;
  }

  /**
   * Handle variable declaration with actual value calculation
   */
  handleVariableDeclaration(code, line) {
    const match = code.match(/(let|const|var)\s+(\w+)(?:\s*=\s*(.+?))?[;]?$/);
    if (match) {
      const varName = match[2];
      const valueExpr = match[3] || 'undefined';
      const value = this.evaluateExpression(valueExpr);
      
      // Add to current stack frame if in function, otherwise global
      if (this.stack.length > 0) {
        const currentFrame = this.stack[this.stack.length - 1];
        currentFrame.localVars[varName] = value;
      } else {
        this.variables[varName] = {
          type: match[1],
          value: value,
          line: line
        };
      }
      
      // If object or array, add to heap
      if (typeof value === 'object') {
        this.heap[varName] = {
          type: Array.isArray(value) ? 'array' : 'object',
          value: value,
          line: line
        };
      }
      
      return [varName];
    }
    return [];
  }

  /**
   * Handle assignment operations
   */
  handleAssignment(code, line) {
    const match = code.match(/(\w+)\s*([+\-*/]?=)\s*(.+?)[;]?$/);
    if (match) {
      const varName = match[1];
      const operator = match[2];
      const rightExpr = match[3];
      
      const currentValue = this.getVariableValue(varName);
      let newValue;
      
      if (operator === '=') {
        newValue = this.evaluateExpression(rightExpr);
      } else {
        const rightValue = this.evaluateExpression(rightExpr);
        switch (operator) {
          case '+=':
            newValue = currentValue + rightValue;
            break;
          case '-=':
            newValue = currentValue - rightValue;
            break;
          case '*=':
            newValue = currentValue * rightValue;
            break;
          case '/=':
            newValue = currentValue / rightValue;
            break;
          default:
            newValue = rightValue;
        }
      }
      
      this.setVariableValue(varName, newValue);
      return [varName];
    }
    return [];
  }

  /**
   * Handle increment/decrement
   */
  handleIncrement(code, line) {
    const match = code.match(/(\w+)(\+\+|--)/);
    if (match) {
      const varName = match[1];
      const operator = match[2];
      const currentValue = this.getVariableValue(varName);
      const newValue = operator === '++' ? currentValue + 1 : currentValue - 1;
      this.setVariableValue(varName, newValue);
      return [varName];
    }
    return [];
  }

  /**
   * Handle return statement - pop stack frame
   */
  handleReturn(code, line) {
    const match = code.match(/return\s+(.+?)[;]?$/);
    const returnValue = match ? this.evaluateExpression(match[1]) : undefined;
    
    if (this.stack.length > 0) {
      const frame = this.stack.pop();
      frame.returnValue = returnValue;
    }
    
    return true;
  }

  /**
   * Handle console.log or print output
   */
  handleOutput(code, line) {
    const match = code.match(/console\.log\((.+?)\)|print\((.+?)\)/);
    if (match) {
      const expr = match[1] || match[2];
      const value = this.evaluateExpression(expr);
      this.output.push({
        line: line,
        value: value,
        timestamp: Date.now()
      });
      return true;
    }
    return false;
  }

  /**
   * Evaluate expression (simplified - handles basic math and variables)
   */
  evaluateExpression(expr) {
    if (!expr || expr === 'undefined') return 'undefined';
    
    // Remove semicolon
    expr = expr.replace(/;$/, '').trim();
    
    // String literal
    if (expr.startsWith('"') || expr.startsWith("'")) {
      return expr.slice(1, -1);
    }
    
    // Number
    if (!isNaN(expr)) {
      return parseFloat(expr);
    }
    
    // Boolean
    if (expr === 'true') return true;
    if (expr === 'false') return false;
    if (expr === 'null') return null;
    
    // Array
    if (expr.startsWith('[')) {
      try {
        return JSON.parse(expr);
      } catch (e) {
        return expr;
      }
    }
    
    // Object
    if (expr.startsWith('{')) {
      try {
        return JSON.parse(expr);
      } catch (e) {
        return expr;
      }
    }
    
    // Variable reference
    if (/^\w+$/.test(expr)) {
      return this.getVariableValue(expr);
    }
    
    // Simple arithmetic
    if (/^[\d\s+\-*/%()]+$/.test(expr)) {
      try {
        return eval(expr);
      } catch (e) {
        return expr;
      }
    }
    
    // Expression with variables
    const varNames = expr.match(/\w+/g) || [];
    let evaluatedExpr = expr;
    
    varNames.forEach(varName => {
      const value = this.getVariableValue(varName);
      if (value !== undefined && value !== 'undefined') {
        evaluatedExpr = evaluatedExpr.replace(new RegExp('\\b' + varName + '\\b', 'g'), value);
      }
    });
    
    try {
      return eval(evaluatedExpr);
    } catch (e) {
      return expr;
    }
  }

  /**
   * Get variable value from current scope
   */
  getVariableValue(varName) {
    // Check current stack frame first
    if (this.stack.length > 0) {
      const currentFrame = this.stack[this.stack.length - 1];
      if (currentFrame.localVars[varName] !== undefined) {
        return currentFrame.localVars[varName];
      }
    }
    
    // Check global variables
    if (this.variables[varName] !== undefined) {
      return this.variables[varName].value || this.variables[varName];
    }
    
    return 'undefined';
  }

  /**
   * Set variable value in current scope
   */
  setVariableValue(varName, value) {
    // Update in current stack frame if exists
    if (this.stack.length > 0) {
      const currentFrame = this.stack[this.stack.length - 1];
      if (currentFrame.localVars[varName] !== undefined) {
        currentFrame.localVars[varName] = value;
        return;
      }
    }
    
    // Update global variable
    if (this.variables[varName] !== undefined) {
      if (typeof this.variables[varName] === 'object') {
        this.variables[varName].value = value;
      } else {
        this.variables[varName] = value;
      }
    }
  }

  /**
   * Start auto-play
   */
  play() {
    if (this.isPlaying) return;
    
    this.isPlaying = true;
    this.playInterval = setInterval(() => {
      const result = this.nextStep();
      if (!result) {
        this.pause();
      }
    }, this.speed);
  }

  /**
   * Pause auto-play
   */
  pause() {
    this.isPlaying = false;
    if (this.playInterval) {
      clearInterval(this.playInterval);
      this.playInterval = null;
    }
  }

  /**
   * Reset simulation
   */
  reset() {
    this.currentStep = 0;
    this.stack = [];
    this.heap = {};
    this.variables = {};
    this.output = [];
    this.executionHistory = [];
    this.pause();
  }

  /**
   * Set playback speed
   */
  setSpeed(speed) {
    this.speed = speed;
    if (this.isPlaying) {
      this.pause();
      this.play();
    }
  }

  /**
   * Get current state
   */
  getState() {
    return {
      currentStep: this.currentStep,
      totalSteps: this.totalSteps,
      stack: [...this.stack],
      heap: {...this.heap},
      variables: {...this.variables},
      output: [...this.output],
      isPlaying: this.isPlaying
    };
  }

  /**
   * Generate complete dry run table
   */
  generateDryRunTable() {
    const table = [];
    const allVariables = new Set();
    
    // Collect all variables
    this.executionHistory.forEach(step => {
      Object.keys(step.variables).forEach(v => allVariables.add(v));
    });
    
    // Generate table rows
    this.executionHistory.forEach((step, index) => {
      const row = {
        step: index + 1,
        line: this.executionSteps[index].line,
        code: this.executionSteps[index].code.trim(),
        variables: {}
      };
      
      allVariables.forEach(varName => {
        const varData = step.variables[varName];
        row.variables[varName] = varData ? (varData.value || varData) : '-';
      });
      
      row.output = step.output.length > 0 ? step.output[step.output.length - 1].value : '';
      
      table.push(row);
    });
    
    return {
      variables: Array.from(allVariables),
      rows: table
    };
  }
}

if (typeof window !== 'undefined') {
  window.CodeSimulator = CodeSimulator;
}