1
1
Fork 0
mirror of https://github.com/boxgaming/qbjs.git synced 2024-04-29 01:30:13 +00:00

UI and theme updates

This commit is contained in:
boxgaming 2023-04-26 17:17:57 -05:00
parent 6a55cfc09b
commit 5f6aa252f2
19 changed files with 949 additions and 160 deletions

99
.vscode/tasks.json vendored Normal file
View file

@ -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"
}
}
]
}

View file

@ -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; }
#fs-contents a:hover { text-decoration: none; }
/* #code {
border-top: 0px;
} */

View file

@ -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;

24
img/about-hover.svg Normal file
View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
height="24"
id="svg8"
version="1.1"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<path
d="M 12,2 C 6.489,2 2,6.489 2,12 2,17.511 6.489,22 12,22 17.511,22 22,17.511 22,12 22,6.489 17.511,2 12,2 Z m 0,2 c 4.43012,0 8,3.56988 8,8 0,4.43012 -3.56988,8 -8,8 C 7.56988,20 4,16.43012 4,12 4,7.56988 7.56988,4 12,4 Z"
id="circle1332"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000" />
<path
d="m 12,9 a 1,1 0 0 0 -1,1 v 7 a 1,1 0 0 0 1,1 1,1 0 0 0 1,-1 V 10 A 1,1 0 0 0 12,9 Z"
id="path1340"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000" />
<path
d="m 13,6.9996 a 1,1 0 0 1 -1,1 1,1 0 0 1 -1,-1 1,1 0 0 1 1,-1 1,1 0 0 1 1,1 z"
id="path1342"
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

24
img/about.svg Normal file
View file

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
height="24"
id="svg8"
version="1.1"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<path
d="M 12,2 C 6.489,2 2,6.489 2,12 2,17.511 6.489,22 12,22 17.511,22 22,17.511 22,12 22,6.489 17.511,2 12,2 Z m 0,2 c 4.43012,0 8,3.56988 8,8 0,4.43012 -3.56988,8 -8,8 C 7.56988,20 4,16.43012 4,12 4,7.56988 7.56988,4 12,4 Z"
id="circle1332"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000" />
<path
d="m 12,9 a 1,1 0 0 0 -1,1 v 7 a 1,1 0 0 0 1,1 1,1 0 0 0 1,-1 V 10 A 1,1 0 0 0 12,9 Z"
id="path1340"
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;shape-margin:0;inline-size:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;stop-color:#000000" />
<path
d="m 13,6.9996 a 1,1 0 0 1 -1,1 1,1 0 0 1 -1,-1 1,1 0 0 1 1,-1 1,1 0 0 1 1,1 z"
id="path1342"
style="fill:#cccccc;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none" />
</svg>

After

Width:  |  Height:  |  Size: 3.5 KiB

View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="15 15 225 225"
version="1.1"
id="svg28927"
width="256"
height="256"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs28931" />
<rect
fill="none"
height="256"
width="256"
id="rect28923"
x="0"
y="-256"
transform="rotate(90)" />
<rect
fill="none"
height="176"
rx="8"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
width="176"
x="40"
y="-216"
id="rect28925"
style="stroke:#ffffff;stroke-opacity:1"
transform="rotate(90)" />
<rect
style="fill:#cecece;fill-opacity:1;stroke:#ffffff;stroke-width:15;stroke-opacity:1"
id="rect29562"
width="1.3375131"
height="164.78162"
x="162.90909"
y="-211.86206"
transform="rotate(90)" />
<rect
style="fill:#ffffff;stroke:#ffffff;stroke-width:13.1836;stroke-opacity:1;fill-opacity:1"
id="rect46697"
width="163.40126"
height="38.793102"
x="45.564266"
y="168.99687" />
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

49
img/console-hide.svg Normal file
View file

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="15 15 225 225"
version="1.1"
id="svg28927"
width="256"
height="256"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs28931" />
<rect
fill="none"
height="256"
width="256"
id="rect28923"
x="0"
y="-256"
transform="rotate(90)" />
<rect
fill="none"
height="176"
rx="8"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
width="176"
x="40"
y="-216"
id="rect28925"
style="stroke:#cecece;stroke-opacity:1"
transform="rotate(90)" />
<rect
style="fill:#cecece;fill-opacity:1;stroke:#cecece;stroke-width:15;stroke-opacity:1"
id="rect29562"
width="1.3375131"
height="164.78162"
x="162.90909"
y="-211.86206"
transform="rotate(90)" />
<rect
style="fill:#cecece;stroke:#cecece;stroke-width:13.1836;stroke-opacity:1;fill-opacity:1"
id="rect46697"
width="163.40126"
height="38.793102"
x="45.564266"
y="168.99687" />
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="15 15 225 225"
version="1.1"
id="svg28927"
width="256"
height="256"
sodipodi:docname="console-show-hover.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview46568"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="3.7382812"
inkscape:cx="128.13375"
inkscape:cy="128.13375"
inkscape:window-width="1920"
inkscape:window-height="1137"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg28927" />
<defs
id="defs28931" />
<rect
fill="none"
height="256"
width="256"
id="rect28923"
x="0"
y="-256"
transform="rotate(90)" />
<rect
fill="none"
height="176"
rx="8"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
width="176"
x="40"
y="-216"
id="rect28925"
style="stroke:#ffffff;stroke-opacity:1"
transform="rotate(90)" />
<rect
style="fill:#cecece;fill-opacity:1;stroke:#ffffff;stroke-width:15;stroke-opacity:1"
id="rect29562"
width="1.3375131"
height="164.78162"
x="162.90909"
y="-211.86206"
transform="rotate(90)" />
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

65
img/console-show.svg Normal file
View file

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="15 15 225 225"
version="1.1"
id="svg28927"
width="256"
height="256"
sodipodi:docname="console-show.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview46568"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="3.7382812"
inkscape:cx="128.13375"
inkscape:cy="128.13375"
inkscape:window-width="1920"
inkscape:window-height="1137"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg28927" />
<defs
id="defs28931" />
<rect
fill="none"
height="256"
width="256"
id="rect28923"
x="0"
y="-256"
transform="rotate(90)" />
<rect
fill="none"
height="176"
rx="8"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
width="176"
x="40"
y="-216"
id="rect28925"
style="stroke:#cecece;stroke-opacity:1"
transform="rotate(90)" />
<rect
style="fill:#cecece;fill-opacity:1;stroke:#cecece;stroke-width:15;stroke-opacity:1"
id="rect29562"
width="1.3375131"
height="164.78162"
x="162.90909"
y="-211.86206"
transform="rotate(90)" />
</svg>

After

Width:  |  Height:  |  Size: 1.7 KiB

46
img/slide-left-hover.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="15 15 225 225"
version="1.1"
id="svg28927"
width="256"
height="256"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs28931" />
<rect
fill="none"
height="256"
width="256"
id="rect28923"
x="-256"
y="-256"
transform="scale(-1)" />
<rect
fill="none"
height="176"
rx="8"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
width="176"
x="-216"
y="-216"
id="rect28925"
style="stroke:#ffffff;stroke-opacity:1"
transform="scale(-1)" />
<path
d="m 173.33479,95.02618 -36.13147,33.29117 36.13147,33.29114 -11.1507,10.27415 -47.28221,-43.56529 47.28221,-43.56532 z"
id="path29413"
style="fill:#ffffff;fill-opacity:1;stroke-width:3.78213" />
<rect
style="fill:#cecece;fill-opacity:1;stroke:#ffffff;stroke-width:15;stroke-opacity:1"
id="rect29562"
width="1.3375131"
height="164.78162"
x="-93.090912"
y="-211.86206"
transform="scale(-1)" />
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

47
img/slide-left.svg Normal file
View file

@ -0,0 +1,47 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="15 15 225 225"
version="1.1"
id="svg28927"
width="256"
height="256"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs28931" />
<g
id="g41444"
transform="rotate(180,128,128)">
<rect
fill="none"
height="256"
width="256"
id="rect28923"
x="0"
y="0" />
<rect
fill="none"
height="176"
rx="8"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
width="176"
x="40"
y="40"
id="rect28925"
style="stroke:#cecece;stroke-opacity:1" />
<path
d="M 82.665206,160.97382 118.79668,127.68265 82.665206,94.391508 93.815914,84.117357 141.09812,127.68265 93.815914,171.24797 Z"
id="path29413"
style="fill:#cecece;fill-opacity:1;stroke-width:3.78213" />
<rect
style="fill:#cecece;fill-opacity:1;stroke:#cecece;stroke-width:15;stroke-opacity:1"
id="rect29562"
width="1.3375131"
height="164.78162"
x="162.90909"
y="44.137932" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

73
img/slide-right-hover.svg Normal file
View file

@ -0,0 +1,73 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="15 15 225 225"
version="1.1"
id="svg28927"
sodipodi:docname="slide-right-hover.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
width="256"
height="256"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs28931" />
<sodipodi:namedview
id="namedview28929"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="1.321682"
inkscape:cx="225.47027"
inkscape:cy="147.53927"
inkscape:window-width="1350"
inkscape:window-height="1137"
inkscape:window-x="272"
inkscape:window-y="5"
inkscape:window-maximized="0"
inkscape:current-layer="svg28927" />
<g
id="g44373"
transform="rotate(180,128,128)">
<rect
fill="none"
height="256"
width="256"
id="rect28923"
x="-256"
y="-256"
transform="scale(-1)" />
<rect
fill="none"
height="176"
rx="8"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
width="176"
x="-216"
y="-216"
id="rect28925"
style="stroke:#ffffff;stroke-opacity:1"
transform="scale(-1)" />
<path
d="m 173.33479,95.02618 -36.13147,33.29117 36.13147,33.29114 -11.1507,10.27415 -47.28221,-43.56529 47.28221,-43.56532 z"
id="path29413"
style="fill:#ffffff;fill-opacity:1;stroke-width:3.78213" />
<rect
style="fill:#cecece;fill-opacity:1;stroke:#ffffff;stroke-width:15;stroke-opacity:1"
id="rect29562"
width="1.3375131"
height="164.78162"
x="-93.090912"
y="-211.86206"
transform="scale(-1)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

43
img/slide-right.svg Normal file
View file

@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="15 15 225 225"
version="1.1"
id="svg28927"
width="256"
height="256"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs28931" />
<rect
fill="none"
height="256"
width="256"
id="rect28923"
x="0"
y="0" />
<rect
fill="none"
height="176"
rx="8"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="16"
width="176"
x="40"
y="40"
id="rect28925"
style="stroke:#cecece;stroke-opacity:1" />
<path
d="M 82.665206,160.97382 118.79668,127.68265 82.665206,94.391508 93.815914,84.117357 141.09812,127.68265 93.815914,171.24797 Z"
id="path29413"
style="fill:#cecece;fill-opacity:1;stroke-width:3.78213" />
<rect
style="fill:#cecece;fill-opacity:1;stroke:#cecece;stroke-width:15;stroke-opacity:1"
id="rect29562"
width="1.3375131"
height="164.78162"
x="162.90909"
y="44.137932" />
</svg>

After

Width:  |  Height:  |  Size: 1 KiB

51
img/stop-hover.svg Normal file
View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 256 256"
version="1.1"
id="svg8984"
sodipodi:docname="stop-hover.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8988" />
<sodipodi:namedview
id="namedview8986"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="3.7382812"
inkscape:cx="128.13375"
inkscape:cy="128.13375"
inkscape:window-width="1920"
inkscape:window-height="1137"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg8984" />
<rect
fill="none"
height="256"
width="256"
id="rect8980" />
<rect
fill="none"
height="152"
rx="6.9"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="12"
width="152"
x="52"
y="52"
id="rect8982"
style="stroke-width:15;stroke-dasharray:none;stroke:#ffffff;stroke-opacity:1" />
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

51
img/stop.svg Normal file
View file

@ -0,0 +1,51 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 256 256"
version="1.1"
id="svg8984"
sodipodi:docname="stop.svg"
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs8988" />
<sodipodi:namedview
id="namedview8986"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="3.7382812"
inkscape:cx="128.13375"
inkscape:cy="128.13375"
inkscape:window-width="1920"
inkscape:window-height="1137"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg8984" />
<rect
fill="none"
height="256"
width="256"
id="rect8980" />
<rect
fill="none"
height="152"
rx="6.9"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="12"
width="152"
x="52"
y="52"
id="rect8982"
style="stroke-width:15;stroke-dasharray:none;stroke:#cecece;stroke-opacity:1" />
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View file

@ -16,7 +16,7 @@
<script type="text/javascript" src="util/jszip.min.js"></script>
<script type="text/javascript" src="util/lzutf8.js"></script>
<script type="text/javascript" src="util/shorty.min.js"></script>
<!-- <script type="text/javascript" src="util/stacktrace.js"></script> -->
<script type="text/javascript" src="util/stacktrace.js"></script>
<script type="text/javascript" src="codemirror/dialog.js"></script>
<script type="text/javascript" src="codemirror/searchcursor.js"></script>
@ -25,30 +25,33 @@
<script type="text/javascript" src="codemirror/matchesonscrollbar.js"></script>
</head>
<body style="display:none">
<div id="code-container">
<div id="toolbar">
<a href="javascript:openProject()" class="toolbar-button" id="toolbar-button-open" title="Open"></a>
<a href="javascript:saveProject()" class="toolbar-button" id="toolbar-button-save" title="Save"></a>
<div class="spacer"></div>
<a href="javascript:runProgram()" class="toolbar-button" id="toolbar-button-run" title="Run"></a>
<a href="javascript:shareProgram()" class="toolbar-button" id="toolbar-button-share" title="Share / Export"></a>
<a href="javascript:settings()" class="toolbar-button" id="toolbar-button-settings" title="Settings"></a>
</div>
<div id="code"></div>
<a id="edit-button" href="javascript:slideRight()" display="none">Edit</a>
<a id="run-button" href="javascript:runProgram()">Run</a>
<a id="stop-button" href="javascript:stopProgram()">Stop</a>
<a id="share-button" href="javascript:shareProgram()">Share</a>
<div id="toolbar">
<a href="javascript:openProject()" class="toolbar-button" id="toolbar-button-open" title="Open"></a>
<a href="javascript:saveProject()" class="toolbar-button" id="toolbar-button-save" title="Save"></a>
<div class="spacer"></div>
<a href="javascript:runProgram()" class="toolbar-button" id="toolbar-button-run" title="Run"></a>
<a href="javascript:stopProgram()" class="toolbar-button" id="toolbar-button-stop" title="Stop"></a>
<a href="javascript:shareProgram()" class="toolbar-button" id="toolbar-button-share" title="Share / Export"></a>
<div class="spacer"></div>
<a href="javascript:showDialog('options-dialog')" class="toolbar-button" id="toolbar-button-settings" title="Settings"></a>
<a href="javascript:showDialog('about-dialog')" class="toolbar-button" id="toolbar-button-about" title="About QBJS"></a>
<div class="spacer" style="float:right"></div>
<a href="javascript:showConsole()" class="toolbar-button" id="toolbar-button-console-show" title="Show Console"></a>
<a href="javascript:showConsole()" class="toolbar-button" id="toolbar-button-console-hide" title="Hide Console" style="display:none"></a>
<a href="javascript:slideRight()" class="toolbar-button" id="toolbar-button-slide-right" title="Slide View Right"></a>
<a href="javascript:slideLeft()" class="toolbar-button" id="toolbar-button-slide-left" title="Slide View Left"></a>
</div>
<div id="slider" draggable="true">
<div id="slider-left" class="slider-button" onclick="slideLeft()">&lt;</div>
<div id="slider-right" class="slider-button" onclick="slideRight()">&gt;</div>
<div id="code-container">
<div id="code"></div>
</div>
<div id="slider">
</div>
<div id="game-container">
<div id="gx-container">
<a href="javascript:runProgram()" id="gx-load-screen">&nbsp;</a>
<img id="logo" src="logo.png" title="Version 0.6.0" onclick="window.open('https://github.com/boxgaming/qbjs/wiki', '_blank')">
</div>
<div id="vslider"></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><div id="tab-fs" class="tab" onclick="changeTab('fs')">Files</div>
@ -67,9 +70,6 @@
</div>
</div>
</div>
<div id="show-js-container">
<a id="toggle-console" href="javascript:showConsole()">Show Console</a>
</div>
</div>
<div id="gx-footer"></div>
@ -100,7 +100,7 @@
<select id="prog-sel-sources" size="10" style="display:block; width:100%; margin-top:10px"></select>
<div style="text-align:center; margin-top:10px">
<a href="javascript:onSelMainProg()">Ok</a>
<a href="javascript:closeProgSelDlg()">Cancel</a>
<a href="javascript:closeDialog()">Cancel</a>
</div>
</dialog>
@ -116,8 +116,29 @@
<a href="javascript:closeDialog()" style="display:block; float:right; margin-top: 7px">Close</a>
</div>
</dialog>
<dialog id="about-dialog">
<div>
<img id="logo" src="logo.png" onclick="window.open('https://github.com/boxgaming/qbjs/wiki', '_blank')">
<p>QBJS - QBasic for the Web!</p>
<p>Version: 0.7.0</p>
<p></p>
<p>
QBJS brings the fun and accessibility of QBasic to the browser.<br/>
Learn more:<br/>
<ul>
<li><a href="https://github.com/boxgaming/qbjs/wiki/QBasic-Language-Support" target="_blank">QBasic Language Support</a></li>
<li><a href="https://github.com/boxgaming/qbjs/wiki/Supported-Keywords" target="_blank">Supported Keywords</a></li>
<li><a href="https://github.com/boxgaming/qbjs/wiki/Samples" target="_blank">Samples</a></li>
</ul>
</p>
<p>Copyright (c) 2022-2023 boxgaming</p>
<div>
<a href="javascript:closeDialog()" style="display:block; float:right">Close</a>
</div>
</div>
</dialog>
</body>
<!-- <script language="javascript" src="gl.js"></script> -->
<script language="javascript" src="vfs.js"></script>
<script language="javascript" src="gx/gx.js"></script>
<script language="javascript" src="qb.js"></script>

BIN
logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -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;

View file

@ -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);