Miroirs/xwords
1
0
Fork 0
mirror of git://xwords.git.sourceforge.net/gitroot/xwords/xwords synced 2024-12-30 10:26:58 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
xwords/xwords4/wasm/shell_minimal.html

211 lines
7.9 KiB
HTML
Raw Normal View History

work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
get URL-encoded invitation receipt working
2021-02-10 05:59:33 +01:00
<title>CrossWords webapp prototype</title>
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
<style>
.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
textarea.emscripten { font-family: monospace; width: 80%; }
get mqtt working again
2021-02-10 02:53:30 +01:00
body.centered { text-align: center; }
add name button and store wordlist As a p.o.c., load the built-in wordlist into storage once, and thereafter use it from there rather than as a file. Now it can go away and a wordlist for the user's locale be downloaded and stored instead.
2021-02-27 06:09:58 +01:00
table.centered {
margin-left: auto;
margin-right: auto;
}
tweak UI for small screens
2021-03-10 03:17:45 +01:00
button.xwbutton {
remove FLIP button; save/restore prefs
2021-03-25 01:52:17 +01:00
margin: 8px;
tweak UI for small screens
2021-03-10 03:17:45 +01:00
}
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
div.emscripten { text-align: center; }
div.emscripten_border { border: 1px solid black; }
/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
canvas.emscripten { border: 0px none; background-color: black; }
move alert to on top of board
2021-02-13 19:49:14 +01:00
div.buttonRow {
text-align: center;
}
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
.spinner {
height: 50px;
width: 50px;
margin: 0px auto;
-webkit-animation: rotation .8s linear infinite;
-moz-animation: rotation .8s linear infinite;
-o-animation: rotation .8s linear infinite;
animation: rotation 0.8s linear infinite;
border-left: 10px solid rgb(0,150,240);
border-right: 10px solid rgb(0,150,240);
border-bottom: 10px solid rgb(0,150,240);
border-top: 10px solid rgb(100,0,200);
border-radius: 100%;
background-color: rgb(200,100,250);
}
@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-o-keyframes rotation {
from {-o-transform: rotate(0deg);}
to {-o-transform: rotate(360deg);}
}
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
make dialogs stackable
2021-02-16 22:25:21 +01:00
div.nbalert {
move alert to on top of board
2021-02-13 19:49:14 +01:00
position: absolute;
text-align: left;
notify, and stop using, when another tab starts up I'm wrestling with how to have concurrent tabs open. They can't be on the same game because both can't connect using same MQTT dev id (and they'd quickly get the saved state screwed up.) Only problem is sometimes a tab in a new window doesn't have access to localstorage and so is able to connect on its own. But later that state isn't reachable any more: relaunch firefox and you get back the to the older state.
2021-02-13 21:02:26 +01:00
white-space: pre-wrap;
tweak UI for small screens
2021-03-10 03:17:45 +01:00
left: 17%;
move alert to on top of board
2021-02-13 19:49:14 +01:00
top: 250px;
tweak UI for small screens
2021-03-10 03:17:45 +01:00
width: 67%;
background-color: #777;
color: #FFF;
move alert to on top of board
2021-02-13 19:49:14 +01:00
min-width: 217px;
border-radius: 10px 10px;
border: solid;
border-width: 1px;
border-color: #000;
vertical-align: top;
tweak UI for small screens
2021-03-10 03:17:45 +01:00
padding: 10px;
make alert and confirm non-blocking Using a custom div and callbacks. TODO: make it floating so it's more dialog-like. But that's just css at this point.
2021-02-13 19:37:47 +01:00
}
add alert for asking user for string
2021-02-16 23:25:22 +01:00
textarea.stringedit {
fix get-string dialog
2021-03-11 05:33:24 +01:00
height: 1em;
resize: none;
add alert for asking user for string
2021-02-16 23:25:22 +01:00
}
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
</style>
</head>
get mqtt working again
2021-02-10 02:53:30 +01:00
<body class="centered">
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
<hr/>
<figure style="overflow:visible;" id="spinner"><div class="spinner"></div><center style="margin-top:0.5em"><strong>emscripten</strong></center></figure>
<div class="emscripten" id="status">Downloading...</div>
<div class="emscripten">
<progress value="0" max="100" id="progress" hidden=1></progress>
</div>
make alert and confirm non-blocking Using a custom div and callbacks. TODO: make it floating so it's more dialog-like. But that's just css at this point.
2021-02-13 19:37:47 +01:00
<div id='nbalert'></div>
keep games open and switch between them Motiviation was to be able to deliver a message in the background, but at least for now it's easier not to close games again. Can always do that later if it's a memory problem.
2021-02-23 17:35:50 +01:00
<div id='gamename'></div>
add pending messages count to display
2023-02-23 21:58:31 +01:00
<div id='msgcount'></div>
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
<div class="emscripten_border">
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
</div>
size html elements based on window size Should make things look better on different sized phone and tablet screens.
2021-03-24 18:20:42 +01:00
<div class='buttonRow' id='game_buttons'></div>
toward allowing multiple games
2021-02-19 04:20:20 +01:00
<hr/>
size html elements based on window size Should make things look better on different sized phone and tablet screens.
2021-03-24 18:20:42 +01:00
<div class='buttonRow' id='device_buttons'></div>
toward allowing multiple games
2021-02-19 04:20:20 +01:00
<hr/>
add name button and store wordlist As a p.o.c., load the built-in wordlist into storage once, and thereafter use it from there rather than as a file. Now it can go away and a wordlist for the user's locale be downloaded and stored instead.
2021-02-27 06:09:58 +01:00
<table class='centered'>
add git rev to display
2023-05-26 05:22:52 +02:00
<tr><td>Git rev:</td><td id="git_rev"></td></tr>
add name button and store wordlist As a p.o.c., load the built-in wordlist into storage once, and thereafter use it from there rather than as a file. Now it can go away and a wordlist for the user's locale be downloaded and stored instead.
2021-02-27 06:09:58 +01:00
<tr><td>MQTT Dev ID:</td><td id="mqtt_span"></td></tr>
<tr><td>MQTT Status:</td><td id="mqtt_status">Unconnected</td></tr>
add more info to game "buttons" Toward a games-list substitute. New game_summarize method will get fleshed out and eventually replace what's in jni?
2021-03-09 03:38:02 +01:00
<tr hidden=1><td>MemPool used:</td><td id="mempool">0</td></tr>
add name button and store wordlist As a p.o.c., load the built-in wordlist into storage once, and thereafter use it from there rather than as a file. Now it can go away and a wordlist for the user's locale be downloaded and stored instead.
2021-02-27 06:09:58 +01:00
</table>
show mempool stats (DEBUG builds)
2021-03-05 18:46:21 +01:00
<!-- Remove until I figure out how this works
remove FLIP button; save/restore prefs
2021-03-25 01:52:17 +01:00
<hr/>
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
<div class="emscripten">
<input type="checkbox" id="resize">Resize canvas
<input type="checkbox" id="pointerLock" checked>Lock/hide mouse pointer
&nbsp;&nbsp;&nbsp;
<input type="button" value="Fullscreen" onclick="Module.requestFullscreen(document.getElementById('pointerLock').checked,
document.getElementById('resize').checked)">
</div>
<hr/>
<textarea class="emscripten" id="output" rows="8"></textarea>
<hr>
cleanup and tweaks
2021-03-12 16:05:21 +01:00
-->
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
<script type='text/javascript'>
var statusElement = document.getElementById('status');
var progressElement = document.getElementById('progress');
get URL-encoded invitation receipt working
2021-02-10 05:59:33 +01:00
var spinnerElement = document.getElementById('spinner');
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
get URL-encoded invitation receipt working
2021-02-10 05:59:33 +01:00
let arguments = window.location.search.replaceAll('?', '').trim().split('&');
url-decode args prior to passing to main()
2021-02-24 15:58:00 +01:00
for ( let ii = 0; ii < arguments.length; ++ii ) {
arguments[ii] = decodeURIComponent(arguments[ii]);
}
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
var Module = {
fix so keyboard input works Emscripen was hogging all keyboard events even when canvas didn't have focus. There's an arcane way to fix that in js.
2021-02-16 14:59:54 +01:00
// preRun: see https://stackoverflow.com/questions/45936800/emscripten-canvas-jquery-toggle-focus/46083467
preRun: [function () {ENV.SDL_EMSCRIPTEN_KEYBOARD_ELEMENT = "#canvas";}],
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
postRun: [],
arguments: arguments,
print: (function() {
var element = document.getElementById('output');
if (element) element.value = ''; // clear browser cache
return function(text) {
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
// These replacements are necessary if you render to raw HTML
//text = text.replace(/&/g, "&amp;");
//text = text.replace(/</g, "&lt;");
//text = text.replace(/>/g, "&gt;");
//text = text.replace('\n', '<br>', 'g');
console.log(text);
if (element) {
element.value += text + "\n";
element.scrollTop = element.scrollHeight; // focus on bottom
}
};
})(),
printErr: function(text) {
if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
console.error(text);
},
canvas: (function() {
var canvas = document.getElementById('canvas');
// 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!
// See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
return canvas;
})(),
setStatus: function(text) {
if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' };
if (text === Module.setStatus.last.text) return;
var m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/);
var now = Date.now();
if (m && now - Module.setStatus.last.time < 30) return; // if this is a progress update, skip it if too soon
Module.setStatus.last.time = now;
Module.setStatus.last.text = text;
if (m) {
text = m[1];
progressElement.value = parseInt(m[2])*100;
progressElement.max = parseInt(m[4])*100;
progressElement.hidden = false;
spinnerElement.hidden = false;
} else {
progressElement.value = null;
progressElement.max = null;
progressElement.hidden = true;
if (!text) spinnerElement.hidden = true;
}
statusElement.innerHTML = text;
},
totalDependencies: 0,
monitorRunDependencies: function(left) {
this.totalDependencies = Math.max(this.totalDependencies, left);
Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.');
}
};
Module.setStatus('Downloading...');
window.onerror = function() {
Module.setStatus('Exception thrown, see JavaScript console');
spinnerElement.style.display = 'none';
Module.setStatus = function(text) {
if (text) Module.printErr('[post-exception status] ' + text);
};
};
</script>
<script>
get mqtt working again
2021-02-10 02:53:30 +01:00
let script = document.createElement('script');
move most of my js into separate file
2021-02-13 17:42:48 +01:00
script.src = "xwutils.js";
get mqtt working again
2021-02-10 02:53:30 +01:00
document.body.appendChild(script);
work with WASM=1 and shell template to pass argv from url
2021-02-09 06:51:25 +01:00
</script>
{{{ SCRIPT }}}
</body>
</html>
Reference in a new issue Copy permalink