Add skeleton template for brush colours

public/index.html

@@ -5,6 +5,10 @@
     <link rel="manifest" href="manifest.json" />
     <link rel="shortcut icon" href="logo.png" />
     <link rel="stylesheet" href="styles.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Martel:300,400&display=swap"
+      rel="stylesheet"
+    />
 
     <link
       rel="stylesheet"
@@ -57,6 +61,18 @@
         <button id="pen-tool" class="selected">
           <i class="fa fa-paint-brush"></i>
         </button>
+        <div id="pen-properties" class="properties">
+          <div class="pen-contents">
+            <div class="pen-header">
+              <span class="close">&times</span>
+              <h2>Pen properties</h2>
+            </div>
+            <div class="pen-body">
+              <h3>Brush colour</h3>
+              <div class="rectangle"></div>
+            </div>
+          </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

@@ -158,3 +158,71 @@ button.selected {
   background-color: #4f4f4f !important;
   transition-duration: 0.4s;
 }
+
+.properties {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  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 */
+}
+
+.pen-contents {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  border: 1px solid #888;
+  width: 80%;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
+  animation-name: animatetop;
+  animation-duration: 0.4s;
+  font-family: "Martel", serif;
+}
+
+.close {
+  color: white;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: black;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.pen-header {
+  padding: 2px 16px;
+  background-color: #5cb85c;
+  color: white;
+}
+
+.pen-body {
+  padding: 2px 16px;
+}
+
+@keyframes animatetop {
+  from {
+    top: -300px;
+    opacity: 0;
+  }
+  to {
+    top: 0;
+    opacity: 1;
+  }
+}
+
+.rectangle {
+  height: 50px;
+  width: 100px;
+  background-color: #555;
+}

src/app.js

@@ -63,9 +63,23 @@ let currentTool = tools.PEN
 const pathIDsByPointerID = new Map()
 
 HTML.penButton.addEventListener("click", () => {
-  currentTool = tools.PEN
-  HTML.penButton.classList.add("selected")
-  HTML.eraserButton.classList.remove("selected")
+  if (currentTool == tools.PEN) {
+    HTML.properties.style.display = "block"
+  } else {
+    currentTool = tools.PEN
+    HTML.penButton.classList.add("selected")
+    HTML.eraserButton.classList.remove("selected")
+  }
+})
+
+HTML.span.addEventListener("click", () => {
+  HTML.properties.style.display = "none"
+})
+
+window.addEventListener("click", (event) => {
+  if (event.target == HTML.properties) {
+    HTML.properties.style.display = "none"
+  }
 })
 
 HTML.eraserButton.addEventListener("click", () => {

src/elements.js

@@ -14,3 +14,6 @@ export const connectedRoomID = document.getElementById("connected-room-id")
 export const connectedRoomInfoContainer = document.getElementById(
   "connected-room-info",
 )
+
+export const properties = document.getElementById("pen-properties")
+export const span = document.getElementsByClassName("close")[0]