From ceaacd507c0208dda88772fc8103793acad4a791 Mon Sep 17 00:00:00 2001
From: debebantur <stepan.filippov@yandex.ru>
Date: Thu, 23 Dec 2021 00:39:28 +0500
Subject: [PATCH 1/3] 1

---
 client/picker.mjs | 15 +++------------
 server.mjs        |  4 ++++
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/client/picker.mjs b/client/picker.mjs
index 6a49c82..14cafd7 100644
--- a/client/picker.mjs
+++ b/client/picker.mjs
@@ -5,7 +5,9 @@ const setAttributes = (element, object) => {
 };
 
 const drawPalette = async () => {
-  const colors = hardcodedColors;
+  const response = await fetch("/api/colors");
+  const colors = await response.json();
+
   pickedColor = colors[0];
   const palette = document.querySelector("#palette");
   const fragment = document.createDocumentFragment();
@@ -37,17 +39,6 @@ const drawPalette = async () => {
   palette.appendChild(fragment);
 };
 
-const hardcodedColors = [
-  "#140c1c",
-  "#30346d",
-  "#854c30",
-  "#d04648",
-  "#597dce",
-  "#8595a1",
-  "#d2aa99",
-  "#dad45e",
-];
-
 let pickedColor = null;
 
 drawPalette().catch(console.error);
diff --git a/server.mjs b/server.mjs
index 02a05b5..7225d42 100644
--- a/server.mjs
+++ b/server.mjs
@@ -43,6 +43,10 @@ const app = express();
 
 app.use(express.static(path.join(process.cwd(), "client")));
 
+app.get("/api/colors", (_, res) => {
+  res.json(colors);
+});
+
 app.get("/*", (_, res) => {
   res.send("Place(holder)");
 });

From 5f22f27ed262efb678deb4ed43ee1804fd585682 Mon Sep 17 00:00:00 2001
From: debebantur <stepan.filippov@yandex.ru>
Date: Thu, 23 Dec 2021 22:52:36 +0500
Subject: [PATCH 2/3] 10

---
 client/index.mjs | 17 ++++++++++++++---
 server.mjs       | 38 +++++++++++++++++++++++++++++++++++---
 2 files changed, 49 insertions(+), 6 deletions(-)

diff --git a/client/index.mjs b/client/index.mjs
index 3836cb0..00c73a7 100644
--- a/client/index.mjs
+++ b/client/index.mjs
@@ -10,11 +10,21 @@ document.querySelector("#start").addEventListener("submit", e => {
 
 const main = apiKey => {
   const ws = connect(apiKey);
-  ws.addEventListener("message", console.log);
+  ws.addEventListener("message", mes => {
+    const data = JSON.parse(mes?.data)
+    if (data.type === 'place')
+      drawer.putArray(data.payload['place']);
+    if (data.type === 'click')
+    drawer.put(data.payload.x, data.payload.y, data.payload.color);
+    if (data.type === 'error')
+    document.querySelector(".container").classList.remove("ready");
+  });
 
   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}
+    }));
   };
 };
 
@@ -22,3 +32,4 @@ const connect = apiKey => {
   const url = `${location.origin.replace(/^http/, "ws")}?apiKey=${apiKey}`;
   return new WebSocket(url);
 };
+
diff --git a/server.mjs b/server.mjs
index 7225d42..9a0f8da 100644
--- a/server.mjs
+++ b/server.mjs
@@ -59,8 +59,40 @@ const wss = new WebSocket.Server({
 
 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);
+    let apiKey = url.searchParams.get('apiKey');
+    console.log(apiKey);
+    console.log(apiKeys.has(apiKey))
+    wss.handleUpgrade(req, socket, head, (ws) => {
+        if (apiKeys.has(apiKey)) {
+          console.log('ok');
+            //keysMap.set(ws, apiKey);
+            wss.emit("connection", ws, req);
+        } else{
+          ws.send(JSON.stringify({type: "error"}));
+          socket.destroy(new Error());
+        } 
+    });
+});
+
+wss.on('connection', function connection(ws) {
+  ws.on('message', function message(mes) {
+    let data = JSON.parse(mes);
+
+    if(data['type'] === "click") {
+      let {x, y, color} = data.payload;
+      if(validated(x, y, color)){
+      place[x + y * size] = color;
+      wss.clients.forEach(client => {
+        if (client.readyState === WebSocket.OPEN) {
+          client.send(mes)
+        }
+      });}
+    }
   });
+
+  ws.send(JSON.stringify({type: "place", payload: {place: place,}}));
 });
+
+function validated(x, y, color){
+  return 0<=x && x<=256 && 0<=y && y<=256 && colors.indexOf(color)+1;
+}
\ No newline at end of file

From 0dfde7a670242c14790bd0153e5eb5101d2530e2 Mon Sep 17 00:00:00 2001
From: debebantur <stepan.filippov@yandex.ru>
Date: Thu, 23 Dec 2021 23:37:14 +0500
Subject: [PATCH 3/3] add my app

---
 server.mjs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/server.mjs b/server.mjs
index 9a0f8da..1a7dfe1 100644
--- a/server.mjs
+++ b/server.mjs
@@ -13,6 +13,7 @@ const apiKeys = new Set([
 
 const colors = [
   "#140c1c",
+  "#ffffff",
   "#442434",
   "#30346d",
   "#4e4a4e",