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

Improved syntax highlighting

Browse Source
This commit is contained in:
dylan 2023-05-06 12:05:02 -07:00
parent 7bf0838e4e
commit 60542b63c0
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
codetab.ts
View File

@ -5,6 +5,7 @@ import { COLOR } from "./colors.ts";
import {getCodeSheet, setSheet} from "./sheet.ts"; import {getCodeSheet, setSheet} from "./sheet.ts";
import { K, ctrlKeyDown, getKeyboardString, keyPressed, shiftKeyDown } from "./keyboard.ts"; import { K, ctrlKeyDown, getKeyboardString, keyPressed, shiftKeyDown } from "./keyboard.ts";
import { clipboard, tokenize } from "./deps.ts"; import { clipboard, tokenize } from "./deps.ts";
import { getContext } from "./runcode.ts";
const historyDebounceFrames = 20; const historyDebounceFrames = 20;
@ -313,14 +314,15 @@ const punctuation = [
",", ",",
]; ];
const builtinColor = COLOR.BLUE;
const keywordColor = COLOR.PURPLE; const keywordColor = COLOR.PURPLE;
const operatorColor = COLOR.CYAN; const operatorColor = COLOR.CYAN;
const valueColor = COLOR.ORANGE; const valueColor = COLOR.ORANGE;
const stringColor = COLOR.GREEN; const stringColor = COLOR.GREEN;
const regexColor = stringColor; const regexColor = stringColor;
const punctuationColor = COLOR.WHITE; const punctuationColor = COLOR.LIGHTGRAY;
const commentColor = COLOR.GRAY; const commentColor = COLOR.GRAY;
const identifierColor = COLOR.LIGHTGRAY; const identifierColor = COLOR.REDDISH;
const invalidColor = COLOR.RED; const invalidColor = COLOR.RED;
const tokenColors = { const tokenColors = {
@ -358,13 +360,13 @@ const drawCodeField = (code: string, x: number, y: number, w: number, h: number)
} = indexToGrid(code, anchor); } = indexToGrid(code, anchor);
fillRect(x, y, w, h, COLOR.DARKBLUE); fillRect(x, y, w, h, COLOR.DARKBLUE);
if (anchor === focus) { if (anchor === focus) {
fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.RED); fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.YELLOW);
} else { } else {
// TODO: Draw this selection better // TODO: Draw this selection better
fillRect(x+anchorX*fontWidth-scrollX, y+anchorY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.GREEN); fillRect(x+anchorX*fontWidth-scrollX, y+anchorY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.WHITE);
fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.YELLOW); fillRect(x+focusX*fontWidth-scrollX, y+focusY*(fontHeight+1)-scrollY, fontWidth+1, fontHeight+1, COLOR.YELLOW);
} }
// TODO: syntax highlight built-in functions const builtins = Object.keys(getContext());
const tokens = [...tokenize(code)]; const tokens = [...tokenize(code)];
let cx = 0; let cx = 0;
let cy = 0; let cy = 0;
@ -384,6 +386,9 @@ const drawCodeField = (code: string, x: number, y: number, w: number, h: number)
if (punctuation.includes(token.value)) { if (punctuation.includes(token.value)) {
color = punctuationColor; color = punctuationColor;
} }
if (builtins.includes(token.value)) {
color = builtinColor;
}
drawText(x+cx-scrollX, 1+y+cy-scrollY, line, color); drawText(x+cx-scrollX, 1+y+cy-scrollY, line, color);
if (i === lines.length-1) { if (i === lines.length-1) {
cx += fontWidth*line.length; cx += fontWidth*line.length;

6
colors.ts
View File

@ -5,15 +5,15 @@ const colors = {
RED: [1, 0, 0], RED: [1, 0, 0],
YELLOW: [1, 1, 0], YELLOW: [1, 1, 0],
GREEN: [0, 1, 0], GREEN: [0, 1, 0],
BLUE: [0, 0, 1], BLUE: [0.1, 0.5, 1],
DARKBLUE: [0.1, 0.05, 0.4], DARKBLUE: [0.05, 0.1, 0.3],
BROWN: [0.6, 0.5, 0.4], BROWN: [0.6, 0.5, 0.4],
GRAY: [0.5, 0.5, 0.5], GRAY: [0.5, 0.5, 0.5],
PURPLE: [0.7, 0.1, 0.85], PURPLE: [0.7, 0.1, 0.85],
ORANGE: [0.95, 0.75, 0.25], ORANGE: [0.95, 0.75, 0.25],
CYAN: [0, 0.9, 0.9], CYAN: [0, 0.9, 0.9],
LIGHTGRAY: [0.75, 0.75, 0.75], LIGHTGRAY: [0.75, 0.75, 0.75],
REDDISH: [0.7, 1, 0.5], REDDISH: [216/255, 59/255, 113/255],
DARKGREEN: [0, 0.6, 0.2], DARKGREEN: [0, 0.6, 0.2],
} as const; } as const;

4
runcode.ts
View File

@ -45,3 +45,7 @@ export const evalCode = (code: string) => {
export const addToContext = (name: string, value: any) => { export const addToContext = (name: string, value: any) => {
G[name] = value; G[name] = value;
} }
export const getContext = () => {
return G;
}