From 5f6aa252f2fac893dbbd4d31f4809bcffdf0ea72 Mon Sep 17 00:00:00 2001 From: boxgaming <75969133+boxgaming@users.noreply.github.com> Date: Wed, 26 Apr 2023 17:17:57 -0500 Subject: [PATCH] UI and theme updates --- .vscode/tasks.json | 99 ++++++++++ codemirror/themes/vscode-dark.css | 11 +- codemirror/themes/win-classic.css | 7 +- img/about-hover.svg | 24 +++ img/about.svg | 24 +++ img/console-hide-hover.svg | 49 +++++ img/console-hide.svg | 49 +++++ img/console-show-hover.svg | 65 +++++++ img/console-show.svg | 65 +++++++ img/slide-left-hover.svg | 46 +++++ img/slide-left.svg | 47 +++++ img/slide-right-hover.svg | 73 ++++++++ img/slide-right.svg | 43 +++++ img/stop-hover.svg | 51 ++++++ img/stop.svg | 51 ++++++ index.html | 69 ++++--- logo.png | Bin 1114 -> 1535 bytes qbjs-ide.css | 46 ++++- qbjs-ide.js | 290 +++++++++++++++++------------- 19 files changed, 949 insertions(+), 160 deletions(-) create mode 100644 .vscode/tasks.json create mode 100644 img/about-hover.svg create mode 100644 img/about.svg create mode 100644 img/console-hide-hover.svg create mode 100644 img/console-hide.svg create mode 100644 img/console-show-hover.svg create mode 100644 img/console-show.svg create mode 100644 img/slide-left-hover.svg create mode 100644 img/slide-left.svg create mode 100644 img/slide-right-hover.svg create mode 100644 img/slide-right.svg create mode 100644 img/stop-hover.svg create mode 100644 img/stop.svg 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 b75f12f86330efb24b9817fefdbc25d430171acc..1665b7d92897d635a7f69d92e93d3cf1780a41c2 100644 GIT binary patch delta 1523 zcmV%NqiBL{Q4GJ0x0000DNk~Le0000$0000$2nGNE0IF$m-jN|7f4`_m z#lZ?H4jEb}3!);9QpF-zC~bvS9ZW9$f+h_~ii@M*T5#}VvFhOBtgC~oAP9bdxVktg zx=4xtOA0MwJUH&hyL*qjcYwE9Ws2dS02I~K(}}o{%dZN-SNJiEK?D#LnV}^!i&?mi zuX}j-dKcqa?&tm-eR9EIfJY#ne`A_%5^oUCY?>P9ec~`Hi!$*!@wiSGB!1+&DudEzj!Q0ii-i&5YySIRg5(fs5;oChY;2JHXJBChDRs z`Dl8JMd1C6z9|n3+ycF8PH*jfoIU_q>T3B0I5-5xN|e3s^6sAQ-u^w)?(YY8#d4|q z+V*Jx000JJOGiWi=>Q1;e-O^$H97zQ010qNS#tmY3ljhU3ljkVnw%H_000McNliru z=L8uQ2M9!SKp_AC02y>eSad^gZEa<4bO1wgWnpw>WFU8GbZ8()Nlj2!fese{00Y-a zL_t(|+U=UnPgGYFz<+m!fII<*0#XQ)DByHq9l?)Pi4h~1rZH{|e|3eSvNCCtrnTBt zcVcAIx@=0=81*j@OrWtE6B8L-bWz8ki9s5m$T*`TQf6)!ci_!1Z$5Nt!Ol6!&CHwg z&O2{@@1Aq+xp@lE6tK7`a1j6kKmZ5;0U!VbfB+Bx0zd!=00AHX1b_e#00KY&6qXdF z)s)mjad~Fz$TUQQf9AW}16FNrUK8z{L@B7-o?icF0Capa+fxr#miwHahF8x16zR6b zKOaUl9n5%LeQN-2oHYmg&!Il~Ca3?OWalLHUKqR&E_bRf7KPqjF!jJ3_YXr`M`njt z24L`eN0l4+A?cSbozU8c`fw+d*Fj_!BG2G;$Q~{i6m5W4e{)c?3ns^5^A1$ic3Y>E z!5exC3mNS6Lh4!*mNj5ru9hPT@j-h|r0pSOE=^W*Yb8y_g7cO6b zU(RONEz9{4f7l)O7mLA(kL{TwNl*Y}sRHX=?)_>$_jW?F4-WUhfn)IXA((k=bYoW` z;E#u#Hr3!i2Vi{wc;m^#wG#j6XnxoAUpJ$r)x>vY4a785)f3{WoA z$=_DxT+p|Fgu6dOIFP@O{$8^V7#N1lTi{}XKmQnuFCIY65-_{4Y}iJvF9Uv~{l04A2@q)Rj^O)kjCb`x)9l1mWPnV=MO`*`eX*0{|olMi8h6dGEfw$UWYmR1uk!KrlyprOTHtbm=h z^O2E3e>2XH7y!*alPIln2)<1Yu(qO3O`v*it)DX3eHt!3vPbvnceoC47lWtKG$-X= zyPU11lvSFin|S=r7ebpFP+$JOQqKOLE5U_%2tI*Q50q3ujTiRx*>zkc{P~wNuo!{p zqUj>Hb%0f!e7!w=5L=3eQgy1`i+NMN$~>^Ke*zl4CX0jl4)8JrFM{UWWyxf>^1$N$ z=4aq_1eO+a-w#OY+|pIK#7=Ql7n!r2Q|Go?#z*11E@xdPyG)&8wh+)${?v(XRYRT6 z*uN*7nW$D5e0U!VbfB+Bx0zd!=00AHX1b_e#00KY&2!Mi< Ze*mgFP$9y!Xwd)w002ovPDHLkV1ks=x9tD` delta 1099 zcmV-R1ho7A3)%=FiBL{Q4GJ0x0000DNk~Le0000W0000W2nGNE0CReJ^pPPTe?P<` z6^CXJQOHo8EQpFYN)?M>p|llRbuhW~3z{?}DK3tJYr(;f#j1mgv#t)Vf*|+-;^^e0 z=prTlFDbN$@!+^0@9sVB-U0q*m8oWM0#G%}NGIZAF25@Fz9NVa1dJdeF;h=w7PIgi zU-$6w^)AM#TiG{=#rUTgh;p<}eai zLJ}#6kWohkRal78s*z$MP5W^V|B&NPkxM351&kaEs6mC~_`(0+ceiG7e`?ZA3dez- z7u)_A1$uXZR>QWxk8Qhk0tB9cE3MT3B0I5-5xN|e3s@$OJ}Z~vZY_xA%=C~}-g zBP&$^000JJOGiWi{s7>4z)TaHImXMVnf31bv><^Inkg*;n{czF^dAl{g-v>q$Y&!r|7o!10+6FLL;B_0^ zD@J{M3JEFN%sXmeCZGlWu7z7?oA&gNz>Tx8HW$nm&0kjnFFPSA8P;SkQ4P53VC)N& zyR`9>+t5%6HydNrz#>eX7zKk7hF_t&8Ws-jx~sM8@1SiAf2OCP(Fwf||2_k%J{9%s zJgnM?$U6?ZD&Wv*SZ9y@QfU@6RDr<&$6T=e-~t&?K;b0_d|n(;(GkeD!-zLpD?0<} znQ;Fycv`iZD6NJaCGhxK>nr>f59E@h2@DM&AdXJ<=)`l4opB#@I2^g4{1e5At4Edz3{>_&k}Uhpr*#b zYz6Og#O5-X^g*`^Y!#^S50U6!hhU%?x`A&KkZ278_~BN)*1uXCsR4`(!Gq?AdzlKZ ze5l#Vm8hLnqIycP?@qM-pPH0X&A$x?T2KQm`rl9oA"; } #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