maptDispatchToProps parent child

child-CharacterView.js

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import { fetchAssetBinary } from '../../assets/actions.js';
import { sceneTick } from '../../scene/actions';
import reglInit from 'regl';
import { mat4 } from 'gl-matrix';

import { selectPlayerAnim, selectItemAssetNames, memoMissingAssets } from '../../scene/selectors.js';

import { Camera } from '../../render/draw_commands/drawCamera.js';
import { SkeletalAOMesh } from '../../render/draw_commands/drawSkeletalAOMesh.js';

import animationSystem from 'skeletal-animation-system';

import dualQuatToMat4 from 'dual-quat-to-mat4';

class CharacterView extends Component {
  componentDidUpdate(){
    if(this.props.missingItemAssets){
      this.props.missingItemAssets.forEach((assetName) => {
        this.props.fetchAssetBinary(assetName);
      });
    }
  }

  componentDidMount(){
    let lowerInterpolatedJoints;
    let upperInterpolatedJoints;

    if(this.props.missingItemAssets){
      this.props.missingItemAssets.forEach((assetName) => {
        this.props.fetchAssetBinary(assetName);
      });
    }

    const canvasRef = this.props.canvas || this.refs.canvas;
    const gl = canvasRef.getContext("webgl", {
      alpha: false,
      antialias: false,
      stencil: false,
      //      depth: false,
      preserveDrawingBuffer: false
    });


    const regl = reglInit({
      gl,
    });

    const drawSkeletalAOMesh = SkeletalAOMesh(regl);
    const drawCamera = Camera(regl);

    var interpolatedJoints;
    var animTime;
    var joints = [...Array(Object.keys(this.props.player.skeleton.jointNameIndices).length)].map(() => mat4.identity([]));

    var modelMat = mat4.fromRotation(mat4.identity([]), -2.7, [0,1,0])

    regl.frame((context) => {
      regl.clear({
        color: this.props.bgColor,
        depth: 1
      });

      drawCamera({
        view: this.props.view,
        projection: this.props.projection,
      }, (context, props) => {

        if(this.props.playerMesh.count){
          animTime = context.time;

          lowerInterpolatedJoints = animationSystem.interpolateJoints({
            currentTime: animTime,
            jointNums: [0,3,8,5,10,2,7,23,25,22,24,11],
            currentAnimation: {
              keyframes: this.props.player.skeleton.actions['walk'],
              startTime: 0,
              noLoop: false,
            },
          });

          upperInterpolatedJoints = animationSystem.interpolateJoints({
            currentTime: animTime,
            jointNums: [16, 20, 15, 19, 12, 3, 8, 17, 21, 13, 14, 18],
            currentAnimation: {
              keyframes: this.props.player.skeleton.actions['walk'],
              startTime: 0,
              noLoop: false,
            }
          });


          interpolatedJoints = Object.assign({},
                                        lowerInterpolatedJoints.joints,
                                        upperInterpolatedJoints.joints
          );

          Object.keys(interpolatedJoints).forEach((i) => {
            joints[i] = dualQuatToMat4(joints[i], interpolatedJoints[i]);
          });

          drawSkeletalAOMesh({
            aoMeshBuffer: this.props.playerMesh.verts,
            count: this.props.playerMesh.count,
            joints,
            model: modelMat
          })
        }
      });
    });
  }

  render(){
    return (
      <canvas ref="canvas"
              width={this.props.width}
              height={this.props.height} />
    )
  }
}


var initialCameraState = {
  eye: [0, 20, -60],
  target: [0, 20, 0],
  up: [0, 1, 0],
};

const mapStateToProps = (state, props) => {
  debugger;
  const playerItemAssets = selectItemAssetNames(props.playerItems, state.items);
  const missingItemAssets = memoMissingAssets(state.assets, playerItemAssets);
  const playerAnim = selectPlayerAnim(playerItemAssets, state.player.skeleton, state.assets);

  return {
    state: state,
    view:  mat4.lookAt([],
                       initialCameraState.eye,
                       initialCameraState.target,
                       initialCameraState.up),

    projection: mat4.perspective([],
                                 Math.PI / 4,
                                 props.width / props.height,
                                 0.1,
                                 1000.0),
    items: state.items,
    missingItemAssets,
    player: state.player,
    playerMesh: {
      verts: playerAnim,
      count: playerAnim.length/12,
    }
  };
};


export default connect(mapStateToProps, {
  sceneTick,
  fetchAssetBinary,
})(CharacterView)

parent-equip.js

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux'
import { SketchPicker, CompactPicker } from 'react-color';
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

import { inputUpdatePlayerItem } from '../../input/actions.js';

import '../../../../node_modules/react-tabs/style/react-tabs.css';
import styles from '../styles/Equip.scss';

import CharacterView from './CharacterView.jsx';

class ItemCell extends React.Component{
  clickHandler(){
    this.props.inputUpdatePlayerItem(this.props.item);
  }

  render(){
    const { item, player } = this.props;
    let style = styles.itemCell

    if(player.items[item.type] === item.guid){
      style += ` ${styles.selectedCell}`;
    }

    return (
      <div className={style}
           onClick={this.clickHandler.bind(this)}>
        {item.name}
      </div>
    );
  }
}

class Equip extends React.Component{
  render(){
    return (
      <div>
        <div className={styles.halfScreen}>
          <h1>Hanger</h1>
          <Tabs>
            <TabList>
              <Tab>Head</Tab>
              <Tab>Core</Tab>
              <Tab>Arms</Tab>
              <Tab>Legs</Tab>
              <Tab>Booster</Tab>
              <Tab>Weapons</Tab>
            </TabList>
            <TabPanel>
              {this.props.items.reduce((acc, item) => {
                 if(item.type === 'head'){
                   acc.push(<ItemCell key={`${item.type}${item.name}`}
                                      item={item}
                                      player={this.props.player}
                                      inputUpdatePlayerItem={this.props.inputUpdatePlayerItem}/ >);
                 }
                 return acc;
              }, [])}
            </TabPanel>
            <TabPanel>
              {this.props.items.reduce((acc, item) => {
                 if(item.type === 'core'){
                   acc.push(<ItemCell key={`${item.type}${item.name}`}
                                      item={item}
                                      player={this.props.player}
                                      inputUpdatePlayerItem={this.props.inputUpdatePlayerItem}/ >);
                 }
                 return acc;
              }, [])}
            </TabPanel>
            <TabPanel>
              {this.props.items.reduce((acc, item) => {
                 if(item.type === 'arms'){
                   acc.push(<ItemCell key={`${item.type}${item.name}`}
                                      item={item}
                                      player={this.props.player}
                                      inputUpdatePlayerItem={this.props.inputUpdatePlayerItem}/ >);
                 }
                 return acc;
              }, [])}
            </TabPanel>
            <TabPanel>
              {this.props.items.reduce((acc, item) => {
                 if(item.type === 'legs'){
                   acc.push(<ItemCell key={`${item.type}${item.name}`}
                                      item={item}
                                      player={this.props.player}
                                      inputUpdatePlayerItem={this.props.inputUpdatePlayerItem}/ >);
                 }
                 return acc;
              }, [])}
            </TabPanel>
            <TabPanel>
              {this.props.items.reduce((acc, item) => {
                 if(item.type === 'booster'){
                   acc.push(<ItemCell key={`${item.type}${item.name}`}
                                      item={item}
                                      player={this.props.player}
                                      inputUpdatePlayerItem={this.props.inputUpdatePlayerItem}/ >);
                 }
                 return acc;
              }, [])}
            </TabPanel>
            <TabPanel></TabPanel>
          </Tabs>
        </div>
        <div className={styles.halfScreen}>
          <CharacterView
            bgColor={[1,0.5,1]}
            height={this.props.viewport.height/2}
            width={this.props.viewport.width/2}
            assets={this.props.assets}
            playerItems={this.props.player.items}
          />
        </div>
      </div>
    );
  }
}



const mapStateToProps = (state, ownProps) => {
  debugger;
  return {
    viewport: state.viewport,
    items: state.items,
    assets: state.assets,
    player: state.player,
  };
};


export default connect(mapStateToProps, {
  inputUpdatePlayerItem
})(Equip)