-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
117 lines (116 loc) · 5.34 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./dist/stylesheets/index.css" />
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<title>Card Counter</title>
</head>
<body>
<main>
<header>Card Counter</header>
<div id="game-board">
<section id="menu-content" class="active">
<span>Choose a Level</span>
<ul id="level-index"></ul>
<button id="tutorial-button">How to play</button>
</section>
<section id="modal-screen" style="background-color: rgba(169, 169, 169, 0.5)">
<div class="modal-content">
<span>What's the count?</span>
<div class="modal-form">
<i id="minus" class="fas fa-minus"></i>
<span id="modal-guess">0</span>
<i id="plus" class="fas fa-plus"></i>
</div>
<button id="submit">Submit guess</button>
</div>
<div id="post-guess-modal"></div>
</section>
<article id="tutorial">
<i id="exit-tutorial" class="fas fa-times"></i>
<div id="tutorial-content">
<div id="tutorial-col-1">
<span id="tutorial-col-1-header">What is card counting?</span>
<p id="card-counting-explain">
Card counting involves keeping track of a "running count" in your
head as you watch the cards come out. The count starts at 0, then
changes depending on what cards appear.
Cards valued 2-6 count as +1, 7-9 count as 0, and 10, J, Q, K,
and A count as -1. The technique is widely used by professional
Blackjack players to gain an advantage over the house.
</p>
<div id="diagram">
<div id="diagram-labels">
<span>+1:</span>
<span>0:</span>
<span>-1:</span>
</div>
<div id="diagram-rows">
<div class="diagram-row" id="plus-one-cards">
<img src="./dist//card_imgs/HEART-2.svg" />
<img src="./dist//card_imgs/HEART-3.svg" />
<img src="./dist//card_imgs/HEART-4.svg" />
<img src="./dist//card_imgs/HEART-5.svg" />
<img src="./dist//card_imgs/HEART-6.svg" />
</div>
<div class="diagram-row" id="plus-zero-cards">
<img src="./dist//card_imgs/HEART-7.svg" />
<img src="./dist//card_imgs/HEART-8.svg" />
<img src="./dist//card_imgs/HEART-9.svg" />
</div>
<div class="diagram-row" id="minus-one-cards">
<img src="./dist//card_imgs/HEART-10.svg" />
<img src="./dist//card_imgs/HEART-11.svg" />
<img src="./dist//card_imgs/HEART-12.svg" />
<img src="./dist//card_imgs/HEART-13.svg" />
<img src="./dist//card_imgs/HEART-1.svg" />
</div>
</div>
</div>
</div>
<div id="tutorial-col-2">
<span>What is this game?</span>
<p id="game-explain">
This game is a tool to practice counting cards. Cards move across
the screen, and it is your job to keep the count in your head.
At the end of each level, the game will ask you for the count and
tell you if you were right or not. The count resets back to 0
after each level.
</p>
<span>Example</span>
<p>
Say you start a level. As always, the count starts at 0. The
first card is the ace of spades. An ace counts as -1, so now the
count is -1. Next, the 3 of hearts and the jack of diamonds shoot
across the screen at the same time. The count stays at -1 because
the 3 counts as +1 and the jack counts as -1, so they cancel each
other out. Before the level ends, you see the cards 2, 8, 7, and 6.
The correct count at the end of the level would be 1.
</p>
</div>
</div>
</article>
</div>
<div id="reset-button-holder"></div>
<div id="links-index">
<a target="_blank" href="https://jackfragassi.com">
<i class="fas fa-user-circle"></i>
</a>
<a target="_blank" href="https://github.com/jfrag1/card-counter">
<i class="fab fa-github"></i>
</a>
<a target="_blank" href="https://www.linkedin.com/in/jack-fragassi-a8413b1b4/">
<i class="fab fa-linkedin-in"></i>
</a>
<a target="_blank" href="https://angel.co/u/jack-fragassi">
<i class="fab fa-angellist"></i>
</a>
</div>
</main>
<script src="./dist/bundle.js"></script>
</body>
</html>