Initial commit

2024-05-18 19:45:52 +03:00 · 2024-05-18 19:45:52 +03:00 · 0083c57196
commit 0083c57196
16 changed files with 9919 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,3 @@
+node_modules
+dist
+.parcel-cache
--- a/index.html
+++ b/index.html
@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<link rel="stylesheet" href="./res/codemirror/codemirror.css">
+<script src="./res/codemirror/codemirror.js"></script>
+<script src="./res/codemirror/match-highlighter.js"></script>
+<script src="./res/codemirror/basic.js"></script>
+<script src="./res/codemirror/active-line.js"></script>
+<link rel="stylesheet" href="./res/codemirror/eclipse.css">
+<link rel="stylesheet" href="./res/style.css">
+<title>Mobile Basic</title>
+</head>
+<body>
+    <div id="ide">
+        <div id="file-drop"><label for="file-input">Drop *.bas file here, or click to open a file chooser.</label></div>
+        <textarea id="code" name="code"></textarea>
+    </div>
+    <input type="file" id="file-input" />
+</body>
+<script type="module" src="./src/main.ts"></script>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
+{
+  "name": "mobile-basic-ts",
+  "version": "0.1.0",
+  "description": "Mobile Basic",
+  "scripts": {
+    "dev": "parcel",
+    "start": "parcel serve ./index.html",
+    "build": "parcel build ./index.html --dist-dir ./dist --public-url ./"
+  },
+  "keywords": [
+    "typescript",
+    "javascriptm",
+    "project",
+    "parser"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "http://git.annimon.com/other-projects/RpyPlayerTS"
+  },
+  "author": "aNNiMON",
+  "license": "MIT",
+  "dependencies": {
+    "typescript": "^5.4.2"
+  },
+  "devDependencies": {
+    "parcel": "^2.12.0"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/res/codemirror/active-line.js
+++ b/res/codemirror/active-line.js
@ -0,0 +1,40 @@
+// Because sometimes you need to style the cursor's line.
+//
+// Adds an option 'styleActiveLine' which, when enabled, gives the
+// active line's wrapping <div> the CSS class "CodeMirror-activeline",
+// and gives its background <div> the class "CodeMirror-activeline-background".
+
+(function() {
+    "use strict";
+    var WRAP_CLASS = "CodeMirror-activeline";
+    var BACK_CLASS = "CodeMirror-activeline-background";
+
+    CodeMirror.defineOption("styleActiveLine", false, function(cm, val, old) {
+        var prev = old && old != CodeMirror.Init;
+        if (val && !prev) {
+            updateActiveLine(cm);
+            cm.on("cursorActivity", updateActiveLine);
+        } else if (!val && prev) {
+            cm.off("cursorActivity", updateActiveLine);
+            clearActiveLine(cm);
+            delete cm.state.activeLine;
+        }
+    });
+
+    function clearActiveLine(cm) {
+        if ("activeLine" in cm.state) {
+            cm.removeLineClass(cm.state.activeLine, "wrap", WRAP_CLASS);
+            cm.removeLineClass(cm.state.activeLine, "background", BACK_CLASS);
+        }
+    }
+
+    function updateActiveLine(cm) {
+        var line = cm.getLineHandle(cm.getCursor().line);
+        if (cm.state.activeLine == line)
+            return;
+        clearActiveLine(cm);
+        cm.addLineClass(line, "wrap", WRAP_CLASS);
+        cm.addLineClass(line, "background", BACK_CLASS);
+        cm.state.activeLine = line;
+    }
+})();
--- a/res/codemirror/basic.js
+++ b/res/codemirror/basic.js
@ -0,0 +1,266 @@
+CodeMirror.defineMode("basic", function(conf, parserConf) {
+    var ERRORCLASS = 'error';
+
+    function wordRegexp(words) {
+        return new RegExp("^((" + words.join(")|(") + "))\\b", "i");
+    }
+
+    var singleOperators = new RegExp("^[\\+\\-\\*/%&\\\\|\\^~<>!]");
+    var singleDelimiters = new RegExp('^[\\(\\)\\[\\]\\{\\}@,:`=;\\.]');
+    var doubleOperators = new RegExp("^((==)|(<>)|(<=)|(>=)|(<>)|(<<)|(>>)|(//)|(\\*\\*))");
+    var doubleDelimiters = new RegExp("^((\\+=)|(\\-=)|(\\*=)|(%=)|(/=)|(&=)|(\\|=)|(\\^=))");
+    var tripleDelimiters = new RegExp("^((//=)|(>>=)|(<<=)|(\\*\\*=))");
+    var identifiers = new RegExp("^[_A-Za-z][_A-Za-z0-9]*");
+
+    var openingKeywords = ['if'];
+    var middleKeywords = ['then', 'else'];
+    var endKeywords = ['next', 'loop'];
+
+    var wordOperators = wordRegexp(['in']);
+    var commonkeywords = ['stop', 'pop', 'return', 'repaint', 'sendsms','rand', 'alphagel', 'COLORALPHAGEL', 'end', 'new', 'run', 'dir', 'deg', 'rad', 'bye', 'goto', 'gosub', 'sleep', 'print', 'rem', 'dim', 'if', 'then', 'cls', 'plot', 'drawline', 'fillrect', 'drawrect', 'fillroundrect', 'drawroundrect', 'fillarc', 'drawarc', 'drawstring', 'setcolor', 'blit', 'for', 'to', 'step', 'next', 'input', 'list', 'enter', 'load', 'save', 'delete', 'edit', 'trap', 'open', 'close', 'note', 'point', 'put', 'get', 'data', 'restore', 'read', 'bitand', 'bitor', 'bitxor', 'not', 'and', 'or', 'screenwidth', 'screenheight', 'iscolor', 'numcolors', 'stringwidth', 'stringheight', 'left', 'mid', 'right', 'chr', 'str', 'len', 'asc', 'val', 'up', 'down', 'left', 'right', 'fire', 'gamea', 'gameb', 'gamec', 'gamed', 'days', 'milliseconds', 'year', 'month', 'day', 'hour', 'minute', 'second', 'millisecond', 'rnd', 'err', 'fre', 'mod', 'editform', 'gaugeform', 'choiceform', 'dateform', 'messageform', 'log', 'exp', 'sqr', 'sin', 'cos', 'tan', 'asin', 'acos', 'atan', 'abs', 'print', 'input', ':', 'gelgrab', 'drawgel', 'spritegel', 'spritemove', 'spritehit', 'readdir', 'property', 'gelload', 'gelwidth', 'gelheight', 'playwav', 'playtone', 'inkey', 'select', 'alert', 'setfont', 'menuadd', 'menuitem', 'menuremove', 'call', 'endsub'];
+    var commontypes = ['integer', 'string', 'double', 'decimal', 'boolean', 'short', 'char', 'float', 'single'];
+
+    var keywords = wordRegexp(commonkeywords);
+    var types = wordRegexp(commontypes);
+    var stringPrefixes = '"';
+
+    var opening = wordRegexp(openingKeywords);
+    var middle = wordRegexp(middleKeywords);
+    var closing = wordRegexp(endKeywords);
+    var doubleClosing = wordRegexp(['end']);
+    var doOpening = wordRegexp(['do']);
+
+    var indentInfo = null;
+
+
+
+
+    function indent(_stream, state) {
+        state.currentIndent++;
+    }
+
+    function dedent(_stream, state) {
+        state.currentIndent--;
+    }
+    // tokenizers
+    function tokenBase(stream, state) {
+        if (stream.eatSpace()) {
+            return null;
+        }
+
+        var ch = stream.peek();
+
+        // Handle Comments
+        if (ch === "'") {
+            stream.skipToEnd();
+            return 'comment';
+        }
+
+
+        // Handle Number Literals
+        if (stream.match(/^((&H)|(&O))?[0-9\.a-f]/i, false)) {
+            var floatLiteral = false;
+            // Floats
+            if (stream.match(/^\d*\.\d+F?/i)) {
+                floatLiteral = true;
+            }
+            else if (stream.match(/^\d+\.\d*F?/)) {
+                floatLiteral = true;
+            }
+            else if (stream.match(/^\.\d+F?/)) {
+                floatLiteral = true;
+            }
+
+            if (floatLiteral) {
+                // Float literals may be "imaginary"
+                stream.eat(/J/i);
+                return 'number';
+            }
+            // Integers
+            var intLiteral = false;
+            // Hex
+            if (stream.match(/^&H[0-9a-f]+/i)) {
+                intLiteral = true;
+            }
+            // Octal
+            else if (stream.match(/^&O[0-7]+/i)) {
+                intLiteral = true;
+            }
+            // Decimal
+            else if (stream.match(/^[1-9]\d*F?/)) {
+                // Decimal literals may be "imaginary"
+                stream.eat(/J/i);
+                // TODO - Can you have imaginary longs?
+                intLiteral = true;
+            }
+            // Zero by itself with no other piece of number.
+            else if (stream.match(/^0(?![\dx])/i)) {
+                intLiteral = true;
+            }
+            if (intLiteral) {
+                // Integer literals may be "long"
+                stream.eat(/L/i);
+                return 'number';
+            }
+        }
+
+        // Handle Strings
+        if (stream.match(stringPrefixes)) {
+            state.tokenize = tokenStringFactory(stream.current());
+            return state.tokenize(stream, state);
+        }
+
+        // Handle operators and Delimiters
+        if (stream.match(tripleDelimiters) || stream.match(doubleDelimiters)) {
+            return null;
+        }
+        if (stream.match(doubleOperators)
+                || stream.match(singleOperators)
+                || stream.match(wordOperators)) {
+            return 'operator';
+        }
+        if (stream.match(singleDelimiters)) {
+            return null;
+        }
+        /*if (stream.match(doOpening)) {
+            indent(stream, state);
+            state.doInCurrentLine = true;
+            return 'keyword';
+        }
+        if (stream.match(opening)) {
+            if (!state.doInCurrentLine)
+                indent(stream, state);
+            else
+                state.doInCurrentLine = false;
+            return 'keyword';
+        }*/
+        if (stream.match(middle)) {
+            return 'keyword';
+        }
+
+        if (stream.match(doubleClosing)) {
+            dedent(stream, state);
+            dedent(stream, state);
+            return 'keyword';
+        }
+        if (stream.match(closing)) {
+            dedent(stream, state);
+            return 'keyword';
+        }
+
+        if (stream.match(types)) {
+            return 'keyword';
+        }
+
+        if (stream.match(keywords)) {
+            return 'keyword';
+        }
+
+        if (stream.match(identifiers)) {
+            return 'variable';
+        }
+
+        // Handle non-detected items
+        stream.next();
+        return ERRORCLASS;
+    }
+    
+      function nextUntilUnescaped(stream, end) {
+    var escaped = false, next;
+    while ((next = stream.next()) != null) {
+      if (next == end && !escaped)
+        return false;
+      escaped = !escaped && next == "\\";
+    }
+    return escaped;
+  }
+
+    function tokenStringFactory(delimiter) {
+        var singleline = delimiter.length == 1;
+        var OUTCLASS = 'string';
+        
+        
+          return function(stream, state) {
+      if (!nextUntilUnescaped(stream, '"'))
+        state.tokenize = tokenBase;
+            return OUTCLASS;
+        };
+    }
+
+
+    function tokenLexer(stream, state) {
+        var style = state.tokenize(stream, state);
+        var current = stream.current();
+
+        // Handle '.' connected identifiers
+        if (current === '.') {
+            style = state.tokenize(stream, state);
+            current = stream.current();
+            if (style === 'variable') {
+                return 'variable';
+            } else {
+                return ERRORCLASS;
+            }
+        }
+
+
+        var delimiter_index = '[({'.indexOf(current);
+        if (delimiter_index !== -1) {
+            indent(stream, state);
+        }
+        if (indentInfo === 'dedent') {
+            if (dedent(stream, state)) {
+                return ERRORCLASS;
+            }
+        }
+        delimiter_index = '])}'.indexOf(current);
+        if (delimiter_index !== -1) {
+            if (dedent(stream, state)) {
+                return ERRORCLASS;
+            }
+        }
+
+        return style;
+    }
+
+    var external = {
+        electricChars: "dDpPtTfFeE ",
+        startState: function() {
+            return {
+                tokenize: tokenBase,
+                lastToken: null,
+                currentIndent: 0,
+                nextLineIndent: 0,
+                doInCurrentLine: false
+
+
+            };
+        },
+        token: function(stream, state) {
+            if (stream.sol()) {
+                state.currentIndent += state.nextLineIndent;
+                state.nextLineIndent = 0;
+                state.doInCurrentLine = 0;
+            }
+            var style = tokenLexer(stream, state);
+
+            state.lastToken = {style: style, content: stream.current()};
+
+
+
+            return style;
+        },
+        indent: function(state, textAfter) {
+            var trueText = textAfter.replace(/^\s+|\s+$/g, '');
+            if (trueText.match(closing) || trueText.match(doubleClosing) || trueText.match(middle))
+                return conf.indentUnit * (state.currentIndent - 1);
+            if (state.currentIndent < 0)
+                return 0;
+            return state.currentIndent * conf.indentUnit;
+        }
+
+    };
+    return external;
+});
+
+CodeMirror.defineMIME("text/x-vb", "vb");
--- a/res/codemirror/codemirror.css
+++ b/res/codemirror/codemirror.css
@ -0,0 +1,243 @@
+/* BASICS */
+
+.CodeMirror {
+    /* Set height, width, borders, and global font properties here */
+    font-family: monospace;
+    height: 300px;
+}
+.CodeMirror-scroll {
+    /* Set scrolling behaviour here */
+    overflow: auto;
+}
+
+/* PADDING */
+
+.CodeMirror-lines {
+    padding: 4px 0; /* Vertical padding around content */
+}
+.CodeMirror pre {
+    padding: 0 4px; /* Horizontal padding of content */
+}
+
+.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    background-color: white; /* The little square between H and V scrollbars */
+}
+
+/* GUTTER */
+
+.CodeMirror-gutters {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+    white-space: nowrap;
+}
+.CodeMirror-linenumbers {}
+.CodeMirror-linenumber {
+    padding: 0 3px 0 5px;
+    min-width: 20px;
+    text-align: right;
+    color: #999;
+}
+
+/* CURSOR */
+
+.CodeMirror div.CodeMirror-cursor {
+    border-left: 1px solid black;
+    z-index: 3;
+}
+/* Shown when moving in bi-directional text */
+.CodeMirror div.CodeMirror-secondarycursor {
+    border-left: 1px solid silver;
+}
+.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
+    width: auto;
+    border: 0;
+    background: #7e7;
+    z-index: 1;
+}
+/* Can style cursor different in overwrite (non-insert) mode */
+.CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
+
+.cm-tab { display: inline-block; }
+
+/* DEFAULT THEME */
+
+.cm-s-default .cm-keyword {color: #708;}
+.cm-s-default .cm-atom {color: #219;}
+.cm-s-default .cm-number {color: #164;}
+.cm-s-default .cm-def {color: #00f;}
+.cm-s-default .cm-variable {color: black;}
+.cm-s-default .cm-variable-2 {color: #05a;}
+.cm-s-default .cm-variable-3 {color: #085;}
+.cm-s-default .cm-property {color: black;}
+.cm-s-default .cm-operator {color: black;}
+.cm-s-default .cm-comment {color: #a50;}
+.cm-s-default .cm-string {color: #a11;}
+.cm-s-default .cm-string-2 {color: #f50;}
+.cm-s-default .cm-meta {color: #555;}
+.cm-s-default .cm-error {color: #f00;}
+.cm-s-default .cm-qualifier {color: #555;}
+.cm-s-default .cm-builtin {color: #30a;}
+.cm-s-default .cm-bracket {color: #997;}
+.cm-s-default .cm-tag {color: #170;}
+.cm-s-default .cm-attribute {color: #00c;}
+.cm-s-default .cm-header {color: blue;}
+.cm-s-default .cm-quote {color: #090;}
+.cm-s-default .cm-hr {color: #999;}
+.cm-s-default .cm-link {color: #00c;}
+
+.cm-negative {color: #d44;}
+.cm-positive {color: #292;}
+.cm-header, .cm-strong {font-weight: bold;}
+.cm-em {font-style: italic;}
+.cm-link {text-decoration: underline;}
+
+.cm-invalidchar {color: #f00;}
+
+div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
+div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
+
+/* STOP */
+
+/* The rest of this file contains styles related to the mechanics of
+   the editor. You probably shouldn't touch them. */
+
+.CodeMirror {
+    line-height: 1;
+    position: relative;
+    overflow: hidden;
+    background: white;
+    color: black;
+}
+
+.CodeMirror-scroll {
+    /* 30px is the magic margin used to hide the element's real scrollbars */
+    /* See overflow: hidden in .CodeMirror */
+    margin-bottom: -30px; margin-right: -30px;
+    padding-bottom: 30px; padding-right: 30px;
+    height: 100%;
+    outline: none; /* Prevent dragging from highlighting the element */
+    position: relative;
+}
+.CodeMirror-sizer {
+    position: relative;
+}
+
+/* The fake, visible scrollbars. Used to force redraw during scrolling
+   before actuall scrolling happens, thus preventing shaking and
+   flickering artifacts. */
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+    position: absolute;
+    z-index: 6;
+    display: none;
+}
+.CodeMirror-vscrollbar {
+    right: 0; top: 0;
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+.CodeMirror-hscrollbar {
+    bottom: 0; left: 0;
+    overflow-y: hidden;
+    overflow-x: scroll;
+}
+.CodeMirror-scrollbar-filler {
+    right: 0; bottom: 0;
+}
+.CodeMirror-gutter-filler {
+    left: 0; bottom: 0;
+}
+
+.CodeMirror-gutters {
+    position: absolute; left: 0; top: 0;
+    padding-bottom: 30px;
+    z-index: 3;
+}
+.CodeMirror-gutter {
+    white-space: normal;
+    height: 100%;
+    padding-bottom: 30px;
+    margin-bottom: -32px;
+    display: inline-block;
+}
+.CodeMirror-gutter-elt {
+    position: absolute;
+    cursor: default;
+    z-index: 4;
+}
+
+.CodeMirror-lines {
+    cursor: text;
+}
+.CodeMirror pre {
+    /* Reset some styles that the rest of the page might have set */
+    -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
+    border-width: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    white-space: pre;
+    word-wrap: normal;
+    line-height: inherit;
+    color: inherit;
+    z-index: 2;
+    position: relative;
+    overflow: visible;
+}
+.CodeMirror-wrap pre {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: normal;
+}
+.CodeMirror-linebackground {
+    position: absolute;
+    left: 0; right: 0; top: 0; bottom: 0;
+    z-index: 0;
+}
+
+.CodeMirror-linewidget {
+    position: relative;
+    z-index: 2;
+    overflow: auto;
+}
+
+.CodeMirror-widget {
+    display: inline-block;
+}
+
+.CodeMirror-wrap .CodeMirror-scroll {
+    overflow-x: hidden;
+}
+
+.CodeMirror-measure {
+    position: absolute;
+    width: 100%; height: 0px;
+    overflow: hidden;
+    visibility: hidden;
+}
+.CodeMirror-measure pre { position: static; }
+
+.CodeMirror div.CodeMirror-cursor {
+    position: absolute;
+    visibility: hidden;
+    border-right: none;
+    width: 0;
+}
+.CodeMirror-focused div.CodeMirror-cursor {
+    visibility: visible;
+}
+
+.CodeMirror-selected { background: #d9d9d9; }
+.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
+
+.cm-searching {
+    background: #ffa;
+    background: rgba(255, 255, 0, .4);
+}
+
+@media print {
+    /* Hide the cursor when printing */
+    .CodeMirror div.CodeMirror-cursor {
+        visibility: hidden;
+    }
+}
--- a/res/codemirror/codemirror.js
+++ b/res/codemirror/codemirror.js
--- a/res/codemirror/eclipse.css
+++ b/res/codemirror/eclipse.css
@ -0,0 +1,25 @@
+.cm-s-eclipse span.cm-meta {color: #FF1717;}
+.cm-s-eclipse span.cm-keyword { line-height: 1em; font-weight: bold; color: #7F0055; }
+.cm-s-eclipse span.cm-atom {color: #219;}
+.cm-s-eclipse span.cm-number {color: #164;}
+.cm-s-eclipse span.cm-def {color: #00f;}
+.cm-s-eclipse span.cm-variable {color: blue;}
+.cm-s-eclipse span.cm-variable-2 {color: #0000C0;}
+.cm-s-eclipse span.cm-variable-3 {color: #0000C0;}
+.cm-s-eclipse span.cm-property {color: black;}
+.cm-s-eclipse span.cm-operator {color: black;}
+.cm-s-eclipse span.cm-comment {color: #3F7F5F;}
+.cm-s-eclipse span.cm-string {color: red; font-weight: bold;}
+.cm-s-eclipse span.cm-string-2 {color: #f50;}
+.cm-s-eclipse span.cm-error {color: black;}
+.cm-s-eclipse span.cm-qualifier {color: #555;}
+.cm-s-eclipse span.cm-builtin {color: #30a;}
+.cm-s-eclipse span.cm-bracket {color: #cc7;}
+.cm-s-eclipse span.cm-tag {color: #170;}
+.cm-s-eclipse span.cm-attribute {color: #00c;}
+.cm-s-eclipse span.cm-link {color: #219;}
+
+.cm-s-eclipse .CodeMirror-matchingbracket {
+	outline:1px solid grey;
+	color:black !important;
+}
--- a/res/codemirror/match-highlighter.js
+++ b/res/codemirror/match-highlighter.js
@ -0,0 +1,60 @@
+// Highlighting text that matches the selection
+//
+// Defines an option highlightSelectionMatches, which, when enabled,
+// will style strings that match the selection throughout the
+// document.
+//
+// The option can be set to true to simply enable it, or to a
+// {minChars, style} object to explicitly configure it. minChars is
+// the minimum amount of characters that should be selected for the
+// behavior to occur, and style is the token style to apply to the
+// matches. This will be prefixed by "cm-" to create an actual CSS
+// class name.
+
+(function() {
+  var DEFAULT_MIN_CHARS = 2;
+  var DEFAULT_TOKEN_STYLE = "matchhighlight";
+
+  function State(options) {
+    this.minChars = typeof options == "object" && options.minChars || DEFAULT_MIN_CHARS;
+    this.style = typeof options == "object" && options.style || DEFAULT_TOKEN_STYLE;
+    this.overlay = null;
+  }
+
+  CodeMirror.defineOption("highlightSelectionMatches", false, function(cm, val, old) {
+    var prev = old && old != CodeMirror.Init;
+    if (val && !prev) {
+      cm.state.matchHighlighter = new State(val);
+      cm.on("cursorActivity", highlightMatches);
+    } else if (!val && prev) {
+      var over = cm.state.matchHighlighter.overlay;
+      if (over) cm.removeOverlay(over);
+      cm.state.matchHighlighter = null;
+      cm.off("cursorActivity", highlightMatches);
+    }
+  });
+
+  function highlightMatches(cm) {
+    cm.operation(function() {
+      var state = cm.state.matchHighlighter;
+      if (state.overlay) {
+        cm.removeOverlay(state.overlay);
+        state.overlay = null;
+      }
+
+      if (!cm.somethingSelected()) return;
+      var selection = cm.getSelection().replace(/^\s+|\s+$/g, "");
+      if (selection.length < state.minChars) return;
+
+      cm.addOverlay(state.overlay = makeOverlay(selection, state.style));
+    });
+  }
+
+  function makeOverlay(query, style) {
+    return {token: function(stream) {
+      if (stream.match(query)) return style;
+      stream.next();
+      stream.skipTo(query.charAt(0)) || stream.skipToEnd();
+    }};
+  }
+})();
--- a/res/codemirror/search.js
+++ b/res/codemirror/search.js
@ -0,0 +1,131 @@
+// Define search commands. Depends on dialog.js or another
+// implementation of the openDialog method.
+
+// Replace works a little oddly -- it will do the replace on the next
+// Ctrl-G (or whatever is bound to findNext) press. You prevent a
+// replace by making sure the match is no longer selected when hitting
+// Ctrl-G.
+
+(function() {
+  function searchOverlay(query) {
+    if (typeof query == "string") return {token: function(stream) {
+      if (stream.match(query)) return "searching";
+      stream.next();
+      stream.skipTo(query.charAt(0)) || stream.skipToEnd();
+    }};
+    return {token: function(stream) {
+      if (stream.match(query)) return "searching";
+      while (!stream.eol()) {
+        stream.next();
+        if (stream.match(query, false)) break;
+      }
+    }};
+  }
+
+  function SearchState() {
+    this.posFrom = this.posTo = this.query = null;
+    this.overlay = null;
+  }
+  function getSearchState(cm) {
+    return cm.state.search || (cm.state.search = new SearchState());
+  }
+  function getSearchCursor(cm, query, pos) {
+    // Heuristic: if the query string is all lowercase, do a case insensitive search.
+    return cm.getSearchCursor(query, pos, typeof query == "string" && query == query.toLowerCase());
+  }
+  function dialog(cm, text, shortText, f) {
+    if (cm.openDialog) cm.openDialog(text, f);
+    else f(prompt(shortText, ""));
+  }
+  function confirmDialog(cm, text, shortText, fs) {
+    if (cm.openConfirm) cm.openConfirm(text, fs);
+    else if (confirm(shortText)) fs[0]();
+  }
+  function parseQuery(query) {
+    var isRE = query.match(/^\/(.*)\/([a-z]*)$/);
+    return isRE ? new RegExp(isRE[1], isRE[2].indexOf("i") == -1 ? "" : "i") : query;
+  }
+  var queryDialog =
+    'Search: <input type="text" style="width: 10em"/> <span style="color: #888">(Use /re/ syntax for regexp search)</span>';
+  function doSearch(cm, rev) {
+    var state = getSearchState(cm);
+    if (state.query) return findNext(cm, rev);
+    dialog(cm, queryDialog, "Search for:", function(query) {
+      cm.operation(function() {
+        if (!query || state.query) return;
+        state.query = parseQuery(query);
+        cm.removeOverlay(state.overlay);
+        state.overlay = searchOverlay(query);
+        cm.addOverlay(state.overlay);
+        state.posFrom = state.posTo = cm.getCursor();
+        findNext(cm, rev);
+      });
+    });
+  }
+  function findNext(cm, rev) {cm.operation(function() {
+    var state = getSearchState(cm);
+    var cursor = getSearchCursor(cm, state.query, rev ? state.posFrom : state.posTo);
+    if (!cursor.find(rev)) {
+      cursor = getSearchCursor(cm, state.query, rev ? CodeMirror.Pos(cm.lastLine()) : CodeMirror.Pos(cm.firstLine(), 0));
+      if (!cursor.find(rev)) return;
+    }
+    cm.setSelection(cursor.from(), cursor.to());
+    state.posFrom = cursor.from(); state.posTo = cursor.to();
+  });}
+  function clearSearch(cm) {cm.operation(function() {
+    var state = getSearchState(cm);
+    if (!state.query) return;
+    state.query = null;
+    cm.removeOverlay(state.overlay);
+  });}
+
+  var replaceQueryDialog =
+    'Replace: <input type="text" style="width: 10em"/> <span style="color: #888">(Use /re/ syntax for regexp search)</span>';
+  var replacementQueryDialog = 'With: <input type="text" style="width: 10em"/>';
+  var doReplaceConfirm = "Replace? <button>Yes</button> <button>No</button> <button>Stop</button>";
+  function replace(cm, all) {
+    dialog(cm, replaceQueryDialog, "Replace:", function(query) {
+      if (!query) return;
+      query = parseQuery(query);
+      dialog(cm, replacementQueryDialog, "Replace with:", function(text) {
+        if (all) {
+          cm.operation(function() {
+            for (var cursor = getSearchCursor(cm, query); cursor.findNext();) {
+              if (typeof query != "string") {
+                var match = cm.getRange(cursor.from(), cursor.to()).match(query);
+                cursor.replace(text.replace(/\$(\d)/, function(_, i) {return match[i];}));
+              } else cursor.replace(text);
+            }
+          });
+        } else {
+          clearSearch(cm);
+          var cursor = getSearchCursor(cm, query, cm.getCursor());
+          var advance = function() {
+            var start = cursor.from(), match;
+            if (!(match = cursor.findNext())) {
+              cursor = getSearchCursor(cm, query);
+              if (!(match = cursor.findNext()) ||
+                  (start && cursor.from().line == start.line && cursor.from().ch == start.ch)) return;
+            }
+            cm.setSelection(cursor.from(), cursor.to());
+            confirmDialog(cm, doReplaceConfirm, "Replace?",
+                          [function() {doReplace(match);}, advance]);
+          };
+          var doReplace = function(match) {
+            cursor.replace(typeof query == "string" ? text :
+                           text.replace(/\$(\d)/, function(_, i) {return match[i];}));
+            advance();
+          };
+          advance();
+        }
+      });
+    });
+  }
+
+  CodeMirror.commands.find = function(cm) {clearSearch(cm); doSearch(cm);};
+  CodeMirror.commands.findNext = doSearch;
+  CodeMirror.commands.findPrev = function(cm) {doSearch(cm, true);};
+  CodeMirror.commands.clearSearch = clearSearch;
+  CodeMirror.commands.replace = replace;
+  CodeMirror.commands.replaceAll = function(cm) {replace(cm, true);};
+})();
--- a/res/codemirror/searchcursor.js
+++ b/res/codemirror/searchcursor.js
@ -0,0 +1,143 @@
+(function(){
+  var Pos = CodeMirror.Pos;
+
+  function SearchCursor(doc, query, pos, caseFold) {
+    this.atOccurrence = false; this.doc = doc;
+    if (caseFold == null && typeof query == "string") caseFold = false;
+
+    pos = pos ? doc.clipPos(pos) : Pos(0, 0);
+    this.pos = {from: pos, to: pos};
+
+    // The matches method is filled in based on the type of query.
+    // It takes a position and a direction, and returns an object
+    // describing the next occurrence of the query, or null if no
+    // more matches were found.
+    if (typeof query != "string") { // Regexp match
+      if (!query.global) query = new RegExp(query.source, query.ignoreCase ? "ig" : "g");
+      this.matches = function(reverse, pos) {
+        if (reverse) {
+          query.lastIndex = 0;
+          var line = doc.getLine(pos.line).slice(0, pos.ch), cutOff = 0, match, start;
+          for (;;) {
+            query.lastIndex = cutOff;
+            var newMatch = query.exec(line);
+            if (!newMatch) break;
+            match = newMatch;
+            start = match.index;
+            cutOff = match.index + (match[0].length || 1);
+            if (cutOff == line.length) break;
+          }
+          var matchLen = (match && match[0].length) || 0;
+          if (!matchLen) {
+            if (start == 0 && line.length == 0) {match = undefined;}
+            else if (start != doc.getLine(pos.line).length) {
+              matchLen++;
+            }
+          }
+        } else {
+          query.lastIndex = pos.ch;
+          var line = doc.getLine(pos.line), match = query.exec(line);
+          var matchLen = (match && match[0].length) || 0;
+          var start = match && match.index;
+          if (start + matchLen != line.length && !matchLen) matchLen = 1;
+        }
+        if (match && matchLen)
+          return {from: Pos(pos.line, start),
+                  to: Pos(pos.line, start + matchLen),
+                  match: match};
+      };
+    } else { // String query
+      if (caseFold) query = query.toLowerCase();
+      var fold = caseFold ? function(str){return str.toLowerCase();} : function(str){return str;};
+      var target = query.split("\n");
+      // Different methods for single-line and multi-line queries
+      if (target.length == 1) {
+        if (!query.length) {
+          // Empty string would match anything and never progress, so
+          // we define it to match nothing instead.
+          this.matches = function() {};
+        } else {
+          this.matches = function(reverse, pos) {
+            var line = fold(doc.getLine(pos.line)), len = query.length, match;
+            if (reverse ? (pos.ch >= len && (match = line.lastIndexOf(query, pos.ch - len)) != -1)
+                        : (match = line.indexOf(query, pos.ch)) != -1)
+              return {from: Pos(pos.line, match),
+                      to: Pos(pos.line, match + len)};
+          };
+        }
+      } else {
+        this.matches = function(reverse, pos) {
+          var ln = pos.line, idx = (reverse ? target.length - 1 : 0), match = target[idx], line = fold(doc.getLine(ln));
+          var offsetA = (reverse ? line.indexOf(match) + match.length : line.lastIndexOf(match));
+          if (reverse ? offsetA >= pos.ch || offsetA != match.length
+              : offsetA <= pos.ch || offsetA != line.length - match.length)
+            return;
+          for (;;) {
+            if (reverse ? !ln : ln == doc.lineCount() - 1) return;
+            line = fold(doc.getLine(ln += reverse ? -1 : 1));
+            match = target[reverse ? --idx : ++idx];
+            if (idx > 0 && idx < target.length - 1) {
+              if (line != match) return;
+              else continue;
+            }
+            var offsetB = (reverse ? line.lastIndexOf(match) : line.indexOf(match) + match.length);
+            if (reverse ? offsetB != line.length - match.length : offsetB != match.length)
+              return;
+            var start = Pos(pos.line, offsetA), end = Pos(ln, offsetB);
+            return {from: reverse ? end : start, to: reverse ? start : end};
+          }
+        };
+      }
+    }
+  }
+
+  SearchCursor.prototype = {
+    findNext: function() {return this.find(false);},
+    findPrevious: function() {return this.find(true);},
+
+    find: function(reverse) {
+      var self = this, pos = this.doc.clipPos(reverse ? this.pos.from : this.pos.to);
+      function savePosAndFail(line) {
+        var pos = Pos(line, 0);
+        self.pos = {from: pos, to: pos};
+        self.atOccurrence = false;
+        return false;
+      }
+
+      for (;;) {
+        if (this.pos = this.matches(reverse, pos)) {
+          if (!this.pos.from || !this.pos.to) { console.log(this.matches, this.pos); }
+          this.atOccurrence = true;
+          return this.pos.match || true;
+        }
+        if (reverse) {
+          if (!pos.line) return savePosAndFail(0);
+          pos = Pos(pos.line-1, this.doc.getLine(pos.line-1).length);
+        }
+        else {
+          var maxLine = this.doc.lineCount();
+          if (pos.line == maxLine - 1) return savePosAndFail(maxLine);
+          pos = Pos(pos.line + 1, 0);
+        }
+      }
+    },
+
+    from: function() {if (this.atOccurrence) return this.pos.from;},
+    to: function() {if (this.atOccurrence) return this.pos.to;},
+
+    replace: function(newText) {
+      if (!this.atOccurrence) return;
+      var lines = CodeMirror.splitLines(newText);
+      this.doc.replaceRange(lines, this.pos.from, this.pos.to);
+      this.pos.to = Pos(this.pos.from.line + lines.length - 1,
+                        lines[lines.length - 1].length + (lines.length == 1 ? this.pos.from.ch : 0));
+    }
+  };
+
+  CodeMirror.defineExtension("getSearchCursor", function(query, pos, caseFold) {
+    return new SearchCursor(this.doc, query, pos, caseFold);
+  });
+  CodeMirror.defineDocExtension("getSearchCursor", function(query, pos, caseFold) {
+    return new SearchCursor(this, query, pos, caseFold);
+  });
+})();
--- a/res/style.css
+++ b/res/style.css
@ -0,0 +1,40 @@
+ body {
+     font-family: Arial, sans-serif;
+     margin: auto;
+     margin-top: 0.8rem;
+     max-width: 1000px;
+     background-color: #f8f8f8;
+     overflow-y: scroll;
+ }
+ #ide {
+     border: 1px solid silver;
+     border-radius: 4px;
+     padding: 1.2rem;
+     min-width: 600px;
+     margin: auto;
+     background-color: #e8f2ff;
+ }
+
+input {
+    display: none;
+ }
+ #file-drop {
+    text-align: center;
+    font-size: 1.2em;
+    margin-bottom: 0.5rem;
+ }
+
+
+ .CodeMirror {
+     width: 100%;
+     border: 1px solid silver;
+     border-radius: 0px 5px 5px 0px;
+ }
+ .CodeMirror-activeline-background {
+     background: #e8f2ff !important;
+ }
+ .CodeMirror-focused .cm-matchhighlight {
+     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQI12NgYGBgkKzc8x9CMDAwAAAmhwSbidEoSQAAAABJRU5ErkJggg==);
+     background-position: bottom;
+     background-repeat: repeat-x;
+ }
--- a/src/BASDecompiler.ts
+++ b/src/BASDecompiler.ts
@ -0,0 +1,202 @@
+import { Constants } from './Constants'
+
+export class BASDecompiler {
+    private static tosbyte(bytes: number): number {
+        if (0 <= bytes && bytes <= 63) {
+            return bytes;
+        }
+        if (64 <= bytes && bytes <= 191) {
+            return -(128 - bytes);
+        }
+        if (192 <= bytes && bytes <= 255) {
+            return -(256 - bytes);
+        }
+        return 0;
+    }
+
+    public static decompile(basdata: ArrayBuffer): string {
+        try {
+            const data = new DataView(basdata);
+            let offset = 0;
+
+            const readInt = () => {
+                const value = data.getInt32(offset);
+                offset += 4;
+                return value;
+            };
+            const readShort = () => {
+                const value = data.getInt16(offset);
+                offset += 2;
+                return value;
+            };
+            const readByte = () => {
+                const value = data.getInt8(offset);
+                offset += 1;
+                return value;
+            };
+            const readUnsignedByte = () => {
+                const value = data.getUint8(offset);
+                offset += 1;
+                return value;
+            };
+            const readFloat = () => {
+                const value = data.getFloat32(offset);
+                offset += 4;
+                return value;
+            };
+
+            let mb191: boolean;
+            switch (readInt()) {
+                case Constants.SIGNATURE_MB:
+                    mb191 = false;
+                    break;
+                case Constants.SIGNATURE_MB191:
+                    mb191 = true;
+                    break;
+                default:
+                    return "notbas";
+            }
+
+            // Read variable name
+            let varnum = readShort();
+            const varname: string[] = new Array(varnum);
+            let varn: string;
+
+            for (let i = 0; i < varnum; i++) {
+                varn = "";
+                const varlength = readShort();
+                for (let ii = 0; ii < varlength; ii++) {
+                    varn += String.fromCharCode(readByte());
+                }
+                readByte();
+                varname[i] = varn;
+            }
+
+            // Read float mb191
+            let floats: number[] = [];
+            if (mb191) {
+                varnum = readShort();
+                floats = new Array(varnum);
+                for (let i = 0; i < varnum; i++) {
+                    floats[i] = readFloat();
+                }
+            }
+            const codeln = readShort();
+            if (codeln !== data.byteLength - offset) {
+                return "obfuscate";
+            }
+
+            // Read code
+            let mainCode = "";
+
+            while (offset < data.byteLength) {
+                let first = true;
+                let line = `${readShort()}`;
+                const linelen = readByte() - 4;
+                const lims: number[] = new Array(linelen);
+                for (let iii = 0; iii < linelen; iii++) {
+                    lims[iii] = readUnsignedByte();
+                }
+                let cur = 0;
+
+                while (cur < lims.length) {
+                    const opType = lims[cur++];
+                    if (opType === 0xfc) { // Variable
+                        if (first) {
+                            line += ` ${varname[lims[cur]]}`;
+                        } else {
+                            line += varname[lims[cur]];
+                        }
+                        cur++;
+                    } else { // Operators
+                        first = false;
+                        let l: number;
+                        switch (opType) {
+                            case 0x0e:
+                                line += " REM ";
+                                l = lims[cur++];
+                                for (let i = 0; i < l; i++) {
+                                    line += String.fromCharCode(lims[cur++]);
+                                }
+                                break;
+
+                            case 0xfd:
+                                line += "\"";
+                                l = lims[cur++];
+                                for (let i = 0; i < l; i++) {
+                                    line += String.fromCharCode(lims[cur++]);
+                                }
+                                line += "\"";
+                                break;
+
+                            case 0x30:
+                                line += " DATA ";
+                                l = lims[cur++];
+                                for (let i = 0; i < l; i++) {
+                                    line += String.fromCharCode(lims[cur++]);
+                                }
+                                break;
+
+                            case 0xf6:
+                                line += "=";
+                                break;
+
+                            case 0xf7:
+                                continue;
+
+                            case 0xf8:
+                            case 0xf9:
+                                line += lims[cur++];
+                                break;
+
+                            case 0xfa:
+                                line += lims[cur] * 256 + lims[cur + 1];
+                                cur += 2;
+                                break;
+
+                            case 0xfb:
+                                line += lims[cur] * 16777216 + lims[cur + 1] * 65536 + lims[cur + 2] * 256 + lims[cur + 3];
+                                cur += 4;
+                                break;
+
+                            case 0xfe:
+                                if (mb191) {
+                                    line += floats[lims[cur++]];
+                                } else {
+                                    const exp = this.tosbyte(lims[cur + 3]);
+                                    const m = (65536 + lims[cur] * 65536 + lims[cur + 1] * 256 + lims[cur + 2]) / 500000;
+                                    let e = 1;
+                                    let d = 1;
+                                    if (exp > 0) {
+                                        for (let i = 0; i < exp; i++) {
+                                            d *= 10;
+                                        }
+                                        e = d;
+                                    }
+                                    if (exp < 0) {
+                                        for (let i = exp; i < 0; i++) {
+                                            d /= 10;
+                                        }
+                                        e = d;
+                                    }
+                                    line += e * m;
+                                    cur += 4;
+                                }
+                                break;
+
+                            default:
+                                line += Constants.ops[opType];
+                                break;
+                        }
+                    }
+                }
+                readUnsignedByte(); // consume the line's trailing byte
+                line += "\r\n";
+                mainCode += line;
+            }
+            return mainCode;
+        } catch (ex) {
+            return "";
+        }
+    }
+}
--- a/src/Constants.ts
+++ b/src/Constants.ts
@ -0,0 +1,24 @@
+export class Constants {
+    public static readonly SIGNATURE_MB = 0x4d420001;
+    public static readonly SIGNATURE_MB191 = 0x4d420191;
+
+    public static readonly ops = [
+        " STOP ", " POP ", " RETURN ", " END ", " NEW ", " RUN ", " DIR ", " DEG ", " RAD ", " BYE ", " GOTO ",
+        " GOSUB ", " SLEEP ", " PRINT ", " REM ", " DIM ", " IF ", " THEN ", " CLS ", " PLOT ", " DRAWLINE ",
+        " FILLRECT ", " DRAWRECT ", " FILLROUNDRECT ", " DRAWROUNDRECT ", " FILLARC ",
+        " DRAWARC ", " DRAWSTRING ", " SETCOLOR ", " BLIT ", " FOR ", " TO ", " STEP ", " NEXT ", " INPUT ",
+        " LIST ", " ENTER ", " LOAD ", " SAVE ", " DELETE ", " EDIT ", " TRAP ", " OPEN ", " CLOSE ",
+        " NOTE ", " POINT ", " PUT ", " GET ", " DATA ", " RESTORE ", " READ ", "=", "<>", "<", "<=",
+        ">", ">=", "(", ")", ",", "+", "-", "-", "*", "/", "^", " BITAND ", " BITOR ", " BITXOR ", " NOT ",
+        " AND ", " OR ", "SCREENWIDTH", "SCREENHEIGHT", " ISCOLOR ", " NUMCOLORS ", "STRINGWIDTH", "STRINGHEIGHT",
+        "LEFT$", "MID$", "RIGHT$", "CHR$", "STR$", "LEN", "ASC", "VAL", " UP ", " DOWN ", " LEFT ", " RIGHT ",
+        " FIRE ", " GAMEA ", " GAMEB ", " GAMEC ", " GAMED ", " DAYS ", " MILLISECONDS ",
+        " YEAR ", " MONTH ", " DAY ", " HOUR ", " MINUTE ", " SECOND ", " MILLISECOND ", "RND", " ERR ",
+        " FRE ", "MOD", "EDITFORM ", "GAUGEFORM ", "CHOICEFORM", "DATEFORM", "MESSAGEFORM",
+        "LOG", "EXP", "SQR", "SIN", "COS", "TAN", "ASIN", "ACOS", "ATAN", "ABS", "=", "#", " PRINT ",
+        " INPUT ", ":", " GELGRAB ", " DRAWGEL ", " SPRITEGEL ", " SPRITEMOVE ", " SPRITEHIT ",
+        "READDIR$", "PROPERTY$", " GELLOAD ", " GELWIDTH", " GELHEIGHT", " PLAYWAV ", " PLAYTONE ",
+        " INKEY", "SELECT", "ALERT ", " SETFONT ", " MENUADD ", " MENUITEM", " MENUREMOVE ",
+        " CALL ", " ENDSUB ", " REPAINT", "SENDSMS ", " RAND", " ALPHAGEL ", " COLORALPHAGEL ", " PLATFORMREQUEST ", " DELGEL", " DELSPRITE ", "MKDIR"
+    ];
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,42 @@
+import { BASDecompiler } from './BASDecompiler'
+
+let editor : any;
+
+function openFile(file: File) {
+    const reader = new FileReader();
+    reader.onload = () => {
+        if (reader.result instanceof ArrayBuffer) {
+            editor.setValue(BASDecompiler.decompile(reader.result as ArrayBuffer));
+        }
+    };
+    reader.readAsArrayBuffer(file);
+}
+
+document.addEventListener('DOMContentLoaded', (e) => {
+    editor = CodeMirror.fromTextArea(document.getElementById('code'), {
+        lineNumbers: false,
+        styleActiveLine: true,
+        matchBrackets: true,
+        theme: 'eclipse',
+        highlightSelectionMatches: true
+    });
+
+    const fileInput = document.getElementById('file-input') as HTMLInputElement;
+    fileInput.onchange = (event) => {
+        openFile(fileInput.files[0]);
+    };
+
+    const panel : HTMLElement = document.getElementById('ide')!!;
+    panel.addEventListener('dragover', (event) => {
+        event.preventDefault();
+        panel.style.borderColor = 'blue';
+    });
+    panel.addEventListener('dragleave', () => {
+        panel.style.borderColor = '#ccc';
+    });
+    panel.addEventListener('drop', (event) => {
+        event.preventDefault();
+        panel.style.borderColor = '#ccc';
+        openFile(event.dataTransfer!!.files[0]);
+    });
+});