Ланских Михаил

README.md

@@ -3,7 +3,7 @@
 В задании будем делать свою версию проекта [Place](<https://en.wikipedia.org/wiki/Place_(Reddit)>) размером 256x256
 Клиентский код лежит в папке `/client`, серверный — в файле `server.mjs`
 
-Поставь зависимости и запусти сервер. Для этого перейди в директорию задачи и выполни команду `npm install`. После установки зависимостей, выполни команду `npm run dev`. После запуска, перейди по адресу [localhost:5000](http://localhost:5000)
+Поставь зависимости и запусти сервер. Для этого перейди в директорию задачи и выполни команду `npm install`. После установки зависимостей, выполни команду `npm run dev`. После запуска, перейди по адресу [localhost:4000](http://localhost:4000)
 
 1. Сейчас цвета палитры захардкожены в файле `/client/picker.mjs`, cделай так, чтобы цвета запрашивались с сервера в функции `drawPalette`
 

client/index.mjs

@@ -2,23 +2,30 @@ 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");
+document.querySelector('#start').addEventListener('submit', e => {
+    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 onFieldRecieved = 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);
-  };
+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)
+        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 connect = apiKey =>
+    new WebSocket(`${location.origin.replace(/^http/, "ws")}?apiKey=${apiKey}`);

client/picker.mjs

@@ -1,61 +1,46 @@
 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 drawPalette = async() => {
+    const colors = await fetch('/api/getColors').then(async res => await res.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;
+export default picker;