From adc82b2b5f97d6b76c4d2017be83614a7c039e10 Mon Sep 17 00:00:00 2001 From: James Walker Date: Thu, 7 Sep 2017 00:15:59 -0500 Subject: [PATCH 1/3] star wars with single component --- 08week/simpleStarWars/app.css | 53 ++++++++++++++++++++++++++++++ 08week/simpleStarWars/app.js | 56 ++++++++++++++++++++++++++++++++ 08week/simpleStarWars/index.html | 15 +++++++++ 3 files changed, 124 insertions(+) create mode 100644 08week/simpleStarWars/app.css create mode 100644 08week/simpleStarWars/app.js create mode 100644 08week/simpleStarWars/index.html diff --git a/08week/simpleStarWars/app.css b/08week/simpleStarWars/app.css new file mode 100644 index 000000000..b590a73ad --- /dev/null +++ b/08week/simpleStarWars/app.css @@ -0,0 +1,53 @@ +.app { + text-align: center; + background-color: black; +} + +#title { + background-color: black; + height: 20px; + padding: 30px; + color: blue; +} + +.name { + height: 35px; + width: 150px; + color: white; + background-color: blue; +} + +.spacer { + height: 35px; + width: 100px; + color: white; + background-color: blue; +} + +.gender { + height: 35px; + width: 50px; + color: white; + background-color: blue; +} + +.hair { + height: 35px; + width: 50px; + color: white; + background-color: blue; +} + +.eyes { + height: 35px; + width: 50px; + color: white; + background-color: blue; +} + +.year { + height: 35px; + width: 50px; + color: white; + background-color: blue; +} diff --git a/08week/simpleStarWars/app.js b/08week/simpleStarWars/app.js new file mode 100644 index 000000000..bccf2dc73 --- /dev/null +++ b/08week/simpleStarWars/app.js @@ -0,0 +1,56 @@ +'use strict'; + +class StarWars extends React.Component { + constructor (props) { + super(props); + this.resetState = { + characters: [], + } + this.state = {...this.resetState}; + } + + componentDidMount () { + fetch('https://swapi.co/api/people/') + .then((response) => response.json()) + .then((responseJson) => { + return this.setState({characters: responseJson.results}); + }) + .catch((error) => { + console.error(error); + }); + } + + renderCharacterData () { + if (this.state.characters) { + return this.state.characters.map((character, index) => { + return ( + + {character.name} + . + {character.gender} + {character.hair_color} + {character.eye_color} + {character.birth_year} + + ); + }); + } + } + + render () { + return ( +
+

Star Wars Trivia Matchup

+ + + {this.renderCharacterData()} + +
+ +
+ ); + } +} + + +ReactDOM.render(, document.getElementById('game')); diff --git a/08week/simpleStarWars/index.html b/08week/simpleStarWars/index.html new file mode 100644 index 000000000..1805a27be --- /dev/null +++ b/08week/simpleStarWars/index.html @@ -0,0 +1,15 @@ + + + + + Star Wars Trivia Game + + + +
+ + + + + + From 5f75bd982ef9f7501a6bb9b800141c49de3ebe66 Mon Sep 17 00:00:00 2001 From: James Walker Date: Thu, 7 Sep 2017 00:46:14 -0500 Subject: [PATCH 2/3] starwars - 2 components, which fixed the waring about keys --- 08week/simpleStarWars/app.js | 29 +++++++++++++++++++++-------- 1 file changed, 21 insertions(+), 8 deletions(-) diff --git a/08week/simpleStarWars/app.js b/08week/simpleStarWars/app.js index bccf2dc73..d1d164073 100644 --- a/08week/simpleStarWars/app.js +++ b/08week/simpleStarWars/app.js @@ -24,14 +24,13 @@ class StarWars extends React.Component { if (this.state.characters) { return this.state.characters.map((character, index) => { return ( - - {character.name} - . - {character.gender} - {character.hair_color} - {character.eye_color} - {character.birth_year} - + ); }); } @@ -52,5 +51,19 @@ class StarWars extends React.Component { } } +class CharacterLine extends React.Component { + render () { + return ( + + {this.props.name} + . + {this.props.gender} + {this.props.hair} + {this.props.eyes} + {this.props.year} + + ); + } +} ReactDOM.render(, document.getElementById('game')); From 03a658f46ca654013d661a928ed5f653fae1ebd5 Mon Sep 17 00:00:00 2001 From: James Walker Date: Sun, 10 Sep 2017 22:01:56 -0500 Subject: [PATCH 3/3] mass upload --- 05week/index.html | 8 ++ 05week/spaceTravelToMars.js | 32 +++++- 08week/my-app/src/App.js | 21 ---- 08week/my-app/src/logo.svg | 7 -- 08week/simpleStarWars/app.css | 7 +- 08week/simpleStarWars/app.js | 29 ++--- 08week/{my-app => starWars-app}/.gitignore | 0 08week/{my-app => starWars-app}/README.md | 0 .../package-lock.json | 0 08week/{my-app => starWars-app}/package.json | 0 .../public/favicon.ico | Bin .../public/index.html | 0 .../public/manifest.json | 0 08week/{my-app => starWars-app}/src/App.css | 0 08week/starWars-app/src/App.js | 50 ++++++++ .../{my-app => starWars-app}/src/App.test.js | 0 08week/starWars-app/src/CharacterCard.js | 17 +++ 08week/{my-app => starWars-app}/src/index.css | 0 08week/{my-app => starWars-app}/src/index.js | 0 .../src/registerServiceWorker.js | 0 08week/starWars-app/src/script.js | 107 ++++++++++++++++++ 21 files changed, 225 insertions(+), 53 deletions(-) create mode 100644 05week/index.html delete mode 100644 08week/my-app/src/App.js delete mode 100644 08week/my-app/src/logo.svg rename 08week/{my-app => starWars-app}/.gitignore (100%) rename 08week/{my-app => starWars-app}/README.md (100%) rename 08week/{my-app => starWars-app}/package-lock.json (100%) rename 08week/{my-app => starWars-app}/package.json (100%) rename 08week/{my-app => starWars-app}/public/favicon.ico (100%) rename 08week/{my-app => starWars-app}/public/index.html (100%) rename 08week/{my-app => starWars-app}/public/manifest.json (100%) rename 08week/{my-app => starWars-app}/src/App.css (100%) create mode 100644 08week/starWars-app/src/App.js rename 08week/{my-app => starWars-app}/src/App.test.js (100%) create mode 100644 08week/starWars-app/src/CharacterCard.js rename 08week/{my-app => starWars-app}/src/index.css (100%) rename 08week/{my-app => starWars-app}/src/index.js (100%) rename 08week/{my-app => starWars-app}/src/registerServiceWorker.js (100%) create mode 100644 08week/starWars-app/src/script.js diff --git a/05week/index.html b/05week/index.html new file mode 100644 index 000000000..05a6a5923 --- /dev/null +++ b/05week/index.html @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/05week/spaceTravelToMars.js b/05week/spaceTravelToMars.js index e05a2d2aa..d22f31d5f 100644 --- a/05week/spaceTravelToMars.js +++ b/05week/spaceTravelToMars.js @@ -1,5 +1,7 @@ 'use strict'; +// this Job-Type array provided for future development, but not used during +// the current testing. let jobTypes = { pilot: 'MAV', mechanic: 'Repair Ship', @@ -7,6 +9,8 @@ let jobTypes = { programmer: 'Any Ship!' }; +// This class is a CrewMember, who has a Name, performs a Job aboard a Ship, +// has a Special Skill, and may be assigned to a Ship via the enterShip method. class CrewMember { constructor (name, job, specialSkill, ship) { this.name = name; @@ -14,12 +18,17 @@ class CrewMember { this.specialSkill = specialSkill; this.ship = null; } + // This method 1) adds the crewMember to the Crew of the assigned Ship, and + // 2) adds the Name of the assigned Ship to the crewMember object. enterShip (assignedShip) { assignedShip.crew.push(this); - this.assignedShip = assignedShip; + this.ship = assignedShip; } } +// This class creates a Ship object, which has a Name, a Type, an Ability, +// and a Crew array. The ability is a string which describes its mission. +// In order to perform its ability, the ship must have a crew of at least one. class Ship { constructor (name, type, ability) { this.name = name; @@ -27,6 +36,9 @@ class Ship { this.ability = ability; this.crew = []; } + // If the ship is currently manned by at least one crewMember, this method + // will return its mission. Otherwise it will return a text string indicating + // that the ship is currently unable to perform its mission. missionStatement () { if (this.crew.length === 0) { return `Can't perform a mission yet.`; @@ -35,6 +47,24 @@ class Ship { } } + +/***** MY TESTS USING HTML PAGE +var crewMember1 = new CrewMember('Rick Martinez', 'pilot', 'chemistry'); +console.log("crewMember1.name, 'Rick Martinez' ||| crewMember1.job, 'pilot' ||| crewMember1.specialSkill, 'chemistry' ||| crewMember1.ship, null"); +let mav = new Ship('Mars Ascent Vehicle', 'MAV', 'Ascend into low orbit'); +crewMember1.enterShip(mav); +console.log("crewMember1.ship, mav ||| mav.crew.length, 1 ||| mav.crew[0], crewMember1"); +console.log("mav.name, 'Mars Ascent Vehicle' ||| mav.type, 'MAV' ||| mav.ability, 'Ascend into low orbit' ||| mav.crew.length, 0"); +let hermes = new Ship('Hermes', 'Main Ship', 'Interplanetary Space Travel'); +let crewMember2 = new CrewMember('Commander Lewis', 'commander', 'geology'); +console.log("mav.missionStatement(), Can't perform a mission yet. ||| hermes.missionStatement(), Can't perform a mission yet."); +console.log("mav.missionStatement(), Ascend into low orbit"); +crewMember2.enterShip(hermes); +console.log("hermes.missionStatement(), Interplanetary Space Travel"); +*********/ + + + //tests let assert = require('assert'); diff --git a/08week/my-app/src/App.js b/08week/my-app/src/App.js deleted file mode 100644 index d7d52a7f3..000000000 --- a/08week/my-app/src/App.js +++ /dev/null @@ -1,21 +0,0 @@ -import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; - -class App extends Component { - render() { - return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

-
- ); - } -} - -export default App; diff --git a/08week/my-app/src/logo.svg b/08week/my-app/src/logo.svg deleted file mode 100644 index 6b60c1042..000000000 --- a/08week/my-app/src/logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/08week/simpleStarWars/app.css b/08week/simpleStarWars/app.css index b590a73ad..187533281 100644 --- a/08week/simpleStarWars/app.css +++ b/08week/simpleStarWars/app.css @@ -1,6 +1,7 @@ .app { text-align: center; background-color: black; + width: 500px; } #title { @@ -19,9 +20,9 @@ .spacer { height: 35px; - width: 100px; - color: white; - background-color: blue; + width: 60px; + color: black; + background-color: black; } .gender { diff --git a/08week/simpleStarWars/app.js b/08week/simpleStarWars/app.js index d1d164073..6f8dddbb2 100644 --- a/08week/simpleStarWars/app.js +++ b/08week/simpleStarWars/app.js @@ -24,13 +24,14 @@ class StarWars extends React.Component { if (this.state.characters) { return this.state.characters.map((character, index) => { return ( - + + {character.name} + . + {character.gender} + {character.hair_color} + {character.eye_color} + {character.birth_year} + ); }); } @@ -51,19 +52,5 @@ class StarWars extends React.Component { } } -class CharacterLine extends React.Component { - render () { - return ( - - {this.props.name} - . - {this.props.gender} - {this.props.hair} - {this.props.eyes} - {this.props.year} - - ); - } -} ReactDOM.render(, document.getElementById('game')); diff --git a/08week/my-app/.gitignore b/08week/starWars-app/.gitignore similarity index 100% rename from 08week/my-app/.gitignore rename to 08week/starWars-app/.gitignore diff --git a/08week/my-app/README.md b/08week/starWars-app/README.md similarity index 100% rename from 08week/my-app/README.md rename to 08week/starWars-app/README.md diff --git a/08week/my-app/package-lock.json b/08week/starWars-app/package-lock.json similarity index 100% rename from 08week/my-app/package-lock.json rename to 08week/starWars-app/package-lock.json diff --git a/08week/my-app/package.json b/08week/starWars-app/package.json similarity index 100% rename from 08week/my-app/package.json rename to 08week/starWars-app/package.json diff --git a/08week/my-app/public/favicon.ico b/08week/starWars-app/public/favicon.ico similarity index 100% rename from 08week/my-app/public/favicon.ico rename to 08week/starWars-app/public/favicon.ico diff --git a/08week/my-app/public/index.html b/08week/starWars-app/public/index.html similarity index 100% rename from 08week/my-app/public/index.html rename to 08week/starWars-app/public/index.html diff --git a/08week/my-app/public/manifest.json b/08week/starWars-app/public/manifest.json similarity index 100% rename from 08week/my-app/public/manifest.json rename to 08week/starWars-app/public/manifest.json diff --git a/08week/my-app/src/App.css b/08week/starWars-app/src/App.css similarity index 100% rename from 08week/my-app/src/App.css rename to 08week/starWars-app/src/App.css diff --git a/08week/starWars-app/src/App.js b/08week/starWars-app/src/App.js new file mode 100644 index 000000000..e18504984 --- /dev/null +++ b/08week/starWars-app/src/App.js @@ -0,0 +1,50 @@ +import React, { Component } from 'react'; +import './App.css'; +import CharacterCard from './CharacterCard.js'; + +class App extends Component { + constructor(props){ + super(props); + this.state = { + characters: [], + } + } + + componentDidMount(){ + fetch('https://swapi.co/api/people/') + .then((response) => response.json()) + .then((responseJson) => { + return this.setState({characters: responseJson.results}) + }) + .catch((error) => { + console.error(error); + }); + } + + renderCharacters() { + console.log('in renderCharacters'); + + console.log('characters array', this.state.characters); + } + + render() { + return ( +
+
+
+ logo +

Star Wars

+
+
+ +
+ logo + {this.renderCharacters()} +
+
+ ); + } +} + + +export default App; diff --git a/08week/my-app/src/App.test.js b/08week/starWars-app/src/App.test.js similarity index 100% rename from 08week/my-app/src/App.test.js rename to 08week/starWars-app/src/App.test.js diff --git a/08week/starWars-app/src/CharacterCard.js b/08week/starWars-app/src/CharacterCard.js new file mode 100644 index 000000000..5d352f6c9 --- /dev/null +++ b/08week/starWars-app/src/CharacterCard.js @@ -0,0 +1,17 @@ +import React, { Component } from 'react'; +import logo from './logo.svg'; +import './App.css'; + +class CharacterCard extends Component { + render() { + console.log(this.props); + return ( +
+

{this.props.name}

+

{this.props.birth_year}

+
+ ); + } +} + +export default CharacterCard; diff --git a/08week/my-app/src/index.css b/08week/starWars-app/src/index.css similarity index 100% rename from 08week/my-app/src/index.css rename to 08week/starWars-app/src/index.css diff --git a/08week/my-app/src/index.js b/08week/starWars-app/src/index.js similarity index 100% rename from 08week/my-app/src/index.js rename to 08week/starWars-app/src/index.js diff --git a/08week/my-app/src/registerServiceWorker.js b/08week/starWars-app/src/registerServiceWorker.js similarity index 100% rename from 08week/my-app/src/registerServiceWorker.js rename to 08week/starWars-app/src/registerServiceWorker.js diff --git a/08week/starWars-app/src/script.js b/08week/starWars-app/src/script.js new file mode 100644 index 000000000..d0d2346cf --- /dev/null +++ b/08week/starWars-app/src/script.js @@ -0,0 +1,107 @@ +'use strict'; + +class TicTacToe extends React.Component { + + constructor(props) { + super(props); + // resetState is the beginning state, before the first move has been made. + // this.state is set to resetState and the beginning of the game and after + // the #reset button is clicked. Code on the reset button in render. + this.resetState = { + turn: 'X', // Turn flips between 'X' and 'O' and represents the player's mark + gameInPlay: true, // Starts as true. Set to false when game won. Set to true on reset. + // if gameInPlay is false, no more marks may be placed on the board until + // the game is reset, which toggles it back to true. + cell0: null, // (
{ + newState.gameInPlay = false; + newState.winner = newState.turn; + return newState; + } + + handleClick = (cell) => { + if (!this.state[cell] && this.state.gameInPlay) { + // create temp newState to limit renderings as many state changes are made + let newState = {...this.state}; + // Either an 'X' or 'O' placed in cell. Turn will be toggled if no winner found + newState[cell] = newState.turn; + // switch will look for a win in the 8 possible winning combinations. If + // none are found, then its default will toggle the turn. + switch (true) { + case (newState.cell0 === newState.turn && newState.cell1 === newState.turn && newState.cell2 === newState.turn): + newState = this.gameWon(newState); + break; + case (newState.cell3 === newState.turn && newState.cell4 === newState.turn && newState.cell5 === newState.turn): + newState = this.gameWon(newState); + break; + case (newState.cell6 === newState.turn && newState.cell7 === newState.turn && newState.cell8 === newState.turn): + newState = this.gameWon(newState); + break; + case (newState.cell0 === newState.turn && newState.cell3 === newState.turn && newState.cell6 === newState.turn): + newState = this.gameWon(newState); + break; + case (newState.cell1 === newState.turn && newState.cell4 === newState.turn && newState.cell7 === newState.turn): + newState = this.gameWon(newState); + break; + case (newState.cell2 === newState.turn && newState.cell5 === newState.turn && newState.cell8 === newState.turn): + newState = this.gameWon(newState); + break; + case (newState.cell0 === newState.turn && newState.cell4 === newState.turn && newState.cell8 === newState.turn): + newState = this.gameWon(newState); + break; + case (newState.cell2 === newState.turn && newState.cell4 === newState.turn && newState.cell6 === newState.turn): + newState = this.gameWon(newState); + break; + default: + // the move didn't cause a win, so the turn is toggled + newState.turn = newState.turn === 'X' ? 'O' : 'X'; + } + // state updated after each valid move + this.setState(newState); + } + }; + + render() { + return ( +
+
+
+
this.handleClick('cell0')}>{this.state.cell0}
+
this.handleClick('cell1')}>{this.state.cell1}
+
this.handleClick('cell2')}>{this.state.cell2}
+
+
+
this.handleClick('cell3')}>{this.state.cell3}
+
this.handleClick('cell4')}>{this.state.cell4}
+
this.handleClick('cell5')}>{this.state.cell5}
+
+
+
this.handleClick('cell6')}>{this.state.cell6}
+
this.handleClick('cell7')}>{this.state.cell7}
+
this.handleClick('cell8')}>{this.state.cell8}
+
+
Winner: {this.state.winner}
+
+ +
+ ); + } +} + +ReactDOM.render(, document.getElementById('tic-tac-toe'));