Sockets - Carla

src/App.js

@@ -30,17 +30,21 @@ class App extends Component {
     };
 
     // Uncomment this to spawn a single test item
-    //const testItem = this.spawnItem(Date.now());
-    //this.state.items.push(testItem);
+    // const testItem = this.spawnItem(Date.now());
+    // this.state.items.push(testItem);
 
     // Uncomment this to automatically spawn new items
     this.enableSpawner();
 
     console.log(this.state);
+
   }
 
-  onItemClicked = () => {
-    // Fill this in!
+
+  onItemClicked = (itemType) => {
+    if(itemType === 'litter') {
+      this.setState({points: this.state.points + 1})
+    }
   }
 
   render() {
@@ -49,11 +53,13 @@ class App extends Component {
                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
+               itemType={item.type}
+               onItemClickedCallback={this.onItemClicked}
              />;
     });
 
+
+
     return (
       <div className="game">
         <section className="hud">

src/components/GameItem.js

@@ -3,23 +3,43 @@ import '../App.css';
 import ItemIcons from '../ItemIcons.js';
 import PropTypes from 'prop-types';
 
+
 class GameItem extends Component {
-  propTypes = {
+  constructor(props){
+    super(props)
+    this.state = {
+      spotted: false
+    }
+  }
+
+  static propTypes = {
     height: PropTypes.number.isRequired,
     layer: PropTypes.number.isRequired,
   }
 
+  onItemClick = () => {
+    this.setState({'spotted': true})
+
+    this.props.onItemClickedCallback(this.props.itemType)
+  }
+
   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.itemType];
+
+    let targetStyle = ''
+
+    if(this.state.spotted) {
+      targetStyle = (this.props.itemType === 'litter') ? 'spotted-litter' : 'spotted-nature' 
+    }
 
     return (
-      <div className="game-item" style={itemStyle}>
+      <div onClick={this.onItemClick} className={`game-item ${targetStyle}`} style={itemStyle}>
         <img src={icon} alt="Item" className="icon-item"></img>
       </div>
     );