-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathindex.html
More file actions
124 lines (121 loc) · 6.39 KB
/
Copy pathindex.html
File metadata and controls
124 lines (121 loc) · 6.39 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<link type="text/css" rel="stylesheet" href="scoreboard.css" />
<title> Card Game </title>
</head>
<body>
<div class="container">
<header class="jumbotron text-center">
<h1>Card Game</h1>
<h2>Try your luck in cards against the mighty computer!</h2>
</header>
<section>
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<label for="cardCount" class="control-label">How many cards do you want to deal?</label>
</div>
<div class="col-sm-2">
<select class="form-control" id="cardCount">
<option>1</option>
<option>2</option>
<option>3</option>
<option selected>4</option>
</select>
</div>
<div class="col-sm-1">
<input id="startButton" type="button" class="btn btn-success" value="Start" onClick="start();">
</div>
</div>
</form>
<div class="col-sm-12 text-center handContainer">
<h2>Your hand</h2>
</div>
<div id="userCards" class="row">
</div>
<div class="col-sm-12 text-center handContainer">
<h2>Computer's hand</h2>
</div>
<div id="computerCards" class="row">
</div>
<div id="result" class="row text-center">
</div>
<div id="scoreBoard">
<div id="round"></div>
<div id="totalScore">
<div class="player">
<p>YOU</p>
<p id="playerScore"></p>
</div>
<div class="computer">
<p>COMPUTER</p>
<p id="computerScore"></p>
</div>
</div>
<button class="btn btn-default resetScore" type="button" onclick="resetScore()">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABmJLR0QA/wD/AP+gvaeTAAABv0lEQVRIicXVQWtTQRQF4K81YkU0VFpwpVZQxN/gSlQquKn/QbCC4sa9oBgEyd6V4NaFBQX/hwVbd6atRYsIRbEhNamLmfSNyXtPXyp6YCDh3nvOzHl37vCfMYk7eIlP2IlrFa9xC0dHIZ7AI3xLSIvWFh7EmhSHi8jPYDGHqIsvcW3nxJcxEzmuoJFHfhIrSVEPC7HgSJJXx5xgXSqyinm00RwkP4h3SfIHXCw6ZoJL2Mg50ZDAvSS4jtN/QN7HOXwsE5gWPlbflgsVyAkWtssEbiSB53+BfFegFpOuJQVPKgosChYNYhPG4p/3OIEfQrdsVRRJcVtomC4ewzg6wrFW9kDcx5rMptp4FNgfg2NFVSOgg15NsOUu9tmbNXAIx+Lv9b4APBVuJ5wa2MVaBYHzwkYJo2MXTcNt1hZasApeJPXXywRGIb8sXNIdfMcU4QPnYROtCuRn8UzWJA18ThPyLNqIu/odZv06h94afhs0BVvmhZGbCr0Sbno9ya/jaoz1ktwWjuftoiHzfAZLOSfalj043Zz4GyUTePB5m8B92YQtW1/xEAeKyMswiZuCFa1I2BFsXBDmTr2w+l/gJ9EqsNvfdh2YAAAAAElFTkSuQmCC">
</button>
<p class="hideButton" onclick="hideScores()">Hide</p>
</div>
<button id="showScores" class="btn btn-dark" onclick="showScores(0)">Scores</button>
</section>
<footer class="row text-center">
<hr />
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#howItWorks"> How it works? </button>
</footer>
<!-- Modal -->
<div class="modal fade" id="howItWorks" tabindex="-1" role="dialog" aria-labelledby="howItWorksLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="howItWorksLabel">How it works?</h4>
</div>
<div class="modal-body"> When you choose the number of cards what you want to deal, the system
select randomly the suit and the card of each one card to player and computer and sum the points
that each one got to score.<br />
<br />
The value of each cards are:
<ul>
<li>2: 2 points</li>
<li>3: 3 points</li>
<li>4: 4 points</li>
<li>5: 5 points</li>
<li>6: 6 points</li>
<li>7: 7 points</li>
<li>8: 8 points</li>
<li>9: 9 points</li>
<li>10: 10 points</li>
<li>J (Jack): 11 points</li>
<li>Q (Queen): 12 points</li>
<li>K (King): 13 points</li>
<li>A (Ace): 14 points</li>
</ul>
<br />
Who have the highest score are the winner, and if are the same score it's a tie.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="mvc-model.js"></script>
<script type="text/javascript" src="mvc-view.js"></script>
<script type="text/javascript" src="scoreboard.js"></script>
</body>
</html>