gride/client/index.js

let textbox;
let textconsole;
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 += "<p>";
    const tokens = line.split(" ");
    for (const token of tokens) {
      renderedText += highlightToken(token) + " ";
    }
    renderedText += "</p>";
    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.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 `<span style="color: ${colours.string}">${token}</span>`
  }

  // Comments
  if (iscomment) {
    return `<span style="color: ${colours.comment}"> ${token}</span>"`
  }

  if (token[0] == '#') {
    iscomment = true;
    return `<span style="color: ${colours.comment}> ${token}</span>"`
  }

  // Keywords
  if (keywords.includes(token)) {
    return `<span style="color: ${colours.keyword}">${token}</span>`;
  }

  // Direct references
  if (token[0] == '&') {
    return `<span style="color: ${colours.dirref}">${token}</span>`;
  }

  // Value references
  if (token[0] == '$') {
    return `<span style="color: ${colours.valref}">${token}</span>`;
  }

  // Strings and characters
  if (token[0] == '"' || token[0] == "'") {
    if (!(token[token.length - 1] == '"' || token[token.length - 1] == '"')) {
      instring = true;
    }
    return `<span style="color: ${colours.string}">${token}</span>`;
  }

  return `<span>${token}</span>`;
}

// When we press a key, start doing stuff
textbox.addEventListener('input', () => {
  text = textbox.innerText;
  renderHighlightedText();
});


// Old code
/*
onkeydown = (event) => {
  if (event.key == "Enter") {
    //text += "</p>\n<p>";
    text += "\n"
  } else if (event.key == "Tab") {
    text += "    ";
  } else if (event.key == "Backspace") {
    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;
  }
  let renderedText = "";
  const lines = text.split("\n");
  for (const line of lines) {
    renderedText += "<p>";
    const tokens = line.split(" ");
    for (const token of tokens) {
      renderedText += highlightToken(token) + " ";
    }
    renderedText += "</p>";
    instring = false;
    iscomment = false;
  }
  textbox.innerHTML = renderedText;
}
*/

// Function to run code on the server
async function runCode() {
  console.log(text.split("<p>").join("").split("</p>").join(""));
  const result = await fetch("http://localhost:5000/runProgram", {
    "method": "POST",
    //"mode": "no-cors",
    "body": text.split("<p>").join("").split("</p>").join("")
  });
  const data = await result.json();
  // Ensure everything's seperated
  textconsole.innerHTML = "<p>" + data.stdout.split("\n").join("</p><p>") + "</p>";
}