Sockets Tatiana

src/App.js

@@ -39,18 +39,26 @@ class App extends Component {
     console.log(this.state);
   }
 
-  onItemClicked = () => {
-    // Fill this in!
+  onItemClicked = (itemType) => {
+    // only add points when the item clicked is litter
+    console.log(this.state.points)
+    return () => {
+      if (itemType === "litter") {
+        this.setState({
+          points: this.state.points += 1
+        })
+      }
+    }
   }
 
   render() {
     const items = this.state.items.map((item, i) => {
       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
+        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
+        iconName={item.type}
+        onItemClicked={this.onItemClicked}
              />;
     });
 
@@ -63,7 +71,7 @@ class App extends Component {
 
         <section className="level">
           { this.levelBackground() }
-          { items }
+          {items}
         </section>
 
       </div>

src/components/GameItem.js

@@ -4,23 +4,39 @@ import ItemIcons from '../ItemIcons.js';
 import PropTypes from 'prop-types';
 
 class GameItem extends Component {
-  propTypes = {
+  static propTypes = {
     height: PropTypes.number.isRequired,
     layer: PropTypes.number.isRequired,
   }
 
+  constructor(props) {
+    super(props)
+    this.state = {
+      addClickCss: ""
+    }
+  }
+
+  onNatureItemClick = () => {
+    this.setState(
+      {
+        addClickCss: this.props.iconName === "litter" ?
+          "spotted-litter" : "spotted-nature"
+      })
+    this.props.onItemClicked(this.props.iconName)()
+    }
+
   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
     };
 
     // Update this to select the correct icon for each item
-    const icon = ItemIcons.rock;
+    const icon = ItemIcons[this.props.iconName];
 
     return (
-      <div className="game-item" style={itemStyle}>
-        <img src={icon} alt="Item" className="icon-item"></img>
+      <div className={`game-item ${this.state.addClickCss}`} onClick={this.onNatureItemClick} style={itemStyle}>
+        <img src={icon}  alt="Item" className="icon-item"></img>
       </div>
     );
   }