From 3564a93c3e38b9a337c0075d46d6272a7d9872e4 Mon Sep 17 00:00:00 2001 From: s-ol Date: Wed, 22 Apr 2020 17:11:44 +0200 Subject: games/fake-artist: better UI --- root/games/fake-artist/text$html.html | 43 +++++++++++++++++++++++---- root/games/fake-artist/text$javascript.js | 48 ++++++++++++++++++++++++------- 2 files changed, 74 insertions(+), 17 deletions(-) (limited to 'root') diff --git a/root/games/fake-artist/text$html.html b/root/games/fake-artist/text$html.html index a7c7a27..cf6f8b5 100644 --- a/root/games/fake-artist/text$html.html +++ b/root/games/fake-artist/text$html.html @@ -25,14 +25,16 @@ overflow: hidden; } - h2 { - display: block; - margin: 0; + header { padding: .5rem; background: #696969; color: #eeeeee; } + h2 { + margin: 0; + } + #main, #setup { padding: .5rem; } @@ -53,6 +55,7 @@ } main .inner > div > input { flex: 1; + width: 0; margin-left: 1em; } @@ -63,11 +66,36 @@ display: block; } - span { + .sensitive { + position: relative; + + padding: 0.3em; + border: 0.2em solid #696969; + } + + .sensitive .cover { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0.5em; + color: #eeeeee; + background: #696969; + transition: opacity 300ms; + } + + .sensitive:hover .cover { + opacity: 0; + pointer-events: none; + } + + pre { font-size: 2em; font-weight: bold; + margin: 0; } - span.spy { + pre.spy { color: #c33; } @@ -76,7 +104,10 @@
-

Fake Artist

+
+

Fake Artist

+ +
spies:
players:
diff --git a/root/games/fake-artist/text$javascript.js b/root/games/fake-artist/text$javascript.js index 01880d7..18c63f8 100644 --- a/root/games/fake-artist/text$javascript.js +++ b/root/games/fake-artist/text$javascript.js @@ -232,6 +232,7 @@ const words = [ ]; const main = document.getElementById('main'); +const head = document.getElementById('head'); const players = document.getElementById('players'); const spies = document.getElementById('spies'); const name = document.getElementById('name'); @@ -252,9 +253,9 @@ const infect = a => { }; const genSeed = rng => ( - words[Math.floor(rng() * words.length)].replace(' ', '-') - + '_' + words[Math.floor(rng() * words.length)].replace(' ', '-') - + '_' + words[Math.floor(rng() * words.length)].replace(' ', '-') + words[Math.floor(rng() * words.length)].replace(' ', '-').toLowerCase() + + '_' + words[Math.floor(rng() * words.length)].replace(' ', '-').toLowerCase() + + '_' + words[Math.floor(rng() * words.length)].replace(' ', '-').toLowerCase() ); const update = (hash) => { @@ -265,7 +266,14 @@ const update = (hash) => { while (main.lastChild) main.removeChild(main.lastChild); + while (head.lastChild) + head.removeChild(head.lastChild); + if (mode === '#link') { + const code = document.createElement('code'); + code.innerText = seed; + head.append(code); + document.body.className = ''; names.forEach((name, i) => { const a = document.createElement('a'); @@ -286,6 +294,10 @@ const update = (hash) => { main.append(document.createElement('br')); main.append(a); } else if (mode === '#play') { + const code = document.createElement('code'); + code.innerText = seed; + head.append(code); + document.body.className = ''; const i = names.pop(); @@ -293,25 +305,36 @@ const update = (hash) => { const list = names.map((x, i) => i < +n); shuffle(list, rng); + const div = document.createElement('div'); + div.className = 'sensitive'; + if (list[+i]) { - main.append("you are a"); - main.append(document.createElement('br')); - const span = document.createElement('span'); + const span = document.createElement('pre'); span.className = 'spy'; span.innerText = 'SPY!'; - main.append(span); + div.append("you are a"); + div.append(document.createElement('br')); + div.append(span); } else { - main.append("the word is"); - main.append(document.createElement('br')); - const span = document.createElement('span'); + const span = document.createElement('pre'); span.innerText = word; - main.append(span); + div.append("the word is"); + div.append(document.createElement('br')); + div.append(span); } + const cover = document.createElement('div'); + cover.className = 'cover'; + cover.innerText = '(hover here)'; + cover.innerText = `${names[i]}, please hover here to read.`; + div.append(cover); + const a = document.createElement('a'); a.innerText = 'next round'; a.href = `#play,${nextSeed},${n},${names.join(',')},${i}`; infect(a); + + main.append(div); main.append(document.createElement('br')); main.append(a); } else { @@ -325,6 +348,9 @@ const update = (hash) => { infect(a); add.onclick = () => { + if (!name.value) + return; + const li = document.createElement('li'); li.innerText = name.value; players.append(li); -- cgit v1.2.3