-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (131 loc) · 8.92 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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<meta name="description" content="A social network/art project/web-controller">
<meta charset="utf-8">
<link rel="stylesheet" href="/style.min.css">
<title>{{req.squarefieldColour.red}}-{{req.squarefieldColour.green}}-{{req.squarefieldColour.blue}} | Coloured Squares</title>
</head>
<body style="background-color:rgb({{req.squarefieldColour.red}},{{req.squarefieldColour.green}},{{req.squarefieldColour.blue}})">
<header id="top">
<nav>
<ul>
<li>
<a href="/"><h1>Coloured Squares</h1></a></li>
<li>
<a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" id="interface">
<div id="left">
<fieldset id="squarefield" aria-live="polite">
<legend class="visually-hidden">Squarefield squares:</legend>
{{#each field.squares}}
<button type="submit" name="square" value={{@index}} class="square" style="background-color:rgb({{this.colour.red}},{{this.colour.green}},{{this.colour.blue}}); border-color:rgb({{this.author.red}},{{this.author.green}},{{this.author.blue}})">
{{{this.contents}}}
</button>
{{/each}}
</fieldset>
</div>
<div id="right">
<div class="mode-wrapper">
<fieldset id="mode">
<legend class="visually-hidden">Modes</legend>
<label class="visually-hidden" for="paint">Paint</label>
<input title="Paint mode" type="radio" name="mode" id="paint" value="paint" {{#ifCond req.query.mode "paint"}} checked {{/ifCond}}/>
<label class="visually-hidden" for="copy">Copy to memory</label>
<input title="Copy to memory mode" type="radio" name="mode" id="copy" value="copy" {{#ifCond req.query.mode "copy-inner"}}checked{{/ifCond}}/>
</fieldset>
</div>
<div class="control-wrapper">
<button aria-live="polite" title="Home/Notifications" type="submit" id="home" value="home" name="home">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 65">
<polygon id="home-notification-author" style="stroke:white; fill:rgb({{req.homeLastUpdated.author.red}},{{req.homeLastUpdated.author.green}},{{req.homeLastUpdated.author.blue}});" points="8.83 65 61.17 65 61.17 32.5 64.17 35.67 70 27 56.67 18 56.67 1.83 47.83 1.83 47.5 10.17 35 0 0 27 5.33 34 9 30.83 8.83 65"></polygon>
<polygon id="home-notification-colour" style="fill:rgb({{req.homeLastUpdated.colour.red}},{{req.homeLastUpdated.colour.green}},{{req.homeLastUpdated.colour.blue}});" points="14.83 59.33 54.83 59.33 54.83 28.17 35 13.33 14.83 28.33 14.83 59.33"></polygon>
</svg>
<span id="homeText">Go Home/Copy notifications.
Latest update: {{req.homeLastUpdated.colour.red}}-{{req.homeLastUpdated.colour.green}}-{{req.homeLastUpdated.colour.blue}} by
{{req.homeLastUpdated.author.red}}-{{req.homeLastUpdated.author.green}}-{{req.homeLastUpdated.author.blue}}
</span>
</button>
</div>
<div class="control-wrapper">
<button title="You and here" style="{{#if req.claimed}}border-style:dashed;{{/if}} background-color:rgb({{req.squarefieldColour.red}},{{req.squarefieldColour.green}},{{req.squarefieldColour.blue}})" id="this" type="submit" name="this" value="this">
You: {{req.session.colour.red}}-{{req.session.colour.green}}-{{req.session.colour.blue}}, This: {{req.squarefieldColour.red}}-{{req.squarefieldColour.green}}-{{req.squarefieldColour.blue}}. {{#unless req.claimed}}Claim this colour {{else}} Refresh (already claimed). {{/unless}}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 157 173.94">
<circle style="stroke:white; stroke-width:2%; fill:rgb({{req.session.colour.red}},{{req.session.colour.green}},{{req.session.colour.blue}});" cx="79.81" cy="46.49" r="45.99" />
<path style="stroke:white; stroke-width:2%; fill:rgb({{req.session.colour.red}},{{req.session.colour.green}},{{req.session.colour.blue}});" d="M489.57,216.5c-43.08,0-78,34-78,78h156C567.57,250.5,532.65,216.5,489.57,216.5Z" transform="translate(-411.07 -121.06)" />
</svg>
</button>
</div>
<div class="current-wrapper">
<button title="Current colour - travel or copy" style="background-color:rgb({{req.query.redSlider}},{{req.query.greenSlider}},{{req.query.blueSlider}});" id="current" type="submit" name="current" value="current">
Copy or Travel to {{req.query.redSlider}}-{{req.query.greenSlider}}-{{req.query.blueSlider}}
</button>
<button type="submit" name="memory" value="1" id="memory1">
Copy {{req.query.redMemory1}}-{{req.query.greenMemory1}}-{{req.query.blueMemory1}} to current.
<svg viewBox="0 0 64 64">
<polygon style="fill:rgb({{req.query.redMemory1}},{{req.query.greenMemory1}},{{req.query.blueMemory1}});" points="4,30 60,4 60,60">
</polygon>
</svg>
</button>
<button type="submit" name="memory" value="2" id="memory2">
Copy {{req.query.redMemory2}}-{{req.query.greenMemory2}}-{{req.query.blueMemory2}} to current.
<svg viewBox="0 0 64 64">
<polygon style="fill:rgb({{req.query.redMemory2}},{{req.query.greenMemory2}},{{req.query.blueMemory2}})" points="4,30 60,4 60,60">
</polygon>
</svg>
</button>
</div>
</div>
<fieldset id="bottom">
<legend class="visually-hidden">Colour:</legend>
<div id="sliders" style="display:none">
<label class="visually-hidden" for="slide-red">Red</label>
<input id="slide-red" value="{{req.query.redSlider}}" type="range" name="slide-red" min="0" max="256" />
<label class="visually-hidden" for="slide-green">Green</label>
<input id="slide-green" value="{{req.query.greenSlider}}" type="range" name="slide-green" min="0" max="256" />
<label class="visually-hidden" for="slide-blue">Blue</label>
<input id="slide-blue" value="{{req.query.blueSlider}}" type="range" name="slide-blue" min="0" max="256" />
</div>
<div id="text-colours">
<label class="visually-hidden" for="red">Red</label>
<input style="color:red;" value="{{req.query.redSlider}}" id="red" type="number" name="red" min="0" max="256" />
<label class="visually-hidden" for="green">Green</label>
<input style="color:green;" value="{{req.query.greenSlider}}" id="green" type="number" name="green" min="0" max="256" />
<label class="visually-hidden" for="blue">Blue</label>
<input style="color:blue;" value="{{req.query.blueSlider}}" id="blue" type="number" name="blue" min="0" max="256" />
</div>
<button id="refresh" name="refresh" value="refresh">Refresh</button>
</fieldset>
</form>
<div id="active-sessions">
<h2 class="visually-hidden">Active sessions</h2> {{#each req.activeSessions}}
<a href="/{{this.red}}-{{this.green}}-{{this.blue}}" class="active" style="background-color:rgb({{this.red}},{{this.green}},{{this.blue}})">
{{this.red}}-{{this.green}}-{{this.blue}}
</a> {{/each}}
</div>
<aside id="about">
<a href="#top">Back</a>
<h2>About Coloured Squares</h2>
<p>Coloured Squares is a social network, art project and web-based controller. This version was created from scratch for the <a href="https://a-k-apart.com/">A List Apart 10kb challenge</a>.</p>
<h3>Instructions</h3>
<p>You've been assigned a colour (or an id of three numbers between 0 and 256. Yours is <strong>{{req.session.colour.red}},{{req.session.colour.green}},{{req.session.colour.blue}}</strong>). Each colour has a squarefield of 16 squares associated with it. You can change the colour value of these squares (also stamping it with your colour and the time shown with a slowly decaying border to demonstrate time to others). You can also switch your colour (if the colour is not already taken). A copy mode is available to quickly take extract colours. You can transport between squarefields and go back to your home anytime with other buttons. How it is used is completely up to you. Play around. Hit things.</p>
<h3>API</h3>
<ul>
<li>Pass a "format=JSON" parameter to the squarefield URL to get the squarefield as JSON</li>
<li>HTTP POST with values for "square" (1-16) and "red" "green" and "blue" values to light a square.</li>
</ul>
</aside>
<script>
var squarefieldName = "{{req.squarefieldColour.red}}-{{req.squarefieldColour.green}}-{{req.squarefieldColour.blue}}";
var sessionSquarefieldName = "{{req.session.colour.red}}-{{req.session.colour.green}}-{{req.session.colour.blue}}"
</script>
</main>
<script src="/client.min.js"></script>
</body>
</html>