-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
191 lines (162 loc) · 8.48 KB
/
index.html
File metadata and controls
191 lines (162 loc) · 8.48 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
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
<!-- DEFAULT SETTINGS -->
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Connect Four</title>
<!-- ROOT DIRECTORY -->
<base href="http://mujavidb.com/connectFour/">
<!-- FAVICONS GALORE -->
<link rel="apple-touch-icon" sizes="57x57" href="img/icon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/icon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/icon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/icon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/icon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/icon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/icon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/icon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/icon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/icon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/icon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/icon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/icon/favicon-96x96.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- MISC META TAGS -->
<meta name="url" content="https://mujavidb.com/connectFour/">
<meta name="description" content="Simple online Connect Four game">
<meta name="robots" content="index,follow,noodp">
<meta name="googlebot" content="index,follow">
<meta name="coverage" content="Worldwide">
<meta name="rating" content="General">
<!-- OPEN GRAPH -->
<meta property="og:url" content="https://mujavidb.com/connectFour/">
<meta property="og:type" content="website">
<meta property="og:title" content="Connect Four: Simple and Fun">
<meta property="og:image" content="https://mujavidb.com/connectFour/img/boardScreenshot.jpg">
<meta property="og:description" content="Quick and simple Connect Four game.">
<meta property="og:site_name" content="MujavidB">
<meta property="og:locale" content="en_GB">
<meta property="article:author" content="Mujavid Bukhari">
<!-- TWITTER -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@mujavidb">
<meta name="twitter:creator" content="@mujavidb">
<meta name="twitter:url" content="https://mujavidb.com/connectFour">
<meta name="twitter:title" content="Connect Four: Simple and Fun">
<meta name="twitter:description" content="Quick and simple Connect Four game.">
<meta name="twitter:image" content="https://mujavidb.com/connectFour/img/boardScreenshot.jpg">
<!-- MOBILE -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Connect Four">
<link rel="mask-icon" href="https://mujavidb.com/connectFour/img/red_disc.svg" color="red">
<meta name="mobile-web-app-capable" content="yes">
<meta name="theme-color" content="#14335A">
<!-- STYLESHEET -->
<link href="css/main.css" rel="stylesheet">
<!-- ANALYTICS TRACKING -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-71793001-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="switch">
<!-- Follow on Github -->
<a class="followGithub" href="https://github.com/mujavidb/connectFour" target="_blank">⭑</a>
<main class="gameEnclosure">
<!-- Encloses buttons and gameBoard svg -->
<div class="gameContainer">
<!-- Each button represents a column on the board -->
<div class="connectFourBoard">
<button class="column"></button>
<button class="column"></button>
<button class="column"></button>
<button class="column"></button>
<button class="column"></button>
<button class="column"></button>
<button class="column"></button>
<button class="column"></button>
</div>
<svg id="discArea" class="discArea" viewBox="0 0 788 607" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Clip path for border radius on bottom of board -->
<defs>
<clipPath id="clipBottom">
<rect x="0" y="582" width="788" height="25"></rect>
</clipPath>
</defs>
<!-- Two <g> tags to allow for emptying animation on New Game -->
<g class="perspective">
<g class="perspectiveChild">
<!-- Drop shadows for each board singlet -->
<image id="boardShadows" class="singletShadows" x="0" y="4" width="788" height="600" xlink:href="img/boardShadows.svg"></image>
<!-- TODO: Add mask to fade out dropping discs -->
<!-- Where discs go -->
<g id="discAreaGroup" transform="translate(0 1)"></g>
<!-- Drop shadow of board -->
<rect class="bottomBoardShadow" x="0" y="572" width="788" height="35" ry="20" rx="20" fill="#29799E" clip-path="url(#clipBottom)"></rect>
<!-- Board image -->
<image x="0" y="0" width="788" height="600" xlink:href="img/board.svg"></image>
<!-- Where winning sequence highlights are placed -->
<g id="winHighlight" class="winHighlightArea"></g>
</g>
</g>
</svg>
</div>
<!-- Info on turns, scores and wins -->
<div class="gameInfo">
<div class="redScore"><h5 id="redScore">0</h5></div>
<div class="messageArea">
<div class="turnMessages">
<h2 class="red">Red player's turn</h2>
<h2 class="yellow">Yellow player's turn</h2>
</div>
<div class="winMessages">
<h2 class="red">Red player wins!</h2>
<h2 class="yellow">Yellow player wins!</h2>
</div>
</div>
<div class="yellowScore"><h5 id="yellowScore">0</h5></div>
</div>
<!-- Online and restart buttons -->
<div class="buttonArea">
<button class="playOnline">Play Online</button>
<button class="restartGame">New Game</button>
</div>
<!-- Modal for small screen size -->
<div class="modalOverlay screenSize">
<div class="modalContent">
<h3>To get started, please rotate your screen into the landscape position.</h3>
</div>
</div>
<!-- Modal to begin online game -->
<div class="modalOverlay startOnline">
<div class="modalContent">
<div class="slideRandom">
<div class="searching">
<h2>Finding you an opponent...</h2>
<button class="cancelRandomSearch">Cancel</button>
</div>
<div class="gameFound">
<h2>We found you a game!</h2>
<!-- Dynamically filmed and shown using JS -->
<img class="yellowDisc" src="img/yellow_disc.svg" alt="Yellow Disc">
<img class="redDisc" src="img/red_disc.svg" alt="Red Disc">
<h2 id="playerStartInfo"></h2>
</div>
</div>
</div>
</div>
</main>
<!-- SCRIPTS -->
<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="js/connectFour.js" type="text/javascript"></script>
</body>
</html>