This week consisted of combining research on step 6 and step 7 and completing step 6. In order to correctly show the right output of the program at the selected line in codePanel, the gridPanel must be able to interact with the codePanel accordingly.

Step 6 Continued

I researched multiple sites and React packages that create interactive grids; with them, I attempted and failed to create multiple grids. After multiple attempts, I ended up using my printState method within render(), changing the gridArray var to hold the correct output in a 2D array. Using map functions, I accessed each cell and printed the chars within a box, creating the grid. GridArray also changes the output to be ASCII chars when microscopeOn is true, making for an easier transition to step 7.

Fix:

export class GridArray extends React.Component{
  render(){
    var wordArray = count_output.split('')
    var index = 0
    var gridArray = myArray;
      for(var i = 0; i< gridArray.length; i++){
        gridArray[i] = new Array(gridArray.length)
        for(var j = 0; j < gridArray[0].length; j++){
          if(microscopeOn){
            if(isNaN(count_output.charCodeAt(index))){
              gridArray[i][j] = ''
            }
            else gridArray[i][j] = count_output.charCodeAt(index)
          }
          else{
            gridArray[i][j] = wordArray[index]
          }
         index++;
        }
      }
    return (
           <View style = >
           {gridArray.map((box,i) => (
             <View>
             {box.map((col,j) => (
               <View style = {styles.grid_fixed_ratio}>
               <Text style = {styles.state_text}> {gridArray[j][i]}</Text>
               </View>
             ))}
             </View>
           ))}
            </View>
         );
  }
}

Concerns

• I am still confused by React. In examples I found online, the HTML tags work in a React extended class, but when I try to use it in Simr, I get errors.
• For some reason, when I accessed gridArray[i][j] the output would be printed col to col rather than row to row; I changed it to gridArray[j][i] which printed the output correctly.
• I am still using StateOverlay to show the row numbers.

Step 7 Research

Below are some of the topics and concepts I learned during research:

• Entity
• props
• Parent and Child Components
• obj vs. mtl vs. glf vs. glft2

Below are some concerns with step 7 implementation:

• Can I move the microscope once loaded into the scene?
• Would it better to have a static microscope object that once clicked, allows the ASCII to be seen?

Completed Tasks

• Step 6
• Step 7 Research
• Finished DREU Blog Post #5
• Select template for Final Report

Unfinished Tasks

• Steps 7 -11
• Finish Courses
• Find more articles for Final Report
• Work on Final Report