Anki/ts/routes/reviewer/reviewer-bottom/ReviewerBottom.svelte

<!--
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
<script lang="ts">
    import type { Writable } from "svelte/store";
    import AnswerButton from "./AnswerButton.svelte";
    import { bridgeCommand } from "@tslib/bridgecommand";
    import * as tr from "@generated/ftl";
    import RemainingNumber from "./RemainingNumber.svelte";
    import type { AnswerButtonInfo } from "./types";

    export let answerButtons: Writable<AnswerButtonInfo[]>;
    export let remaining: Writable<number[]>;
    export let remainingIndex: Writable<number>;

    $: console.log($remaining);
</script>

<div id="outer" class="fancy">
    <div id="tableinner">
        <div>
            <button
                title={tr.actionsShortcutKey({ val: "E" })}
                on:click={() => bridgeCommand("edit")}
            >
                {tr.studyingEdit()}
            </button>
        </div>
        <div class="review-buttons">
            <span>
                <RemainingNumber cls="new-count" underlined={$remainingIndex === 0}>
                    {$remaining[0]}
                </RemainingNumber> +
                <RemainingNumber cls="learn-count" underlined={$remainingIndex === 1}>
                    {$remaining[1]}
                </RemainingNumber> +
                <RemainingNumber cls="review-count" underlined={$remainingIndex === 2}>
                    {$remaining[2]}
                </RemainingNumber>
            </span>
            <div>
                {#if $answerButtons.length}
                    {#each $answerButtons as answerButton}
                        <AnswerButton info={answerButton}></AnswerButton>
                    {/each}
                {:else}
                    <button on:click={() => bridgeCommand("ans")}>
                        {tr.studyingShowAnswer()}
                    </button>
                {/if}
            </div>
        </div>
        <div>
            <button
                on:click={() => bridgeCommand("more")}
                title={tr.actionsShortcutKey({ val: "M" })}
            >
                {tr.studyingMore()}&#8615
            </button>
        </div>
    </div>
</div>

<style lang="scss">
    #tableinner {
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr auto;
        justify-items: center;
        align-items: center;
    }

    .review-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>