From 6f7140b87d06fb5c606c744df8feb0196bce821f Mon Sep 17 00:00:00 2001
From: FReenen <mail@finnvanreenen.nl>
Date: Tue, 5 Sep 2023 21:52:59 +0200
Subject: [PATCH] inital commit

---
 index.html | 183 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 recever.py |  15 +++++
 2 files changed, 198 insertions(+)
 create mode 100644 index.html
 create mode 100644 recever.py
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c7e7257
--- /dev/null
+++ b/index.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>
+        Mousebot
+    </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>
+    <canvas id="canvas" name="game"></canvas>
+    <div id="clientId"></div>
+    <script>
+	
+	var clientId = Math.floor(Math.random() * (2**16)).toString();
+	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;
+
+        var connection = new WebSocket('ws://' + "10.254.0.1" + ':8080/', ['mbcRcRf']);
+        connection.onopen = function () {
+            connection.send('Connect ' + new Date());
+        };
+        connection.onerror = function (error) {
+            console.log('WebSocket Error ', error);
+            alert('WebSocket Error ', error);
+        };
+        connection.onmessage = function (e) {
+            console.log('Server: ', e.data);
+        };
+
+        function send(x,y,speed,angle){
+            var data = clientId + "," + x.toString() + "," + y.toString(); //{"x":x,"y":y,"speed":speed,"angle":angle};
+            //data = JSON.stringify(data);
+            console.log(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>
diff --git a/recever.py b/recever.py
new file mode 100644
index 0000000..4119fb9
--- /dev/null
+++ b/recever.py
@@ -0,0 +1,15 @@
+#!/usr/bin/env python
+
+import asyncio
+from websockets.server import serve
+
+async def echo(ws, path):
+    async for message in ws:
+        print(message)
+
+async def main():
+    async with serve(echo, "0.0.0.0", 8080):
+        await asyncio.Future()
+
+asyncio.run(main())
+
