@erudit-js/prose 3.0.0-dev.25

package/dist/elements/problem/components/ProblemContainer.vue

@@ -0,0 +1,9 @@
+<template>
+    <div
+        class="bg-bg-accent/30 dark:bg-bg-accent/50 border-border/50
+            dark:border-border/90 rounded-xl border
+            transition-[background,border]"
+    >
+        <slot></slot>
+    </div>
+</template>

package/dist/elements/problem/components/ProblemContent.vue

@@ -0,0 +1,371 @@
+<script lang="ts" setup>
+import {
+    computed,
+    onMounted,
+    ref,
+    shallowRef,
+    useTemplateRef,
+    watchEffect,
+    type Component,
+} from 'vue';
+import { autoUpdate, offset, useFloating } from '@floating-ui/vue';
+import {
+    isProseElement,
+    resolveRawElement,
+    type ProseElement,
+} from '@jsprose/core';
+
+import {
+    problemAnswer,
+    problemCheckSchema,
+    problemDescriptionSchema,
+    problemHintSchema,
+    problemNote,
+    problemSolution,
+    type CheckFunction,
+    type ProblemContentChild,
+} from '../problemContent.js';
+import { useProseContext } from '../../../app/composables/context.js';
+import { useProblemPhrase } from '../composables/phrase.js';
+import type { ProblemAction } from '../shared.js';
+import { useArrayContainsAnchor } from '../../../app/composables/anchor.js';
+import type { ProblemScriptInstance } from '../problemScript.js';
+import type { problemSchema } from '../problem.js';
+import type { subProblemSchema } from '../problems.js';
+import { useElementStorage } from '../../../app/composables/storage.js';
+import type { ProblemScriptStorage } from '../storage.js';
+import { createProblemScriptInstance } from '../composables/problemScript.js';
+import { DEFAULT_SEED, type ProblemSeed } from '../rng.js';
+import plusIcon from '../../../app/shared/assets/plus.svg?raw';
+import Render from '../../../app/shared/Render.vue';
+import Hint from './expanders/Hint.vue';
+import DefaultPlusSections from './expanders/DefaultPlusSections.vue';
+import ProblemButton from './ProblemButton.vue';
+import Checks from './expanders/Checks.vue';
+
+const { element, initialElements } = defineProps<{
+    element:
+        | ProseElement<typeof problemSchema>
+        | ProseElement<typeof subProblemSchema>;
+    initialElements: ProseElement<ProblemContentChild>[];
+}>();
+
+const { EruditIcon, EruditTransition } = useProseContext();
+const phrase = await useProblemPhrase();
+
+const actionIcons: Record<ProblemAction, string> = Object.fromEntries(
+    Object.entries(
+        // @ts-ignore
+        import.meta.glob('../assets/actions/*.svg', {
+            query: 'raw',
+            eager: true,
+            import: 'default',
+        }),
+    ).map(([key, value]) => {
+        const name = key.split('/').pop()?.replace('.svg', '') ?? key;
+        return [name as any, value as string];
+    }),
+);
+
+const key = ref(0);
+const elements =
+    shallowRef<ProseElement<ProblemContentChild>[]>(initialElements);
+
+const description = computed(() => {
+    return elements.value.find((element) =>
+        isProseElement(element, problemDescriptionSchema),
+    )!;
+});
+
+const expanderComponents: Record<
+    Exclude<ProblemAction, 'generate'>,
+    Component
+> = {
+    check: Checks,
+    hint: Hint,
+    answer: DefaultPlusSections,
+    solution: DefaultPlusSections,
+    note: DefaultPlusSections,
+};
+
+const expandableActions = computed(() => {
+    type ActionMap<T> =
+        T extends Partial<Exclude<Record<ProblemAction, any>, 'generate'>>
+            ? T
+            : never;
+
+    const actionMap: ActionMap<{
+        hint?: ProseElement<typeof problemHintSchema>[];
+        answer?: ProseElement<typeof problemAnswer.schema>;
+        solution?: ProseElement<typeof problemSolution.schema>;
+        note?: ProseElement<typeof problemNote.schema>;
+        check?: {
+            checkElements: ProseElement<typeof problemCheckSchema>[];
+            checkFunction?: CheckFunction;
+        };
+    }> = {};
+
+    const checks = elements.value.filter((element) =>
+        isProseElement(element, problemCheckSchema),
+    );
+    if (checks.length > 0) {
+        actionMap.check = {
+            checkElements: checks,
+            checkFunction: scriptCheck.value,
+        };
+    }
+
+    const hints = elements.value.filter((element) =>
+        isProseElement(element, problemHintSchema),
+    );
+    if (hints.length > 0) {
+        actionMap.hint = hints;
+    }
+
+    (['answer', 'solution', 'note'] as const).forEach((action) => {
+        const actionElements = elements.value.filter((element) => {
+            switch (action) {
+                case 'answer':
+                    return isProseElement(element, problemAnswer.schema);
+                case 'solution':
+                    return isProseElement(element, problemSolution.schema);
+                case 'note':
+                    return isProseElement(element, problemNote.schema);
+            }
+        });
+
+        if (actionElements.length > 0) {
+            actionMap[action] = actionElements[0]! as any;
+        }
+    });
+
+    return actionMap;
+});
+
+const currentAction = ref<Exclude<ProblemAction, 'generate'>>();
+
+const containsAnchorArray = useArrayContainsAnchor(elements.value);
+
+watchEffect(() => {
+    const anchorIndex = containsAnchorArray.value;
+
+    if (anchorIndex === undefined) {
+        return;
+    }
+
+    const anchorElement = elements.value.at(anchorIndex);
+
+    switch (true) {
+        case isProseElement(anchorElement, problemHintSchema):
+            currentAction.value = 'hint';
+            break;
+        case isProseElement(anchorElement, problemAnswer.schema):
+            currentAction.value = 'answer';
+            break;
+        case isProseElement(anchorElement, problemSolution.schema):
+            currentAction.value = 'solution';
+            break;
+        case isProseElement(anchorElement, problemNote.schema):
+            currentAction.value = 'note';
+            break;
+    }
+});
+
+//
+// Problem Script
+//
+
+const scriptInstance = shallowRef<ProblemScriptInstance>();
+const scriptStorage = (await useElementStorage(
+    element as any,
+)) as ProblemScriptStorage;
+const isGenerator = computed(() => Boolean(scriptInstance.value?.isGenerator));
+const scriptCheck = shallowRef<CheckFunction>();
+
+onMounted(async () => {
+    scriptInstance.value = await createProblemScriptInstance(
+        scriptStorage?.resolvedScriptSrc,
+        element.data.scriptUniques,
+    );
+
+    if (scriptInstance.value) {
+        const initialGenerateResult =
+            scriptInstance.value!.generate(DEFAULT_SEED);
+        scriptCheck.value = initialGenerateResult.check;
+    }
+});
+
+const generateRotation = ref(0);
+const generating = ref(false);
+const seed = ref<ProblemSeed>(DEFAULT_SEED);
+const usingCustomSeed = ref(false);
+
+async function doGenerate() {
+    if (!scriptInstance.value) {
+        return;
+    }
+
+    generateRotation.value += 180;
+
+    if (generating.value) {
+        return;
+    }
+
+    generating.value = true;
+
+    if (usingCustomSeed.value) {
+        usingCustomSeed.value = false;
+    } else {
+        seed.value = Math.floor(Math.random() * 1000000000) + 1;
+    }
+
+    const generateResult = scriptInstance.value.generate(seed.value);
+
+    if (generateResult.check) {
+        scriptCheck.value = generateResult.check;
+    }
+
+    const rawElements = generateResult.problemContent;
+    const proseElements: ProseElement<ProblemContentChild>[] = [];
+    for (const rawElement of rawElements) {
+        const resolveResult = await resolveRawElement({
+            rawElement,
+            linkable: false,
+        });
+        proseElements.push(resolveResult.proseElement as any);
+    }
+
+    elements.value = proseElements;
+
+    key.value++;
+    generating.value = false;
+}
+
+//
+// Seed Popup
+//
+
+const seedPopupVisible = ref(false);
+const seedReferenceElement = useTemplateRef('seedReference');
+const seedPopupElement = useTemplateRef('seedPopup');
+
+const { floatingStyles: seedFloatingStyles } = useFloating(
+    seedReferenceElement,
+    seedPopupElement,
+    {
+        whileElementsMounted: autoUpdate,
+        placement: 'top',
+    },
+);
+</script>
+
+<template>
+    <div>
+        <Suspense suspensible>
+            <div class="py-(--proseAsideWidth)" :key>
+                <Render
+                    v-for="child of description.children"
+                    :element="child"
+                />
+            </div>
+        </Suspense>
+
+        <div
+            v-if="Object.values(expandableActions).some(Boolean) || isGenerator"
+            class="gap-small micro:gap-normal flex flex-wrap
+                p-(--proseAsideWidth) pt-0"
+        >
+            <ProblemButton
+                v-for="(_, actionKey) in expandableActions"
+                :key="actionKey"
+                @click="
+                    currentAction =
+                        actionKey === currentAction ? undefined : actionKey
+                "
+                :active="actionKey === currentAction"
+                class="flex items-center gap-[7px]"
+            >
+                <EruditIcon
+                    :name="actionIcons[actionKey]"
+                    class="text-[1.3em]"
+                />
+                <span>{{ phrase[`action_${actionKey}`] }}</span>
+            </ProblemButton>
+            <div
+                v-if="isGenerator"
+                ref="seedReference"
+                @mouseenter="seedPopupVisible = true"
+                @mouseleave="seedPopupVisible = false"
+            >
+                <ProblemButton
+                    @touchstart="
+                        seedPopupVisible = seedPopupVisible ? false : true
+                    "
+                    @click="doGenerate"
+                    class="flex items-center gap-[7px]"
+                >
+                    <EruditIcon
+                        :name="actionIcons.generate"
+                        :style="{ transform: `rotate(${generateRotation}deg)` }"
+                        class="text-[1.3em] transition-[transform]
+                            backface-hidden"
+                    />
+                    <span>{{ phrase.action_generate }}</span>
+                </ProblemButton>
+                <EruditTransition>
+                    <div
+                        v-if="seedPopupVisible"
+                        ref="seedPopup"
+                        :style="seedFloatingStyles"
+                        class="pb-2.5"
+                    >
+                        <form
+                            class="shadow-border text-main-xs flex rounded
+                                bg-neutral-900 text-white shadow-lg
+                                dark:bg-neutral-200 dark:text-black"
+                            @submit.prevent="doGenerate"
+                        >
+                            <input
+                                type="text"
+                                v-model="seed"
+                                @input="usingCustomSeed = true"
+                                :title="phrase.seed_explain"
+                                @focus="($event as any).target.select()"
+                                class="max-w-[100px] flex-1 p-[5px] text-center
+                                    outline-none"
+                            />
+                            <button
+                                v-if="seed !== DEFAULT_SEED"
+                                type="button"
+                                @click="
+                                    seed = DEFAULT_SEED;
+                                    usingCustomSeed = true;
+                                    doGenerate();
+                                "
+                                class="cursor-pointer pr-[3px]"
+                            >
+                                <EruditIcon
+                                    :name="plusIcon"
+                                    class="hocus:text-white
+                                        dark:hocus:text-black rotate-45
+                                        text-[1.3em] text-neutral-400
+                                        transition-[color]
+                                        dark:text-neutral-600"
+                                />
+                            </button>
+                        </form>
+                    </div>
+                </EruditTransition>
+            </div>
+        </div>
+
+        <Suspense suspensible>
+            <component
+                v-if="currentAction"
+                :key="`${key}-${currentAction}`"
+                :is="expanderComponents[currentAction]"
+                :value="expandableActions[currentAction]"
+            />
+        </Suspense>
+    </div>
+</template>

package/dist/elements/problem/components/ProblemExpander.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>
+        <div class="border-border border-t transition-[border]">
+            <slot></slot>
+        </div>
+    </div>
+</template>

package/dist/elements/problem/components/ProblemExpanderSection.vue

@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+import { ref, watchEffect } from 'vue';
+import type { AnySchema, ProseElement } from '@jsprose/core';
+
+import plusIcon from '../../../app/shared/assets/plus.svg?raw';
+import { useProseContext } from '../../../app/composables/context.js';
+import { useFormatText } from '../../../app/composables/formatText.js';
+import { useContainsAnchor } from '../../../app/composables/anchor.js';
+import Render from '../../../app/shared/Render.vue';
+
+const { element } = defineProps<{
+    title: string;
+    element: ProseElement<AnySchema>;
+}>();
+
+const formatText = useFormatText();
+const { EruditIcon } = useProseContext();
+const opened = ref(false);
+const containsAnchor = useContainsAnchor(element);
+
+watchEffect(() => {
+    if (containsAnchor.value) {
+        opened.value = true;
+    }
+});
+</script>
+
+<template>
+    <div
+        @click="opened = !opened"
+        class="group border-border text-text-muted relative flex cursor-pointer
+            items-center border-t p-(--proseAsideWidth) font-semibold
+            transition-[border] first:border-t-0"
+    >
+        <div class="flex-1">{{ formatText(title) }}</div>
+        <button
+            class="group-hocus:bg-border/80 text-text-muted shrink-0 rounded
+                bg-transparent p-0.5 transition-[background]"
+        >
+            <EruditIcon
+                :name="plusIcon"
+                :class="[
+                    'micro:text-[26px] text-[22px] transition-[rotate]',
+                    opened ? 'rotate-45' : '',
+                ]"
+            />
+        </button>
+    </div>
+    <Suspense>
+        <div
+            v-if="opened"
+            class="border-border border-t border-dashed py-(--proseAsideWidth)
+                transition-[border]"
+        >
+            <Render v-for="child of element.children" :element="child" />
+        </div>
+    </Suspense>
+</template>

package/dist/elements/problem/components/ProblemHeader.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import { useProseContext } from '../../../app/composables/context.js';
+import { useFormatText } from '../../../app/composables/formatText.js';
+import { useProblemPhrase } from '../composables/phrase.js';
+import type { ProblemAttribute, ProblemInfo, ProblemLevel } from '../shared.js';
+
+const { info } = defineProps<{
+    info: ProblemInfo;
+}>();
+
+const { EruditIcon } = useProseContext();
+const formatText = useFormatText();
+const phrase = await useProblemPhrase();
+
+const attributeIcons: Record<ProblemAttribute, string> = Object.fromEntries(
+    Object.entries(
+        // @ts-ignore
+        import.meta.glob('../assets/attributes/*.svg', {
+            query: 'raw',
+            eager: true,
+            import: 'default',
+        }),
+    ).map(([key, value]) => {
+        const name = key.split('/').pop()?.replace('.svg', '') ?? key;
+        return [name as any, value as string];
+    }),
+);
+
+const levelEmojies: Record<ProblemLevel, string> = {
+    example: '👀',
+    easy: '😀',
+    medium: '🤔',
+    hard: '🤯',
+};
+
+const levelColors: Record<ProblemLevel, string> = {
+    example: 'light-dark(#1c8baf, #2a9ab8)',
+    easy: 'light-dark(#73af00, #79b800)',
+    medium: 'light-dark(#db9c00, #ffc01e)',
+    hard: 'light-dark(#dc2f51, #ff375f)',
+};
+</script>
+
+<template>
+    <header
+        class="micro:flex-row micro:items-center micro:gap-normal gap-small flex
+            flex-col flex-wrap p-(--proseAsideWidth) pb-0"
+    >
+        <h2
+            class="text-text-deep text-main-lg flex-1 font-bold
+                transition-[color]"
+        >
+            {{ formatText(info.title) }}
+        </h2>
+        <div
+            class="micro:[--labelHeight:32px] gap-small micro:justify-start
+                micro:flex-row flex flex-row-reverse flex-wrap items-center
+                justify-end [--labelHeight:28px]"
+        >
+            <div
+                v-for="attribute of info.attributes.sort()"
+                :title="
+                    typeof attribute === 'string'
+                        ? phrase[`attribute_explain.${attribute}`]
+                        : attribute.hint
+                "
+                class="border-border/60 bg-bg-main text-main-xs text-text-muted
+                    flex h-(--labelHeight) cursor-help items-center gap-1
+                    rounded-xl border px-2 shadow
+                    shadow-[light-dark(#d9d9d9,#3c3c3c)]
+                    transition-[background,border,color,box-shadow]"
+            >
+                <EruditIcon
+                    v-if="typeof attribute === 'string' || attribute.icon"
+                    :name="
+                        typeof attribute === 'string'
+                            ? attributeIcons[attribute]
+                            : attribute.icon
+                    "
+                    class="text-[15px]"
+                />
+                <span>
+                    {{
+                        typeof attribute === 'string'
+                            ? phrase[`attribute.${attribute}`]
+                            : attribute.label
+                    }}
+                </span>
+            </div>
+            <div
+                :style="{ '--levelColor': levelColors[info.level] }"
+                :title="phrase.level_hint"
+                class="text-main-xs flex h-(--labelHeight) cursor-help
+                    items-center gap-1 rounded-xl border
+                    border-(--levelColor)/30 bg-(--levelColor)/10 px-2
+                    font-semibold text-(--levelColor) shadow
+                    shadow-(color:--levelColor)/25"
+            >
+                <div class="text-[15px]">
+                    {{ levelEmojies[info.level] }}
+                </div>
+                <div>{{ phrase[`level.${info.level}`] }}</div>
+            </div>
+        </div>
+    </header>
+</template>

package/dist/elements/problem/components/Problems.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, watchEffect } from 'vue';
+import {
+    isProseElement,
+    type BlockSchema,
+    type ProseElement,
+} from '@jsprose/core';
+
+import { subProblemSchema, type problemsSchema } from '../problems.js';
+import { useFormatText } from '../../../app/composables/formatText.js';
+import { useArrayContainsAnchor } from '../../../app/composables/anchor.js';
+import SubProblem from './SubProblem.vue';
+import Block from '../../../app/shared/block/Block.vue';
+import ProblemContainer from './ProblemContainer.vue';
+import ProblemHeader from './ProblemHeader.vue';
+import Render from '../../../app/shared/Render.vue';
+import ProblemButton from './ProblemButton.vue';
+
+const { element } = defineProps<{
+    element: ProseElement<typeof problemsSchema>;
+}>();
+
+const formatText = useFormatText();
+
+const sharedChildren = element.children.filter(
+    (child) => !isProseElement(child, subProblemSchema),
+) as ProseElement<BlockSchema>[];
+
+const subProblems = element.children.filter((child) =>
+    isProseElement(child, subProblemSchema),
+) as ProseElement<typeof subProblemSchema>[];
+
+const activeSubProblemI = ref(0);
+
+function getUnlabeledOrdinal(index: number) {
+    let count = 0;
+    for (let i = 0; i <= index; i++) {
+        if (!subProblems[i].data.label) count++;
+    }
+    return count;
+}
+
+const containsAnchorI = useArrayContainsAnchor(subProblems);
+
+watchEffect(() => {
+    if (containsAnchorI.value !== undefined) {
+        activeSubProblemI.value = containsAnchorI.value;
+    }
+});
+</script>
+
+<template>
+    <Block :element>
+        <ProblemContainer>
+            <ProblemHeader :info="element.data" />
+            <div v-if="sharedChildren.length" class="pt-(--proseAsideWidth)">
+                <Render
+                    v-for="sharedChild of sharedChildren"
+                    :element="sharedChild"
+                />
+            </div>
+            <div
+                class="gap-normal border-border flex flex-wrap border-b
+                    px-(--proseAsideWidth) py-(--proseAsideWidth)
+                    transition-[border]"
+            >
+                <ProblemButton
+                    v-for="(subProblem, i) of subProblems"
+                    :active="i === activeSubProblemI"
+                    @click="activeSubProblemI = i"
+                >
+                    {{
+                        subProblem.data.label
+                            ? formatText(subProblem.data.label)
+                            : getUnlabeledOrdinal(i)
+                    }}
+                </ProblemButton>
+            </div>
+            <Suspense>
+                <SubProblem
+                    :key="activeSubProblemI"
+                    :element="subProblems[activeSubProblemI]"
+                />
+            </Suspense>
+        </ProblemContainer>
+    </Block>
+</template>

package/dist/elements/problem/components/SubProblem.vue

@@ -0,0 +1,14 @@
+<script lang="ts" setup>
+import type { ProseElement } from '@jsprose/core';
+
+import type { subProblemSchema } from '../problems.js';
+import ProblemContent from './ProblemContent.vue';
+
+const { element } = defineProps<{
+    element: ProseElement<typeof subProblemSchema>;
+}>();
+</script>
+
+<template>
+    <ProblemContent :element :initialElements="element.children" />
+</template>