|
|
|
|
<!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>
|
|
|
|
|
<button id="submit">Send</button>
|
|
|
|
|
<button id="erase">Cancel</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<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>
|
