Fixed style

public/index.html

@@ -86,7 +86,7 @@
             </div>
             <svg
               id="wheel"
-              viewBox="0 10 100 100"
+              viewBox="0 10 100 70"
               xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink"
             >
@@ -166,6 +166,12 @@
                 />
               </a>
             </svg>
+            <div id="others">
+              <div id="other-palette">
+                Others
+              </div>
+              <input id="other-colours" type="color" value="black" />
+            </div>
           </div>
         </div>
         <button id="eraser-tool"><i class="fa fa-eraser"></i></button>

public/styles.css

@@ -255,3 +255,10 @@ button.selected {
   color: white;
   text-align: center;
 }
+
+#others {
+  padding-top: 2%;
+  display: flex;
+  align-items: center;
+  padding-left: 40%;
+}

src/app.js

@@ -64,7 +64,7 @@ const pathIDsByPointerID = new Map()
 
 HTML.penButton.addEventListener("click", () => {
   if (currentTool == tools.PEN) {
-    HTML.properties.style.display = "block"
+    showElement(HTML.penProperties)
   } else {
     currentTool = tools.PEN
     HTML.penButton.classList.add("selected")
@@ -72,23 +72,23 @@ HTML.penButton.addEventListener("click", () => {
   }
 })
 
-HTML.span.forEach((element) => {
+HTML.closeButton.forEach((element) => {
   element.addEventListener("click", () => {
-    element.parentNode.parentNode.parentNode.style.display = "none"
+    hideElement(element.parentNode.parentNode.parentNode)
   })
 })
 
 window.addEventListener("click", (event) => {
-  if (event.target == HTML.properties) {
-    HTML.properties.style.display = "none"
+  if (event.target == HTML.penProperties) {
+    hideElement(HTML.penProperties)
   } else if (event.target == HTML.palette) {
-    HTML.palette.style.display = "none"
-    HTML.properties.style.display = "none"
+    hideElement(HTML.palette)
+    hideElement(HTML.penProperties)
   }
 })
 
 HTML.rectangle.addEventListener("click", () => {
-  HTML.palette.style.display = "block"
+  showElement(HTML.palette)
 })
 
 var svg = HTML.wheel.children
@@ -97,10 +97,24 @@ for (var i = 1; i < svg.length; i++) {
     var paletteColour = event.target.getAttribute("fill")
     HTML.rectangle.style.backgroundColor = paletteColour
     canvas.setStrokeColour(paletteColour)
-    HTML.palette.style.display = "none"
+    hideElement(HTML.palette)
   })
 }
 
+function showElement(element) {
+  element.style.display = "block"
+}
+
+function hideElement(element) {
+  element.style.display = "none"
+}
+
+HTML.picker.addEventListener("change", () => {
+  var paletteColour = event.target.value
+  HTML.rectangle.style.backgroundColor = paletteColour
+  canvas.setStrokeColour(paletteColour)
+})
+
 HTML.eraserButton.addEventListener("click", () => {
   currentTool = tools.ERASER
   HTML.penButton.classList.remove("selected")

src/elements.js

@@ -15,8 +15,9 @@ export const connectedRoomInfoContainer = document.getElementById(
   "connected-room-info",
 )
 
-export const properties = document.getElementById("pen-properties")
-export const span = document.querySelectorAll(".close")
+export const penProperties = document.getElementById("pen-properties")
+export const closeButton = document.querySelectorAll(".close")
 export const palette = document.getElementById("palette")
 export const rectangle = document.getElementById("rectangle")
 export const wheel = document.getElementById("wheel")
+export const picker = document.getElementById("other-colours")

src/room.js

@@ -23,14 +23,14 @@ class Room extends EventTarget {
     this._y.destroy()
   }
 
-  addPath([x, y, w, z]) {
+  addPath([x, y, w, colour]) {
     const id = uuidv4()
-    this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w, z]])
+    this._y.share.strokeAdd.set(id, Y.Array).push([[x, y, w, colour]])
     return id
   }
 
-  extendPath(id, [x, y, w, z]) {
-    this._y.share.strokeAdd.get(id).push([[x, y, w, z]])
+  extendPath(id, [x, y, w, colour]) {
+    this._y.share.strokeAdd.get(id).push([[x, y, w, colour]])
   }
 
   getPaths() {