Add animation palette wheel

public/index.html

@@ -76,11 +76,15 @@
             </div>
           </div>
         </div>
-        <div id="palette" class="properties">
+        <div id="palette" class="properties" style="padding-top: 150px">
           <div class="palette-selector">
+            <div class="wheel-header">
+              <span class="close">&times</span>
+              <h2>Select a colour from the palette</h2>
+            </div>
             <svg
               id="wheel"
-              viewBox="0 0 100 100"
+              viewBox="0 10 100 100"
               xmlns="http://www.w3.org/2000/svg"
               xmlns:xlink="http://www.w3.org/1999/xlink"
             >
@@ -90,61 +94,72 @@
                   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 class="wheelPiece" xlink:href="#piePiece" fill="#329739" />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(30,50,50)"
-                fill="#43a1cd"
+                fill="#639b47"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(60,50,50)"
-                fill="#639b47"
+                fill="#9ac147"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(90,50,50)"
-                fill="#9ac147"
+                fill="#A9AA39"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(120,50,50)"
                 fill="#e1e23b"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(150,50,50)"
                 fill="#f7941e"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(180,50,50)"
                 fill="#ba3e2e"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(210,50,50)"
                 fill="#9a1d34"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(240,50,50)"
                 fill="#662a6c"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(270,50,50)"
                 fill="#272b66"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(300,50,50)"
                 fill="#2d559f"
               />
               <use
+                class="wheelPiece"
                 xlink:href="#piePiece"
                 transform="rotate(330,50,50)"
-                fill="#A9AA39"
+                fill="#43a1cd"
               />
             </svg>
           </div>

public/styles.css

@@ -240,3 +240,22 @@ button.selected {
   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;
 }
+
+.wheelPiece {
+  opacity: 0.8;
+}
+
+.wheelPiece:hover {
+  opacity: 1;
+}
+
+.wheel-header {
+  padding: 2px 16px;
+  background-color: #2f2f2f;
+  color: white;
+  text-align: center;
+}
+
+.properties:palette {
+  padding-top: 50px;
+}

src/app.js

@@ -72,8 +72,10 @@ HTML.penButton.addEventListener("click", () => {
   }
 })
 
-HTML.span.addEventListener("click", () => {
-  HTML.properties.style.display = "none"
+HTML.span.forEach((element) => {
+  element.addEventListener("click", () => {
+    element.parentNode.parentNode.parentNode.style.display = "none"
+  })
 })
 
 window.addEventListener("click", (event) => {

src/elements.js

@@ -16,7 +16,7 @@ export const connectedRoomInfoContainer = document.getElementById(
 )
 
 export const properties = document.getElementById("pen-properties")
-export const span = document.getElementsByClassName("close")[0]
+export const span = document.querySelectorAll(".close")
 export const palette = document.getElementById("palette")
 export const rectangle = document.getElementById("rectangle")
 export const wheel = document.getElementById("wheel")