/
index.html
75 lines (74 loc) · 2.36 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
<!DOCTYPE html>
<html>
<head>
<link href='./app.css' rel='stylesheet' type='text/css'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0"></meta>
<script type="text/javascript">
/* taken from stack overflow*/
function getParameterByName(name)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if(results == null)
return null;
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
<script type="text/x-handlebars" data-template-name="clause-view">
<div class="clause"> <div {{bindAttr class="content.conflicting"}}>
{{#each content.letters}}
{{#view App.LetterView contentBinding="this"}}
<div class="selectCircle">
<div {{bindAttr class="content.isSelected:selected"}}>
<span {{bindAttr class="content.invert"}}>
{{content.letter}}
</span>
</div>
</div>
{{/view}}
{{/each}}
</div></div>
</script>
<script type="text/x-handlebars" data-template-name="solved-view">
<div {{bindAttr class="App.puzzleController.solved:solved"}}>
{{#if App.puzzleController.solved}}
Solved!
{{else}}
Not Solved Yet...
{{/if}}
</div>
</script>
<script type="text/x-handlebars" data-template-name="chosen-view">
{{#each App.puzzleController.chosen}}
<span {{bindAttr class="invert"}} >
{{letter}}
</span>
{{/each}}
</script>
<script type="text/x-handlebars" data-template-name="clauses-view">
{{#each App.puzzleController.clauses}}
{{view App.ClauseView contentBinding="this"}}
{{/each}}
</script>
<script type="text/javascript" data-main="cs!app" src="require-jquery.js"></script>
</head>
<body>
<div id="solved">
</div>
<div id="chosen">
</div>
<div id="clauses">
</div>
<div id="help">
<h1>
How to play
</h1>
<p>
The screen is divided into several triplets of letters, called "clauses". Some letters are black, some letters are red. The goal is to click on one letter in each clause. The only trick is that for a given letter, you can't select both black and red copies of that letter. Good luck!
</p>
</div>
</body>
</html>