From 670d0c33e0d8e78bef45cdd7abd4db7be13e39b6 Mon Sep 17 00:00:00 2001
From: Mawoka <mawoka@e.email>
Date: Thu, 23 Jun 2022 21:47:40 +0200
Subject: [PATCH] :memo: Added note why the image-uploader is loading so long

---
 frontend/src/lib/editor/card.svelte | 18 +++++++++++++++-
 frontend/src/routes/docs/pow.svelte | 33 +++++++++++++++++++++++++++++
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/routes/docs/pow.svelte

diff --git a/frontend/src/lib/editor/card.svelte b/frontend/src/lib/editor/card.svelte
index 6630e22..4dd873b 100644
--- a/frontend/src/lib/editor/card.svelte
+++ b/frontend/src/lib/editor/card.svelte
@@ -5,6 +5,15 @@
 	import Spinner from '../Spinner.svelte';
 	import { fade } from 'svelte/transition';
 	import { mint } from '$lib/hashcash';
+	import { createTippy } from 'svelte-tippy';
+	import 'tippy.js/animations/perspective-subtle.css';
+	import 'tippy.js/dist/tippy.css';
+
+	const tippy = createTippy({
+		arrow: true,
+		animation: 'perspective-subtle',
+		placement: 'top'
+	});
 
 	export let data: EditorData;
 	export let selected_question: number;
@@ -87,7 +96,14 @@
 					/>
 				</div>
 			{:else if pow_data === undefined}
-				<Spinner />
+				<a
+					href="/docs/pow"
+					target="_blank"
+					use:tippy={{ content: "Click to learn why it's loading so long." }}
+					class="cursor-help"
+				>
+					<Spinner />
+				</a>
 			{:else}
 				{#await import('$lib/editor/uploader.svelte')}
 					<Spinner />
diff --git a/frontend/src/routes/docs/pow.svelte b/frontend/src/routes/docs/pow.svelte
new file mode 100644
index 0000000..f9ffcba
--- /dev/null
+++ b/frontend/src/routes/docs/pow.svelte
@@ -0,0 +1,33 @@
+<svelte:head>
+	<title>ClassQuiz/docs - PoW</title>
+	<meta
+		name="description"
+		content="Use-case of PoW for ClassQuiz, the open-source quiz-application"
+	/>
+</svelte:head>
+<article
+	class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl mx-auto mt-10 prose-slate px-4 dark:prose-invert"
+>
+	<h1>PoW</h1>
+	<h2>Why is it loading so long?</h2>
+	<p>
+		Your browser is calculating something to prevent abuse. The time it takes depends on the
+		power of your CPU and, believe it or not, luck. Sometimes it takes like 5 seconds, sometimes
+		30 secs, so please be patient. If you want to know what's going on, go to the <a
+			href="#technical">technical part</a
+		>.
+	</p>
+	<h2 id="technical">Technical Part</h2>
+	<p>
+		The technique used, is called PoW, or Proof of Work. It is a way to "pay" for something by
+		using your CPU. It's mainly used in crypto-stuff, but not in ClassQuiz. It's just used to
+		prevent spam. Imagine it like a small fee you have to pay to upload an image, but you don't
+		pay with money, instead by using your CPU intensively. The Proof of Work-algorythm used is
+		called HashCash and is also used by Bitcoin. All in all, it's really simple (if you know
+		what hashes are). Let me explain:
+		<br />
+		You're hashing a string with a counter until the first x characters (in this case 4) are "0"/zeros.
+		That's it. Then, you send the counter to the server, who hashes it once, checks if the first
+		x characters are really "0" and that's it.
+	</p>
+</article>