update design

bonartm · Jul 12, 2021 · fe63544 · fe63544
1 parent d5cf2ac
commit fe63544
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 60 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -7,22 +7,24 @@
     import Credits from './components/Credits.svelte';
     import SmoothResize from './components/SmoothResize.svelte';
     import QuestionView from './components/QuestionView.svelte';
-    import Buttons from './components/Buttons.svelte';
+    import Row from './components/Row.svelte';
     import Button from './components/Button.svelte';
     import { _ } from 'svelte-i18n';
     import ResultsView from './components/ResultsView.svelte';
     // import { Linear, CheckFirst } from './progressModes.js';
     import Animated from './components/Animated.svelte';
     import registerIcons from './registerIcons.js';
     import Icon from './components/Icon.svelte';
-    import { flip } from 'svelte/animate';
+    import Hint from './components/Hint.svelte';
     import { fly } from 'svelte/transition';
     import Container from './components/Container.svelte';
+    import Loading from './components/Loading.svelte';
     // import Modal from './components/Modal.svelte';
 
     export let quiz: Quiz;
     // https://github.com/sveltejs/svelte/issues/4079
     $: question = quiz.active;
+    $: showHint = $question.showHint;
     $: index = quiz.index;
     $: onLast = quiz.onLast;
     $: onFirst = quiz.onFirst;
@@ -36,6 +38,8 @@
     registerIcons();
 
     let node: HTMLElement;
+    let minHeight = 150;
+    let reloaded = false;
     // let showModal = false;
 
     // set global options
@@ -47,61 +51,88 @@
         node.style.setProperty('--quizdown-color-primary', primaryColor);
         node.style.setProperty('--quizdown-color-secondary', secondaryColor);
         node.style.setProperty('--quizdown-color-text', textColor);
+        node.style.minHeight = `${minHeight}px`;
     });
 </script>
 
 <div class="quizdown-content" bind:this="{node}">
     <Card>
         <ProgressBar value="{$index}" max="{quiz.questions.length - 1}" />
+        <Loading update="{reloaded}" ms="{800}" minHeight="{minHeight}">
+            <Container>
+                <SmoothResize minHeight="{minHeight}">
+                    <Animated update="{$index}">
+                        {#if $onResults}
+                            <ResultsView quiz="{quiz}" />
+                        {:else}
+                            <QuestionView
+                                question="{$question}"
+                                n="{$index + 1}"
+                            />
+                            <Hint hint="{$question.hint}" show="{$showHint}" />
+                        {/if}
+                    </Animated>
+                </SmoothResize>
+
+                <!-- <Modal show="{showModal}">Are you sure?</Modal> -->
+
+                <Row>
+                    <Button
+                        slot="left"
+                        title="{$_('hint')}"
+                        disabled="{!$question.hint || $showHint || $onResults}"
+                        buttonAction="{$question.enableHint}"
+                        ><Icon name="lightbulb" solid="{false}" /></Button
+                    >
+                    <svelte:fragment slot="center">
+                        <Button
+                            title="{$_('previous')}"
+                            disabled="{$onFirst || $onResults || $isEvaluated}"
+                            buttonAction="{quiz.previous}"
+                            ><Icon name="arrow-left" size="lg" /></Button
+                        >
 
-        <Container>
-            <SmoothResize>
-                <Animated update="{$index}">
-                    {#if $onResults}
-                        <ResultsView quiz="{quiz}" />
-                    {:else}
-                        <QuestionView question="{$question}" n="{$index + 1}" />
-                    {/if}
-                </Animated>
-            </SmoothResize>
-
-            <!-- <Modal show="{showModal}">Are you sure?</Modal> -->
-
-            <Buttons>
-                <Button
-                    title="{$_('previous')}"
-                    disabled="{$onFirst || $onResults || $isEvaluated}"
-                    buttonAction="{quiz.previous}"
-                    ><Icon name="arrow-left" size="lg" /></Button
-                >
-                <Button title="{$_('reset')}" buttonAction="{quiz.reset}"
-                    ><Icon name="redo" size="sm" /></Button
-                >
-                <Button
-                    disabled="{$onLast || $onResults || $isEvaluated}"
-                    buttonAction="{quiz.next}"
-                    title="{$_('next')}"
-                    ><Icon name="arrow-right" size="lg" /></Button
-                >
-
-                {#if $onLast || $allVisited}
-                    <div in:fly="{{ x: 200, duration: 500 }}">
                         <Button
-                            disabled="{!($onLast || $allVisited) || $onResults}"
-                            title="{$_('evaluate')}"
-                            buttonAction="{() =>
-                                quiz.jump(quiz.questions.length)}"
-                            ><Icon name="check-double" size="lg" /></Button
+                            disabled="{$onLast || $onResults || $isEvaluated}"
+                            buttonAction="{quiz.next}"
+                            title="{$_('next')}"
+                            ><Icon name="arrow-right" size="lg" /></Button
                         >
-                    </div>
-                {/if}
-            </Buttons>
 
-            <Credits />
-        </Container>
+                        {#if $onLast || $allVisited}
+                            <div in:fly="{{ x: 200, duration: 500 }}">
+                                <Button
+                                    disabled="{!($onLast || $allVisited) ||
+                                        $onResults}"
+                                    title="{$_('evaluate')}"
+                                    buttonAction="{() =>
+                                        quiz.jump(quiz.questions.length)}"
+                                    ><Icon
+                                        name="check-double"
+                                        size="lg"
+                                    /></Button
+                                >
+                            </div>
+                        {/if}
+                    </svelte:fragment>
+
+                    <Button
+                        slot="right"
+                        title="{$_('reset')}"
+                        buttonAction="{() => {
+                            reloaded = !reloaded;
+                            quiz.reset();
+                        }}"><Icon name="redo" /></Button
+                    >
+                </Row>
+
+                <Credits />
+            </Container>
+        </Loading>
     </Card>
 </div>
 
+<!-- global styles applied to all elements in the app -->
 <style type="text/scss" global>
     @import 'highlight.js/styles/github';
     @import 'katex/dist/katex';

diff --git a/src/components/ResultsView.svelte b/src/components/ResultsView.svelte
@@ -1,44 +1,44 @@
 <script lang="ts">
     import type { Quiz } from '../quiz';
-    import { onMount, beforeUpdate, afterUpdate } from 'svelte';
+    import { beforeUpdate } from 'svelte';
 
     export let quiz: Quiz;
     let emojis = ['❌', '✅'];
     import { _ } from 'svelte-i18n';
-    import Buttons from './Buttons.svelte';
-    import Button from './Button.svelte';
-    import { fade, fly } from 'svelte/transition';
+    import { fade } from 'svelte/transition';
     import Icon from './Icon.svelte';
     import Loading from './Loading.svelte';
     import { get } from 'svelte/store';
 
-    let waitTime = 1500;
+    let waitTime = 800;
     if (get(quiz.isEvaluated)) {
         // only wait longer for the first time
-        waitTime = 400;
+        waitTime = 300;
     }
     let points = 0;
     beforeUpdate(() => (points = quiz.evaluate()));
+
+    function format(n: number) {
+        return n.toLocaleString('en-US', {
+            minimumIntegerDigits: 2,
+        });
+    }
 </script>
 
 <h3>{$_('resultsTitle')}</h3>
-<Loading ms="{waitTime}">
+<Loading ms="{waitTime}" minHeight="{150}">
     <div in:fade="{{ duration: 1000 }}">
-        <p>
-            {@html $_('resultsText', {
-                values: {
-                    points: `<i>${points}</i>`,
-                    total: `<i>${quiz.questions.length}</i>`,
-                },
-            })}
-        </p>
+        <h1>
+            <Icon name="check-double" />
+            {format(points)}/{format(quiz.questions.length)}
+        </h1>
 
         <ol>
             {#each quiz.questions as question, i}
                 <li class="top-list-item" on:click="{() => quiz.jump(i)}">
                     <span class="list-question">
                         {emojis[+question.solved]}
-                        Q{i + 1}:{@html question.text}
+                        {@html question.text}
                     </span>
                     <ol>
                         <!-- answer comments when selected and available -->
@@ -61,9 +61,15 @@
 </Loading>
 
 <style>
+    ol {
+        padding-left: 0;
+        display: inline-block;
+    }
+
     .top-list-item {
         margin-bottom: 0.2rem;
         list-style-type: none;
+        list-style: none;
     }
 
     .top-list-item:hover {