Горохов Денис

client/drawer.mjs

@@ -6,27 +6,27 @@ const scale = 4;
 let callback = () => void 0;
 
 const drawer = {
-  put(x, y, color) {
-    ctx.fillStyle = color || "white";
-    ctx.fillRect(x * scale, y * scale, scale, scale);
-    ctx.fillStyle = "white";
-  },
+    put(x, y, color) {
+        ctx.fillStyle = color || "white";
+        ctx.fillRect(x * scale, y * scale, scale, scale);
+        ctx.fillStyle = "white";
+    },
 
-  putArray(colors) {
-    for (const [index, color] of colors.entries()) {
-      drawer.put(index % size, Math.floor(index / size), color);
-    }
-  },
+    putArray(colors) {
+        for (const [index, color] of colors.entries()) {
+            drawer.put(index % size, Math.floor(index / size), color);
+        }
+    },
 
-  set onClick(f) {
-    callback = f;
-  }
+    set onClick(f) {
+        callback = f;
+    }
 };
 
 canvas.addEventListener("click", e => {
-  const realX = Math.floor(e.offsetX / scale);
-  const realY = Math.floor(e.offsetY / scale);
-  callback(realX, realY);
+    const realX = Math.floor(e.offsetX / scale);
+    const realY = Math.floor(e.offsetY / scale);
+    callback(realX, realY);
 });
 
 window.drawer = drawer;

client/index.mjs

@@ -3,22 +3,42 @@ 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", res => {
+        const parsedData = JSON.parse(res.data);
+        switch (parsedData.type) {
+            case 'init':
+                drawer.putArray(parsedData.payload);
+                break;
+            case 'click':
+                const cellInfo = parsedData.payload;
+                drawer.put(cellInfo.x, cellInfo.y, cellInfo.color);
+                break;
+            default:
+                console.log('Unknown message type');
+        }
+    });
 
-  timeout.next = new Date();
-  drawer.onClick = (x, y) => {
-    drawer.put(x, y, picker.color);
-  };
+    timeout.next = new Date();
+    drawer.onClick = (x, y) => {
+        ws.send(JSON.stringify({
+            type: 'click',
+            payload: {
+                x,
+                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

@@ -1,61 +1,51 @@
 const setAttributes = (element, object) => {
-  for (const [key, value] of Object.entries(object)) {
-    element.setAttribute(key, value);
-  }
+    for (const [key, value] of Object.entries(object)) {
+        element.setAttribute(key, value);
+    }
 };
 
 const drawPalette = async () => {
-  const colors = hardcodedColors;
-  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", "");
+    const response = await fetch('/api/colors');
+    const colors = await response.json();
+    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);
     }
-    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);
+    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;
-  }
+    get color() {
+        return pickedColor;
+    }
 };
 
 export default picker;

client/timeout.mjs

@@ -1,27 +1,27 @@
 let nextRefresh = new Date();
 
 const timeout = {
-  set next(utcDate) {
-    if (utcDate instanceof Date) {
-      nextRefresh = utcDate;
+    set next(utcDate) {
+        if (utcDate instanceof Date) {
+            nextRefresh = utcDate;
+        }
+        if (typeof utcDate === "number" || typeof utcDate === "string") {
+            nextRefresh = new Date(utcDate);
+        }
     }
-    if (typeof utcDate === "number" || typeof utcDate === "string") {
-      nextRefresh = new Date(utcDate);
-    }
-  }
 };
 
 const element = document.querySelector("#timer");
 window.setInterval(() => {
-  const differenceInSeconds = Math.floor(
-    (nextRefresh.valueOf() - Date.now()) / 1000
-  );
-  if (differenceInSeconds > 0) {
-    const timespan = new Date(0, 0, 0, 0, 0, differenceInSeconds);
-    element.innerHTML = timespan.toLocaleTimeString();
-  } else {
-    element.innerHTML = "";
-  }
+    const differenceInSeconds = Math.floor(
+        (nextRefresh.valueOf() - Date.now()) / 1000
+    );
+    if (differenceInSeconds > 0) {
+        const timespan = new Date(0, 0, 0, 0, 0, differenceInSeconds);
+        element.innerHTML = timespan.toLocaleTimeString();
+    } else {
+        element.innerHTML = "";
+    }
 }, 1000);
 
 export default timeout;