Adding Color Picker

package.json

@@ -17,15 +17,16 @@
   "homepage": "https://bsides.github.io/horizoverlay",
   "dependencies": {
     "raven-js": "^3.24.0",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
+    "react": "^16.6.0",
+    "react-colorful": "^5.0.1",
+    "react-dom": "^16.14.0",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
     "react-scripts": "^3.0.1"
   },
   "devDependencies": {
     "gh-pages": "^1.1.0",
-    "serve": "^11.1.0"
+    "serve": "^11.3.2"
   },
   "scripts": {
     "start": "react-scripts start",

src/ColorPicker.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { withHelper } from './helpers'
+import { RgbStringColorPicker } from 'react-colorful'
+import 'react-colorful/dist/index'
+
+import './css/config.css'
+
+const ColorPickerRaw = (props) => {
+  let state = { ...props }
+  const role = state.match.params.role;
+  let roleColor = props.config['color' + role];
+
+  // This is needed for react-colorful's binding to work
+  const [color, setColor] = React.useState(roleColor);
+
+  window.addEventListener('beforeunload', (event) => {
+    props.config['color' + role] = color;
+    localStorage.setItem('horizoverlay', JSON.stringify(props.config))
+  });
+
+  return (
+    <div>
+      <h1 style={{color: 'black', marginLeft: 20}}>{role} Color</h1>
+      <hr></hr>
+      <RgbStringColorPicker style={{marginLeft: 20}} color={ color } onChange={ setColor } />
+      <hr></hr>
+    </div>
+  )
+}
+
+const ColorPicker = withHelper({ WrappedComponent: ColorPickerRaw, isColorPicker: true })
+export default ColorPicker

src/CombatantHorizontal.js

@@ -79,14 +79,24 @@ export default class CombatantHorizontal extends Component {
 
     const isHealing = data.ENCHPS > data.ENCDPS
 
+    // All we need from the saved colors is the numbers, not the rgb() portion
+    let colorTank = this.props.config['colorTank'];
+    colorTank = colorTank.substr(4, colorTank.length-5);
+    let colorHealer = this.props.config['colorHealer'];
+    colorHealer = colorHealer.substr(4, colorHealer.length-5);
+    let colorDPS = this.props.config['colorDPS'];
+    colorDPS = colorDPS.substr(4, colorDPS.length-5);
+
     let maxhit
     if (data.maxhit) maxhit = data.maxhit.replace('-', ': ')
     return (
       <div
-        className={`row ${data.Job}${jobStyleClass}${
+        className={`row job-style-variables ${data.Job}${jobStyleClass}${
           isSelf && config.showSelf ? ' self' : ''
         }`}
-        style={{ order }}
+
+        // Setting the CSS style variables here will overwrite whatever is in the .css file
+        style={{ order: order, '--tank': colorTank, '--dps': colorDPS, '--healer': colorHealer }}
       >
         <div className="name">
           {config.showRank ? (

src/Config.js

@@ -6,10 +6,11 @@ import './css/config.css'
 
 class ConfigRaw extends Component {
   state = { ...this.props }
+  selectedRole = ''
   handleConfig = (e) => {
     const target = e.target
     if (target.type === 'text') e.preventDefault()
-    const config = { ...this.state.config }
+    const config = JSON.parse(localStorage.getItem('horizoverlay'));
     let key = target.name,
       value = target.value
 
@@ -38,6 +39,10 @@ class ConfigRaw extends Component {
     // well that's horrible
     window.location.reload()
   }
+  spawnColorPicker = (roleName, e) => {
+    e.preventDefault()
+    this.props.openColorPicker(roleName)
+  }
   // *** IMPORTANT ***
   // Gotta bind 'onChange' for checkboxes since false values don't bubble to 'onChange'!
   render() {
@@ -111,6 +116,16 @@ class ConfigRaw extends Component {
                 {/* Black & White */}
                 {loc.themeOption2}
               </label>
+              <br />
+              {config.color === 'byRole' &&
+                <div>
+                  <button className="color-btn" onClick={(e) => this.spawnColorPicker('Tank', e)}>Set Tank Color</button>
+                  <br />
+                  <button className="color-btn" onClick={(e) => this.spawnColorPicker('DPS', e)}>Set DPS Color</button>
+                  <br />
+                  <button className="color-btn" onClick={(e) => this.spawnColorPicker('Healer', e)}>Set Healer Color</button>
+                </div>
+              }
             </div>
           </fieldset>
           <fieldset className="fieldsToShow">

src/SetupMode.js

@@ -13,6 +13,15 @@ function SetupModeRaw(props) {
   const colorClass = props.config.color
   const isVisible = props.config.showSetup ? 'show' : 'hide'
   const loc = locale[props.config.locale]
+
+  // All we need from the saved colors is the numbers, not the rgb() portion
+  let colorTank = props.config['colorTank'];
+  colorTank = colorTank.substr(4, colorTank.length-5);
+  let colorHealer = props.config['colorHealer'];
+  colorHealer = colorHealer.substr(4, colorHealer.length-5);
+  let colorDPS = props.config['colorDPS'];
+  colorDPS = colorDPS.substr(4, colorDPS.length-5);
+
   return (
     <div
       className={`setupMode ${colorClass}${
@@ -34,8 +43,10 @@ function SetupModeRaw(props) {
                 <div
                   className={`row${mock.isSelf ? ' self' : ''} ${
                     props.config.color === 'byRole' ? mock.jobRole : ''
-                  } ${mock.jobClass} `}
-                  style={{ order: mock.rank }}
+                  } ${mock.jobClass} job-style-variables`}
+
+                  // Setting the CSS style variables here will overwrite whatever is in the .css file
+                  style={{ order: mock.rank, '--tank': colorTank, '--dps': colorDPS, '--healer': colorHealer }}
                   key={mock.rank}
                 >
                   <div className="name">

src/css/config.css

@@ -174,3 +174,7 @@ legend {
   width: 3em;
   height: 2em;
 }
+.color-btn {
+  width: 9rem;
+  margin-bottom: .25rem;
+}

src/css/overlay.css

@@ -12,57 +12,64 @@
   margin: 0 6px;
   max-width: 140px;
 }
+
+/* This is needed to initialize the variables for role colors */
+.job-style-variables {
+  --dps: 244, 67, 54;
+  --tank: 33, 150, 243;
+  --healer: 139, 195, 74;
+}
 .row.self.job-dps .data-items:before,
 .row.self.job-tank .data-items:before,
 .row.self.job-healer .data-items:before {
   background: rgba(255, 255, 255, 0.8);
 }
 .row.job-dps .data-items:before {
-  background: rgba(244, 67, 54, 0.5);
+  background: rgba(var(--dps), 0.5);
 }
 .row.job-dps .data-items.highlight:before {
   background-image: linear-gradient(
     to left,
-    rgba(244, 67, 54, 0.5) 0%,
-    rgba(244, 67, 54, 0.5) 51%,
-    rgba(244, 67, 54, 0.1) 51%,
-    rgba(244, 67, 54, 0.1) 100%
+    rgba(var(--dps), 0.5) 0%,
+    rgba(var(--dps), 0.5) 51%,
+    rgba(var(--dps), 0.1) 51%,
+    rgba(var(--dps), 0.1) 100%
   );
   background-repeat: no-repeat;
 }
 .row.job-tank .data-items:before {
-  background: rgba(32, 149, 243, 0.5);
+  background: rgba(var(--tank), 0.5);
 }
 .row.job-tank .data-items.highlight:before {
   background-image: linear-gradient(
     to left,
-    rgba(32, 149, 243, 0.5) 0%,
-    rgba(32, 149, 243, 0.5) 51%,
-    rgba(32, 149, 243, 0.1) 51%,
-    rgba(32, 149, 243, 0.1) 100%
+    rgba(var(--tank), 0.5) 0%,
+    rgba(var(--tank), 0.5) 51%,
+    rgba(var(--tank), 0.1) 51%,
+    rgba(var(--tank), 0.1) 100%
   );
   background-repeat: no-repeat;
 }
 .row.job-healer .data-items:before {
-  background: rgba(139, 195, 74, 0.5);
+  background: rgba(var(--healer), 0.5);
 }
 .row.job-healer .data-items.highlight:before {
   background-image: linear-gradient(
     to left,
-    rgba(139, 195, 74, 0.5) 0%,
-    rgba(139, 195, 74, 0.5) 51%,
-    rgba(139, 195, 74, 0.1) 51%,
-    rgba(139, 195, 74, 0.1) 100%
+    rgba(var(--healer), 0.5) 0%,
+    rgba(var(--healer), 0.5) 51%,
+    rgba(var(--healer), 0.1) 51%,
+    rgba(var(--healer), 0.1) 100%
   );
   background-repeat: no-repeat;
 }
 .row.job-healer .data-items.highlight.inverse:before {
   background-image: linear-gradient(
     to left,
-    rgba(139, 195, 74, 0.1) 0%,
-    rgba(139, 195, 74, 0.1) 51%,
-    rgba(139, 195, 74, 0.5) 51%,
-    rgba(139, 195, 74, 0.5) 100%
+    rgba(var(--healer), 0.1) 0%,
+    rgba(var(--healer), 0.1) 51%,
+    rgba(var(--healer), 0.5) 51%,
+    rgba(var(--healer), 0.5) 100%
   );
   background-repeat: no-repeat;
 }
@@ -72,38 +79,38 @@
   background: rgba(255, 255, 255, 0.8);
 }
 .row.job-dps .damage-percent-bg {
-  background: rgba(244, 67, 54, 0.3);
+  background: rgba(var(--dps), 0.3);
 }
 .row.job-tank .damage-percent-bg {
-  background: rgba(33, 150, 243, 0.3);
+  background: rgba(var(--tank), 0.3);
 }
 .row.job-healer .damage-percent-bg {
-  background: rgba(139, 195, 74, 0.3);
+  background: rgba(var(--healer), 0.3);
 }
 .row.self .damage-percent-bg {
   background: rgba(255, 255, 255, 0.5);
 }
 .row.job-dps .damage-percent-fg {
-  background: rgba(244, 67, 54, 0.7);
+  background: rgba(var(--dps), 0.7);
 }
 .row.job-tank .damage-percent-fg {
-  background: rgba(33, 150, 243, 0.7);
+  background: rgba(var(--tank), 0.7);
 }
 .row.job-healer .damage-percent-fg {
-  background: rgba(139, 195, 74, 0.7);
+  background: rgba(var(--healer), 0.7);
 }
 .row.self .damage-percent-fg {
   background: rgba(255, 255, 255, 1);
 }
 /*
 .row.job-dps .dps.irrelevant {
-  background: rgba(244, 67, 54, 0.1);
+  background: rgba(var(--dps), 0.1);
 }
 .row.job-tank .dps.irrelevant {
-  background: rgba(33, 150, 243, 0.1);
+  background: rgba(var(--tank), 0.1);
 }
 .row.job-healer .dps.irrelevant {
-  background: rgba(139, 195, 74, 0.1);
+  background: rgba(var(--healer), 0.1);
 }
 .row.self div.dps.irrelevant {
   background: rgba(255, 255, 255, 0.5);

src/helpers.js

@@ -25,16 +25,21 @@ export const defaultConfig = {
     width: 1300,
     height: 239
   },
-  colorHealer: 'rgba(139, 195, 74, 0.3)',
-  colorTank: 'rgba(33, 150, 243, 0.3)',
-  colorDps: 'rgba(244, 67, 54, 0.3)'
+  colorPicker: {
+    width: 250,
+    height: 300
+  },
+  colorHealer: 'rgb(139, 195, 74)',
+  colorTank: 'rgb(33, 150, 243)',
+  colorDPS: 'rgb(244, 67, 54)'
 }
 
 // Declaring as a function makes it hoisted and don't mess with constructor from React.Component
 export function withHelper({
   WrappedComponent,
   willMock = false,
-  isConfig = false
+  isConfig = false,
+  isColorPicker = false
 }) {
   return class withConfig extends Component {
     static defaultProps = {
@@ -54,7 +59,10 @@ export function withHelper({
         showDamagePercent: bool.isRequired,
 		showJobless: bool.isRequired,
         zoom: string.isRequired,
-        configWindow: object.isRequired
+        configWindow: object.isRequired,
+        colorHealer: string.isRequired,
+        colorTank: string.isRequired,
+        colorDPS: string.isRequired
       })
     }
     state = { ...this.props }
@@ -123,6 +131,27 @@ export function withHelper({
         this.configWindow = null
       }
     }
+    openColorPicker = (roleName) => {
+      this.setState({ isColorPickerOpen: true })
+      const windowFeatures = `menubar=no,location=no,resizable=no,scrollbars=yes,status=no,width=${
+        this.props.config.colorPicker.width
+      },height=${this.props.config.colorPicker.height}`
+      this.colorPickerWindow = window.open(
+        './#/colorpicker/' + roleName,
+        'Color Picker',
+        windowFeatures
+      )
+      this.colorPickerWindow.focus()
+
+      // State wasn't getting set in the color picker window, so it gets set here instead
+      this.colorPickerWindow.onunload = () => {
+        this.setState({ isColorPickerOpen: false })
+        this.colorPickerWindow = null
+        const config = { ...JSON.parse(localStorage.getItem('horizoverlay')) }
+
+        this.setState({ config })
+      }
+    }
     render = () => {
       const { Combatant, Encounter, isActive } = this.props
       return (
@@ -132,6 +161,7 @@ export function withHelper({
           Encounter={Encounter}
           isActive={isActive}
           openConfig={this.openConfig}
+          openColorPicker={this.openColorPicker}
           handleReset={this.updateState}
         />
       )

src/index.js

@@ -8,6 +8,7 @@ import { HashRouter as Router, Route, Switch } from 'react-router-dom'
 
 import Overlay from './Overlay'
 import Config from './Config'
+import ColorPicker from './ColorPicker'
 import NotFound from './NotFound'
 import SetupMode from './SetupMode'
 import initActWebSocket from './actwebsocket'
@@ -27,6 +28,7 @@ const Inactive = detail => {
     <Router basename={`${process.env.PUBLIC_URL}`}>
       <Switch>
         <Route path={`/config`} component={Config} />
+        <Route path={`/colorpicker/:role`} component={ColorPicker} />
         <Route component={SetupMode} />
       </Switch>
     </Router>
@@ -39,6 +41,7 @@ const Root = detail => {
       <Switch>
         <Route path={`/`} render={() => <Overlay {...detail} />} />
         <Route exact path={`/config`} component={Config} />
+        <Route path={`/colorpicker/:role/:color`} component={ColorPicker} />
         <Route render={() => <NotFound text="Page Not Found!" />} />
       </Switch>
     </Router>