Ocelot IDE lib definition + IntelliSense unlock script

lib220.d.ts

// lib220
/**
 * Pixel: The type of each element in a canvas.
 * Each number in pixel represents R, G, B, respectively.
 */
type Pixel = [number, number, number];

interface Canvas {
    /**
     * The drawLine function draws a line on the canvas that stretches from a designated
     * start point to a designated endpoint.
     * @param x1 The location on the x-axis of the desired start point of the line
     * @param y1 The location on the y-axis of the desired start point of the line
     * @param x2 The location on the x-axis of the desired end point of the line
     * @param y2 The location on the y-axis of the desired end point of the line
     * @param color The desired color of the line given as a tri-color pixel
     */
    drawLine(
        x1: number,
        y1: number,
        x2: number,
        y2: number,
        color: Pixel
    ): void;

    /**
     * The drawArc function draws an arc of a designated color centered at a given point
     * with a given radius. The function will start drawing the arc from the location
     * startRadians to the location end Radians in a clockwise direction.
     * @param x The location on the x-axis of the center of the desired arc
     * @param y The location on the y-axis of the center of the desired arc
     * @param radius The size of the radius of the desired arc
     * @param startRadians The location on the unit circle of the start of the arc
     * @param endRadians The location on the unit circle of the end of the arc
     * @param color The desired color of the arc given as a tri-color pixel
     */
    drawArc(
        x: number,
        y: number,
        radius: number,
        startRadians: number,
        endRadians: number,
        color: Pixel
    ): void;

    /**
     * The drawCircle function draws a circle of a designated color centered at a given
     * point with a given radius.
     * @param x The location on the x-axis of the center of the desired circle
     * @param y The location on the y-axis of the center of the desired circle
     * @param radius The size of the radius of the desired circle
     * @param color The desired color of the arc given as a tri-color pixel
     */
    drawCircle(x: number, y: number, radius: number, color: Pixel): void;

    /**
     * The drawFilledCircle function draws a circle of a designated color centered at a
     * given point with a given radius.
     * @param x The location on the x-axis of the center of the desired circle
     * @param y The location on the y-axis of the center of the desired circle
     * @param radius The size of the radius of the desired circle
     * @param color The desired color of the arc given as a tri-color pixel
     */
    drawFilledCircle(x: number, y: number, radius: number, color: Pixel): void;

    /**
     * The clear function clears the canvas.
     */
    clear(): void;
}

interface Image {
    /**
     * The getPixel function is designed to access and get rgb channel data from a
     * specified (x, y) location in an image. You can not directly change the value of
     * the accessed pixel using getPixel.
     * @param x the x coordinate of the pixel in the image
     * @param y the y coordinate of the pixel in the image
     */
    getPixel(x: number, y: number): Pixel;

    /**
     * The setPixel function is designed to access and alter rgb channel data from a
     * specified (x, y) location in an image. You can directly change the value of the
     * accessed pixel using setPixel by inputting a new pixel value.
     * @param x the x coordinate of the pixel in the image
     * @param y the y coordinate of the pixel in the image
     * @param rgb the desired pixel values between 0 and 1 for the rgb channels
     */
    setPixel(x: number, y: number, rgb: Pixel): void;

    /**
     * The copy function will create a shallow copy of a specified image.
     */
    copy(): Image;

    /**
     * The show function will display a desired image on the canvas.
     */
    show(): void;

    /**
     * The width of the canvas
     */
    width: number;
    /**
     * The height of the canvas
     */
    height: number;
}

interface GetPropertyResult {
    /**
     * Whether or not the property was found.
     */
    found: boolean;
    /**
     * The value of the property, if that property was found.
     */
    value: any;
}

declare namespace lib220 {
    /**
     * The newCanvas function is creates a blank white canvas and displays it in Ocelot.
     * @param width the width of the desired canvas
     * @param height the height of the desired canvas
     */
    function newCanvas(width: number, height: number): Canvas;

    /**
     * The loadImageFromURL function imports an image to the workspace from a given url.
     * @param url web link containing the storage location and data of a desired image.
     */
    function loadImageFromURL(url: string): Image;

    /**
     * The createImage function will create a new image with a desired width, height,
     * and fill of desired rgb channel pixel values.
     * @param width the width of the desired image
     * @param height the height of the desired image
     * @param rgb the desired pixel values between 0 and 1 for the rgb channels
     */
    function createImage(width: number, height: number, rgb: Pixel): Image;

    /**
     * loadJSONFromURL loads a JSON file from a given URL and returns the JSON file as
     * a JavaScript object.
     * @param url the url that directs to plain JSON text
     */
    function loadJSONFromURL(url: string): Object;

    /**
     * Prompts for user input.
     * @param message message displayed when prompting for user input
     */
    function input(message: string): string;

    /**
     * Pauses the program for the specified amount of time.
     * @param ms the amount of time in milleseconds for which to pause the program
     */
    function sleep(ms: number): void;

    /**
     * getProperty takes in a parsed JSON object and the string name of an object member
     * and returns another object. The returned object has two member variables, found and
     * value, to indicate whether the property with the specified string was found in the
     * object or not, and if so, to return its value.
     * @param object object to get the property from
     * @param prop a string that refers to the property of object
     */
    function getProperty(object: Object, prop: string): GetPropertyResult;

    /**
     * setProperty takes in a parsed JSON object, the string name of an object member,
     * and a value to set that member to.
     * @param object object to set the property from
     * @param prop a string that refers to the property of object
     * @param value value to set the property to
     */
    function setProperty(object: Object, prop: string, value: any): void;
}

/**
 * The test function defines a test.
 * @param description a description of what is being tested. It will be printed when
 * that particular test fails
 * @param f the function that is run when that paricular test is run
 */
declare function test(description: string, f: () => void): void;

/**
 * The assert function is meant to be used within a test. It throws an exception if
 * its input predicate is false.
 * @param predicate predicate that you are checking
 */
declare function assert(predicate: boolean): void;

import ocelot = lib220;

// Runtime
interface ArrayConstructor {
    static create(length: number, init: any): any[];
}

declare function version(): { elementaryJS: string; ocelot: string };

// Oracle
type Hire = { company: number; candidate: number };

declare function hire(company: number, candidate: number): Hire;
declare function wheat1(companies: number[][], candidates: number[][]): Hire[];
declare function chaff1(companies: number[][], candidates: number[][]): Hire[];

type Offer = { from: number; to: number; fromCo: boolean };
type Run = { trace: Offer[]; out: Hire[] };

interface Oracle {
    hire(company: number, candidate: number): Hire;
    wheat1(companies: number[][], candidates: number[][]): Hire[];
    chaff1(companies: number[][], candidates: number[][]): Hire[];
    traceWheat1(companies: number[][], candidates: number[][]): Run;
    traceChaff1(companies: number[][], candidates: number[][]): Run;
}

declare function require(module: string): Oracle | any;

// Parser
type Result<T> = { kind: "ok"; value: T } | { kind: "error"; message: string };
type Binop = "+" | "-" | "*" | "/" | "&&" | "||" | ">" | "<" | "===";
type Expr =
    | { kind: "boolean"; value: boolean }
    | { kind: "number"; value: number }
    | { kind: "variable"; name: string }
    | { kind: "operator"; op: Binop; e1: Expr; e2: Expr };
type Stmt =
    | { kind: "let"; name: string; expression: Expr }
    | { kind: "assignment"; name: string; expression: Expr }
    | { kind: "if"; test: Expr; truePart: Stmt[]; falsePart: Stmt[] }
    | { kind: "while"; test: Expr; body: Stmt[] }
    | { kind: "print"; expression: Expr };

declare var parser: {
    parseExpression(str: string): Result<Expr>;
    parseProgram(str: string): Result<Stmt[]>;
};

type State = { [key: string]: number | boolean };

pastable.js

const modelUpdate=m=>{monaco.editor.setModelLanguage(m,"javascript");m.updateOptions({tabSize:4})};const configureEditor=async e=>{await e.model!==undefined&&e.model!==null;modelUpdate(e)};monaco.editor.onDidCreateEditor(configureEditor);monaco.editor.getModels().forEach(modelUpdate);var r=new XMLHttpRequest;r.open("GET","https://gist.githubusercontent.com/dungwinux/3af18c15586f155c5af72427350067b3/raw/lib220.d.ts");r.addEventListener("load",(()=>{monaco.languages.typescript.javascriptDefaults.addExtraLib(this.responseText)}));r.send();document.querySelector(".Index-jumboContent-3 div.Pane.vertical.Pane1").style.width="80%";

userscript.js

// ==UserScript==
// @name         Ocelot IDE IntelliSense unlock
// @namespace    mailto:ntddebugger@gmail.com
// @version      0.5
// @description  Unlock IntelliSense feature of Monaco editor in Ocelot IDE. Forked from https://gist.github.com/stephanlensky/445a7867159fbab1ad2035961ceaf1e8
// @author       Dung Nguyen Tuan, Stephan Lensky
// @match        https://code.ocelot-ide.org/
// @run-at       document-end
// @grant        GM_xmlhttpRequest
// ==/UserScript==

// Kudos to Stephan Lensky for lib220 type defintion and the base of userscript.js
// Here I modified to make things run smoother

// Define global configuration for the script here
var config = {
    tabSize: 4,
    editorWidthPercent: 80,
};

var ocelotLib =
    "https://gist.githubusercontent.com/dungwinux/3af18c15586f155c5af72427350067b3/raw/lib220.d.ts";

function main(config) {
    // change the width of the editor
    async function styleEditorPane(widthPercent) {
        (await document.querySelector(
            ".Index-jumboContent-3 div.Pane.vertical.Pane1"
        )) !== null;
        var pane = document.querySelector(
            ".Index-jumboContent-3 div.Pane.vertical.Pane1"
        );
        if (pane !== null) {
            pane.style.width = widthPercent + "%";
        }
    }

    // Update editor settings and change language model to JS
    async function configureEditor(e) {
        (await e.model) !== undefined && e.model !== null;

        // apply any custom styles to the editor pane
        styleEditorPane(config.editorWidthPercent);

        // set the indentation length (in spaces)
        e.model.updateOptions({ tabSize: config.tabSize });

        /**
         * set the language of the editor to JS, instead of the default 'elementaryjs'
         * this has a number of side-effects, including:
         *   - auto-closing pairs (parens, brackets, etc.)
         *   - autocomplete
         */
        monaco.editor.setModelLanguage(e.model, "javascript");
    }

    if (window.monaco === undefined) {
        console.error(
            "window.monaco is undefined, cannot modify editor-specific parts"
        );
        return;
    }
    var monaco = window.monaco;

    monaco.editor.onDidCreateEditor(configureEditor);
    monaco.languages.typescript.javascriptDefaults.addExtraLib(config._lib);
}
// Apply the modification to DOM as defer script
function start(res) {
    config._lib = res.responseText;
    // Creating new Node
    // It seems like there's no way other than using defer script
    var s = document.createElement("script");
    s.defer = true;
    s.textContent = `(${main})(${JSON.stringify(config)})`;
    var loc = document.body || document.head;
    loc.appendChild(s);
}

// Preload the library definition, then start adding it to the editor
GM_xmlhttpRequest({
    method: "GET",
    url: ocelotLib,
    onload: start,
    onerror: console.error,
});