From fef8511daf0d2223dd6f9105430defbe8e5b4f3d Mon Sep 17 00:00:00 2001
From: ray <gitea@rayelliott.dev>
Date: Mon, 27 Apr 2020 22:07:44 +0100
Subject: [PATCH] increase decrease nuber of shades/tints

---
 src/App.js | 54 +++++++++++++++++++++++++++++++++++++-----------------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/App.js b/src/App.js
index e93aa28..0a93254 100644
--- a/src/App.js
+++ b/src/App.js
@@ -45,7 +45,9 @@ function IncDecButton(props) {
 		<div className={props.className}>
 			<div>{props.children}</div>
 			<button type="button" onClick={props.onDecrement}>-</button>
-			<span>{props.value}</span>
+			{props.value !== undefined &&
+				<span>{props.value}</span>
+			}
 			<button type="button" onClick={props.onIncrement}>+</button>
 		</div>
 	);
@@ -65,10 +67,10 @@ class Color extends React.Component {
 			darkenAmount: this.props.darkenAmount,
 			scaleShadeStart: this.props.scaleShadeStart,
 			scaleShadeEnd: this.props.scaleShadeEnd,
-			scaleShadeStep: this.props.scaleShadeStep,
+			scaleShadeStepCount: this.props.scaleShadeStepCount,
 			scaleTintStart: this.props.scaleTintStart,
 			scaleTintEnd: this.props.scaleTintEnd,
-			scaleTintStep: this.props.scaleTintStep,
+			scaleTintStepCount: this.props.scaleTintStepCount,
 		}
 
 		this.incState = this.incState.bind(this);
@@ -79,7 +81,8 @@ class Color extends React.Component {
 		this.setState((state) => {
 			const scaleTints = chroma.scale([state.chromaColor.brighten(state.brightenAmount), state.chromaColor]);
 			const tints = [];
-			for (let i = state.scaleTintStart; i < state.scaleTintEnd; i += state.scaleTintStep) {
+			const step = (state.scaleTintEnd - state.scaleTintStart) / state.scaleTintStepCount;
+			for (let i = state.scaleTintStart; i < state.scaleTintEnd; i += step) {
 				tints.push(scaleTints(i).hex());
 			}
 			return {tints: tints}
@@ -90,7 +93,8 @@ class Color extends React.Component {
 		this.setState((state) => {
 			const scaleShades = chroma.scale([state.chromaColor, state.chromaColor.darken(state.darkenAmount)]);
 			const shades = [];
-			for (let i = state.scaleShadeStart; i < state.scaleShadeEnd; i += state.scaleShadeStep) {
+			const step = (state.scaleShadeEnd - state.scaleShadeStart) / state.scaleShadeStepCount;
+			for (let i = state.scaleShadeStart; i < state.scaleShadeEnd; i += step) {
 				shades.push(scaleShades(i).hex());
 			}
 			return {shades: shades}
@@ -106,8 +110,10 @@ class Color extends React.Component {
 
 	incState(stateProperty, value) {
 		this.setState((state, props) => {
+			const newValue = state[stateProperty] + value;
+			if (newValue <= 0) { return {}; }
 			const returnObj = {};
-			returnObj[stateProperty] = state[stateProperty] + value;
+			returnObj[stateProperty] = newValue;
 			return returnObj;
 		})
 		this.setTints();
@@ -123,6 +129,7 @@ class Color extends React.Component {
 		return (
 			<div className={this.props.className}>
 				<header>
+					<button type="button" onClick={this.handleClick}>Random</button>
 					<IncDecButton
 						onIncrement={() => { this.incState("brightenAmount", 0.25); }}
 						onDecrement={() => { this.incState("brightenAmount", -0.25); }}
@@ -130,7 +137,12 @@ class Color extends React.Component {
 					>
 						<span>Brightness</span>
 					</IncDecButton>
-					<button type="button" onClick={this.handleClick}>Random</button>
+					<IncDecButton
+						onIncrement={() => { this.incState("scaleTintStepCount", 1); }}
+						onDecrement={() => { this.incState("scaleTintStepCount", -1); }}
+					>
+						<span>Count</span>
+					</IncDecButton>
 				</header>
 				<ul>
 					{this.state.tints.map((shade, index) => 
@@ -142,6 +154,12 @@ class Color extends React.Component {
 					)}
 				</ul>
 				<footer>
+					<IncDecButton
+						onIncrement={() => { this.incState("scaleShadeStepCount", 1); }}
+						onDecrement={() => { this.incState("scaleShadeStepCount", -1); }}
+					>
+						<span>Count</span>
+					</IncDecButton>
 					<IncDecButton
 						onIncrement={() => { this.incState("darkenAmount", 0.25); }}
 						onDecrement={() => { this.incState("darkenAmount", -0.25); }}
@@ -156,14 +174,14 @@ class Color extends React.Component {
 }
 
 Color.defaultProps = {
-			brightenAmount: 3,
-			darkenAmount: 3,
-			scaleShadeStart: 0.2,
-			scaleShadeEnd: 0.8,
-			scaleShadeStep: 0.1,
-			scaleTintStart: 0.2,
-			scaleTintEnd: 0.8,
-			scaleTintStep: 0.1,
+	brightenAmount: 3,
+	darkenAmount: 3,
+	scaleShadeStart: 0.2,
+	scaleShadeEnd: 0.8,
+	scaleShadeStepCount: 5,
+	scaleTintStart: 0.2,
+	scaleTintEnd: 0.8,
+	scaleTintStepCount: 5,
 }
 
 S.Color = styled(Color)`
@@ -197,10 +215,12 @@ function App() {
 		<div className="App">
 			<S.Color
 				className="color-list"
-				baseColor="#dbdfac"/>
+				baseColor="#dbdfac"
+			/>
 			<S.Color
 				className="color-list"
-				baseColor="#fb3640"/>
+				baseColor="#fb3640"
+			/>
 		</div>
 	);
 }