From 5c09cf3fe8bf74fcb23ada74bcc07bc2648642ab Mon Sep 17 00:00:00 2001
From: Giovanni Caruso <gc4117@cloud-vm-36-76.doc.ic.ac.uk>
Date: Sat, 26 Oct 2019 18:40:11 +0100
Subject: [PATCH] Fix log message

---
 public/index.html | 19 +++++++++++++++++++
 public/styles.css | 38 ++++++++++++++++++++++++++++++++++++--
 src/app.js        |  6 ++++++
 src/canvas.js     |  1 -
 src/elements.js   |  2 ++
 5 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 863ce55..3102fc9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -76,6 +76,25 @@
                 <div id="rectangle"></div>
               </a>
             </div>
+            <div class="pen-body">
+              <div id="brush-colour">
+                <h3>Brush size</h3>
+              </div>
+              &nbsp;
+              <div class="slide-size">
+                <input
+                  type="range"
+                  min="1"
+                  max="100"
+                  value="50"
+                  class="slider"
+                  id="range"
+                />
+                <p style="text-align: center; margin: 0px">
+                  Size: <span id="value"></span>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
         <div id="palette" class="properties" style="padding-top: 150px">
diff --git a/public/styles.css b/public/styles.css
index 067051c..d0ccd4e 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -256,6 +256,40 @@ button.selected {
   text-align: center;
 }
 
-.properties:palette {
-  padding-top: 50px;
+.slide-size {
+  width: 90%;
+  height: 20%;
+}
+
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 25px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+  margin-top: 30px;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #4f4f4f;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #4f4f4f;
+  cursor: pointer;
 }
diff --git a/src/app.js b/src/app.js
index 40f046e..ab23297 100644
--- a/src/app.js
+++ b/src/app.js
@@ -101,6 +101,12 @@ for (var i = 1; i < svg.length; i++) {
   })
 }
 
+HTML.output.innerHTML = HTML.slider.value
+
+HTML.slider.oninput = function() {
+  HTML.output.innerHTML = this.value
+}
+
 HTML.eraserButton.addEventListener("click", () => {
   currentTool = tools.ERASER
   HTML.penButton.classList.remove("selected")
diff --git a/src/canvas.js b/src/canvas.js
index 7ea872d..5edeacc 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -84,7 +84,6 @@ export const renderPath = (id, points) => {
       // Further split up segments based on thickness.
       const subpath_ = subpath.slice()
       let w = subpath_[0][2]
-      console.log(w)
       for (let i = 1; i < subpath_.length; i++) {
         if (subpath_[i][2] != w) {
           const d = lineFn([...subpath_.splice(0, i), subpath_[0]])
diff --git a/src/elements.js b/src/elements.js
index dc03849..cf803c1 100644
--- a/src/elements.js
+++ b/src/elements.js
@@ -20,3 +20,5 @@ export const span = document.querySelectorAll(".close")
 export const palette = document.getElementById("palette")
 export const rectangle = document.getElementById("rectangle")
 export const wheel = document.getElementById("wheel")
+export const slider = document.getElementById("range")
+export const output = document.getElementById("value")
-- 
GitLab