Rounded Corners Working

Frame.js

@@ -290,25 +290,14 @@ function newFrame () {
   }
 
   function background () {
-    borderPoint1 = {
-      x: PANEL_CORNERS_RADIOUS,
-      y: PANEL_CORNERS_RADIOUS
+    let params = {
+      cornerRadious: 5,
+      lineWidth: 0.1,
+      opacity: 0.75,
+      container: frame.container
     }
 
-    borderPoint2 = {
-      x: frame.width - PANEL_CORNERS_RADIOUS,
-      y: PANEL_CORNERS_RADIOUS
-    }
-
-    borderPoint3 = {
-      x: frame.width - PANEL_CORNERS_RADIOUS,
-      y: frame.height - PANEL_CORNERS_RADIOUS
-    }
-
-    borderPoint4 = {
-      x: PANEL_CORNERS_RADIOUS,
-      y: frame.height - PANEL_CORNERS_RADIOUS
-    }
+    roundedCornersBackground(params)
 
     titleBarPoint1 = {
       x: 0,
@@ -322,36 +311,9 @@ function newFrame () {
 
         /* Now the transformations. */
 
-    borderPoint1 = frameThisPoint(borderPoint1)
-    borderPoint2 = frameThisPoint(borderPoint2)
-    borderPoint3 = frameThisPoint(borderPoint3)
-    borderPoint4 = frameThisPoint(borderPoint4)
-
     titleBarPoint1 = frameThisPoint(titleBarPoint1)
     titleBarPoint2 = frameThisPoint(titleBarPoint2)
 
-        /* We paint the panel background first */
-
-    browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', 0.75)'
-    browserCanvasContext.beginPath()
-
-    browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, PANEL_CORNERS_RADIOUS, 1.0 * Math.PI, 1.5 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - PANEL_CORNERS_RADIOUS)
-    browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, PANEL_CORNERS_RADIOUS, 1.5 * Math.PI, 2.0 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint3.x + PANEL_CORNERS_RADIOUS, borderPoint3.y)
-    browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, PANEL_CORNERS_RADIOUS, 0 * Math.PI, 0.5 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + PANEL_CORNERS_RADIOUS)
-    browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, PANEL_CORNERS_RADIOUS, 0.5 * Math.PI, 1.0 * Math.PI)
-    browserCanvasContext.lineTo(borderPoint1.x - PANEL_CORNERS_RADIOUS, borderPoint1.y)
-
-    browserCanvasContext.closePath()
-
-    browserCanvasContext.fill()
-
-    browserCanvasContext.lineWidth = 0.1
-    browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.MANGANESE_PURPLE + ', 0.75)'
-    browserCanvasContext.stroke()
-
         /* We paint the title bar now */
 
     browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.DARK + ', 0.75)'

StrategySpace/StrategyCollectionItem.js

@@ -82,37 +82,16 @@ function newStrategyCollectionItem () {
   }
 
   function borders () {
-    let point1
-    let point2
-    let point3
-    let point4
-
-    point1 = {
-      x: 0,
-      y: 0
+    let params = {
+      cornerRadious: 5,
+      lineWidth: 0.5,
+      opacity: 0.8,
+      container: thisObject.container
     }
 
-    point2 = {
-      x: thisObject.container.frame.width,
-      y: 0
-    }
+    roundedCornersBackground(params)
 
-    point3 = {
-      x: thisObject.container.frame.width,
-      y: thisObject.container.frame.height
-    }
-
-    point4 = {
-      x: 0,
-      y: thisObject.container.frame.height
-    }
-
-    point1 = thisObject.container.frame.frameThisPoint(point1)
-    point2 = thisObject.container.frame.frameThisPoint(point2)
-    point3 = thisObject.container.frame.frameThisPoint(point3)
-    point4 = thisObject.container.frame.frameThisPoint(point4)
-
-    let opacity
+    return
 
     /* Shadow */
 
@@ -153,3 +132,4 @@ function newStrategyCollectionItem () {
     browserCanvasContext.stroke()
   }
 }
+

Utilities/RoundedCornersBackground.js

@@ -0,0 +1,58 @@
+function roundedCornersBackground (params) {
+  borderPoint1 = {
+    x: params.cornerRadious,
+    y: params.cornerRadious
+  }
+
+  borderPoint2 = {
+    x: params.container.frame.width - params.cornerRadious,
+    y: params.cornerRadious
+  }
+
+  borderPoint3 = {
+    x: params.container.frame.width - params.cornerRadious,
+    y: params.container.frame.height - params.cornerRadious
+  }
+
+  borderPoint4 = {
+    x: params.cornerRadious,
+    y: params.container.frame.height - params.cornerRadious
+  }
+
+      /* Now the transformations. */
+
+  borderPoint1 = params.container.frame.frameThisPoint(borderPoint1)
+  borderPoint2 = params.container.frame.frameThisPoint(borderPoint2)
+  borderPoint3 = params.container.frame.frameThisPoint(borderPoint3)
+  borderPoint4 = params.container.frame.frameThisPoint(borderPoint4)
+
+      /* We paint the panel background  */
+
+  browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + params.opacity + ')'
+
+  browserCanvasContext.setLineDash([0, 0])
+
+  browserCanvasContext.beginPath()
+
+  browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI)
+  browserCanvasContext.lineTo(borderPoint2.x, borderPoint2.y - params.cornerRadious)
+  browserCanvasContext.arc(borderPoint2.x, borderPoint2.y, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI)
+  browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious, borderPoint3.y)
+  browserCanvasContext.arc(borderPoint3.x, borderPoint3.y, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI)
+  browserCanvasContext.lineTo(borderPoint4.x, borderPoint4.y + params.cornerRadious)
+  browserCanvasContext.arc(borderPoint4.x, borderPoint4.y, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI)
+  browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious, borderPoint1.y)
+
+  browserCanvasContext.closePath()
+
+  browserCanvasContext.lineWidth = params.lineWidth * 15
+  browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.05 + ')'
+  browserCanvasContext.stroke()
+
+  browserCanvasContext.fill()
+
+  browserCanvasContext.lineWidth = params.lineWidth
+  browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + params.opacity + ')'
+  browserCanvasContext.stroke()
+}
+