diff --git a/Frame.js b/Frame.js index c7b6ce70c..f7b3eec4f 100644 --- a/Frame.js +++ b/Frame.js @@ -294,7 +294,9 @@ function newFrame () { cornerRadious: 5, lineWidth: 0.1, opacity: 0.75, - container: frame.container + container: frame.container, + borderColor: UI_COLOR.DARK, + backgroundColor: UI_COLOR.WHITE } roundedCornersBackground(params) diff --git a/StrategySpace/StrategyCollectionItem.js b/StrategySpace/StrategyCollectionItem.js index 6b3f89209..afc92e31d 100644 --- a/StrategySpace/StrategyCollectionItem.js +++ b/StrategySpace/StrategyCollectionItem.js @@ -19,7 +19,7 @@ function newStrategyCollectionItem () { return thisObject function initialize () { - const ITEM_WIDTH = 400 + const ITEM_WIDTH = 430 const ITEM_HEIGHT = 60 thisObject.container.frame.width = ITEM_WIDTH @@ -60,8 +60,8 @@ function newStrategyCollectionItem () { return } - const LEFT_MARGIN = 50 - const TOP_MARGIN = 30 + const LEFT_MARGIN = 70 + const TOP_MARGIN = 35 let strategy = thisObject.strategy @@ -83,53 +83,16 @@ function newStrategyCollectionItem () { function borders () { let params = { - cornerRadious: 5, - lineWidth: 0.5, - opacity: 0.8, - container: thisObject.container + cornerRadious: 8, + lineWidth: 0.1, + opacity: 1, + container: thisObject.container, + borderColor: UI_COLOR.DARK, + backgroundColor: UI_COLOR.WHITE, + castShadow: true } roundedCornersBackground(params) - - return - - /* Shadow */ - - for (let i = 0; i <= 5; i++) { - opacity = 1 - (i / 100) - 0.93 - - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x + i, point1.y + i) - browserCanvasContext.lineTo(point2.x + i, point2.y + i) - browserCanvasContext.lineTo(point3.x + i, point3.y + i) - browserCanvasContext.lineTo(point4.x + i, point4.y + i) - browserCanvasContext.lineTo(point1.x + i, point1.y + i) - browserCanvasContext.closePath() - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + opacity + '' - browserCanvasContext.lineWidth = 1 - browserCanvasContext.stroke() - } - - /* Background and Border */ - - browserCanvasContext.setLineDash([0, 0]) - browserCanvasContext.beginPath() - browserCanvasContext.moveTo(point1.x, point1.y) - browserCanvasContext.lineTo(point2.x, point2.y) - browserCanvasContext.lineTo(point3.x, point3.y) - browserCanvasContext.lineTo(point4.x, point4.y) - browserCanvasContext.lineTo(point1.x, point1.y) - browserCanvasContext.closePath() - - opacity = 1 - - browserCanvasContext.fillStyle = 'rgba(' + UI_COLOR.WHITE + ', ' + opacity + '' - browserCanvasContext.fill() - - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.GREY + ', ' + opacity + '' - browserCanvasContext.lineWidth = 0.3 - browserCanvasContext.stroke() } } diff --git a/Utilities/RoundedCornersBackground.js b/Utilities/RoundedCornersBackground.js index 8a9edae8b..76863de02 100644 --- a/Utilities/RoundedCornersBackground.js +++ b/Utilities/RoundedCornersBackground.js @@ -26,12 +26,41 @@ function roundedCornersBackground (params) { 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]) + /* Shadow */ + + if (params.castShadow === true) { + let SHADOW_OFFSET = 2 + + browserCanvasContext.beginPath() + + browserCanvasContext.arc(borderPoint1.x + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y - params.cornerRadious + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint2.x + SHADOW_OFFSET, borderPoint2.y + SHADOW_OFFSET, params.cornerRadious, 1.5 * Math.PI, 2.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint3.x + params.cornerRadious + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint3.x + SHADOW_OFFSET, borderPoint3.y + SHADOW_OFFSET, params.cornerRadious, 0 * Math.PI, 0.5 * Math.PI) + browserCanvasContext.lineTo(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + params.cornerRadious + SHADOW_OFFSET) + browserCanvasContext.arc(borderPoint4.x + SHADOW_OFFSET, borderPoint4.y + SHADOW_OFFSET, params.cornerRadious, 0.5 * Math.PI, 1.0 * Math.PI) + browserCanvasContext.lineTo(borderPoint1.x - params.cornerRadious + SHADOW_OFFSET, borderPoint1.y + SHADOW_OFFSET) + + browserCanvasContext.closePath() + + browserCanvasContext.lineWidth = 10 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')' + browserCanvasContext.stroke() + + browserCanvasContext.lineWidth = 5 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.01 + ')' + browserCanvasContext.stroke() + + browserCanvasContext.lineWidth = 1 + browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.15 + ')' + browserCanvasContext.stroke() + } + + /* Background */ + browserCanvasContext.beginPath() browserCanvasContext.arc(borderPoint1.x, borderPoint1.y, params.cornerRadious, 1.0 * Math.PI, 1.5 * Math.PI) @@ -45,14 +74,12 @@ function roundedCornersBackground (params) { browserCanvasContext.closePath() - browserCanvasContext.lineWidth = params.lineWidth * 15 - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.BLACK + ', ' + 0.05 + ')' - browserCanvasContext.stroke() + browserCanvasContext.fillStyle = 'rgba(' + params.backgroundColor + ', ' + params.opacity + ')' browserCanvasContext.fill() browserCanvasContext.lineWidth = params.lineWidth - browserCanvasContext.strokeStyle = 'rgba(' + UI_COLOR.DARK + ', ' + params.opacity + ')' + browserCanvasContext.strokeStyle = 'rgba(' + params.borderColor + ', ' + params.opacity + ')' browserCanvasContext.stroke() }