-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
146 lines (105 loc) · 3.87 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
/**
*,-------------------.
( WHAT EEEEES IT MAN? )
`-------------------'
'
\ ,-_
',' )
/|_\|/_/| _// ,'
, ,--,-. . ,' / ,
/ ( O _O ) \ _;___ .
| (___)' | ()/()/ ,
|. , | ,> ,'
/ '-'\__,' | | /',\
//|. \\\ \ '^; <-^.
||| , `-'|\\ ) '
||| ' ||| _n___|/, |
c D ' , c D -_ ---,' |
UU ' '-' ' UU U < (
\ __ / ,.-. ._,.
__|| ||__ (( `'- |
(___/ \___) [lf] c___) U
*/
// global variables
let deckId;
let computerScore = 0;
let userScore = 0;
const cardContainer = document.getElementById("cards");
const newDeck = document.getElementById("new-deck");
const drawBtn = document.getElementById("draw");
const remaining = document.getElementById("remaining");
const winner = document.getElementById("header");
const computerScoreEl = document.getElementById("computer-score");
const userScoreEl = document.getElementById("user-score");
// handling a new deck
function handleClick(){
fetch("https://apis.scrimba.com/deckofcards/api/deck/new/shuffle/")
.then(res => res.json())
.then(data => {
remaining.textContent = `Remaining cards: ${data.remaining}`
deckId = data.deck_id
console.log(data)
})
}
newDeck.addEventListener("click", handleClick)
//disable btn after cards run out
// Draw
function drawCard() {
fetch(`https://apis.scrimba.com/deckofcards/api/deck/${deckId}/draw/?count=2`)
.then(res => res.json())
.then(data => {
remaining.textContent = `Remaining cards: ${data.remaining}`
// console.log(data)
cardContainer.children[0].innerHTML = `
<img src= ${data.cards[0].image} class = "card"/>
`
cardContainer.children[1].innerHTML = `
<img src= ${data.cards[1].image} class = "card"/>
`
const winnerText = determineCardWinner(data.cards[0], data.cards[1])
header.textContent = winnerText
if (data.remaining === 0) {
draw.disabled = true
if(computerScore > userScore){
header.text= "The COMPUTER WIN!!!"
}
else if(userScore > computerScore){
header.text= "YOU WIN!!!"
}
else{header.textContent = "It's a tie game!"}
}
})
}
//DisplayCards
drawBtn.addEventListener("click", drawCard)
function determineCardWinner(card1, card2) {
const valueOptions = ["2", "3", "4", "5", "6", "7", "8", "9",
"10", "JACK", "QUEEN", "KING", "ACE"]
const card1ValueIndex = valueOptions.indexOf(card1.value)
const card2ValueIndex = valueOptions.indexOf(card2.value)
// console.log("card 1:", card1ValueIndex)
// console.log("card 2:", card2ValueIndex)
if (card1ValueIndex > card2ValueIndex) {
computerScore++
computerScoreEl.textContent = `Computer Score: ${computerScore}`
return ("Computer Wins!")
}
else if (card1ValueIndex < card2ValueIndex) {
userScore++
userScoreEl.textContent = `User Score: ${userScore}`
return ("You Win!")
}
else {
return ("WAR!")}
}
// example of async/ await has the function appear to bw completely synchronous
// async function handleClick() {
// const response = await fetch("https://apis.scrimba.com/deckofcards/api/deck/new/shuffle/")
// const data = await res.json()
// remainingText.textContent = `Remaining cards: ${data.remaining}`
// deckId = data.deck_id
// console.log(deckId)
// Docs for original Deck of Cards API: https://deckofcardsapi.com/#draw-card
// * BaseUrl you'll use: https://apis.scrimba.com/deckofcards/api/deck/
// * (that will replace the base url of https://deckofcardsapi.com/api/deck/)
// * that you'll see in the deck of cards API docs.