-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
156 lines (156 loc) · 6.27 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
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
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
/>
<link rel="stylesheet" href="style.css" />
<title>Set</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<h1>SET SOLITAIRE</h1>
</div>
<div id="btn-container" class="container">
<button id="start" type="button" class="btn btn-primary btn-lg">
Begin New Game
</button>
<button id="hint" class="btn btn-secondary btn-lg">Request Hint</button>
<button id="new-row" class="btn btn-secondary btn-lg">
Request Additional Cards
</button>
</div>
<div class="container" id="container"></div>
<!-- Large modal -->
<div class="py-3 px-2">
<button
type="button"
class="btn btn-info float-right"
data-toggle="modal"
data-target=".instructions-modal"
>
Rules and Instructions
</button>
</div>
<div
class="modal fade instructions-modal"
tabindex="-1"
role="dialog"
aria-labelledby="myLargeModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<h3 class="modal-title">Rules</h3>
<p>
The object of the game is to identify a <i>SET</i> of 3 cards from
12 cards placed face up on the table. Each card has four features,
which can vary as follows.
</p>
<p>
<b
>SHAPE: Circle <i class="bi-circle green"></i>, Triangle
<i class="bi-triangle green"></i>, Square
<i class="bi-square green"></i
></b>
</p>
<p>
<b
>NUMBER: One <i class="bi-circle blue"></i>, Two
<i class="bi-circle blue"></i> <i class="bi-circle blue"></i>,
Three <i class="bi-circle blue"></i>
<i class="bi-circle blue"> </i><i class="bi-circle blue"></i>.
</b>
</p>
<p>
<b
>COLOR: Red <i class="bi-circle-fill red"></i>, Green
<i class="bi-circle-fill green"></i>, Blue
<i class="bi-circle-fill blue"></i
></b>
</p>
<p>
<b
>STYLE: Hollow <i class="bi-circle red"></i>, Full
<i class="bi-circle-fill red"></i>, Background
<span style="color: red; background-color: red">
. <i class="bi-circle white"></i> .</span
></b
>
</p>
<p>
A <i>SET</i> consists of 3 cards in which each of the cards'
features, looked at one-by-one, are the same on each card, or, are
different on each card. All the features must separately satisfy
this rule. In other words: shape must be either the same on all
three cards, or different on each of the 3 cards; color must be
either the same on all 3 cards, or different on each of the 3,
etc.
</p>
<p class="h4">A QUICK CHECK - Is it a SET??</p>
<p>
If 2 cards are the same and 1 card is different in any feature,
then it is not a <i>SET</i>. For example, if 2 are red and 1 is
blue then it is not a <i>SET</i>. A <i>SET</i> must be either all
the same OR all different in each individual feature.
</p>
<p class="h5">What if I can't find a <i>SET</i>?</p>
<p>
If you cannot find a set, it could be because there are none
available on the board. If there are no <i>SET</i>s available you
are allowed to put three additonal cards on the board. You will
only be granted additional cards if there are truly no sets
available. If you have added more cards to the board, your
<i>SET</i>s will not be replaced with new cards until there are
less than 12 cards on the board.
</p>
<p>
You may also request a "hint" (this feature is only available with
this version and not part of the original card game). When doing
so, a card that is part of an available <i>SET</i> will be
outlined. If you request another hint, a second card of the same
<i>SET</i> will also be outlined.
</p>
<p class="h5">END-GAME</p>
<p>
The game ends in one of two ways. First is if there are no SETs
available on the board and there are no cards left in the deck to
add to the board. Second is if you clear every card in the deck
from the board. As with standard Solitaire, there is no great way
to ensure that you will be able to make it through the entire
deck. Much of that depends on the luck of the draw.
</p>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<script src="cards.js"></script>
<script src="script.js"></script>
</body>
</html>