aboutsummaryrefslogtreecommitdiff
path: root/src/Palette.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/Palette.js')
-rw-r--r--src/Palette.js44
1 files changed, 44 insertions, 0 deletions
diff --git a/src/Palette.js b/src/Palette.js
new file mode 100644
index 0000000..ad0ad46
--- /dev/null
+++ b/src/Palette.js
@@ -0,0 +1,44 @@
+import React, {Component} from 'react'
+import { rgb } from './Utils.js'
+
+const colorPalette = [
+ [0,0,0],
+ [132,0,0],
+ [0,132,0],
+ [132,132,0],
+ [0,0,132],
+ [132,0,132],
+ [0,132,132],
+ [132,132,132],
+ [198,198,198],
+ [255,0,0],
+ [0,255,0],
+ [255,255,0],
+ [0,0,255],
+ [255,0,255],
+ [0,255,255],
+ [255,255,255],
+ ]
+
+
+ export default class Palette extends Component {
+ render() {
+ let paletteListItems = colorPalette.map((item) => {
+ var className = "paletteitem"
+ let { r, g, b } = rgb(item)
+ let selected = rgb(this.props.selectedColor)
+ if (r === selected.r && g === selected.g && b === selected.b) {
+ className += " selected"
+ }
+ return <div
+ onClick={() => this.props.onSelectColor([r, g, b])}
+ style={{background: `rgb(${r},${g},${b})`}}
+ className={className}
+ key={r*10000+g*1000+b}/>
+ })
+ return (
+ <div className="palette">
+ {paletteListItems}
+ </div>)
+ }
+ } \ No newline at end of file