dylan/fantasy-console
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Syntax highlighting

Browse Source
This commit is contained in:
dylan
2023-05-06 10:00:41 -07:00
parent 1fa58961fc
commit 12bc0cb385
4 changed files with 210 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
codetab.ts
View File

@ -4,6 +4,7 @@ import { drawText } from "./builtins.ts";
import { COLOR } from "./colors.ts";
import {getSheet, setSheet} from "./sheet.ts";
import { K, getKeyboardString, keyPressed, shiftKeyDown } from "./keyboard.ts";
import { tokenize } from "./deps.ts";
const state = {
scrollX: 0,
@ -138,6 +139,145 @@ const gridToIndex = (str: string, x: number, y: number) => {
return lines.slice(0, y).join("\n").length+Math.min(x, lines[y].length)+1;
}
const keywords = [
"break",
"case",
"catch",
"class",
"const",
"continue",
"debugger",
"default",
"delete",
"do",
"else",
"export",
"extends",
"finally",
"for",
"function",
"if",
"import",
"in",
"instanceof",
"new",
"return",
"super",
"switch",
"this",
"throw",
"try",
"typeof",
"var",
"void",
"while",
"with",
"let",
"static",
"yield",
"await",
"enum",
"implements",
"interface",
"package",
"private",
"protected",
"public",
"=>",
];
const values = [
"false",
"null",
"true",
"undefined",
];
const operator = [
"&&",
"||",
"??",
"--",
"++",
".",
"?.",
"<",
"<=",
">",
">=",
"!=",
"!==",
"==",
"===",
"+",
"-",
"%",
"&",
"|",
"^",
"/",
"*",
"**",
"<<",
">>",
">>>",
"=",
"+=",
"-=",
"%=",
"&=",
"|=",
"^=",
"/=",
"*=",
"**=",
"<<=",
">>=",
">>>=",
"!",
"?",
"~",
"...",
];
const punctuation = [
"(",
")",
"[",
"]",
"{",
"}",
".",
":",
";",
",",
];
const keywordColor = COLOR.PURPLE;
const operatorColor = COLOR.CYAN;
const valueColor = COLOR.ORANGE;
const stringColor = COLOR.GREEN;
const regexColor = stringColor;
const punctuationColor = COLOR.WHITE;
const commentColor = COLOR.GRAY;
const identifierColor = COLOR.LIGHTGRAY;
const invalidColor = COLOR.RED;
const tokenColors = {
"StringLiteral": stringColor,
"NoSubstitutionTemplate": stringColor,
"TemplateHead": stringColor,
"TemplateMiddle": stringColor,
"TemplateTail": stringColor,
"RegularExpressionLiteral": regexColor,
"MultiLineComment": commentColor,
"SingleLineComment": commentColor,
"IdentifierName": identifierColor,
"PrivateIdentifier": identifierColor,
"NumericLiteral": valueColor,
"Punctuator": punctuationColor,
"WhiteSpace": punctuationColor,
"LineTerminatorSequence": punctuationColor,
"Invalid": invalidColor,
}
const drawCodeField = (code: string, x: number, y: number, w: number, h: number) => {
const {
scrollX,
@ -162,9 +302,34 @@ const drawCodeField = (code: string, x: number, y: number, w: number, h: number)
fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.YELLOW);
}
// TODO: Add syntax highlighting use "npm:js-tokens" maybe?
code.split("\n").forEach((line, i) => {
drawText(x-scrollX, 1+y+i*(fontHeight+1)-scrollY, line);
});
const tokens = [...tokenize(code)];
let cx = 0;
let cy = 0;
tokens.forEach((token) => {
const lines = token.value.split("\n");
lines.forEach((line, i) => {
let color = tokenColors[token.type];
if (keywords.includes(token.value)) {
color = keywordColor;
}
if (values.includes(token.value)) {
color = valueColor;
}
if (operator.includes(token.value)) {
color = operatorColor;
}
if (punctuation.includes(token.value)) {
color = punctuationColor;
}
drawText(x+cx-scrollX, 1+y+cy-scrollY, line, color);
if (i === lines.length-1) {
cx += fontWidth*line.length;
} else {
cx=0;
cy+=fontHeight+1;
}
});
})
}
const update = () => {