texture upload set up, ui and icon fixes, less ugly. (code still extr…

…emely ugly tho)
rhiannanberry · Mar 12, 2020 · 61a898f · 61a898f
1 parent 9fd1334
commit 61a898f
Show file tree

Hide file tree

Showing 14 changed files with 564 additions and 121 deletions.
diff --git a/includes/icons/icons_hair_blair.png b/includes/icons/icons_hair_blair.png
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "eslint-plugin-react": "^7.18.0",
     "file-loader": "^5.0.2",
     "html-webpack-plugin": "^3.2.0",
+    "lodash": "^4.17.15",
     "mini-css-extract-plugin": "^0.9.0",
     "node-sass": "^4.13.1",
     "prettier": "^1.19.1",

diff --git a/src/components/body-editor.js b/src/components/body-editor.js
@@ -3,6 +3,7 @@ import * as THREE from "three";
 import EditorUtils from "./editor-utils";
 import {EditorPage} from "./editor-page"
 import Buttons, {TextureButton} from "./buttons"
+import Swatches from "./color-picker2"
 
 import PropTypes from "prop-types";
 import { LabeledTexture } from "../labeled-texture";
@@ -15,7 +16,6 @@ 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"
 
 const skinColors = ["#503335", "#592f2a", "#a1665e", "#c58c85", "#d1a3a4", "#ecbcb4", "#FFE2DC"];
 const blushColors = ["#551F25", "#82333C", "#983E38", "#DC6961"];
@@ -46,33 +46,45 @@ export default class BodyEditor extends Component{
     render() {      
       return (
         <EditorPage ref={this.editorPage}>
-            <label>Body Type</label>
+            <label>Body</label>
+
             <div>
-                <TextureButton value="straight" defaultChecked={true} name="body-type" src={straight} onChange={(e) => this.props.onChange(e.target.value)}/>
-                <TextureButton value="curvy" defaultChecked={false} name="body-type" src={curvy} onChange={(e) => this.props.onChange(e.target.value)}/>
-            </div>
-            <label>Skin Color</label>
-            <div>
-              <ColorPicker
-                color={this.state.skin}
-                colors={skinColors}
-                onChange={(e) => {
-                  this.setState({skin:e.rgb}); 
-                  EditorUtils.setMaterialColor(e.hex, this.materials[0]) 
+            <Swatches
+                selected={straight}
+                width={'70px'}
+                height={'80px'}
+                textures={[straight,curvy]}
+                canDisable={false}
+                onChange={(src) => {
+                  this.props.onChange((src == straight) ? 'straight' : 'curvy')
+
                 }}
               />
-
             </div>
-            <label>Blush</label>
+            <label>Skin</label>
             <div>
-            <ColorPicker
-                color={this.state.blush}
-                colors={blushColors}
-                onChange={(e) => {
-                  this.setState({blush:e.rgb}); 
-                  EditorUtils.setMaterialColor(e.hex, this.materials[1]) 
-                }}
-              />
+               <Swatches 
+                  colors={skinColors} 
+                  canDisable={false}
+                  onChange={(color) => {
+                    EditorUtils.setMaterialColor(color, this.materials[0]) 
+                  }}
+                />
+            </div>
+            <label>Cheeks</label>
+            <div>
+              <Swatches 
+                  colors={blushColors} 
+                  canDisable={true}
+                  onChange={(color) => {
+                    if (color == 'none') {
+                      this.materials[1].setActive(false);
+                    } else {
+                      this.materials[1].setActive(true);
+                      EditorUtils.setMaterialColor(color, this.materials[1]) 
+                    }
+                  }}
+                />
             </div>
         </EditorPage>
       );

diff --git a/src/components/color-picker.js b/src/components/color-picker.js
@@ -2,9 +2,10 @@ import React from 'react'
 
 import { CustomPicker } from 'react-color'
 import { Hue, Saturation, Swatch } from 'react-color/lib/components/common'
-import color from 'react-color/lib/helpers/color'
+import * as COLOR from 'react-color/lib/helpers/color';
 
-export const ColorPicker = ({ hex, hsl, hsv, colors, onChange }) => {
+
+export const ColorPicker = ({ hex, hsl, hsv, colors, onChange, color}) => {
   const styles = {
     customContainer: {
       height: 50,
@@ -37,44 +38,45 @@ export const ColorPicker = ({ hex, hsl, hsv, colors, onChange }) => {
       borderRadius: 4
     },
   }
-  const uh = (t) => {
-    return t;
-  }
 
-  const uhh = (e) => {
-    onChange(e)
+  const onClick = (e) => {
+    disabled = e.disabled;
   }
-  return (
-    <div>
-      <div style={styles.customContainer}>
-        <div style={styles.sliders}>
-
-          <div style={ styles.hue }>
-            <Hue
-              hsl={ hsl } onChange={ uhh } />
-          </div>
-          <div style={ styles.saturation }>
-            <Saturation 
-              hsl={ hsl }
-              hsv={ hsv }
-              color={color}
-              onChange={ uhh }/>
-          </div>
 
-        </div>
-        <div style={ styles.swatch }>
+  const customColorMenu = (e) => {
+    return (<div style={styles.customContainer}>
+      <div style={styles.sliders}>
 
+        <div style={ styles.hue }>
+          <Hue
+            hsl={ hsl } onChange={ onChange } />
+        </div>
+        <div style={ styles.saturation }>
+          <Saturation 
+            hsl={ hsl }
+            hsv={ hsv }
+            //color={color}
+            onChange={ onChange }/>
         </div>
+
       </div>
+      <div style={ styles.swatch }>
+
+      </div>
+    </div>)
+  }
+  return (
+    <div>
+      {}
       <div>
-        <PresetColors colors={ colors } onChange={onChange}/>
+        <PresetColors colors={ colors } onChange={ onChange } color={color}/>
       </div>
 
     </div>
   )
 }
 
-const PresetColors = ({ colors, onChange = () => {}, onSwatchHover }) => {
+const PresetColors = ({ colors, onChange = () => {}, onSwatchHover, color}) => {
   const styles = {
     swatch: {
       width: '30px',
@@ -88,19 +90,27 @@ const PresetColors = ({ colors, onChange = () => {}, onSwatchHover }) => {
 
     }
   }
+
+  var clr = null
+
   const handleChange = (hexcode, e) => {
-    console.log(hexcode)
-    color.isValidHex(hexcode) && onChange({
+    clr = hexcode;
+    onChange({
       hex: hexcode,
       source:'hex'
     }, e)
   }
 
+
   return (
     <div style={styles.swatchContainer}>
       {colors.map((c,i) => {
         var swatchStyle = {...styles.swatch};
         swatchStyle.marginLeft = i === 0 ? '0' : swatchStyle.marginLeft;
+
+        if (color.hex != undefined && color.hex.toLowerCase() == c.toLowerCase()) {
+          swatchStyle.boxShadow= `0 0 4px ${c}`
+        }
 
         return (
           <Swatch