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

11 months ago
<!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>