From bc8a4dd1c44f5dd5326817374e74e496ed0c6773 Mon Sep 17 00:00:00 2001 From: RenatZubakin Date: Fri, 24 Dec 2021 14:15:58 +0500 Subject: [PATCH] =?UTF-8?q?=D0=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/drawer.mjs | 2 +- client/picker.mjs | 67 +++++++++++++++------------------ client/timeout.mjs | 2 +- server.mjs | 92 ++++++++++++++++++++++++++++++---------------- 4 files changed, 91 insertions(+), 72 deletions(-) diff --git a/client/drawer.mjs b/client/drawer.mjs index ae78daa..3a0033a 100644 --- a/client/drawer.mjs +++ b/client/drawer.mjs @@ -31,4 +31,4 @@ canvas.addEventListener("click", e => { window.drawer = drawer; -export default drawer; +export default drawer; \ No newline at end of file diff --git a/client/picker.mjs b/client/picker.mjs index 6a49c82..7d7aeb5 100644 --- a/client/picker.mjs +++ b/client/picker.mjs @@ -1,61 +1,52 @@ const setAttributes = (element, object) => { for (const [key, value] of Object.entries(object)) { - element.setAttribute(key, value); + element.setAttribute(key, value); } }; const drawPalette = async () => { - const colors = hardcodedColors; + const response = await fetch('/api/colors', {method: "GET"}); + const json = await response.json(); + const colors = json.colors; pickedColor = colors[0]; const palette = document.querySelector("#palette"); const fragment = document.createDocumentFragment(); for (const color of colors) { - const label = document.createElement("label"); - label.setAttribute("class", "palette__color"); - const input = document.createElement("input"); - setAttributes(input, { - class: "palette__checkbox", - type: "radio", - name: "color", - value: color - }); - if (color === pickedColor) { - input.setAttribute("checked", ""); - } - input.addEventListener("input", e => { - pickedColor = e.target.value; - }); - const span = document.createElement("span"); - setAttributes(span, { - class: "palette__name", - style: `background-color: ${color}` - }); - label.appendChild(input); - label.appendChild(span); - fragment.appendChild(label); + const label = document.createElement("label"); + label.setAttribute("class", "palette__color"); + const input = document.createElement("input"); + setAttributes(input, { + class: "palette__checkbox", + type: "radio", + name: "color", + value: color + }); + if (color === pickedColor) { + input.setAttribute("checked", ""); + } + input.addEventListener("input", e => { + pickedColor = e.target.value; + }); + const span = document.createElement("span"); + setAttributes(span, { + class: "palette__name", + style: `background-color: ${color}` + }); + label.appendChild(input); + label.appendChild(span); + fragment.appendChild(label); } palette.appendChild(fragment); }; -const hardcodedColors = [ - "#140c1c", - "#30346d", - "#854c30", - "#d04648", - "#597dce", - "#8595a1", - "#d2aa99", - "#dad45e", -]; - let pickedColor = null; drawPalette().catch(console.error); const picker = { get color() { - return pickedColor; + return pickedColor; } }; -export default picker; +export default picker; \ No newline at end of file diff --git a/client/timeout.mjs b/client/timeout.mjs index 24982cc..ef8663a 100644 --- a/client/timeout.mjs +++ b/client/timeout.mjs @@ -24,4 +24,4 @@ window.setInterval(() => { } }, 1000); -export default timeout; +export default timeout; \ No newline at end of file diff --git a/server.mjs b/server.mjs index 02a05b5..1e0f258 100644 --- a/server.mjs +++ b/server.mjs @@ -1,62 +1,90 @@ import * as path from "path"; import express from "express"; import WebSocket from "ws"; +import bodyParser from "body-parser"; const port = process.env.PORT || 5000; - +const connections = new WeakMap(); const apiKeys = new Set([ - "4a83051d-aad4-483e-8fc8-693273d15dc7", - "c08c9038-693d-4669-98cd-9f0dd5ef06bf", - "4b1545c4-4a70-4727-9ea1-152ed4c84ae2", - "4a226908-aa3e-4a34-a57d-1f3d1f6cba84", + "4a83051d-aad4-483e-8fc8-693273d15dc7", + "c08c9038-693d-4669-98cd-9f0dd5ef06bf", + "4b1545c4-4a70-4727-9ea1-152ed4c84ae2", + "4a226908-aa3e-4a34-a57d-1f3d1f6cba84", + "Макар, дай 100 за JS" ]); const colors = [ - "#140c1c", - "#442434", - "#30346d", - "#4e4a4e", - "#854c30", - "#346524", - "#d04648", - "#757161", - "#597dce", - "#d27d2c", - "#8595a1", - "#6daa2c", - "#d2aa99", - "#6dc2ca", - "#dad45e", - "#deeed6", + "#140c1c", + "#442434", + "#30346d", + "#4e4a4e", + "#854c30", + "#346524", + "#d04648", + "#757161", + "#597dce", + "#d27d2c", + "#8595a1", + "#6daa2c", + "#d2aa99", + "#6dc2ca", + "#dad45e", + "#deeed6", ]; const size = 256; // place(x, y) := place[x + y * size] const place = Array(size * size).fill(null); for (const [colorIndex, colorValue] of colors.entries()) { - for (let dx = 0; dx < size; dx++) { - place[dx + colorIndex * size] = colorValue; - } + for (let dx = 0; dx < size; dx++) { + place[dx + colorIndex * size] = colorValue; + } } const app = express(); +app.use(bodyParser.json()); app.use(express.static(path.join(process.cwd(), "client"))); +app.get("/api/colors", (req, res) => { + res.json({colors: colors}); +}); + app.get("/*", (_, res) => { - res.send("Place(holder)"); + res.send("Place(holder)"); }); const server = app.listen(port); const wss = new WebSocket.Server({ - noServer: true, + noServer: true, }); -server.on("upgrade", (req, socket, head) => { - const url = new URL(req.url, req.headers.origin); - console.log(url); - wss.handleUpgrade(req, socket, head, (ws) => { - wss.emit("connection", ws, req); - }); +wss.on('connection', function connection(ws) { + ws.on('message', function incoming(message) { + console.log('received: %s', message); + const data = JSON.parse(message).payload; + place[data.x + data.y * size] = data.color; + wss.clients.forEach(function each(client) { + if (client.readyState === WebSocket.OPEN) { + client.send(JSON.stringify({type: 'putPoint', payload: place})); + } + }); + }); + + ws.send(JSON.stringify({type: 'paint', payload: place})); }); + +server.on("upgrade", (req, socket, head) => { + const url = new URL(req.url, req.headers.origin); + console.log(url); + let apiKey = url.searchParams.get('apiKey'); + if (apiKeys.has(apiKey)) { + wss.handleUpgrade(req, socket, head, (ws) => { + connections.set(ws, apiKey); + wss.emit("connection", ws, req); + }); + } else { + socket.destroy() + } +}); \ No newline at end of file