а

client/drawer.mjs

@@ -31,4 +31,4 @@ canvas.addEventListener("click", e => {
 
 window.drawer = drawer;
 
-export default drawer;
+export default drawer;

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;

client/timeout.mjs

@@ -24,4 +24,4 @@ window.setInterval(() => {
   }
 }, 1000);
 
-export default timeout;
+export default timeout;

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()
+    }
+});