diff --git a/index.css b/index.css index 3a1a9a8..30273d3 100644 --- a/index.css +++ b/index.css @@ -117,10 +117,27 @@ body.wide { align-items: center; } +#share { + display: none; + font-size: xx-large; + padding: 0.5em; +} + +#summary { + display: none; + font-size: xx-large; +} + +#copied-to-clipboard { + display: none; +} + #copyarea { - visibility: hidden; + display: none; background-color: #1f2937; - color: #fff; + color: #fff; + width: 20em; + height: 10em; } @media (max-width: 600px) { diff --git a/index.html b/index.html index 975c34d..ad0b48e 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,9 @@

Qwörtle

+

+	
+	

In die Zwischenablage kopiert!

diff --git a/index.js b/index.js index 12b8fe5..e32d55d 100644 --- a/index.js +++ b/index.js @@ -52,33 +52,40 @@ for (let i = 0; i < 4; i++) { const WORD_LENGTH = 5; const MAX_GUESSES = 9; +const URL = "https://studwww.informatik.kit.edu/~s_keller/qwörtle/"; const guessed = []; let input = ""; const data = []; const solutions = []; const done = [false, false, false, false]; +let shareText = ""; function gameOver() { for (const el of solutions) { el.style.display = "block"; } const NUMBERS = "0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣"; + const FAIL = "❌"; const ANY = "⬜"; const POSITION = "🟨"; const CORRECT = "🟩"; const DONE = "⬛⬛⬛⬛⬛"; - const URL = "https://studwww.informatik.kit.edu/~s_keller/qwörtle/"; let text = ""; text += "Tägliches Qwörtle #" + daysSinceStart + "\n"; + let summary = ""; for (let i = 0; i < 4; i++) { if (done[i]) { - text += NUMBERS.slice(done[i] * 3, done[i] * 3 + 3); + summary += NUMBERS.slice(done[i] * 3, done[i] * 3 + 3); + } else { + summary += FAIL; } if (i % 2 === 1) { - text += "\n"; + summary += "\n"; } } - text += URL + "\n"; + document.getElementById("summary").innerText = summary; + document.getElementById("summary").style.display = "block"; + text += summary + URL + "\n"; for (let i = 0; i < 2; i++) { for (let j = 0; j < MAX_GUESSES; j++) { const rowA = data[2*i * MAX_GUESSES + j]; @@ -116,17 +123,30 @@ function gameOver() { text += "\n"; } } + shareText = text; + document.getElementById("share").style.display = "block"; +} + +function desktopShare() { const textarea = document.getElementById("copyarea"); - textarea.style.visibility = "visible"; - textarea.value = text; + textarea.style.display = "block"; + textarea.value = shareText; textarea.select(); document.execCommand("copy"); setTimeout(() => { - textarea.value = text; // not sure why this is needed.. - textarea.select(); + textarea.value = shareText; // not sure why this is needed.. }, 0); } +document.getElementById("share").addEventListener("click", () => { + if (navigator.clipboard) { + navigator.clipboard.writeText(shareText); + document.getElementById("copied-to-clipboard").style.display = "block"; + } else { + desktopShare(); + } +}); + let keys = {}; let characters = [{}, {}, {}, {}];