Implement palette

public/index.html

@@ -68,11 +68,87 @@
               <h2>Pen properties</h2>
             </div>
             <div class="pen-body">
-              <h3>Brush colour</h3>
-              <div class="rectangle"></div>
+              <div id="brush-colour">
+                <h3>Brush colour</h3>
+              </div>
+              &nbsp;
+              <div id="rectangle"></div>
             </div>
           </div>
         </div>
+        <div id="palette" class="properties">
+          <div class="palette-selector">
+            <svg
+              id="wheel"
+              viewBox="0 0 100 100"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+            >
+              <defs>
+                <path
+                  id="piePiece"
+                  d="M 42.2,78.9 46.1,64.4 Q 50,65 53.88,64.48 L 57.7,78.9 Q 50,80 42.2,78.9Z"
+                />
+              </defs>
+              <use xlink:href="#piePiece" fill="#2D8633" />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(30,50,50)"
+                fill="#43a1cd"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(60,50,50)"
+                fill="#639b47"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(90,50,50)"
+                fill="#9ac147"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(120,50,50)"
+                fill="#e1e23b"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(150,50,50)"
+                fill="#f7941e"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(180,50,50)"
+                fill="#ba3e2e"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(210,50,50)"
+                fill="#9a1d34"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(240,50,50)"
+                fill="#662a6c"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(270,50,50)"
+                fill="#272b66"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(300,50,50)"
+                fill="#2d559f"
+              />
+              <use
+                xlink:href="#piePiece"
+                transform="rotate(330,50,50)"
+                fill="#A9AA39"
+              />
+            </svg>
+          </div>
+        </div>
         <button id="eraser-tool"><i class="fa fa-eraser"></i></button>
         <div id="connected-room-info">
           You are connected to a room: <span id="connected-room-id"></span>

public/styles.css

@@ -160,17 +160,17 @@ button.selected {
 }
 
 .properties {
-  display: none; /* Hidden by default */
-  position: fixed; /* Stay in place */
-  z-index: 1; /* Sit on top */
+  display: none;
+  position: fixed;
+  z-index: 1;
   padding-top: 100px;
   left: 0;
   top: 0;
-  width: 100%; /* Full width */
-  height: 100%; /* Full height */
-  overflow: auto; /* Enable scroll if needed */
-  background-color: rgb(0, 0, 0); /* Fallback color */
-  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .pen-contents {
@@ -202,12 +202,14 @@ button.selected {
 
 .pen-header {
   padding: 2px 16px;
-  background-color: #5cb85c;
+  background-color: #2f2f2f;
   color: white;
 }
 
 .pen-body {
   padding: 2px 16px;
+  display: flex;
+  align-items: center;
 }
 
 @keyframes animatetop {
@@ -221,8 +223,20 @@ button.selected {
   }
 }
 
-.rectangle {
-  height: 50px;
-  width: 100px;
-  background-color: #555;
+#rectangle {
+  height: 20px;
+  width: 30px;
+  background-color: blue;
+}
+
+.palette-selector {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 500px;
+  height: 500px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
+  font-family: "Martel", serif;
 }

src/app.js

@@ -82,6 +82,10 @@ window.addEventListener("click", (event) => {
   }
 })
 
+HTML.rectangle.addEventListener("click", () => {
+  HTML.palette.style.display = "block"
+})
+
 HTML.eraserButton.addEventListener("click", () => {
   currentTool = tools.ERASER
   HTML.penButton.classList.remove("selected")

src/elements.js

@@ -17,3 +17,5 @@ export const connectedRoomInfoContainer = document.getElementById(
 
 export const properties = document.getElementById("pen-properties")
 export const span = document.getElementsByClassName("close")[0]
+export const palette = document.getElementById("palette")
+export const rectangle = document.getElementById("rectangle")