Commit 3564a93c3e38b9a337c0075d46d6272a7d9872e4 - mmm

games/fake-artist: better UI s-ol 3 years ago

2 changed file(s) with 74 addition(s) and 17 deletion(s). Raw diff Collapse all Expand all

+37

-6

root/games/fake-artist/text$html.html less more

24	24	overflow: hidden;
25	25	}
26	26
27		h2 {
28		display: block;
29		margin: 0;
	27	header {
30	28	padding: .5rem;
31	29	background: #696969;
32	30	color: #eeeeee;
	31	}
	32
	33	h2 {
	34	margin: 0;
33	35	}
34	36
35	37	#main, #setup {

52	54	}
53	55	main .inner > div > input {
54	56	flex: 1;
	57	width: 0;
55	58	margin-left: 1em;
56	59	}
57	60

62	65	display: block;
63	66	}
64	67
65		span {
	68	.sensitive {
	69	position: relative;
	70
	71	padding: 0.3em;
	72	border: 0.2em solid #696969;
	73	}
	74
	75	.sensitive .cover {
	76	position: absolute;
	77	top: 0;
	78	left: 0;
	79	right: 0;
	80	bottom: 0;
	81	padding: 0.5em;
	82	color: #eeeeee;
	83	background: #696969;
	84	transition: opacity 300ms;
	85	}
	86
	87	.sensitive:hover .cover {
	88	opacity: 0;
	89	pointer-events: none;
	90	}
	91
	92	pre {
66	93	font-size: 2em;
67	94	font-weight: bold;
	95	margin: 0;
68	96	}
69		span.spy {
	97	pre.spy {
70	98	color: #c33;
71	99	}
72	100

75	103	</head>
76	104	<body>
77	105	<main>
78		<h2>Fake Artist</h2>
	106	<header>
	107	<h2>Fake Artist</h2>
	108	<div id="head"></div>
	109	</header>
79	110	<div id="setup" class="inner">
80	111	<div>spies: <input id="spies" type="number" value="1" /></div>
81	112	<div>players:</div>

+37

-11

root/games/fake-artist/text$javascript.js less more

231	231	];
232	232
233	233	const main = document.getElementById('main');
	234	const head = document.getElementById('head');
234	235	const players = document.getElementById('players');
235	236	const spies = document.getElementById('spies');
236	237	const name = document.getElementById('name');

251	252	};
252	253
253	254	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(' ', '-')
	255	words[Math.floor(rng() * words.length)].replace(' ', '-').toLowerCase()
	256	+ '_' + words[Math.floor(rng() * words.length)].replace(' ', '-').toLowerCase()
	257	+ '_' + words[Math.floor(rng() * words.length)].replace(' ', '-').toLowerCase()
257	258	);
258	259
259	260	const update = (hash) => {

264	265	while (main.lastChild)
265	266	main.removeChild(main.lastChild);
266	267
	268	while (head.lastChild)
	269	head.removeChild(head.lastChild);
	270
267	271	if (mode === '#link') {
	272	const code = document.createElement('code');
	273	code.innerText = seed;
	274	head.append(code);
	275
268	276	document.body.className = '';
269	277	names.forEach((name, i) => {
270	278	const a = document.createElement('a');

285	293	main.append(document.createElement('br'));
286	294	main.append(a);
287	295	} else if (mode === '#play') {
	296	const code = document.createElement('code');
	297	code.innerText = seed;
	298	head.append(code);
	299
288	300	document.body.className = '';
289	301	const i = names.pop();
290	302

292	304	const list = names.map((x, i) => i < +n);
293	305	shuffle(list, rng);
294	306
	307	const div = document.createElement('div');
	308	div.className = 'sensitive';
	309
295	310	if (list[+i]) {
296		main.append("you are a");
297		main.append(document.createElement('br'));
298		const span = document.createElement('span');
	311	const span = document.createElement('pre');
299	312	span.className = 'spy';
300	313	span.innerText = 'SPY!';
301		main.append(span);
	314	div.append("you are a");
	315	div.append(document.createElement('br'));
	316	div.append(span);
302	317	} else {
303		main.append("the word is");
304		main.append(document.createElement('br'));
305		const span = document.createElement('span');
	318	const span = document.createElement('pre');
306	319	span.innerText = word;
307		main.append(span);
	320	div.append("the word is");
	321	div.append(document.createElement('br'));
	322	div.append(span);
308	323	}
	324
	325	const cover = document.createElement('div');
	326	cover.className = 'cover';
	327	cover.innerText = '(hover here)';
	328	cover.innerText = `${names[i]}, please hover here to read.`;
	329	div.append(cover);
309	330
310	331	const a = document.createElement('a');
311	332	a.innerText = 'next round';
312	333	a.href = `#play,${nextSeed},${n},${names.join(',')},${i}`;
313	334	infect(a);
	335
	336	main.append(div);
314	337	main.append(document.createElement('br'));
315	338	main.append(a);
316	339	} else {

324	347	infect(a);
325	348
326	349	add.onclick = () => {
	350	if (!name.value)
	351	return;
	352
327	353	const li = document.createElement('li');
328	354	li.innerText = name.value;
329	355	players.append(li);