From b67b0ef578f9225abe1307df137b6ec789404008 Mon Sep 17 00:00:00 2001 From: Jane Date: Wed, 28 Nov 2018 17:13:53 -0800 Subject: [PATCH 1/3] changed GameItem component to display the correct icon for each item --- src/App.js | 6 ++++-- src/components/GameItem.js | 17 +++++++++++++++-- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 1ca7b71..4399894 100644 --- a/src/App.js +++ b/src/App.js @@ -44,13 +44,16 @@ class App extends Component { } render() { + const items = this.state.items.map((item, i) => { + console.log("this is item[0] VV"); + console.log(item.type); return ; }); @@ -140,7 +143,6 @@ class App extends Component { choice -= weight; // otherwise move past this entry } }); - return selectedType; } diff --git a/src/components/GameItem.js b/src/components/GameItem.js index 673cee9..92b6616 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -13,11 +13,24 @@ class GameItem extends Component { }; // Update this to select the correct icon for each item - const icon = ItemIcons.rock; + // const icon = ItemIcons.rock; + + let icon = ItemIcons.litter + if (this.props.type === "litter"){ + icon = ItemIcons.litter + } else if (this.props.type === "rock") { + icon = ItemIcons.rock + } else if (this.props.type === "bush") { + icon = ItemIcons.bush + } else if (this.props.type === "flower") { + icon = ItemIcons.flower + } else { + icon = ItemIcons.mushroom + } return (
- Item + Item
); } From b5f191b97800c72b1448c7d4a4dfe291602c130f Mon Sep 17 00:00:00 2001 From: Jane Date: Wed, 28 Nov 2018 17:59:31 -0800 Subject: [PATCH 2/3] updated GameItem to remove giant if else statement --- src/components/GameItem.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/src/components/GameItem.js b/src/components/GameItem.js index 92b6616..5b2c214 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -15,18 +15,7 @@ class GameItem extends Component { // Update this to select the correct icon for each item // const icon = ItemIcons.rock; - let icon = ItemIcons.litter - if (this.props.type === "litter"){ - icon = ItemIcons.litter - } else if (this.props.type === "rock") { - icon = ItemIcons.rock - } else if (this.props.type === "bush") { - icon = ItemIcons.bush - } else if (this.props.type === "flower") { - icon = ItemIcons.flower - } else { - icon = ItemIcons.mushroom - } + let icon = ItemIcons[this.props.type] return (
From 88fa7e8579d91e05cd2c4800251583501d695224 Mon Sep 17 00:00:00 2001 From: Jane Date: Thu, 29 Nov 2018 23:45:02 -0800 Subject: [PATCH 3/3] possibly finished --- src/App.css | 2 +- src/App.js | 53 +++++++++++++++++++++++--------------- src/components/GameItem.js | 24 ++++++++++++++--- 3 files changed, 53 insertions(+), 26 deletions(-) diff --git a/src/App.css b/src/App.css index 441dacf..1dc812a 100644 --- a/src/App.css +++ b/src/App.css @@ -30,7 +30,7 @@ body { margin: 5px; cursor: pointer; - animation-duration: 4s; + animation-duration: 8s; animation-name: item-move; animation-timing-function: linear; diff --git a/src/App.js b/src/App.js index 4399894..0143474 100644 --- a/src/App.js +++ b/src/App.js @@ -30,8 +30,8 @@ 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(); @@ -39,35 +39,46 @@ class App extends Component { console.log(this.state); } - onItemClicked = () => { + onItemClicked = (index) => { // Fill this in! + let updatedPoints = this.state.points; + let updatedItems = this.state.items; + const item = this.state.items[index] + + if(item.type === "litter" && !(item.clicked)){ + updatedPoints += 1 + updatedItems[index].clicked = true + this.setState({ points: updatedPoints }); + this.setState({ items: updatedItems }); + } } render() { const items = this.state.items.map((item, i) => { - console.log("this is item[0] VV"); - console.log(item.type); + return ; + 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 + type={item.type} + pointsCallback={this.onItemClicked} + index={i} + />; }); return (
-
-

Litter Spotted: { this.state.points }

- Litter Patrol logo -
+
+

Litter Spotted: { this.state.points }

+ Litter Patrol logo +
-
- { this.levelBackground() } - { items } -
+
+ { this.levelBackground() } + { items } +
); @@ -152,10 +163,10 @@ class App extends Component { levelBackground() { const layers = ['clouds-1', 'clouds-2', 'clouds-3', 'clouds-4', - 'hills-1','hills-2','bushes','trees-1','trees-2','ground']; + 'hills-1','hills-2','bushes','trees-1','trees-2','ground']; return (
- {layers.map(layer => (
))} + {layers.map(layer => (
))}
); } diff --git a/src/components/GameItem.js b/src/components/GameItem.js index 5b2c214..dd5d082 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -4,7 +4,21 @@ import ItemIcons from '../ItemIcons.js'; import PropTypes from 'prop-types'; class GameItem extends Component { + constructor() { + super(); + this.state = { + litterSpottedClass: "", + }; + } + spotLitter = () =>{ + if (this.props.type === "litter"){ + this.setState({ litterSpottedClass: "spotted-litter" }); + } else { + this.setState({ litterSpottedClass: "spotted-nature" }); + } + this.props.pointsCallback(this.props.index) + } render() { const itemStyle = { @@ -14,12 +28,14 @@ class GameItem extends Component { // Update this to select the correct icon for each item // const icon = ItemIcons.rock; - - let icon = ItemIcons[this.props.type] + const icon = ItemIcons[this.props.type] return ( -
- Item +
+ Item +
); }