diff --git a/.vscode/tasks.json b/.vscode/tasks.json new file mode 100644 index 0000000..438186d --- /dev/null +++ b/.vscode/tasks.json @@ -0,0 +1,99 @@ +{ + "version": "2.0.0", + "tasks": [ + { + "label": "build", + "type": "shell", + "command": "${config:qb64.installPath}/qb64.exe", + "args": [ + "-c", + "'${fileDirname}/${fileBasename}'", + "-x", + "-o", + "'${fileDirname}/${fileBasenameNoExtension}.exe'" + ], + "linux": { + "command": "${config:qb64.installPath}/qb64", + "args": [ + "-c", + "'${fileDirname}/${fileBasename}'", + "-x", + "-o", + "'${fileDirname}/${fileBasenameNoExtension}'" + ] + }, + "osx": { + "command": "${config:qb64.installPath}/qb64", + "args": [ + "-c", + "'{fileDirname}/${fileBasename}'", + "-x", + "-o", + "'${fileDirname}/${fileBasenameNoExtension}'" + ] + }, + "group": { + "kind": "build", + "isDefault": true + }, + "presentation": { + "reveal": "always", + "panel": "new" + } + }, + { + "label": "Clean QB64", + "type": "shell", + "options": { + "cwd": "${config:qb64.installPath}/internal", + }, + "command": "${config:qb64.installPath}/internal/clean.bat", + "linux": { + "command":"${config:qb64.installPath}/internal/clean.sh", + }, + "osx": { + "command":"${config:qb64.installPath}/internal/clean.sh", + }, + "group": { + "kind": "build", + "isDefault": false + }, + "presentation": { + "reveal": "always", + "panel": "new" + } + }, + { + "label": "Exe Compact", + "type": "shell", + "windows": { + "command": "compact", + "args": [ + "/c", + "/exe:lzx", + "\"${fileDirname}\\${fileBasenameNoExtension}.exe\"" + ] + }, + "linux": { + "command": "upx", + "args": [ + "${fileDirname}/${fileBasenameNoExtension}.exe" + ] + }, + "osx": { + "command": "upx", + "args": [ + "${fileDirname}/${fileBasenameNoExtension}.exe" + ] + }, + "group": { + "kind": "build", + "isDefault": false + }, + "presentation": { + "reveal": "always", + "panel": "new" + } + } + ] + } \ No newline at end of file diff --git a/codemirror/themes/vscode-dark.css b/codemirror/themes/vscode-dark.css index 2b0f102..64077d0 100644 --- a/codemirror/themes/vscode-dark.css +++ b/codemirror/themes/vscode-dark.css @@ -55,7 +55,7 @@ body { font-family: Arial, helvetica, sans-serif; font-size: 14px; } -#gx-container { background-color: #1e1e1e; } +#gx-container { background-color: #1e1e1e; /*border-top: 0px;*/ } #slider { font-family: dosvga; @@ -85,14 +85,13 @@ a, #tabs { color: #ccc; } -#toolbar a { font-size: 16px; } +#toolbar a { font-size: 17px; } dialog textarea { font-family: Consolas, 'Courier New', monospace; letter-spacing: normal; background-color: #1e1e1e; color: #ccc; - /* border: 1px solid #ccc; */ } dialog { @@ -108,4 +107,8 @@ a:after { content: ""; } a:hover { text-decoration: underline; } #fs-contents a { font-variant: normal; font-family: Verdana, Geneva, Tahoma, sans-serif; font-size: 13px; } -#fs-contents a:hover { text-decoration: none; } \ No newline at end of file +#fs-contents a:hover { text-decoration: none; } + +/* #code { + border-top: 0px; +} */ \ No newline at end of file diff --git a/codemirror/themes/win-classic.css b/codemirror/themes/win-classic.css index caa1e41..df494bf 100644 --- a/codemirror/themes/win-classic.css +++ b/codemirror/themes/win-classic.css @@ -44,6 +44,9 @@ a:hover { color: #000; } a:before { content: ""; } a:after { content: ""; } +li a, li a:link, li a:visited { border: 0; text-decoration: underline; } +li a:active { border: 0; } + dialog textarea { font-family: 'Courier New', monospace; font-size: 14px; @@ -61,11 +64,11 @@ dialog { #code { border: 2px inset; - border-top: 0; + /*border-top: 0;*/ font-size: 14px; } -#logo { right: 2px; top: 2px; } +#logo { right: 10px; top: 10px; } #output-content, #warning-container { font-family: 'Courier New', monospace; diff --git a/img/about-hover.svg b/img/about-hover.svg new file mode 100644 index 0000000..5892ad1 --- /dev/null +++ b/img/about-hover.svg @@ -0,0 +1,24 @@ + + + + + + + diff --git a/img/about.svg b/img/about.svg new file mode 100644 index 0000000..ebc4cdc --- /dev/null +++ b/img/about.svg @@ -0,0 +1,24 @@ + + + + + + + diff --git a/img/console-hide-hover.svg b/img/console-hide-hover.svg new file mode 100644 index 0000000..ad4ba9f --- /dev/null +++ b/img/console-hide-hover.svg @@ -0,0 +1,49 @@ + + + + + + + + diff --git a/img/console-hide.svg b/img/console-hide.svg new file mode 100644 index 0000000..63736c6 --- /dev/null +++ b/img/console-hide.svg @@ -0,0 +1,49 @@ + + + + + + + + diff --git a/img/console-show-hover.svg b/img/console-show-hover.svg new file mode 100644 index 0000000..8cee538 --- /dev/null +++ b/img/console-show-hover.svg @@ -0,0 +1,65 @@ + + + + + + + + diff --git a/img/console-show.svg b/img/console-show.svg new file mode 100644 index 0000000..f12c82f --- /dev/null +++ b/img/console-show.svg @@ -0,0 +1,65 @@ + + + + + + + + diff --git a/img/slide-left-hover.svg b/img/slide-left-hover.svg new file mode 100644 index 0000000..13b2a03 --- /dev/null +++ b/img/slide-left-hover.svg @@ -0,0 +1,46 @@ + + + + + + + + diff --git a/img/slide-left.svg b/img/slide-left.svg new file mode 100644 index 0000000..f4b1af1 --- /dev/null +++ b/img/slide-left.svg @@ -0,0 +1,47 @@ + + + + + + + + + + diff --git a/img/slide-right-hover.svg b/img/slide-right-hover.svg new file mode 100644 index 0000000..58ac1ab --- /dev/null +++ b/img/slide-right-hover.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + diff --git a/img/slide-right.svg b/img/slide-right.svg new file mode 100644 index 0000000..e7ce1a7 --- /dev/null +++ b/img/slide-right.svg @@ -0,0 +1,43 @@ + + + + + + + + diff --git a/img/stop-hover.svg b/img/stop-hover.svg new file mode 100644 index 0000000..eef4b37 --- /dev/null +++ b/img/stop-hover.svg @@ -0,0 +1,51 @@ + + + + + + + diff --git a/img/stop.svg b/img/stop.svg new file mode 100644 index 0000000..bd6e9f4 --- /dev/null +++ b/img/stop.svg @@ -0,0 +1,51 @@ + + + + + + + diff --git a/index.html b/index.html index ebb9750..007ec4e 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,7 @@ - + @@ -25,30 +25,33 @@ -
-
- - -
- - - -
-
- Edit - Run - Stop - Share +
+ + +
+ + + +
+ + + +
+ + + +
-
-
<
-
>
+
+
+
+
  -
+
Console
Javascript
Files
@@ -67,9 +70,6 @@
-
@@ -100,7 +100,7 @@
Ok - Cancel + Cancel
@@ -116,8 +116,29 @@ Close
+ + +
+ +

QBJS - QBasic for the Web!

+

Version: 0.7.0

+

+

+ QBJS brings the fun and accessibility of QBasic to the browser.
+ Learn more:
+

+

+

Copyright (c) 2022-2023 boxgaming

+
+ Close +
+
+ - diff --git a/logo.png b/logo.png index b75f12f..1665b7d 100644 Binary files a/logo.png and b/logo.png differ diff --git a/qbjs-ide.css b/qbjs-ide.css index 1cc895e..e11bd7a 100644 --- a/qbjs-ide.css +++ b/qbjs-ide.css @@ -7,6 +7,7 @@ body { font-family: dosvga, Arial, Helvetica, sans-serif; /* letter-spacing: -1px; */ color: #999; + overflow: hidden; } a, a:link, a:visited { text-decoration: none; @@ -22,8 +23,10 @@ a:after { content: " >"; } #code-container { position: absolute; - left: 10px; - top: 10px; + /*left: 10px; + top: 10px; */ + left: 5px; + top: 33px; } #code { margin-bottom: 5px; @@ -32,12 +35,14 @@ a:after { content: " >"; } #game-container { position: absolute; left: 620px; - top: 10px; + /*top: 10px; */ + top: 33px; } #gx-container { border: 1px solid #666; text-align: center; background-color: #000; + overflow: auto; } #gx-canvas { border: 1px solid #222; @@ -86,8 +91,14 @@ a:after { content: " >"; } } #slider { position: absolute; - top: 10px; + top: 33px; color: #666; + cursor: col-resize; + width: 8px; +} +#vslider { + height: 8px; + cursor: row-resize; } .slider-button { padding-top: 2px; @@ -115,6 +126,7 @@ a:after { content: " >"; } margin-right: 2px; color: #999; cursor: pointer; + user-select: none; } .tab:hover { color: #fff; @@ -184,10 +196,10 @@ dialog a:hover { color: #000 !important; } #logo { position: absolute; - right: 1px; - top: 1px; + right: 15px; + top: 15px; cursor: pointer; - opacity: 0.33; + opacity: 0.75; } #logo:hover { opacity: 1.0; } @@ -268,8 +280,12 @@ dialog a:hover { color: #000 !important; } #toolbar { border: 1px solid #666; - border-bottom: 0; + /*border-bottom: 0;*/ padding: 3px 5px 0px; + position: absolute; + left: 5px; + top: 5px; + right: 5px; /*background-color: rgb(0, 49, 78);*/ } .toolbar-button { @@ -286,14 +302,26 @@ dialog a:hover { color: #000 !important; } #toolbar-button-open { background-image: url('img/open.svg'); } #toolbar-button-save { background-image: url('img/save.svg'); background-size: 1.08em, 1.08em; background-position: .05em .05em; } #toolbar-button-run { background-image: url('img/run.svg'); } +#toolbar-button-stop { background-image: url('img/stop.svg'); } #toolbar-button-share { background-image: url('img/share.svg'); } -#toolbar-button-settings { background-image: url('img/settings.svg'); float: right; } +#toolbar-button-settings { background-image: url('img/settings.svg'); } +#toolbar-button-console-show { background-image: url('img/console-show.svg'); float: right; margin-right: 4px !important; } +#toolbar-button-console-hide { background-image: url('img/console-hide.svg'); float: right; margin-right: 4px !important; } +#toolbar-button-about { background-image: url('img/about.svg'); float: right; margin-left: 4px !important; } +#toolbar-button-slide-right { background-image: url('img/slide-right.svg'); float: right; margin-right: 4px !important; } +#toolbar-button-slide-left { background-image: url('img/slide-left.svg'); float: right; margin-right: 4px !important; } #toolbar-button-open:hover { background-image: url('img/open-hover.svg'); } #toolbar-button-save:hover { background-image: url('img/save-hover.svg'); } #toolbar-button-run:hover { background-image: url('img/run-hover.svg'); } +#toolbar-button-stop:hover { background-image: url('img/stop-hover.svg'); } +#toolbar-button-console-show:hover { background-image: url('img/console-show-hover.svg'); } +#toolbar-button-console-hide:hover { background-image: url('img/console-hide-hover.svg'); } #toolbar-button-share:hover { background-image: url('img/share-hover.svg'); } +#toolbar-button-about:hover { background-image: url('img/about-hover.svg'); } #toolbar-button-settings:hover { background-image: url('img/settings-hover.svg'); } +#toolbar-button-slide-left:hover { background-image: url('img/slide-left-hover.svg'); } +#toolbar-button-slide-right:hover { background-image: url('img/slide-right-hover.svg'); } #toolbar .spacer { display: inline-block; diff --git a/qbjs-ide.js b/qbjs-ide.js index c202509..db49ab5 100644 --- a/qbjs-ide.js +++ b/qbjs-ide.js @@ -11,13 +11,52 @@ var selectedError = null; var currPath = "/"; var mainProg = null; var theme = "qbjs"; +var splitWidth = 600; +var splitHeight = 327; +var sliding = false; +var vsliding = false; +var _e = { + ideTheme: _el("ide-theme"), + loadScreen: _el("gx-load-screen"), + jsCode: _el("js-code"), + warningContainer: _el("warning-container"), + gxContainer: _el("gx-container"), + shareMode: _el("share-mode"), + shareCode: _el("share-code"), + shareDialog: _el("share-dialog"), + exportButton: _el("export-button"), + fileInput: _el("file-input"), + progSelSources: _el("prog-sel-sources"), + progSelDialog: _el("prog-sel-dialog"), + optionsDialog: _el("options-dialog"), + aboutDialog: _el("about-dialog"), + toolbar: _el("toolbar"), + tbConsoleShow: _el("toolbar-button-console-show"), + tbConsoleHide: _el("toolbar-button-console-hide"), + tbSlideRight: _el("toolbar-button-slide-right"), + tbSlideLeft: _el("toolbar-button-slide-left"), + tbRun: _el("toolbar-button-run"), + tbStop: _el("toolbar-button-stop"), + outputContainer: _el("output-container"), + outputContent: _el("output-content"), + codeContainer: _el("code-container"), + rightPanel: _el("game-container"), + slider: _el("slider"), + vslider: _el("vslider"), + fsBrowser: _el("fs-browser"), + fsContents: _el("fs-contents"), + fsUrl: _el("fs-url"), + code: _el("code"), +}; + +function _el(id) { + return document.getElementById(id); +} async function init() { - var themeCss = document.getElementById("ide-theme"); - themeCss.href = "codemirror/themes/" + theme + ".css"; + _e.ideTheme.href = "codemirror/themes/" + theme + ".css"; document.body.style.display = "initial"; - //alert(document.getElementById("ide-theme")); if (window.innerWidth < 1200) { sizeMode = "max"; } @@ -48,10 +87,9 @@ async function init() { } } if (appMode == "play") { - document.getElementById("gx-load-screen").style.display = "block"; + _e.loadScreen.style.display = "block"; } - // initialize the code editor editor = CodeMirror(document.querySelector("#code"), { lineNumbers: true, @@ -93,10 +131,6 @@ async function init() { }); } - - document.getElementsByClassName("CodeMirror-cursor")[0].innerHTML = " "; - - if (srcUrl) { var res = await fetch(nv[1]); var contentType = res.headers.get("Content-Type"); @@ -124,15 +158,12 @@ async function init() { } async function getErrorLine(error, stackDepth) { - if (stackDepth) { + if (!stackDepth) { stackDepth = 0; } else if (error._stackDepth) { stackDepth = error._stackDepth; } - console.log("_stackDepth: " + error._stackDepth); - console.log("stackDepth: " + stackDepth); - //console.log(StackTrace.fromError(error)); var cdepth = 0; var srcLine = ""; @@ -172,7 +203,7 @@ async function getErrorLine(error, stackDepth) { } async function runProgram() { - document.getElementById("gx-load-screen").style.display = "none"; + _e.loadScreen.style.display = "none"; if (sizeMode == "max") { slideLeft(); @@ -185,8 +216,7 @@ async function runProgram() { await displayWarnings(); - var jsDiv = document.getElementById("js-code"); - jsDiv.innerHTML = jsCode; + _e.jsCode.innerHTML = jsCode; window.onresize(); try { @@ -201,7 +231,7 @@ async function runProgram() { var srcLine = await getErrorLine(error); console.log("returned: " + srcLine); - var table = document.getElementById("warning-table"); + var table = _el("warning-table"); if (table) { tr = document.createElement("tr"); addWarningCell(tr, "ERROR"); @@ -219,7 +249,7 @@ async function runProgram() { QB.halt(); GX.sceneStop(); } - document.getElementById("gx-container").focus(); + _e.gxContainer.focus(); return false; } @@ -234,39 +264,39 @@ function shareProgram() { var b64 = LZUTF8.compress(editor.getValue(), { outputEncoding: "Base64" }); var baseUrl = location.href.split('?')[0]; - var mode = document.getElementById("share-mode").value; - var codeShare = document.getElementById("share-code"); + var mode = _e.shareMode.value; + var codeShare = _e.shareCode; var url = baseUrl + "?"; if (mode) { url += "mode=" + mode + "&"; } url += "code=" + b64; codeShare.value = url; - var shareDialog = document.getElementById("share-dialog"); - if (!shareDialog.open) { - shareDialog.showModal(); + if (!_e.shareDialog.open) { + _e.shareDialog.showModal(); } codeShare.focus(); codeShare.select(); var exportVisible = (mode == "play" || mode == "auto"); - document.getElementById("export-button").style.display = (exportVisible) ? "block" : "none"; -} - -function settings() { - var settingsDialog = document.getElementById("options-dialog"); - if (!settingsDialog.open) { - settingsDialog.showModal(); - } + _e.exportButton.style.display = (exportVisible) ? "block" : "none"; } function changeTheme(newTheme) { theme = newTheme; - var themeCss = document.getElementById("ide-theme"); - themeCss.href = "codemirror/themes/" + theme + ".css"; + _e.ideTheme.href = "codemirror/themes/" + theme + ".css"; editor.setOption("theme", theme); } +function showDialog(dlg) { + if (typeof dlg == "string") { + dlg = _el(dlg); + } + if (!dlg.open) { + dlg.showModal(); + } +} + async function exportProgram() { var zip = new JSZip(); @@ -274,7 +304,7 @@ async function exportProgram() { if (!QBCompiler) { QBCompiler = await _QBCompiler(); } var jsCode = "async function __qbjs_run() {\n" + await QBCompiler.compile(qbCode) + "\n}"; - var mode = document.getElementById("share-mode").value; + var mode = _e.shareMode.value; zip.file("index.html", await getFile("export/" + mode + ".html", "text")); zip.file("program.js", jsCode); zip.file("fullscreen.png", await getFile("export/fullscreen.png", "blob")); @@ -347,8 +377,7 @@ async function saveProject() { } async function openProject() { - var f = document.getElementById("file-input"); - f.click(); + _e.fileInput.click(); } async function onOpenProject(event) { @@ -369,7 +398,7 @@ async function onOpenProject(event) { } } -document.getElementById("file-input").onchange = onOpenProject; +_e.fileInput.onchange = onOpenProject; async function loadProject(zipData, mainFilename) { if (!mainFilename) { @@ -405,20 +434,18 @@ async function loadProject(zipData, mainFilename) { } } if (!mainFound) { - var fileList = document.getElementById("prog-sel-sources"); + var fileList = _e.progSelSources; fileList.innerHTML = ""; for (var i=0; i < basFiles.length; i++) { var opt = new Option(basFiles[i], basFiles[i]); fileList.append(opt); } - var progSelDlg = document.getElementById("prog-sel-dialog"); - progSelDlg.showModal(); + showDialog(_e.progSelDialog); } refreshFS(); }); - function dirFromPath(path) { var vfs = GX.vfs(); if (path == "") { return vfs.rootDirectory(); } @@ -438,9 +465,8 @@ async function loadProject(zipData, mainFilename) { } } - function onSelMainProg() { - var fileList = document.getElementById("prog-sel-sources"); + var fileList = _e.progSelSources; if (fileList.value == "") { alert("No file selected."); } @@ -453,12 +479,6 @@ function onSelMainProg() { } } -function closeProgSelDlg() { - var progSelDlg = document.getElementById("prog-sel-dialog"); - progSelDlg.close(); -} - - async function getFile(path, type) { var file = await fetch(path); if (type == "text") { @@ -470,13 +490,14 @@ async function getFile(path, type) { } function testShare() { - var url = document.getElementById("share-code").value; - open(url, "_blank"); + open(_e.shareCode.value, "_blank"); } function closeDialog() { - document.getElementById("share-dialog").close(); - document.getElementById("options-dialog").close(); + _e.shareDialog.close(); + _e.progSelDialog.close(); + _e.optionsDialog.close(); + _e.aboutDialog.close(); } async function displayWarnings() { @@ -484,10 +505,10 @@ async function displayWarnings() { var w = await QBCompiler.getWarnings(); warnCount = w.length; - var wdiv = document.getElementById("warning-container"); + var wdiv = _e.warningContainer; wdiv.innerHTML = ""; var table = document.createElement("table"); - table.width = "100%"; + table.style.width = "100%"; table.id = "warning-table"; table.cellPadding = 2; table.cellSpacing = 0; @@ -517,11 +538,10 @@ async function displayWarnings() { } function gotoWarning() { - if (selectedError ) { selectedError.classList.remove("selected"); } //.style.backgroundColor = "transparent"; } - editor.setCursor({ line: this.codeLine}); - //this.style.backgroundColor = "#333"; - this.classList.add("selected"); - selectedError = this; + if (selectedError ) { selectedError.classList.remove("selected"); } + editor.setCursor({ line: this.codeLine}); + this.classList.add("selected"); + selectedError = this; }; function addWarningCell(tr, text, width) { @@ -534,32 +554,39 @@ function addWarningCell(tr, text, width) { tr.append(td); } - function showConsole() { consoleVisible = !consoleVisible; + if (!consoleVisible) { + _e.tbConsoleShow.style.display = "inline-block"; + _e.tbConsoleHide.style.display = "none"; + } + else { + _e.tbConsoleHide.style.display = "inline-block"; + _e.tbConsoleShow.style.display = "none"; + } window.dispatchEvent(new Event('resize')); } function changeTab(tabName) { if (tabName == currTab) { return; } - document.getElementById("tab-" + currTab).classList.remove("active"); - document.getElementById("tab-" + tabName).classList.add("active"); + _el("tab-" + currTab).classList.remove("active"); + _el("tab-" + tabName).classList.add("active"); currTab = tabName; if (currTab == "console") { - document.getElementById("warning-container").style.display = "block"; - document.getElementById("js-code").style.display = "none"; - document.getElementById("fs-browser").style.display = "none"; + _e.warningContainer.style.display = "block"; + _e.jsCode.style.display = "none"; + _e.fsBrowser.style.display = "none"; } else if (currTab == "js") { - document.getElementById("warning-container").style.display = "none"; - document.getElementById("fs-browser").style.display = "none"; - document.getElementById("js-code").style.display = "block"; + _e.warningContainer.style.display = "none"; + _e.fsBrowser.style.display = "none"; + _e.jsCode.style.display = "block"; } else if (currTab == "fs") { - document.getElementById("fs-browser").style.display = "block"; - document.getElementById("warning-container").style.display = "none"; - document.getElementById("js-code").style.display = "none"; + _e.fsBrowser.style.display = "block"; + _e.warningContainer.style.display = "none"; + _e.jsCode.style.display = "none"; refreshFS(); } } @@ -570,30 +597,30 @@ function displayTypes() { for (var i=0; i < t.length; i++) { tstr += t[i].name } - var wdiv = document.getElementById("warning-container"); + var wdiv = _e.warningContainer; wdiv.innerHTML = tstr; } function slideLeft() { - document.getElementById("slider-right").style.display = "block"; + _e.tbSlideRight.style.display = "inline-block"; if (sizeMode == "max" && window.innerWidth >= 1200) { sizeMode = "normal" } else { sizeMode = "min" - document.getElementById("slider-left").style.display = "none"; + _e.tbSlideLeft.style.display = "none"; } window.dispatchEvent(new Event('resize')); } function slideRight() { - document.getElementById("slider-left").style.display = "block"; + _e.tbSlideLeft.style.display = "inline-block"; if (sizeMode == "min" && window.innerWidth >= 1200) { sizeMode = "normal" } else { sizeMode = "max" - document.getElementById("slider-right").style.display = "none"; + _e.tbSlideRight.style.display = "none"; } window.dispatchEvent(new Event('resize')); } @@ -601,8 +628,8 @@ function slideRight() { window.onresize = function() { if (!editor) { return; } - var f = document.getElementById("gx-container"); - var jsDiv = document.getElementById("output-container"); + var f = _e.gxContainer; + var jsDiv = _e.outputContainer; if (appMode == "play" || appMode == "auto") { f.style.left = "0px"; @@ -610,83 +637,78 @@ window.onresize = function() { f.style.width = window.innerWidth; f.style.height = window.innerHeight; f.style.border = "0px"; - document.getElementById("code-container").style.display = "none"; - document.getElementById("slider").style.display = "none"; - document.getElementById("show-js-container").style.display = "none"; - document.getElementById("game-container").style.left = "0px"; - document.getElementById("game-container").style.top = "0px"; + _e.codeContainer.style.display = "none"; + _e.slider.style.display = "none"; + _e.rightPanel.style.left = "0px"; + _e.rightPanel.style.top = "0px"; + _e.rightPanel.style.right = "0px"; + _e.rightPanel.style.bottom = "0px"; + _e.rightPanel.style.backgroundColor = "#000"; + _e.toolbar.style.display = "none"; jsDiv.style.display = "none"; - document.getElementById("logo").style.display = "none"; } else { - var cmwidth = 600; + var cmwidth = splitWidth; if (sizeMode == "min") { - cmwidth = 0; + cmwidth = -10; editor.getWrapperElement().style.display = "none"; - //document.getElementById("code").style.borderRight = "0"; - document.getElementById("game-container").style.display = "block"; - document.getElementById("edit-button").style.display = "block"; + _e.rightPanel.style.display = "block"; + _e.slider.style.display = "none"; } else if (sizeMode == "max") { - cmwidth = window.innerWidth - 25; - document.getElementById("game-container").style.display = "none"; - //document.getElementById("code").style.borderRight = "1px solid #666"; - document.getElementById("slider").style.border = "1px solid #666"; - document.getElementById("slider").style.borderLeft = "0"; + cmwidth = window.innerWidth - 12; + _e.rightPanel.style.display = "none"; + _e.slider.style.display = "none"; editor.getWrapperElement().style.display = "block"; - document.getElementById("edit-button").style.display = "none"; } else { editor.getWrapperElement().style.display = "block"; - document.getElementById("game-container").style.display = "block"; - //document.getElementById("code").style.borderRight = "1px solid #666"; - document.getElementById("slider").style.border = "0"; - document.getElementById("edit-button").style.display = "none"; + _e.rightPanel.style.display = "block"; + _e.slider.style.display = "block"; } - document.getElementById("game-container").style.left = (cmwidth + 20) + "px"; - f.style.width = (window.innerWidth - (cmwidth + 35)) + "px"; + _e.rightPanel.style.left = (cmwidth + 15) + "px"; + f.style.width = (window.innerWidth - (cmwidth + 22)) + "px"; jsDiv.style.width = f.style.width; - document.getElementById("slider").style.left = (cmwidth + 12) + "px"; + _e.slider.style.left = (cmwidth + 7) + "px"; if (consoleVisible) { - f.style.height = (window.innerHeight - 337) + "px"; + f.style.height = (window.innerHeight - splitHeight) + "px"; jsDiv.style.display = "block"; - jsDiv.style.top = (window.innerHeight - 327) + "px"; - document.getElementById("toggle-console").innerHTML = "Hide Console"; + jsDiv.style.top = (window.innerHeight - splitHeight + 10) + "px"; + _e.outputContent.style.height = (splitHeight - 77) + "px"; } else { - f.style.height = (window.innerHeight - 50) + "px"; + f.style.height = (window.innerHeight - 40) + "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 - 79); - document.getElementById("code").style.height = (window.innerHeight - 79) + "px"; - document.getElementById("slider").style.height = (window.innerHeight - 50) + "px"; + editor.setSize(cmwidth, window.innerHeight - 40); + _e.code.style.height = (window.innerHeight - 40) + "px"; + _e.slider.style.height = (window.innerHeight - 40) + "px"; } QB.resize(f.clientWidth, f.clientHeight); } window.onresize(); + function checkButtonState() { - var stopButton = document.getElementById("stop-button"); + var stopButton = _e.tbStop; + var runButton = _e.tbRun; if (GX.sceneActive() || QB.running()) { - stopButton.style.display = "inline"; + stopButton.style.display = "inline-block"; + runButton.style.display = "none"; } else { stopButton.style.display = "none"; + runButton.style.display = "inline-block"; } - setTimeout(checkButtonState, 100); } checkButtonState(); init(); - // Virtual File System Viewer function refreshFS() { var vfs = QB.vfs(); @@ -696,7 +718,7 @@ function refreshFS() { node = vfs.getNode(currPath); } - var contents = document.getElementById("fs-contents"); + var contents = _e.fsContents; while (contents.firstChild) { contents.removeChild(contents.firstChild); } @@ -707,7 +729,7 @@ function refreshFS() { } currPath = vfs.fullPath(node) - document.getElementById("fs-url").innerHTML = currPath; + _e.fsUrl.innerHTML = currPath; if (currPath != "/") { var a = document.createElement("a"); @@ -829,6 +851,32 @@ async function fileDrop(e) { refreshFS(); } +_e.slider.addEventListener("mousedown", function(event) { + sliding = true; +}); +_e.vslider.addEventListener("mousedown", function(event) { + vsliding = true; +}); + +window.addEventListener("mousemove", function(event) { + if (!sliding && !vsliding) { return; } + if (sliding) { + splitWidth = event.pageX - 10; + window.onresize(); + } + else { + splitHeight = window.innerHeight - event.pageY + 35; + window.onresize(); + } +}); + +window.addEventListener("mouseup", function() { + sliding = false; + vsliding = false; +}); + + + function fileDragEnter(e) { if (currTab != "fs") { return; } e.stopPropagation(); @@ -851,8 +899,8 @@ function fileDragOver(e) { e.preventDefault(); } -var dropArea = document.getElementById("output-content"); +var dropArea = _e.outputContent; dropArea.addEventListener("drop", fileDrop, false); dropArea.addEventListener("dragover", fileDragOver, false); dropArea.addEventListener("dragenter", fileDragEnter, false); -dropArea.addEventListener("dragleave", fileDragLeave, false); +dropArea.addEventListener("dragleave", fileDragLeave, false); \ No newline at end of file