v0.3.0-beta updates

codemirror/qb-lang.js

@@ -35,13 +35,18 @@ CodeMirror.defineMode("qbjs", function(conf, parserConf) {
     // TODO: adjust for QB
     var atomWords = ['true', 'false', 'nothing', 'empty', 'null'];
 
-    var builtinFuncsWords = ['_alpha', '_alpha32', '_atan2', '_autodisplay', '_blue', '_blue32', '_copyimage', '_delay', '_dest', '_dest', '_display', '_fontwidth',
+    var builtinFuncsWords = ['_alpha', '_alpha32', '_atan2', '_autodisplay', '_blue', '_blue32', '_continue', '_copyimage', '_delay', '_dest', '_dest',
-                             '_freeimage', '_green', '_green32', '_height', '_instrrev', '_limit', '_keyclear', '_keydown', '_keyhit', '_loadimage',
+                             '_display', '_fontwidth', '_freeimage', '_green', '_green32', '_height', '_instrrev', '_limit', '_keyclear', '_keydown',
-                             '_mousebutton', '_mouseinput', '_mousex', '_mousey', '_newimage', '_pi', '_printstring', '_printwidth', '_putimage',
+                             '_keyhit', '_loadimage', '_mousebutton', '_mouseinput', '_mousex', '_mousey', '_newimage', '_pi', '_printstring', '_printwidth',
-                             '_red', '_red32', '_rgb', '_rgba', '_rgb32', '_rgba32', '_round', '_screenexists', '_title', '_trim', '_width', 'abs',
+                             '_putimage', '_red', '_red32', '_resize', '_resizewidth', '_resizeheight', '_rgb', '_rgba', '_rgb32', '_rgba32', '_round',
-                             'asc', 'atn', 'chr', 'circle', 'cls', 'color', 'command', 'cos', 'exp', 'fix', 'input', 'inkey', 'instr', 'int',
+                             '_screenexists', '_sndclose', '_sndopen', '_sndplay', '_sndloop', '_sndpause', '_sndstop', '_sndvol', 
-                             'lbound', 'left', 'lcase', 'len', 'line', 'locate', 'log', 'ltrim', 'mid', 'print', 'pset', 'right', 'rtrim', 'rnd',
+                             '_title', '_trim', '_width', 'abs', 'asc', 'atn', 'chr', 'circle', 'cls', 'color', 'command', 'cos', 'cvi', 'cvl', 'exp',
-                             'screen', 'sgn', 'sin', 'sleep', 'sqr', 'str', 'swap', 'tan', 'timer', 'ubound', 'ucase', 'val'];
+                             'fix', 'input', 'inkey', 'instr', 'int', 'lbound', 'left', 'lcase', 'len', 'line', 'locate', 'log', 'ltrim', 'mid', 'mki', 'mkl',
+                             'print', 'pset', 'right', 'rtrim', 'rnd', 'screen', 'shared', 'sgn', 'sin', 'sleep', 'space', 'sqr', 'str', 'swap', 'tan',
+                             'timer', 'ubound', 'ucase', 'val',
+                             // QBJS-specific
+                             'alert', 'confirm', 'domadd', 'domcontainer', 'domcreate', 'domevent','domget', 'domgetimage', 'domremove', 'prompt',
+                             'storageclear', 'storageget', 'storagekey', 'storagelength', 'storageset', 'storageremove'];
 
     var builtinConsts = ['gx_true', 'gx_false', 'gxevent_init', 'gxevent_update', 'gxevent_drawbg', 'gxevent_drawmap', 'gxevent_drawscreen',
                          'gxevent_mouseinput', 'gxevent_paintbefore', 'gxevent_paintafter', 'gxevent_collision_tile', 'gxevent_collision_entity',
@@ -64,7 +69,8 @@ CodeMirror.defineMode("qbjs", function(conf, parserConf) {
                          'gxscene_follow_entity_center_x', 'gxscene_follow_entity_center_y', 'gxscene_follow_entity_center_x_pos',
                          'gxscene_follow_entity_center_x_neg', 'gxscene_constrain_none', 'gxscene_constrain_to_map', 'gxfont_default',
                          'gxfont_default_black', 'gxdevice_keyboard', 'gxdevice_mouse', 'gxdevice_controller', 'gxdevice_button',
-                         'gxdevice_axis', 'gxdevice_wheel', 'gxtype_entity', 'gxtype_font', 'gx_cr', 'gx_lf', 'gx_crlf'];
+                         'gxdevice_axis', 'gxdevice_wheel', 'gxtype_entity', 'gxtype_font', 'gx_cr', 'gx_lf', 'gx_crlf',
+                         'local', 'session'];
 
     var builtinObjsWords = ['\\$if', '\\$end if'];
 

dialog/dialog-polyfill.js

@@ -1,105 +0,0 @@
-'use strict';
-/**
- * Polyfill of dialog
- * for Firefox
- *
- * author Nemo
- *
- * v1.1
- * Supports:
- * show
- * hide
- * showModal
- * cancel(ESC)
- */
-{
-
-const UA = window.navigator.userAgent;
-const browser = {
-    isFirefox: UA.includes('Firefox'),
-};
-
-const dlg = document.createElement('dialog');
-let mask = undefined;
-
-const initMask = () => {
-    if (mask != undefined)
-        return;
-
-    mask = document.createElement('div');
-    mask.style.display = 'none';
-    mask.style.position = 'absolute';
-    mask.style.zIndex = 999998;
-    mask.style.top = 0;
-    mask.style.left = 0;
-    mask.style.right = 0;
-    mask.style.bottom = 0;
-    mask.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
-    document.body.appendChild(mask);
-};
-
-// show support
-if (!dlg.__proto__.show) {
-    dlg.__proto__.open = false;
-
-    dlg.__proto__.show = function() {
-        this.open = true;
-
-        this.style.backgroundColor = 'white';
-        this.style.position = 'absolute';
-        this.style.zIndex = 999999;
-        this.style.display = 'table';
-        this.style.top = '50%';
-        this.style.transform = 'translate(0, -50%)';
-
-        return this;
-    };    
-}
-
-// showModal support
-if (!dlg.__proto__.showModal) {
-    initMask();
-
-    dlg.__proto__.showModal = function() {
-        mask.style.display = 'block';
-        this.show();
-
-        return this;
-    };    
-}
-
-// hide support
-if (!dlg.__proto__.close) {
-    initMask();
-
-    dlg.__proto__.close = function() {
-        this.open = false;
-
-        mask.style.display = 'none';
-        this.style.display = 'none';
-
-        return this;
-    }
-}
-
-// cancel(ESC) support
-if (dlg.oncancel === void 0) {
-    const dialogClass = 'dlg-dialog';
-    document.addEventListener('keypress', (e) => {
-        if (e.code !== 'Escape')
-            return;
-
-        let dlgs = document.querySelectorAll(`.${dialogClass}`);
-        for (let i = 0; i < dlgs.length; i++) {
-            let d = dlgs[i];
-            if (d.style.display === 'none')
-                continue;
-
-            if (d.wrapper.cancelable) {
-                d.close();
-            }
-        }
-    });
-}
-
-}

dialog/dialog-simple.css

@@ -1,18 +0,0 @@
-.dlg-dialog {
-    border: none;
-    box-shadow: 10px 10px 20px gray;
-}
-
-.dlg-header {
-    background-color: #555;
-    color: white;
-}
-
-.dlg-caption {
-    height: 1.17em;
-    text-shadow: 1px 1px 1px black;
-}
-.dlg-close-button::before,
-.dlg-close-button::after {
-    background-color: white;
-}

dialog/dialog.css

@@ -1,81 +0,0 @@
-.dlg-dialog {
-    position: fixed;
-    top: 0;
-    bottom: 0;
-    box-sizing: border-box;
-    min-width: 300px;
-    max-width: 100%;
-    padding: 0;
-    overflow: hidden;
-    background-color: #ccc;
-}
-
-.dlg-dialog textarea {
-    background-color: #ccc;
-    font-family: dosvga;
-    font-size: 1em;
-    padding: .25em;
-    border: 2px solid #333;
-}
-
-.dlg-header {
-    padding: .5em;
-    background-color: #999;
-    border-bottom: 1px solid #333;
-}
-
-.dlg-caption {
-    font-size: 1em;
-    margin: 0;
-    padding-right: 2em;
-    font-weight: normal;
-}
-
-.dlg-close-button {
-    position: absolute;
-    right: .5em;
-    top: .5em;
-    width: 1.17em;
-    height: 1.17em;
-    cursor: pointer;
-}
-
-.dlg-close-button::before {
-    transform: rotate(45deg);
-}
-
-.dlg-close-button::after{
-    transform: rotate(-45deg);
-}
-
-.dlg-close-button::before,
-.dlg-close-button::after {
-    content: '';
-    position: absolute;
-    height: 1px;
-    width: 100%;
-    top: 50%;
-    left:0;
-    background-color: black;
-}
-
-.dlg-body {
-    padding: .5em;
-}
-
-.dlg-content {
-    padding: .5em;
-    overflow: auto;
-}
-
-.dlg-button-area {
-    padding: 0 .5em;
-    text-align: right;
-}
-
-.dlg-button-area button {
-    padding: .3em .4em;
-    margin-left: 1em;
-    width: 5em;
-    text-align: center;
-}

dialog/dialog.js

@@ -1,435 +0,0 @@
-/**
- * class Dialog {
- * 
- * author: nemo
- *   date: 2017-06-20
- *      v: 1.1
- * }
- */
-{
-'use strict';
-
-class Dialog {
-
-    constructor(opt) {
-        Object.assign(this.option = {
-            caption: '',
-            message: '',
-            content: undefined,
-            buttons: Dialog.buttons.NONE,
-
-            resize: 'none',
-
-            cancelable: true,
-
-            showHeader: true,
-            showClose: true,
-            showFooter: false,
-
-            // handler
-            abortHandler: undefined,
-            cancelHandler: () => { this.close(); },
-            ignoreHandler: undefined,
-            noHandler: undefined,
-            okHandler: () => { this.close(); },
-            retryHandler: undefined,
-            yesHandler: undefined,
-
-            // events
-            beforeClosing: () => { return true; }, // set to false to prevent close
-            closed: undefined,
-        }, opt);
-        this.init();
-    }
-
-    /**
-     * START init
-     */
-    init() {
-        return this
-            .initLayout()
-            .initAttributes()
-            .initContent()
-            .initEvents();
-    }
-
-    initLayout() {
-        this.dialog = create('dialog', 'dialog');
-        this.dialog.style.resize = this.option.resize,
-        appendTo(this.dialog, document.body);
-        this.show();
-
-        this.container = this.dialog;
-        
-        this.header = create('header', 'header');
-        this.caption = create('h3', 'caption');
-        this.closeButton = create('em', 'close-button');
-
-        this.body = create('div', 'body');
-        this.content = create('section', 'content');
-        this.buttonArea = create('div', 'button-area');
-
-        this.footer = create('footer', 'footer');
-
-        // assembly dom
-        this.header.appendChild(this.caption);
-        if (this.option.showClose)
-            this.header.appendChild(this.closeButton);
-        if (this.option.showHeader)
-            this.dialog.appendChild(this.header);
-
-        this.body.appendChild(this.content);
-        this.body.appendChild(this.buttonArea);
-        this.assemblyButtons();
-        this.dialog.appendChild(this.body);
-
-        if (this.option.showFooter)
-            this.dialog.appendChild(this.footer);
-
-        return this;
-    }
-
-    initAttributes() {
-        this.dialog.wrapper = this;
-
-        this.cancelable = this.option.cancelable;
-
-        return this;
-    }
-
-    assemblyButtons() {
-        switch (this.option.buttons) {
-            case Dialog.buttons.ABORT_RETRY_IGNORE:
-                new DialogButton(this, Dialog.button.ABORT).assembly();
-                new DialogButton(this, Dialog.button.RETRY).assembly().focus();
-                new DialogButton(this, Dialog.button.IGNORE).assembly();
-                break;
-            case Dialog.buttons.OK:
-                new DialogButton(this, Dialog.button.OK).assembly().focus();
-                break;
-            case Dialog.buttons.OK_CANCEL:
-                new DialogButton(this, Dialog.button.OK).assembly();
-                new DialogButton(this, Dialog.button.CANCEL).assembly().focus();
-                break;
-            case Dialog.buttons.RETRY_CANCEL:
-                new DialogButton(this, Dialog.button.RETRY).assembly().focus();
-                new DialogButton(this, Dialog.button.CANCEL).assembly();
-                break;
-            case Dialog.buttons.YES_NO:
-                new DialogButton(this, Dialog.button.YES).assembly();
-                new DialogButton(this, Dialog.button.NO).assembly().focus();
-                break;
-            case Dialog.buttons.YES_NO_CANCEL:
-                new DialogButton(this, Dialog.button.YES).assembly();
-                new DialogButton(this, Dialog.button.NO).assembly();
-                new DialogButton(this, Dialog.button.CANCEL).assembly().focus();
-                break;
-            default:
-                // no button
-                break;
-        }
-
-        return this;
-    }
-
-    appendButton(btn) {
-        this.buttonArea.appendChild(btn.button);
-        return this;
-    }
-
-    removeButton(btn) {
-        this.buttonArea.removeChild(btn.button);
-        return this;
-    }
-
-    initContent() {
-        this.caption.innerText = this.option.caption;
-        if (this.option.content == undefined) {
-            this.content.innerText = this.option.message;
-        } else {
-            this.content.innerHTML = this.option.content;
-        }
-
-        return this;
-    }
-
-    initEvents() {
-        this.closeButton.addEventListener('click', () => {
-            this.close();
-        });
-
-        // prevent esc
-        this.dialog.addEventListener('cancel', (e) => { 
-            !this.cancelable && e.preventDefault();
-        });
-
-        return this;
-    }
-    /**
-     * END init
-     */
-
-    //:~
-
-    trigger(type) {
-        switch (type) {
-            case Dialog.button.ABORT:
-                callHandler(this.option.abortHandler, this);
-                break;
-            case Dialog.button.CANCEL:
-                callHandler(this.option.cancelHandler, this);
-                break;
-            case Dialog.button.IGNORE:
-                callHandler(this.option.ignoreHandler, this);
-                break;
-            case Dialog.button.NO:
-                callHandler(this.option.noHandler, this);
-                break;
-            case Dialog.button.OK:
-                callHandler(this.option.okHandler, this);
-                break;
-            case Dialog.button.RETRY:
-                callHandler(this.option.retryHandler, this);
-                break;
-            case Dialog.button.YES:
-                callHandler(this.option.yesHandler, this);
-                break;
-            default:
-                console.log(`Unknown type:${type}`);
-                break;
-        }
-
-        return this;
-    }
-
-    beforeClosing(func) {
-        this.option.beforeClosing = func;
-
-        return this;
-    }
-
-    closed(func) {
-        this.dialog.addEventListener('close', func);
-
-        return this;
-    }
-
-    get cancelable() {
-        return this.option.cancelable;
-    }
-
-    set cancelable(value) {
-        this.option.cancelable = !!value;
-    }
-
-    show() {
-        if (this.dialog.open)
-            return this;
-
-        try {
-            this.dialog.showModal();
-        } catch (e) {
-            appendTo(this.dialog, document.body);
-            this.dialog.showModal();
-        }
-
-        return this;
-    }
-
-    hide(dispose = true) {
-        if (!this.dialog.open)
-            return this;
-
-        if (typeof this.option.beforeClosing != 'function' ||
-            !!this.option.beforeClosing()) {
-            this.dialog.close();
-
-            try {
-                dispose && document.body.removeChild(this.dialog);
-            } finally { }
-        } 
-
-        return this;
-    }
-
-    close(dispose = true) {
-        return this.hide(dispose);
-    }
-
-    addClass(className) {
-        addClass(this.dialog, className);
-    }
-
-    //:~
-    
-    /**
-     * START static helper
-     */
-    static alert(message, caption = '') {
-        return new Dialog({
-            caption: `${caption}`,
-            message: `${message}`,
-            buttons: Dialog.buttons.OK,
-        });
-    }
-
-    static confirm(message, caption = '', ok, cancel) {
-        return new Dialog({
-            caption: `${caption}`,
-            message: `${message}`,
-            buttons: Dialog.buttons.OK_CANCEL,
-            okHandler: ok,
-            cancelHandler: cancel,
-        });
-    }
-
-    static template(dom, caption = '') {
-        return new Dialog({
-            caption: `${caption}`,
-            content: dom.innerHTML,
-        });
-    }
-
-    static templet(dom, caption) {
-        return template(dom, caption);
-    }
-
-    static iframe(src, caption = '', width = 'auto', height = 'auto') {
-        let dlg = new Dialog({
-            caption: `${caption}`,
-            content: `<iframe style="border: none;" src="${src}"></iframe>`,
-        });
-        let iframe = dlg.content.childNodes[0];
-        iframe.style.width = width;
-        iframe.style.height = height;
-    }
-    /**
-     * END static helper
-     */
-}
-
-class DialogButton {
-    constructor(dialog, type) {
-        this.dialog = dialog;
-        this.type = type;
-
-        this.button = create('button', `btn-${type}`);
-        this.button.type = 'button';
-        this.button.innerText = Dialog.buttonText[type];
-
-        this.click(() => {
-            this.dialog.trigger(this.type);
-        });
-    }
-
-    assembly() {
-        this.dialog.appendButton(this);
-
-        return this;
-    }
-
-    click(func) {
-        this.button.addEventListener('click', func);
-
-        return this;
-    }
-
-    focus() {
-        window.setTimeout(() => {
-            this.button.focus();
-        }, 1);
-
-        return this;
-    }
-}
-
-Object.assign(Dialog, {
-
-    buttons: {
-        ABORT_RETRY_IGNORE: 1,
-        OK: 2,
-        OK_CANCEL: 3,
-        RETRY_CANCEL: 4,
-        YES_NO: 5,
-        YES_NO_CANCEL: 6,
-    },
-
-    button: {
-        NONE: 0,
-        ABORT: 1,
-        CANCEL: 2,
-        IGNORE: 3,
-        NO: 4,
-        OK: 5,
-        RETRY: 6,
-        YES: 7,
-    },
-
-    buttonText: [
-        undefined,
-        'Abort',
-        'Cancel',
-        'Ignore',
-        'NO',
-        'OK',
-        'Retry',
-        'Yes',
-    ],
-});
-
-let callHandler = (func, dlg) => {
-    return typeof func == 'function' ?
-        func(dlg) : undefined;
-}
-
-let cls = (cls) => {
-    return `dlg-${cls}`;
-}
-
-let addClass = (dom, className) => {
-    let c = dom.className;
-    let add = cls(className);
-    if (c == '') {
-        return add;
-    } else {
-        return c + ' ' + add;
-    }
-}
-
-let prependTo = (sub, base) => {
-    if (base.hasChildNodes()) {
-        base.insertBefore(sub, base.firstChild);
-    } else {
-        base.appendChild(sub);
-    }
-}
-
-let appendTo = (sub, base) => {
-    base.appendChild(sub);
-}
-
-let show = (dom, display = 'block') => {
-    visible(dom, true, display);
-}
-
-let hide = (dom) => {
-    visible(dom, true);
-}
-
-let visible = (dom, v, display) => {
-    if (dom == undefined || dom.style == undefined)
-        return;
-    else
-        dom.style.display = v ? display : 'none';
-}
-
-let create = (name, className) => {
-    let e = document.createElement(name);
-    if (typeof className == 'string')
-        e.className = cls(className);
-    return e;
-}
-
-// export { Dialog } // ES6
-window['Dialog'] = Dialog;
-}

gx/gx.js

@@ -572,6 +572,11 @@ var GX = new function() {
 
     // Sound Methods
     // ----------------------------------------------------------------------------
+    function _soundClose (sid) {
+        _sounds[sid-1].pause();
+        _sounds[sid-1] = undefined;
+    }
+
     function _soundLoad (filename) {
         var a = new Audio(filename);
         _sounds.push(a);
@@ -613,7 +618,6 @@ var GX = new function() {
         return _sound_muted;
     }
     
-
     // Entity Functions
     // -----------------------------------------------------------------------------
     function _entityCreate (imageFilename, ewidth, height, seqFrames, uid) {
@@ -2299,6 +2303,7 @@ var GX = new function() {
     this.backgroundHeight = _backgroundHeight;
     this.backgroundClear = _backgroundClear;
 
+    this.soundClose = _soundClose;
     this.soundLoad = _soundLoad;
     this.soundPlay = _soundPlay;
     this.soundRepeat = _soundRepeat;

index.html

@@ -116,16 +116,60 @@
                 background-color: transparent;
                 color: #ccc;
             }
+            #gx-load-screen {
+                display: none;
+                text-align: center;
+                margin: auto;
+                width: 600px;
+                height: 360px;
+                font-size: 24px;
+                color: #ccc;
+                border: 1px solid #000;
+                text-decoration: none;
+                background-position: center center;
+                background-image: url('play.png');
+                background-repeat: no-repeat;
+                background-color: #444;
+            }
+            #gx-load-screen:hover {
+                background-color: #555;
+            }
+            #gx-load-screen:before { content: ""; }
+            #gx-load-screen:after { content: ""; }
+
+            #gx-container a, #gx-container a:link, #gx-container a:visited {
+                color: rgb(69, 118, 147);
+            }
+            #gx-container a:hover { 
+                color: rgb(69, 118, 147);
+                text-decoration: underline;
+            }
+            #gx-container a:before { content: ""; }
+            #gx-container a:after { content: ""; }
+
+            #gx-container, #gx-container table {
+                font-family: arial, helvetica, sans-serif;
+                font-size: 14px;
+            }
+
+            #share-dialog {
+                background-color:#ddd;
+            }
+            #share-dialog textarea {
+                font-family: dosvga;
+                font-size: 1em;
+                background-color: #efefef;
+            }
+            #share-dialog a { color: #333; }
+            #share-dialog a:hover { color: #000; }
+
         </style>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css"></link>
         <link rel="stylesheet" href="codemirror/qb-ide.css"></link>
-        <link rel="stylesheet" href="dialog/dialog.css"></link>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
         <script type="text/javascript" src="codemirror/qb-lang.js"></script>
         <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/selection/active-line.js"></script>
         <script type="text/javascript" src="util/shorty.min.js"></script>
-        <script type="text/javascript" src="dialog/dialog.js"></script>
-        <script type="text/javascript" src="dialog/dialog-polyfill.js"></script>
     </head>
     <body>
         <div id="code-container">
@@ -139,7 +183,9 @@
             <div id="slider-right" class="slider-button" onclick="slideRight()">&gt;</div>
         </div>
         <div id="game-container">
-            <div id="gx-container"></div>
+            <div id="gx-container">
+                <a href="javascript:runProgram()" id="gx-load-screen">&nbsp;</a>
+            </div>
             <div id="output-container">
                 <div id="tabs">
                     <div id="tab-console" class="tab active" onclick="changeTab('console')">Console</div><div id="tab-js" class="tab" onclick="changeTab('js')">Javascript</div>
@@ -153,9 +199,19 @@
         </div>
         <div id="gx-footer"></div>
 
-        <div style="display:none" id="share-dialog">
+        <dialog id="share-dialog">
-            <textarea id="share-code" rows="15" cols="80" readonly></textarea>
+            <div style="margin-bottom:5px">Copy the link below to share your code:</div>
-        </div>
+            <div><textarea id="share-code" rows="15" cols="80" readonly></textarea></div>
+            <div style="margin-top: 5px; float:left">Launch Mode:
+                <select id="share-mode" onchange="shareProgram()">
+                    <option value="">IDE (Default)</option>
+                    <option value="play">Play</option>
+                    <option value="auto">Auto</option>
+                </select>
+            </div>
+            <a href="javascript:closeDialog()" style="display:block; float:right; margin-top: 5px">Close</a>
+            <a href="javascript:testShare()" style="display: block; float:right; margin-top: 5px; margin-right: 10px">Test</a>
+        </dialog>
     </body>
     <script language="javascript" src="gx/gx.js"></script>
     <script language="javascript" src="qb.js"></script>
@@ -166,6 +222,7 @@
         var qbcode = "";
         var url = location.href;
         var sizeMode = "normal";
+        var appMode = "ide";
         var consoleVisible = false;
         var currTab = "console";
  
@@ -179,8 +236,14 @@
                     qbcode = zin.inflate(atob(nv[1]));
                     break;
                 }
+                else if (nv[0] == "mode") {
+                    appMode = nv[1];
+                }
             }
         }
+        if (appMode == "play") {
+            document.getElementById("gx-load-screen").style.display = "block";
+        }
 
         // initialize the code editor
         var editor = CodeMirror(document.querySelector("#code"), {
@@ -209,6 +272,8 @@
         var warnCount = 0;
 
         async function runProgram() {
+            document.getElementById("gx-load-screen").style.display = "none";
+
             if (sizeMode == "max") {
                 slideLeft();
             }
@@ -219,7 +284,6 @@
             var jsCode = await QBCompiler.compile(qbCode);
 
             await displayWarnings();
-            //displayTypes();
 
             var jsDiv = document.getElementById("js-code");
             jsDiv.innerHTML = jsCode;
@@ -244,6 +308,8 @@
                 GX.sceneStop();
             }
             document.getElementById("gx-container").focus();
+
+            return false;
         }
 
         function stopProgram() {
@@ -256,9 +322,26 @@
             var b64 = btoa(zout.deflate(editor.getValue()));
             var baseUrl = location.href.split('?')[0];
 
+            var mode = document.getElementById("share-mode").value;
             var codeShare = document.getElementById("share-code");
-            codeShare.innerHTML = baseUrl + "?qbcode=" + b64;
+            var url = baseUrl + "?";
-            Dialog.template(document.getElementById("share-dialog"), "Copy the link below to share your code!");
+            if (mode) {
+                url += "mode=" + mode + "&";
+            }
+            url += "qbcode=" + b64;
+            codeShare.value = url;
+            document.getElementById("share-dialog").showModal();
+            codeShare.focus();
+            codeShare.select();
+        }
+
+        function testShare() {
+            var url = document.getElementById("share-code").value;
+            open(url, "_blank");
+        }
+
+        function closeDialog() {
+            document.getElementById("share-dialog").close();
         }
 
         async function displayWarnings() {
@@ -277,7 +360,8 @@
 
         function showConsole() {
             consoleVisible = !consoleVisible;
-            window.onresize();
+            window.dispatchEvent(new Event('resize'));
+            //window.onresize();
         }
 
         function changeTab(tabName) {
@@ -315,7 +399,8 @@
                 sizeMode = "min"
                 document.getElementById("slider-left").style.display = "none";
             }
-            window.onresize();
+            //window.onresize();
+            window.dispatchEvent(new Event('resize'));
         }
 
         function slideRight() {
@@ -327,65 +412,81 @@
                 sizeMode = "max"
                 document.getElementById("slider-right").style.display = "none";
             }
-            window.onresize();
+            //window.onresize();
+            window.dispatchEvent(new Event('resize'));
         }
 
         window.onresize = function() {
             var f = document.getElementById("gx-container");
             var jsDiv = document.getElementById("output-container");
 
-            var cmwidth = 600;
+            if (appMode == "play" || appMode == "auto") {
-            if (sizeMode == "min") {
+                f.style.left = "0px";
-                cmwidth = 0;
+                f.style.top = "0px";
-                editor.getWrapperElement().style.display = "none";
+                f.style.width = window.innerWidth;
-                document.getElementById("code").style.borderRight = "0";
+                f.style.height = window.innerHeight;
-            }
+                f.style.border = "0px";
-            else if (sizeMode == "max") {
+                document.getElementById("code-container").style.display = "none";
-                cmwidth = window.innerWidth - 25;
+                document.getElementById("slider").style.display = "none";
-                document.getElementById("game-container").style.display = "none";
+                document.getElementById("show-js-container").style.display = "none";
-                document.getElementById("slider").style.border = "1px solid #666";
+                document.getElementById("game-container").style.left = "0px";
-                document.getElementById("slider").style.borderLeft = "0";
+                document.getElementById("game-container").style.top = "0px";
+                jsDiv.style.display = "none";
             }
             else {
-                editor.getWrapperElement().style.display = "block";
+                var cmwidth = 600;
-                document.getElementById("game-container").style.display = "block";
+                if (sizeMode == "min") {
-                document.getElementById("code").style.borderRight = "1px solid #666";
+                    cmwidth = 0;
-                document.getElementById("slider").style.border = "0";
+                    editor.getWrapperElement().style.display = "none";
-            }
+                    document.getElementById("code").style.borderRight = "0";
-
+                }
-            document.getElementById("game-container").style.left = (cmwidth + 20) + "px";
+                else if (sizeMode == "max") {
-            f.style.width = (window.innerWidth - (cmwidth + 35)) + "px";
+                    cmwidth = window.innerWidth - 25;
-            jsDiv.style.width = f.style.width;            
+                    document.getElementById("game-container").style.display = "none";
-
+                    document.getElementById("slider").style.border = "1px solid #666";
-            document.getElementById("slider").style.left = (cmwidth + 12) + "px";
+                    document.getElementById("slider").style.borderLeft = "0";
-
-            if (consoleVisible) { // /*document.getElementById("show-js").checked ||*/ warnCount > 0) {
-                f.style.height = (window.innerHeight - 237) + "px";
-                jsDiv.style.display = "block";
-                jsDiv.style.top = (window.innerHeight - 227) + "px";
-                document.getElementById("toggle-console").innerHTML = "Hide Console";
-                if (currTab == "console") {
-                    document.getElementById("warning-container").style.display = "block";
-                    document.getElementById("js-code").style.display = "none";
                 }
                 else {
-                    document.getElementById("warning-container").style.display = "none";
+                    editor.getWrapperElement().style.display = "block";
-                    document.getElementById("js-code").style.display = "block";
+                    document.getElementById("game-container").style.display = "block";
+                    document.getElementById("code").style.borderRight = "1px solid #666";
+                    document.getElementById("slider").style.border = "0";
                 }
-            }
-            else {
-                f.style.height = (window.innerHeight - 50) + "px";
-                jsDiv.style.display = "none";
-                document.getElementById("toggle-console").innerHTML = "Show Console";
-            }
-            document.getElementById("show-js-container").style.top = (window.innerHeight - 45) + "px";
-            document.getElementById("show-js-container").style.right = "5px";
-            
-            //document.getElementById("js-code").style.display = document.getElementById("show-js").checked ? "block" : "none";
 
-            editor.setSize(cmwidth, window.innerHeight - 50);
+                document.getElementById("game-container").style.left = (cmwidth + 20) + "px";
-            document.getElementById("code").style.height = (window.innerHeight - 50) + "px";
+                f.style.width = (window.innerWidth - (cmwidth + 35)) + "px";
-            document.getElementById("slider").style.height = (window.innerHeight - 50) + "px";
+                jsDiv.style.width = f.style.width;            
+
+                document.getElementById("slider").style.left = (cmwidth + 12) + "px";
+
+                if (consoleVisible) { 
+                    f.style.height = (window.innerHeight - 237) + "px";
+                    jsDiv.style.display = "block";
+                    jsDiv.style.top = (window.innerHeight - 227) + "px";
+                    document.getElementById("toggle-console").innerHTML = "Hide Console";
+                    if (currTab == "console") {
+                        document.getElementById("warning-container").style.display = "block";
+                        document.getElementById("js-code").style.display = "none";
+                    }
+                    else {
+                        document.getElementById("warning-container").style.display = "none";
+                        document.getElementById("js-code").style.display = "block";
+                    }
+                }
+                else {
+                    f.style.height = (window.innerHeight - 50) + "px";
+                    jsDiv.style.display = "none";
+                    document.getElementById("toggle-console").innerHTML = "Show Console";
+                }
+                document.getElementById("show-js-container").style.top = (window.innerHeight - 45) + "px";
+                document.getElementById("show-js-container").style.right = "5px";
+                
+                editor.setSize(cmwidth, window.innerHeight - 50);
+                document.getElementById("code").style.height = (window.innerHeight - 50) + "px";
+                document.getElementById("slider").style.height = (window.innerHeight - 50) + "px";
+            }
+            //QB.resize(f.style.width.replace("px", ""), f.style.height.replace("px", ""));
+            QB.resize(f.clientWidth, f.clientHeight);
         }
         window.onresize();
 
@@ -401,6 +502,10 @@
             setTimeout(checkButtonState, 100);
         }
         checkButtonState();
-        
+
+        if (appMode == "auto") {
+            runProgram();
+        }
+
     </script>
 </html>

qb.js

@@ -2,6 +2,9 @@ var QB = new function() {
     // QB constants
     this.COLUMN_ADVANCE = Symbol("COLUMN_ADVANCE");
     this.PREVENT_NEWLINE = Symbol("PREVENT_NEWLINE");
+    this.LOCAL = Symbol("LOCAL");
+    this.SESSION = Symbol("SESSION");
+
 
     var _fgColor = null; 
     var _bgColor = null; 
@@ -21,7 +24,12 @@ var QB = new function() {
     var _images = {};
     var _activeImage = 0;
     var _nextImageId = 1000;
-    var _lastLimitTime = 0;
+    //var _lastLimitTime = 0;
+    var _resize = false;
+    var _resizeWidth = 0;
+    var _resizeHeight = 0;
+    var _domElements = [];
+    var _domEvents = [];
 
     // Array handling methods
     // ----------------------------------------------------
@@ -75,12 +83,19 @@ var QB = new function() {
         return value;
     };
 
-    this.import = async function(url) {
+
+    this.resize = function(width, height) {
+        _resize = true;
+        _resizeWidth = width;
+        _resizeHeight = height;
+    }
+
+    /*this.import = async function(url) {
         await fetch(url).then(response => response.text()).then((response) => {
             var f = new Function(response);
             f();
         });
-    };
+    };*/
 
     // Process control methods
     // -------------------------------------------
@@ -102,6 +117,7 @@ var QB = new function() {
         _haltedFlag = false;
         _nextImageId = 1000;
         _activeImage = 0;
+        _domInit();
     }
 
     this.running = function() {
@@ -177,7 +193,7 @@ var QB = new function() {
         return 8;
     };
 
-    this.func__FreeImage = function(imageId) {
+    this.sub__FreeImage = function(imageId) {
         _images[imageId] = undefined;
     }
 
@@ -269,7 +285,7 @@ var QB = new function() {
 
     this.func__NewImage = function(iwidth, iheight) {
         var canvas = document.createElement("canvas");
-        canvas.id = "gx-canvas";
+        canvas.id = "qb-canvas-" + _nextImageId;
         canvas.width = iwidth;
         canvas.height = iheight;
         ctx = canvas.getContext("2d");
@@ -398,6 +414,20 @@ var QB = new function() {
         return _color(rgb).r;
     };
 
+    this.func__Resize = function() {
+        var tmp = _resize;
+        _resize = false;
+        return tmp ? -1 : 0;
+    }
+
+    this.func__ResizeHeight = function() {
+        return _resizeHeight;
+    };
+
+    this.func__ResizeWidth = function() {
+        return _resizeWidth;
+    };
+
     this.func__RGB = function(r, g, b) {
         return this.func__RGBA(r, g, b);
     };
@@ -441,7 +471,36 @@ var QB = new function() {
 
     this.func__ScreenExists = function() {
         return true;
-    }
+    };
+
+    this.sub__SndClose = function(sid) {
+        GX.soundClose(sid);
+    };
+
+    this.func__SndOpen = function(filename) {
+        return GX.soundLoad(filename);
+    };
+
+    this.sub__SndPlay = function(sid) {
+        GX.soundPlay(sid);
+    };
+
+    this.sub__SndLoop = function(sid) {
+        GX.soundRepeat(sid);
+    };
+
+    this.sub__SndPause = function(sid) {
+        GX.soundPause(sid);
+    };
+
+    this.sub__SndStop = function(sid) {
+        GX.soundStop(sid);
+    };
+
+    this.sub__SndVol = function(sid, v) {
+        GX.soundVolumne(sid, v);
+    };
+
 
     this.sub__Title = function(title) {
         document.title = title;
@@ -487,11 +546,15 @@ var QB = new function() {
         if (bgColor != undefined) {
             color = _color(bgColor);
         }
-        // TODO: parameter variants
+        
         ctx = _images[_activeImage].ctx;
         ctx.beginPath();
         ctx.fillStyle = color.rgba();
         ctx.fillRect(0, 0, QB.func__Width() , QB.func__Height());
+
+        // reset the text position
+        _locX = 0;
+        _locY = 0;
     };
 
     function _color(c) {
@@ -521,6 +584,24 @@ var QB = new function() {
         return Math.cos(value);
     };
 
+    this.func_Cvi = function(numString) {
+        var result = 0;
+        numString = numString.split("").reverse().join("");
+        for (let i=1;i>=0;i--) {
+            result+=numString.charCodeAt(1-i)<<(8*i);
+        }
+        return result;
+    }
+
+    this.func_Cvl = function(numString) {
+        var result = 0;
+        numString = numString.split("").reverse().join("");
+        for (let i=3;i>=0;i--) {
+            result+=numString.charCodeAt(3-i)<<(8*i);
+        }
+        return result;
+    }
+
     this.func_Exp = function(value) {
         return Math.exp(value);
     };
@@ -749,6 +830,22 @@ var QB = new function() {
       }
     };
 
+    this.func_Mki = function(num) {
+        var ascii = "";
+        for (var i=1; i >= 0; i--) {
+            ascii += String.fromCharCode((num>>(8*i))&255);
+        }
+        return ascii.split("").reverse().join("");
+    };
+
+    this.func_Mkl = function(num) {
+        var ascii = "";
+        for (var i=3; i >= 0; i--) {
+            ascii += String.fromCharCode((num>>(8*i))&255);
+        }
+        return ascii.split("").reverse().join("");
+    };
+
     this.sub_Print = async function(args) {
         // Print called with no arguments
         if (args == undefined || args == null || args.length < 1) {
@@ -892,6 +989,7 @@ var QB = new function() {
             var img = _images[mode];
             if (img && img.canvas) {
                 GX.sceneCreate(img.canvas.width, img.canvas.height);
+                this.sub__PutImage(undefined, undefined, undefined, undefined, undefined, undefined, mode);
             }
         }
         _images[0] = { canvas: GX.canvas(), ctx: GX.ctx(), lastX: 0, lastY: 0 };
@@ -915,6 +1013,14 @@ var QB = new function() {
         else { return 0; }
     };
 
+    this.func_Space = function(ccount) {
+        return QB.func_String(ccount, " ");
+    }
+
+    this.func_String = function(ccount, s) {
+        return "".padStart(ccount, s);
+    };
+
     this.func_Sin = function(value) {
         return Math.sin(value);
     };
@@ -1000,6 +1106,137 @@ var QB = new function() {
 
     this.func_ToJSON = function(a) {
         return JSON.stringify(a);
+    };
+
+    this.sub_Alert = function(text) {
+        alert(text);
+    }
+
+    this.func_Confirm = function(text) {
+        return confirm(text) ? -1 : 0;
+    }
+
+    this.sub_DomAdd = function(e, parent, beforeElement) {
+        if (typeof e == "string") {
+            e = document.getElementById(e);
+        }
+
+        if (parent == undefined || parent == "") {
+            parent = QB.func_DomContainer();    
+        }
+        else if (typeof parent == "string") {
+            parent = document.getElementById(parent);
+        }
+
+        if (beforeElement == undefined || beforeElement == "") {
+            beforeElement = null;
+        }
+        else if (typeof beforeElement == "string") {
+            beforeElement = document.getElementById(beforeElement);
+        }
+        
+        parent.insertBefore(e, beforeElement);
+    };
+
+    this.func_DomCreate = function(etype, parent, content, eid, beforeElement) {
+        var e = document.createElement(etype); 
+        if (eid != undefined && eid != "") {
+            e.id = eid;
+        }
+        e.className = "qbjs";
+        
+        if (content != undefined) {
+            if (e.value != undefined) {
+                e.value = content;
+            }
+            if (e.innerHTML != undefined) {
+                e.innerHTML = content;
+            }
+        }
+
+        _domElements.push(e);
+        QB.sub_DomAdd(e, parent, beforeElement);
+        return e;        
+    };
+
+    this.sub_DomCreate = function(etype, parent, content, eid, beforeElement) {
+        this.func_DomCreate(etype, parent, content, eid, beforeElement);
+    };
+
+    this.sub_DomEvent = function(target, eventType, callbackFn) {
+        if (typeof target == "string") {
+            target = document.getElementById(target);
+        }
+        target.addEventListener(eventType, callbackFn);
+        _domEvents.push({ target: target, eventType: eventType, callbackFn: callbackFn});
+    };
+
+    this.func_DomContainer = function() {
+        return document.getElementById("gx-container");
+    }
+
+    this.func_DomGet = function(eid) {
+        return document.getElementById(eid);
+    };
+
+    this.func_DomGetImage = function(imageId) {
+        return _images[imageId].canvas;
+    };
+
+    this.sub_DomRemove = function(e) {
+        if (typeof e == "string") {
+            e = document.getElementById(e);
+        }
+        if (e != undefined && e != null) {
+            e.remove();
+        }
+    }
+
+    this.func_Prompt = function(text, defaultValue) {
+        return prompt(text, defaultValue);
+    }
+
+    function _storage(stype) {
+        return (stype == QB.SESSION) ? sessionStorage : localStorage;
+    }
+
+    this.sub_StorageClear = function(stype) {
+        _storage(stype).clear();
+    }
+
+    this.func_StorageGet = function(key, stype) {
+        return _storage(stype).getItem(key);
+    }
+
+    this.func_StorageKey = function(idx, stype) {
+        return _storage(stype).key(idx);
+    }
+
+    this.func_StorageLength = function(stype) {
+        return _storage(stype).length;
+    }
+
+    this.sub_StorageSet = function(key, value, stype) {
+        _storage(stype).setItem(key, value);
+    }
+
+    this.sub_StorageRemove = function(key, stype) {
+        _storage(stype).removeItem(key);
+    }
+
+    function _domInit() {
+        //var elements = document.getElementsByClassName("qbjs");
+        //for (var i=0; i < elements.length; i++) {
+        //    elements[i].remove();
+        //}    
+        var e = null;    
+        while (e = _domElements.pop()) {
+            e.remove();
+        }
+
+        while (e = _domEvents.pop()) {
+            e.target.removeEventListener(e.eventType, e.callbackFn);
+        }
     }
 
     function _addInkeyPress(e) {

tools/qb2js.bas

@@ -399,7 +399,11 @@ Sub ConvertLines (firstLine As Integer, lastLine As Integer, functionName As Str
 
                 If FindMethod(subname, m, "SUB") Then
                     Dim subargs As String
-                    subargs = Mid$(subline, Len(subname) + 2, Len(subline) - Len(subname) - 2)
+                    If subname = subline Then
+                        subargs = ""
+                    Else
+                        subargs = Mid$(subline, Len(subname) + 2, Len(subline) - Len(subname) - 2)
+                    End If
                     js = ConvertSub(m, subargs)
                 Else
                     AddWarning i, "Missing Sub [" + subname + "], ignoring Call command"
@@ -495,7 +499,8 @@ Function ConvertSub$ (m As Method, args As String)
         js = CallMethod(m) + "(" + ConvertPutImage(args) + ");"
 
     Else
-        js = CallMethod(m) + "(" + ConvertExpression(args) + ");"
+        'js = CallMethod(m) + "(" + ConvertExpression(args) + ");"
+        js = CallMethod(m) + "(" + ConvertMethodParams(args) + ");"
     End If
 
     ConvertSub = js
@@ -1147,7 +1152,8 @@ Function ConvertExpression$ (ex As String)
                         js = js + fneg + "QB.arrayValue(" + bvar.jsname + ", [" + ConvertExpression(ex2) + "]).value"
                     End If
                 ElseIf FindMethod(word, m, "FUNCTION") Then
-                    js = js + fneg + "(" + CallMethod(m) + "(" + ConvertExpression(ex2) + "))"
+                    'js = js + fneg + "(" + CallMethod(m) + "(" + ConvertExpression(ex2) + "))"
+                    js = js + fneg + "(" + CallMethod(m) + "(" + ConvertMethodParams(ex2) + "))"
                 Else
                     If _Trim$(word) <> "" Then AddWarning i, "Missing function or array [" + word + "]"
                     ' nested condition
@@ -1164,6 +1170,24 @@ Function ConvertExpression$ (ex As String)
     ConvertExpression = js
 End Function
 
+' Handle optional parameters
+Function ConvertMethodParams$ (args As String)
+    Dim js As String
+    ReDim params(0) As String
+    Dim argc As Integer
+    argc = ListSplit(args, params())
+    Dim i As Integer
+    For i = 1 To argc
+        If i > 1 Then js = js + ","
+        If _Trim$(params(i)) = "" Then
+            js = js + " undefined"
+        Else
+            js = js + " " + ConvertExpression(params(i))
+        End If
+    Next i
+    ConvertMethodParams = js
+End Function
+
 Function CallMethod$ (m As Method)
     Dim js As String
     If m.sync Then js = "await "
@@ -1889,6 +1913,15 @@ Sub AddGXConst (vname As String)
     AddVariable v, globalVars()
 End Sub
 
+Sub AddQBConst (vname As String)
+    Dim v As Variable
+    v.type = "CONST"
+    v.name = vname
+    v.jsname = "QB." + vname
+    v.isConst = True
+    AddVariable v, globalVars()
+End Sub
+
 Sub AddGlobal (vname As String, vtype As String, arraySize As Integer)
     Dim v As Variable
     v.type = vtype
@@ -2433,7 +2466,7 @@ Sub InitQBMethods
     AddQBMethod "FUNCTION", "_Display", False
     AddQBMethod "SUB", "_Display", False
     AddQBMethod "FUNCTION", "_FontWidth", False
-    AddQBMethod "FUNCTION", "_FreeImage", False
+    AddQBMethod "SUB", "_FreeImage", False
     AddQBMethod "FUNCTION", "_Green", False
     AddQBMethod "FUNCTION", "_Green32", False
     AddQBMethod "FUNCTION", "_Height", False
@@ -2454,12 +2487,22 @@ Sub InitQBMethods
     AddQBMethod "SUB", "_PutImage", False
     AddQBMethod "FUNCTION", "_Red", False
     AddQBMethod "FUNCTION", "_Red32", False
+    AddQBMethod "FUNCTION", "_Resize", False
+    AddQBMethod "FUNCTION", "_ResizeHeight", False
+    AddQBMethod "FUNCTION", "_ResizeWidth", False
     AddQBMethod "FUNCTION", "_RGB", False
     AddQBMethod "FUNCTION", "_RGBA", False
     AddQBMethod "FUNCTION", "_RGB32", False
     AddQBMethod "FUNCTION", "_RGBA32", False
     AddQBMethod "FUNCTION", "_Round", False
     AddQBMethod "FUNCTION", "_ScreenExists", False
+    AddQBMethod "SUB", "_SndClose", False
+    AddQBMethod "FUNCTION", "_SndOpen", False
+    AddQBMethod "SUB", "_SndPlay", False
+    AddQBMethod "SUB", "_SndLoop", False
+    AddQBMethod "SUB", "_SndPause", False
+    AddQBMethod "SUB", "_SndStop", False
+    AddQBMethod "SUB", "_SndVol", False
     AddQBMethod "SUB", "_Title", False
     AddQBMethod "FUNCTION", "_Trim", False
     AddQBMethod "FUNCTION", "_Width", False
@@ -2475,6 +2518,8 @@ Sub InitQBMethods
     AddQBMethod "SUB", "Color", False
     AddQBMethod "FUNCTION", "Command$", False
     AddQBMethod "FUNCTION", "Cos", False
+    AddQBMethod "FUNCTION", "Cvi", False
+    AddQBMethod "FUNCTION", "Cvl", False
     AddQBMethod "FUNCTION", "Exp", False
     AddQBMethod "FUNCTION", "Fix", False
     AddQBMethod "SUB", "Input", True
@@ -2490,6 +2535,8 @@ Sub InitQBMethods
     AddQBMethod "FUNCTION", "Log", False
     AddQBMethod "FUNCTION", "LTrim$", False
     AddQBMethod "FUNCTION", "Mid$", False
+    AddQBMethod "FUNCTION", "Mki$", False
+    AddQBMethod "FUNCTION", "Mkl$", False
     AddQBMethod "SUB", "Print", True
     AddQBMethod "SUB", "PSet", False
     AddQBMethod "FUNCTION", "Right$", False
@@ -2499,6 +2546,8 @@ Sub InitQBMethods
     AddQBMethod "FUNCTION", "Sgn", False
     AddQBMethod "FUNCTION", "Sin", False
     AddQBMethod "SUB", "Sleep", True
+    AddQBMethod "FUNCTION", "Space", False
+    AddQBMethod "FUNCTION", "String", False
     AddQBMethod "FUNCTION", "Sqr", False
     AddQBMethod "FUNCTION", "Str$", False
     AddQBMethod "SUB", "Swap", False
@@ -2508,12 +2557,34 @@ Sub InitQBMethods
     AddQBMethod "FUNCTION", "UCase$", False
     AddQBMethod "FUNCTION", "Val", False
 
+
     ' QBJS-only language features
     ' --------------------------------------------------------------------------------
+    AddQBConst "LOCAL"
+    AddQBConst "SESSION"
+
     AddSystemType "FETCHRESPONSE", "ok:INTEGER,status:INTEGER,statusText:STRING,text:STRING"
     AddQBMethod "FUNCTION", "Fetch", True
     AddQBMethod "FUNCTION", "FromJSON", False
     AddQBMethod "FUNCTION", "ToJSON", False
+
+    AddQBMethod "SUB", "Alert", False
+    AddQBMethod "FUNCTION", "Confirm", False
+    AddQBMethod "SUB", "DomAdd", False
+    AddQBMethod "SUB", "DomCreate", False
+    AddQBMethod "FUNCTION", "DomContainer", False
+    AddQBMethod "FUNCTION", "DomCreate", False
+    AddQBMethod "SUB", "DomEvent", False
+    AddQBMethod "FUNCTION", "DomGet", False
+    AddQBMethod "FUNCTION", "DomGetImage", False
+    AddQBMethod "SUB", "DomRemove", False
+    AddQBMethod "FUNCTION", "Prompt", False
+    AddQBMethod "SUB", "StorageClear", False
+    AddQBMethod "FUNCTION", "StorageGet", False
+    AddQBMethod "FUNCTION", "StorageKey", False
+    AddQBMethod "FUNCTION", "StorageLength", False
+    AddQBMethod "SUB", "StorageSet", False
+    AddQBMethod "SUB", "StorageRemove", False
 End Sub
 
 '$include: '../../gx/gx/gx_str.bm'