QB64/qbjs
QB64/qbjs
1
1
Fork 0
mirror of https://github.com/boxgaming/qbjs.git synced 2024-05-12 08:00:12 +00:00
Code Issues Releases Wiki Activity

Fixed fullscreen link in exported html (#96). Reduced size of QBJS logo in exported html (#95)

Browse source
This commit is contained in:
boxgaming 2024-01-09 09:56:40 -06:00
parent de2efcb225
commit 87528c72c6
7 changed files with 143 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
export/auto.html
View file

@ -6,7 +6,10 @@
</head>
<body onload="startProgram()" onresize="resizeScreen()">
<div id="gx-container"></div>
<div id="gx-footer" style="display:none"></div>
<div id="gx-footer" style="display:none">
<div id="gx-link"><a href="https://github.com/boxgaming/qbjs/wiki" target="_blank" title="Powered by QBJS"><img src="logo.png"></a></div>
<div id="gx-fullscreen" onclick="GX.fullScreen(true)" title="Full Screen Mode"></div>
</div>
<span style="color:transparent">&nbsp;</span>
</body>
<script language="javascript" src="vfs.js"></script>
@ -17,12 +20,22 @@
function startProgram() {
resizeScreen();
__qbjs_run();
resizeScreen();
}
function resizeScreen() {
function resizeScreen() {
var c = document.getElementById("gx-container");
c.style.width = window.innerWidth;
c.style.height = window.innerHeight;
QB.resize(c.clientWidth, c.clientHeight);
var cv = GX.canvas();
if (cv) {
var footer = document.getElementById("gx-footer");
if (footer.parentNode != c) {
footer.style.display = "flex";
c.appendChild(footer);
}
QB.resize(c.clientWidth, c.clientHeight);
}
}
resizeScreen();
</script>
</html>

46
export/fullscreen-hover.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
height="32px"
style="enable-background:new 0 0 32 32;"
version="1.1"
viewBox="0 0 32 32"
width="32px"
xml:space="preserve"
id="svg4"
sodipodi:docname="fullscreen-hover.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
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="defs4" /><sodipodi:namedview
id="namedview4"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="19.688504"
inkscape:cx="12.72316"
inkscape:cy="16.430908"
inkscape:window-width="1920"
inkscape:window-height="1177"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" /><g
id="Layer_1" /><polygon
points="20,32 32,32 32,20 27.414,24.586 22.828,20 20,22.828 24.586,27.414 "
style="fill:#999999;fill-opacity:1"
id="polygon1" /><polygon
points="9.129,11.953 11.957,9.125 7.414,4.586 12,0 0,0 0,12 4.586,7.414 "
style="fill:#999999;fill-opacity:1"
id="polygon2" /><polygon
points="0,32 12,32 7.414,27.414 12,22.828 9.172,20 4.586,24.586 0,20 "
style="fill:#999999;fill-opacity:1"
id="polygon3" /><polygon
points="22.871,11.953 27.414,7.414 32,12 32,0 20,0 24.586,4.586 20.043,9.125 "
style="fill:#999999;fill-opacity:1"
id="polygon4" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

46
export/fullscreen.svg Normal file
View file

@ -0,0 +1,46 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
height="32px"
style="enable-background:new 0 0 32 32;"
version="1.1"
viewBox="0 0 32 32"
width="32px"
xml:space="preserve"
id="svg4"
sodipodi:docname="fullscreen.svg"
inkscape:version="1.3 (0e150ed6c4, 2023-07-21)"
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="defs4" /><sodipodi:namedview
id="namedview4"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:zoom="19.688504"
inkscape:cx="12.723161"
inkscape:cy="16.430908"
inkscape:window-width="1920"
inkscape:window-height="1177"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg4" /><g
id="Layer_1" /><polygon
points="20,32 32,32 32,20 27.414,24.586 22.828,20 20,22.828 24.586,27.414 "
style="fill:#666666;fill-opacity:1"
id="polygon1" /><polygon
points="9.129,11.953 11.957,9.125 7.414,4.586 12,0 0,0 0,12 4.586,7.414 "
style="fill:#666666;fill-opacity:1"
id="polygon2" /><polygon
points="0,32 12,32 7.414,27.414 12,22.828 9.172,20 4.586,24.586 0,20 "
style="fill:#666666;fill-opacity:1"
id="polygon3" /><polygon
points="22.871,11.953 27.414,7.414 32,12 32,0 20,0 24.586,4.586 20.043,9.125 "
style="fill:#666666;fill-opacity:1"
id="polygon4" /></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
export/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

22
export/play.html
View file

@ -5,11 +5,10 @@
<link rel="stylesheet" href="qbjs.css"></link>
</head>
<body onresize="resizeScreen()">
<a href="#" onclick="return startProgram()" id="gx-load-screen">&nbsp;</a>
<div id="gx-container"></div>
<div id="gx-footer">
<div id="gx-container"><a href="#" onclick="return startProgram()" id="gx-load-screen"><span style="visibility:hidden">_</span></a></div>
<div id="gx-footer" style="display:none">
<div id="gx-link"><a href="https://github.com/boxgaming/qbjs/wiki" target="_blank" title="Powered by QBJS"><img src="logo.png"></a></div>
<div id="gx-fullscreen"><img src="fullscreen.png" title="Full Screen Mode" onclick="GX.fullScreen(true)"></div>
<div id="gx-fullscreen" onclick="GX.fullScreen(true)" title="Full Screen Mode"></div>
</div>
</body>
<script language="javascript" src="vfs.js"></script>
@ -19,9 +18,8 @@
<script language="javascript">
function startProgram() {
document.getElementById("gx-load-screen").style.display = "none";
document.getElementById("gx-footer").style.display = "none";
resizeScreen();
__qbjs_run();
resizeScreen();
return false;
}
@ -29,7 +27,17 @@
var c = document.getElementById("gx-container");
c.style.width = window.innerWidth;
c.style.height = window.innerHeight;
QB.resize(c.clientWidth, c.clientHeight);
var cv = GX.canvas();
if (cv) {
var footer = document.getElementById("gx-footer");
if (footer.parentNode != c) {
footer.style.display = "flex";
c.appendChild(footer);
document.getElementById("gx-load-screen").remove();
}
QB.resize(c.clientWidth, c.clientHeight);
}
}
resizeScreen();
</script>
</html>

22
export/qbjs.css
View file

@ -13,10 +13,11 @@ body {
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
}
#gx-footer {
margin: 0 auto;
background-color: #666;
background-color: #333;
display: flex;
justify-content: space-between;
width: 600px;
@ -24,6 +25,17 @@ body {
#gx-link, #gx-fullscreen {
margin: 1px;
}
#gx-fullscreen {
cursor: pointer;
background-image: url('fullscreen.svg');
width: 26px;
height: 26px;
margin: 4px;
background-size: 26px 26px;
}
#gx-fullscreen:hover {
background-image: url('fullscreen-hover.svg');
}
#gx-canvas {
border: 1px solid #222;
background-color: #000;
@ -32,8 +44,8 @@ body {
display: block;
text-align: center;
margin: auto;
width: 600px;
height: 360px;
width: 100%;
height: 100%;
font-size: 24px;
color: #ccc;
border: 1px solid #000;
@ -41,8 +53,8 @@ body {
background-position: center center;
background-image: url('play.png');
background-repeat: no-repeat;
background-color: #444;
background-color: #000;
}
#gx-load-screen:hover {
background-color: #555;
background-color: #333;
}

5
qbjs-ide.js
View file

@ -362,8 +362,9 @@ var IDE = new function() {
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"));
zip.file("logo.png", await getFile("logo.png", "blob"));
zip.file("fullscreen.svg", await getFile("export/fullscreen.svg", "blob"));
zip.file("fullscreen-hover.svg", await getFile("export/fullscreen-hover.svg", "blob"));
zip.file("logo.png", await getFile("export/logo.png", "blob"));
zip.file("dosvga.ttf", await getFile("dosvga.ttf", "blob"));
zip.file("play.png", await getFile("play.png", "blob"));
zip.file("qbjs.css", await getFile("export/qbjs.css", "text"));