This week consisted of finishing step 8, starting on step 9, and preparing my final report for a brief evaluation by Professor Anderson.

Step 7 Continued

No update as of yet.

Attempts:

• I created a new React 360 enviornment to test the Entity component. I tried using a new 3D obj, removing the center panel, and changing the location of the .obj and .mtl files. No change.

Will place this step on the back burner.

Step 9: Create Animations/Interactions to Step Through Code (Highlighting + Checking)

How do I get the buttons to highlight on hover over?

Attempts:

• In order to get the buttons to highlight, I have to use the onEnter/onExit VrButton attributes.
• I created a new Button class that would create the buttons for each snippet of code, functions such as clickHandler() and setState() to update the hover state of the button.

class Button extends React.Component{
  state = {
    hover: false
  }
  clickHandler(gridOutput){
    changeGrid(gridOutput)
  }
  render(){
    return(
      <View>
        <VrButton
          style = {this.state.hover ? styles.hover : styles.button}
          onEnter = {() => this.setState({hover: true})}
          onExit = {() => this.setState({hover: false})}
          onClick = {() => this.clickHandler(this.props.states[0].gridOutput)}>
          <Text
            style = {styles.code_display}
            >
              { states[0].code }
          </Text>
        </VrButton>
      </View>
    );
  }
}

Errors:

• TypeError: Cannot read property ‘output’ of null
• Both GridPanel and CodePanel did not appear.
• “Invariant Violation: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.”

Fixes:

• GridPanel reappeared after spelling typo was corrected.

Notes:

• onClickfunction only returns the gridOutput of the first state (“ “) and is there for step 10 implementation.
• Unsure of how to fix error, will continue working on it next week. *****

Completed Tasks:

• Finished Week #8 post
• Added Possible Citations to Report
• Step 8

Unfinished Tasks:

• Steps 9- 11
• Complete supplemental courses
• Work on Final Report
• Debug Magnifying Glass