Add share button
This commit is contained in:
parent
86b1a4fa9c
commit
01898295bc
21
index.css
21
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) {
|
||||
|
@ -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>
|
||||
|
36
index.js
36
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 = [{}, {}, {}, {}];
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user