Beauttie/Blaine-Hot LAVA Tag(no woodchips) #24
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
spitsfire
reviewed
Jan 6, 2021
There was a problem hiding this comment.
React Tic Tac Toe
Major Learning Goals/Code Review
| 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 | Looks like you only have 5 commits, but the messages are descriptive |
| 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 |
Code Style Bonus Awards
Was the code particularly impressive in code style for any of these reasons (or more...?)
| Quality | Yes? |
|---|---|
| Perfect Indentation | ✅ |
| Descriptive/Readable | ✅ |
| Concise | ✅ |
| Logical/Organized | ✅ |
Comment on lines
+66
to
+89
| // shadowing the closure variable | ||
| const checkForWinner = (squares) => { | ||
| let newWinner = null; | ||
| for (let i = 0; i < 3; i++) { | ||
| // check each row | ||
| // empty string in JS is falsy | ||
| if (squares[i][0].value && | ||
| squares[i][0].value === squares[i][1].value && | ||
| squares[i][0].value === squares[i][2].value) { | ||
|
|
||
| newWinner = squares[i][0].value; | ||
| break; | ||
| // check each column | ||
| } else if (squares[0][i].value && | ||
| squares[0][i].value === squares[1][i].value && | ||
| squares[0][i].value === squares[2][i].value) { | ||
|
|
||
| const checkForWinner = () => { | ||
| // Complete in Wave 3 | ||
| // You will need to: | ||
| // 1. Go accross each row to see if | ||
| // 3 squares in the same row match | ||
| // i.e. same value | ||
| // 2. Go down each column to see if | ||
| // 3 squares in each column match | ||
| // 3. Go across each diagonal to see if | ||
| // all three squares have the same value. | ||
| newWinner = squares[0][i].value; | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| // check diagonals | ||
| if (squares[1][1].value && |
There was a problem hiding this comment.
great comments! They are nice and short but descriptive so that any coder can understand what your code is doing!
| const Board = ({ squares, onClickCallback }) => { | ||
| const squareList = generateSquareComponents(squares, onClickCallback); | ||
| console.log(squareList); | ||
| // console.log(squareList); |
There was a problem hiding this comment.
be sure to delete console.log lines completely before submitting!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
React Tic Tac Toe
Congratulations! You're submitting your assignment. Please reflect on the assignment with these questions.
Reflection
useStateconnected?CS Fundamentals Questions
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.