this repo has no description
1<!doctype html>
2<head>
3<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
4<link href="https://fonts.googleapis.com/css?family=Bungee+Shade|Monoton" rel="stylesheet">
5<link href="https://fonts.googleapis.com/css?family=Coiny" rel="stylesheet">
6<style type="text/css">
7@media print {
8body {
9 background-color: none;
10 text-align: left;
11}
12h1 { display: none; }
13div#eighties { display: none; }
14div#palette { display: none; }
15div#controls { display: none; }
16div.button { display: none;}
17
18div#area {
19 margin: 0; padding: 0;
20 background-color: none;
21}
22
23div.peg {
24 border: 1px solid black;
25 background-color: none;
26 width: 0.47625cm;
27 height: 0.47625cm;
28 margin: 0px 0.079375cm 0px 0.079375cm;
29 text-indent: 0;
30 font-size: 9pt;
31}
32}
33html {
34 height: 100%;
35}
36body {
37 background-color: #23241f;
38 margin: 0;
39 text-align: center;
40 font-family: 'Oswald', sans-serif;
41 color: #aaa;
42 height: 100%;
43}
44h1 {
45 text-align: center;
46 font-size: 40pt;
47 color: #FFF;
48 font-family: 'Monoton', cursive;
49 font-family: 'Bungee Shade', cursive;
50 margin: 0;
51 padding: 0;
52}
53
54#eighties {
55 display: block;
56 position: fixed;
57 left: 0;
58 bottom: 0;
59 width: 20%;
60 height: 20%;
61 background: rgba(35,36,31,1);
62background: -moz-linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%);
63background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(35,36,31,1)), color-stop(6%, rgba(207,71,71,1)), color-stop(12%, rgba(255,191,0,1)), color-stop(18%, rgba(255,255,0,1)), color-stop(24%, rgba(0,255,60,1)), color-stop(29%, rgba(0,13,255,1)), color-stop(34%, rgba(140,0,255,1)), color-stop(39%, rgba(204,0,255,1)), color-stop(42%, rgba(35,36,31,1)), color-stop(100%, rgba(35,36,31,1)));
64background: -webkit-linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%);
65background: -o-linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%);
66background: -ms-linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%);
67background: linear-gradient(45deg, rgba(35,36,31,1) 0%, rgba(207,71,71,1) 6%, rgba(255,191,0,1) 12%, rgba(255,255,0,1) 18%, rgba(0,255,60,1) 24%, rgba(0,13,255,1) 29%, rgba(140,0,255,1) 34%, rgba(204,0,255,1) 39%, rgba(35,36,31,1) 42%, rgba(35,36,31,1) 100%);
68filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23241f', endColorstr='#23241f', GradientType=1 );
69 z-index: 1;
70}
71
72#palette {
73 display: inline-block;
74 position: relative;
75 background-color: #9e9e9e;
76 width: auto;
77 margin: auto;
78 text-align: center;
79 border-radius: 8px;
80}
81
82#area {
83 position: relative;
84 display: inline-block;
85 background-color: #000;
86 margin: auto;
87 padding: 8px;
88 text-align: center;
89 border-radius: 8px;
90 z-index: 10;
91}
92#controls {
93 display: inline-block;
94 text-align: left;
95 margin: auto;
96}
97
98.button {
99 position: relative;
100 text-align: center;
101 line-height: 40px;
102 display: block;
103 width: 40px;
104 height: 40px;
105 background-color: #888;
106 padding: 4px;
107 margin-bottom: 4px;
108 border-radius: 8px;
109 color: #000;
110 text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
111}
112.button:hover {
113 cursor: pointer;
114}
115
116.color {
117 display: block;
118 position: relative;
119 width: 40px;
120 height: 40px;
121 margin: 4px;
122 border-radius: 8px;
123 color: #000;
124 text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
125}
126.color:hover {
127 cursor: pointer;
128}
129
130.color_selected {
131 display: block;
132 position: relative;
133 width: 40px;
134 height: 40px;
135 margin: 4px;
136 border-radius: 8px;
137-webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,1);
138 -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,1);
139 box-shadow: 0px 0px 12px 0px rgba(0,0,0,1);
140 color: #000;
141 text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
142}
143.color_selected:hover {
144 cursor: pointer;
145}
146
147.peg_row {
148 margin: 0;
149 padding: 0;
150 height: 16px;
151 margin: 4px 0 4px 0;
152}
153
154.peg {
155 display: inline-block;
156 border-radius: 16px;
157 width: 16px;
158 height: 16px;
159 margin: 0 4px 0 4px;
160 text-indent: 100%;
161 white-space: nowrap;
162 overflow: hidden;
163 -webkit-transition: background-color 0.10s;
164 transition: background-color 0.10s;
165}
166
167.peg:hover {
168 -webkit-box-shadow: 0px 0px 8px 0px rgba(174,174,174,1);
169 -moz-box-shadow: 0px 0px 8px 0px rgba(174,174,174,1);
170 box-shadow: 0px 0px 8px 0px rgba(174,174,174,1);
171}
172
173h1 span {
174 animation-name: bop;
175 animation-iteration-count: 1;
176 animation-timing-function: ease-in;
177 animation-duration: 0.15s;
178}
179
180.s_a { color: red; }
181.s_b { color: orange; animation-delay: 0.025s;}
182.s_c { color: yellow; animation-delay: 0.050s;}
183.s_d { color: green; animation-delay: 0.075s;}
184.s_e { color: blue; animation-delay: 0.100s;}
185.s_f { color: purple; animation-delay: 0.125s;}
186.s_g { color: hotpink; animation-delay: 0.150s;}
187.s_h { color: red; animation-delay: 0.175s;}
188.s_i { color: orange; animation-delay: 0.200s;}
189
190@keyframes bop {
191 0% { font-size: 20pt; }
192 100% { font-size: 40pt; }
193}
194
195</style>
196
197<script type="text/javascript">
198var palette = ["#111", "red", "orange", "yellow", "green", "blue", "purple", "hotpink", "white"];
199var palette_chars = {
200 "#111": "",
201 "red": "R",
202 "orange": "O",
203 "yellow": "Y",
204 "green": "G",
205 "blue": "B",
206 "purple": "I",
207 "hotpink": "V",
208 "white": "W"
209};
210var palette_nums = [
211 "#111",
212 "red",
213 "orange",
214 "yellow",
215 "green",
216 "blue",
217 "purple",
218 "hotpink",
219 "white"
220];
221var palette_divs = {};
222
223var gogogo = function() {
224 // pile of hash encode/decode stuff
225 var LZW = {
226 encode: function(s) {
227 var dict = {};
228 var data = (s + "").split("");
229 var out = [];
230 var currChar;
231 var phrase = data[0];
232 var code = 256;
233 for (var i=1; i<data.length; i++) {
234 currChar=data[i];
235 if (dict[phrase + currChar] != null) {
236 phrase += currChar;
237 } else {
238 out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));
239 dict[phrase + currChar] = code;
240 code++;
241 phrase=currChar;
242 }
243 }
244 out.push(phrase.length > 1 ? dict[phrase] : phrase.charCodeAt(0));
245 for (var i=0; i<out.length; i++) {
246 out[i] = String.fromCharCode(out[i]);
247 }
248 return out.join("");
249 },
250 decode: function(s) {
251 var dict = {};
252 var data = (s + "").split("");
253 var currChar = data[0];
254 var oldPhrase = currChar;
255 var out = [currChar];
256 var code = 256;
257 var phrase;
258 for (var i=1; i<data.length; i++) {
259 var currCode = data[i].charCodeAt(0);
260 if (currCode < 256) {
261 phrase = data[i];
262 } else {
263 phrase = dict[currCode] ? dict[currCode] : (oldPhrase + currChar);
264 }
265 out.push(phrase);
266 currChar = phrase.charAt(0);
267 dict[code] = oldPhrase + currChar;
268 code++;
269 oldPhrase = phrase;
270 }
271 return out.join("");
272 }
273 };
274
275 var RLE = {
276 charmap: {
277 '-8': 'H',
278 '-7': 'G',
279 '-6': 'F',
280 '-5': 'E',
281 '-4': 'D',
282 '-3': 'C',
283 '-2': 'B',
284 '-1': 'A',
285 '0': 'a',
286 '1': 'b',
287 '2': 'c',
288 '3': 'd',
289 '4': 'e',
290 '5': 'f',
291 '6': 'g',
292 '7': 'h',
293 '8': 'i'
294 },
295 nummap: {
296 'H': '-8',
297 'G': '-7',
298 'F': '-6',
299 'E': '-5',
300 'D': '-4',
301 'C': '-3',
302 'B': '-2',
303 'A': '-1',
304 'a': '0',
305 'b': '1',
306 'c': '2',
307 'd': '3',
308 'e': '4',
309 'f': '5',
310 'g': '6',
311 'h': '7',
312 'i': '8'
313 },
314 encode: function(data) {
315 // 1. collect repeating numbers
316 var comp = '';
317 var i = 0;
318 var cur = data[i++];
319 var count = 1;
320 do {
321 if (data[i] == cur) {
322 count++;
323 } else {
324 comp += count.toString();
325 comp += RLE.charmap[cur];
326 if (data[i] == '-') {
327 cur = -data[++i];
328 } else {
329 cur = data[i];
330 }
331 count = 1;
332 }
333 } while (i++ < data.length);
334 return comp;
335 },
336 decode: function(data) {
337 var decomp = '';
338 var i = 0;
339 var numstr = data[i++];
340 do {
341 if (typeof RLE.nummap[data[i]] === 'undefined') {
342 numstr += data[i];
343 } else {
344 decomp += RLE.nummap[data[i]].repeat(parseInt(numstr));
345 numstr = '';
346 }
347 } while (i++ < data.length);
348 return decomp;
349 }
350 };
351
352 var Base64 = {
353 _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
354 encode: function(input) {
355 var output = "";
356 var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
357 var i = 0;
358 input = Base64._utf8_encode(input);
359 while (i < input.length) {
360 chr1 = input.charCodeAt(i++);
361 chr2 = input.charCodeAt(i++);
362 chr3 = input.charCodeAt(i++);
363 enc1 = chr1 >> 2;
364 enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
365 enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
366 enc4 = chr3 & 63;
367 if (isNaN(chr2)) {
368 enc3 = enc4 = 64;
369 } else if (isNaN(chr3)) {
370 enc4 = 64;
371 }
372 output = output + Base64._keyStr.charAt(enc1) + Base64._keyStr.charAt(enc2) + Base64._keyStr.charAt(enc3) + Base64._keyStr.charAt(enc4);
373 }
374 return output;
375 },
376 decode: function(input) {
377 var output = "";
378 var chr1, chr2, chr3;
379 var enc1, enc2, enc3, enc4;
380 var i = 0;
381 input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
382 while (i < input.length) {
383 enc1 = Base64._keyStr.indexOf(input.charAt(i++));
384 enc2 = Base64._keyStr.indexOf(input.charAt(i++));
385 enc3 = Base64._keyStr.indexOf(input.charAt(i++));
386 enc4 = Base64._keyStr.indexOf(input.charAt(i++));
387 chr1 = (enc1 << 2) | (enc2 >> 4);
388 chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
389 chr3 = ((enc3 & 3) << 6) | enc4;
390 output = output + String.fromCharCode(chr1);
391 if (enc3 != 64) {
392 output = output + String.fromCharCode(chr2);
393 }
394 if (enc4 != 64) {
395 output = output + String.fromCharCode(chr3);
396 }
397 }
398 output = Base64._utf8_decode(output);
399 return output;
400 },
401 _utf8_encode: function(string) {
402 string = string.replace(/\r\n/g, "\n");
403 var utftext = "";
404 for (var n = 0; n < string.length; n++) {
405 var c = string.charCodeAt(n);
406 if (c < 128) {
407 utftext += String.fromCharCode(c);
408 } else if ((c > 127) && (c < 2048)) {
409 utftext += String.fromCharCode((c >> 6) | 192);
410 utftext += String.fromCharCode((c & 63) | 128);
411 } else {
412 utftext += String.fromCharCode((c >> 12) | 224);
413 utftext += String.fromCharCode(((c >> 6) & 63) | 128);
414 utftext += String.fromCharCode((c & 63) | 128);
415 }
416 }
417 return utftext;
418 },
419
420 _utf8_decode: function(utftext) {
421 var string = "";
422 var i = 0;
423 var c = c1 = c2 = 0;
424
425 while (i < utftext.length) {
426 c = utftext.charCodeAt(i);
427 if (c < 128) {
428 string += String.fromCharCode(c);
429 i++;
430 } else if ((c > 191) && (c < 224)) {
431 c2 = utftext.charCodeAt(i + 1);
432 string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
433 i += 2;
434 } else {
435 c2 = utftext.charCodeAt(i + 1);
436 c3 = utftext.charCodeAt(i + 2);
437 string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
438 i += 3;
439 }
440 }
441 return string;
442 }
443 };
444
445 // get our elements
446 var pal = document.getElementById("palette");
447 var area = document.getElementById("area");
448 var selected_color = "#333";
449 var select = null;
450 var setPeg = function(ele, color) {
451 if (ele.style.backgroundColor == color) return;
452 if (palette_divs[ele.style.backgroundColor]) {
453 palette_divs[ele.style.backgroundColor].innerText = parseInt(palette_divs[ele.style.backgroundColor].innerText)-1;
454 }
455 ele.style.backgroundColor = color;
456 ele.innerText = (palette_chars[color] ? palette_chars[color] : '');
457 if (color != palette[0] && palette_divs[color]) {
458 palette_divs[color].innerText = parseInt(palette_divs[color].innerText)+1;
459 }
460 };
461 var clickColor = function(evt) {
462 selected_color = evt.target.style.backgroundColor;
463
464 select.className = "color";
465 select = evt.target;
466 select.className = "color_selected";
467 };
468 var clickPeg = function(target) {
469 if (mousedown == 1) { // draw
470 setPeg(target, selected_color);
471 } else if (mousedown == 2) { // copy
472 selected_color = target.style.backgroundColor;
473 if (typeof select !== 'undefined') select.className = "color";
474 select = palette_divs[selected_color];
475 if (typeof select !== 'undefined') select.className = "color_selected";
476 } else if (mousedown == 3) { // erase
477 setPeg(target, palette[0]);
478 }
479 };
480 var clearPegs = function() {
481 var rows = area.children;
482 for (var i = 0; i < rows.length; i++) {
483 var pegs = rows[i].children;
484 for (var j = 0; j < pegs.length; j++) {
485 if (palette_divs[pegs[j].style.backgroundColor]) palette_divs[pegs[j].style.backgroundColor].innerText = parseInt(palette_divs[pegs[j].style.backgroundColor].innerText)-1;
486 pegs[j].style.backgroundColor = palette[0];
487 pegs[j].innerText = "";
488 }
489 }
490 window.location.hash = '';
491 };
492 // 1. generate palette
493 for (var i in palette) {
494 var ele = document.createElement("div");
495 ele.className = "color";
496 ele.innerText = "0";
497 ele.style.backgroundColor = palette[i];
498 ele.addEventListener("click", clickColor);
499 pal.appendChild(ele);
500 palette_divs[palette[i]] = ele;
501 select = ele;
502 }
503 select.className = "color_selected";
504 selected_color = select.style.backgroundColor;
505 // 2. generate pegboard
506 area.oncontextmenu = function() { return false; };
507 var mouseMove = function(evt) {
508 evt.preventDefault();
509 if (evt.target.className == "peg") {
510 clickPeg(evt.target);
511 }
512 };
513 var mouseOut = function(evt) {
514 evt.preventDefault();
515 if (evt.target != this || evt.target.className != "peg") return;
516 mousedown = 0;
517 window.removeEventListener("mouseup", mouseUp);
518 area.removeEventListener("mouseout", mouseOut);
519 area.removeEventListener("mousemove", mouseMove);
520 rebuildHash();
521 };
522 var mouseUp = function(evt) {
523 evt.preventDefault();
524 mousedown = 0;
525 window.removeEventListener("mouseup", mouseUp);
526 area.removeEventListener("mousemove", mouseMove);
527 area.removeEventListener("mouseout", mouseOut);
528 rebuildHash();
529 };
530 var mouseDown = function(evt) {
531 evt.preventDefault();
532 mousedown = evt.which;
533 if (evt.target.className == "peg") {
534 clickPeg(evt.target);
535 }
536 window.addEventListener("mouseup", mouseUp, false);
537 area.addEventListener("mousemove", mouseMove, false);
538 area.addEventListener("mouseout", mouseOut, false);
539 };
540 area.addEventListener("mousedown", mouseDown, false);
541 for (var i = 0; i < 29; i++) {
542 var peg_row = document.createElement("div");
543 peg_row.className = "peg_row";
544 var cols = (i % 2 == 1 ? 24 : 25);
545 for (var j = 0; j < cols; j++) {
546 var peg = document.createElement("div");
547 peg.className = "peg";
548 peg.style.backgroundColor = palette[0];
549 //peg.addEventListener("mousedown", clickPeg, false);
550/* peg.addEventListener("mousemove", function(evt) {
551 if (mousedown == 1) { // draw
552 setPeg(evt.target, selected_color);
553 } else if (mousedown == 2) { // copy
554 selected_color = evt.target.style.backgroundColor;
555 select.className = "color";
556 select = palette_divs[selected_color];
557 select.className = "color_selected";
558 } else if (mousedown == 3) { // erase
559 setPeg(evt.target, palette[0]);
560 }
561 }, false);*/
562 peg_row.appendChild(peg);
563 }
564 area.appendChild(peg_row);
565 }
566 // 3. set up clear
567 var clear = document.getElementById("clear");
568 clear.addEventListener("mousedown", clearPegs, false);
569 // loading/unloading
570 var rebuildHash = function() {
571 var str = '';
572 var rows = area.children;
573 for (var i = 0; i < rows.length; i++) {
574 var pegs = rows[i].children;
575 for (var j = 0; j < pegs.length; j++) {
576 var match = palette.indexOf(pegs[j].style.backgroundColor);
577 if (match != -1) {
578 str += match;
579 } else {
580 str += '0';
581 }
582 }
583 }
584 window.location.hash = Base64.encode(LZW.encode(RLE.encode(str)));
585 };
586 var loadData = function(data) {
587 var pegs = RLE.decode(LZW.decode(Base64.decode(data)));
588 var peg_elements = [];
589 var rows = area.children;
590 for (var i = 0; i < rows.length; i++) {
591 var row_pegs = rows[i].children;
592 for (var j = 0; j < row_pegs.length; j++) {
593 peg_elements.push(row_pegs[j]);
594 }
595 }
596 console.log(peg_elements);
597 for (var i = 0; i < pegs.length; i++) {
598 setPeg(peg_elements[i], palette_nums[pegs[i]]);
599 }
600 };
601 if (window.location.hash) {
602 loadData(window.location.hash.substring(1));
603 }
604 window.addEventListener('hashchange', function(evt) {
605 }, true);
606};
607
608window.onload = gogogo;
609</script>
610
611</head>
612<body>
613 <h1><span class="s_a">L</span><span class="s_b">i</span><span class="s_c">t</span><span class="s_d">e</span><span class="s_e">B</span><span class="s_f">r</span><span class="s_g">i</span><span class="s_h">t</span><span class="s_i">r</span></h1>
614<div id="controls">
615 <div><b>LMB</b> - set peg to selected color</div>
616 <div><b>MMB</b> - set color to peg</div>
617 <div><b>RMB</b> - remove selected peg</div>
618</div>
619<div></div>
620<div id="area"></div>
621<div style="vertical-align:top;text-align: left;display:inline-block;padding-left:8px;">
622 <div class="button" id="clear">Clear!</div>
623 <div id="palette"></div>
624</div>
625<div id="eighties"></div>
626</body>
627</html>