You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.9 KiB
HTML
58 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>TwitchPlaysPlotter</h1>
|
|
|
|
<ul>
|
|
<li><button class="fn-action" data-action="init">init</button></li>
|
|
<li><button class="fn-action" data-action="pen-up">pen-up</button></li>
|
|
<li><button class="fn-action" data-action="pen-down">pen-down</button></li>
|
|
<li><button class="fn-action" data-action="move-up">move-up</button></li>
|
|
<li><button class="fn-action" data-action="move-left">move-left</button></li>
|
|
<li><button class="fn-action" data-action="move-right">move-right</button></li>
|
|
<li><button class="fn-action" data-action="move-down">move-down</button></li>
|
|
|
|
<li>
|
|
<form class="fn-form">
|
|
<input type="text" placeholder="send a direct command">
|
|
<input type="submit" />
|
|
</form>
|
|
</li>
|
|
</ul>
|
|
<script type="text/javascript">
|
|
|
|
async function sendCommand(path, data) {
|
|
try {
|
|
console.log(JSON.stringify(data));
|
|
const response = await fetch("/" + path, {
|
|
method: "POST", // or 'PUT'
|
|
});
|
|
|
|
const result = await response.json();
|
|
console.log("Success:", result);
|
|
} catch (error) {
|
|
console.error("Error:", error);
|
|
}
|
|
}
|
|
|
|
document.querySelector(".fn-form").addEventListener("submit", (e) => {
|
|
e.preventDefault();
|
|
sendCommand("direct?message=" + e.currentTarget.querySelector("input[type='text']").value);
|
|
})
|
|
|
|
document.querySelectorAll(".fn-action").forEach((button) => {
|
|
button.addEventListener("click", (e) => {
|
|
sendCommand(e.currentTarget.getAttribute("data-action"));
|
|
})
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |