From 5c843445a8f6c908834c38dd34a6b0600b1cfa95 Mon Sep 17 00:00:00 2001
From: Jazz <jazziesf21@yahoo.com>
Date: Thu, 29 Nov 2018 16:03:43 -0800
Subject: [PATCH 1/2] wave 3

---
 src/App.js                 | 10 +++++++---
 src/components/GameItem.js | 23 ++++++++++++++++++++---
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 1ca7b71..e2729dc 100644
--- a/src/App.js
+++ b/src/App.js
@@ -40,18 +40,22 @@ class App extends Component {
   }
 
   onItemClicked = () => {
-    // Fill this in!
+    this.setState({
+      points: this.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.state.onItemClicked}
              />;
+
     });
 
     return (
diff --git a/src/components/GameItem.js b/src/components/GameItem.js
index 673cee9..06db585 100644
--- a/src/components/GameItem.js
+++ b/src/components/GameItem.js
@@ -5,6 +5,18 @@ import PropTypes from 'prop-types';
 
 class GameItem extends Component {
 
+  constructor(props) {
+    super(props)
+    this.state = {
+      spotted: false
+    }
+  }
+
+  clickItem = () => {
+    this.setState({
+      spotted: true
+    })
+  }
 
   render() {
     const itemStyle = {
@@ -13,11 +25,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>
     );
   }

From 0b0829665e44e270649ae43e2e2c3c1ec8235eac Mon Sep 17 00:00:00 2001
From: Jazz <jazziesf21@yahoo.com>
Date: Thu, 29 Nov 2018 17:06:26 -0800
Subject: [PATCH 2/2] wave 3 complete

---
 src/App.js                 | 8 ++++----
 src/components/GameItem.js | 5 ++++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/App.js b/src/App.js
index e2729dc..cba01e1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -40,9 +40,9 @@ class App extends Component {
   }
 
   onItemClicked = () => {
-    this.setState({
-      points: this.points += 1
-    })
+      this.setState({
+        points: this.state.points + 1
+      })
   }
 
   render() {
@@ -53,7 +53,7 @@ class App extends Component {
                key={item.id}            // Key - to help React with performance
                // Additional props (event callbacks, etc.) can be passed here
                type={item.type}
-               litterClickCallback={this.state.onItemClicked}
+               litterClickCallback={this.onItemClicked}
              />;
 
     });
diff --git a/src/components/GameItem.js b/src/components/GameItem.js
index 06db585..a70685c 100644
--- a/src/components/GameItem.js
+++ b/src/components/GameItem.js
@@ -15,7 +15,10 @@ class GameItem extends Component {
   clickItem = () => {
     this.setState({
       spotted: true
-    })
+    });
+     if (this.props.type === "litter") {
+       this.props.litterClickCallback();
+     };
   }
 
   render() {