Sigrid Benezra - Edges - Litter Patrol

src/App.css

@@ -30,7 +30,7 @@ body {
   margin: 5px;
   cursor: pointer;
 
-  animation-duration: 4s;
+  animation-duration: 4s; /* orig 4s */
   animation-name: item-move;
   animation-timing-function: linear;
 

src/App.js

@@ -25,32 +25,46 @@ class App extends Component {
     super();
 
     this.state = {
-      items: [],
+      items: [], /* item array keeps track of items and if they've been spotted */
       points: 0,
     };
 
     // 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);
+    // console.log(this.state);
   }
 
-  onItemClicked = () => {
+  onItemClicked = (index) => {
     // Fill this in!
+    // This click handler is passed via props to GameItem
+    console.log("Item was clicked");
+    // identify item clicked on
+    console.log(index);
+    // change it's state to spotted
+    let updatedItemData = this.state.items;
+    updatedItemData[index].wasSpotted = true;
+    this.setState({items: updatedItemData});
+    console.log(this.state.items[index]);
   }
 
   render() {
+    // mapping over item array from state to create array of GameItems
+    // array of GameItems to be returned in return statement
     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
+               index={i}
+               type={item.type}
+               wasSpotted={false}
+               onClickCallback={this.onItemClicked}
              />;
     });
 

src/components/GameItem.js

@@ -5,6 +5,11 @@ import PropTypes from 'prop-types';
 
 class GameItem extends Component {
 
+  clickCallback = (e) => {
+    console.log("An item was clicked!");
+    console.log(this.props.index);
+    this.props.onClickCallback(this.props.index);
+  }
 
   render() {
     const itemStyle = {
@@ -13,11 +18,35 @@ class GameItem extends Component {
     };
 
     // Update this to select the correct icon for each item
-    const icon = ItemIcons.rock;
+    let icon;
+    let className = "game-item";
+
+    switch(this.props.type) {
+      case 'litter':
+        icon = ItemIcons.litter;
+        break;
+      case 'rock':
+        icon = ItemIcons.rock;
+        break;
+      case 'bush':
+        icon = ItemIcons.bush;
+        break;
+      case 'flower':
+        icon = ItemIcons.flower;
+        break;
+      default:
+        icon = ItemIcons.mushroom;
+    };
+
+    if (this.props.type === "litter" && this.props.wasSpotted) {
+      className = "game-item spotted-litter"
+    } else if (this.props.wasSpotted) {
+      className = "game-item spotted-nature";
+    }
 
     return (
-      <div className="game-item" style={itemStyle}>
-        <img src={icon} alt="Item" className="icon-item"></img>
+      <div className={className} style={itemStyle} onClick={this.clickCallback}>
+        <img src={icon} alt="Item" className="icon-item" />
       </div>
     );
   }
@@ -27,6 +56,7 @@ class GameItem extends Component {
 GameItem.propTypes = {
   height: PropTypes.number.isRequired,
   layer: PropTypes.number.isRequired,
+  type: PropTypes.string,
 }
 
 export default GameItem;