From e7dba5244765bce466dce435f062a6e0ecec34b7 Mon Sep 17 00:00:00 2001
From: Ural <gizzatullinu@gmail.com>
Date: Fri, 24 Dec 2021 12:05:45 +0500
Subject: [PATCH 1/2] Add files via upload

---
 index.mjs  | 40 +++++++++++++++++++++++++++++++++
 picker.mjs | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 server.mjs | 62 +++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 167 insertions(+)
 create mode 100644 index.mjs
 create mode 100644 picker.mjs

diff --git a/index.mjs b/index.mjs
new file mode 100644
index 0000000..8241ebc
--- /dev/null
+++ b/index.mjs
@@ -0,0 +1,40 @@
+import timeout from "./timeout.mjs";
+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");
+});
+
+
+/* --4-- */
+const onFieldRecieved = (message) =>{
+  const result = JSON.parse(message?.['data']);
+
+  if (result['type'] == 'place')
+    drawer.putArray(result['payload']['place']);
+}
+
+
+const main = apiKey => {
+  const ws = connect(apiKey);
+  ws.addEventListener("message", onFieldRecieved);
+
+  timeout.next = new Date();
+  drawer.onClick = (x, y) => {  
+    drawer.put(x, y, picker.color);
+    //отправляем на сервер 
+    /* --5-- */ 
+    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);
+};
diff --git a/picker.mjs b/picker.mjs
new file mode 100644
index 0000000..fdb4800
--- /dev/null
+++ b/picker.mjs
@@ -0,0 +1,65 @@
+const setAttributes = (element, object) => {
+  for (const [key, value] of Object.entries(object)) {
+    element.setAttribute(key, value);
+  }
+};
+
+const drawPalette = async () => {
+  const reply = await fetch("/api/getColors");
+  const colors = await reply.json();
+
+  pickedColor = colors[0];
+  /* --1-- */
+  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);
+  }
+  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;
+  }
+};
+
+export default picker;
diff --git a/server.mjs b/server.mjs
index 02a05b5..ffe34b3 100644
--- a/server.mjs
+++ b/server.mjs
@@ -11,6 +11,7 @@ const apiKeys = new Set([
   "4a226908-aa3e-4a34-a57d-1f3d1f6cba84",
 ]);
 
+
 const colors = [
   "#140c1c",
   "#442434",
@@ -43,6 +44,11 @@ const app = express();
 
 app.use(express.static(path.join(process.cwd(), "client")));
 
+/* --1-- */
+app.get("/api/getColors", (_, res) => {
+  res.json(colors);
+});
+
 app.get("/*", (_, res) => {
   res.send("Place(holder)");
 });
@@ -60,3 +66,59 @@ server.on("upgrade", (req, socket, head) => {
     wss.emit("connection", ws, req);
   });
 });
+
+/* --2-- */
+/*
+wss.on('connection', function connection(ws) {
+  ws.on('message', function message(data) {
+    console.log('received: %s', data);
+    const parsedData = JSON.parse(data);
+    switch (parsedData.type) {
+      case ('click'):
+        insertIntoSpace(parsedData.payload)
+    }
+  });
+  sendField(ws);
+}); 
+*/
+
+
+/* --7-- */           
+const insertIntoPlace = (payload) => {
+  place[size * payload.y + payload.x] = payload.color;
+
+  wss.clients.forEach(function each(client) {
+    if (client.readyState === WebSocket.OPEN) {
+      sendField(client);
+    }
+  });
+}
+
+const sendField = (ws) => {
+  const result = {
+    type: "place", // тип сообщения
+    payload: {
+      place: place,
+    }
+  }
+
+  ws.send(JSON.stringify(result));
+}
+
+/* --3-- */
+/* --8-- */
+wss.on('connection', function connection(ws) {
+  ws.on('message', function message(data) {
+    //перехватываем на сервере
+    const parsedData = JSON.parse(data);
+    console.log('received: %s', parsedData);
+/* --6-- */
+    switch (parsedData['type']) {
+      case ("click"):
+        insertIntoPlace(parsedData['payload'])
+    }
+  });
+
+  sendField(ws);
+});
+

From 5b5fc6f5c9348db7ca2f76603a44926428add5fe Mon Sep 17 00:00:00 2001
From: Ural <gizzatullinu@gmail.com>
Date: Fri, 24 Dec 2021 13:30:09 +0500
Subject: [PATCH 2/2] 1-10

---
 server.mjs | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/server.mjs b/server.mjs
index ffe34b3..415edb5 100644
--- a/server.mjs
+++ b/server.mjs
@@ -68,19 +68,19 @@ server.on("upgrade", (req, socket, head) => {
 });
 
 /* --2-- */
-/*
-wss.on('connection', function connection(ws) {
-  ws.on('message', function message(data) {
-    console.log('received: %s', data);
-    const parsedData = JSON.parse(data);
-    switch (parsedData.type) {
-      case ('click'):
-        insertIntoSpace(parsedData.payload)
-    }
+/* --10-- */
+server.on("upgrade", (req, socket, head) => {
+  const url = new URL(req.url, req.headers.origin);
+  const userApiKey = url.searchParams.get('apiKey');
+  if (!apiKeys.has(userApiKey)) {
+    req.destroy(new Error('Incorrect API key'));
+    return;
+  }
+
+  wss.handleUpgrade(req, socket, head, (ws) => {
+    wss.emit('connection', ws, req);
   });
-  sendField(ws);
-}); 
-*/
+});
 
 
 /* --7-- */