Merge branch 'master' of github.com:AdaGold/react-tic-tac-toe into st…

…arter-code

.github/PULL_REQUEST_TEMPLATE

@@ -0,0 +1,35 @@
+# React Tic Tac Toe
+
+Congratulations! You're submitting your assignment!
+
+## Comprehension Questions
+Question | Answer
+--- | ---
+How are events / event handlers and `useState` 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. | 
+
+
+## CS Fundamentals Questions
+Question | Answer
+--- | ---
+What do you think is the BigO complexity of the method you use to compute a winner? | 
+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.<br>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?<br>Speculate wildly about what the Big-O time complexity of that code might be. | 
+
+# React Tic Tac Toe
+
+Congratulations! You're submitting your assignment!
+
+## Comprehension Questions
+Question | Answer
+--- | ---
+How are events / event handlers and `useState` 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. | 
+
+
+## CS Fundamentals Questions
+Question | Answer
+--- | ---
+What do you think is the BigO complexity of the method you use to compute a winner? | 
+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.<br>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?<br>Speculate wildly about what the Big-O time complexity of that code might be. | 

README.md

@@ -1,68 +1,85 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+# React Tic Tac Toe
 
-## Available Scripts
+## At A Glance
 
-In the project directory, you can run:
+- Individual [Stage 2 project](https://github.com/Ada-Developers-Academy/pedagogy/blob/master/classroom/rule-of-three.md#stage-2)
+- Due before class on DATE HERE
+- Due EOD Friday at 6pm on DATE HERE
 
-### `yarn start`
+## Learning Goals
 
-Runs the app in the development mode.<br />
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- Build React components which recieve data through props
+- Build container components which recieve data through props
+- Build a react component using state
+- Pass callback functions to child components and use them to update state
 
-The page will reload if you make edits.<br />
-You will also see any lint errors in the console.
+## Objective
 
-### `yarn test`
+We will create a Tic Tac Toe game which allows users to interact with the screen to add play the classic game.  If you are unfamilair with Tic Tac Toe, [you can read about it](https://www.thesprucecrafts.com/tic-tac-toe-game-rules-412170).
 
-Launches the test runner in the interactive watch mode.<br />
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+You can also [play with a working version of the game](https://adagold.github.io/react-tic-tac-toe/) on github pages!
 
-### `yarn build`
+## Getting Started
 
-Builds the app for production to the `build` folder.<br />
-It correctly bundles React in production mode and optimizes the build for the best performance.
+We have provided you an initial Application Skeleton generated with create-react-app. The application will have the following components:
 
-The build is minified and the filenames include the hashes.<br />
-Your app is ready to be deployed!
+- `Square` - This component represents one square in a tic-tac-toe board.  It will take in props representing the value to show on the board (`x`, `o`, or `''`), an `id`, and a callback function called `onClickCallback`.
+- `Board` - This component will take a callback function, `onClickCallback` and a list of 2D array of JavaScript objects with ids, and values and will render `Square` components each with ids, values and the callback function passed in as props.
+- `App` - This component is the traditional outer component of the React App. The App component will manage the state for the application and track the status for the game including the winner.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+## What's Already Here
 
-### `yarn eject`
+We have already implemented some pieces of this project:
 
-**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+- `Square.css` a css file for styling each square of the game.
+- `Board.css` a css file to style the game board
+- `App.css` a css file to 
+- `App.js` a starter `App` component
+- `Board.js` a starter `Board` component
+- `Square.js` a starter `Square` component.
 
-If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+## Setup Requirements
 
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+1. Fork and clone this repo
+1. Install this project's dependencies with `$ npm install`
+1. Start the local development server that runs our React project with `$ npm start`
 
-You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+## Wave 1
 
-## Learn More
+Update the `Board` component to render the grid of squares.  You will need to complete the  `generateSquareComponents` function in the `Board` component.
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+`App` should pass to `Board` a 2D array of JavaScript objects and Board should use that to render an array of `Square` components.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+Each `Square` component should take 2 props at this stage.
 
-### Code Splitting
+- `id` the Id of the square
+- `value` the value being displayed in the square
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+We have provided you a function `generateSquares` in `App.js` which generates a 2D array of JavaScript objects with Ids and values (blank strings).  These should be used to provide data to `Board` and `Square` via props.
 
-### Analyzing the Bundle Size
+## Wave 2
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+For Wave 2 you should add the functionality to change the value of a square when the user clicks on it.
 
-### Making a Progressive Web App
+To do so you will need to pass a callback function from `App` to `Board` and on to each square.  
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+You will need to write `onClickCallback` a callback function to call when the `Square` is clicked on and pass it through `Board` to each `Square` component.
 
-### Advanced Configuration
+When the user clicks first clicks on a square it should set the square's value to the proper `x` or `o` depending on the current player's turn.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+## Wave 3
 
-### Deployment
+For wave 3, you will add the game logic to detect if a player has one or if there is a tie (all squares filled and with no winner).  To do this you will complete the `checkForWinner` method and display the winner in the `header` section.  The game should also cease responding to clicks on the board if the game has a winner.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+## Wave 4
 
-### `yarn build` fails to minify
+For wave 4 you will add a button to the `App` component to reset the game and clear all the game squares.  
+
+## Optional - Deploy on the web
+
+For an optional bit of fun try to use [github pages](https://github.com/gitname/react-gh-pages) to deploy your game on the web!
+
+## What We Are Looking For
+
+Check out the [feedback template](feedback.md) which lists the items instructors will be looking for as they evaluate your project.
 
-This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

feedback.md

@@ -0,0 +1,51 @@
+# React Tic Tac Toe
+
+<!-- Instructors: The checkmarks are already there, so just delete them for any line items that aren't met. -->
+
+## Major Learning Goals/Code Review
+
+<!-- Instructors: Feel free to practice creating specific feedback by referencing a line of code if you'd like. For example, you may say something like "nice custom method in `App.rb` line 42." This is optional. -->
+
+| Criteria                                                                                           | yes/no, and optionally any details/lines of code to reference |
+| -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| Demonstrates proper JavaScript coding style.                                                       | ✔️?                                                           |
+| Correctly passes props to child components.                                                        | ✔️?                                                           |
+| Correctly passes callback functions to child components and calls them to respond to user events.) | ✔️?                                                           |
+| Maintains the status of the game in state.                                                         | ✔️?                                                           |
+| Practices git with at least 6 small commits and meaningful commit messages                         | ✔️?                                                           |
+| Uses existing stylesheets to render components                                                     | ✔️?                                                           |
+
+## Functional Requirements
+
+| Functional Requirement                                                                 | yes/no |
+| -------------------------------------------------------------------------------------- | ------ |
+| The Square component renders properly and executes the callback on a `click` event.    | ✔️?    |
+| The Board component renders a collection of squares                                    | ✔️?    |
+| The `App` component renders a board and uses state to maintain the status of the game. | ✔️?    |
+| Utilizes callbacks to UI events to update state                                        | ✔️?    |
+
+## Overall Feedback
+
+| Overall Feedback                | Criteria                                                                                                                                                                                      | yes/no |
+| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
+| Green (Meets/Exceeds Standards) | 5+ in Code Review && 3+ in Functional Requirements                                                                                                                                            |
+| Yellow (Approaches Standards)   | 4+ in Code Review && 2+ in Functional Requirements, or the instructor judges that this project needs special attention                                                                        |
+| Red (Not at Standard)           | 0-3 in Code Review or 0,1 in Functional Reqs, or assignment is breaking/doesn’t run with less than 5 minutes of debugging, or the instructor judges that this project needs special attention |
+
+<!-- ### Additional Feedback -->
+
+<!-- Instructors, feel free to ignore this section if there's nothing else to add. -->
+
+## Code Style Bonus Awards
+
+<!-- Instructors: Please strike a balance between liberal/stingy with these. These are simply built-in pieces of positive feedback; use this to encourage and push students towards a cleaner code style! -->
+
+Was the code particularly impressive in code style for any of these reasons (or more...?)
+
+| Quality              | Yes? |
+| -------------------- | ---- |
+| Perfect Indentation  | ✅    |
+| Elegant/Clever       | ✅    |
+| Descriptive/Readable | ✅    |
+| Concise              | ✅    |
+| Logical/Organized    | ✅    |