Katherine Litter Patrol

src/App.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import uuid from 'uuid';
 import './App.css';
 import GameItem from './components/GameItem.js';
+import ItemIcons from './ItemIcons.js';
 import logo from './images/logo.png';
 
 class App extends Component {
@@ -39,15 +40,19 @@ class App extends Component {
     console.log(this.state);
   }
 
-  onItemClicked = () => {
-    // Fill this in!
+  handleItemClick = (itemType) => {//scoring based on item type clicked
+    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
+               layer={100 + i}
+               itemType={item.type} //prop for GameItem
+               onItemClick={this.handleItemClick}// 
                key={item.id}            // Key - to help React with performance
 
                // Additional props (event callbacks, etc.) can be passed here

src/components/GameItem.js

@@ -1,30 +1,55 @@
+//3rd party apps first
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import '../App.css';
 import ItemIcons from '../ItemIcons.js';
-import PropTypes from 'prop-types';
 
 class GameItem extends Component {
-
+//always send constructor and super props
+  constructor(props) {
+    super(props);
+//this is how you declare state on a variable, key = variable and value = empty string per PropTypes
+    this.state = { //state is managed by child
+      itemClass: '' //setting state for .css class selected
+    };
+  }
+//variable set to booleen - if prop type is litter select class litter else nature
+  handleItemClick = () => {
+    const itemClickedClass = (this.props.itemType === 'litter')
+      ? 'spotted-litter'
+      : 'spotted-nature';
+    this.setState({ itemClass: itemClickedClass }); // if varaible name same as state then just {itemClass}
+
+    //callback to app.js
+    if (this.props.onItemClick) {//onItemClick passed as prop to GameItem
+      this.props.onItemClick(this.props.itemType);//passing itemType prop to app.js
+    }
+  }
 
   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;
+    //Update this to select the correct icon for each item
+    //const icon = ItemIcons.rock;
+    const icon = ItemIcons[this.props.itemType]; //imported itemIcons key/value ItemIcons by prop type
 
     return (
-      <div className="game-item" style={itemStyle}>
+      <div
+        className={`game-item ${this.state.itemClass}`} //gave the class two .css styles
+        style={itemStyle} //itemClass is the state litter or nature .css
+        onClick={this.handleItemClick} //function defined above render
+      >
         <img src={icon} alt="Item" className="icon-item"></img>
       </div>
     );
   }
 }
 
-
-GameItem.propTypes = {
+GameItem.propTypes = { //props come from parent
+  itemType: PropTypes.string.isRequired,
   height: PropTypes.number.isRequired,
   layer: PropTypes.number.isRequired,
 }