git.s-ol.nu mmm / 567efaa
add games/fake-artist s-ol 3 years ago
6 changed file(s) with 439 addition(s) and 0 deletion(s). Raw diff Collapse all Expand all
99 channel_83
1010 plonat_atek
1111 lorem_ipsum
12 fake-artist
0 quarantine implementation of a bluffing-drawing game.
0 <!DOCTYPE html>
1 <html>
2 <head>
3 <script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/3.0.5/seedrandom.min.js"></script>
4 <style>
5 html {
6 margin: 0;
7 padding: 0;
8 background: #272727;
9
10 display: flex;
11 min-height: 100vh;
12 align-items: center;
13 overflow-y: auto;
14 }
15
16 body {
17 font-family: sans-serif;
18
19 width: 12em;
20 margin: 1em auto;
21 border: 4px solid #696969;
22 border-radius: 0.5rem;
23 background: #eeeeee;
24 overflow: hidden;
25 }
26
27 h2 {
28 display: block;
29 margin: 0;
30 padding: .5rem;
31 background: #696969;
32 color: #eeeeee;
33 }
34
35 #main, #setup {
36 padding: .5rem;
37 }
38
39 main .inner {
40 margin-bottom: .5em;
41 }
42
43 main .inner {
44 overflow: hidden;
45 max-height: 12em;
46
47 transition: all 0.3s;
48 }
49
50 main .inner > div {
51 display: flex;
52 }
53 main .inner > div > input {
54 flex: 1;
55 margin-left: 1em;
56 }
57
58 #setup {
59 display: none;
60 }
61 .setup #setup {
62 display: block;
63 }
64
65 span {
66 font-size: 2em;
67 font-weight: bold;
68 }
69 span.spy {
70 color: #c33;
71 }
72
73 a { color: inherit; }
74 </style>
75 </head>
76 <body>
77 <main>
78 <h2>Fake Artist</h2>
79 <div id="setup" class="inner">
80 <div>spies: <input id="spies" type="number" value="1" /></div>
81 <div>players:</div>
82 <ul id="players"></ul>
83 <div>
84 <button id="add">add</button>
85 <input id="name" type="text" />
86 </div>
87 </div>
88 <div id="main"></div>
89 </main>
90 <script src=":text/javascript"></script>
91 </body>
92 </html>
0 const words = [
1 "airplane",
2 "alive",
3 "alligator",
4 "angel",
5 "ant",
6 "apple",
7 "arm",
8 "baby",
9 "backpack",
10 "ball",
11 "balloon",
12 "banana",
13 "bark",
14 "baseball",
15 "basketball",
16 "bat",
17 "bathroom",
18 "beach",
19 "beak",
20 "bear",
21 "bed",
22 "bee",
23 "bell",
24 "bench",
25 "bike",
26 "bird",
27 "blanket",
28 "blocks",
29 "boat",
30 "bone",
31 "book",
32 "bounce",
33 "bow",
34 "bowl",
35 "box",
36 "boy",
37 "bracelet",
38 "branch",
39 "bread",
40 "bridge",
41 "broom",
42 "bug",
43 "bumblebee",
44 "bunk bed",
45 "bunny",
46 "bus",
47 "butterfly",
48 "button",
49 "camera",
50 "candle",
51 "candy",
52 "car",
53 "carrot",
54 "cat",
55 "caterpillar",
56 "chair",
57 "cheese",
58 "cherry",
59 "chicken",
60 "chimney",
61 "clock",
62 "cloud",
63 "coat",
64 "coin",
65 "comb",
66 "computer",
67 "cookie",
68 "corn",
69 "cow",
70 "crab",
71 "crack",
72 "crayon",
73 "cube",
74 "cup",
75 "cupcake",
76 "curl",
77 "daisy",
78 "desk",
79 "diamond",
80 "dinosaur",
81 "dog",
82 "doll",
83 "door",
84 "dragon",
85 "dream",
86 "drum",
87 "duck",
88 "ear",
89 "ears",
90 "Earth",
91 "egg",
92 "elephant",
93 "eye",
94 "eyes",
95 "face",
96 "family",
97 "feather",
98 "feet",
99 "finger",
100 "fire",
101 "fish",
102 "flag",
103 "float",
104 "flower",
105 "fly",
106 "football",
107 "fork",
108 "frog",
109 "ghost",
110 "giraffe",
111 "girl",
112 "glasses",
113 "grapes",
114 "grass",
115 "hair",
116 "hamburger",
117 "hand",
118 "hat",
119 "head",
120 "heart",
121 "helicopter",
122 "hippo",
123 "hook",
124 "horse",
125 "house",
126 "ice cream cone",
127 "inchworm",
128 "island",
129 "jacket",
130 "jail",
131 "jar",
132 "jellyfish",
133 "key",
134 "king",
135 "kite",
136 "kitten",
137 "knee",
138 "ladybug",
139 "lamp",
140 "leaf",
141 "leg",
142 "legs",
143 "lemon",
144 "light",
145 "line",
146 "lion",
147 "lips",
148 "lizard",
149 "lollipop",
150 "love",
151 "man",
152 "Mickey Mouse",
153 "milk",
154 "mitten",
155 "monkey",
156 "monster",
157 "moon",
158 "motorcycle",
159 "mountain",
160 "mountains",
161 "mouse",
162 "mouth",
163 "music",
164 "nail",
165 "neck",
166 "night",
167 "nose",
168 "ocean",
169 "octopus",
170 "orange",
171 "oval",
172 "owl",
173 "pants",
174 "pen",
175 "pencil",
176 "person",
177 "pie",
178 "pig",
179 "pillow",
180 "pizza",
181 "plant",
182 "popsicle",
183 "purse",
184 "rabbit",
185 "rain",
186 "rainbow",
187 "ring",
188 "river",
189 "robot",
190 "rock",
191 "rocket",
192 "sea",
193 "seashell",
194 "sheep",
195 "ship",
196 "shirt",
197 "shoe",
198 "skateboard",
199 "slide",
200 "smile",
201 "snail",
202 "snake",
203 "snowflake",
204 "snowman",
205 "socks",
206 "spider",
207 "spider web",
208 "spoon",
209 "stairs",
210 "star",
211 "starfish",
212 "suitcase",
213 "sun",
214 "sunglasses",
215 "swimming pool",
216 "swing",
217 "table",
218 "tail",
219 "train",
220 "tree",
221 "truck",
222 "turtle",
223 "water",
224 "whale",
225 "wheel",
226 "window",
227 "woman",
228 "worm",
229 "zebra",
230 "zoo",
231 ];
232
233 const main = document.getElementById('main');
234 const players = document.getElementById('players');
235 const spies = document.getElementById('spies');
236 const name = document.getElementById('name');
237 const add = document.getElementById('add');
238
239 const shuffle = (array, rng) => {
240 for (let i = array.length - 1; i > 0; i--) {
241 let j = Math.floor(rng() * (i + 1));
242 [array[i], array[j]] = [array[j], array[i]];
243 }
244 };
245
246 const infect = a => {
247 a.onclick = () => {
248 const hash = a.href.split('#')[1];
249 update('#' + hash);
250 };
251 };
252
253 const genSeed = rng => (
254 words[Math.floor(rng() * words.length)].replace(' ', '-')
255 + '_' + words[Math.floor(rng() * words.length)].replace(' ', '-')
256 + '_' + words[Math.floor(rng() * words.length)].replace(' ', '-')
257 );
258
259 const update = (hash) => {
260 const [ mode, seed, n, ...names ] = hash.split(/,/);
261 const rng = new Math.seedrandom(seed);
262 const nextSeed = genSeed(rng);
263
264 while (main.lastChild)
265 main.removeChild(main.lastChild);
266
267 if (mode === '#link') {
268 document.body.className = '';
269 names.forEach((name, i) => {
270 const a = document.createElement('a');
271 a.innerText = 'play';
272 a.href = `#play,${seed},${n},${names.join(',')},${i}`;
273 infect(a);
274
275 const div = document.createElement('div');
276 div.append(`${name}: `);
277 div.append(a);
278 main.append(div);
279 });
280
281 const a = document.createElement('a');
282 a.innerText = 'next round';
283 a.href = `#link,${nextSeed},${n},${names.join(',')}`;
284 infect(a);
285 main.append(document.createElement('br'));
286 main.append(a);
287 } else if (mode === '#play') {
288 document.body.className = '';
289 const i = names.pop();
290
291 const word = words[Math.floor(rng() * words.length)];
292 const list = names.map((x, i) => i < +n);
293 shuffle(list, rng);
294
295 if (list[+i]) {
296 main.append("you are a");
297 main.append(document.createElement('br'));
298 const span = document.createElement('span');
299 span.className = 'spy';
300 span.innerText = 'SPY!';
301 main.append(span);
302 } else {
303 main.append("the word is");
304 main.append(document.createElement('br'));
305 const span = document.createElement('span');
306 span.innerText = word;
307 main.append(span);
308 }
309
310 const a = document.createElement('a');
311 a.innerText = 'next round';
312 a.href = `#play,${nextSeed},${n},${names.join(',')},${i}`;
313 infect(a);
314 main.append(document.createElement('br'));
315 main.append(a);
316 } else {
317 document.body.className = 'setup';
318 const seed = genSeed(Math.random);
319 const names = [];
320 const a = document.createElement('a');
321 a.innerText = 'start';
322 a.href = `#link,${seed},${spies.value},${names.join(',')}`;
323 main.append(a);
324 infect(a);
325
326 add.onclick = () => {
327 const li = document.createElement('li');
328 li.innerText = name.value;
329 players.append(li);
330 names.push(name.value);
331 a.href = `#link,${seed},${spies.value},${names.join(',')}`;
332 name.value = '';
333 };
334
335 spies.onchange = () => {
336 a.href = `#link,${seed},${spies.value},${names.join(',')}`;
337 }
338 }
339 }
340
341 update(window.location.hash);