Hugging Face's logo

Spaces:
wzender
/
mathly
Running

App Files Community
mathly
File size: 2,406 Bytes
a7ffb22
 
 
 
 
b6f5bc4
a7ffb22
 
b6f5bc4
a7ffb22
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// What the student achieved: each completed lesson as a constellation, each mastered skill as a star (faded ones dimmed), and the comets.
import { api } from "./api.js";
import { esc } from "./math.js";
import { showCard } from "./comets.js";
import { constellationSvg } from "./sky.js";
import { forSubject, tabs } from "./ui.js";

export async function show(view) {
  const [{ skills, lessons }, { comets, caught, total }] = await Promise.all([api(forSubject("/api/collection")), api("/api/comets")]);
  view(`${tabs("collection")}<section class="card" id="collection"><h2>ื”ืื•ืกืฃ ืฉืœื™</h2>
    <h3>ืงื‘ื•ืฆื•ืช ื›ื•ื›ื‘ื™ื (${lessons.length})</h3>
    ${lessons.length ? `<div class="cons" id="done-lessons">${lessons.map(l => `<figure class="con-card" data-lesson="${esc(l.id)}">
        ${constellationSvg(l.id, l.name, l.skills)}<figcaption>${esc(l.name)}<small class="muted">${l.skills} ื›ื•ื›ื‘ื™ื</small></figcaption></figure>`).join("")}</div>`
      : `<p class="muted">ืขื•ื“ ืื™ืŸ. ืงื‘ื•ืฆืช ื›ื•ื›ื‘ื™ื ืžื•ืคื™ืขื” ื›ืฉื›ืœ ื”ืžื™ื•ืžื ื•ื™ื•ืช ืฉืœ ืฉื™ืขื•ืจ ื ืฉืœื˜ื•ืช.</p>`}
    <h3>ืžื™ื•ืžื ื•ื™ื•ืช ืฉื ืฉืœื˜ื• (${skills.length})</h3>
    ${skills.length ? `<ul class="plain" id="done-skills">${skills.map(s => `<li${s.faded ? ' class="faded"' : ""}><a href="#/skill/${esc(s.id)}">โœ“ ${esc(s.name)}${s.faded ? " ยท โ—Œ ื“ื•ืขืš" : ""}</a><span class="muted">${esc(s.lesson_name)}</span></li>`).join("")}</ul>`
      : `<p class="muted">ืขื•ื“ ืื™ืŸ. ืžื™ื•ืžื ื•ืช ื ืฉืœื˜ืช ืื—ืจื™ 3 ืชืฉื•ื‘ื•ืช ื ื›ื•ื ื•ืช ื‘ืจืฆืฃ, ื‘ืœื™ ืขื–ืจื”, ื‘ืฉื ื™ ื™ืžื™ื ืฉื•ื ื™ื.</p>`}
    <h3>ืฉื‘ื™ื˜ื™ื ื ื“ื™ืจื™ื <span class="muted">(${caught} ืžืชื•ืš ${total})</span></h3>
    <div class="comets" id="comets">${comets.map(c => c.caught
      ? `<button type="button" class="comet-tile have" data-comet="${esc(c.id)}"><span class="sym" dir="ltr">${esc(c.sym)}</span><small>${esc(c.name)}</small></button>`
      : `<button type="button" class="comet-tile" data-comet="${esc(c.id)}" aria-label="ืฉื‘ื™ื˜ ืฉืขื•ื“ ืœื ื ืชืคืก"><span class="sym">?</span><small>ืขื•ื“ ืœื ื ืชืคืก</small></button>`).join("")}</div></section>`);
  document.getElementById("comets").addEventListener("click", event => {
    const tile = event.target.closest("[data-comet]");
    if (tile) showCard(comets.find(c => c.id === tile.dataset.comet), { heading: "ืฉื‘ื™ื˜ ื ื“ื™ืจ" });
  });
}