Skip to content

changes #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Christrevino22 wants to merge 2 commits into
base: gh-pages
Choose a base branch
from
Open

changes #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5a58b61
changes
Christrevino22 Jul 20, 2020
35bb6ea
robo fineshed
Christrevino22 Jul 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions 07week/dodgeBall/dodgeBall.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./styles.css">
<title>Dodge Ball</title>
</head>
<body>
<div>
<h4>List Of People</h4>
<ul id="people"></ul>
</div>
<button id="generate-people" onclick="listPeopleChoices()">List People</button>
<div>
<h4>Dodge Ball Players</h4>
<ul id="players"></ul>
</div>
<div>
<h4>Blue Team</h4>
<ul id="blue"></ul>
</div>
<div>
<h4>Red Team</h4>
<ul id="red"></ul>
</div>
<script src='./dodgeBall.js'></script>
</body>
</html>
183 changes: 183 additions & 0 deletions 07week/dodgeBall/dodgeBall.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
'use strict'


const arrOfPeople = [
{
id: 2,
name: "Charles Young",
age: 55,
skillSet: "welding",
placeBorn: "Omaha, Nebraska"
},
{
id: 3,
name: "Judy Twilight",
age: 35,
skillSet: "fishing",
placeBorn: "Louisville, Kentucky"
},
{
id: 4,
name: "Cynthia Doolittle",
age: 20,
skillSet: "tic tac toe",
placeBorn: "Pawnee, Texas"
},
{
id: 5,
name: "John Willouby",
age: 28,
skillSet: "pipe fitting",
placeBorn: "New York, New York"
},
{
id: 6,
name: "Stan Honest",
age: 20,
skillSet: "boom-a-rang throwing",
placeBorn: "Perth, Australia"
},
{
id: 7,
name: "Mia Watu",
age: 17,
skillSet: "acrobatics",
placeBorn: "Los Angeles, California"
},
{
id: 8,
name: "Walter Cole",
age: 32,
skillSet: "jump rope",
placeBorn: "New Orleans, Louisiana"
},
]

const listOfPlayers = [];
const blueTeam = [];
const redTeam = [];



class player {
constructor(id, name, age, skillSet, placeBorn, canThrowBall, canDodgeBall, hasPaid, isHealthy, yearsExperience) {
this.id = id;
this.name = name;
this.age = age;
this.skillSet = skillSet;
this.placeBorn = placeBorn;
this.canThrowBall = canThrowBall;
this.canDodgeBall = canDodgeBall;
this.hasPaid = hasPaid;
this.isHealthy = isHealthy;
this.yearsExperience = yearsExperience;
}
}
class blueTeammate extends player {
Copy link

@yousifS yousifS Jul 28, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There really should only be a single TeamMate class that has an attribute of color, instead of separate classes for red team and blue team.

constructor(id, name, age, skillSet, placeBorn, canThrowBall, canDodgeBall, hasPaid, isHealthy, yearsExperience, color, mascot) {
super(id, name, age, skillSet, placeBorn, canThrowBall, canDodgeBall, hasPaid, isHealthy, yearsExperience);
this.color = color;
this.mascot = mascot;
}
}
class redTeammate extends player {
constructor(id, name, age, skillSet, placeBorn, canThrowBall, canDodgeBall, hasPaid, isHealthy, yearsExperience, color, mascot) {
super(id, name, age, skillSet, placeBorn, canThrowBall, canDodgeBall, hasPaid, isHealthy, yearsExperience);
this.color = color;
this.mascot = mascot;
}
}



const listPeopleChoices = () => {
document.getElementById("generate-people").remove();
const listElement = document.getElementById('people')
arrOfPeople.map(person => {
const li = document.createElement("li")
li.setAttribute("id", `person-${person.id}`)
const button = document.createElement("button")
button.innerHTML = "Make Player"
button.addEventListener('click', function () { makePlayer(person.id) })
li.appendChild(button)
li.appendChild(document.createTextNode(person.name + " - " + person.skillSet))
listElement.append(li)
})
}

const makePlayer = (id) => {
document.getElementById(`person-${id}`).remove()

let selectedPlayer;
for (let i = 0; i < arrOfPeople.length; i++) {
if (arrOfPeople[i].id === id) {
selectedPlayer = arrOfPeople[i];
}
}

const unassignedPlayer = new player(selectedPlayer.id, selectedPlayer.name, selectedPlayer.age, selectedPlayer.skillSet, selectedPlayer.placeBorn);
listOfPlayers.push(unassignedPlayer);

const listElement = document.getElementById("players");
const li = document.createElement("li");
li.setAttribute("id", `person-${selectedPlayer.id}`)

const buttonAssignRed = document.createElement("button");
buttonAssignRed.innerHTML = "Assign to Red Team";
buttonAssignRed.setAttribute("id", "red-button");
buttonAssignRed.addEventListener('click', function () { assignRedTeammate(id) });

const buttonAssignBlue = document.createElement("button");
buttonAssignBlue.innerHTML = "Assign to Blue Team";
buttonAssignBlue.setAttribute("id", "blue-button");
buttonAssignBlue.addEventListener('click', function () { assignBlueTeammate(id) });


li.appendChild(buttonAssignRed);
li.appendChild(buttonAssignBlue);
li.appendChild(document.createTextNode(selectedPlayer.name + " - " + selectedPlayer.skillSet));

listElement.append(li);

}

const assignRedTeammate = (id) => {
document.getElementById(`person-${id}`).remove();

let selectedPlayer;
for (let i = 0; i < arrOfPeople.length; i++) {
if (arrOfPeople[i].id === id) {
selectedPlayer = arrOfPeople[i];
}
}

const assignedPlayer = new redTeammate(selectedPlayer.id, selectedPlayer.name, selectedPlayer.age, selectedPlayer.skillSet, selectedPlayer.placeBorn, null, null, null, null, null, "red", "bulls");
redTeam.push(assignedPlayer);

const listElement = document.getElementById("red");
const li = document.createElement("li");
li.setAttribute("id", `person-${selectedPlayer.id}`)
li.appendChild(document.createTextNode(selectedPlayer.name + " - " + selectedPlayer.skillSet));
listElement.append(li);
}

const assignBlueTeammate = (id) => {
document.getElementById(`person-${id}`).remove()

let selectedPlayer;
for (let i = 0; i < arrOfPeople.length; i++) {
if (arrOfPeople[i].id === id) {
selectedPlayer = arrOfPeople[i];
}
};

const assignedPlayer = new blueTeammate(selectedPlayer.id, selectedPlayer.name, selectedPlayer.age, selectedPlayer.skillSet, selectedPlayer.placeBorn, null, null, null, null, null, "blue", "bluedevils");
blueTeam.push(assignedPlayer);

const listElement = document.getElementById("blue");
const li = document.createElement("li");
li.setAttribute("id", `person-${selectedPlayer.id}`)
li.appendChild(document.createTextNode(selectedPlayer.name + " - " + selectedPlayer.skillSet));
listElement.append(li);

}
41 changes: 41 additions & 0 deletions 08week/cardGame/api.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Robot War!!</title>
<style>
div {
border: 1px solid grey;
}
#player1 {
display: inline-block;
}
#player2 {
display: inline-block;
}

</style>
</head>
<body>
<h1>Robot War!!</h1>
<div>
<div id="player1">
You
<div id="player1Count"></div>
</div>
<div id="player2">
Computer
<div id="player2Count"></div>
</div>
</div>

<br>

<div>
<button onclick="playTurn()" id="playTurnButton"> Play Turn</button>
<img id="player1Card">
<img id="player2Card">
</div>

<script src="api.js"></script>
</body>
</html>
139 changes: 139 additions & 0 deletions 08week/cardGame/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,139 @@
'use strict'

class Player {
cards = []; //the deck of cards belonging th this player (ie. their hand)
id = null;
divId = null;

constructor(divId) {
this.id = Math.random(); //the id of the player (used to generate the robot)
this.divId = divId; // the divid on the page
};
};

//make an API call to get the image of the robot

// instaniating 2 player instances
let player1 = new Player("player1");
let player2 = new Player("player2");
// generate the robot for player1
generateRobot(player1)
// generate the robot for player2
generateRobot(player2)
// get thecards from the service, and split them between the 2 players
generateAndDealCards();

// uses the deckofcardsapi to generate a new deck, and then divy them between the players
function generateAndDealCards() {
fetch("https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1")
.then(function(response) {
console.log("Process fetch response for deck of cards", response);
return response.json();
})
.then(function(json) {
console.log("Processing the deck of cards payload", json);
let deckId = json.deck_id;
dealCards(deckId);
})
}

// split the deck between the 2 players
function dealCards(deckId) {
fetch("https://deckofcardsapi.com/api/deck/"+deckId+"/draw/?count=52")
.then(function(response) {
console.log("Processing the response for drawing the cards", response);
return response.json();
})
.then(function(json) {
console.log("Processing the payload for drawing the cards", json);
for(let i=0; i<json.cards.length; i+=2) {
player1.cards.push(json.cards[i]);
player2.cards.push(json.cards[i+1]);
}
updatePlayerCardCount(player1);
updatePlayerCardCount(player2);
})
}

// update the dom with the appropriate number of cards
function updatePlayerCardCount(player) {
let countDiv = document.getElementById(player.divId+"Count");
countDiv.innerText = player.cards.length;
}

function generateRobot(player) {
// make an api call to get the image of the robot using the random id
fetch("https://robohash.org/"+player.id)
.then(function(response) {
console.log("Processing the robot fetch response", response);
return response.blob();
})
.then(function(blob) {
console.log("Processing the robo fetch payload", blob);
insertRobot(player.divId, blob);
});
}


//generate the image tag, and insert it in the approriate div
function insertRobot(divId, blob) {
console.log("Attempting to add the img to div", divId);
let img = document.createElement("img");
img.src = URL.createObjectURL(blob);
let playerDiv = document.getElementById(divId);
playerDiv.appendChild(img);
}

//each player plays their top card,
//based on whose card has the heights value, that player takes both cards

function playTurn() {
console.log("Processing turn");
let card1 = player1.cards.shift();
let card2 = player2.cards.shift();

console.log("card1: ", card1);
console.log("card1: ", card2);
document.getElementById('player1Card').src = card1.image
document.getElementById('player2Card').src = card2.image
let v1 = getCardValue(card1);
let v2 = getCardValue(card2);

console.log("Comparing ", v1, " to ", v2);

if(v1 > v2) {
player1.cards.push(card1);
player1.cards.push(card2);
}
else if (v1 < v2) {
player2.cards.push(card1);
player2.cards.push(card2);
}
else {
player1.cards.push(card1);
player2.cards.push(card2);
}

updatePlayerCardCount(player1)
updatePlayerCardCount(player2)

}

function getCardValue(card) {
let value = card.value;
if(value == "JACK") {
return 11;
}
else if(value == "QUEEN") {
return 12;
}
else if(value == "KING") {
return 13;
}
else if(value == "ACE") {
return 14;
}
else {
return parseInt(value);
}
};