diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index 09a972f..f484965 100644 --- a/README.md +++ b/README.md @@ -7,18 +7,22 @@ A collection of games to play in a web browser. See the full list of games in th Clone the repo, install npm dependencies, and start the server: ```shell-session -$ git clone git@github.com:GuildCrafts/browser-games.git +$ git clone git@github.com:mikeadossi/browser-games.git $ cd browser-games $ npm install ... +$ npm build +.. + $ npm start ... + Starting up http-server, serving ./public Available on: - http://127.0.0.1:4321 - http://10.0.1.11:4321 + http://127.0.0.1:8080 + http://10.0.1.11:8080 ``` -Then open `http://localhost:4321/` in your browser of choice and play away! +Then open `http://localhost:8080/` in your browser of choice and play away! diff --git a/index.html b/index.html new file mode 100644 index 0000000..e67013c --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + Bowser Games + + + + +
+ + + diff --git a/package.json b/package.json index be78d2e..c22e430 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,8 @@ "version": "0.0.0", "description": "A collection of games to play in a web browser.", "scripts": { - "start": "http-server ./public -p 4321" + "build": "./node_modules/bin/webpack", + "start": "./node_modules/.bin/webpack-dev-server" }, "repository": { "type": "git", @@ -19,7 +20,26 @@ "url": "https://github.com/GuildCrafts/browser-games/issues" }, "homepage": "https://github.com/GuildCrafts/browser-games#readme", + "devDependencies": { + "babel-cli": "^6.18.0", + "babel-preset-env": "^1.1.4", + "babel-preset-es2015": "^6.22.0", + "babel-preset-react": "^6.22.0", + "babel-register": "^6.18.0", + "react-hot-loader": "^1.3.1", + "react-scripts": "0.8.5", + "url-loader": "^0.5.8", + "webpack": "^1.14.0", + "webpack-dev-server": "^1.16.2" + }, "dependencies": { - "http-server": "^0.9.0" + "http-server": "^0.9.0", + "react": "^15.4.2", + "react-dom": "^15.4.2", + "react-router": "^4.0.0", + "react-router-dom": "*", + "webpack": "^1.14.0", + "webpack-dev-server": "^1.16.2", + "react-history": "*" } } diff --git a/public/css/.gitkeep b/public/css/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/public/img/.gitkeep b/public/img/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/public/index.html b/public/index.html deleted file mode 100644 index 278d291..0000000 --- a/public/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - Browser Games - - -

Browser Games

- -

A collection of games to play in a web browser.

- -
- - - - diff --git a/public/js/.gitkeep b/public/js/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/.DS_Store b/src/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/src/.DS_Store differ diff --git a/src/components/.DS_Store b/src/components/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/src/components/.DS_Store differ diff --git a/src/components/App/App.js b/src/components/App/App.js new file mode 100644 index 0000000..46ac49a --- /dev/null +++ b/src/components/App/App.js @@ -0,0 +1,28 @@ +import React from 'react'; +import './app.css'; +import Nav from 'components/Nav/Nav'; +import Home from 'components/Home/Home'; +import Footer from 'components/Footer/Footer'; +import TicTacToe from 'components/TicTacToe/TicTacToe'; +import Simon from 'components/Simon/Simon'; +import ConnectFour from 'components/ConnectFour/ConnectFour'; +import { Link, Route, HashRouter, Switch } from 'react-router-dom'; + +export default class App extends React.Component{ + + render(){ + return( +
+ + + + + + + + + +
+ ) + } +} diff --git a/src/components/App/app.css b/src/components/App/app.css new file mode 100644 index 0000000..0ae7eef --- /dev/null +++ b/src/components/App/app.css @@ -0,0 +1,10 @@ +.app_LoveYa_font{ + font-family: 'Love Ya Like A Sister', cursive; +} +.app_WendyOne_font{ + font-family: 'Wendy One', sans-serif; +} + +button:focus { + outline:0; +} diff --git a/src/components/ConnectFour/ConnectFour.css b/src/components/ConnectFour/ConnectFour.css new file mode 100644 index 0000000..fa75816 --- /dev/null +++ b/src/components/ConnectFour/ConnectFour.css @@ -0,0 +1,241 @@ +.connectFour{ + height:485px; + padding:0 6% 6% 6%; + width:160px; + min-height:620px; + margin:auto; + margin-top:-42px; +} + +.connectFour_container{ + background-color: transparent; + width: 300px; + text-align: center; + position: absolute; + z-index:3; + margin: 82px 0 0 -70px; + padding: 3% 3% 3% 0; +} + +.connectFour_title{ + margin-bottom:10px; +} + +.connectFour_interface{ + border: 2px solid black; + height: 264px; + width: 297px; + position: relative; + border-radius: 5px; +} + +.connectFour_nodes{ + background-color:steelblue; + height:16.7%; +} + +.connectFour_controls_btns{ + border:none; + border-radius:5px; + margin:2px; + min-width:40px; +} + +.connectFour_controls_btns:hover{ + color:white; + cursor:pointer; +} + +.connectFour_scoreboard{ + border:1px solid gainsboro; + margin-top:5px; + border-radius:5px; +} + +.connectFour_player_scores_container{ + border-bottom:1px solid gainsboro; + text-align:center; + width:100%; +} + +.connectFour_player1_scores{ + border-right:1px solid gainsboro; +} + +.connectFour_player1_scores, .connectFour_player2_scores{ + display:inline-block; + width:49.5%; +} + +.connectFour_player1_score{ + color:red; +} + +.connectFour_player2_score{ + color:orange; +} + +.connectFour_single_node{ + display:inline-block; + border-radius:50%; + height:68%; + width:13%; + margin-right:0.2%; + margin-top:3%; + content: ' '; + background-color:white; + position:relative; +} + +.connectFour_single_node:hover{ + cursor:pointer; + background-color:gainsboro; +} + +.connectFour_message{ + color:steelblue; + border-bottom:1px solid gainsboro; + padding: 5px 0 5px 0; +} + +.connectFour_yellow_coin{ + height: 30px; + width: 26px; +} + +.connectFour_red_mushroom{ + height: 30px; + width: 30px; +} + +.connectFour_gameover_reset, .connectFour_gameover_quit{ + border:none; + border-radius:5px; + margin:2px; +} + +.connectFour_lakituBoard{ + width: 303px; + text-align: center; + border: 2px solid skyblue; + background-size: 50px 50px; + padding: 2%; + margin: 120px 0 0 -87px; + border-radius:8px; +} + +.connectFour_lakituBoard_border{ + width:300px; + text-align:center; + border:2px solid skyblue; + background-size: 50px 50px; + border-radius:5px; + /*padding:20%; + margin: 120px 0 0 -86px;*/ +} + +.connectFour_gameover_container{ + margin-top: 120px; + margin-left: -42%; + background-color: oldlace; + border: 2px solid black; + padding: 30px; + width: 233px; + text-align: center; +} + +.connectFour_gameover_winner{ + color:indianred; + font-size:3em; + padding:5px; +} + +.connectFour_landing_title_text{ + margin-top:-20px; +} + +.connectFour_mushroom_img{ + width:66%; + margin-top:16%; +} + +.connectFour_coin_img{ + width:52%; + margin-top:16%; +} + +.connectFour_lakitu_img{ + position: absolute; + margin-top: -79px; + margin-left: 67px; + height: 35%; + width: 30%; + max-width: 142px; + max-height: 174px; + min-height: 180px; + min-width:90px; +} + +.connectFour_player_select_div{ + border: 2px solid skyblue; + margin-top:2%; + padding: 27% 5% 7vh 5%; +} + +.connectFour_player_character_border{ + border-radius: 50%; + border: 2px solid black; + height: 60px; + width: 60px; +} + +.connectFour_player1_query, .connectFour_player2_query{ + width:218px; + margin:auto; +} + +.connectFour_player_select_container{ + display:inline-block; + width:24%; +} + +.connectFour_player1_query_container, .connectFour_player2_query_container{ + display:inline-block; + width:76%; +} + +.connectFour_name1_input, .connectFour_name2_input{ + text-align: center; + font-size: 14px; + border: none; + border-bottom: 2px solid black; +} + +.connectFour_name1_input:focus, .connectFour_name2_input:focus{ + outline:none; +} + +.connectFour_player1_name_btn, .connectFour_player2_name_btn, .connectFour_player_quit_btn{ + border:2px solid black; + border-radius:5px; + margin-top:10px; + width:50%; + background-color:white; + margin-right:2px; +} + +.connectFour_player1_name_btn:hover, .connectFour_player2_name_btn:hover, .connectFour_player_quit_btn:hover{ + background-color:papayawhip; + cursor:pointer; +} + + + +@media (max-width: 490px){ + + .connectFour_lakituBoard{ + /*padding:0 0 20px 0;*/ + margin: 120px 0 0 -76px; + } + +} diff --git a/src/components/ConnectFour/ConnectFour.js b/src/components/ConnectFour/ConnectFour.js new file mode 100644 index 0000000..54b6646 --- /dev/null +++ b/src/components/ConnectFour/ConnectFour.js @@ -0,0 +1,777 @@ +import React from 'react'; +import './connectFour.css'; +import Nav from 'components/Nav/Nav'; +import Footer from 'components/Footer/Footer'; + +export default class ConnectFour extends React.Component{ + constructor(props){ + super(props) + this.state = { + connectFour_player1_name : '', + connectFour_player2_name : '', + connectFour_landing_display : 'block', + connectFour_player2Select_display : 'none', + connectFour_gameBoard_display : 'none', + connectFour_gameover_display : 'none', + connectFour_winner : '', + connectFour_input_val : '', + connectFour_player : 'player 1', + connectFour_board : [], + connectFour_vertical_board : [], + connectFour_insert_piece_at_position : [], + connectFour_insert_piece_at_vertical_position : [], + connectFour_player1_score : 0, + connectFour_player2_score : 0, + connectFour_ingame_msg : "NEW GAME! player 1's turn", + connectFour_coin_img : '', + connectFour_angled_lr_board : [], + connectFour_angled_rl_board : [], + connectFour_remaining_combinations : '' + // connectFour_player_query : , + // connectFour_display_none : 'none', + // connectFour_insert_piece_angled_lr : [], + } + + this.ConnectFourGameBoard = ConnectFourGameBoard.bind(this); + this.ConnectFourLandingScreen = ConnectFourLandingScreen.bind(this); + this.ConnectFourPlayer2SelectScreen = ConnectFourPlayer2SelectScreen.bind(this); + this.ConnectFourGameOver = ConnectFourGameOver.bind(this); + this.handleKeyPress = this.handleKeyPress.bind(this); + this.connectFourStorePlayerName = this.connectFourStorePlayerName.bind(this); + this.Player1_query = Player1_query.bind(this); + this.Player2_query = Player2_query.bind(this); + this.connectFourSaveInput = this.connectFourSaveInput.bind(this); + this.connectFourAddNewPiece = this.connectFourAddNewPiece.bind(this); + this.connectFourConstructBoard.bind(this); + this.connectFourFill = this.connectFourFill.bind(this); + this.connectFourResetGame = this.connectFourResetGame.bind(this); + this.connectFourQuitGame = this.connectFourQuitGame.bind(this); + this.checkLeftToRightAngledArrays = this.checkLeftToRightAngledArrays.bind(this); + this.checkRightToLeftAngledArrays = this.checkRightToLeftAngledArrays.bind(this); + this.connectFour_CheckForRemainingConnections = this.connectFour_CheckForRemainingConnections.bind(this); + this.connectFourSkipPlayer1NameEntry = this.connectFourSkipPlayer1NameEntry.bind(this); + this.connectFourSkipPlayer2NameEntry = this.connectFourSkipPlayer2NameEntry.bind(this); + // this.connectFourResetGame = this.connectFourResetGame.bind(this); + // this.connectFourWinnerWasFound = this.connectFourWinnerWasFound.bind(this); + // this.connectFourUpdateBoard = this.connectFourUpdateBoard.bind(this); + } + + componentWillMount() { + this.connectFourConstructBoard(); + this.connectFour_CheckForRemainingConnections(); + } + + connectFourResetGame(){ + this.setState({ + connectFour_landing_display : 'none', + connectFour_player2Select_display : 'none', + connectFour_gameBoard_display : 'block', + connectFour_gameover_display : 'none', + connectFour_player : 'player 1', + connectFour_board : [], + connectFour_vertical_board : [], + connectFour_insert_piece_at_position : [], + connectFour_insert_piece_at_vertical_position : [], + connectFour_player1_score : 0, + connectFour_player2_score : 0, + connectFour_ingame_msg : "NEW GAME! player 1's turn", + connectFour_coin_img : '', + connectFour_angled_lr_board : [], + connectFour_remaining_combinations : '' + // connectFour_insert_piece_angled_lr : [], + }) + this.connectFourConstructBoard(); + } + + connectFourSkipPlayer1NameEntry(){ + this.setState({ + connectFour_landing_display : 'none', + connectFour_player2Select_display : 'block', + connectFour_gameBoard_display : 'none', + connectFour_gameover_display : 'none', + connectFour_player1_name : 'player 1' + }) + } + + connectFourSkipPlayer2NameEntry(){ + this.setState({ + connectFour_landing_display : 'none', + connectFour_player2Select_display : 'none', + connectFour_gameBoard_display : 'block', + connectFour_gameover_display : 'none', + connectFour_player2_name : 'player 2', + }) + } + + connectFourQuitGame(){ + this.setState({ + connectFour_player1_name : '', + connectFour_player2_name : '', + connectFour_landing_display : 'block', + connectFour_player2Select_display : 'none', + connectFour_gameBoard_display : 'none', + connectFour_gameover_display : 'none', + connectFour_player : 'player 1', + connectFour_board : [], + connectFour_vertical_board : [], + connectFour_insert_piece_at_position : [], + connectFour_insert_piece_at_vertical_position : [], + connectFour_player1_score : 0, + connectFour_player2_score : 0, + connectFour_ingame_msg : "NEW GAME! player 1's turn", + connectFour_coin_img : '', + connectFour_angled_lr_board : [], + connectFour_remaining_combinations : '' + // connectFour_insert_piece_angled_lr : [], + }) + this.connectFourConstructBoard(); + } + + connectFourConstructBoard(){ + + let connectFour_board = this.state.connectFour_board; + let connectFour_vertical_board = this.state.connectFour_vertical_board; + let connectFour_insert_piece_at_position = this.state.connectFour_insert_piece_at_position; + let connectFour_insert_piece_at_vertical_position = this.state.connectFour_insert_piece_at_vertical_position; + let connectFour_angled_lr_board = this.state.connectFour_angled_lr_board; + let connectFour_angled_rl_board = this.state.connectFour_angled_rl_board; + // let connectFour_insert_piece_angled_lr = this.state.connectFour_insert_piece_angled_lr; + + for(let i = 0; i < 6; i++){ + connectFour_board[i] = []; + connectFour_insert_piece_at_position[i] = []; + for(let x = 0; x < 7; x++){ + connectFour_board[i][x] = ''; + connectFour_insert_piece_at_position[i][x] = ''; + } + } + + for(let i = 0; i < 7; i++){ + connectFour_vertical_board[i] = []; + connectFour_insert_piece_at_vertical_position[i] = []; + for(let x = 0; x < 6; x++){ + connectFour_vertical_board[i][x] = ''; + connectFour_insert_piece_at_vertical_position[i][x] = ''; + } + } + + connectFour_angled_lr_board = [ + ['','','',''], + ['','','','',''], + ['','','','','',''], + ['','','','','',''], + ['','','','',''], + ['','','',''] + ] + + connectFour_angled_rl_board = [ + ['','','',''], + ['','','','',''], + ['','','','','',''], + ['','','','','',''], + ['','','','',''], + ['','','',''] + ] + + + + + this.setState({ + connectFour_board : connectFour_board, + connectFour_vertical_board : connectFour_vertical_board, + connectFour_insert_piece_at_position : connectFour_insert_piece_at_position, + connectFour_insert_piece_at_vertical_position : connectFour_insert_piece_at_vertical_position, + connectFour_angled_lr_board : connectFour_angled_lr_board, + connectFour_angled_rl_board : connectFour_angled_rl_board + }) + + } + + connectFour_CheckForRemainingConnections(){ + + let check = function(arr){ + let totz = 0; + let currentCombo; + let combinations = 0; //let solArr; + loop1:for(let i = 0; i < arr.length; i++){ //solArr = []; //console.log('i: '+i+' is ['+arr[i]+']') + loop2:for(let x = 0; x < arr[i].length; x++){ + if(combinations > 2){ + totz += 1; //console.log('totz ',i,': ',solArr) + break loop2; + } else if(arr[i][x] === ''){ + combinations += 1; //solArr.push(arr[i][x]); + } else if(arr[i][x] !== '' && currentCombo === undefined){ + currentCombo = arr[i][x]; //console.log(i+' has '+combinations+' combinations!') + } else if(arr[i][x] !== '' && arr[i][x] !== currentCombo){ + currentCombo = arr[i][x]; //console.log(i+' has '+combinations+' combinations!') + if(combinations > 0){ combinations = 0; } + } else if(currentCombo === arr[i][x]){ //console.log('i: ',i); console.log(i+' has '+combinations+' combinations!') + combinations += 1; //solArr.push(arr[i][x]); + } + } combinations = 0; currentCombo = undefined; + } + return totz; + } + + let connectFour_board = this.state.connectFour_board; + let connectFour_vertical_board = this.state.connectFour_vertical_board; + let connectFour_angled_lr_board = this.state.connectFour_angled_lr_board; + let connectFour_angled_rl_board = this.state.connectFour_angled_rl_board; + let remaining_combinations = 0; + + console.log('board => ',connectFour_board) + console.log('vertical => ',connectFour_vertical_board) + console.log('RightL => ',connectFour_angled_rl_board) + console.log('LeftR => ',connectFour_angled_lr_board) + remaining_combinations += check(connectFour_board); + console.log('check(connectFour_board): ',check(connectFour_board)) + remaining_combinations += check(connectFour_vertical_board); + console.log('check(connectFour_vertical_board): ',check(connectFour_vertical_board)) + remaining_combinations += check(connectFour_angled_rl_board); + console.log('check(connectFour_angled_rl_board): ',check(connectFour_angled_rl_board)) + remaining_combinations += check(connectFour_angled_lr_board); + console.log('check(connectFour_angled_lr_board): ',check(connectFour_angled_lr_board)) + console.log('remaining_combinations =========================> ',remaining_combinations) + + this.setState({ + connectFour_remaining_combinations : remaining_combinations + }) + } + + connectFourAddNewPiece( outerArr, innerPos, numberedPos ){ + let connectFour_board = this.state.connectFour_board; + let connectFour_vertical_board = this.state.connectFour_vertical_board; + let player = this.state.connectFour_player; + let currentPlayerCharacter; + let connectFour_insert_piece_at_position = this.state.connectFour_insert_piece_at_position; + let connectFour_insert_piece_at_vertical_position = this.state.connectFour_insert_piece_at_vertical_position; + + + if(outerArr <= 4 && connectFour_vertical_board[innerPos][outerArr+1] === ''){ + let message = 'illegal move... try again '+player + this.setState({ + connectFour_ingame_msg : message + }) + return + } + + if(connectFour_board[outerArr][innerPos] === 'player 1' || connectFour_board[outerArr][innerPos] === 'player 2'){ + let message = 'Occupied! try again '+player + this.setState({ + connectFour_ingame_msg : message + }) + return + } + + connectFour_board[outerArr][innerPos] = player; + connectFour_vertical_board[innerPos][outerArr] = player; + + this.connectFourFill( outerArr, innerPos ); + + + + // CHECK HORIZONTAL ARRAYS + if(connectFour_board[outerArr].indexOf(player) >= 0){ + + let arrayToCheck = outerArr + let firstOccurence = connectFour_board[arrayToCheck].indexOf(player); // this returns the first occurence of our x/y character + let foundCount = 0; + + for(let i = 0; i < 5; i++){ + if(connectFour_board[arrayToCheck][firstOccurence+i] === player){ + foundCount += 1; + } + } + + + if(foundCount === 4){ + let connectFour_player1_score = this.state.connectFour_player1_score; + let connectFour_player2_score = this.state.connectFour_player2_score; + console.log('========> we have a winner: ',player,' <=========') + if(player === 'player 1'){ + connectFour_player1_score += 1 + this.setState({ + connectFour_player1_score : connectFour_player1_score + }) + } else { + connectFour_player2_score += 1 + this.setState({ + connectFour_player2_score : connectFour_player2_score + }) + } + } + + + } + + + + // CHECK VERTICAL ARRAYS + if(connectFour_vertical_board[innerPos].indexOf(player) >= 0){ + + let arrayToCheck = innerPos + let firstOccurence = connectFour_vertical_board[arrayToCheck].indexOf(player); // this returns the first occurence of our x/y character + let foundCount = 0; + + for(let i = 0; i < 5; i++){ + if(connectFour_vertical_board[arrayToCheck][firstOccurence+i] === player){ + foundCount += 1; + } + } + + if(foundCount === 4){ + let connectFour_player1_score = this.state.connectFour_player1_score; + let connectFour_player2_score = this.state.connectFour_player2_score; + + console.log('========> we have a winner: ',player,' <=========') + if(player === 'player 1'){ + connectFour_player1_score += 1 + this.setState({ + connectFour_player1_score : connectFour_player1_score + }) + } else { + connectFour_player2_score += 1 + this.setState({ + connectFour_player2_score : connectFour_player2_score + }) + } + } + } + + this.setState({ + connectFour_board : connectFour_board, + connectFour_vertical_board : connectFour_vertical_board + }) + + player === 'player 1' ? player = 'player 2' : player = 'player 1'; + this.setState({ + connectFour_player : player + }) + + this.connectFour_CheckForRemainingConnections() + let connectFour_remaining_combinations = this.state.connectFour_remaining_combinations; + + if(connectFour_remaining_combinations === 0){ + let winner; + let player1_score = this.state.player1_score; + let player2_score = this.state.player2_score; + player1_score > player2_score ? winner = 'player 1' : winner = 'player 2' + this.setState({ + connectFour_landing_display : 'none', + connectFour_player2Select_display : 'none', + connectFour_gameBoard_display : 'none', + connectFour_gameover_display : 'block', + connectFour_winner : winner + }) + return + } + + + } + + checkLeftToRightAngledArrays( outerArr, innerPos ){ + let connectFour_angled_lr_board = this.state.connectFour_angled_lr_board; + let player = this.state.connectFour_player; + console.log(player,"'s lr below: ") + + connectFour_angled_lr_board[outerArr][innerPos] = player; + + let arrayToCheck = outerArr; + let firstOccurence = connectFour_angled_lr_board[arrayToCheck].indexOf(player); + let foundCount = 0; + + for(let i = 0; i < 5; i++){ + if(connectFour_angled_lr_board[arrayToCheck][firstOccurence+i] === player){ + foundCount += 1; + } + } + + if(foundCount === 4){ + let connectFour_player1_score = this.state.connectFour_player1_score; + let connectFour_player2_score = this.state.connectFour_player2_score; + console.log('========> we have a winner: ',player,' <=========') + if(player === 'player 1'){ + connectFour_player1_score += 1 + this.setState({ + connectFour_player1_score : connectFour_player1_score + }) + } else { + connectFour_player2_score += 1 + this.setState({ + connectFour_player2_score : connectFour_player2_score + }) + } + } + + let lr = this.state.connectFour_angled_lr_board; + console.log('$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$') + console.log( + 'LEFT TO RIGHT','\n', + '[','\n', + '[',lr[0][0],',',lr[0][1],',',lr[0][2],',',lr[0][3],']','\n', + '[',lr[1][0],',',lr[1][1],',',lr[1][2],',',lr[1][3],',',lr[1][4],']','\n', + '[',lr[2][0],',',lr[2][1],',',lr[2][2],',',lr[2][3],',',lr[2][4],',',lr[2][5],']','\n', + '[',lr[3][0],',',lr[3][1],',',lr[3][2],',',lr[3][3],',',lr[3][4],',',lr[3][5],']','\n', + '[',lr[4][0],',',lr[4][1],',',lr[4][2],',',lr[4][3],',',lr[4][4],']','\n', + '[',lr[5][0],',',lr[5][1],',',lr[5][2],',',lr[5][3],']','\n', + ']' + ) + + } + + checkRightToLeftAngledArrays( outerArr, innerPos ){ + let connectFour_angled_rl_board = this.state.connectFour_angled_rl_board; + let player = this.state.connectFour_player; + console.log(player,"'s rl below: ") + + connectFour_angled_rl_board[outerArr][innerPos] = player; + + let arrayToCheck = outerArr; + let firstOccurence = connectFour_angled_rl_board[arrayToCheck].indexOf(player); + let foundCount = 0; + + for(let i = 0; i < 5; i++){ + if(connectFour_angled_rl_board[arrayToCheck][firstOccurence+i] === player){ + foundCount += 1; + } + } + + if(foundCount === 4){ + let connectFour_player1_score = this.state.connectFour_player1_score; + let connectFour_player2_score = this.state.connectFour_player2_score; + + console.log('========> we have a winner: ',player,' <=========') + if(player === 'player 1'){ + connectFour_player1_score += 1 + this.setState({ + connectFour_player1_score : connectFour_player1_score + }) + } else { + connectFour_player2_score += 1 + this.setState({ + connectFour_player2_score : connectFour_player2_score + }) + } + } + + let rl = this.state.connectFour_angled_rl_board; + console.log( + 'RIGHT TO LEFT','\n', + '[','\n', + '[',rl[0][0],',',rl[0][1],',',rl[0][2],',',rl[0][3],']','\n', + '[',rl[1][0],',',rl[1][1],',',rl[1][2],',',rl[1][3],',',rl[1][4],']','\n', + '[',rl[2][0],',',rl[2][1],',',rl[2][2],',',rl[2][3],',',rl[2][4],',',rl[2][5],']','\n', + '[',rl[3][0],',',rl[3][1],',',rl[3][2],',',rl[3][3],',',rl[3][4],',',rl[3][5],']','\n', + '[',rl[4][0],',',rl[4][1],',',rl[4][2],',',rl[4][3],',',rl[4][4],']','\n', + '[',rl[5][0],',',rl[5][1],',',rl[5][2],',',rl[5][3],']','\n', + ']' + ) + + let board = this.state.connectFour_board; + console.log( + 'BOARD','\n', + '[','\n', + '[',board[0][0],',',board[0][1],',',board[0][2],',',board[0][3],',',board[0][4],',',board[0][5],',',board[0][6],']','\n', + '[',board[1][0],',',board[1][1],',',board[1][2],',',board[1][3],',',board[1][4],',',board[1][5],',',board[1][6],']','\n', + '[',board[2][0],',',board[2][1],',',board[2][2],',',board[2][3],',',board[2][4],',',board[2][5],',',board[2][6],']','\n', + '[',board[3][0],',',board[3][1],',',board[3][2],',',board[3][3],',',board[3][4],',',board[3][5],',',board[3][6],']','\n', + '[',board[4][0],',',board[4][1],',',board[4][2],',',board[4][3],',',board[4][4],',',board[4][5],',',board[4][6],']','\n', + '[',board[5][0],',',board[5][1],',',board[5][2],',',board[5][3],',',board[5][4],',',board[5][5],',',board[5][6],']','\n', + ']' + ) + + let vb = this.state.connectFour_vertical_board; + console.log( + 'VERTICAL BOARD','\n', + '[','\n', + '[',vb[0][0],',',vb[0][1],',',vb[0][2],',',vb[0][3],',',vb[0][4],',',vb[0][5],']','\n', + '[',vb[1][0],',',vb[1][1],',',vb[1][2],',',vb[1][3],',',vb[1][4],',',vb[1][5],']','\n', + '[',vb[2][0],',',vb[2][1],',',vb[2][2],',',vb[2][3],',',vb[2][4],',',vb[2][5],']','\n', + '[',vb[3][0],',',vb[3][1],',',vb[3][2],',',vb[3][3],',',vb[3][4],',',vb[3][5],']','\n', + '[',vb[4][0],',',vb[4][1],',',vb[4][2],',',vb[4][3],',',vb[4][4],',',vb[4][5],']','\n', + '[',vb[5][0],',',vb[5][1],',',vb[5][2],',',vb[5][3],',',vb[5][4],',',vb[5][5],']','\n', + '[',vb[6][0],',',vb[6][1],',',vb[6][2],',',vb[6][3],',',vb[6][4],',',vb[6][5],']','\n', + ']' + ) + + } + + connectFourFill( outerArr, innerPos ){ + let connectFour_board = this.state.connectFour_board; + let piece; + let player = this.state.connectFour_player; + let connectFour_insert_piece_at_position = this.state.connectFour_insert_piece_at_position; + let connectFour_insert_piece_at_vertical_position = this.state.connectFour_insert_piece_at_vertical_position; + let connectFour_vertical_board = this.state.connectFour_vertical_board; + + player === 'player 1' ? piece = : piece = + // console.log('piece: ',piece) + connectFour_insert_piece_at_position[outerArr][innerPos] = piece; + + + let playerUpNext; + player === 'player 1' ? playerUpNext = 'player 2' : playerUpNext = 'player 1'; + let message = playerUpNext+"'s turn"; + + connectFour_board[outerArr][innerPos] = player; + connectFour_vertical_board[innerPos][outerArr] = player; + this.setState({ + connectFour_board : connectFour_board, + connectFour_vertical_board : connectFour_vertical_board, + connectFour_insert_piece_at_position : connectFour_insert_piece_at_position, + connectFour_ingame_msg : message + }) + } + + handleKeyPress(e){ + if(e.key == 'Enter'){ + this.connectFourStorePlayerName(e) + } + } + + connectFourStorePlayerName(e){ + e.preventDefault(); + + console.log('this.refs.player2_name_input.value --> ',this.refs.player2_name_input.value) + + // if(this.state.connectFour_player1_name === ''){ + // console.log('enter name') + // return; + // } + + // if(this.state.connectFour_input_val === undefined){ + // console.log('enter name') + // return; + // } + // if(this.refs.player1_name_input_value === undefined){ + // console.log('please enter a name') + // return + // } + + console.log('$ => ',this.refs.player1_name_input_value) + if(this.state.connectFour_player1_name === ''){ + this.refs.player1_name_input.value = ''; + let player1_name_input = this.state.connectFour_input_val; + this.setState({ + connectFour_player1_name : player1_name_input, + connectFour_input_val : '', + connectFour_landing_display : 'none', + connectFour_player2Select_display : 'block' + }) + console.log("this.state.connectFour_player1_name === ''") + } else if(this.state.connectFour_player1_name !== ''){ + this.refs.player2_name_input.value = ''; + let player2_name_input = this.state.connectFour_input_val; + this.setState({ + connectFour_player2_name : player2_name_input, + connectFour_input_val : '', + connectFour_player2Select_display : 'none', + connectFour_gameBoard_display : 'block', + }) + console.log("this.state.connectFour_player1_name !== ''") + } + + + } + + connectFourSaveInput(e){ + let targetValue = e.target.value + this.setState({ + connectFour_input_val : targetValue + }) + } + + + + render(){ + + let connectFour_landing_display = this.state.connectFour_landing_display; + let connectFour_player2Select_display = this.state.connectFour_player2Select_display; + let connectFour_gameBoard_display = this.state.connectFour_gameBoard_display; + let connectFour_gameover_display = this.state.connectFour_gameover_display; + + return( +
+
+ + ) + + } +} + +const ConnectFourLandingScreen = function(){ + return
+
+

shock and awe for

+

Lakitu's Connect Four

+
+ +
+
+
+ +
+
+
{this.Player1_query()}
+
+
+} + +const ConnectFourPlayer2SelectScreen = function(){ + return
+
+

shock and awe for

+

Lakitu's Connect Four

+
+ +
+
+
+ +
+
+
{this.Player2_query()}
+
+
+} + +const Player1_query = function(){ + return
+ + + +
+ +} + +const Player2_query = function(){ + + return
+ + + +
+ +} + +const ConnectFourGameBoard = function(){ + return
+
Connect Four
+ +
+
+
{this.checkRightToLeftAngledArrays(3,5); this.connectFourAddNewPiece(0,0,0)}} >{this.state.connectFour_insert_piece_at_position[0][0]}
+
{this.checkRightToLeftAngledArrays(2,5); this.connectFourAddNewPiece(0,1,1)}} >{this.state.connectFour_insert_piece_at_position[0][1]}
+
{this.checkRightToLeftAngledArrays(1,4); this.connectFourAddNewPiece(0,2,2)}} >{this.state.connectFour_insert_piece_at_position[0][2]}
+
{this.checkRightToLeftAngledArrays(0,3); this.checkLeftToRightAngledArrays(0,3); this.connectFourAddNewPiece(0,3,3)}} >{this.state.connectFour_insert_piece_at_position[0][3]}
+
{this.checkLeftToRightAngledArrays(1,4); this.connectFourAddNewPiece(0,4,4)}} >{this.state.connectFour_insert_piece_at_position[0][4]}
+
{this.checkLeftToRightAngledArrays(2,5); this.connectFourAddNewPiece(0,5,5)}} >{this.state.connectFour_insert_piece_at_position[0][5]}
+
{this.checkLeftToRightAngledArrays(3,5); this.connectFourAddNewPiece(0,6,6)}} >{this.state.connectFour_insert_piece_at_position[0][6]}
+
+
+
{this.checkRightToLeftAngledArrays(4,4); this.connectFourAddNewPiece(1,0,7)}} >{this.state.connectFour_insert_piece_at_position[1][0]}
+
{this.checkRightToLeftAngledArrays(3,4); this.connectFourAddNewPiece(1,1,8)}} >{this.state.connectFour_insert_piece_at_position[1][1]}
+
{this.checkRightToLeftAngledArrays(2,4); this.checkLeftToRightAngledArrays(0,2); this.connectFourAddNewPiece(1,2,9)}} >{this.state.connectFour_insert_piece_at_position[1][2]}
+
{this.checkRightToLeftAngledArrays(1,3); this.checkLeftToRightAngledArrays(1,3); this.connectFourAddNewPiece(1,3,10)}} >{this.state.connectFour_insert_piece_at_position[1][3]}
+
{this.checkRightToLeftAngledArrays(0,2); this.checkLeftToRightAngledArrays(2,4); this.connectFourAddNewPiece(1,4,11)}} >{this.state.connectFour_insert_piece_at_position[1][4]}
+
{this.checkLeftToRightAngledArrays(3,4); this.connectFourAddNewPiece(1,5,12)}} >{this.state.connectFour_insert_piece_at_position[1][5]}
+
{this.checkLeftToRightAngledArrays(4,4); this.connectFourAddNewPiece(1,6,13)}} >{this.state.connectFour_insert_piece_at_position[1][6]}
+
+
+
{this.checkRightToLeftAngledArrays(5,3); this.connectFourAddNewPiece(2,0,14)}} >{this.state.connectFour_insert_piece_at_position[2][0]}
+
{this.checkRightToLeftAngledArrays(4,3); this.checkLeftToRightAngledArrays(0,1); this.connectFourAddNewPiece(2,1,15)}} >{this.state.connectFour_insert_piece_at_position[2][1]}
+
{this.checkRightToLeftAngledArrays(3,3); this.checkLeftToRightAngledArrays(1,2); this.connectFourAddNewPiece(2,2,16)}} >{this.state.connectFour_insert_piece_at_position[2][2]}
+
{this.checkRightToLeftAngledArrays(2,3); this.checkLeftToRightAngledArrays(2,3); this.connectFourAddNewPiece(2,3,17)}} >{this.state.connectFour_insert_piece_at_position[2][3]}
+
{this.checkRightToLeftAngledArrays(1,2); this.checkLeftToRightAngledArrays(3,3); this.connectFourAddNewPiece(2,4,18)}} >{this.state.connectFour_insert_piece_at_position[2][4]}
+
{this.checkRightToLeftAngledArrays(0,1); this.checkLeftToRightAngledArrays(4,3); this.connectFourAddNewPiece(2,5,19)}} >{this.state.connectFour_insert_piece_at_position[2][5]}
+
{this.checkLeftToRightAngledArrays(5,3); this.connectFourAddNewPiece(2,6,20)}} >{this.state.connectFour_insert_piece_at_position[2][6]}
+
+
+
{this.checkLeftToRightAngledArrays(0,0); this.connectFourAddNewPiece(3,0,21)}} >{this.state.connectFour_insert_piece_at_position[3][0]}
+
{this.checkRightToLeftAngledArrays(5,2); this.checkLeftToRightAngledArrays(1,1); this.connectFourAddNewPiece(3,1,22)}} >{this.state.connectFour_insert_piece_at_position[3][1]}
+
{this.checkRightToLeftAngledArrays(4,2); this.checkLeftToRightAngledArrays(2,2); this.connectFourAddNewPiece(3,2,23)}} >{this.state.connectFour_insert_piece_at_position[3][2]}
+
{this.checkRightToLeftAngledArrays(3,2); this.checkLeftToRightAngledArrays(3,2); this.connectFourAddNewPiece(3,3,24)}} >{this.state.connectFour_insert_piece_at_position[3][3]}
+
{this.checkRightToLeftAngledArrays(2,2); this.checkLeftToRightAngledArrays(4,2); this.connectFourAddNewPiece(3,4,25)}} >{this.state.connectFour_insert_piece_at_position[3][4]}
+
{this.checkRightToLeftAngledArrays(1,1); this.checkLeftToRightAngledArrays(5,2); this.connectFourAddNewPiece(3,5,26)}} >{this.state.connectFour_insert_piece_at_position[3][5]}
+
{this.checkRightToLeftAngledArrays(0,0); this.connectFourAddNewPiece(3,6,27)}} >{this.state.connectFour_insert_piece_at_position[3][6]}
+
+
+
{this.checkLeftToRightAngledArrays(1,0); this.connectFourAddNewPiece(4,0,28)}} >{this.state.connectFour_insert_piece_at_position[4][0]}
+
{this.checkLeftToRightAngledArrays(2,1); this.connectFourAddNewPiece(4,1,29)}} >{this.state.connectFour_insert_piece_at_position[4][1]}
+
{this.checkRightToLeftAngledArrays(5,1); this.checkLeftToRightAngledArrays(3,1); this.connectFourAddNewPiece(4,2,30)}} >{this.state.connectFour_insert_piece_at_position[4][2]}
+
{this.checkRightToLeftAngledArrays(4,1); this.checkLeftToRightAngledArrays(4,1); this.connectFourAddNewPiece(4,3,31)}} >{this.state.connectFour_insert_piece_at_position[4][3]}
+
{this.checkRightToLeftAngledArrays(3,1); this.checkLeftToRightAngledArrays(5,1); this.connectFourAddNewPiece(4,4,32)}} >{this.state.connectFour_insert_piece_at_position[4][4]}
+
{this.checkRightToLeftAngledArrays(2,1); this.connectFourAddNewPiece(4,5,33)}} >{this.state.connectFour_insert_piece_at_position[4][5]}
+
{this.checkRightToLeftAngledArrays(1,0); this.connectFourAddNewPiece(4,6,34)}} >{this.state.connectFour_insert_piece_at_position[4][6]}
+
+
+
{this.checkLeftToRightAngledArrays(2,0); this.connectFourAddNewPiece(5,0,35)}} >{this.state.connectFour_insert_piece_at_position[5][0]}
+
{this.checkRightToLeftAngledArrays(3,0); this.checkLeftToRightAngledArrays(3,0); this.connectFourAddNewPiece(5,1,36)}} >{this.state.connectFour_insert_piece_at_position[5][1]}
+
{this.checkLeftToRightAngledArrays(4,0); this.connectFourAddNewPiece(5,2,37)}} >{this.state.connectFour_insert_piece_at_position[5][2]}
+
{this.checkRightToLeftAngledArrays(5,0); this.checkLeftToRightAngledArrays(5,0); this.connectFourAddNewPiece(5,3,38)}} >{this.state.connectFour_insert_piece_at_position[5][3]}
+
{this.checkRightToLeftAngledArrays(4,0); this.connectFourAddNewPiece(5,4,39)}} >{this.state.connectFour_insert_piece_at_position[5][4]}
+
{this.checkRightToLeftAngledArrays(3,0); this.connectFourAddNewPiece(5,5,40)}} >{this.state.connectFour_insert_piece_at_position[5][5]}
+
{this.checkRightToLeftAngledArrays(2,0); this.connectFourAddNewPiece(5,6,41)}} >{this.state.connectFour_insert_piece_at_position[5][6]}
+
+
+ +
+
+ +
+
+
Player 1
+
{this.state.connectFour_player1_score}
+
+
+ +
+
+
Player 2
+
{this.state.connectFour_player2_score}
+
+
+ +
+ +
+ {this.state.connectFour_ingame_msg} +
+ +
+
+ + +
+
+
+
+} + +const ConnectFourGameOver = function(){ + let connectFour_winner = this.state.connectFour_winner; + return
+

Winner:

+
{connectFour_winner}
+
+ + +
+
+} diff --git a/src/components/ConnectFour/images/coin.ico b/src/components/ConnectFour/images/coin.ico new file mode 100644 index 0000000..c964966 Binary files /dev/null and b/src/components/ConnectFour/images/coin.ico differ diff --git a/src/components/ConnectFour/images/connectFour_Lakitu.png b/src/components/ConnectFour/images/connectFour_Lakitu.png new file mode 100644 index 0000000..3580974 Binary files /dev/null and b/src/components/ConnectFour/images/connectFour_Lakitu.png differ diff --git a/src/components/ConnectFour/images/connectFour_coin_select.png b/src/components/ConnectFour/images/connectFour_coin_select.png new file mode 100644 index 0000000..06d4f4a Binary files /dev/null and b/src/components/ConnectFour/images/connectFour_coin_select.png differ diff --git a/src/components/ConnectFour/images/connectFour_mushroom_select.png b/src/components/ConnectFour/images/connectFour_mushroom_select.png new file mode 100644 index 0000000..eb42a58 Binary files /dev/null and b/src/components/ConnectFour/images/connectFour_mushroom_select.png differ diff --git a/src/components/ConnectFour/images/mushroom.png b/src/components/ConnectFour/images/mushroom.png new file mode 100644 index 0000000..3becdfb Binary files /dev/null and b/src/components/ConnectFour/images/mushroom.png differ diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 0000000..83e3fd1 --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,16 @@ +import React from 'react'; +import './footer.css'; +import { Link } from 'react-router-dom'; + +export default class Footer extends React.Component{ + render(){ + return( +
+ +

Footer

+
+
+
+ ) + } +} diff --git a/src/components/Footer/footer.css b/src/components/Footer/footer.css new file mode 100644 index 0000000..9bb751d --- /dev/null +++ b/src/components/Footer/footer.css @@ -0,0 +1,70 @@ +.footer{ + position:relative; + /*background-color:red;*/ +} + +/*.footer_container{ + background-color:green; + margin-top:9px; + padding-top:3.52%; + position:absolute; + width:100%; +}*/ + +.footer_container:after{ + content:''; + border-top: solid 140px transparent; + border-left: solid 100vw skyblue; + /*background: repeating-linear-gradient( -45deg, #000 0px, #000 5px, #333 6px, #333 11px, #000 12px);*/ + background-color: rgb(137,216,230); + background-image: linear-gradient(transparent 50%, rgb(173,216,230) 50%); + background-size: 50px 15px; + position: absolute; + margin-top:-131px; +} + +.footer_container_two:after{ + content:''; + border-top: solid 140px transparent; + border-left: solid 100vw yellowgreen; + /*background: repeating-linear-gradient( -45deg, #000 0px, #000 5px, #333 6px, #333 11px, #000 12px);*/ + /*background-color: rgb(137,216,230); + background-image: linear-gradient(transparent 50%, rgb(173,216,230) 50%);*/ + background-size: 50px 15px; + position: absolute; + margin-top:-131px; + z-index:2; +} + +/*.footer_top_section { + position:relative; + background-color:#ddd; + height:200px !important; + width:100% !important; + z-index: 1; +}*/ + +.footer_top_section:after{ + content:''; + border-top: solid 140px transparent; + border-right: solid 100vw orange; + position: absolute; + margin-top:-131px; + /*border-left: solid 50vw transparent;*/ + /*top: 100%; + left: 0; + width: 0; + height: 0;*/ + z-index:3; +} + +.footer_goomba{ + position:absolute; + /*margin-top:61vh;*/ + z-index:4; + /*height:15%;*/ + width:6%; + margin-top:-143px; + min-width:54px; + z-index:1; +} diff --git a/src/components/Footer/images/goomba.png b/src/components/Footer/images/goomba.png new file mode 100644 index 0000000..355b65e Binary files /dev/null and b/src/components/Footer/images/goomba.png differ diff --git a/src/components/Home/home.css b/src/components/Home/home.css new file mode 100644 index 0000000..9a17d57 --- /dev/null +++ b/src/components/Home/home.css @@ -0,0 +1,69 @@ +.home_container{ + /*margin-left:25%*/ + height:420px; +} + +.home_bowser_hero{ + margin-top: -55px; + position: absolute; + width: 134%; + height: 190%; + max-width: 500px; + max-height: 500px; + padding-left:30%; + z-index:4; +} + +.home_select_game_text{ + font-size: 20px; + margin-bottom:-10px; + text-align:center; +} + +.home_link_container{ + margin-left:5%; + margin-top:11%; + position:absolute; + z-index:6; +} + +.home_links{ + padding:10px; + border:4px solid black; + border-radius:5px; + margin-bottom:10px; + cursor:pointer; + background-color:white; + min-width:90px; + width:35vw; + text-align:center; + font-size:20px; +} + +.home_tictactoe_link{ + margin-top:8%; +} + +.home_tictactoe_link:hover{ + background-color:lightcyan; +} + +.home_simon_link:hover{ + background-color:lightcyan; +} + +.home_empty_link:hover{ + background-color:lightcyan; +} + +@media (min-width: 600px){ + .home_bowser_hero{ + padding-left:43%; + width: 570px; + height: 545%; + } + .home_select_game_text{ + font-size: 40px; + margin-bottom:-20px; + } +} diff --git a/src/components/Home/home.js b/src/components/Home/home.js new file mode 100644 index 0000000..2ec9f9c --- /dev/null +++ b/src/components/Home/home.js @@ -0,0 +1,26 @@ +import React from 'react'; +import './home.css'; +import Nav from 'components/Nav/Nav'; +import Footer from 'components/Footer/Footer'; +import { Link } from 'react-router-dom'; + +export default class Index extends React.Component{ + + render(){ + return( +
+
+ ) + } +} diff --git a/src/components/Home/images/bowser_hero.png b/src/components/Home/images/bowser_hero.png new file mode 100644 index 0000000..0087e56 Binary files /dev/null and b/src/components/Home/images/bowser_hero.png differ diff --git a/src/components/Nav/Nav.js b/src/components/Nav/Nav.js new file mode 100644 index 0000000..c8c47f7 --- /dev/null +++ b/src/components/Nav/Nav.js @@ -0,0 +1,26 @@ +import React from 'react'; +import './nav.css'; +import { Link } from 'react-router-dom'; + +export default class Nav extends React.Component{ + + render(){ + return( +
+
+
+ +

Bowser Games

+
+ home + connect four + tic tac toe + simon +
+
+
+
+
+ ) + } +} diff --git a/src/components/Nav/images/nav_bowser_logo.png b/src/components/Nav/images/nav_bowser_logo.png new file mode 100644 index 0000000..95108cf Binary files /dev/null and b/src/components/Nav/images/nav_bowser_logo.png differ diff --git a/src/components/Nav/nav.css b/src/components/Nav/nav.css new file mode 100644 index 0000000..8d394e3 --- /dev/null +++ b/src/components/Nav/nav.css @@ -0,0 +1,90 @@ +.nav_title{ + font-size:35px; + padding-left:6%; + font-family: 'Wendy One', sans-serif; +} + +.nav_title{ + font-size:30px; +} + +.nav_title_logo{ + display:inline-block; + margin-right:10px; + width:13%; + max-width:50px; +} + +.nav_title_text{ + display:inline-block; + margin-bottom:5px; +} + +.nav_title:hover{ + cursor:pointer; +} + +.nav_container{ + background-color:rgb(240,240,240); + margin-top:-16px; + padding-top:6%; +} + +#top_section:after { + content:''; + border-top: solid 51px rgb(240,240,240); + border-right: solid 100vw transparent; + position:absolute; +} + +.nav_connectfour_link, .nav_tictactoe_link, .nav_simon_link, .nav_home_link{ + font-size: 16px; + color: grey; + margin-right: 9px; + text-decoration:none; +} + +.nav_connectfour_link:hover, .nav_tictactoe_link:hover, .nav_simon_link:hover, .nav_home_link:hover{ + color:orange; +} + +.nav_links_container{ + position: absolute; + z-index: 10; + margin-top: -25px; +} + +.nav_links:hover{ + cursor:pointer; + position:absolute; + z-index:10; +} + +a{ + color:black; + text-decoration:none; +} + +@media (max-width: 490px){ + + .nav_title{ + font-size:30px; + } + +} + +@media (min-width: 490px){ + .nav{ + margin-bottom:-30px; + } + + .nav_title{ + font-size:3em; + background-color:rgb(240,240,240); + } + + .nav_container{ + margin-top:-64px; + } + +} diff --git a/src/components/Simon/Simon.js b/src/components/Simon/Simon.js new file mode 100644 index 0000000..304b271 --- /dev/null +++ b/src/components/Simon/Simon.js @@ -0,0 +1,229 @@ +import React from 'react'; +import './simon.css'; +import Nav from 'components/Nav/Nav'; +import Footer from 'components/Footer/Footer'; + +export default class Simon extends React.Component{ + constructor(props){ + super(props) + this.state = { + simon_generated_sequence : ['red','red'], + simon_user_guesses : [], + simon_count : 0, + simon_red_btn_opacity : 1, + simon_green_btn_opacity : 1, + simon_blue_btn_opacity : 1, + simon_yellow_btn_opacity : 1, + reset_btn_text : 'start' + } + + this.simonReturnSequence = this.simonReturnSequence.bind(this); + this.simonReset = this.simonReset.bind(this); + this.simonQuit = this.simonQuit.bind(this); + } + + simonReturnSequence(){ + let simon_generated_sequence = this.state.simon_generated_sequence; + let simon_count = this.state.simon_count; + const options = ['red','green','blue','yellow']; + + let addRandomColor = () => { + let randomNum = Math.floor(Math.random() * (4 - 0)) + 0; + simon_generated_sequence.push( options[ randomNum ] ); + simon_count += 1; + this.setState({ + simon_generated_sequence : simon_generated_sequence, + simon_count : simon_count + }) + } + for( let i = 0; i < simon_generated_sequence.length; i++){ + + if(simon_generated_sequence[i] === 'red'){ + + // let setTime = + // setInterval(() => { + // console.log('red'); + // clearInterval(setTime) + // },2000) + + let run = new Promise(function(resolve, reject) { + + let isClean = true; + + if (isClean) { + resolve('Clean'); + } else { + reject('not Clean'); + } + + }); + + run.then(function(fromResolve) { + console.log('the room is' + fromResolve); + let romo = setTimeout(() => {console.log('red')}, 2000) + }).catch(function(fromReject){ + console.log('the room is' + fromReject); + }) + + + + } else if( simon_generated_sequence[i] === 'green' ){ + + // let setTime = + // setInterval(() => { + // console.log('green'); + // clearInterval(setTime) + // },2000) + + let run = new Promise(function(resolve, reject) { + + let isClean = true; + + if (isClean) { + resolve('Clean'); + } else { + reject('not Clean'); + } + + }); + + run.then(function(fromResolve) { + console.log('the room is' + fromResolve); + let romo = setTimeout(() => {console.log('green')}, 2000) + }).catch(function(fromReject){ + console.log('the room is' + fromReject); + }) + + + } else if( simon_generated_sequence[i] === 'blue' ){ + + let counter = 0 + let flashBlue = () => { + this.setState({ + simon_blue_btn_opacity : 0.9, + }) + setInterval( () => { + counter += 1 + + if(counter === 5){ + clearInterval(flashBlue) + } + + }, 1000); + } + + flashBlue(); + + this.setState({ + simon_blue_btn_opacity : 1 + }) + + console.log('blue!') + + } else if( simon_generated_sequence[i] === 'yellow' ){ + + let counter = 0 + let flashYellow = () => { + this.setState({ + simon_yellow_btn_opacity : 0.4, + }) + setInterval( () => { + counter += 1 + + if(counter === 5){ + clearInterval(flashYellow) + } + + }, 1000); + } + + flashYellow(); + + this.setState({ + simon_yellow_btn_opacity : 1 + }) + + console.log('yellow!') + + } + } + + // turn on green light and listen for user input. + + } + + simonReset(){ + let reset_btn_text = this.state.reset_btn_text + if(reset_btn_text === 'start'){ + this.setState({ + reset_btn_text : 'reset' + }) + this.simonReturnSequence(); + } else if (reset_btn_text === 'reset'){ + this.setState({ + simon_generated_sequence : [], + simon_user_guesses : [], + simon_count : 0, + simon_red_btn_opacity : 1, + simon_green_btn_opacity : 1, + simon_blue_btn_opacity : 1, + simon_yellow_btn_opacity : 1 + }) + this.simonReturnSequence(); + console.log('>>>> works <<<<<') + } + } + + simonQuit(){ + // include code to return user to simon home page + this.setState({ + simon_generated_sequence : [], + simon_user_guesses : [], + simon_count : 0, + simon_red_btn_opacity : 1, + simon_green_btn_opacity : 1, + simon_blue_btn_opacity : 1, + simon_yellow_btn_opacity : 1, + reset_btn_text : 'start' + }) + } + + render(){ + + let simon_red_btn_opacity = this.state.simon_red_btn_opacity; + let simon_blue_btn_opacity = this.state.simon_blue_btn_opacity; + let simon_green_btn_opacity = this.state.simon_green_btn_opacity; + let simon_yellow_btn_opacity = this.state.simon_yellow_btn_opacity; + let simon_count = this.state.simon_count; + let reset_btn_text = this.state.reset_btn_text; + + return( +
+
+ ) + } +} diff --git a/src/components/Simon/simon.css b/src/components/Simon/simon.css new file mode 100644 index 0000000..7bd04a9 --- /dev/null +++ b/src/components/Simon/simon.css @@ -0,0 +1,166 @@ +.simon{ + height:100vh; + min-height:485px; + padding:0 6% 6% 6%; + width:160px; + margin:auto; + margin-top:-42px; +} + +.simon_container{ + background-color: transparent; + margin-top: 100px; + width: 300px; + margin-left: -22%; + text-align: center; + position: absolute; + z-index:3; +} + +.simon_interface{ + border: 20px solid black; + border-radius: 50%; + height: 264px; + width: 262px; + position: relative; +} + +.simon_horizontal_line{ + border-top: 20px solid black; + margin-top:46%; + width: 266px; + margin-left: 0px; +} + +.simon_vertical_line{ + /*width: 23px;*/ + width:17px; + height: 270px; + background-color: black; + margin-left: 46%; + margin-top: -54%; +} + +.simon_controls_circle{ + content: ' '; + border: 7px solid black; + border-radius: 50%; + height: 100px; + width: 100px; + top: 32%; + left: 32%; + position: absolute; + background-color: white; + text-align: center; + z-index:3; +} + +.simon_title{ + margin-top:5px; +} + +.redBox:hover, .blueBox:hover, .yellowBox:hover, .greenBox:hover{ + cursor:pointer; +} + +.redBox{ + background-color: rgb(180,34,34); + opacity:2; + position: absolute; + height: 130px; + width: 130px; + top: 5%; + left: 52%; + z-index: 1; + border-radius: 0 100% 0 0; +} + +.redBox:hover{ + background-color: rgb(150,34,34) +} + +.blueBox{ + background-color: rgb(30,144,255); + position: absolute; + height: 130px; + width: 130px; + top: 52%; + left: 52%; + z-index: 1; + border-radius: 0 0 100% 0; +} + +.blueBox:hover{ + background-color: rgb(30,110,255) +} + +.yellowBox{ + background-color: rgb(255,255,0); + position: absolute; + height: 130px; + width: 130px; + top: 5%; + right: 52%; + z-index: 1; + border-radius: 100% 0 0 0; +} + +.yellowBox:hover{ + background-color: rgb(255,225,0); +} + +.greenBox{ + background-color: rgb(50,205,50); + position: absolute; + height: 130px; + width: 130px; + top: 52%; + left: 5%; + z-index: 1; + border-radius: 0 0 0 100%; +} + +.greenBox:hover{ + background-color: rgb(50,165,50); +} + +.simon_control_btns{ + border-radius: 50%; + height: 41px; + width: 41px; + margin-right: 2px; + margin-top: 11px; + margin-left: 2px; + display: inline-block; + border: 2px solid black; + background-color:darkslateblue; +} + +.simon_control_btns:hover{ + cursor:pointer; +} + +.simon_control_btns > p { + color:white; + margin-top:11px; +} + +.simon_buttons_container{ + margin-top: -17px; +} + +.simon_completion{ + font-size:2em; +} + +.simon_strict_mode{ + height: 10px; + width: 10px; + border-radius: 50%; + border: 1px solid grey; + margin: auto; +} + +.simon_strict_mode > p { + margin-top:-5.94px; +} diff --git a/src/components/TicTacToe/TicTacToe.js b/src/components/TicTacToe/TicTacToe.js new file mode 100644 index 0000000..b4742d8 --- /dev/null +++ b/src/components/TicTacToe/TicTacToe.js @@ -0,0 +1,444 @@ +import React from 'react'; +import './tictactoe.css'; +import Nav from 'components/Nav/Nav'; +import Footer from 'components/Footer/Footer'; + + +export default class TicTacToe extends React.Component{ + + constructor(props){ + super(props) + + this.state = { + ttt_player1_name : '', + ttt_player2_name : '', + ttt_player_query : , + ttt_landing_display : 'block', + ttt_player2Select_display : 'none', + ttt_gameBoard_display : 'none', + ttt_gameover_display : 'none', + ttt_player_turn : 'player 1', + ttt_board : ['','','','','','','','',''], + ttt_player1_score : 0, + ttt_player2_score : 0, + ttt_winner : '', + ttt_insert_shell_at_position : ['','','','','','','',''], + ttt_ingame_msg : "player 1's turn", + ttt_display_none : 'none', + ttt_input_val : '' + } + + this.KoopaGameBoard = KoopaGameBoard.bind(this); + this.KoopaLandingScreen = KoopaLandingScreen.bind(this); + this.KoopaPlayer2SelectScreen = KoopaPlayer2SelectScreen.bind(this); + this.KoopaGameOver = KoopaGameOver.bind(this); + this.tttUpdateBoard = this.tttUpdateBoard.bind(this); + this.tttCheckForSolutions = this.tttCheckForSolutions.bind(this); + this.tttResetGame = this.tttResetGame.bind(this); + this.tttQuitGame = this.tttQuitGame.bind(this); + this.tttFill = this.tttFill.bind(this); + this.tttWinnerWasFound = this.tttWinnerWasFound.bind(this); + this.handleKeyPress = this.handleKeyPress.bind(this); + this.tttStorePlayerName = this.tttStorePlayerName.bind(this); + this.Player1_query = Player1_query.bind(this); + this.Player2_query = Player2_query.bind(this); + this.tttSaveInput = this.tttSaveInput.bind(this); + } + + tttFill( boardPos ){ + let piece; + let player = this.state.ttt_player_turn; + let winningColors = this.state.ttt_winningColors; + let ttt_insert_shell_at_position = this.state.ttt_insert_shell_at_position; + player === 'player 1' ? piece = : piece = + + ttt_insert_shell_at_position[boardPos] = piece; + + let playerUpNext; + player === 'player 1' ? playerUpNext = 'player 2' : playerUpNext = 'player 1'; + let message = playerUpNext+"'s turn"; + + this.setState({ + ttt_insert_shell_at_position : ttt_insert_shell_at_position, + ttt_ingame_msg : message + }) + } + + tttWinnerWasFound(pos1, pos2, pos3){ + let ttt_insert_shell_at_position = this.state.ttt_insert_shell_at_position + pos1 = parseInt(pos1) + pos2 = parseInt(pos2) + pos3 = parseInt(pos3) + + ttt_insert_shell_at_position[pos1] = ? ttt_insert_shell_at_position[pos1] = : ttt_insert_shell_at_position[pos1] = + + ttt_insert_shell_at_position[pos2] === ? ttt_insert_shell_at_position[pos2] = : ttt_insert_shell_at_position[pos2] = + + ttt_insert_shell_at_position[pos3] === ? ttt_insert_shell_at_position[pos3] = : ttt_insert_shell_at_position[pos3] = + + this.setState({ + ttt_insert_shell_at_position : ttt_insert_shell_at_position + }) + + this.setState({ ttt_insert_shell_at_position : ['','','','','','','','']}) + + } + + tttResetGame(){ + this.setState({ + ttt_landing_display : 'none', + ttt_player2Select_display : 'none', + ttt_gameBoard_display : 'block', + ttt_gameover_display : 'none', + ttt_player_turn : 'player 1', + ttt_board : ['','','','','','','','',''], + ttt_player1_score : 0, + ttt_player2_score : 0, + ttt_insert_shell_at_position : ['','','','','','','',''] + }) + } + + tttQuitGame(){ + this.setState({ + ttt_player1_name : '', + ttt_player2_name : '', + ttt_player_query : , + ttt_landing_display : 'block', + ttt_player2Select_display : 'none', + ttt_gameBoard_display : 'none', + ttt_gameover_display : 'none', + ttt_player_turn : 'player 1', + ttt_board : ['','','','','','','','',''], + ttt_player1_score : 0, + ttt_player2_score : 0, + ttt_insert_shell_at_position : ['','','','','','','',''] + }) + } + + tttCheckForSolutions(){ + let ttt_board = this.state.ttt_board; + let player = this.state.ttt_player_turn; + let ttt_player1_score = this.state.ttt_player1_score; + let ttt_player2_score = this.state.ttt_player2_score; + console.log('ttt_board: ',ttt_board) + + if(ttt_board[0] !== '' && ttt_board[0] === ttt_board[1] && ttt_board[0] === ttt_board[2]){ + console.log('winner: ', ttt_board[0]) + player === 'player 1' ? ttt_player1_score++ : ttt_player2_score++; + + this.tttWinnerWasFound(0,1,2); + + this.setState({ + ttt_board : ['','','','','','','','',''], + ttt_insert_shell_at_position : ['','','','','','','',''], + ttt_player1_score : ttt_player1_score, + ttt_player2_score : ttt_player2_score + }) + } else if (ttt_board[0] !== '' && ttt_board[0] === ttt_board[3] && ttt_board[0] === ttt_board[6]){ + console.log('winner: ', ttt_board[0]) + player === 'player 1' ? ttt_player1_score++ : ttt_player2_score++; + + this.tttWinnerWasFound(0,3,6); + + this.setState({ + ttt_board : ['','','','','','','','',''], + ttt_insert_shell_at_position : ['','','','','','','',''], + ttt_player1_score : ttt_player1_score, + ttt_player2_score : ttt_player2_score + }) + } else if (ttt_board[0] !== '' && ttt_board[0] === ttt_board[4] && ttt_board[0] === ttt_board[8]){ + console.log('winner: ', ttt_board[0]) + player === 'player 1' ? ttt_player1_score++ : ttt_player2_score++; + + this.tttWinnerWasFound(0,4,8); + + this.setState({ + ttt_board : ['','','','','','','','',''], + ttt_insert_shell_at_position : ['','','','','','','',''], + ttt_player1_score : ttt_player1_score, + ttt_player2_score : ttt_player2_score + }) + } else if (ttt_board[4] !== '' && ttt_board[4] === ttt_board[1] && ttt_board[4] === ttt_board[7]){ + console.log('winner: ', ttt_board[4]) + player === 'player 1' ? ttt_player1_score++ : ttt_player2_score++; + + this.tttWinnerWasFound(4,1,7); + + this.setState({ + ttt_board : ['','','','','','','','',''], + ttt_insert_shell_at_position : ['','','','','','','',''], + ttt_player1_score : ttt_player1_score, + ttt_player2_score : ttt_player2_score + }) + } else if (ttt_board[4] !== '' && ttt_board[4] === ttt_board[3] && ttt_board[4] === ttt_board[5]){ + console.log('winner: ', ttt_board[4]) + player === 'player 1' ? ttt_player1_score++ : ttt_player2_score++; + + this.tttWinnerWasFound(4,3,5); + + this.setState({ + ttt_board : ['','','','','','','','',''], + ttt_insert_shell_at_position : ['','','','','','','',''], + ttt_player1_score : ttt_player1_score, + ttt_player2_score : ttt_player2_score + }) + } else if (ttt_board[4] !== '' && ttt_board[4] === ttt_board[2] && ttt_board[4] === ttt_board[6]){ + console.log('winner: ', ttt_board[4]) + player === 'player 1' ? ttt_player1_score++ : ttt_player2_score++; + + this.tttWinnerWasFound(4,2,6); + + this.setState({ + ttt_board : ['','','','','','','','',''], + ttt_insert_shell_at_position : ['','','','','','','',''], + ttt_player1_score : ttt_player1_score, + ttt_player2_score : ttt_player2_score + }) + } else if (ttt_board[8] !== '' && ttt_board[8] === ttt_board[5] && ttt_board[8] === ttt_board[2]){ + console.log('winner: ', ttt_board[8]) + player === 'player 1' ? ttt_player1_score++ : ttt_player2_score++; + + this.tttWinnerWasFound(8,5,2); + + this.setState({ + ttt_board : ['','','','','','','','',''], + ttt_insert_shell_at_position : ['','','','','','','',''], + ttt_player1_score : ttt_player1_score, + ttt_player2_score : ttt_player2_score + }) + } else if (ttt_board[8] !== '' && ttt_board[8] === ttt_board[6] && ttt_board[8] === ttt_board[7]){`` + console.log('winner: ', ttt_board[8]) + player === 'player 1' ? ttt_player1_score++ : ttt_player2_score++; + + this.tttWinnerWasFound(8,6,7); + + this.setState({ + ttt_board : ['','','','','','','','',''], + ttt_insert_shell_at_position : ['','','','','','','',''], + ttt_player1_score : ttt_player1_score, + ttt_player2_score : ttt_player2_score + }) + } + + console.log('ttt_player1_score ======> ', ttt_player1_score) + console.log('ttt_player2_score ======> ', ttt_player2_score) + + if(ttt_player1_score >= 3 || ttt_player2_score >= 3){ + console.log('GAME OVER') + console.log('winner: ',player) + + let game_winner; + let player1_name = this.state.ttt_player1_name; + let player2_name = this.state.ttt_player2_name; + + if (ttt_player1_score > ttt_player2_score){ + game_winner = player1_name; + } else { + game_winner = player2_name; + } + this.setState({ + ttt_landing_display : 'none', + ttt_player2Select_display : 'none', + ttt_gameBoard_display : 'none', + ttt_gameover_display : 'block', + ttt_winner : game_winner + }) + } + return; + } + + tttUpdateBoard( boardPosition ){ + console.log('this.state.ttt_player_turn => ', this.state.ttt_player_turn) + + let ttt_board = this.state.ttt_board + + if(ttt_board[boardPosition] !== ''){ + console.log('pick another square') + return + } + + if( ttt_board.includes(boardPosition) ){ + console.log('pick a different square') + return; + } + + let player = this.state.ttt_player_turn; + + ttt_board[ boardPosition ] = player; + + player === 'player 1' ? player = 'player 2' : player = 'player 1'; + this.setState({ + ttt_player_turn : player + }) + console.log('this.state.ttt_board => ', this.state.ttt_board) + + this.tttFill( boardPosition ); + this.tttCheckForSolutions(); + + } + + handleKeyPress(e){ + if(e.key == 'Enter'){ + this.tttStorePlayerName(e) + } + } + + tttStorePlayerName(e){ + + e.preventDefault(); + + if(this.state.ttt_player1_name === ''){ + this.refs.player1_name_input.value = ''; + let player1_name_input = this.state.ttt_input_val; + this.setState({ + ttt_player1_name : player1_name_input, + ttt_input_val : '', + ttt_landing_display : 'none', + ttt_player2Select_display : 'block' + }) + } + if(this.state.ttt_player1_name !== ''){ + this.refs.player2_name_input.value = ''; + let player2_name_input = this.state.ttt_input_val; + this.setState({ + ttt_player2_name : player2_name_input, + ttt_input_val : '', + ttt_player2Select_display : 'none', + ttt_gameBoard_display : 'block', + }) + } + + } + + tttSaveInput(e){ + let targetValue = e.target.value + this.setState({ + ttt_input_val : targetValue + }) + } + + render(){ + + let ttt_landing_display = this.state.ttt_landing_display; + let ttt_player2Select_display = this.state.ttt_player2Select_display; + let ttt_gameBoard_display = this.state.ttt_gameBoard_display; + let ttt_gameover_display = this.state.ttt_gameover_display; + + return( +
+
+ ) + } + +} + + +const KoopaLandingScreen = function(){ + + return
+

Welcome to

+

Koopa Tic Tac Toe

+
+ +
+ {this.Player1_query()} +
+} + +const KoopaPlayer2SelectScreen = function(){ + + return
+

Welcome to

+

Koopa Tic Tac Toe

+
+ +
+ {this.Player2_query()} +
+} + +const Player1_query = function(){ + + return
+ + +
+ +} + +const Player2_query = function(){ + + return
+ + +
+ +} + +const KoopaGameBoard = function(){ + return
+
+
TicTacToe
+
+
this.tttUpdateBoard(0)} className="ttt_Square ttt_first_row_first_column ttt_pos_zero">{this.state.ttt_insert_shell_at_position[0]}
+
this.tttUpdateBoard(1)} className="ttt_Square ttt_first_row_second_column ttt_pos_one">{this.state.ttt_insert_shell_at_position[1]}
+
this.tttUpdateBoard(2)} className="ttt_Square ttt_first_row_third_column ttt_pos_two">{this.state.ttt_insert_shell_at_position[2]}
+
+
+
this.tttUpdateBoard(3)} className="ttt_Square ttt_second_row_first_column ttt_pos_three">{this.state.ttt_insert_shell_at_position[3]}
+
this.tttUpdateBoard(4)} className="ttt_Square ttt_second_row_second_column ttt_pos_four">{this.state.ttt_insert_shell_at_position[4]}
+
this.tttUpdateBoard(5)} className="ttt_Square ttt_second_row_third_column ttt_pos_five">{this.state.ttt_insert_shell_at_position[5]}
+
+
+
this.tttUpdateBoard(6)} className="ttt_Square ttt_third_row_first_column ttt_pos_six">{this.state.ttt_insert_shell_at_position[6]}
+
this.tttUpdateBoard(7)} className="ttt_Square ttt_third_row_second_column ttt_pos_seven">{this.state.ttt_insert_shell_at_position[7]}
+
this.tttUpdateBoard(8)} className="ttt_Square ttt_third_row_third_column ttt_pos_eight">{this.state.ttt_insert_shell_at_position[8]}
+
+
+ +
+ + +
{this.state.ttt_ingame_msg}
+
+
+
Player 1
+
{this.state.ttt_player1_score}
+
+
+
Player 2
+
{this.state.ttt_player2_score}
+
+
+
+ +
+} + +const KoopaGameOver = function(){ + let ttt_winner = this.state.ttt_winner; + return
+

Winner:

+
{ttt_winner}
+
+ + +
+
+} diff --git a/src/components/TicTacToe/images/ttt_player1_green_koopa.png b/src/components/TicTacToe/images/ttt_player1_green_koopa.png new file mode 100644 index 0000000..e2b627b Binary files /dev/null and b/src/components/TicTacToe/images/ttt_player1_green_koopa.png differ diff --git a/src/components/TicTacToe/images/ttt_player2_red_koopa.png b/src/components/TicTacToe/images/ttt_player2_red_koopa.png new file mode 100644 index 0000000..b960085 Binary files /dev/null and b/src/components/TicTacToe/images/ttt_player2_red_koopa.png differ diff --git a/src/components/TicTacToe/images/x_green_koopa_shell.png b/src/components/TicTacToe/images/x_green_koopa_shell.png new file mode 100644 index 0000000..7d5d0b2 Binary files /dev/null and b/src/components/TicTacToe/images/x_green_koopa_shell.png differ diff --git a/src/components/TicTacToe/images/y_red_koopa_shell.png b/src/components/TicTacToe/images/y_red_koopa_shell.png new file mode 100644 index 0000000..ce6433e Binary files /dev/null and b/src/components/TicTacToe/images/y_red_koopa_shell.png differ diff --git a/src/components/TicTacToe/tictactoe.css b/src/components/TicTacToe/tictactoe.css new file mode 100644 index 0000000..d87f44c --- /dev/null +++ b/src/components/TicTacToe/tictactoe.css @@ -0,0 +1,187 @@ +.tictactoe{ + height:485px; + padding:0 6% 6% 6%; + width:160px; + margin:auto; + margin-top:-42px; +} + +.tictactoe_board_container{ + margin-top:70px; +} + +.ttt_title{ + margin:auto; + text-align:center; + padding:10px; +} + +.ttt_Square{ + border:2px solid grey; + padding:8%; + margin-bottom:2.5px; + border-radius:5px; + width:24px; + font-size:2em; + margin-right:2px; + min-height:37px; + min-width:28px; +} + +.ttt_Square:hover{ + cursor:pointer; + background-color:papayawhip; +} + +.ttt_parent_column_container{ + text-align:center; +} + +.ttt_first_column_container, .ttt_second_column_container, .ttt_third_column_container{ + display: -webkit-flex; + display: flex; + -webkit-flex-direction: row; + flex-direction: row; + -webkit-align-items: flex-start; + align-items: flex-start; +} + +.tictactoe_controls{ + border:2px solid grey; + text-align:center; + padding:5px; + width:163px; +} + +.ttt_reset, .ttt_quit{ + border:none; + border-radius:5px; + margin:2px; +} + +.ttt_reset:hover, .ttt_quit:hover, .ttt_gameover_reset:hover, .ttt_gameover_quit:hover{ + color:white; + cursor:pointer; +} + +.ttt_player_container{ + padding-top:5px; + padding-bottom:5px; +} + +.ttt_player1_scores, .ttt_player2_scores{ + /*width:30%;*/ + padding: 0 7px 0 7px; + display:inline-block; +} + +.ttt_player1_score, .ttt_player2_score{ + border:1px solid black; + height:20px; + width:56%; + margin:auto; +} + +.ttt_player1_score{ + color:green; +} + +.ttt_player2_score{ + color:red; +} + +.ttt_landing_title_text{ + margin-top:-20px; +} + +.ttt_koopaBoard{ + width:300px; + text-align:center; + border:2px solid rgb(120,69,19); + background-image: linear-gradient(rgb(160,82,45) 50%, rgb(170,82,45) 50%); + background-size: 50px 50px; + padding:20%; + margin: 120px 0 0 -86px; +} + +.ttt_player1_title, .ttt_player2_title{ + padding-bottom:10px; +} + +.ttt_player1_query, .ttt_player2_query{ + width:235px; + margin:auto; +} + +.ttt_name1_input, .ttt_name2_input{ + width:100%; + margin-right:3px; + padding:4px; + margin-top:10px; + text-align:center; + font-size:20px; +} + +.ttt_name1_input:focus, .ttt_name2_input:focus{ + outline:none; +} + +.ttt_player1_name_btn, .ttt_player2_name_btn{ + border:2px solid black; + border-radius:5px; + margin-top:10px; + width:50%; + background-color:white; +} + +.ttt_player1_name_btn:hover, .ttt_player2_name_btn:hover { + background-color:papayawhip; + cursor:pointer; +} + +.ttt_ingame_message{ + color:orange; +} + +.ttt_winning_colors{ + background-color: orange; + padding: 31%; + border-radius: 50%; + margin-bottom: -13px; + margin-left: -9px; +} + +.ttt_gameover_reset, .ttt_gameover_quit{ + border:none; + border-radius:5px; + margin:2px; +} + +.ttt_gameover_container{ + margin-top: 120px; + margin-left: -42%; + background-color: oldlace; + border: 2px solid black; + padding: 30px; + width: 233px; + text-align: center; +} + +.ttt_gameover_winner{ + color:indianred; + font-size:3em; + padding:5px; +} + +.ttt_gameover_title{ + margin-bottom: -10px; +} + +@media (max-width: 490px){ + + .ttt_koopaBoard{ + padding:0 0 20px 0; + margin: 120px 0 0 -71px; + } + +} diff --git a/src/components/img/koopaTroopaShell.png b/src/components/img/koopaTroopaShell.png new file mode 100644 index 0000000..4f2d873 Binary files /dev/null and b/src/components/img/koopaTroopaShell.png differ diff --git a/src/components/index.css b/src/components/index.css new file mode 100644 index 0000000..c61b66a --- /dev/null +++ b/src/components/index.css @@ -0,0 +1,3 @@ +body{ + margin:0; +} diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..e9c1ee6 --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +import React from 'react'; +import { render } from 'react-dom'; +import App from 'components/App/App'; +import './components/index.css'; + +render( + , + document.getElementById('root') +); diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..59d8ec0 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,36 @@ +var webpack = require('webpack'); +var path = require('path'); + +module.exports = { + devtool: 'inline-source-map', + entry: [ + 'webpack-dev-server/client?http://127.0.0.1:8080/', + 'webpack/hot/only-dev-server', + './src' + ], + output: { + path: path.join(__dirname, 'public'), + filename: 'bundle.js' + }, + resolve: { + modulesDirectories: ['node_modules', 'src'], + extensions: ['', '.js'] + }, + module: { + loaders: [ + { + test: /\.jsx?$/, + exclude: /node_modules/, + loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'] + }, + { + test: /\.css$/, + loader: 'style!css' + }, + ] + }, + plugins: [ + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin() + ] +};