Skip to content

First push and commit #504

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
RoyKuah wants to merge 1 commit into
base: main
Choose a base branch
from
Open

First push and commit #504

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
8 changes: 8 additions & 0 deletions .github/PULL_REQUEST_TEMPLATE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,25 @@ Please fill out the survey before submitting the pull request. Thanks!
🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀

How many hours did you spend on this assignment?
2 days

Please fill in one error and/or error message you received while working on this assignment.
Undefined on some lines such as the latest if statement on Ace + 10, ace + face cards in the first two round

What part of the assignment did you spend the most time on?
if statements, and trying to fix the file sources for the images. Need to google and research a lot to make it more presentable such as background image

Comfort Level (1-5):
2

Completeness Level (1-5):
2

What did you think of this deliverable?
Not really great, need more practice...

Is there anything in this code that you feel pleased about?

Just happy that the base game works
What's one aspect of your code you would like specific, elaborate feedback on?
N/A
155 changes: 49 additions & 106 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,10 @@

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Page setup configurations -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Favicon configuration -->
<link rel="apple-touch-icon" sizes="180x180" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/apple-touch-icon.png?v=2">
<link rel="icon" type="image/png" sizes="32x32" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-16x16.png?v=2">
<link rel="manifest" href="/site.webmanifest?v=2">
<link rel="mask-icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/safari-pinned-tab.svg?v=2" color="#e73c3e">
<link rel="shortcut icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon.ico?v=2">
<meta name="apple-mobile-web-app-title" content="Rocket Academy">
<meta name="application-name" content="Rocket Academy">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">

<!-- sharing configuration -->
<!-- Primary Meta Tags -->
<title>Blackjack - Basics - Rocket Academy</title>
<meta name="title" content="YOURNAME's BlackJack Game!">
<meta name="description" content="A fun card game I made myself! 😄💪🌈">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
<meta property="og:title" content="YOURNAME's BlackJack Game!">
<meta property="og:description" content="A fun card game I made myself! 😄💪🌈">
<meta property="og:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
<meta name="twitter:title" content="YOURNAME's BlackJack Game!">
<meta name="twitter:description" content="A fun card game I made myself! 😄💪🌈">
<meta name="twitter:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
<meta name="twitter:site" content="@rocketacademyco">
<meta name="twitter:creator" content="@rocketacademyco">

<!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

<!-- CSS -->
<style>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<style>
* {
box-sizing: border-box;
}
Expand All @@ -56,8 +15,8 @@
margin-right: 30px;
background-color:white;
color: black; /* sets the font color */
background-image: url(""); /* The image used */
background-position: center; /* Center the image */
background-image: url("BG.jpg"); /* The image used */
background-position: top; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
Expand All @@ -69,15 +28,20 @@
}
.header {
text-align: center;
font-size: 1.1rem;
margin-bottom: 3rem;
font-size: 200px auto;
}

footer {
text-align: center;

}

#container {
background-color: pink;
margin: 40px auto;
max-width: 800px;
padding: 38px 31px;
background-color: rgb(157, 196, 160);
margin-left: 20px;
max-width:200px;
padding: 10px 20px;
border-radius:10px;
}

input {
Expand All @@ -89,67 +53,46 @@
}

button {
font-size: 21px;
line-height: 33px;
font-size: 15px;
line-height: 20px;
margin: 0 0 23px 0;
padding: 0 6px;
padding: 6 6px;
color: rgb(255, 255, 255);
background-color: rgb(135, 149, 207);

}

#output-div {
/* #output-div {
background-color: lightgrey;
margin: 20px auto;
padding: 20px;
width: 100%;
}
margin:0 0 23px 0;
line-height: 40px;
height: 40px;
padding: 9px;
width: 20%;
}S */

.logo-img {
height: 49px;
position: relative;
top: 22px;
}
/* deal-button {
font-size: 15px;
line-height: 20px;
margin: 23px;
padding: 6 6px;


} */



/* increase header font size on wider screens */
@media screen and (min-width: 600px) {
.header {
font-size: 2rem;
}
}
</style>

</head>

<title>BlackJack</title>
</head>
<body>
<h1 class="header">
<img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
Rocket Academy
<img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
</h1>
<h1 class="header">♣️ Basics - Blackjack ♠️</h1>
<div id="container">
<p>Input:</p>
<input id="input-field" />
<br />
<button id="submit-button">Submit</button>
<p>Output:</p>
<div id="output-div"></div>
</div>
<!-- Import program logic -->
<h1 class="header">♥️ ♦️Blackjack♠️ ♣️ </h1>
<footer>You are player 1, get 21 points to win.</footer>
<button id="deal-button">Deal!</button>
<div id="player1Cards"></div>
<div id="player2Cards"></div>
<script src="script.js"></script>
<!-- Define button click functionality -->
<script>
var button = document.querySelector("#submit-button");
button.addEventListener("click", function () {
// Set result to input value
var input = document.querySelector("#input-field");
var result = main(input.value);

// Display result in output element
var output = document.querySelector("#output-div");
output.innerHTML = result;

// Reset input value
input.value = "";
});
</script>
</body>
</html>
</body>
</html>
127 changes: 124 additions & 3 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,125 @@
var main = function (input) {
var myOutputValue = 'hello world';
return myOutputValue;
var player1Cards = document.getElementById("player1Cards");
var player2Cards = document.getElementById("player2Cards");
var dealButton = document.getElementById("deal-button");
var nums = [
"ace",
"two",
"three",
"four",
"five",
"six",
"seven",
"eight",
"nine",
"ten",
"jack",
"queen",
"king",
];
var suitsholder = ["Diamonds", "Hearts", "Clubs", "Spades"];
var imgholder = [];
for (let i = 0; i < 13; i += 1) {
imgholder.push([]);
for (let j = 0; j < 4; j += 1) {
var imagePath = `images/${nums[i]}Of${suitsholder[j]}.jpg`;
console.log("Image Path:", imagePath);
imgholder[i].push(imagePath);
}
}

// creating a deck of cards
const makeDeck = () => {
var newDeck = [];
for (let i = 1; i <= 13; i += 1) {
var suits = ["♦", "♥", "♣", "♠"];
for (let j = 0; j < suits.length; j += 1) {
var name = `${i}`;
if (name === "1") {
name = "A";
} else if (name === "11") {
name = "J";
} else if (name === "12") {
name = "Q";
} else if (name === "13") {
name = "K";
}
var card = {
value: i,
suit: suits[j],
img: imgholder[i - 1][j],
name,
};
newDeck.push(card);
}
}
return newDeck;
};
// Get a random index ranging from 0 (inclusive) to max (exclusive).
const getRandomIndex = (max) => Math.floor(Math.random() * max);
// Shuffle an array of cards
const shuffleCards = (deck) => {
// Loop over the card deck array once
for (let currentIndex = 0; currentIndex < deck.length; currentIndex += 1) {
// Select a random index in the deck
const randomIndex = getRandomIndex(deck.length);
// Select the card that corresponds to randomIndex
const randomCard = deck[randomIndex];
// Select the card that corresponds to currentIndex
const currentCard = deck[currentIndex];
// Swap positions of randomCard and currentCard in the deck
deck[currentIndex] = randomCard;
deck[randomIndex] = currentCard;
}
// Return the shuffled deck
return deck;
};
var deck = makeDeck();
var shuffledDeck = shuffleCards(deck);
function dealCard(card, player) {
var cardImage = document.createElement("img");
cardImage.src = card.img;
player.appendChild(cardImage);
}

var counter = 0;
var turn = "player1";
var threshold = 21;
var player1Hand = [];
var player2Hand = [];
function getHandValue(hand) {
var sum = 0;
for (var i = 0; i < hand.length; i++) {
sum += hand[i].value;
}
return sum;
}
dealButton.addEventListener("click", () => {
var card = shuffledDeck.pop();
if (counter == 0) {
if (getHandValue(player1Hand) < 21) {
dealCard(card, player1Cards);
player1Hand.push(card);
}
counter = 1;
} else {
if (getHandValue(player2Hand) < 21) {
dealCard(card, player2Cards);
player2Hand.push(card);
}
counter = 0;
}
if (counter == 0 && player1Hand.length == 2) {
var hasAce = false;
var hasSpecialCard = false;
for (var i = 0; i < player1Hand.length; i++) {
if (player1Hand[i].value == 1) {
hasAce = true;
} else if (player1Hand[i].value >= 10 && player1Hand[i].value <= 12) {
hasSpecialCard = true;
}
}
if (hasAce && hasSpecialCard) {
alert("Player 1 wins with an Ace and a special card!");
}
}
});
5 changes: 5 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/* style.css */
img {
max-width: 20%;
height: auto;
}