diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE index f12b7d2..325eed7 100644 --- a/.github/PULL_REQUEST_TEMPLATE +++ b/.github/PULL_REQUEST_TEMPLATE @@ -4,15 +4,19 @@ Congratulations! You're submitting your assignment! ## Comprehension Questions Question | Answer --- | --- -How are events / event handlers and `this.state` connected? | -What are two ways to do "dynamic styling" with React? When should they be used? | -Much like Rails works with the HTTP request->response cycle, React works with the browser's input->output cycle. Describe React's cycle from receiving user input to outputting different page content. | -Compare how React and Rails' views differ. Given different circumstances, these systems have different goals. How does this impact on their design and how we are supposed to use them? | -What was a challenge you were able to overcome on this assignment? | +How are events / event handlers and `this.state` connected? | +What are two ways to do "dynamic styling" with React? When should they be used? | +Much like Rails works with the HTTP request->response cycle, React works with the browser's input->output cycle. Describe React's cycle from receiving user input to outputting different page content. | +Compare how React and Rails' views differ. Given different circumstances, these systems have different goals. How does this impact on their design and how we are supposed to use them? | +What was a challenge you were able to overcome on this assignment? | ## CS Fundamentals Questions Question | Answer --- | --- -Consider the code on the first few lines of `App.render` (it starts with `this.state.items.map`). What is the Big-O time complexity of this code, where n is the number of active game items? | -What part of React might benefit most from the use of specific data structure and algorithms? | -Consider what happens when React processes a state change from `setState` -- it must re-render all of the components that now have different content because of that change.
What kind of data structure are the components in, and what sort of algorithms would be appropriate for React's code to "traverse" those components?
Speculate wildly about what the Big-O time complexity of that code might be. | +Consider the code on the first few lines of `App.render` (it starts with `this.state.items.map`). What is the Big-O time complexity of this code, where n is the number of active game items? | +What part of React might benefit most from the use of specific data structure and algorithms? | + +Consider what happens when React processes a state change from `setState` -- it must re-render all of the components that now have different content because of that change.
What kind of data structure are the components in, and what sort of algorithms would be appropriate for React's code to "traverse" those components?
Speculate wildly about what the Big-O time complexity of that code might be. | O(n) + +what data to be held in higher level objects for easy accessibility. +sort of algorithms- effective as possible because its interactive, any place you want to render. diff --git a/src/App.js b/src/App.js index 1ca7b71..97794ed 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './App.css'; import GameItem from './components/GameItem.js'; import logo from './images/logo.png'; + class App extends Component { config = { itemTypes: { @@ -24,6 +25,7 @@ class App extends Component { constructor() { super(); + //initial state this.state = { items: [], points: 0, @@ -39,18 +41,27 @@ class App extends Component { console.log(this.state); } - onItemClicked = () => { - // Fill this in! - } + onItemClicked = (type) => { + console.log('in the app type:') + console.log(type); + + //wave 3 + let totalPoints = this.state.points + 1; + + if (type === "litter") { + this.setState({ points: totalPoints }); + } + }; render() { const items = this.state.items.map((item, i) => { + //calls GameItem component return ; }); @@ -60,12 +71,10 @@ class App extends Component {

Litter Spotted: { this.state.points }

Litter Patrol logo - -
- { this.levelBackground() } +
+ { this.levelBackground () } { items } -
- +
); } diff --git a/src/components/GameItem.js b/src/components/GameItem.js index 673cee9..69a3ecc 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -4,20 +4,45 @@ import ItemIcons from '../ItemIcons.js'; import PropTypes from 'prop-types'; class GameItem extends Component { + constructor(props) { + super(props); + this.state = { + displayTick: false, + }; + } + + //when player clicks, modifies state of displayTick + onIconClick = () => { + this.setState({ displayTick: true }); + this.props.onItemClickedCallback(this.props.type); + }; 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 + type: this.props.type, //display the correct icon for each item. }; // Update this to select the correct icon for each item - const icon = ItemIcons.rock; + const iconType = itemStyle.type; + console.log('type'); + console.log(iconType); + const icon = ItemIcons[iconType]; + + + //(this.state.displayTick)= true + //if clicked =correct icon, if icon type is litter, gets assigns class to render green check, if not, class assigns to render red x + let tickDisplay = false; + if (this.state.displayTick) { + tickDisplay = iconType === 'litter' ? 'spotted-litter' : 'spotted-nature'; + }; return ( -
- Item +
+
+ {iconType}
); }