diff options
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | index.html | 73 | ||||
| -rw-r--r-- | static/favicon.ico | bin | 0 -> 318 bytes | |||
| -rw-r--r-- | static/script.js | 62 | ||||
| -rw-r--r-- | static/styles.css | 41 |
5 files changed, 177 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..3421378 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# Telechromy diff --git a/index.html b/index.html new file mode 100644 index 0000000..5f099cc --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> + <head> + <title>Telechromy</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" type="text/css" href="/static/styles.css"> + <link rel="stylesheet" type="text/css" href="/telechromy/static/styles.css"> + <link rel="shortcut icon" type="image/x-icon" href="/telechromy/static/favicon.ico"> + </head> + <body id="body"> + <div class="container"> + <div class="center-container"> + <div> + <div class="home"> + <a href="/telechromy" class="home-title">Telechromy</a> + <span> at </span><a href="/">cyfraeviolae.org</a> + </div> + <div class="crumbs"> + <a href="/git/telechromy">source code</a> + </div> + </div> + <noscript>Sorry, JavaScript is required to play Telechromy.</noscript> + <div id="prompt" style="display: none;"> + <p> + Describe the background color without using color words or numbers. + <br> + <small> + You could use <span class="nb">objects (<em>a moonlit glade</em>)</span>, + <span class="nb">emotions (<em>latent bitterness</em>)</span>, + <span class="nb">ideas (<em>intuitionism</em>)</span>, + or <span class="nb">memories (<em>our first kiss</em>)</span>. + </small> + </p> + <input id="entry" type="text"> + <div id="share" style="display: none;"> + <p> + Share this link with a friend. + </p> + <input id="url" type="text" readonly> + <button id="copy">Copy</button> + <button id="visit">Visit</button> + </div> + </div> + <div id="guess" style="display: none;"> + <p> + Select the color described by + <br> + <span id="challenge"></span> + </p> + <input id="color" type="color"> + <br> + <br> + <button id="submit">Submit</button> + </div> + <div id="result" style="display: none;"> + <p> + <span id="prompt-text"></span> + </p> + </div> + </div> + </div> + <div id="labels" style="display: none;"> + <div class="prompt-label label"> + Prompt + </div> + <div class="guess-label label"> + Guess + </div> + </div> + <script src="/telechromy/static/script.js"></script> + </body> +</html> diff --git a/static/favicon.ico b/static/favicon.ico Binary files differnew file mode 100644 index 0000000..b2d7439 --- /dev/null +++ b/static/favicon.ico diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..7ba03d2 --- /dev/null +++ b/static/script.js @@ -0,0 +1,62 @@ +"use strict"; + +let randomByte = () => Math.floor(Math.random() * 256); +let randomColor = () => `rgb(${randomByte()}, ${randomByte()}, ${randomByte()})`; +let hide = el => el.style.display = 'none'; +let show = el => el.style.display = 'block'; +let encode = x => encodeURIComponent(btoa(x)); +let decode = x => atob(decodeURIComponent(x)); + +document.getElementById('entry').addEventListener('input', function(e) { + e.preventDefault(); + var shareEl = document.getElementById('share') + hide(shareEl) + if (!e.target.value) { + return + } + var encoded = encode(e.target.value) + var url = `${location.origin}/telechromy?prompt=${encode(c)}&text=${encoded}` + document.getElementById('url').value = url + show(shareEl) +}) + +document.getElementById('copy').addEventListener('click', function(e) { + e.preventDefault(); + document.getElementById('url').select() + document.execCommand('copy'); +}) + +document.getElementById('visit').addEventListener('click', function(e) { + e.preventDefault(); + var url = document.getElementById('url').value + window.location.replace(url) +}) + +document.getElementById('submit').addEventListener('click', function(e) { + e.preventDefault(); + var color = document.getElementById('color').value + var cc = urlParams.get('prompt') + var tt = urlParams.get('text') + var url = `${location.origin}/telechromy?prompt=${cc}&text=${tt}&guess=${encode(color)}` + window.location.replace(url) +}) + +var bodyEl = document.getElementById('body'); + +var urlParams = new URLSearchParams(window.location.search); +var text = urlParams.get('text') +if (urlParams.get('guess')) { + show(document.getElementById('result')) + show(document.getElementById('labels')) + document.getElementById('prompt-text').textContent = `“${decode(text)}”` + var pp = decode(urlParams.get('prompt')) + var gg = decode(urlParams.get('guess')) + bodyEl.style = `background: linear-gradient(90deg, ${pp} 50%, ${gg} 50%)` +} else if (text) { + show(document.getElementById('guess')) + document.getElementById('challenge').textContent = `“${decode(text)}”` +} else { + show(document.getElementById('prompt')) + var c = randomColor(); + bodyEl.style = `background-color: ${c}`; +} diff --git a/static/styles.css b/static/styles.css new file mode 100644 index 0000000..b81618b --- /dev/null +++ b/static/styles.css @@ -0,0 +1,41 @@ +#entry { + width: 100%; + margin-bottom: 8px; +} + +#url { + width: 60%; +} + +input { + margin-top: 12px; +} + +#challenge, #prompt-text { + font-weight: bold; + font-size: x-large; +} + +.nb { + white-space: nowrap; +} + +.prompt-label { + right: 53%; +} + +.guess-label { + left: 53%; +} + +.label { + font-size: 3em; + color: white; + font-weight: bold; + position: fixed; + bottom: 30px; + text-shadow: 1px 1px 0px black + , -1px 1px 0px black + , 1px -1px 0px black + , -1px -1px 0px black; +} |