223 lines
7.1 KiB
HTML
223 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>MBC Bootjes</title>
|
|
<meta name="viewport" content="user-scalable=no">
|
|
</head>
|
|
<body style="position: fixed; font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif ;
|
|
color:rgb(128, 128, 128);
|
|
font-size: xx-large;">
|
|
<h1 style="text-align:center">MBC Het Groote Dok</h1>
|
|
<div id="boats"></div>
|
|
<canvas id="canvas" name="game" style="display:none"></canvas>
|
|
<div id="clientId"></div>
|
|
<script>
|
|
var clientId = -1;
|
|
var ca = document.cookie.split(';');
|
|
for (var i=0; i<ca.length; i++)
|
|
{
|
|
var c = ca[i].trim();
|
|
if (c.indexOf("clientId") == 0){
|
|
clientId = c.substring("clientId=".length, c.length);
|
|
}
|
|
}
|
|
if (clientId == -1)
|
|
{
|
|
clientId = Math.floor(Math.random() * 10000).toString();
|
|
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://' + "localhost" + ':8080/', ['mbcRcRf']);
|
|
|
|
connection.onopen = function ()
|
|
{
|
|
connection.send(clientId + ';' + Math.floor(new Date().getTime()/1000.0).toString());
|
|
setTimeout(() => { connection.send(clientId + ';boats'); }, 100);
|
|
};
|
|
|
|
connection.onerror = function (error)
|
|
{
|
|
console.log('WebSocket Error ', error);
|
|
alert('WebSocket Error ', error);
|
|
};
|
|
|
|
connection.onmessage = function (e)
|
|
{
|
|
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 + ";d;" + x.toString() + "," + y.toString(); //{"x":x,"y":y,"speed":speed,"angle":angle};
|
|
//data = JSON.stringify(data);
|
|
connection.send(data);
|
|
}
|
|
|
|
|
|
</script>
|
|
<script>
|
|
var canvas, ctx;
|
|
|
|
window.addEventListener('load', () => {
|
|
|
|
canvas = document.getElementById('canvas');
|
|
ctx = canvas.getContext('2d');
|
|
resize();
|
|
|
|
document.addEventListener('mousedown', startDrawing);
|
|
document.addEventListener('mouseup', stopDrawing);
|
|
document.addEventListener('mousemove', Draw);
|
|
|
|
document.addEventListener('touchstart', startDrawing);
|
|
document.addEventListener('touchend', stopDrawing);
|
|
document.addEventListener('touchcancel', stopDrawing);
|
|
document.addEventListener('touchmove', Draw);
|
|
window.addEventListener('resize', resize);
|
|
});
|
|
|
|
|
|
|
|
|
|
var width, height, radius, x_orig, y_orig;
|
|
function resize() {
|
|
width = window.innerWidth;
|
|
radius = 200;
|
|
height = radius * 6.5;
|
|
ctx.canvas.width = width;
|
|
ctx.canvas.height = height;
|
|
background();
|
|
joystick(width / 2, height / 3);
|
|
}
|
|
|
|
function background() {
|
|
x_orig = width / 2;
|
|
y_orig = height / 3;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(x_orig, y_orig, radius + 20, 0, Math.PI * 2, true);
|
|
ctx.fillStyle = '#ECE5E5';
|
|
ctx.fill();
|
|
}
|
|
|
|
function joystick(width, height) {
|
|
ctx.beginPath();
|
|
ctx.arc(width, height, radius, 0, Math.PI * 2, true);
|
|
ctx.fillStyle = '#F08080';
|
|
ctx.fill();
|
|
ctx.strokeStyle = '#F6ABAB';
|
|
ctx.lineWidth = 8;
|
|
ctx.stroke();
|
|
}
|
|
|
|
let coord = { x: 0, y: 0 };
|
|
let paint = false;
|
|
|
|
function getPosition(event) {
|
|
var mouse_x = event.clientX || event.touches[0].clientX;
|
|
var mouse_y = event.clientY || event.touches[0].clientY;
|
|
coord.x = mouse_x - canvas.offsetLeft;
|
|
coord.y = mouse_y - canvas.offsetTop;
|
|
}
|
|
|
|
function is_it_in_the_circle() {
|
|
var current_radius = Math.sqrt(Math.pow(coord.x - x_orig, 2) + Math.pow(coord.y - y_orig, 2));
|
|
if (radius >= current_radius) return true
|
|
else return false
|
|
}
|
|
|
|
|
|
function startDrawing(event) {
|
|
paint = true;
|
|
getPosition(event);
|
|
if (is_it_in_the_circle()) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
background();
|
|
joystick(coord.x, coord.y);
|
|
Draw();
|
|
}
|
|
}
|
|
|
|
|
|
function stopDrawing() {
|
|
paint = false;
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
background();
|
|
joystick(width / 2, height / 3);
|
|
}
|
|
|
|
function Draw(event) {
|
|
|
|
if (paint) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
background();
|
|
var angle_in_degrees,x, y, speed;
|
|
var angle = Math.atan2((coord.y - y_orig), (coord.x - x_orig));
|
|
|
|
if (Math.sign(angle) == -1) {
|
|
angle_in_degrees = Math.round(-angle * 180 / Math.PI);
|
|
}
|
|
else {
|
|
angle_in_degrees =Math.round( 360 - angle * 180 / Math.PI);
|
|
}
|
|
|
|
|
|
if (is_it_in_the_circle()) {
|
|
joystick(coord.x, coord.y);
|
|
x = coord.x;
|
|
y = coord.y;
|
|
}
|
|
else {
|
|
x = radius * Math.cos(angle) + x_orig;
|
|
y = radius * Math.sin(angle) + y_orig;
|
|
joystick(x, y);
|
|
}
|
|
|
|
|
|
getPosition(event);
|
|
|
|
var speed = Math.round(100 * Math.sqrt(Math.pow(x - x_orig, 2) + Math.pow(y - y_orig, 2)) / radius);
|
|
|
|
var x_relative = Math.round(x - x_orig);
|
|
var y_relative = Math.round(y - y_orig);
|
|
|
|
send( x_relative,y_relative,speed,angle_in_degrees);
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|