pandaman64/controller.html

## controller.html
<html>
    <head>
        <script>
            window.addEventListener("load", function(){
                let field = document.getElementById("field");
                let controller = document.getElementById("controller");
                function run(x, y) {
                    controller.setAttribute("cx", new String(x));
                    controller.setAttribute("cy", new String(y));
                    x = (x - 100) * 100;
                    y = (y - 100) * 100;
                    let magnitude = Math.hypot(x, y);
                    var data;
                    if (magnitude == 0) {
                        data = {
                            "SpeedL": 0,
                            "SpeedR": 0,
                        };
                    } else {
                        let angle = -Math.atan2(y, x);
                        data = {
                            "SpeedL": magnitude * Math.cos(angle / 2),
                            "SpeedR": magnitude * Math.sin(angle / 2),
                        };
                    }
                    console.log(data);
                    let xhr = new XMLHttpRequest();
                    xhr.open("POST", "/cart");
                    xhr.setRequestHeader("Content-Type", "application/json");
                    xhr.onload = function() {
                        console.log(xhr.status);
                    };
                    xhr.send(JSON.stringify(data));
                }
                field.addEventListener("mousemove", function(ev) {
                    var cx, cy;
                    if (ev.buttons & 1) {
                        let rect = ev.target.getBoundingClientRect();
                        cx = ev.pageX - rect.left;
                        cy = ev.pageY - rect.top;
                    } else {
                        cx = 100;
                        cy = 100;
                    }
                    run(cx, cy);
                });
                field.addEventListener("mousedown", function(ev) {
                    var cx, cy;
                    if (ev.buttons & 1) {
                        let rect = ev.target.getBoundingClientRect();
                        cx = ev.pageX - rect.left;
                        cy = ev.pageY - rect.top;
                    } else {
                        cx = 100;
                        cy = 100;
                    }
                    run(cx, cy);
                });
            });
        </script>
    </head>
    <body>
        <svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
            <circle cx="100" cy="100" r="100" fill="white" stroke="black" stroke-width="5" id="field"></circle>
            <circle cx="100" cy="100" r="5" fill="red" id="controller"></circle>
        </svg>
    </body>
</html>
	<html>
	<head>
	<script>
	window.addEventListener("load", function(){
	let field = document.getElementById("field");
	let controller = document.getElementById("controller");
	function run(x, y) {
	controller.setAttribute("cx", new String(x));
	controller.setAttribute("cy", new String(y));
	x = (x - 100) * 100;
	y = (y - 100) * 100;
	let magnitude = Math.hypot(x, y);
	var data;
	if (magnitude == 0) {
	data = {
	"SpeedL": 0,
	"SpeedR": 0,
	};
	} else {
	let angle = -Math.atan2(y, x);
	data = {
	"SpeedL": magnitude * Math.cos(angle / 2),
	"SpeedR": magnitude * Math.sin(angle / 2),
	};
	}
	console.log(data);
	let xhr = new XMLHttpRequest();
	xhr.open("POST", "/cart");
	xhr.setRequestHeader("Content-Type", "application/json");
	xhr.onload = function() {
	console.log(xhr.status);
	};
	xhr.send(JSON.stringify(data));
	}
	field.addEventListener("mousemove", function(ev) {
	var cx, cy;
	if (ev.buttons & 1) {
	let rect = ev.target.getBoundingClientRect();
	cx = ev.pageX - rect.left;
	cy = ev.pageY - rect.top;
	} else {
	cx = 100;
	cy = 100;
	}
	run(cx, cy);
	});
	field.addEventListener("mousedown", function(ev) {
	var cx, cy;
	if (ev.buttons & 1) {
	let rect = ev.target.getBoundingClientRect();
	cx = ev.pageX - rect.left;
	cy = ev.pageY - rect.top;
	} else {
	cx = 100;
	cy = 100;
	}
	run(cx, cy);
	});
	});
	</script>
	</head>
	<body>
	<svg viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
	<circle cx="100" cy="100" r="100" fill="white" stroke="black" stroke-width="5" id="field"></circle>
	<circle cx="100" cy="100" r="5" fill="red" id="controller"></circle>
	</svg>
	</body>
	</html>