Add share button

This commit is contained in:
Arne Keller 2022-02-24 09:11:25 +01:00
parent 86b1a4fa9c
commit 01898295bc
3 changed files with 50 additions and 10 deletions

View File

@ -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) {

View File

@ -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>

View File

@ -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 = [{}, {}, {}, {}];