LailaTheElf/rcrf-wifi
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update controller

Browse Source
This commit is contained in:
Laila van Reenen
2024-06-06 21:03:50 +02:00
parent 49b3c85560
commit 65ffc134fa
3 changed files with 76 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@@ -8,7 +8,8 @@
color:rgb(128, 128, 128);
font-size: xx-large;">
<h1 style="text-align:center">MBC Het Groote Dok</h1>
<canvas id="canvas" name="game"></canvas>
<div id="boats"></div>
<canvas id="canvas" name="game" style="display:none"></canvas>
<div id="clientId"></div>
<script>
var clientId = -1;
@@ -26,12 +27,16 @@ font-size: xx-large;">
document.cookie = "clientId=" + clientId;
}
document.getElementById("clientId").innerHTML = "client id: " + clientId;
// console.log(data);
var boatListEl = document.getElementById('boats');
var stickEl = document.getElementById('canvas');
var connection = new WebSocket('ws://' + "10.254.0.1" + ':8080/', ['mbcRcRf']);
var connection = new WebSocket('ws://' + "localhost" + ':8080/', ['mbcRcRf']);
connection.onopen = function ()
{
connection.send(clientId + ':' + (new Date()));
connection.send(clientId + ';' + Math.floor(new Date().getTime()/1000.0).toString());
setTimeout(() => { connection.send(clientId + ';boats'); }, 100);
};
connection.onerror = function (error)
@@ -42,13 +47,43 @@ font-size: xx-large;">
connection.onmessage = function (e)
{
console.log('Server: ', e.data);
let data = e.data.split(':');
if (data[0] == "boats")
{
console.log("boats: ", data);
boatListEl.innerHTML = "";
stickEl.style.display = 'none';
boatListEl.style.display = 'block';
for (let boat in data)
{
boat = data[boat].split(';');
if ((boat.length == 3) && (boat[2] == 'available'))
{
console.log("render boat", boat);
let el = document.createElement("div");
el.id = "boat" + boat[0];
el.innerHTML = boat[1];
el.addEventListener('click', selectBoat);
boatListEl.appendChild(el);
}
}
}
else
{
console.log('Server: ', e.data);
}
};
function selectBoat(e)
{
console.log('selectBoat:', e.target.id.split('boat')[1]);
stickEl.style.display = 'block';
boatListEl.style.display = 'none';
}
function send(x,y,speed,angle){
var data = clientId + "," + x.toString() + "," + y.toString(); //{"x":x,"y":y,"speed":speed,"angle":angle};
var data = clientId + ";d;" + x.toString() + "," + y.toString(); //{"x":x,"y":y,"speed":speed,"angle":angle};
//data = JSON.stringify(data);
console.log(data);
connection.send(data);
}