swapping color pickers

diff --git a/admin/dist/js/glm-options.js b/admin/dist/js/glm-options.js
index 4f45e5b..2a967c9 100644 (file)
--- a/admin/dist/js/glm-options.js
+++ b/admin/dist/js/glm-options.js
@@ -189,7 +189,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var reac
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var _store_actionCreators_system__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../store/actionCreators/system */ \"./js/store/actionCreators/system.js\");\n/* harmony import */ var react_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-color */ \"./node_modules/react-color/lib/index.js\");\n/* harmony import */ var react_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_color__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var reactcss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! reactcss */ \"./node_modules/reactcss/lib/index.js\");\n/* harmony import */ var reactcss__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(reactcss__WEBPACK_IMPORTED_MODULE_4__);\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\nvar Swatch = function Swatch(props) {\n  var mounted = react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"];\n  var updated = react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"];\n  var firstRender = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(true);\n\n  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])({\n    displayColorPicker: false,\n    color: {\n      r: '241',\n      g: '112',\n      b: '19',\n      a: '1'\n    }\n  }),\n      _useState2 = _slicedToArray(_useState, 2),\n      swatchState = _useState2[0],\n      updateSwatchState = _useState2[1];\n\n  var handleClick = function handleClick() {\n    updateSwatchState(_extends({}, swatchState, {\n      displayColorPicker: !swatchState.displayColorPicker\n    }));\n  };\n\n  var handleClose = function handleClose() {\n    updateSwatchState(_extends({}, swatchState, {\n      displayColorPicker: false\n    }));\n  };\n\n  var handleChange = function handleChange(color) {\n    updateSwatchState(_extends({}, swatchState, {\n      color: color.rgb\n    }));\n  };\n\n  mounted(function () {\n    return function cleanup() {// clean up logic\n    };\n  }, []);\n  updated(function () {\n    if (firstRender.current) {\n      firstRender.current = false;\n      return;\n    }\n\n    return function cleanup() {};\n  }); // this.props.updateGameData({scrap: 1000, robots: 5}).then(console.log(this.props.gameDataReducer));\n\n  var styles = reactcss__WEBPACK_IMPORTED_MODULE_4___default()({\n    'default': {\n      color: {\n        width: '36px',\n        height: '14px',\n        borderRadius: '2px',\n        background: \"rgba(\".concat(swatchState.color.r, \", \").concat(swatchState.color.g, \", \").concat(swatchState.color.b, \", \").concat(swatchState.color.a, \")\")\n      },\n      swatch: {\n        padding: '5px',\n        background: '#fff',\n        borderRadius: '1px',\n        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\n        display: 'inline-block',\n        cursor: 'pointer'\n      },\n      popover: {\n        position: 'absolute',\n        zIndex: '2'\n      },\n      cover: {\n        position: 'fixed',\n        top: '0px',\n        right: '0px',\n        bottom: '0px',\n        left: '0px'\n      }\n    }\n  });\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    className: \"swatch\"\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    style: styles.swatch,\n    onClick: handleClick\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    style: styles.color\n  })), swatchState.displayColorPicker ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    style: styles.popover\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    style: styles.cover,\n    onClick: handleClose\n  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_color__WEBPACK_IMPORTED_MODULE_3__[\"PhotoshopPicker\"], {\n    color: swatchState.color,\n    onChange: handleChange\n  })) : null);\n};\n\nvar mapDispatchToProps = {\n  toggleDrawerState: _store_actionCreators_system__WEBPACK_IMPORTED_MODULE_2__[\"toggleDrawerState\"]\n};\n\nvar mapStateToProps = function mapStateToProps(state) {\n  return state;\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_1__[\"connect\"])(mapStateToProps, mapDispatchToProps)(Swatch));\n\n//# sourceURL=webpack:///./js/components/fields/Swatch.jsx?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/es/index.js\");\n/* harmony import */ var _store_actionCreators_system__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../store/actionCreators/system */ \"./js/store/actionCreators/system.js\");\n/* harmony import */ var react_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-color */ \"./node_modules/react-color/lib/index.js\");\n/* harmony import */ var react_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_color__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var reactcss__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! reactcss */ \"./node_modules/reactcss/lib/index.js\");\n/* harmony import */ var reactcss__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(reactcss__WEBPACK_IMPORTED_MODULE_4__);\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }\n\nfunction _nonIterableRest() { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); }\n\nfunction _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === \"[object Arguments]\")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i[\"return\"] != null) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; }\n\nfunction _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }\n\n\n\n\n\n\n\nvar Swatch = function Swatch(props) {\n  var mounted = react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"];\n  var updated = react__WEBPACK_IMPORTED_MODULE_0__[\"useEffect\"];\n  var firstRender = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useRef\"])(true);\n\n  var _useState = Object(react__WEBPACK_IMPORTED_MODULE_0__[\"useState\"])({\n    displayColorPicker: false,\n    color: {\n      r: '241',\n      g: '112',\n      b: '19',\n      a: '1'\n    }\n  }),\n      _useState2 = _slicedToArray(_useState, 2),\n      swatchState = _useState2[0],\n      updateSwatchState = _useState2[1];\n\n  var handleClick = function handleClick() {\n    updateSwatchState(_extends({}, swatchState, {\n      displayColorPicker: !swatchState.displayColorPicker\n    }));\n  };\n\n  var handleClose = function handleClose() {\n    updateSwatchState(_extends({}, swatchState, {\n      displayColorPicker: false\n    }));\n  };\n\n  var handleChange = function handleChange(color) {\n    updateSwatchState(_extends({}, swatchState, {\n      color: color.rgb\n    }));\n  };\n\n  mounted(function () {\n    return function cleanup() {// clean up logic\n    };\n  }, []);\n  updated(function () {\n    if (firstRender.current) {\n      firstRender.current = false;\n      return;\n    }\n\n    return function cleanup() {};\n  }); // this.props.updateGameData({scrap: 1000, robots: 5}).then(console.log(this.props.gameDataReducer));\n\n  var styles = reactcss__WEBPACK_IMPORTED_MODULE_4___default()({\n    'default': {\n      color: {\n        width: '36px',\n        height: '14px',\n        borderRadius: '2px',\n        background: \"rgba(\".concat(swatchState.color.r, \", \").concat(swatchState.color.g, \", \").concat(swatchState.color.b, \", \").concat(swatchState.color.a, \")\")\n      },\n      swatch: {\n        padding: '5px',\n        background: '#fff',\n        borderRadius: '1px',\n        boxShadow: '0 0 0 1px rgba(0,0,0,.1)',\n        display: 'inline-block',\n        cursor: 'pointer'\n      },\n      popover: {\n        position: 'absolute',\n        zIndex: '2'\n      },\n      cover: {\n        position: 'fixed',\n        top: '0px',\n        right: '0px',\n        bottom: '0px',\n        left: '0px'\n      }\n    }\n  });\n  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    className: \"swatch\"\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    style: styles.swatch,\n    onClick: handleClick\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    style: styles.color\n  })), swatchState.displayColorPicker ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    style: styles.popover\n  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(\"div\", {\n    style: styles.cover,\n    onClick: handleClose\n  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_color__WEBPACK_IMPORTED_MODULE_3__[\"SketchPicker\"], {\n    color: swatchState.color,\n    onChange: handleChange\n  })) : null);\n};\n\nvar mapDispatchToProps = {\n  toggleDrawerState: _store_actionCreators_system__WEBPACK_IMPORTED_MODULE_2__[\"toggleDrawerState\"]\n};\n\nvar mapStateToProps = function mapStateToProps(state) {\n  return state;\n};\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_1__[\"connect\"])(mapStateToProps, mapDispatchToProps)(Swatch));\n\n//# sourceURL=webpack:///./js/components/fields/Swatch.jsx?");
 
 /***/ }),
 

diff --git a/admin/js/components/fields/Swatch.jsx b/admin/js/components/fields/Swatch.jsx
index cd0fb81..f0185e9 100644 (file)
--- a/admin/js/components/fields/Swatch.jsx
+++ b/admin/js/components/fields/Swatch.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef} from 'react';
 import {connect } from 'react-redux';
 import { toggleDrawerState } from '../../store/actionCreators/system';
-import { PhotoshopPicker } from 'react-color';
+import { SketchPicker } from 'react-color';
 import reactCSS from 'reactcss'
 
 const Swatch = (props) => {
@@ -84,7 +84,7 @@ const Swatch = (props) => {
                 </div>
                 { swatchState.displayColorPicker ? <div style={ styles.popover }>
                 <div style={ styles.cover } onClick={ handleClose }/>
-                <PhotoshopPicker color={ swatchState.color } onChange={ handleChange } />
+                <SketchPicker color={ swatchState.color } onChange={ handleChange } />
             </div> : null }
         </div>
     );