| |
| 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: "ืฉืืื ื ืืืจ" }); |
| }); |
| } |
|
|
