2022-02-16 17:40:03 +00:00
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8"/>
|
2022-04-18 16:25:08 +00:00
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
2022-02-16 17:40:03 +00:00
|
|
|
<style>
|
|
|
|
@font-face {
|
|
|
|
font-family: dosvga;
|
|
|
|
src: url(lp-dosvga.ttf);
|
|
|
|
}
|
|
|
|
body {
|
|
|
|
background-color: rgb(0, 0, 39);
|
|
|
|
font-family: dosvga, Arial, Helvetica, sans-serif;
|
|
|
|
color: #999;
|
|
|
|
}
|
|
|
|
a, a:link, a:visited {
|
|
|
|
text-decoration: none;
|
|
|
|
color: #ccc;
|
2022-05-09 18:29:15 +00:00
|
|
|
margin-right: 5px;
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
|
|
|
a:hover { color: #fff; }
|
|
|
|
a:before { content: "< "; }
|
|
|
|
a:after { content: " >"; }
|
|
|
|
|
|
|
|
#code-container {
|
|
|
|
position: absolute;
|
|
|
|
left: 10px;
|
|
|
|
top: 10px;
|
|
|
|
}
|
|
|
|
#code {
|
|
|
|
margin-bottom: 5px;
|
|
|
|
border: 1px solid #666;
|
|
|
|
}
|
|
|
|
#game-container {
|
|
|
|
position: absolute;
|
|
|
|
left: 620px;
|
|
|
|
top: 10px;
|
|
|
|
}
|
|
|
|
#gx-container {
|
|
|
|
border: 1px solid #666;
|
|
|
|
text-align: center;
|
|
|
|
background-color: #000;
|
|
|
|
}
|
|
|
|
#gx-canvas {
|
|
|
|
border: 1px solid #222;
|
|
|
|
background-color: #000;
|
|
|
|
}
|
|
|
|
#output-container {
|
|
|
|
position: absolute;
|
|
|
|
color: #ccc;
|
|
|
|
display: none;
|
2022-02-18 14:09:43 +00:00
|
|
|
}
|
|
|
|
#output-content {
|
2022-02-16 17:40:03 +00:00
|
|
|
border: 1px solid #666;
|
|
|
|
overflow: scroll;
|
|
|
|
height: 150px;
|
|
|
|
}
|
|
|
|
#js-code {
|
|
|
|
white-space: pre;
|
2022-02-18 14:09:43 +00:00
|
|
|
padding: 5px;
|
|
|
|
color: #999;
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
|
|
|
#show-js-container {
|
|
|
|
color: #666;
|
|
|
|
position: absolute;
|
2022-02-18 14:09:43 +00:00
|
|
|
padding-top: 3px;
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
|
|
|
#warning-container {
|
|
|
|
white-space: pre;
|
|
|
|
font-family: dosvga;
|
|
|
|
color: #999;
|
2022-02-18 14:09:43 +00:00
|
|
|
padding: 5px;
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
2022-05-09 18:29:15 +00:00
|
|
|
#edit-button {
|
|
|
|
float: left;
|
|
|
|
}
|
2022-02-16 17:40:03 +00:00
|
|
|
#share-button {
|
|
|
|
float: right;
|
|
|
|
}
|
2022-05-09 18:42:04 +00:00
|
|
|
#share-button, #toggle-console {
|
|
|
|
margin-right: 0;
|
|
|
|
}
|
2022-02-18 14:09:43 +00:00
|
|
|
#slider {
|
|
|
|
position: absolute;
|
|
|
|
top: 10px;
|
|
|
|
color: #666;
|
|
|
|
}
|
|
|
|
.slider-button {
|
|
|
|
padding-top: 2px;
|
|
|
|
}
|
|
|
|
.slider-button:hover {
|
|
|
|
color: #ccc;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.modal {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
.modal.is-open {
|
|
|
|
display: block;
|
|
|
|
}
|
|
|
|
|
|
|
|
#tabs {
|
|
|
|
margin-bottom: -1px;
|
|
|
|
}
|
|
|
|
.tab {
|
|
|
|
display:inline-block;
|
|
|
|
padding: 5px 10px;
|
|
|
|
border: 1px solid #666;
|
|
|
|
border-bottom: 0px;
|
|
|
|
margin-right: 2px;
|
|
|
|
color: #999;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.tab:hover {
|
|
|
|
color: #fff;
|
|
|
|
background-color: rgb(0, 49, 78);
|
|
|
|
}
|
|
|
|
#tabs .active {
|
|
|
|
border-bottom: 1px solid rgb(0, 0, 39);
|
|
|
|
color: #ccc;
|
|
|
|
}
|
|
|
|
#tabs .active:hover {
|
|
|
|
background-color: transparent;
|
|
|
|
color: #ccc;
|
|
|
|
}
|
2022-03-30 22:37:36 +00:00
|
|
|
#gx-load-screen {
|
|
|
|
display: none;
|
|
|
|
text-align: center;
|
|
|
|
margin: auto;
|
|
|
|
width: 600px;
|
|
|
|
height: 360px;
|
|
|
|
font-size: 24px;
|
|
|
|
color: #ccc;
|
|
|
|
border: 1px solid #000;
|
|
|
|
text-decoration: none;
|
|
|
|
background-position: center center;
|
|
|
|
background-image: url('play.png');
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-color: #444;
|
|
|
|
}
|
|
|
|
#gx-load-screen:hover {
|
|
|
|
background-color: #555;
|
|
|
|
}
|
|
|
|
#gx-load-screen:before { content: ""; }
|
|
|
|
#gx-load-screen:after { content: ""; }
|
|
|
|
|
|
|
|
#gx-container a, #gx-container a:link, #gx-container a:visited {
|
|
|
|
color: rgb(69, 118, 147);
|
|
|
|
}
|
|
|
|
#gx-container a:hover {
|
|
|
|
color: rgb(69, 118, 147);
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
#gx-container a:before { content: ""; }
|
|
|
|
#gx-container a:after { content: ""; }
|
|
|
|
|
|
|
|
#gx-container, #gx-container table {
|
|
|
|
font-family: arial, helvetica, sans-serif;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
|
|
|
|
#share-dialog {
|
|
|
|
background-color:#ddd;
|
|
|
|
}
|
|
|
|
#share-dialog textarea {
|
|
|
|
font-family: dosvga;
|
|
|
|
font-size: 1em;
|
|
|
|
background-color: #efefef;
|
|
|
|
}
|
|
|
|
#share-dialog a { color: #333; }
|
|
|
|
#share-dialog a:hover { color: #000; }
|
|
|
|
|
2022-04-18 16:25:08 +00:00
|
|
|
#logo {
|
|
|
|
position: absolute;
|
|
|
|
right: 1px;
|
|
|
|
top: 1px;
|
|
|
|
cursor: pointer;
|
|
|
|
opacity: 0.5;
|
|
|
|
}
|
|
|
|
#logo:hover { opacity: 1.0; }
|
2022-02-16 17:40:03 +00:00
|
|
|
</style>
|
2022-04-18 16:25:08 +00:00
|
|
|
<link rel="stylesheet" href="codemirror/codemirror.min.css"></link>
|
|
|
|
<link rel="stylesheet" href="codemirror/dialog.css">
|
|
|
|
<link rel="stylesheet" href="codemirror/matchesonscrollbar.css">
|
2022-02-16 17:40:03 +00:00
|
|
|
<link rel="stylesheet" href="codemirror/qb-ide.css"></link>
|
2022-04-18 16:25:08 +00:00
|
|
|
|
|
|
|
<script type="text/javascript" src="codemirror/codemirror.min.js"></script>
|
2022-02-16 17:40:03 +00:00
|
|
|
<script type="text/javascript" src="codemirror/qb-lang.js"></script>
|
2022-04-18 16:25:08 +00:00
|
|
|
<script type="text/javascript" src="codemirror/active-line.js"></script>
|
|
|
|
<script type="text/javascript" src="util/jszip.min.js"></script>
|
2022-04-25 11:59:48 +00:00
|
|
|
<script type="text/javascript" src="util/lzutf8.js"></script>
|
|
|
|
<script type="text/javascript" src="util/shorty.min.js"></script>
|
2022-04-18 16:25:08 +00:00
|
|
|
|
|
|
|
<script type="text/javascript" src="codemirror/dialog.js"></script>
|
|
|
|
<script type="text/javascript" src="codemirror/searchcursor.js"></script>
|
|
|
|
<script type="text/javascript" src="codemirror/search.js"></script>
|
|
|
|
<script type="text/javascript" src="codemirror/annotatescrollbar.js"></script>
|
|
|
|
<script type="text/javascript" src="codemirror/matchesonscrollbar.js"></script>
|
2022-02-16 17:40:03 +00:00
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="code-container">
|
|
|
|
<div id="code"></div>
|
2022-05-09 18:42:04 +00:00
|
|
|
<a id="edit-button" href="javascript:slideRight()" display="none">Edit</a>
|
|
|
|
<a id="run-button" href="javascript:runProgram()">Run</a>
|
2022-02-16 17:40:03 +00:00
|
|
|
<a id="stop-button" href="javascript:stopProgram()">Stop</a>
|
|
|
|
<a id="share-button" href="javascript:shareProgram()">Share</a>
|
|
|
|
</div>
|
2022-02-18 14:09:43 +00:00
|
|
|
<div id="slider">
|
|
|
|
<div id="slider-left" class="slider-button" onclick="slideLeft()"><</div>
|
|
|
|
<div id="slider-right" class="slider-button" onclick="slideRight()">></div>
|
|
|
|
</div>
|
2022-02-16 17:40:03 +00:00
|
|
|
<div id="game-container">
|
2022-03-30 22:37:36 +00:00
|
|
|
<div id="gx-container">
|
|
|
|
<a href="javascript:runProgram()" id="gx-load-screen"> </a>
|
2022-04-18 16:25:08 +00:00
|
|
|
<img id="logo" src="logo.png" onclick="window.open('https://github.com/boxgaming/qbjs/wiki', '_blank')">
|
2022-03-30 22:37:36 +00:00
|
|
|
</div>
|
2022-02-16 17:40:03 +00:00
|
|
|
<div id="output-container">
|
2022-02-18 14:09:43 +00:00
|
|
|
<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>
|
|
|
|
<div id="output-content">
|
|
|
|
<div id="warning-container"></div>
|
|
|
|
<div id="js-code"></div>
|
|
|
|
</div>
|
2022-02-16 17:40:03 +00:00
|
|
|
</div>
|
2022-04-18 16:25:08 +00:00
|
|
|
<div id="show-js-container">
|
|
|
|
<a id="toggle-console" href="javascript:showConsole()">Show Console</a>
|
|
|
|
</div>
|
2022-02-16 17:40:03 +00:00
|
|
|
</div>
|
|
|
|
<div id="gx-footer"></div>
|
2022-02-18 14:09:43 +00:00
|
|
|
|
2022-03-30 22:37:36 +00:00
|
|
|
<dialog id="share-dialog">
|
|
|
|
<div style="margin-bottom:5px">Copy the link below to share your code:</div>
|
|
|
|
<div><textarea id="share-code" rows="15" cols="80" readonly></textarea></div>
|
|
|
|
<div style="margin-top: 5px; float:left">Launch Mode:
|
|
|
|
<select id="share-mode" onchange="shareProgram()">
|
|
|
|
<option value="">IDE (Default)</option>
|
|
|
|
<option value="play">Play</option>
|
|
|
|
<option value="auto">Auto</option>
|
|
|
|
</select>
|
|
|
|
</div>
|
2022-04-18 16:25:08 +00:00
|
|
|
<a id="export-button" href="javascript:exportProgram()" style="display: none; float:left; margin-top: 7px; margin-left: 10px">Export</a>
|
|
|
|
<a href="javascript:closeDialog()" style="display:block; float:right; margin-top: 7px">Close</a>
|
|
|
|
<a href="javascript:testShare()" style="display: block; float:right; margin-top: 7px; margin-right: 10px">Test</a>
|
2022-03-30 22:37:36 +00:00
|
|
|
</dialog>
|
2022-02-16 17:40:03 +00:00
|
|
|
</body>
|
|
|
|
<script language="javascript" src="gx/gx.js"></script>
|
|
|
|
<script language="javascript" src="qb.js"></script>
|
|
|
|
<script language="javascript" src="qb2js.js"></script>
|
|
|
|
<script language="javascript">
|
2022-04-18 16:25:08 +00:00
|
|
|
|
2022-03-04 22:28:32 +00:00
|
|
|
var QBCompiler = null;
|
2022-02-16 17:40:03 +00:00
|
|
|
// if code has been passed on the query string load it into the editor
|
|
|
|
var qbcode = "";
|
|
|
|
var url = location.href;
|
2022-02-18 14:09:43 +00:00
|
|
|
var sizeMode = "normal";
|
2022-03-30 22:37:36 +00:00
|
|
|
var appMode = "ide";
|
2022-02-18 14:09:43 +00:00
|
|
|
var consoleVisible = false;
|
|
|
|
var currTab = "console";
|
2022-05-09 18:29:15 +00:00
|
|
|
|
|
|
|
if (window.innerWidth < 1200) {
|
|
|
|
sizeMode = "max";
|
|
|
|
}
|
2022-02-16 17:40:03 +00:00
|
|
|
|
|
|
|
if (url && url.indexOf("?")) {
|
|
|
|
var queryString = url.substring(url.indexOf("?")+1);
|
|
|
|
var nvpairs = queryString.split("&");
|
|
|
|
for (var i = 0; i < nvpairs.length; i++) {
|
|
|
|
var nv = nvpairs[i].split("=");
|
|
|
|
if (nv[0] == "qbcode") {
|
|
|
|
var zin = new Shorty();
|
|
|
|
qbcode = zin.inflate(atob(nv[1]));
|
|
|
|
break;
|
|
|
|
}
|
2022-04-18 16:25:08 +00:00
|
|
|
else if (nv[0] == "code") {
|
|
|
|
qbcode = LZUTF8.decompress(nv[1], { inputEncoding: "Base64" });
|
|
|
|
}
|
2022-03-30 22:37:36 +00:00
|
|
|
else if (nv[0] == "mode") {
|
|
|
|
appMode = nv[1];
|
|
|
|
}
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
|
|
|
}
|
2022-03-30 22:37:36 +00:00
|
|
|
if (appMode == "play") {
|
|
|
|
document.getElementById("gx-load-screen").style.display = "block";
|
|
|
|
}
|
2022-02-16 17:40:03 +00:00
|
|
|
|
|
|
|
// initialize the code editor
|
|
|
|
var editor = CodeMirror(document.querySelector("#code"), {
|
|
|
|
lineNumbers: true,
|
|
|
|
tabSize: 4,
|
|
|
|
indentUnit: 4,
|
|
|
|
value: qbcode,
|
2022-02-18 14:09:43 +00:00
|
|
|
module: "qbjs",
|
2022-04-18 16:25:08 +00:00
|
|
|
theme: "qbjs",
|
2022-02-16 17:40:03 +00:00
|
|
|
height: "auto",
|
|
|
|
styleActiveLine: true,
|
2022-04-18 16:25:08 +00:00
|
|
|
smartIndent: false,
|
2022-02-16 17:40:03 +00:00
|
|
|
extraKeys: {
|
|
|
|
"Tab": function(cm) {
|
|
|
|
cm.replaceSelection(" ", "end");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
editor.setSize(600, 600);
|
|
|
|
editor.on("beforeChange", (cm, change) => {
|
|
|
|
if (change.origin === "paste") {
|
|
|
|
const newText = change.text.map(line => line.replace(/\t/g, " "));
|
|
|
|
change.update(null, null, newText);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
var warnCount = 0;
|
|
|
|
|
|
|
|
async function runProgram() {
|
2022-03-30 22:37:36 +00:00
|
|
|
document.getElementById("gx-load-screen").style.display = "none";
|
|
|
|
|
2022-02-18 14:09:43 +00:00
|
|
|
if (sizeMode == "max") {
|
|
|
|
slideLeft();
|
|
|
|
}
|
2022-02-16 17:40:03 +00:00
|
|
|
GX.reset();
|
|
|
|
QB.start();
|
|
|
|
var qbCode = editor.getValue();
|
2022-03-04 22:28:32 +00:00
|
|
|
if (!QBCompiler) { QBCompiler = await _QBCompiler(); }
|
|
|
|
var jsCode = await QBCompiler.compile(qbCode);
|
2022-02-16 17:40:03 +00:00
|
|
|
|
2022-03-04 22:28:32 +00:00
|
|
|
await displayWarnings();
|
2022-02-16 17:40:03 +00:00
|
|
|
|
|
|
|
var jsDiv = document.getElementById("js-code");
|
|
|
|
jsDiv.innerHTML = jsCode;
|
|
|
|
window.onresize();
|
|
|
|
|
|
|
|
try {
|
|
|
|
const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
|
|
|
|
var codeFn = new AsyncFunction(jsCode);
|
|
|
|
await codeFn();
|
|
|
|
}
|
|
|
|
catch (error) {
|
|
|
|
console.error(error);
|
2022-03-04 22:28:32 +00:00
|
|
|
var wdiv = document.getElementById("warning-container");
|
|
|
|
var html = wdiv.innerHTML;
|
|
|
|
if (html != "") { html += "\n" };
|
|
|
|
html += error.name + ": " + error.message + "\n";
|
|
|
|
html += error.stack;
|
|
|
|
wdiv.innerHTML = html;
|
|
|
|
consoleVisible = true;
|
|
|
|
window.onresize();
|
|
|
|
QB.halt();
|
|
|
|
GX.sceneStop();
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
|
|
|
document.getElementById("gx-container").focus();
|
2022-03-30 22:37:36 +00:00
|
|
|
|
|
|
|
return false;
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function stopProgram() {
|
|
|
|
QB.halt();
|
|
|
|
GX.sceneStop();
|
|
|
|
}
|
|
|
|
|
|
|
|
function shareProgram() {
|
|
|
|
var zout = new Shorty();
|
2022-04-18 16:25:08 +00:00
|
|
|
var b64 = LZUTF8.compress(editor.getValue(), { outputEncoding: "Base64" });
|
2022-02-16 17:40:03 +00:00
|
|
|
var baseUrl = location.href.split('?')[0];
|
2022-02-18 14:09:43 +00:00
|
|
|
|
2022-03-30 22:37:36 +00:00
|
|
|
var mode = document.getElementById("share-mode").value;
|
2022-02-18 14:09:43 +00:00
|
|
|
var codeShare = document.getElementById("share-code");
|
2022-03-30 22:37:36 +00:00
|
|
|
var url = baseUrl + "?";
|
|
|
|
if (mode) {
|
|
|
|
url += "mode=" + mode + "&";
|
|
|
|
}
|
2022-04-18 16:25:08 +00:00
|
|
|
url += "code=" + b64;
|
2022-03-30 22:37:36 +00:00
|
|
|
codeShare.value = url;
|
2022-04-18 16:25:08 +00:00
|
|
|
var shareDialog = document.getElementById("share-dialog");
|
|
|
|
if (!shareDialog.open) {
|
|
|
|
shareDialog.showModal();
|
|
|
|
}
|
2022-03-30 22:37:36 +00:00
|
|
|
codeShare.focus();
|
|
|
|
codeShare.select();
|
2022-04-18 16:25:08 +00:00
|
|
|
|
|
|
|
var exportVisible = (mode == "play" || mode == "auto");
|
|
|
|
document.getElementById("export-button").style.display = (exportVisible) ? "block" : "none";
|
|
|
|
}
|
|
|
|
|
|
|
|
async function exportProgram() {
|
|
|
|
var zip = new JSZip();
|
|
|
|
|
|
|
|
var qbCode = editor.getValue();
|
|
|
|
if (!QBCompiler) { QBCompiler = await _QBCompiler(); }
|
|
|
|
var jsCode = "async function __qbjs_run() {\n" + await QBCompiler.compile(qbCode) + "\n}";
|
|
|
|
|
|
|
|
var mode = document.getElementById("share-mode").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"));
|
|
|
|
zip.file("logo.png", await getFile("logo.png", "blob"));
|
|
|
|
zip.file("lp-dosvga.ttf", await getFile("lp-dosvga.ttf", "blob"));
|
|
|
|
zip.file("play.png", await getFile("play.png", "blob"));
|
|
|
|
zip.file("qbjs.css", await getFile("export/qbjs.css", "text"));
|
|
|
|
zip.file("qb.js", await getFile("qb.js", "text"));
|
|
|
|
|
|
|
|
zip.file("gx/gx.js", await getFile("gx/gx.js", "text"));
|
|
|
|
zip.file("gx/__gx_font_default.png", await getFile("gx/__gx_font_default.png", "blob"));
|
|
|
|
zip.file("gx/__gx_font_default_black.png", await getFile("gx/__gx_font_default_black.png", "blob"));
|
|
|
|
|
|
|
|
zip.generateAsync({type:"blob"}).then(function(content) {
|
|
|
|
const link = document.createElement("a");
|
|
|
|
link.href = URL.createObjectURL(content);
|
|
|
|
link.download = "program.zip";
|
|
|
|
link.click();
|
|
|
|
link.remove();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-04-26 03:48:28 +00:00
|
|
|
async function getFile(path, type) {
|
2022-04-18 16:25:08 +00:00
|
|
|
var file = await fetch(path);
|
|
|
|
if (type == "text") {
|
|
|
|
return await file.text();
|
|
|
|
}
|
|
|
|
else if (type == "blob") {
|
|
|
|
return await file.blob();
|
|
|
|
}
|
2022-03-30 22:37:36 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function testShare() {
|
|
|
|
var url = document.getElementById("share-code").value;
|
|
|
|
open(url, "_blank");
|
|
|
|
}
|
|
|
|
|
|
|
|
function closeDialog() {
|
|
|
|
document.getElementById("share-dialog").close();
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
|
|
|
|
2022-03-04 22:28:32 +00:00
|
|
|
async function displayWarnings() {
|
2022-02-16 17:40:03 +00:00
|
|
|
var wstr = "";
|
2022-03-04 22:28:32 +00:00
|
|
|
var w = await QBCompiler.getWarnings();
|
2022-02-16 17:40:03 +00:00
|
|
|
warnCount = w.length;
|
|
|
|
for (var i=0; i < w.length; i++) {
|
|
|
|
wstr += w[i].line + ": " + w[i].text + "\n";
|
|
|
|
}
|
|
|
|
var wdiv = document.getElementById("warning-container");
|
|
|
|
wdiv.innerHTML = wstr;
|
2022-02-18 14:09:43 +00:00
|
|
|
if (!consoleVisible && w.length > 0) {
|
|
|
|
consoleVisible = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function showConsole() {
|
|
|
|
consoleVisible = !consoleVisible;
|
2022-03-30 22:37:36 +00:00
|
|
|
window.dispatchEvent(new Event('resize'));
|
|
|
|
//window.onresize();
|
2022-02-18 14:09:43 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function changeTab(tabName) {
|
|
|
|
if (tabName == currTab) { return; }
|
|
|
|
document.getElementById("tab-" + currTab).classList.remove("active");
|
|
|
|
document.getElementById("tab-" + tabName).classList.add("active");
|
|
|
|
currTab = tabName;
|
|
|
|
|
|
|
|
if (currTab == "console") {
|
|
|
|
document.getElementById("warning-container").style.display = "block";
|
|
|
|
document.getElementById("js-code").style.display = "none";
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
document.getElementById("warning-container").style.display = "none";
|
|
|
|
document.getElementById("js-code").style.display = "block";
|
|
|
|
}
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function displayTypes() {
|
|
|
|
var tstr = "";
|
|
|
|
var t = QBCompiler.getTypes();
|
|
|
|
for (var i=0; i < t.length; i++) {
|
|
|
|
tstr += t[i].name
|
|
|
|
}
|
|
|
|
var wdiv = document.getElementById("warning-container");
|
|
|
|
wdiv.innerHTML = tstr;
|
|
|
|
}
|
|
|
|
|
2022-02-18 14:09:43 +00:00
|
|
|
function slideLeft() {
|
|
|
|
document.getElementById("slider-right").style.display = "block";
|
2022-05-09 18:29:15 +00:00
|
|
|
if (sizeMode == "max" && window.innerWidth >= 1200) {
|
2022-02-18 14:09:43 +00:00
|
|
|
sizeMode = "normal"
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
sizeMode = "min"
|
|
|
|
document.getElementById("slider-left").style.display = "none";
|
|
|
|
}
|
2022-03-30 22:37:36 +00:00
|
|
|
//window.onresize();
|
|
|
|
window.dispatchEvent(new Event('resize'));
|
2022-02-18 14:09:43 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
function slideRight() {
|
|
|
|
document.getElementById("slider-left").style.display = "block";
|
2022-05-09 18:29:15 +00:00
|
|
|
if (sizeMode == "min" && window.innerWidth >= 1200) {
|
2022-02-18 14:09:43 +00:00
|
|
|
sizeMode = "normal"
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
sizeMode = "max"
|
|
|
|
document.getElementById("slider-right").style.display = "none";
|
|
|
|
}
|
2022-03-30 22:37:36 +00:00
|
|
|
//window.onresize();
|
|
|
|
window.dispatchEvent(new Event('resize'));
|
2022-02-18 14:09:43 +00:00
|
|
|
}
|
|
|
|
|
2022-02-16 17:40:03 +00:00
|
|
|
window.onresize = function() {
|
|
|
|
var f = document.getElementById("gx-container");
|
|
|
|
var jsDiv = document.getElementById("output-container");
|
|
|
|
|
2022-03-30 22:37:36 +00:00
|
|
|
if (appMode == "play" || appMode == "auto") {
|
|
|
|
f.style.left = "0px";
|
|
|
|
f.style.top = "0px";
|
|
|
|
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";
|
|
|
|
jsDiv.style.display = "none";
|
2022-04-18 16:25:08 +00:00
|
|
|
document.getElementById("logo").style.display = "none";
|
2022-02-18 14:09:43 +00:00
|
|
|
}
|
|
|
|
else {
|
2022-03-30 22:37:36 +00:00
|
|
|
var cmwidth = 600;
|
|
|
|
if (sizeMode == "min") {
|
|
|
|
cmwidth = 0;
|
|
|
|
editor.getWrapperElement().style.display = "none";
|
|
|
|
document.getElementById("code").style.borderRight = "0";
|
2022-05-09 18:29:15 +00:00
|
|
|
document.getElementById("game-container").style.display = "block";
|
|
|
|
document.getElementById("edit-button").style.display = "block";
|
2022-03-30 22:37:36 +00:00
|
|
|
}
|
|
|
|
else if (sizeMode == "max") {
|
|
|
|
cmwidth = window.innerWidth - 25;
|
|
|
|
document.getElementById("game-container").style.display = "none";
|
2022-05-09 18:29:15 +00:00
|
|
|
document.getElementById("code").style.borderRight = "1px solid #666";
|
2022-03-30 22:37:36 +00:00
|
|
|
document.getElementById("slider").style.border = "1px solid #666";
|
|
|
|
document.getElementById("slider").style.borderLeft = "0";
|
2022-05-09 18:29:15 +00:00
|
|
|
editor.getWrapperElement().style.display = "block";
|
|
|
|
document.getElementById("edit-button").style.display = "none";
|
2022-02-18 14:09:43 +00:00
|
|
|
}
|
|
|
|
else {
|
2022-03-30 22:37:36 +00:00
|
|
|
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";
|
2022-05-09 18:29:15 +00:00
|
|
|
document.getElementById("edit-button").style.display = "none";
|
2022-02-18 14:09:43 +00:00
|
|
|
}
|
2022-02-16 17:40:03 +00:00
|
|
|
|
2022-03-30 22:37:36 +00:00
|
|
|
document.getElementById("game-container").style.left = (cmwidth + 20) + "px";
|
|
|
|
f.style.width = (window.innerWidth - (cmwidth + 35)) + "px";
|
|
|
|
jsDiv.style.width = f.style.width;
|
|
|
|
|
|
|
|
document.getElementById("slider").style.left = (cmwidth + 12) + "px";
|
|
|
|
|
|
|
|
if (consoleVisible) {
|
|
|
|
f.style.height = (window.innerHeight - 237) + "px";
|
|
|
|
jsDiv.style.display = "block";
|
|
|
|
jsDiv.style.top = (window.innerHeight - 227) + "px";
|
|
|
|
document.getElementById("toggle-console").innerHTML = "Hide Console";
|
|
|
|
if (currTab == "console") {
|
|
|
|
document.getElementById("warning-container").style.display = "block";
|
|
|
|
document.getElementById("js-code").style.display = "none";
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
document.getElementById("warning-container").style.display = "none";
|
|
|
|
document.getElementById("js-code").style.display = "block";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
f.style.height = (window.innerHeight - 50) + "px";
|
|
|
|
jsDiv.style.display = "none";
|
|
|
|
document.getElementById("toggle-console").innerHTML = "Show Console";
|
|
|
|
}
|
|
|
|
document.getElementById("show-js-container").style.top = (window.innerHeight - 45) + "px";
|
|
|
|
document.getElementById("show-js-container").style.right = "5px";
|
|
|
|
|
|
|
|
editor.setSize(cmwidth, window.innerHeight - 50);
|
|
|
|
document.getElementById("code").style.height = (window.innerHeight - 50) + "px";
|
|
|
|
document.getElementById("slider").style.height = (window.innerHeight - 50) + "px";
|
|
|
|
}
|
|
|
|
//QB.resize(f.style.width.replace("px", ""), f.style.height.replace("px", ""));
|
|
|
|
QB.resize(f.clientWidth, f.clientHeight);
|
2022-02-16 17:40:03 +00:00
|
|
|
}
|
|
|
|
window.onresize();
|
|
|
|
|
|
|
|
function checkButtonState() {
|
|
|
|
var stopButton = document.getElementById("stop-button");
|
|
|
|
if (GX.sceneActive() || QB.running()) {
|
|
|
|
stopButton.style.display = "inline";
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
stopButton.style.display = "none";
|
|
|
|
}
|
|
|
|
|
|
|
|
setTimeout(checkButtonState, 100);
|
|
|
|
}
|
|
|
|
checkButtonState();
|
2022-03-30 22:37:36 +00:00
|
|
|
|
|
|
|
if (appMode == "auto") {
|
|
|
|
runProgram();
|
|
|
|
}
|
|
|
|
|
2022-02-16 17:40:03 +00:00
|
|
|
</script>
|
|
|
|
</html>
|