-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
121 lines (118 loc) · 6.29 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="reghex.js"></script>
<link href="reghex.css" type="text/css" rel="stylesheet" xmlns="http://www.w3.org/1999/xhtml"/>
<style>
.section {
margin: auto;
width: 1050px;
margin-top: 20px;
}
.section > * {
display: inline-block;
vertical-align: top;
}
</style>
<title>RegHex</title>
</head>
<body>
<a href="https://github.com/rampion/RegHex"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_red_aa0000.png" alt="Fork me on GitHub"></a>
<h4 style="text-align:center">RegHex</h4>
<div class="section">
<div style="width:200px">
<p>I highly enjoyed <a href="https://puzzles.mit.edu/2013/coinheist.com/rubik/a_regular_crossword/grid.pdf">the hexagonal regular expression puzzle</a> ("A Regular Crossword" by Dan Gulotta based on an idea by Palmer Mebane) from
this year's MIT puzzle hunt. I found it awkward to solve on a computer though, it needed a better interface.
</p>
<p>So I made one.</p>
<p>Use the ⇐ and ⇒ buttons to rotate the puzzle widdershins or clockwise, respectively (or just hover over the puzzle and use your normal left and right keys).</p>
<p>Click a hexagon and type a letter A-Z (capitalization not important) to fill it with a guess. Hit backspace to clear a guess, and tab to move to the next
hexagon in the row.
</p>
<p>When an entire row is filled, it will be colored green if the row matches the clue, and red if it doesn't. I'd like to provide some earlier feedback,
but to do so correctly would require a good algorithm to determine if the intersection of a regular expression and a string of guesses and
blanks have a non-empty intersection. I'm on the lookout for one, so <a class='mailme'>let me know</a> if you find one.
</p>
</div>
<svg id="puzzle" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<text class="buttons" y="10">
<a title="rotate widdershins" xlink:href="#widdershins" class="widdershins">⇐</a>
<a title="rotate clockwise" xlink:href="#clockwise" class="clockwise">⇒</a>
</text>
<defs>
<g class="cell selectable">
<path d="m 17.3205080756888 10 l 0 -20 l -17.3205080756888 -10 l -17.3205080756888 10 l 0 20 l 17.3205080756888 10 z"/>
<g><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" fill="freeze" class="rotation"/><text/></g>
</g>
<g class="edge"><text x="10"/></g>
</defs>
<g class="root">
<g>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" fill="freeze" class="rotation wheel"/>
<g class="cells"></g>
<g class="edges"></g>
</g>
</g>
</svg>
</div>
<script>
var $puzzle = $('#puzzle');
// load a puzzle
loadUI($puzzle);
$.get('puzzle.json', loadPuzzleInto($puzzle), 'json');
</script>
<div class="section">
<svg id="grid" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<text class="buttons" y="10">
<a title="rotate widdershins" xlink:href="#widdershins" class="widdershins">⇐</a>
<a title="rotate clockwise" xlink:href="#clockwise" class="clockwise">⇒</a>
</text>
<defs>
<g class="cell selectable">
<path d="m 17.3205080756888 10 l 0 -20 l -17.3205080756888 -10 l -17.3205080756888 10 l 0 20 l 17.3205080756888 10 z"/>
<g><animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" fill="freeze"/><text/></g>
</g>
<g class="edge"><text x="10"/></g>
</defs>
<g class="root">
<g>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" fill="freeze" class="wheel"/>
<g class="cells"></g>
<g class="edges"></g>
</g>
</g>
</svg>
<div style="width:700px">
<p>Of course, there's no reason this has to be the <b>only</b> puzzle of this type.</p>
<p>The original puzzle is <a href="puzzle.json">specified in json</a>, and loaded dynamically by the page.</p>
<p>Now that I've got the software down (well, mostly, it's not like I'm not going to continue tweaking), I'm going to work on creating some more, but I'll gladly <a class="mailme">take contributions</a>.</p>
<p>Each cell in the hex grid has a unique address, based on three (non-orthogonal) axes:<ul>
<li><b>A</b> - a ray pointing towards the upper left (30 degrees off the vertical) from the center.</li>
<li><b>B</b> - a ray pointing towards the right (0 degrees off the horizontal) from the center.</li>
<li><b>C</b> - a ray pointing towards the lower left (30 degrees off the vertical) from the center.</li>
</ul></p>
<p>As you can see from the grid on the left, each hex is two units wide in each of the three directions. Since the axes aren't orthogonal, moving along one axis changes your offset along the others.
Moving one hex in any direction will increment one coordinate by two, and decrement the other two by one (or decrement one by two, and increment two by one).</p>
</div>
</div>
<script>
// show a grid
var $grid = $('#grid');
loadUI($grid);
$.get('grid.json', function(json){
loadPuzzleInto($grid)(json);
showCoords($grid);
}, 'json');
</script>
<div class="section">
<p>Enjoy! - Noah (<a href="https://github.com/rampion/">rampion</a>)</a>
</div>
<script>
$(function(){
$('.mailme').attr('href', "íáéìôïºîïáè®åáóôåòìùÀçíáéì®ãïí".replace(/./g,function(m){ return String.fromCharCode( (m.charCodeAt(0) + 128) % 256 ); }));
});
</script>
</body>
</html>