diff --git a/client/index.css b/client/index.css index bf6f1fa..881cb5d 100644 --- a/client/index.css +++ b/client/index.css @@ -21,7 +21,7 @@ button { height: 100%; width: 70%; padding: 10px; - background-color: #331d42; + background-color: #0d0a12; color: #e6e8ff; position: absolute; overflow: scroll; @@ -31,7 +31,7 @@ button { height: 100%; width: 30%; padding: 10px; - background-color: #1b0f24; + background-color: #191324; color: #e6e8ff; position: absolute; right: 0; diff --git a/client/index.html b/client/index.html index 307bee4..a2e9aa2 100644 --- a/client/index.html +++ b/client/index.html @@ -7,10 +7,12 @@
- +
+ +
Output will be shown here, click the run button to run your code!
diff --git a/client/index.js b/client/index.js index 14824aa..b08d2b5 100644 --- a/client/index.js +++ b/client/index.js @@ -1,32 +1,158 @@ let textbox; let textconsole; -let text = '

# welcome to gride!

\n

# start typing to code a program in Ground!

\n

'; +let text = '# welcome to gride! start typing to code a program in Ground!\n'; + +let filebutton; +let fileinput; + +function renderHighlightedText() { + let renderedText = ""; + const lines = text.split("\n"); + for (const line of lines) { + iscomment = false; + renderedText += "

"; + const tokens = line.split(" "); + for (const token of tokens) { + renderedText += highlightToken(token) + " "; + } + renderedText += "

"; + instring = false; + } + textbox.innerHTML = renderedText; +} + // Wait for the window to load before doing anything window.addEventListener("load", function() { + + // Get all the elements textbox = document.getElementById("editor"); textconsole = document.getElementById("console"); - textbox.innerHTML = text + "

"; + textbox.innerText = text; + filebutton = document.getElementById('buttonTrigger'); + fileinput = document.getElementById('fileInput'); + + // Set up watchers for everything + filebutton.addEventListener('click', () => { + fileinput.click(); + }) + + fileinput.addEventListener('change', () => { + const file = fileinput.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = function(e) { + text = e.target.result; + textbox.innerText = text; + renderHighlightedText(); + }; + reader.readAsText(file); + } else { + console.log("what"); + } + }); }); +const keywords = ["if", "jump", "end", "input", "stdin", "print", "stdout", "println", "stdlnout", "set", "gettype", "exists", "setlist", "setlistat", "getlistat", "getlistsize", "listappend", "getstrsize", "getstrcharat", "add", "subtract", "multiply", "divide", "equal", "inequal", "not", "greater", "lesser", "stoi", "stod", "tostring", "fun", "return", "endfun", "pusharg", "call", "struct", "endstruct", "init", "use", "extern", "catch"]; + +const colours = { + keyword: "#42fff2", + comment: "#383838", + number: "#42ffb7", + string: "#42ff62", + valref: "#9544c7", + dirref: "#f587ff", + label: "#fff67d", + function: "#ffa640", + typeref: "#ff40ac" +} + +let instring = false; +let iscomment = false; + +// Function to handle highlighting tokens that have been typed +function highlightToken(token) { + + if (instring) { + if (token[token.length - 1] == '"' || token[token.length - 1] == '"') { + instring = false; + } + return `${token}` + } + + // Comments + if (iscomment) { + return ` ${token}"` + } + + if (token[0] == '#') { + iscomment = true; + return `${token}`; + } + + // Direct references + if (token[0] == '&') { + return `${token}`; + } + + // Value references + if (token[0] == '$') { + return `${token}`; + } + + // Strings and characters + if (token[0] == '"' || token[0] == "'") { + if (!(token[token.length - 1] == '"' || token[token.length - 1] == '"')) { + instring = true; + } + return `${token}`; + } + + return `${token}`; +} + // When we press a key, start doing stuff +textbox.addEventListener('input', () => { + text = textbox.innerText; + renderHighlightedText(); +}); + + +// Old code +/* onkeydown = (event) => { if (event.key == "Enter") { - text += "

\n

"; + //text += "

\n

"; + text += "\n" } else if (event.key == "Tab") { text += " "; } else if (event.key == "Backspace") { - if (text.slice(-8) == "

\n

") { - text = text.slice(0, -8) - } else { - text = text.slice(0, -1) - } + text = text.slice(0, -1) } else if (!(event.key == "Control" || event.key == "Alt" || event.key == "Meta" || event.key == "Shift" || event.key == "Escape")) { text += event.key; } - textbox.innerHTML = text + "

"; + let renderedText = ""; + const lines = text.split("\n"); + for (const line of lines) { + renderedText += "

"; + const tokens = line.split(" "); + for (const token of tokens) { + renderedText += highlightToken(token) + " "; + } + renderedText += "

"; + instring = false; + iscomment = false; + } + textbox.innerHTML = renderedText; } +*/ +// Function to run code on the server async function runCode() { console.log(text.split("

").join("").split("

").join("")); const result = await fetch("http://localhost:5000/runProgram", { @@ -35,5 +161,6 @@ async function runCode() { "body": text.split("

").join("").split("

").join("") }); const data = await result.json(); - textconsole.innerHTML = data.stdout; + // Ensure everything's seperated + textconsole.innerHTML = "

" + data.stdout.split("\n").join("

") + "

"; }