ui: Implement hint discovery

frontend/ui/src/components/ExerciceHints.svelte

@@ -7,18 +7,73 @@
      Icon,
      ListGroup,
      ListGroupItem,
+     Spinner,
  } from 'sveltestrap';
 
  import { settings } from '../stores/settings.js';
 
  export let hints = [];
+ export let exercice = {};
+ export let refresh_my = null;
+
+ let hints_submitted = {};
+
+ function waitDiff(i, hint) {
+     refresh_my((my) => {
+         let openedHint = false;
+
+         if (my && my.exercices[exercice.id].hints) {
+             my.exercices[exercice.id].hints.forEach((h) => {
+                 if (h.id == hint.id && (h.content || h.file)) {
+                     openedHint = true;
+                 }
+             })
+         }
+
+         if (openedHint) {
+             hints_submitted[hint.id] = false;
+             hinterror = "";
+         } else if (i > 0) {
+             setTimeout(waitDiff, 650, i-1, hint);
+         }
+     })
+ }
+
+ async function openHint(hint) {
+     hints_submitted[hint.id] = true;
+     hinterror = "";
+
+     const response = await fetch(
+         "/openhint/" + exercice.id,
+         {
+             method: "POST",
+             body: JSON.stringify({ id: hint.id }),
+         }
+     )
+
+     if (response.status < 300) {
+         waitDiff(15, hint);
+     } else {
+         hints_submitted[hint.id] = false;
+
+         let data = "";
+         try {
+             data = await response.json();
+         } catch(e) {
+             data = null;
+         }
+
+	 if (data && data.errmsg)
+	     hinterror = data.errmsg;
+     }
+ }
 
  let hinterror = "";
 </script>
 
 {#if hints.length}
     <Card class="mb-2">
-	<CardHeader class="bg-info">
+	<CardHeader class="bg-info text-light">
             <Icon name="lightbulb-fill" />
             Indices
         </CardHeader>
@@ -33,12 +88,18 @@
             {#each hints as hint (hint.id)}
                 <ListGroupItem tag="a" href="{hint.file}" target="_self" class="d-flex">
                     {#if hint.file}
-		        <h1><Icon name="arrow-down-circle" /></h1>
+		        <h1 class="me-3">
+                            <Icon name="arrow-down-circle" />
+                        </h1>
                     {/if}
                     <div>
                         {#if !(hint.content || hint.file)}
-		            <button type="button" ng-click="hsubmit(hint)" class="float-end btn btn-info" class:disabled={hint.submitted}>
+		            <button type="button" on:click={openHint(hint)} class="float-end btn btn-info" class:disabled={hints_submitted[hint.id]}>
+                                {#if hints_submitted[hint.id]}
+                                    <Spinner size="sm" class="me-2" />
+                                {:else}
                                     <Icon name="lock" aria-hidden="true" />
+                                {/if}
                                 Débloquer
                             </button>
                         {/if}
@@ -48,7 +109,7 @@
                                 Afficher
                             </button>
                         {/if}
-		        <h4 class="fw-bold">{hint.name}</h4>
+		        <h4 class="fw-bold">{hint.title}</h4>
                         {#if hint.file}
 		            <p>
                                 Cliquez ici pour télécharger l'indice.<br>
@@ -59,7 +120,7 @@
 		            <p>{@html hint.content}</p>
                         {:else}
 		            <p>
-                                Débloquer cet indice vous fera perdre {hint.cost * settings.hintCurrentCoefficient} {hint.cost * settings.hintCurrentCoefficient==1?"point":"points"}.
+                                Débloquer cet indice vous fera perdre {hint.cost * $settings.hintCurrentCoefficient} {hint.cost * $settings.hintCurrentCoefficient == 1 ? "point" : "points"}.
                             </p>
                         {/if}
                     </div>