Skip to content
Snippets Groups Projects
Commit 30275c18 authored by Giovanni Caruso's avatar Giovanni Caruso
Browse files

Add animation palette wheel

parent 22264195
No related branches found
No related tags found
No related merge requests found
......@@ -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>
......
......@@ -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;
}
......@@ -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) => {
......
......@@ -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")
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment