model swapping now possible

package.json

@@ -43,8 +43,8 @@
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.13.1",
     "prettier": "^1.19.1",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "stylelint": "^13.0.0",

src/components/body-editor.js

@@ -1,14 +1,18 @@
 import React, { Component } from "react";
+import * as THREE from "three";
 import EditorUtils from "./editor-utils";
 import {EditorPage} from "./editor-page"
-import Buttons, {DisableButton, PresetColorButton, CustomColorButton, TextureButton} from "./buttons"
+import Buttons, {TextureButton} from "./buttons"
 
 import PropTypes from "prop-types";
 import { LabeledTexture } from "../labeled-texture";
 import Material from "./material"
 
 import ColorPicker from "./color-picker"
 
+import straight from "../../includes/icons/icons_straight.png"
+import curvy from "../../includes/icons/icons_curvy.png"
+
 import skin from "../../includes/textures/skin_default.png";
 import blush from "../../includes/textures/blush_default.png";
 import logo from "../../includes/textures/logo_front/ae.png"
@@ -28,51 +32,46 @@ export default class BodyEditor extends Component{
           new Material(this.props.model.material.clone(), "skin", [new LabeledTexture(skin)]),
           new Material(this.props.model.material.clone(), "blush", [new LabeledTexture(blush)])
       ]
-      this.color = "red"
       this.editorPage = React.createRef();
+      this.state = {
+          skin:new THREE.Color().randomize().getHexStringFull(),
+          blush:new THREE.Color().randomize().getHexStringFull()
+      }
+      EditorUtils.setMaterialColor(this.state.skin, this.materials[0]) 
+      EditorUtils.setMaterialColor(this.state.blush, this.materials[1]) 
+
     }
 
-    render() {
-      console.log(this.color)
-
+    render() {      
       return (
         <EditorPage ref={this.editorPage}>
             <label>Body Type</label>
-            <ColorPicker
-              color={this.color}
-              colors={["#aaabbb", "#ababab"]}
-              onChange={(e) => {this.color = e.hex; console.log(e.hex)}}
-            />
             <div>
-                <TextureButton value="1" defaultChecked={true} name="body-type" src={logo} />
-                <TextureButton value="2" defaultChecked={false} name="body-type" src={skin} />
+                <TextureButton value="1" defaultChecked={true} name="body-type" src={straight} />
+                <TextureButton value="2" defaultChecked={false} name="body-type" src={curvy} />
             </div>
             <label>Skin Color</label>
             <div>
-                <CustomColorButton 
-                  value="0" 
-                  defaultChecked={true} 
-                  name="body-color"
-                  onClick={(e) => {this.materials[0].setActive(true)}}
-                  onChange={ (clr) => { EditorUtils.setMaterialColor(clr, this.materials[0]) } }
-                />
-
-                { EditorUtils.presetColorButtons(skinColors, "body-color", this.materials[0]) }
-
+              <ColorPicker
+                color={this.state.skin}
+                colors={skinColors}
+                onChange={(e) => {
+                  this.setState({skin:e.rgb}); 
+                  EditorUtils.setMaterialColor(e.hex, this.materials[0]) 
+                }}
+              />
+
             </div>
             <label>Blush</label>
             <div>
-                <DisableButton value="0" name="blush-color" onChange={(e) => {this.materials[1].setActive(false)}}/>
-
-                <CustomColorButton
-                  value="1" 
-                  defaultChecked={true} 
-                  name="blush-color" 
-                  onClick={(e) => {this.materials[1].setActive(true)}}
-                  onChange={(clr) => {EditorUtils.setMaterialColor(clr, this.materials[1])}}
-                />
-
-                { EditorUtils.presetColorButtons(blushColors, "blush-color", this.materials[1]) }
+            <ColorPicker
+                color={this.state.blush}
+                colors={blushColors}
+                onChange={(e) => {
+                  this.setState({blush:e.rgb}); 
+                  EditorUtils.setMaterialColor(e.hex, this.materials[1]) 
+                }}
+              />
             </div>
         </EditorPage>
       );

src/components/buttons.js

@@ -190,7 +190,7 @@ export class TextureButton extends Component {
     return (
       <RadioButton
         id={this.props.id}
-        onChange= { (e) => {if (typeof props.onChange == "function") props.onChange(e)} }
+        onChange= { (e) => {if (typeof this.props.onChange == "function") this.props.onChange(e)} }
         value={this.props.value}
         defaultChecked={this.props.defaultChecked}
         name={this.props.name}

src/components/color-picker.js

@@ -4,7 +4,7 @@ import { CustomPicker } from 'react-color'
 import { Hue, Saturation, Swatch } from 'react-color/lib/components/common'
 import color from 'react-color/lib/helpers/color'
 
-export const ColorPicker = ({ hsl, hsv, colors, onChange }) => {
+export const ColorPicker = ({ hex, hsl, hsv, colors, onChange }) => {
   const styles = {
     customContainer: {
       height: 50,
@@ -33,7 +33,7 @@ export const ColorPicker = ({ hsl, hsv, colors, onChange }) => {
     swatch: {
       width: 50,
       height: 50,
-      //background: hex,
+      background: hex,
       borderRadius: 4
     },
   }