QB64/qbjs
QB64/qbjs
1
1
Fork 0
mirror of https://github.com/boxgaming/qbjs.git synced 2024-09-19 20:14:58 +00:00
Code Issues Releases Wiki Activity
qbjs/index.html

394 lines
14 KiB
HTML
Raw Normal View History

initial revision
2022-02-16 17:40:03 +00:00
<html>
<head>
<meta charset="utf-8"/>
<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;
}
a:hover { color: #fff; }
a:before { content: "< "; }
a:after { content: " >"; }
#code-container {
position: absolute;
left: 10px;
top: 10px;
}
#code {
IDE updates
2022-02-18 14:09:43 +00:00
/*width: 600px;*/
initial revision
2022-02-16 17:40:03 +00:00
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;
IDE updates
2022-02-18 14:09:43 +00:00
}
#output-content {
initial revision
2022-02-16 17:40:03 +00:00
border: 1px solid #666;
overflow: scroll;
height: 150px;
}
#js-code {
white-space: pre;
IDE updates
2022-02-18 14:09:43 +00:00
padding: 5px;
color: #999;
initial revision
2022-02-16 17:40:03 +00:00
}
#show-js-container {
color: #666;
position: absolute;
IDE updates
2022-02-18 14:09:43 +00:00
padding-top: 3px;
initial revision
2022-02-16 17:40:03 +00:00
}
#warning-container {
white-space: pre;
font-family: dosvga;
color: #999;
IDE updates
2022-02-18 14:09:43 +00:00
padding: 5px;
initial revision
2022-02-16 17:40:03 +00:00
}
#share-button {
float: right;
}
IDE updates
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;
}
initial revision
2022-02-16 17:40:03 +00:00
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css"></link>
<link rel="stylesheet" href="codemirror/qb-ide.css"></link>
IDE updates
2022-02-18 14:09:43 +00:00
<link rel="stylesheet" href="dialog/dialog.css"></link>
initial revision
2022-02-16 17:40:03 +00:00
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
<script type="text/javascript" src="codemirror/qb-lang.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/selection/active-line.js"></script>
<script type="text/javascript" src="util/shorty.min.js"></script>
IDE updates
2022-02-18 14:09:43 +00:00
<script type="text/javascript" src="dialog/dialog.js"></script>
<script type="text/javascript" src="dialog/dialog-polyfill.js"></script>
initial revision
2022-02-16 17:40:03 +00:00
</head>
<body>
<div id="code-container">
<div id="code"></div>
<a id="run-button" href="javascript:runProgram()">Run Program</a>
<a id="stop-button" href="javascript:stopProgram()">Stop</a>
<a id="share-button" href="javascript:shareProgram()">Share</a>
</div>
IDE updates
2022-02-18 14:09:43 +00:00
<div id="slider">
<div id="slider-left" class="slider-button" onclick="slideLeft()">&lt;</div>
<div id="slider-right" class="slider-button" onclick="slideRight()">&gt;</div>
</div>
initial revision
2022-02-16 17:40:03 +00:00
<div id="game-container">
<div id="gx-container"></div>
<div id="output-container">
IDE updates
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>
initial revision
2022-02-16 17:40:03 +00:00
</div>
IDE updates
2022-02-18 14:09:43 +00:00
<div id="show-js-container"><a id="toggle-console" href="javascript:showConsole()">Show Console</a></div> <!-- <input type="checkbox" id="show-js" onclick="window.onresize()"/> Show Javascript</div> -->
initial revision
2022-02-16 17:40:03 +00:00
</div>
<div id="gx-footer"></div>
IDE updates
2022-02-18 14:09:43 +00:00
<div style="display:none" id="share-dialog">
<textarea id="share-code" rows="15" cols="80" readonly></textarea>
</div>
initial revision
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">
// if code has been passed on the query string load it into the editor
var qbcode = "";
var url = location.href;
IDE updates
2022-02-18 14:09:43 +00:00
var sizeMode = "normal";
var consoleVisible = false;
var currTab = "console";
initial revision
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;
}
}
}
// initialize the code editor
var editor = CodeMirror(document.querySelector("#code"), {
lineNumbers: true,
tabSize: 4,
indentUnit: 4,
value: qbcode,
IDE updates
2022-02-18 14:09:43 +00:00
module: "qbjs",
initial revision
2022-02-16 17:40:03 +00:00
theme: "lesser-dark",
height: "auto",
styleActiveLine: true,
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() {
IDE updates
2022-02-18 14:09:43 +00:00
if (sizeMode == "max") {
slideLeft();
}
initial revision
2022-02-16 17:40:03 +00:00
GX.reset();
QB.start();
var qbCode = editor.getValue();
var jsCode = QBCompiler.compile(qbCode);
displayWarnings();
//displayTypes();
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);
}
document.getElementById("gx-container").focus();
}
function stopProgram() {
QB.halt();
GX.sceneStop();
}
function shareProgram() {
var zout = new Shorty();
var b64 = btoa(zout.deflate(editor.getValue()));
var baseUrl = location.href.split('?')[0];
IDE updates
2022-02-18 14:09:43 +00:00
var codeShare = document.getElementById("share-code");
codeShare.innerHTML = baseUrl + "?qbcode=" + b64;
Dialog.template(document.getElementById("share-dialog"), "Copy the link below to share your code!");
initial revision
2022-02-16 17:40:03 +00:00
}
function displayWarnings() {
var wstr = "";
var w = QBCompiler.getWarnings();
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;
IDE updates
2022-02-18 14:09:43 +00:00
if (!consoleVisible && w.length > 0) {
consoleVisible = true;
}
}
function showConsole() {
consoleVisible = !consoleVisible;
window.onresize();
}
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";
}
initial revision
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;
}
IDE updates
2022-02-18 14:09:43 +00:00
function slideLeft() {
document.getElementById("slider-right").style.display = "block";
if (sizeMode == "max") {
sizeMode = "normal"
}
else {
sizeMode = "min"
document.getElementById("slider-left").style.display = "none";
}
window.onresize();
}
function slideRight() {
document.getElementById("slider-left").style.display = "block";
if (sizeMode == "min") {
sizeMode = "normal"
}
else {
sizeMode = "max"
document.getElementById("slider-right").style.display = "none";
}
window.onresize();
}
initial revision
2022-02-16 17:40:03 +00:00
window.onresize = function() {
var f = document.getElementById("gx-container");
var jsDiv = document.getElementById("output-container");
IDE updates
2022-02-18 14:09:43 +00:00
var cmwidth = 600;
if (sizeMode == "min") {
cmwidth = 0;
editor.getWrapperElement().style.display = "none";
document.getElementById("code").style.borderRight = "0";
}
else if (sizeMode == "max") {
cmwidth = window.innerWidth - 25;
document.getElementById("game-container").style.display = "none";
document.getElementById("slider").style.border = "1px solid #666";
document.getElementById("slider").style.borderLeft = "0";
}
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("game-container").style.left = (cmwidth + 20) + "px";
f.style.width = (window.innerWidth - (cmwidth + 35)) + "px";
initial revision
2022-02-16 17:40:03 +00:00
jsDiv.style.width = f.style.width;
IDE updates
2022-02-18 14:09:43 +00:00
document.getElementById("slider").style.left = (cmwidth + 12) + "px";
if (consoleVisible) { // /*document.getElementById("show-js").checked ||*/ warnCount > 0) {
f.style.height = (window.innerHeight - 237) + "px";
initial revision
2022-02-16 17:40:03 +00:00
jsDiv.style.display = "block";
IDE updates
2022-02-18 14:09:43 +00:00
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";
}
initial revision
2022-02-16 17:40:03 +00:00
}
else {
f.style.height = (window.innerHeight - 50) + "px";
jsDiv.style.display = "none";
IDE updates
2022-02-18 14:09:43 +00:00
document.getElementById("toggle-console").innerHTML = "Show Console";
initial revision
2022-02-16 17:40:03 +00:00
}
document.getElementById("show-js-container").style.top = (window.innerHeight - 45) + "px";
document.getElementById("show-js-container").style.right = "5px";
IDE updates
2022-02-18 14:09:43 +00:00
//document.getElementById("js-code").style.display = document.getElementById("show-js").checked ? "block" : "none";
initial revision
2022-02-16 17:40:03 +00:00
IDE updates
2022-02-18 14:09:43 +00:00
editor.setSize(cmwidth, window.innerHeight - 50);
document.getElementById("code").style.height = (window.innerHeight - 50) + "px";
document.getElementById("slider").style.height = (window.innerHeight - 50) + "px";
initial revision
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();
</script>
</html>
Copy permalink