ground/gride
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP text rewrite, highlighting

Browse Source
This commit is contained in:
Maxwell
2025-09-25 11:34:38 +10:00
parent 2dc3992566
commit c85abbaad1
3 changed files with 142 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/index.css
View File

@@ -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;

4
client/index.html
View File

@@ -7,10 +7,12 @@
</head>
<body>
<div class="left">
<code id="editor"></code>
<code contenteditable="true" id="editor"></code>
</div>
<div class="right">
<button onclick="runCode()">Run</button>
<input type="file" id="fileInput" hidden accept=".grnd">
<button for="fileInput" id="buttonTrigger">Choose File</button>
<br>
<code id="console">Output will be shown here, click the run button to run your code!</code>
</div>

145
client/index.js
View File

@@ -1,32 +1,158 @@
let textbox;
let textconsole;
let text = '<p># welcome to gride!</p>\n<p># start typing to code a program in Ground!</p>\n<p>';
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.innerHTML = text + "</p>";
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 += "</p>\n<p>";
text += "\n"
} else if (event.key == "Tab") {
text += " ";
} else if (event.key == "Backspace") {
if (text.slice(-8) == "</p>\n<p>") {
text = text.slice(0, -8)
} else {
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 + "</p>";
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", {
@@ -35,5 +161,6 @@ async function runCode() {
"body": text.split("<p>").join("").split("</p>").join("")
});
const data = await result.json();
textconsole.innerHTML = data.stdout;
// Ensure everything's seperated
textconsole.innerHTML = "<p>" + data.stdout.split("\n").join("</p><p>") + "</p>";
}