-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (150 loc) · 5.99 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
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Set</title>
<meta name="keywords" content="set, set game" />
<meta name="description" content="Set game" />
<meta property="og:description" content="Set game" />
<meta property="og:title" content="Set" />
<meta property="og:url" content="https://best-set-game.netlify.app" />
<meta property="og:type" content="website" />
<link rel="stylesheet" type="text/css" href="./Semantic-UI-CSS-master/semantic.min.css">
<link rel="stylesheet" type="text/css" href="index.css">
<script defer type="text/javascript" src="index.js"></script>
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<body>
<!-- loading modal, shows up until we hit the heroku backend -->
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui huge text loader">Loading</div>
</div>
<!-- menu nav bar -->
<div class="ui black three item inverted menu massive fixed sticky">
<a class="item" data-action="create">
New Game
</a>
<a class="item" data-action="rules">
Rules
</a>
<a class="item" data-action="scores">
High Scores
</a>
</div>
<!-- rules modal -->
<div class="my-modal rules">
<div class="modal-content">
<span class="close">×</span>
<h2>Rules</h2>
<br><br>
<!-- Content from https://www.setgame.com/sites/default/files/instructions/SET%20INSTRUCTIONS%20-%20ENGLISH.pdf -->
<p>The object of the game is to identify sets of 3 cards from 12 cards placed on the board. The game ends when all of the cards have been dealt and there aren't any more sets. You can check if there is a set on the board with the No Set button, and if there is no set the cards will reshuffle.</p>
<p>Each card has 4 attributes:</p>
<div id="grid">
<div>Number</div>
<div>Color</div>
<div>Shape</div>
<div>Fill</div>
</div>
<div id="grid2">
<div><br>
<img src="./assets/red-full-circle.svg"><br>
<img src="./assets/red-full-circle.svg"><img src="./assets/red-full-circle.svg"><br>
<img src="./assets/red-full-circle.svg"><img src="./assets/red-full-circle.svg"><img src="./assets/red-full-circle.svg">
</div>
<div><br>
<img src="./assets/red-full-square.svg"><br>
<img src="./assets/purple-full-square.svg"><br>
<img src="./assets/green-full-square.svg">
</div>
<div><br>
<img src="./assets/green-full-circle.svg"><br>
<img src="./assets/green-full-square.svg"><br>
<img src="./assets/green-full-triangle.svg">
</div>
<div><br>
<img src="./assets/purple-full-circle.svg"><br>
<img src="./assets/purple-half-circle.svg"><br>
<img src="./assets/purple-none-circle.svg">
</div>
</div>
<br><br>
<p>A set consists of 3 cards where each of the cards' attributes are either the same or different. In other words, the three cards must either all have the same shape or all have a different shape, and the three cards must either all be the same color or all be different colors. If two cards have the same attribute and one card has a different attribute, it is not a set.</p>
<p>Examples of a set:</p>
<div id="grid3">
<div><img src="./assets/one.png"></div>
<div><img src="./assets/two.png"></div>
<div><img src="./assets/three.png"></div>
<div class="explanation">
<p>All three cards have the same shape, same color, same shading, and different numbers.</p>
</div>
<div><img src="./assets/purp1.png"></div>
<div><img src="./assets/purp2.png"></div>
<div><img src="./assets/purp3.png"></div>
<div class="explanation">
<p>All three cards have the same color, same number, same shading, and different shapes.</p>
</div>
<div><img src="./assets/merp.png"></div>
<div><img src="./assets/meep.png"></div>
<div><img src="./assets/moop.png"></div>
<div class="explanation">
<p>All three cards have the same number, different colors, different shading, and different shapes.</p>
</div>
</div>
</div>
</div>
<!-- scores modal -->
<div class="my-modal scores">
<div class="modal-content">
<span class="close">×</span>
<h2>High Scores</h2>
<br>
<ol>
</ol>
</div>
</div>
<!-- game over modal -->
<div class="my-modal game-over">
<div class="modal-content">
<span class="close">×</span>
<h2>Game Over</h2>
<br><br>
<p></p>
<br>
<button class="ui secondary large button" data-action="create">Start New Game</button>
</div>
</div>
<!-- main container -->
<div class="container">
<!-- options container - includes timer, logo, number of cards left, and no set checker. Initially just has logo and placeholders for everything else -->
<div class="options">
<div id="timer"></div>
<div id="logo">
<img src="./assets/s.png">
<img src="./assets/e.png">
<img src="./assets/t.png">
</div>
<div id="cardnum"></div>
</div>
<br><br>
<!-- login form -->
<div class="login">
<br><br>
<form class="ui huge form">
<div class="one fields">
<div class="field">
<input type="text" name="name" placeholder="Enter name...">
</div>
</div>
<input type="submit" value="Submit" class="ui secondary huge button">
</form>
</div>
<!-- board container -->
<div class="board">
</div>
</div>
</div>
</body>
</html>