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 new file mode 100644 index 000000000..187533281 --- /dev/null +++ b/08week/simpleStarWars/app.css @@ -0,0 +1,54 @@ +.app { + text-align: center; + background-color: black; + width: 500px; +} + +#title { + background-color: black; + height: 20px; + padding: 30px; + color: blue; +} + +.name { + height: 35px; + width: 150px; + color: white; + background-color: blue; +} + +.spacer { + height: 35px; + width: 60px; + color: black; + background-color: black; +} + +.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..6f8dddbb2 --- /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 + + + +
+ + + + + + 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'));