From b5e0965a54ba2baa9850524a6785667ada3079b2 Mon Sep 17 00:00:00 2001 From: Shelan Date: Thu, 29 Nov 2018 22:20:45 -0800 Subject: [PATCH 1/3] updated render functions in app and g.i files --- src/App.js | 15 ++++++++------- src/components/GameItem.js | 27 ++++++++++++++++++++++++--- 2 files changed, 32 insertions(+), 10 deletions(-) diff --git a/src/App.js b/src/App.js index 1ca7b71..3ecf118 100644 --- a/src/App.js +++ b/src/App.js @@ -39,8 +39,10 @@ class App extends Component { console.log(this.state); } - onItemClicked = () => { + onItemClicked = (type) => { // Fill this in! + console.log('in the app type:') + console.log(type); } render() { @@ -49,7 +51,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} + onItemClickedCallback={this.onItemClicked} // Additional props (event callbacks, etc.) can be passed here />; }); @@ -60,12 +63,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..c98aa18 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -4,20 +4,41 @@ import ItemIcons from '../ItemIcons.js'; import PropTypes from 'prop-types'; class GameItem extends Component { + constructor(props) { + super(props); + this.state = { + displayTick: false, + }; + } + + 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, }; // 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]; + + let tickDisplay = null; + if (this.state.displayTick) { + tickDisplay = iconType === 'litter' ? 'spotted-litter' : 'spotted-nature'; + }; return ( -
- Item +
+
+ {iconType}
); } From 1c236472820688fb1e82600ed520392a4f587813 Mon Sep 17 00:00:00 2001 From: Shelan Date: Fri, 30 Nov 2018 15:31:47 -0800 Subject: [PATCH 2/3] GameItem indicate whether the spotted item was litter or not --- .github/PULL_REQUEST_TEMPLATE | 20 ++++++++++++-------- src/App.js | 9 +++++---- src/components/GameItem.js | 12 ++++++++---- 3 files changed, 25 insertions(+), 16 deletions(-) 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 3ecf118..22c2a55 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, @@ -40,20 +42,19 @@ class App extends Component { } onItemClicked = (type) => { - // Fill this in! console.log('in the app type:') console.log(type); } render() { const items = this.state.items.map((item, i) => { + //calls GameItem component return ; }); diff --git a/src/components/GameItem.js b/src/components/GameItem.js index c98aa18..d0011b4 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -10,8 +10,9 @@ class GameItem extends Component { displayTick: false, }; } - - onIconClick = () => { + //event handler + //when player clicks, modifies state of displayTick + onIconClick = () => { this.setState({ displayTick: true }); this.props.onItemClickedCallback(this.props.type); }; @@ -21,7 +22,7 @@ class GameItem extends Component { 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, + type: this.props.type, //display the correct icon for each item. }; // Update this to select the correct icon for each item @@ -30,7 +31,10 @@ class GameItem extends Component { console.log(iconType); const icon = ItemIcons[iconType]; - let tickDisplay = null; + + //(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'; }; From 05c8a15f705b932b452af8a96a65d79c84a0b2da Mon Sep 17 00:00:00 2001 From: Shelan Date: Sat, 1 Dec 2018 17:07:43 -0800 Subject: [PATCH 3/3] added total points --- src/App.js | 9 ++++++++- src/components/GameItem.js | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/App.js b/src/App.js index 22c2a55..97794ed 100644 --- a/src/App.js +++ b/src/App.js @@ -44,7 +44,14 @@ class App extends Component { 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) => { diff --git a/src/components/GameItem.js b/src/components/GameItem.js index d0011b4..69a3ecc 100644 --- a/src/components/GameItem.js +++ b/src/components/GameItem.js @@ -10,7 +10,7 @@ class GameItem extends Component { displayTick: false, }; } - //event handler + //when player clicks, modifies state of displayTick onIconClick = () => { this.setState({ displayTick: true });