Jazz Litter Patrol

src/App.js

@@ -40,18 +40,22 @@ class App extends Component {
   }
 
   onItemClicked = () => {
-    // Fill this in!
+      this.setState({
+        points: this.state.points + 1
+      })
   }
 
   render() {
     const items = this.state.items.map((item, i) => {
-      return <GameItem
+      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}
+               litterClickCallback={this.onItemClicked}
              />;
+
     });
 
     return (

src/components/GameItem.js

@@ -5,6 +5,21 @@ import PropTypes from 'prop-types';
 
 class GameItem extends Component {
 
+  constructor(props) {
+    super(props)
+    this.state = {
+      spotted: false
+    }
+  }
+
+  clickItem = () => {
+    this.setState({
+      spotted: true
+    });
+     if (this.props.type === "litter") {
+       this.props.litterClickCallback();
+     };
+  }
 
   render() {
     const itemStyle = {
@@ -13,11 +28,16 @@ class GameItem extends Component {
     };
 
     // Update this to select the correct icon for each item
-    const icon = ItemIcons.rock;
+    const item = this.props.type;
+    const icon = ItemIcons[item];
+
+    const iconClass = this.props.type === "litter" ? "spotted-litter" : "spotted-nature";
+    const itemClass = this.state.spotted ? `game-item ${iconClass}` : "game-item";
+
 
     return (
-      <div className="game-item" style={itemStyle}>
-        <img src={icon} alt="Item" className="icon-item"></img>
+      <div className={itemClass} style={itemStyle}>
+        <img src={icon} alt="Item" className="icon-item" onClick={this.clickItem} ></img>
       </div>
     );
   }