-
Notifications
You must be signed in to change notification settings - Fork 11
/
index.html
119 lines (102 loc) · 3.36 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
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VirtuDeck</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"
integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="text-center">
<div class="display-4 page-title">VirtuDeck</div>
<p class="lead">Your custom deck of cards, shuffled and ready!</p>
</div>
<h2>Setup
<span class="float-right">
<i id="setup-show" onclick="setupToggleHide();" class="fas fa-chevron-down"></i>
</span>
</h2>
<div class="game-setup">
<form id="setup" onsubmit="setupComplete();">
<div class="form-group">
<label for="setup-card-content">Card content</label>
<textarea class="form-control" id="setup-card-content" rows="5"></textarea>
<small class="form-text text-muted">One card per line. Supports basic HTML.</small>
</div>
<div class="form-group">
<button type="button" class="btn btn-lg btn-success" onclick="setupComplete();">Go!</button>
</div>
</form>
<hr />
</div>
<div id="deck" class="deck d-none">
<h2>Draw a card</h2>
<div class="active-card">
<p id="card-text" class="active-card-text"></p>
</div>
<p>
<button class="btn btn-lg btn-success" onclick="drawCard();">Draw</button>
</p>
</div>
</div>
<script>
// SETUP
let Deck;
let CardList = [
"This is a default card.",
"This is another default card.",
];
function setupToggleHide() {
let form = document.getElementById('setup');
form.classList.toggle('d-none');
}
function setupComplete() {
let setupCardContent = document.getElementById('setup-card-content').value;
let setupCards = setupCardContent.split('\n');
for (let i = 0; i < setupCards.length; i++) {
if (setupCards[i] == "") {
setupCards.splice(i, 1);
i--;
}
}
if (setupCards.length > 0) {
CardList = [];
CardList = setupCards.slice();
console.log("INFO: The following cards were parsed.");
console.log(CardList);
refillCards();
document.getElementById('setup').classList.add('d-none');
document.getElementById('deck').classList.remove('d-none');
}
}
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
function refillCards() {
Deck = [];
Deck = CardList.slice();
Deck = shuffle(Deck);
console.log('INFO: Deck was refilled and shuffled.');
}
// GAME
function drawCard() {
if (Deck.length < 1) {
refillCards();
}
let card = Deck.pop();
document.getElementById('card-text').innerHTML = card;
console.log(card);
}
refillCards();
</script>
</body>
</html>