Ports - Cloudy

src/App.css

@@ -30,13 +30,13 @@ body {
   margin: 5px;
   cursor: pointer;
 
-  animation-duration: 4s;
+  animation-duration: 5s;
   animation-name: item-move;
   animation-timing-function: linear;
 
   position: absolute;
-  left: -50%;
   display: inline;
+  transform: translateX(-50vw);
 }
 
 .icon-item {
@@ -73,11 +73,11 @@ body {
 
 @keyframes item-move {
   from {
-    left: -20%;
+    transform: translateX(-20vw);
   }
 
   to {
-    left: 100%;
+    transform: translateX(100vw);
   }
 }
 
@@ -105,13 +105,14 @@ body {
 
   position: absolute;
   top: -40vh;
-  left: 0;
+  left: -300vw;
 
   background-repeat: repeat-x;
 
   animation-iteration-count: infinite;
   animation-name: bg-move;
   animation-timing-function: linear;
+  width: 400vw;
 }
 
 .level-bg-clouds-1 {
@@ -179,10 +180,10 @@ body {
 
 @keyframes bg-move {
   from {
-    background-position: 0%;
+    transform: translateX(0);
   }
 
   to {
-    background-position: 300%;
+    transform: translateX(300vw);
   }
 }

src/App.js

@@ -29,9 +29,9 @@ class App extends Component {
       points: 0,
     };
 
-    // Uncomment this to spawn a single test item
-    //const testItem = this.spawnItem(Date.now());
-    //this.state.items.push(testItem);
+    //Uncomment this to spawn a single test item
+    // const testItem = this.spawnItem(Date.now());
+    // this.state.items.push(testItem);
 
     // Uncomment this to automatically spawn new items
     this.enableSpawner();
@@ -41,6 +41,9 @@ class App extends Component {
 
   onItemClicked = () => {
     // Fill this in!
+    // if(type === 'litter') {
+      this.setState({points: this.state.points + 1 });
+    // }
   }
 
   render() {
@@ -49,7 +52,8 @@ 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
-
+               type={item.type}        //Key - to help React with performance
+               spottedItemClickCallback={this.onItemClicked} //Key - to help react with clicker
                // Additional props (event callbacks, etc.) can be passed here
              />;
     });
@@ -70,7 +74,6 @@ class App extends Component {
     );
   }
 
-
   //////////////\\\\\\\\\\\\\\
   // Implementation details \\
 

src/components/GameItem.js

@@ -4,24 +4,54 @@ import ItemIcons from '../ItemIcons.js';
 import PropTypes from 'prop-types';
 
 class GameItem extends Component {
-  propTypes = {
+  constructor(props) {
+    super(props);
+    this.state = {
+      spot: false
+    };
+  }
+  static propTypes = {
     height: PropTypes.number.isRequired,
     layer: PropTypes.number.isRequired,
+    // type: PropTypes.string.isRequired,
   }
 
+   spottedItemClick = () => {
+    this.setState({
+      spot: true,
+    });
+
+    if (this.props.type === 'litter') {
+      this.props.spottedItemClickCallback()
+    };
+  }
   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;
+    // let checkOrX = 
+
+    // (this.state.spot) { //this -checkOrX- isnt worrrrrking 
+    //   const checkOrX = this.props.type === 'litter' ? 'spotted-litter' : 'spotted-nature'; //need to fix to thissssss ughhh
+    // }
+
+    // Update this to select the correct icon for each item [done]
+    const icon = ItemIcons[this.props.type];
 
+    let statusClass = 'game-item' 
+    if (this.state.spot === true && this.props.type === 'litter') {
+      statusClass = 'game-item spotted-litter'
+      }  else if (this.state.spot === true && this.props.type !== 'litter') {
+      statusClass = 'game-item spotted-nature'
+    } 
+    // console.log(this.state.spot)
     return (
-      <div className="game-item" style={itemStyle}>
+      <div className={statusClass} style={itemStyle} onClick={this.spottedItemClick}>
         <img src={icon} alt="Item" className="icon-item"></img>
       </div>
+
     );
   }
 }