diff options
| author | s-ol <s-ol@users.noreply.github.com> | 2020-04-22 15:11:44 +0000 |
|---|---|---|
| committer | s-ol <s-ol@users.noreply.github.com> | 2020-04-22 15:11:44 +0000 |
| commit | 3564a93c3e38b9a337c0075d46d6272a7d9872e4 (patch) | |
| tree | 398e85952002359577f4bcb45013b163f77960ba | |
| parent | add games/fake-artist (diff) | |
| download | mmm-3564a93c3e38b9a337c0075d46d6272a7d9872e4.tar.gz mmm-3564a93c3e38b9a337c0075d46d6272a7d9872e4.zip | |
games/fake-artist: better UI
| -rw-r--r-- | root/games/fake-artist/text$html.html | 43 | ||||
| -rw-r--r-- | root/games/fake-artist/text$javascript.js | 48 |
2 files changed, 74 insertions, 17 deletions
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 @@ </head> <body> <main> - <h2>Fake Artist</h2> + <header> + <h2>Fake Artist</h2> + <div id="head"></div> + </header> <div id="setup" class="inner"> <div>spies: <input id="spies" type="number" value="1" /></div> <div>players:</div> 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); |