MrMonopoly/raylib
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

HTML/JS/CSS enhancement

Browse Source
This commit is contained in:
stickm4n 2023-02-11 23:06:38 -05:00
parent 183c874689
commit 9747634a0d
2 changed files with 48 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/minshell.html
View File

@ -31,17 +31,17 @@
<link rel="shortcut icon" href="https://www.raylib.com/favicon.ico"> <link rel="shortcut icon" href="https://www.raylib.com/favicon.ico">
<style> <style>
body { margin: 0px; } body { margin: 0; }
canvas.emscripten { border: 0px none; background-color: black; } canvas.emscripten { border: 0 none; background-color: black; }
</style> </style>
<script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script> <script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script>
<script type='text/javascript'> <script type='text/javascript'>
function saveFileFromMEMFSToDisk(memoryFSname, localFSname) // This can be called by C/C++ code function saveFileFromMEMFSToDisk(memoryFSname, localFSname) // This can be called by C/C++ code
{ {
var isSafari = false; // Not supported, navigator.userAgent access is being restricted const isSafari = false; // Not supported, navigator.userAgent access is being restricted
//var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); //var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var data = FS.readFile(memoryFSname); const data = FS.readFile(memoryFSname);
var blob; let blob;
if (isSafari) blob = new Blob([data.buffer], { type: "application/octet-stream" }); if (isSafari) blob = new Blob([data.buffer], { type: "application/octet-stream" });
else blob = new Blob([data.buffer], { type: "application/octet-binary" }); else blob = new Blob([data.buffer], { type: "application/octet-binary" });
@ -56,11 +56,11 @@
</head> </head>
<body> <body>
<canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas> <canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas>
<p id="output" /> <p id="output"></p>
<script> <script>
var Module = { const Module = {
print: (function () { print: (function () {
var element = document.getElementById('output'); const element = document.getElementById('output');
if (element) element.value = ''; // clear browser cache if (element) element.value = ''; // clear browser cache
return function (text) { return function (text) {
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
@ -72,8 +72,7 @@
}; };
})(), })(),
canvas: (function () { canvas: (function () {
var canvas = document.getElementById('canvas'); return document.getElementById('canvas');
return canvas;
})() })()
}; };
</script> </script>

53
src/shell.html
View File

@ -32,9 +32,9 @@
<style> <style>
body { body {
font-family: arial; font-family: arial,serif;
margin: 0; margin: 0;
padding: none; padding: 0;
} }
#header { #header {
@ -74,7 +74,7 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
/* NOTE: Canvas *must not* have any border or padding, or mouse coords will be wrong */ /* NOTE: Canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { canvas.emscripten {
border: 0px none; border: 0 none;
background: black; background: black;
width: 100%; width: 100%;
} }
@ -82,9 +82,7 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
.spinner { .spinner {
height: 30px; height: 30px;
width: 30px; width: 30px;
margin: 0; margin: 20px 0 0 20px;
margin-top: 20px;
margin-left: 20px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
-webkit-animation: rotation .8s linear infinite; -webkit-animation: rotation .8s linear infinite;
@ -125,8 +123,8 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
} }
#progress { #progress {
height: 0px; height: 0;
width: 0px; width: 0;
} }
#controls { #controls {
@ -140,8 +138,7 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
#output { #output {
width: 100%; width: 100%;
height: 140px; height: 140px;
margin: 0 auto; margin: 10px auto 0;
margin-top: 10px;
display: block; display: block;
background-color: black; background-color: black;
color: rgb(37, 174, 38); color: rgb(37, 174, 38);
@ -173,12 +170,12 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
<div class="emscripten" id="status">Downloading...</div> <div class="emscripten" id="status">Downloading...</div>
<span id='controls'> <span id='controls'>
<span><input type="button" value="🖵 FULLSCREEN" onclick="Module.requestFullscreen(false, false)"></span> <span><input type="button" value="🖵 FULLSCREEN" onclick="Module.requestFullscreen()"></span>
<span><input type="button" id="btn-audio" value="🔇 SUSPEND" onclick="toggleAudio()"></span> <span><input type="button" id="btn-audio" value="🔇 SUSPEND" onclick="toggleAudio()"></span>
</span> </span>
<div class="emscripten"> <div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress> <progress value="0" max="100" id="progress" hidden></progress>
</div> </div>
</div> </div>
@ -192,10 +189,10 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
<script type='text/javascript'> <script type='text/javascript'>
function saveFileFromMEMFSToDisk(memoryFSname, localFSname) // This can be called by C/C++ code function saveFileFromMEMFSToDisk(memoryFSname, localFSname) // This can be called by C/C++ code
{ {
var isSafari = false; // Not supported, navigator.userAgent access is being restricted const isSafari = false; // Not supported, navigator.userAgent access is being restricted
//var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); //var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
var data = FS.readFile(memoryFSname); const data = FS.readFile(memoryFSname);
var blob; let blob;
if (isSafari) blob = new Blob([data.buffer], { type: "application/octet-stream" }); if (isSafari) blob = new Blob([data.buffer], { type: "application/octet-stream" });
else blob = new Blob([data.buffer], { type: "application/octet-binary" }); else blob = new Blob([data.buffer], { type: "application/octet-binary" });
@ -208,14 +205,14 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
} }
</script> </script>
<script type='text/javascript'> <script type='text/javascript'>
var statusElement = document.querySelector('#status'); const statusElement = document.querySelector('#status');
var progressElement = document.querySelector('#progress'); const progressElement = document.querySelector('#progress');
var spinnerElement = document.querySelector('#spinner'); const spinnerElement = document.querySelector('#spinner');
var Module = { const Module = {
preRun: [], preRun: [],
postRun: [], postRun: [],
print: (function() { print: (function() {
var element = document.querySelector('#output'); const element = document.querySelector('#output');
if (element) element.value = ''; // Clear browser cache if (element) element.value = ''; // Clear browser cache
@ -240,7 +237,7 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
console.error(text); console.error(text);
}, },
canvas: (function() { canvas: (function() {
var canvas = document.querySelector('#canvas'); const canvas = document.querySelector('#canvas');
// As a default initial behavior, pop up an alert when webgl context is lost. // As a default initial behavior, pop up an alert when webgl context is lost.
// To make your application robust, you may want to override this behavior before shipping! // To make your application robust, you may want to override this behavior before shipping!
@ -253,8 +250,8 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' }; if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
if (text === Module.setStatus.last.text) return; if (text === Module.setStatus.last.text) return;
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/); const m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
var now = Date.now(); const now = Date.now();
if (m && now - Module.setStatus.last.time < 30) return; // If this is a progress update, skip it if too soon if (m && now - Module.setStatus.last.time < 30) return; // If this is a progress update, skip it if too soon
@ -295,7 +292,7 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
<!-- REF: https://developers.google.com/web/updates/2018/11/web-audio-autoplay --> <!-- REF: https://developers.google.com/web/updates/2018/11/web-audio-autoplay -->
<script type='text/javascript'> <script type='text/javascript'>
var audioBtn = document.querySelector('#btn-audio'); const audioBtn = document.querySelector('#btn-audio');
// An array of all contexts to resume on the page // An array of all contexts to resume on the page
const audioContexList = []; const audioContexList = [];
@ -306,17 +303,17 @@ jwE50AGjLCVuS8Yt4H7OgZLKK5EKOsLviEWJSL/+0uMi7gLUSBseYwqEbXvSHCec1CJvZPyHCmYQffaB
construct(target, args) { construct(target, args) {
const result = new target(...args); const result = new target(...args);
audioContexList.push(result); audioContexList.push(result);
if (result.state == "suspended") audioBtn.value = "🔈 RESUME"; if (result.state === "suspended") audioBtn.value = "🔈 RESUME";
return result; return result;
} }
}); });
})(); })();
function toggleAudio() { function toggleAudio() {
var resumed = false; let resumed = false;
audioContexList.forEach(ctx => { audioContexList.forEach(ctx => {
if (ctx.state == "suspended") { ctx.resume(); resumed = true; } if (ctx.state === "suspended") { ctx.resume(); resumed = true; }
else if (ctx.state == "running") ctx.suspend(); else if (ctx.state === "running") ctx.suspend();
}); });
if (resumed) audioBtn.value = "🔇 SUSPEND"; if (resumed) audioBtn.value = "🔇 SUSPEND";