Add share button

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;
+	width: 20em;
+	height: 10em;
 }
 
 @media (max-width: 600px) {

index.html

@@ -8,6 +8,9 @@
 <div class="centering">
 	<h1>Qwörtle</h1>
 	<div id="main"></div>
+	<pre id="summary"></pre>
+	<button id="share">Teilen <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path fill="var(--white)" d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92c0-1.61-1.31-2.92-2.92-2.92zM18 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM6 13c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm12 7.02c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"></path></svg></button>
+	<p id="copied-to-clipboard">In die Zwischenablage kopiert!</p>
 	<div id="keyboard">
 		<div class="keyboard-row"></div>
 		<div class="keyboard-row"></div>

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.style.display = "block";
-	textarea.value = text;
+	textarea.value = shareText;
 	textarea.select();
 	document.execCommand("copy");
 	setTimeout(() => {
-		textarea.value = text; // not sure why this is needed..
+		textarea.value = shareText; // not sure why this is needed..
-		textarea.select();
 	}, 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 = [{}, {}, {}, {}];