Implement brush size

public/index.html

@@ -89,7 +89,7 @@
                   type="range"
                   min="1"
                   max="100"
-                  value="50"
+                  value="10"
                   class="slider"
                   id="range"
                 />

src/app.js

@@ -132,6 +132,7 @@ HTML.output.innerHTML = HTML.slider.value
 
 HTML.slider.oninput = function() {
   HTML.output.innerHTML = this.value
+  canvas.setStrokeRadius(this.value / 10)
 }
 
 HTML.eraserButton.addEventListener("click", () => {
@@ -238,7 +239,12 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
   if (currentTool == tools.PEN) {
     pathIDsByPointerID.set(
       e.pointerId,
-      room.addPath([...mousePos, e.pressure, canvas.getStrokeColour()]),
+      room.addPath([
+        ...mousePos,
+        e.pressure,
+        canvas.getStrokeColour(),
+        canvas.stroke_radius,
+      ]),
     )
   } else if (currentTool == tools.ERASER) {
     erasePoint(mousePos)
@@ -261,6 +267,7 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
       ...mousePos,
       e.pressure,
       canvas.getStrokeColour(),
+      canvas.stroke_radius,
     ])
   } else if (currentTool == tools.ERASER) {
     erasePoint(mousePos)

src/canvas.js

@@ -17,6 +17,7 @@ const lineFn = line()
 const pathGroupElems = new Map()
 
 let stroke_colour = "blue"
+export var stroke_radius = 1
 export const MIN_STROKE_RADIUS = 0.1
 export const MAX_STROKE_RADIUS = 3.9
 
@@ -73,7 +74,10 @@ const smoothPath = ([...path]) => {
 }
 
 const getStrokeRadius = (pressure) => {
-  return MIN_STROKE_RADIUS + pressure * (MAX_STROKE_RADIUS - MIN_STROKE_RADIUS)
+  return (
+    MIN_STROKE_RADIUS +
+    (stroke_radius + pressure) * (MAX_STROKE_RADIUS - MIN_STROKE_RADIUS)
+  )
 }
 
 export const input = new EventTarget()
@@ -93,7 +97,7 @@ export const renderPath = (id, points) => {
   let segments = [[]]
   for (const point of points) {
     colour = point[3]
-    if (point[4] != false) {
+    if (point[5] != false) {
       segments[segments.length - 1].push(point)
     } else {
       segments.push([])
@@ -131,6 +135,7 @@ export const renderPath = (id, points) => {
       circleElem.setAttribute("cx", subpath[0][0])
       circleElem.setAttribute("cy", subpath[0][1])
       circleElem.setAttribute("r", getStrokeRadius(subpath[0][2]))
+      console.log(getStrokeRadius(subpath[0][2]))
       pathGroupElem.appendChild(circleElem)
     } else {
       // Further split up segments based on thickness.
@@ -178,6 +183,11 @@ export function setStrokeColour(colour) {
   stroke_colour = colour
 }
 
+<<<<<<< HEAD
 export function getStrokeColour() {
   return stroke_colour
+=======
+export function setStrokeRadius(radius) {
+  stroke_radius = radius
+>>>>>>> Implement brush size
 }

src/room.js

@@ -65,7 +65,14 @@ class Room extends EventTarget {
 
     return addSet
       .toArray()
-      .map((p = [], i) => [p[0], p[1], p[2], p[3], !eraseSet.get(i.toString())])
+      .map((p = [], i) => [
+        p[0],
+        p[1],
+        p[2],
+        p[3],
+        p[4],
+        !eraseSet.get(i.toString()),
+      ])
   }
 
   inviteUser(id) {