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.

64 lines
1.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Draw draw draw</title>
<script src="wss.js"></script>
<script src="draw.js" defer></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Draw <span id="theme"></span></h1>
<div id="svg-container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="svgElement"
x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" enable-background="new 0 0 500 500"
xml:space="preserve"></svg>
</div>
<button id="submit">Send</button>
<button id="erase">Cancel</button>
<script>
const theme = document.querySelector("#theme");
const erase = document.querySelector("#erase");
const deletePath = () => {
for (const path of document.querySelectorAll("#svgElement path")) {
path.remove();
}
};
erase.addEventListener("click", () => deletePath());
const socket = new ReconnectingWebSocket(
location.origin.replace(/^http/, "ws") + "{{address}}"
);
socket.onmessage = (event) => {
let message;
try {
message = JSON.parse(event.data);
} catch (e) { }
if (message?.type == "theme") {
theme.innerHTML = message.theme;
}
};
document.querySelector("#submit").addEventListener("click", (event) => {
const paths = Array.from(document.querySelectorAll("#svgElement path")).reduce(
(accumulator, current) => {
return (accumulator += current.getAttribute("d"));
},
""
);
if (paths == "") return;
socket.send(JSON.stringify({ type: "drawings", paths: paths }));
deletePath();
});
</script>
</body>
</html>