-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (95 loc) · 2.85 KB
/
index.html
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
<html>
<head>
<title>Deck of Cards</title>
<link rel="stylesheet" href="style.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<form>
<button id="create"><i class="material-icons">replay</i> Create Deck</button>
<button id="shuffle"><i class="material-icons">shuffle</i> Shuffle Deck</button>
<button id="cut"><i class="material-icons">low_priority</i> Cut Deck</button>
</form>
<div class="card-container">
<div class="card-back">
<img id="front-card" src="red.png"/>
</div>
<div class="card-front">
<div id="card-top">
<p class="value"></p>
<img src=""/>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="cards.js"></script>
<script>
var Deck = new deck();
init();
function init() {
setDeckOpacity();
}
function showMessage(message, type) {
swal({
title: message,
icon: type,
timer: 1000,
buttons: false,
className: "simple-success",
});
}
function setTopOpacity(opacity) {
document.getElementById("card-top").style.opacity = opacity;
}
function setDeckOpacity() {
if(stillHaveCards()) {
document.getElementById("front-card").style.opacity = 1;
} else {
document.getElementById("front-card").style.opacity = .5;
}
}
function stillHaveCards() {
if(Deck.getNumLeft() == 0) {
return false;
}
return true;
}
function displayCard(card) {
setTopOpacity(1);
if(card.suit == "heart" || card.suit == "diamond") {
document.getElementById("card-top").classList.add("red");
} else {
document.getElementById("card-top").classList.remove("red");
}
document.getElementById("card-top").children[0].innerText = card.value;
document.getElementById("card-top").children[1].setAttribute("src", card.suit + ".png");
}
document.getElementById("front-card").onclick = function(e) {
e.preventDefault();
if(stillHaveCards()) {
displayCard(Deck.deal());
} else {
showMessage("There are no cards left!", "error");
}
setDeckOpacity();
};
document.getElementById("create").onclick = function(e) {
e.preventDefault();
Deck.create();
setDeckOpacity();
setTopOpacity(0);
showMessage("New Deck Created", "success");
};
document.getElementById("shuffle").onclick = function(e) {
e.preventDefault();
Deck.shuffle();
showMessage("Deck Shuffled", "success");
};
document.getElementById("cut").onclick = function(e) {
e.preventDefault();
Deck.cut();
showMessage("Deck Cut", "success");
};
</script>
</html>