Shelan's Litter-Patrol

.github/PULL_REQUEST_TEMPLATE

@@ -4,15 +4,19 @@ Congratulations! You're submitting your assignment!
 ## Comprehension Questions
 Question | Answer
 --- | ---
-How are events / event handlers and `this.state` connected? | 
-What are two ways to do "dynamic styling" with React? When should they be used? | 
-Much like Rails works with the HTTP request->response cycle, React works with the browser's input->output cycle. Describe React's cycle from receiving user input to outputting different page content. | 
-Compare how React and Rails' views differ. Given different circumstances, these systems have different goals. How does this impact on their design and how we are supposed to use them? | 
-What was a challenge you were able to overcome on this assignment? | 
+How are events / event handlers and `this.state` connected? |
+What are two ways to do "dynamic styling" with React? When should they be used? |
+Much like Rails works with the HTTP request->response cycle, React works with the browser's input->output cycle. Describe React's cycle from receiving user input to outputting different page content. |
+Compare how React and Rails' views differ. Given different circumstances, these systems have different goals. How does this impact on their design and how we are supposed to use them? |
+What was a challenge you were able to overcome on this assignment? |
 
 ## CS Fundamentals Questions
 Question | Answer
 --- | ---
-Consider the code on the first few lines of `App.render` (it starts with `this.state.items.map`). What is the Big-O time complexity of this code, where n is the number of active game items? | 
-What part of React might benefit most from the use of specific data structure and algorithms? | 
-Consider what happens when React processes a state change from `setState` -- it must re-render all of the components that now have different content because of that change.<br>What kind of data structure are the components in, and what sort of algorithms would be appropriate for React's code to "traverse" those components?<br>Speculate wildly about what the Big-O time complexity of that code might be. | 
+Consider the code on the first few lines of `App.render` (it starts with `this.state.items.map`). What is the Big-O time complexity of this code, where n is the number of active game items? |
+What part of React might benefit most from the use of specific data structure and algorithms? |
+
+Consider what happens when React processes a state change from `setState` -- it must re-render all of the components that now have different content because of that change.<br>What kind of data structure are the components in, and what sort of algorithms would be appropriate for React's code to "traverse" those components?<br>Speculate wildly about what the Big-O time complexity of that code might be. | O(n)
+
+what data to be held in higher level objects for easy accessibility.
+sort of algorithms- effective as possible because its interactive, any place you want to render.

src/App.js

@@ -4,6 +4,7 @@ import './App.css';
 import GameItem from './components/GameItem.js';
 import logo from './images/logo.png';
 
+
 class App extends Component {
   config = {
     itemTypes: {
@@ -24,6 +25,7 @@ class App extends Component {
   constructor() {
     super();
 
+    //initial state
     this.state = {
       items: [],
       points: 0,
@@ -39,18 +41,27 @@ class App extends Component {
     console.log(this.state);
   }
 
-  onItemClicked = () => {
-    // Fill this in!
-  }
+  onItemClicked = (type) => {
+    console.log('in the app type:')
+    console.log(type);
+
+    //wave 3
+    let totalPoints = this.state.points + 1;
+
+    if (type === "litter") {
+      this.setState({ points: totalPoints });
+    }
+  };
 
   render() {
     const items = this.state.items.map((item, i) => {
+      //calls GameItem component
       return <GameItem
                height={item.height}     // Height - used for a CSS style to position on the screen
                layer={100 + i}          // Layer - used for a CSS style to show items on-top of bg
                key={item.id}            // Key - to help React with performance
-
-               // Additional props (event callbacks, etc.) can be passed here
+               type={item.type}         //Type - attribute of const itemStyle in GameItem
+               onItemClickedCallback={this.onItemClicked} //  props (event callbacks, etc.) can be passed here
              />;
     });
 
@@ -60,12 +71,10 @@ class App extends Component {
           <h2 className="score">Litter Spotted: { this.state.points }</h2>
           <img className="logo" src={logo} alt="Litter Patrol logo" />
         </section>
-
-        <section className="level">
-          { this.levelBackground() }
+        <section className="level" onClick={this.onItemClicked}>
+          { this.levelBackground () }
           { items }
-        </section>
-
+          </section>
       </div>
     );
   }

src/components/GameItem.js

@@ -4,20 +4,45 @@ import ItemIcons from '../ItemIcons.js';
 import PropTypes from 'prop-types';
 
 class GameItem extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      displayTick: false,
+    };
+  }
+
+   //when player clicks, modifies state of displayTick
+    onIconClick = () => {
+    this.setState({ displayTick: true });
+    this.props.onItemClickedCallback(this.props.type);
+  };
 
 
   render() {
     const itemStyle = {
       bottom: `${this.props.height}px`, // use props.height to offset from the bottom of screen
       zIndex: this.props.layer, // use props.layer to set z-index, so we display ontop of background
+      type: this.props.type, //display the correct icon for each item.
     };
 
     // Update this to select the correct icon for each item
-    const icon = ItemIcons.rock;
+    const iconType = itemStyle.type;
+    console.log('type');
+    console.log(iconType);
+    const icon = ItemIcons[iconType];
+
+
+    //(this.state.displayTick)= true
+    //if clicked =correct icon, if icon type is litter, gets assigns class to render green check, if not, class assigns to render red x
+    let tickDisplay = false;
+    if (this.state.displayTick) {
+      tickDisplay = iconType === 'litter' ? 'spotted-litter' : 'spotted-nature';
+    };
 
     return (
-      <div className="game-item" style={itemStyle}>
-        <img src={icon} alt="Item" className="icon-item"></img>
+      <div className="game-item" style={itemStyle} onClick={this.onIconClick}>
+        <div className={tickDisplay}></div>
+        <img src={icon} alt={iconType} className="icon-item"></img>
       </div>
     );
   }