From 96ceb9c482f3f2587c2e68127bb205d2932ac187 Mon Sep 17 00:00:00 2001 From: Xtina <2006peacegypsy@gmail.com> Date: Thu, 29 Nov 2018 19:27:25 -0800 Subject: [PATCH 1/5] changed icons --- src/App.js | 102 +++++++++++++++++++++---------------- src/components/GameItem.js | 24 ++++----- 2 files changed, 69 insertions(+), 57 deletions(-) diff --git a/src/App.js b/src/App.js index 1ca7b71..3b00a89 100644 --- a/src/App.js +++ b/src/App.js @@ -1,32 +1,32 @@ -import React, { Component } from 'react'; -import uuid from 'uuid'; -import './App.css'; -import GameItem from './components/GameItem.js'; -import logo from './images/logo.png'; +import React, { Component } from "react"; +import uuid from "uuid"; +import "./App.css"; +import GameItem from "./components/GameItem.js"; +import logo from "./images/logo.png"; class App extends Component { config = { itemTypes: { // type: spawn rate (weighting) - litter: 20, - rock: 5, - bush: 5, - flower: 5, - mushroom: 5, + litter: 20, + rock: 5, + bush: 5, + flower: 5, + mushroom: 5 }, spawnRate: 1.2, // Hz spawnRateRnd: 1.79, // randomization factor spawnHeight: 100, // height of item spawn area in pixels spawnFloor: 0, // offset from bottom of game "level" in pixels - itemLifetime: 10 * 1000, // 10 seconds (should be longer than CSS animation time) - } + itemLifetime: 10 * 1000 // 10 seconds (should be longer than CSS animation time) + }; constructor() { super(); this.state = { items: [], - points: 0, + points: 0 }; // Uncomment this to spawn a single test item @@ -41,36 +41,36 @@ class App extends Component { onItemClicked = () => { // Fill this in! - } + }; render() { const items = this.state.items.map((item, i) => { - return ; + return ( + + ); }); return (
-

Litter Spotted: { this.state.points }

+

Litter Spotted: {this.state.points}

Litter Patrol logo
- { this.levelBackground() } - { items } + {this.levelBackground()} + {items}
-
); } - //////////////\\\\\\\\\\\\\\ // Implementation details \\ @@ -78,29 +78,29 @@ class App extends Component { const newState = {}; // Cull any items that are expired - const items = this.state.items.filter((item) => { + const items = this.state.items.filter(item => { return item.expiration !== null && item.expiration > time; }); - if(items.length !== this.state.items.length) { + if (items.length !== this.state.items.length) { newState.items = items; } // Should we spawn a new item? - const {spawnRate, spawnRateRnd} = this.config; - if(this.spawnItems && spawnRate > 0) { + const { spawnRate, spawnRateRnd } = this.config; + if (this.spawnItems && spawnRate > 0) { let spawnDelta = time - (this.lastSpawn || 0); // Randomize spawn rate - if(spawnRateRnd > 0) { + if (spawnRateRnd > 0) { const factor = 1 + Math.random() * spawnRateRnd; spawnDelta *= factor; } - if(spawnDelta >= (1 / spawnRate) * 1000) { + if (spawnDelta >= (1 / spawnRate) * 1000) { newState.items = [ ...(newState.items || this.state.items), - this.spawnItem(time), + this.spawnItem(time) ]; } } @@ -116,14 +116,18 @@ class App extends Component { const type = this.randomType(); const expiration = time + this.config.itemLifetime; - const height = Math.random() * this.config.spawnHeight + this.config.spawnFloor; + const height = + Math.random() * this.config.spawnHeight + this.config.spawnFloor; - return {id, type, expiration, height}; + return { id, type, expiration, height }; } randomType() { // Figure out the total of all the weighted types - const totalWeight = Object.values(this.config.itemTypes).reduce((l,r)=>l+r,0); + const totalWeight = Object.values(this.config.itemTypes).reduce( + (l, r) => l + r, + 0 + ); // Get a random value between zero and the total let choice = Math.random() * totalWeight; @@ -131,10 +135,10 @@ class App extends Component { // Loop through all item types and figure out which one we chose Object.entries(this.config.itemTypes).forEach(([type, weight]) => { - if(selectedType !== null) return; // We've already found our choice + if (selectedType !== null) return; // We've already found our choice // If the random value was less than this type's weight - if(choice <= weight) { + if (choice <= weight) { selectedType = type; // then we've selected it } else { choice -= weight; // otherwise move past this entry @@ -149,11 +153,23 @@ 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']; + const layers = [ + "clouds-1", + "clouds-2", + "clouds-3", + "clouds-4", + "hills-1", + "hills-2", + "bushes", + "trees-1", + "trees-2", + "ground" + ]; return (
- {layers.map(layer => (
))} + {layers.map(layer => ( +
+ ))}
); } @@ -167,7 +183,7 @@ class App extends Component { const newState = this.tick(Date.now()); - if(Object.keys(newState).length > 0) { + if (Object.keys(newState).length > 0) { this.setState(newState, callback); } else { callback(); @@ -178,7 +194,7 @@ class App extends Component { } componentWillUnmount() { - if(this.updateTimer !== null) { + if (this.updateTimer !== null) { clearInterval(this.updateTimer); } } diff --git a/src/components/GameItem.js b/src/components/GameItem.js index 673cee9..f4c276e 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -1,32 +1,28 @@ -import React, { Component } from 'react'; -import '../App.css'; -import ItemIcons from '../ItemIcons.js'; -import PropTypes from 'prop-types'; +import React, { Component } from "react"; +import "../App.css"; +import ItemIcons from "../ItemIcons.js"; +import PropTypes from "prop-types"; class GameItem extends Component { - - 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 + 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.type]; + console.log(icon); return (
- Item + Item
); } } - GameItem.propTypes = { height: PropTypes.number.isRequired, - layer: PropTypes.number.isRequired, -} + layer: PropTypes.number.isRequired +}; export default GameItem; From 203280c7f8f26af3977be129e2229174d8abb431 Mon Sep 17 00:00:00 2001 From: Xtina <2006peacegypsy@gmail.com> Date: Thu, 29 Nov 2018 22:02:52 -0800 Subject: [PATCH 2/5] fixed onClick check and x --- src/App.css | 48 +++++++++++++++++++------------------- src/components/GameItem.js | 36 ++++++++++++++++++++++++++-- 2 files changed, 58 insertions(+), 26 deletions(-) diff --git a/src/App.css b/src/App.css index 441dacf..d99844a 100644 --- a/src/App.css +++ b/src/App.css @@ -49,26 +49,26 @@ body { /* Assign this class when a litter item is clicked */ .spotted-litter::before { - content: '✓'; - position: absolute; - font-size: 12rem; - text-align: center; - width: 100%; - color: green; + content: "✓"; + position: absolute; + font-size: 12rem; + text-align: center; + width: 100%; + color: green; } /* Assign this class when a non-litter item is clicked */ .spotted-nature::before { - content: 'x'; - position: absolute; - font-size: 12rem; - text-align: center; - width: 100%; - color: darkred; + content: "x"; + position: absolute; + font-size: 12rem; + text-align: center; + width: 100%; + color: darkred; } .overall-data { - color: #FEFAE0; + color: #fefae0; } @keyframes item-move { @@ -87,7 +87,7 @@ body { height: 140vh; margin-top: -40vh; - background-image: url('images/background.png'); + background-image: url("images/background.png"); } .level-bg-clouds-1, @@ -116,61 +116,61 @@ body { .level-bg-clouds-1 { z-index: 11; - background-image: url('images/clouds-1.png'); + background-image: url("images/clouds-1.png"); animation-duration: 150s; } .level-bg-clouds-2 { z-index: 12; - background-image: url('images/clouds-2.png'); + background-image: url("images/clouds-2.png"); animation-duration: 140s; } .level-bg-clouds-3 { z-index: 13; - background-image: url('images/clouds-3.png'); + background-image: url("images/clouds-3.png"); animation-duration: 130s; } .level-bg-clouds-4 { z-index: 14; - background-image: url('images/clouds-4.png'); + background-image: url("images/clouds-4.png"); animation-duration: 120s; } .level-bg-hills-1 { z-index: 15; - background-image: url('images/hills-1.png'); + background-image: url("images/hills-1.png"); animation-duration: 90s; } .level-bg-hills-2 { z-index: 16; - background-image: url('images/hills-2.png'); + background-image: url("images/hills-2.png"); animation-duration: 80s; } .level-bg-bushes { z-index: 17; - background-image: url('images/bushes.png'); + background-image: url("images/bushes.png"); animation-duration: 60s; } .level-bg-trees-1 { z-index: 18; - background-image: url('images/trees-1.png'); + background-image: url("images/trees-1.png"); animation-duration: 55s; } .level-bg-trees-2 { z-index: 19; - background-image: url('images/trees-2.png'); + background-image: url("images/trees-2.png"); animation-duration: 50s; } .level-bg-ground { z-index: 20; - background-image: url('images/ground.png'); + background-image: url("images/ground.png"); animation-duration: 18s; /* Ground is down further to make for more play area */ diff --git a/src/components/GameItem.js b/src/components/GameItem.js index f4c276e..3a45659 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -4,16 +4,48 @@ import ItemIcons from "../ItemIcons.js"; import PropTypes from "prop-types"; class GameItem extends Component { + constructor(props) { + super(props); + this.state = { + checked: false, + divClass: "game-item" + }; + } + + changedToCheck = event => { + if (!this.state.checked) { + this.setState({ + checked: true + }); + + if (this.props.type === "litter") { + this.setState({ + divClass: "game-item spotted-litter" + }); + } else { + this.setState({ + divClass: "game-item spotted-nature" + }); + } + } + }; + 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 }; - const icon = ItemIcons[this.props.type]; + const icon = ItemIcons[`${this.props.type}`]; console.log(icon); + return ( -
+
Item
); From 7e562143ad7b631ddf07a000332bdae4a232ecf4 Mon Sep 17 00:00:00 2001 From: Xtina <2006peacegypsy@gmail.com> Date: Thu, 29 Nov 2018 23:07:35 -0800 Subject: [PATCH 3/5] working on points --- src/App.js | 5 +++-- src/components/GameItem.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/App.js b/src/App.js index 3b00a89..d58d7a7 100644 --- a/src/App.js +++ b/src/App.js @@ -38,8 +38,9 @@ class App extends Component { console.log(this.state); } - - onItemClicked = () => { + //The App component should have the code that actually updates the score, + onItemClicked = event => { + this.setState({ points: +1 }); // Fill this in! }; diff --git a/src/components/GameItem.js b/src/components/GameItem.js index 3a45659..a02fd54 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -11,7 +11,7 @@ class GameItem extends Component { divClass: "game-item" }; } - + //GameItem component is the only one that can actually handle the click event for that specific item, so you will need to write code to connect the two components. changedToCheck = event => { if (!this.state.checked) { this.setState({ From 9d7d03cf5de2617dccfc1974ecf9dd501b8270db Mon Sep 17 00:00:00 2001 From: Xtina <2006peacegypsy@gmail.com> Date: Thu, 29 Nov 2018 23:25:53 -0800 Subject: [PATCH 4/5] added onItemClicked sorting out connection --- src/App.js | 2 +- src/components/GameItem.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index d58d7a7..bdff67a 100644 --- a/src/App.js +++ b/src/App.js @@ -40,7 +40,7 @@ class App extends Component { } //The App component should have the code that actually updates the score, onItemClicked = event => { - this.setState({ points: +1 }); + this.setState({ points: this.state.points + 1 }); // Fill this in! }; diff --git a/src/components/GameItem.js b/src/components/GameItem.js index a02fd54..c7ed8c5 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -11,6 +11,7 @@ class GameItem extends Component { divClass: "game-item" }; } + //GameItem component is the only one that can actually handle the click event for that specific item, so you will need to write code to connect the two components. changedToCheck = event => { if (!this.state.checked) { @@ -20,7 +21,8 @@ class GameItem extends Component { if (this.props.type === "litter") { this.setState({ - divClass: "game-item spotted-litter" + divClass: "game-item spotted-litter", + points: this.state.points }); } else { this.setState({ @@ -45,6 +47,7 @@ class GameItem extends Component { style={itemStyle} id={this.props.index} onClick={this.changedToCheck} + points={this.state.points} > Item
From 0e52acbca510bc411a3aa9d12481a0b0e8c0e808 Mon Sep 17 00:00:00 2001 From: Xtina <2006peacegypsy@gmail.com> Date: Fri, 30 Nov 2018 10:15:21 -0800 Subject: [PATCH 5/5] fixed points --- src/App.js | 15 +++++++++++---- src/components/GameItem.js | 11 ++++++++--- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/App.js b/src/App.js index bdff67a..29890c5 100644 --- a/src/App.js +++ b/src/App.js @@ -39,11 +39,17 @@ class App extends Component { console.log(this.state); } //The App component should have the code that actually updates the score, - onItemClicked = event => { - this.setState({ points: this.state.points + 1 }); - // Fill this in! + // onItemClickedCallback = event => { + // this.setState({ points: this.state.points + 1 }); + // // Fill this in! + // }; + incrementPoints = event => { + // if (itemType === "litter") { + this.setState({ + points: this.state.points + 1 + }); + // } }; - render() { const items = this.state.items.map((item, i) => { return ( @@ -52,6 +58,7 @@ class App extends Component { 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} + clickCallback={this.incrementPoints} // Additional props (event callbacks, etc.) can be passed here /> ); diff --git a/src/components/GameItem.js b/src/components/GameItem.js index c7ed8c5..14ac298 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -11,7 +11,12 @@ class GameItem extends Component { divClass: "game-item" }; } - + onItemClicked = () => { + console.log(this); + if (this.state.clicked) { + this.setState({ clicked: false }); + } + }; //GameItem component is the only one that can actually handle the click event for that specific item, so you will need to write code to connect the two components. changedToCheck = event => { if (!this.state.checked) { @@ -20,9 +25,9 @@ class GameItem extends Component { }); if (this.props.type === "litter") { + this.props.clickCallback(); this.setState({ - divClass: "game-item spotted-litter", - points: this.state.points + divClass: "game-item spotted-litter" }); } else { this.setState({