-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (172 loc) · 6.82 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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<!doctype html>
<html>
<head>
<link href="./css/briangles.css" type="text/css" rel="stylesheet" />
<link href="./css/reveal.css" type="text/css" rel="stylesheet" />
<title>Briangles</title>
</head>
<body>
<script src="./js/jquery-2.1.0.min.js"></script>
<script src="./js/d3.v3.min.js" charset="utf-8"></script>
<script src="./js/briangles.js" charset="utf-8"></script>
<script src="./js/jquery.reveal.js" charset="utf-8"></script>
<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<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-48858955-1', 'theconnman.github.io');
ga('send', 'pageview');
</script>
<a href="https://github.com/TheConnMan/Briangles"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/c6625ac1f3ee0a12250227cf83ce904423abf351/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_gray_6d6d6d.png"></a>
<div>
<table id='header'>
<tr>
<td><h1>Briangles</h1></td>
<td style='float: right;'>
<table class='score'>
<tr>
<td class='label' colspan="2">Difficulty</td>
</tr>
<tr style='text-align: center;'>
<td id='size' class='value' style='width: 35px; text-align: right;'>3</td>
<td>
<table>
<tr>
<td><div class='button triangle-up' onclick="change(1)"></div></td>
</tr>
<tr>
<td><div class='button triangle-down' onclick="change(-1)"></div></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style='float: right;'>
<table class='score'>
<tr>
<td class='label'>Moves</td>
</tr>
<tr>
<td id='moves' class='value'>0</td>
</tr>
</table>
</td>
<td style='float: right;'>
<table class='score'>
<tr>
<td class='label'>Best</td>
</tr>
<tr>
<td id='best' class='value'> </td>
</tr>
</table>
</td>
<td style='float: right;'>
<table class='score'>
<tr>
<td class='label'>Red</td>
</tr>
<tr>
<td id='r' class='value'>0</td>
</tr>
</table>
</td>
<td style='float: right;'>
<table class='score'>
<tr>
<td class='label'>Green</td>
</tr>
<tr>
<td id='g' class='value'>0</td>
</tr>
</table>
</td>
<td style='float: right;'>
<table class='score'>
<tr>
<td class='label'>Blue</td>
</tr>
<tr>
<td id='b' class='value'>0</td>
</tr>
</table>
</td>
</tr>
</table>
<table id='subheader'>
<tr>
<td><button onclick="window.location.href='https://theconnman.github.com'">More Games</button></td>
<td><div style="width: 100%; text-align: right;"><button onclick="change(0)">Reset</button></div></td>
<td><a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-text="Check out Briangles!" data-hashtags="Briangles" data-url="http://theconnman.github.io/Briangles">Tweet</a></td>
</tr>
</table>
<div id="game"></div>
<div id='content'>
<p>
<b>BACKGROUND:</b> Every color on your computer screen is made up of three components: red, green, and blue. Colors are created by lighting red, green,
and blue at different intensities (e.g. purple is mostly red and blue). These primary colors appear at the corners of the game board.
</p>
<p>
<b>GOAL:</b> The goal of the game is to split up the rest of the triangle colors into their primary components of red, green, and blue and move these
primary colors into their corresponding corner in the minimum number of splits.
</p>
<p>
<b>HOW TO PLAY:</b> Each triangle starts filled with a random color and its three borders each represent a primary color. <b>Right click</b>
on a triangle to separate its fill color into red, green, and blue. Each primary color passes through its designated border and its intensity is added
to the adjacent triangle. <b>Left click</b> to rotate a triangle, changing which adjacent triangles receive which colors.
</p>
<p>
<b>MOBILE:</b> <b>Tap</b> and <b>double tab</b> instead of <b>left click</b> and <b>right click</b>.
</p>
</div>
<div id="myModal" class="reveal-modal">
<h1>You Won!</h1>
<p id='winMessage'></p>
<a class="close-reveal-modal">×</a>
</div>
<div id="footer">
Created by Brian Conn. Contact me at <a href="mailto:[email protected]">[email protected]</a>.
</div>
</div>
<script>
var boxes = ['moves', 'r', 'g', 'b']
var colors = ['r', 'g', 'b']
var totals = {r: 0, g: 0, b: 0}
var best = {}
$(document).ready(function() {
init($('#game').width(), $('#game').width() * .8, parseInt($('#size').html()))
if (!window.localStorage['bestScores']) {
window.localStorage['bestScores'] = JSON.stringify({})
} else if (window.localStorage['bestScores'] && JSON.parse(window.localStorage['bestScores'])[$('#size').html()]) {
$('#best').html(JSON.parse(window.localStorage['bestScores'])[$('#size').html()])
}
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
})
function change(v) {
var cur = parseInt($('#size').html()) + v
if (cur > 1) {
reset(cur)
}
}
function reset(cur) {
$('#size').html(cur)
totals = {r: 0, g: 0, b: 0}
init($('#game').width(), $('#game').width() * .8, cur)
boxes.forEach(function(d) {
$('#' + d).html(0)
})
colors.forEach(function(c) {
$('#' + c).parent().parent().parent().css('background-color', '#999999')
})
if (JSON.parse(window.localStorage['bestScores'])[cur.toString()]) {
$('#best').html(JSON.parse(window.localStorage['bestScores'])[cur.toString()])
} else {
$('#best').html(' ')
}
}
</script>
</body>
</html>