-
-
Notifications
You must be signed in to change notification settings - Fork 201
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #16 from oslabs-beta/dev50
Merge into OS Labs Beta master branch
- Loading branch information
Showing
48 changed files
with
2,138 additions
and
1,330 deletions.
There are no files selected for viewing
This file contains 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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
|
|
||
| { | ||
| "presets": [ | ||
| "@babel/preset-env", | ||
| "@babel/preset-react" | ||
| ] | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| node_modules/ |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| { | ||
| "name": "typescript-module", | ||
| "version": "1.0.0", | ||
| "description": "", | ||
| "main": "index.js", | ||
| "scripts": { | ||
| "start": "webpack-dev-server", | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.16.7", | ||
| "@babel/preset-env": "^7.16.7", | ||
| "@babel/preset-react": "^7.16.7", | ||
| "@types/express": "^4.17.13", | ||
| "@types/node": "^17.0.8", | ||
| "@types/react": "^17.0.38", | ||
| "@types/react-dom": "^17.0.11", | ||
| "babel-loader": "^8.2.3", | ||
| "copy-webpack-plugin": "^10.2.0", | ||
| "css-loader": "^6.5.1", | ||
| "html-webpack-plugin": "^5.5.0", | ||
| "nodemon": "^2.0.15", | ||
| "ts-loader": "^9.2.6", | ||
| "typescript": "^4.5.4", | ||
| "webpack": "^5.65.0", | ||
| "webpack-cli": "^4.9.1", | ||
| "webpack-dev-server": "^4.7.2" | ||
| }, | ||
| "dependencies": { | ||
| "express": "^4.17.2", | ||
| "react": "^18.1.0", | ||
| "react-dom": "^18.1.0", | ||
| "react-router-dom": "^6.3.0", | ||
| "ts-node": "^10.4.0" | ||
| } | ||
| } |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import React, { Component } from 'react'; | ||
| import Row from './Row'; | ||
| import { BoardText, BoardContent, Scoreboard, Player } from './../../types'; | ||
|
|
||
| type BoardState = { | ||
| board: BoardContent; | ||
| currentPlayer: Player; | ||
| gameOver: boolean; | ||
| message: string; | ||
| scoreboard: Scoreboard; | ||
| }; | ||
|
|
||
| class Board extends Component<{}, BoardState> { | ||
| constructor(props: any) { | ||
| super(props); | ||
| this.state = { | ||
| board: this.newBoard(), | ||
| currentPlayer: 'X', | ||
| gameOver: false, | ||
| message: '', | ||
| scoreboard: { X: 0, O: 0 }, | ||
| }; | ||
|
|
||
| this.resetBoard = this.resetBoard.bind(this); | ||
| this.handleBoxClick = this.handleBoxClick.bind(this); | ||
| } | ||
|
|
||
| componentDidUpdate() { | ||
| this.checkForWinner(); | ||
| } | ||
|
|
||
| /** | ||
| * @method newBoard | ||
| * @description - returns a blank BoardContent array, | ||
| * for the start of a new game | ||
| */ | ||
| newBoard(): BoardContent { | ||
| return [ | ||
| ['-', '-', '-'], | ||
| ['-', '-', '-'], | ||
| ['-', '-', '-'], | ||
| ]; | ||
| } | ||
|
|
||
| /** | ||
| * @method resetBoard | ||
| * @description - sets to board object to be all '-', | ||
| * and sets gameOver and message to default state | ||
| */ | ||
| resetBoard(): void { | ||
| this.setState({ | ||
| gameOver: false, | ||
| board: this.newBoard(), | ||
| message: '', | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * @method checkForWinner | ||
| * @description - checks to see if either player has filled a row | ||
| * if so, ends the game and updates the message to declare winner | ||
| */ | ||
| checkForWinner(): void { | ||
| const { board, gameOver, currentPlayer } = this.state; | ||
|
|
||
| const spacesLeft = (): boolean => { | ||
| for (let i of board) { | ||
| if (i.includes('-')) return true; | ||
| } | ||
| return false; | ||
| }; | ||
|
|
||
| if (!gameOver) { | ||
| // win conditions: matching rows, columns, or diagonals, that are not empty('-') | ||
| if ( | ||
| (board[0][0] === board[0][1] && | ||
| board[0][1] === board[0][2] && | ||
| board[0][2] !== '-') || | ||
| (board[1][0] === board[1][1] && | ||
| board[1][1] === board[1][2] && | ||
| board[1][2] !== '-') || | ||
| (board[2][0] === board[2][1] && | ||
| board[2][1] === board[2][2] && | ||
| board[2][2] !== '-') || | ||
| (board[0][0] === board[1][0] && | ||
| board[1][0] === board[2][0] && | ||
| board[2][0] !== '-') || | ||
| (board[0][1] === board[1][1] && | ||
| board[1][1] === board[2][1] && | ||
| board[2][1] !== '-') || | ||
| (board[0][2] === board[1][2] && | ||
| board[1][2] === board[2][2] && | ||
| board[2][2] !== '-') || | ||
| (board[0][0] === board[1][1] && | ||
| board[1][1] === board[2][2] && | ||
| board[2][2] !== '-') || | ||
| (board[2][0] === board[1][1] && | ||
| board[1][1] === board[0][2] && | ||
| board[0][2] !== '-') | ||
| ) { | ||
| // winner is the person who's turn was previous | ||
| const winner: Player = currentPlayer === 'X' ? 'O' : 'X'; | ||
|
|
||
| this.setState({ | ||
| gameOver: true, | ||
| message: `Player ${winner} wins!`, | ||
| }); | ||
|
|
||
| // draw condition: no '-' remaining in board without above win condition triggering | ||
| } else if (!spacesLeft()) { | ||
| this.setState({ | ||
| gameOver: true, | ||
| message: 'Draw!', | ||
| }); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| handleBoxClick(row: number, column: number): void { | ||
| const boardCopy: BoardContent = [ | ||
| [...this.state.board[0]], | ||
| [...this.state.board[1]], | ||
| [...this.state.board[2]], | ||
| ]; | ||
| boardCopy[row][column] = this.state.currentPlayer; | ||
| const newPlayer: Player = this.state.currentPlayer === 'X' ? 'O' : 'X'; | ||
| this.setState({ board: boardCopy, currentPlayer: newPlayer }); | ||
| } | ||
|
|
||
| render() { | ||
| const rows: Array<JSX.Element> = []; | ||
| for (let i = 0; i < 3; i++) { | ||
| rows.push( | ||
| <Row | ||
| key={i} | ||
| row={i} | ||
| handleBoxClick={this.handleBoxClick} | ||
| values={this.state.board[i]} | ||
| /> | ||
| ); | ||
| } | ||
| const { X, O }: Scoreboard = this.state.scoreboard; | ||
|
|
||
| return ( | ||
| <div className="board"> | ||
| <h1>Tic Tac Toe</h1> | ||
| {this.state.gameOver && <h4>{this.state.message}</h4>} | ||
| {rows} | ||
| <button id="reset" onClick={this.resetBoard}> | ||
| Reset | ||
| </button> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default Board; |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import React from 'react'; | ||
| import { BoardText } from '../../types'; | ||
|
|
||
| type BoxProps = { | ||
| value: BoardText; | ||
| row: number; | ||
| column: number; | ||
| handleBoxClick: (row: number, column: number) => void; | ||
| }; | ||
|
|
||
| const Box = (props: BoxProps) => { | ||
| return ( | ||
| <button | ||
| className="box" | ||
| onClick={(e) => props.handleBoxClick(props.row, props.column)} | ||
| > | ||
| {props.value} | ||
| </button> | ||
| ); | ||
| }; | ||
|
|
||
| export default Box; |
This file contains 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import React from "react"; | ||
| import Increment from "./Increment"; | ||
|
|
||
| function Buttons() { | ||
| const buttons = []; | ||
| for (let i = 0; i < 4; i++){ | ||
| buttons.push(<Increment />) | ||
| } | ||
|
|
||
| return( | ||
| <div className="buttons"> | ||
| <h1>Stateful Buttons</h1> | ||
| <h4>These buttons are functional components that each manage their own state with the useState hook.</h4> | ||
| {buttons} | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Buttons; |
Oops, something went wrong.