Commit 7f93faef authored by Matej Genci's avatar Matej Genci
Browse files

Basic ugly interface

parent d8ec209b
......@@ -2001,6 +2001,11 @@
"negotiator": "0.6.2"
}
},
"ace-builds": {
"version": "1.4.8",
"resolved": "https://registry.npmjs.org/ace-builds/-/ace-builds-1.4.8.tgz",
"integrity": "sha512-8ZVAxwyCGAxQX8mOp9imSXH0hoSPkGfy8igJy+WO/7axL30saRhKgg1XPACSmxxPA7nfHVwM+ShWXT+vKsNuFg=="
},
"acorn": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
......@@ -4225,6 +4230,11 @@
}
}
},
"diff-match-patch": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.4.tgz",
"integrity": "sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg=="
},
"diff-sequences": {
"version": "24.9.0",
"resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-24.9.0.tgz",
......@@ -8120,6 +8130,16 @@
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
},
"lodash.get": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
"integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
},
"lodash.isequal": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
"integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
},
"lodash.memoize": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
......@@ -10571,6 +10591,18 @@
"prop-types": "^15.6.2"
}
},
"react-ace": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/react-ace/-/react-ace-8.0.0.tgz",
"integrity": "sha512-EvU14vXbZpAenb1ZVKdn8yTQs/shZ9RghFulHtt67bBXT6sjrNHcfOEXHYtSEmwMb6pQVVNNuulzzd8o+Uouig==",
"requires": {
"ace-builds": "^1.4.6",
"diff-match-patch": "^1.0.4",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"prop-types": "^15.7.2"
}
},
"react-app-polyfill": {
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz",
......
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
import React from 'react';
import logo from './logo.svg';
import ButtonStrip from './view/ButonStrip'
import CodeEditor from './view/CodeEditor'
import UserIO from './view/UserIO'
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
class App extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="App">
<ButtonStrip />
<div className="App-code-editors">
<CodeEditor
heading='WACC Code'
name='wacc_edit' />
<CodeEditor
heading='JavaScript'
name='js_edit' />
<CodeEditor
heading='ARM Assembly'
name='arm_edit'/>
</div>
<UserIO />
</div>
)
}
}
export default App;
import React from 'react';
class ButtonStrip extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<button>COMPILE</button>
<button>COMPILE</button>
<button>STEP JS LINE</button>
<button>STEP INTO AST NODE</button>
<button>STEP OVER AST NODE</button>
</div>
)
}
}
export default ButtonStrip
\ No newline at end of file
import React from "react";
import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";
class CodeEditor extends React.Component {
heading() {
if (this.props.heading !== undefined) {
return <h1>{this.props.heading}</h1>
}
}
onChange(newValue) {
console.log("change", newValue);
}
// Render editor
render() {
return (
<div>
{this.heading()}
<AceEditor
mode="java"
theme="github"
onChange={this.onChange}
name={this.props.name}
className="aceeditor"
editorProps={{ $blockScrolling: true }}
/>
</div>
)
};
}
export default CodeEditor
\ No newline at end of file
import React from 'react'
class UserIO extends React.Component {
render() {
return <code>User IO. Will do something</code>
}
}
export default UserIO;
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment