Palette, tools, load & save working

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