diff --git a/codetab.ts b/codetab.ts index e6d52fb..fe95847 100644 --- a/codetab.ts +++ b/codetab.ts @@ -5,6 +5,7 @@ import { COLOR } from "./colors.ts"; import {getCodeSheet, setSheet} from "./sheet.ts"; import { K, ctrlKeyDown, getKeyboardString, keyPressed, shiftKeyDown } from "./keyboard.ts"; import { clipboard, tokenize } from "./deps.ts"; +import { getContext } from "./runcode.ts"; const historyDebounceFrames = 20; @@ -313,14 +314,15 @@ const punctuation = [ ",", ]; +const builtinColor = COLOR.BLUE; const keywordColor = COLOR.PURPLE; const operatorColor = COLOR.CYAN; const valueColor = COLOR.ORANGE; const stringColor = COLOR.GREEN; const regexColor = stringColor; -const punctuationColor = COLOR.WHITE; +const punctuationColor = COLOR.LIGHTGRAY; const commentColor = COLOR.GRAY; -const identifierColor = COLOR.LIGHTGRAY; +const identifierColor = COLOR.REDDISH; const invalidColor = COLOR.RED; const tokenColors = { @@ -358,13 +360,13 @@ const drawCodeField = (code: string, x: number, y: number, w: number, h: number) } = indexToGrid(code, anchor); fillRect(x, y, w, h, COLOR.DARKBLUE); 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 { // 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); } - // TODO: syntax highlight built-in functions + const builtins = Object.keys(getContext()); const tokens = [...tokenize(code)]; let cx = 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)) { color = punctuationColor; } + if (builtins.includes(token.value)) { + color = builtinColor; + } drawText(x+cx-scrollX, 1+y+cy-scrollY, line, color); if (i === lines.length-1) { cx += fontWidth*line.length; diff --git a/colors.ts b/colors.ts index 63c9340..20b61d8 100644 --- a/colors.ts +++ b/colors.ts @@ -5,15 +5,15 @@ const colors = { RED: [1, 0, 0], YELLOW: [1, 1, 0], GREEN: [0, 1, 0], - BLUE: [0, 0, 1], - DARKBLUE: [0.1, 0.05, 0.4], + BLUE: [0.1, 0.5, 1], + DARKBLUE: [0.05, 0.1, 0.3], BROWN: [0.6, 0.5, 0.4], GRAY: [0.5, 0.5, 0.5], PURPLE: [0.7, 0.1, 0.85], ORANGE: [0.95, 0.75, 0.25], CYAN: [0, 0.9, 0.9], 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], } as const; diff --git a/runcode.ts b/runcode.ts index 88107eb..ecff898 100644 --- a/runcode.ts +++ b/runcode.ts @@ -44,4 +44,8 @@ export const evalCode = (code: string) => { // deno-lint-ignore no-explicit-any export const addToContext = (name: string, value: any) => { G[name] = value; +} + +export const getContext = () => { + return G; } \ No newline at end of file