{"version":3,"sources":["components/Player/index.js","App.js","reportWebVitals.js","index.js"],"names":["Player","props","useEffect","console","log","window","threekitPlayer","authToken","el","document","getElementById","stageId","assetId","showConfigurator","showAR","then","player","a","getConfigurator","configurator","when","loaded","setLoaded","className","id","layout","default","shift","numbers","display","App","state","layoutName","input","undefined","color1","color2","color3","show","colors","i","stringToColour","str","hash","length","charCodeAt","colour","toString","substr","onChange","split","setState","onKeyPress","button","handleShift","onChangeInput","event","target","value","isMobile","keyboard","setInput","hashMessage","m","msgBuffer","TextEncoder","encode","crypto","subtle","digest","hashBuffer","hashArray","Array","from","Uint8Array","componentToHex","c","hex","rgbToHex","r","g","b","generate","trimmed","trim","trimmedLowered","toLowerCase","hashHex","map","padStart","join","configAttrs","querySelector","children","keys","reverse","e","ret","colorObj","v","createElement","innerHTML","style","color","forEach","chroma","scale","mode","setConfiguration","configObj","innerText","width","fontSize","this","position","left","bottom","margin","placeholder","alignContent","onClick","keyboardRef","theme","physicalKeyboardHighlight","Component","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode"],"mappings":"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","file":"static/js/main.787073be.chunk.js","sourcesContent":["import React, { useEffect } from 'react'\n\nfunction Player (props) {\n  useEffect(() => {\n    console.log(props)\n    window\n      .threekitPlayer({\n        authToken: 'b56cdaa4-fae1-49a0-a2db-a222e95c9bb4',\n        el: document.getElementById('player'),\n        stageId: '',\n        assetId: 'ca823b8b-13cf-498c-80e2-017bf32086ec',\n        showConfigurator: false,\n        showAR: false\n      })\n      .then(async player => {\n        window.player = player\n        window.configurator = await player.getConfigurator()\n        await player.when('loaded')\n        let loaded = props.loaded\n        props.setLoaded();\n      })\n  }, [])\n  return (\n    <div>\n\n      <div className='threekit-player' id='player'></div>\n    </div>\n  )\n}\n\nexport default Player\n","import React, { Component } from 'react'\nimport Keyboard from 'react-simple-keyboard'\nimport 'react-simple-keyboard/build/css/index.css'\nimport './index.css'\nimport Player from './components/Player'\n\nimport Texty from 'rc-texty'\nimport 'rc-texty/assets/index.css'\nimport QueueAnim from 'rc-queue-anim'\nimport chroma from 'chroma-js'\nimport { isMobile } from 'react-device-detect'\n\nconst layout = {\n  default: [\n    'q w e r t y u i o p',\n    'a s d f g h j k l',\n    '{shift} z x c v b n m {backspace}',\n    '{space}'\n  ],\n  shift: [\n    'Q W E R T Y U I O P',\n    'A S D F G H J K L',\n    '{shift} Z X C V B N M {backspace}',\n    '{numbers} {space} {ent}'\n  ],\n  numbers: ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {backspace}']\n}\nconst display = {\n  '{ent}': 'return',\n  '{escape}': 'esc ⎋',\n  '{tab}': 'tab ⇥',\n  '{backspace}': '⌫',\n  '{capslock}': 'caps lock ⇪',\n  '{shift}': '⇧',\n  '{controlleft}': 'ctrl ⌃',\n  '{controlright}': 'ctrl ⌃',\n  '{altleft}': 'alt ⌥',\n  '{altright}': 'alt ⌥',\n  '{metaleft}': 'cmd ⌘',\n  '{metaright}': 'cmd ⌘',\n  '{abc}': 'ABC'\n}\n\nlet loaded = false\nclass App extends Component {\n  state = {\n    layoutName: 'default',\n    input: undefined,\n    color1: '',\n    color2: '',\n    color3: '',\n    show: false,\n    colors: {},\n    i: 1\n  }\n\n  stringToColour = function (str) {\n    var hash = 0\n    for (var i = 0; i < str.length; i++) {\n      hash = str.charCodeAt(i) + ((hash << 5) - hash)\n    }\n    var colour = '#'\n    for (var i = 0; i < 3; i++) {\n      var value = (hash >> (i * 8)) & 0xff\n      colour += ('00' + value.toString(16)).substr(-2)\n    }\n    return colour\n  }\n\n  // getInputSetColors (input) {\n  //   let length = input.split(' ').length\n  //   if (length == 1) {\n  //     this.setState({ color1: this.stringToColour(input.split(' ')[0]) })\n  //     console.log(\n  //       'color: ' +\n  //         input.split(' ')[0] +\n  //         this.stringToColour(input.split(' ')[0])\n  //     )\n  //   } else if (length == 2) {\n  //     this.setState({ color2: this.stringToColour(input.split(' ')[1]) })\n\n  //     console.log(\n  //       'color: ' +\n  //         input.split(' ')[1] +\n  //         this.stringToColour(input.split(' ')[1])\n  //     )\n  //   } else if (length == 3) {\n  //     this.setState({ color3: this.stringToColour(input.split(' ')[2]) })\n\n  //     console.log(\n  //       'color: ' +\n  //         input.split(' ')[2] +\n  //         this.stringToColour(input.split(' ')[2])\n  //     )\n  //   } else {\n  //     return\n  //   }\n\n  //   window.configurator.setConfiguration({\n  //     Color: this.state.color1,\n  //     'Sole Color': this.state.color2,\n  //     'Lace Color': this.state.color3\n  //   })\n  // }\n\n  onChange = input => {\n    console.log('Input changed', input)\n    let length = input.split(' ').length\n    console.log(length)\n\n    this.setState({\n      input: input\n    })\n\n    // this.getInputSetColors(input)\n  }\n\n  onKeyPress = button => {\n    console.log('Button pressed', button)\n\n    /**\n     * If you want to handle the shift and caps lock buttons\n     */\n    if (button === '{shift}' || button === '{lock}') this.handleShift()\n  }\n\n  handleShift = () => {\n    let layoutName = this.state.layoutName\n\n    this.setState({\n      layoutName: layoutName === 'default' ? 'shift' : 'default'\n    })\n  }\n\n  onChangeInput = event => {\n    let input = event.target.value\n\n    console.log(input)\n\n    this.setState(\n      {\n        input: input\n      }, isMobile ? null : \n      () => {\n        this.keyboard.setInput(input)\n      } \n    )\n  }\n\n  setLoaded = () => {\n    this.setState({ show: true })\n  }\n\n  hashMessage = async m => {\n    const msgBuffer = new TextEncoder().encode(m)\n    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer)\n    const hashArray = Array.from(new Uint8Array(hashBuffer))\n    console.log('The Buffer', hashArray)\n    return hashArray\n    //const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');\n    //return hashHex;\n  }\n\n  componentToHex = c => {\n    var hex = c.toString(16)\n    return hex.length == 1 ? '0' + hex : hex\n  }\n\n  rgbToHex = (r, g, b) => {\n    return (\n      '#' +\n      this.componentToHex(r) +\n      this.componentToHex(g) +\n      this.componentToHex(b)\n    )\n  }\n\n  generate = async m => {\n    let i = 1\n    const trimmed = m.trim()\n    const trimmedLowered = trimmed.toLowerCase()\n    console.log('Hashing ', trimmedLowered)\n    const hash = await this.hashMessage(trimmedLowered)\n    const hashHex = hash.map(b => b.toString(16).padStart(2, '0')).join('')\n\n    const configAttrs = [\n      'Body Main Color', // Done\n      'Side Mesh Color', //done\n      'Back Mesh Color', // done\n      'Back Detail Color', // done\n      'Wrap Side Color', // Done\n      'Sole Wrap Color', // Done\n      'Sole Color', // done\n      'Lace Color', // done\n      'Interior Color'\n    ]\n    Array.from(Array(document.querySelector('#out').children.length).keys())\n      .reverse()\n      .map(e => {\n        // document\n        //   .querySelector('#out')\n        //   .removeChild(document.querySelector('#out').children.item(e))\n        console.log(e)\n      })\n    var interval = null\n    const ret = {}\n    let colorObj = {}\n    configAttrs.map(v => {\n      ret[v] = {}\n      ret[v]['r'] = hash.shift() / 255\n      ret[v]['g'] = hash.shift() / 255\n      ret[v]['b'] = hash.shift() / 255\n\n      const a = document.createElement('p')\n      a.innerHTML = v\n      a.style.color =\n        'rgb(' +\n        ret[v]['r'].toString() +\n        ',' +\n        ret[v]['g'].toString() +\n        ',' +\n        ret[v]['b'].toString() +\n        ')'\n      console.log(ret)\n\n      console.log('COLORS')\n      configAttrs.forEach(e => {\n        if (ret[e]) {\n          colorObj = {\n            ...colorObj,\n            [e]: chroma\n              .scale([\n                '#ffffff',\n                this.rgbToHex(ret[e].r * 255, ret[e].b * 255, ret[e].g * 255)\n              ])\n              .mode('rgb')\n              .colors(20)\n          }\n          window.configurator.setConfiguration({ [e]: ret[e] })\n        } else {\n          return undefined\n        }\n      })\n      let configObj = {}\n\n      i++\n      // These are index - 1 becasue i starts at 1.\n      configAttrs.forEach(e => {\n        configObj[e] = colorObj[e]\n\n        // console.log(e)\n\n        console.log(colorObj)\n      })\n      window.configurator.setConfiguration(ret)\n    })\n\n    document.querySelector('#out').innerText = hashHex\n\n    console.log('colors', ret)\n\n    return ret\n  }\n\n  render () {\n    return (\n      <div>\n        <div style={{ width: '100%' }}>\n          <p style={{ fontSize: '50px' }}>{this.state.input}</p>\n          <div id='out'></div>\n          <Player loaded={this.state.show} setLoaded={() => this.setLoaded()} />\n          <QueueAnim className='demo-content'>\n            {this.state.show ? (\n              <div\n                key='keyboard-content'\n                style={ isMobile ? null : {\n                  position: 'fixed',\n                  left: 0,\n                  bottom: 0,\n                  width: '100%'\n                }}\n              >\n                <span style={{ margin: 'auto' }}>\n                  <input\n                    value={this.state.input}\n                    placeholder={'Tap on the virtual keyboard or type to start'}\n                    onChange={e => this.onChangeInput(e)}\n                    style={{\n                      width: '90%',\n                      margin: '10px',\n                      alignContent: 'center'\n                    }}\n                  />\n                  <button\n                    id='go'\n                    onClick={() => this.generate(this.state.input)}\n                  >\n                    Go\n                  </button>\n                </span>\n                <div>\n                  {isMobile ? null : (\n                    <Keyboard\n                      keyboardRef={r => (this.keyboard = r)}\n                      theme={'hg-theme-default myTheme1'}\n                      layoutName={this.state.layoutName}\n                      onChange={input => this.onChange(input)}\n                      onKeyPress={button => this.onKeyPress(button)}\n                      physicalKeyboardHighlight={true}\n                      layout={layout}\n                      display={display}\n                    />\n                  )}\n                </div>\n              </div>\n            ) : null}\n          </QueueAnim>\n        </div>\n      </div>\n    )\n  }\n}\n\nexport default App\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}