mirror of
git://xwords.git.sourceforge.net/gitroot/xwords/xwords
synced 2025-01-04 23:02:02 +01:00
168 lines
5.4 KiB
HTML
168 lines
5.4 KiB
HTML
<!doctype html>
|
|
<html lang="en-us">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<style>
|
|
canvas.emscripten {
|
|
border: 0px none;
|
|
margin-left:auto;
|
|
margin-right:auto;
|
|
display:block;
|
|
}
|
|
p.startButton {
|
|
text-align: center;
|
|
background-color: #4c7aff;
|
|
font-family: Sans-Serif;
|
|
padding: 10px;
|
|
}
|
|
#loadingDiv {
|
|
text-align: center;
|
|
}
|
|
div.buttons {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<script>
|
|
var client = null;
|
|
function callNewGame() {
|
|
var args = [
|
|
document.getElementById("player0Checked").checked,
|
|
document.getElementById("player1Checked").checked,
|
|
]
|
|
Module.ccall('newgame', null, ['boolean', 'boolean'], args);
|
|
}
|
|
|
|
// called from main.c
|
|
function onHaveDevID(devid) {
|
|
console.log('got ' + devid);
|
|
document.getElementById("mqtt_span").textContent=devid;
|
|
|
|
client = new Paho.MQTT.Client("eehouse.org", 8883, '/wss', devid);
|
|
|
|
// set callback handlers
|
|
client.onConnectionLost = function onConnectionLost(responseObject) {
|
|
document.getElementById("mqtt_status").textContent="Disconnected";
|
|
if (responseObject.errorCode !== 0) {
|
|
console.log("onConnectionLost:"+responseObject.errorMessage);
|
|
}
|
|
};
|
|
client.onMessageArrived = function onMessageArrived(message) {
|
|
var payload = message.payloadBytes;
|
|
var length = payload.length;
|
|
Module.ccall('gotMQTTMsg', null, ['number', 'array'], [length, payload]);
|
|
};
|
|
|
|
function onConnect() {
|
|
document.getElementById("mqtt_status").textContent="Connected";
|
|
|
|
var subscribeOptions = {
|
|
qos: 2, // QoS
|
|
// invocationContext: {foo: true}, // Passed to success / failure callback
|
|
// onSuccess: function() { alert('subscribe succeeded'); },
|
|
onFailure: function() { alert('subscribe failed'); },
|
|
timeout: 10,
|
|
};
|
|
client.subscribe('xw4/device/' + devid, subscribeOptions);
|
|
|
|
// Try a send-to-self for sanity
|
|
// message = new Paho.MQTT.Message("Hello");
|
|
// message.destinationName = devid;
|
|
// client.send(message);
|
|
}
|
|
|
|
// connect the client -- throws SecurityError: “The operation is insecure.”
|
|
client.connect({"mqttVersion": 3,
|
|
"userName": "xwuser",
|
|
"password": "xw4r0cks",
|
|
"useSSL": true,
|
|
"reconnect": true,
|
|
"onSuccess": onConnect,
|
|
"onFailure": function() { alert('onFailure'); },
|
|
});
|
|
}
|
|
|
|
function mqttSend (topic, ptr) {
|
|
if ( null != client ) {
|
|
message = new Paho.MQTT.Message(ptr);
|
|
message.destinationName = topic;
|
|
message.qos = 2;
|
|
client.send(message);
|
|
} else {
|
|
alert('null client');
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="buttons">
|
|
<div id="loadingDiv">CrossWords is loading...</div>
|
|
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
|
<div class="buttons">
|
|
<button onclick="Module.ccall('button', null, ['string'], ['hintdown']);">Prev Hint</button>
|
|
<button onclick="Module.ccall('button', null, ['string'], ['hintup']);">Next Hint</button>
|
|
<button onclick="Module.ccall('button', null, ['string'], ['flip']);">Flip</button>
|
|
<button onclick="Module.ccall('button', null, ['string'], ['redo']);">Un/Redo</button>
|
|
<button onclick="Module.ccall('button', null, ['string'], ['vals']);">Vals</button>
|
|
</div>
|
|
|
|
<div class="buttons">
|
|
<span>Player 1</span>
|
|
<input type="checkbox" id="player0Checked">Is Robot</input>
|
|
</div>
|
|
<div class="buttons">
|
|
<span>Player 2</span>
|
|
<input type="checkbox" id="player1Checked">Is Robot</input>
|
|
</div>
|
|
<div class="buttons">
|
|
<button type="button" onclick="callNewGame();">New Local Game</button>
|
|
</div>
|
|
<hr/>
|
|
<div class="buttons">
|
|
<button type="button" onclick="localStorage.clear();">Clear Local Storage</button>
|
|
</div>
|
|
|
|
<div><span>MQTT Dev ID:</span><span id="mqtt_span"></span></div>
|
|
<div><span>MQTT Status:</span><span id="mqtt_status">Unconnected</span></div>
|
|
|
|
<script type='text/javascript'>
|
|
var Module = {
|
|
onRuntimeInitialized: function() {
|
|
var e = document.getElementById('loadingDiv');
|
|
e.style.visibility = 'hidden';
|
|
Module.ccall('mainf', null, null);
|
|
},
|
|
canvas: (function() {
|
|
var canvas = document.getElementById('canvas');
|
|
return canvas;
|
|
})()
|
|
};
|
|
</script>
|
|
|
|
<script>
|
|
(function() {
|
|
var memoryInitializer = 'main.js.mem';
|
|
if (typeof Module['locateFile'] === 'function') {
|
|
memoryInitializer = Module['locateFile'](memoryInitializer);
|
|
} else if (Module['memoryInitializerPrefixURL']) {
|
|
memoryInitializer = Module['memoryInitializerPrefixURL'] + memoryInitializer;
|
|
}
|
|
var xhr = Module['memoryInitializerRequest'] = new XMLHttpRequest();
|
|
xhr.open('GET', memoryInitializer, true);
|
|
xhr.responseType = 'arraybuffer';
|
|
xhr.send(null);
|
|
})();
|
|
|
|
var script = document.createElement('script');
|
|
script.src = "main.js";
|
|
document.body.appendChild(script);
|
|
script = document.createElement('script');
|
|
script.src = "paho-mqtt.js";
|
|
document.body.appendChild(script);
|
|
</script>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
|
|
|