Строшков Артем

client/index.mjs

@@ -3,22 +3,29 @@ import drawer from "./drawer.mjs";
 import picker from "./picker.mjs";
 
 document.querySelector("#start").addEventListener("submit", e => {
-  e.preventDefault();
-  main(new FormData(e.currentTarget).get("apiKey"));
-  document.querySelector(".container").classList.add("ready");
+    e.preventDefault();
+    main(new FormData(e.currentTarget).get("apiKey"));
+    document.querySelector(".container").classList.add("ready");
 });
 
 const main = apiKey => {
-  const ws = connect(apiKey);
-  ws.addEventListener("message", console.log);
+    const ws = connect(apiKey);
+    ws.addEventListener("message", message => {
+      const result = JSON.parse(message?.['data']);
+      if (result['type'] === 'place')
+        drawer.putArray(result['payload']['place']);
+      } 
+    );
 
-  timeout.next = new Date();
-  drawer.onClick = (x, y) => {
-    drawer.put(x, y, picker.color);
-  };
+    drawer.onClick = (x, y) => {
+        ws.send(JSON.stringify({
+            type: "click",
+            payload: {x: x, y: y, color: picker.color}
+        }));
+    };
 };
 
 const connect = apiKey => {
-  const url = `${location.origin.replace(/^http/, "ws")}?apiKey=${apiKey}`;
-  return new WebSocket(url);
-};
+    const url = `${location.origin.replace(/^http/, "ws")}?apiKey=${apiKey}`;
+    return new WebSocket(url);
+};

client/picker.mjs

@@ -5,7 +5,9 @@ const setAttributes = (element, object) => {
 };
 
 const drawPalette = async () => {
-  const colors = hardcodedColors;
+  const response = await fetch("/api/getColors");
+  const colors = await response.json();
+
   pickedColor = colors[0];
   const palette = document.querySelector("#palette");
   const fragment = document.createDocumentFragment();
@@ -37,16 +39,6 @@ const drawPalette = async () => {
   palette.appendChild(fragment);
 };
 
-const hardcodedColors = [
-  "#140c1c",
-  "#30346d",
-  "#854c30",
-  "#d04648",
-  "#597dce",
-  "#8595a1",
-  "#d2aa99",
-  "#dad45e",
-];
 
 let pickedColor = null;
 
@@ -58,4 +50,4 @@ const picker = {
   }
 };
 
-export default picker;
+export default picker;

server.mjs

@@ -1,62 +1,107 @@
 import * as path from "path";
 import express from "express";
 import WebSocket from "ws";
+import * as url from "url";
 
 const port = process.env.PORT || 5000;
 
 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",
 ]);
 
 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(express.static(path.join(process.cwd(), "client")));
 
+app.get("/api/getColors", (req, res) => {
+    res.json(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);
-  });
+    const url = new URL(req.url, req.headers.origin);
+    const apiKey = url.searchParams.get('apiKey');
+    if (!apiKeys.has(apiKey)) {
+        socket.destroy();
+        return;
+    }
+
+    wss.handleUpgrade(req, socket, head, (ws) => {
+        wss.emit("connection", ws, req);
+    });
 });
+
+const send = (ws) => {
+    const result = {
+        type: "place",
+        payload: {
+            place: place,
+        }
+    };
+
+    ws.send(JSON.stringify(result));
+};
+
+wss.on('connection', function connection(ws) {
+    ws.on('message', function message(data) {
+        const parsedData = JSON.parse(data);
+        if(parsedData['type'] === "click"){
+                insert(parsedData['payload']);
+        }
+    });
+
+    send(ws);
+});
+
+const insert = (payload) => {
+    const coordinate = size * payload.y + payload.x;
+    if (!colors.includes(payload.color) || place[coordinate] !== null)
+        return;
+
+    place[coordinate] = payload.color;
+    wss.clients.forEach(function each(client) {
+        if (client.readyState === WebSocket.OPEN) {
+            send(client);
+        }
+    });
+};