diff --git a/index.html b/index.html index 0016107282..d831852ef6 100644 --- a/index.html +++ b/index.html @@ -34,23 +34,32 @@ body { right: 10px; bottom: 0px; font-size: 14px; + overflow: auto; } #header { margin-bottom: 4px; } +.col1 { + width: 18ex; + display: inline-block; +} +.col2 { + width: 60ex; +} + - +
Theme by orderedlist
@@ -122,22 +131,26 @@ editor.getSession().setMode("ace/mode/javascript"); editor.getSession().setTabSize(4); editor.getSession().setUseSoftTabs(true); -var compileString = Module.cwrap("compileString", "string", ["string", "number"]); +var compileJSON = Module.cwrap("compileJSON", "string", ["string", "number"]); var ready = false; Module['onRuntimeInitialized'] = function() { ready = true; onChange(); }; var previousInput = ''; -var outputArea = document.querySelector('#output'); var compile = function() { if (!ready) return; var input = editor.getValue(); var optimize = document.querySelector('#optimize').checked; try { - outputArea.innerHTML = compileString(input, optimize ? 1 : 0); + var data = $.parseJSON(compileJSON(input, optimize ? 1 : 0)); } catch (exception) { - outputArea.innerHTML = "Uncaught JavaScript Exception:\n" + exception; + renderError("Uncaught JavaScript Exception:\n" + exception); + return; } + if (data['error'] !== undefined) + renderError(data['error']); + else + renderContracts(data); } var compileTimeout = null; var onChange = function() { @@ -153,6 +166,29 @@ var onChange = function() { editor.getSession().on('change', onChange); document.querySelector('#optimize').addEventListener('change', compile); + +var renderError = function(message) { + $('#output').empty().append($('').text(message)); +}; +var renderContracts = function(data) { + $('#output').empty(); + for (var contractName in data.contracts) { + var contract = data.contracts[contractName]; + var contractOutput = $('') + .append($('').text(contractName)) + .append($('').text((contract.bytecode.length / 2) + ' bytes')) + .append(tableRow('Bytecode', contract.bytecode)) + .append(tableRow('Interface', contract['interface'])) + .append(tableRow('Solidity Interface', contract.solidity_interface)) + .append(tableRow('Opcodes', contract.opcodes)); + $('#output').append(contractOutput); + } +}; +var tableRow = function(description, data) { + return $('') + .append($('').text(description)) + .append($('').val(data)); +};