/
tictactoeing.html
107 lines (104 loc) · 3.47 KB
/
tictactoeing.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TicTacToe</title>
<link href='http://fonts.googleapis.com/css?family=Flamenco' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style>
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0;}
body {
font-family: 'Open Sans', sans-serif;
background-color: #23262b;
color: #ffffff;
}
#board {
width: 302px;
height: 302px;
margin: 100px auto 40px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
overflow: hidden;
}
.square {
font-family: 'Flamenco', sans-serif;
display: block;
font-size: 5em;
width: 100px;
height: 100px;
/*background-color: #34363d;*/
float: left;
text-align: center;
cursor: hand;
cursor: pointer;
}
.x-color {
color: #f9353e;
}
.o-color {
color: #3ab49d;
}
#specs {
width: 300px;
margin: 30px auto 0;
line-height: 1.2em;
}
.specs-title {
color: #666;
}
#reset {
text-align: right;
display: none;
cursor: hand;
cursor: pointer;
}
.square-tl,
.square-tm,
.square-tr,
.square-ml,
.square-mm,
.square-mr {
border-bottom: 1px solid #34363d;
}
.square-tl,
.square-tm,
.square-ml,
.square-mm,
.square-bl,
.square-bm {
border-right: 1px solid #34363d;
}
</style>
</head>
<body>
<div id="board">
<p class="square square-tl" data-board-position="0"></p>
<p class="square square-tm" data-board-position="1"></p>
<p class="square square-tr" data-board-position="2"></p>
<p class="square square-ml" data-board-position="3"></p>
<p class="square square-mm" data-board-position="4"></p>
<p class="square square-mr" data-board-position="5"></p>
<p class="square square-bl" data-board-position="6"></p>
<p class="square square-bm" data-board-position="7"></p>
<p class="square square-br" data-board-position="8"></p>
</div>
<div id="specs">
<p><span class="specs-title">Turn:</span> <span id="whos-turn"></span></p>
<p><span class="specs-title">Turn Number:</span> <span id="turn-number"></span></p>
<p><span class="specs-title">Click Position:</span> <span id="click-position">None</span></p>
<p><span class="specs-title">Outcome:</span> <span id="game-outcome">Unknown</span></p>
<p id="reset">Reset</p>
</div>
<!-- JS -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="minions.js"></script>
</body>
</html>