From 1d72fe222bab2c1d77f5331ff9e71a595f099fab Mon Sep 17 00:00:00 2001
From: exyi <exyi@outlook.cz>
Date: Sun, 18 Oct 2020 09:15:24 +0000
Subject: [PATCH] Add "confirmation dialog" to show solution

fix #47
---
 frontend/src/SolutionCaptcha.svelte | 20 +++++++++++++++++
 frontend/src/TaskDisplay.svelte     | 34 ++++++++++++++++++++---------
 2 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/SolutionCaptcha.svelte

diff --git a/frontend/src/SolutionCaptcha.svelte b/frontend/src/SolutionCaptcha.svelte
new file mode 100644
index 0000000..12ae47d
--- /dev/null
+++ b/frontend/src/SolutionCaptcha.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
+
+    const a = Math.floor(Math.random() * 80) + 20
+    const b = Math.floor(Math.random() * 80) + 20
+    let ok = true
+    const eventDispatcher = createEventDispatcher()
+    function newValue(val: number) {
+        ok = a + b == val
+        if (ok) {
+            eventDispatcher("done")
+        }
+    }
+</script>
+
+<div>
+    <p>Úlohu zatím nemáš vyřešenou, opravdu si chceš vyzradit řešení?</p>
+    {a} + {b} = <input type=text pattern={"" + a + b} on:input={e => newValue(+e.currentTarget.value)}>
+</div>
diff --git a/frontend/src/TaskDisplay.svelte b/frontend/src/TaskDisplay.svelte
index 9700a57..087f211 100644
--- a/frontend/src/TaskDisplay.svelte
+++ b/frontend/src/TaskDisplay.svelte
@@ -5,14 +5,17 @@
     import App from "./App.svelte";
     import { taskStatuses } from "./task-status-cache";
     import type { TaskDescriptor } from "./tasks";
-import Odevzdavatko from "./Odevzdavatko.svelte";
+    import Odevzdavatko from "./Odevzdavatko.svelte";
+    import SolutionCaptcha from "./SolutionCaptcha.svelte";
 
     export let task: TaskDescriptor | null | undefined
 
+    let wantsSolution = false
     export let showSolution: boolean = false
     $: {
         task
         showSolution = false
+        wantsSolution = false
     }
 
     let referenceId: string | null
@@ -33,6 +36,14 @@ import Odevzdavatko from "./Odevzdavatko.svelte";
     updateLoginUrl()
     window.addEventListener("onhashchange", updateLoginUrl)
 
+    function maybeShowSolution() {
+        if (status && status.points > status.maxPoints - 0.01) {
+            showSolution = true
+        } else {
+            wantsSolution = true
+        }
+    }
+
 </script>
 <style>
     div {
@@ -97,18 +108,21 @@ import Odevzdavatko from "./Odevzdavatko.svelte";
         <hr class="clearfloat" />
 
         <div class="solution">
-            {#if !showSolution}
+            {#if showSolution}
+
+                <h4>Řešení</h4>
+                {#await grabSolution(nonNull(referenceId))}
+                    Načítám...
+                {:then solution}
+                    {@html solution.description}
+                {/await}
+            {:else if wantsSolution}
+                <SolutionCaptcha on:done={() => showSolution = true} />
+            {:else}
             <a href="javascript:;"
-               on:click|preventDefault|stopPropagation={() => showSolution = true}>
+               on:click|preventDefault|stopPropagation={maybeShowSolution}>
                 Zobrazit řešení úlohy
             </a>
-            {:else}
-            <h4>Řešení</h4>
-            {#await grabSolution(nonNull(referenceId))}
-                Načítám...
-            {:then solution}
-                {@html solution.description}
-            {/await}
             {/if}
         </div>