// Komonichi — practitioner ranks. 10 levels from Novice to Divine.
// Computed purely from existing client state (tasks, focus log). The "kanji
// scene" on the right of the shell ripens as the practitioner climbs.
(function () {
const { useKomonichi, sel, fmtMin } = window.KomonichiState;
// ----- levels -----------------------------------------------------------
// Each level is a target. Reaching its `req` thresholds means you ARE that
// level. The first level is the floor — everyone starts here.
//
// Levels 1–3 measure effort: tasks completed + minutes attended.
// Levels 4+ also measure consistency (streak days) and commitment — the
// fraction of *dated* tasks completed on or before the day they were
// scheduled for. `dated` is the minimum number of scheduled-and-completed
// tasks the rate is computed over, so the commitment number is a real
// sample rather than a single lucky on-time finish.
const LEVELS = [
{ n: 1, kanji: "初", name: "Novice", romaji: "shoshin", req: { tasks: 0, minutes: 0, streak: 0, onTime: 0, dated: 0 } },
{ n: 2, kanji: "学", name: "Apprentice", romaji: "manabi", req: { tasks: 5, minutes: 60, streak: 0, onTime: 0, dated: 0 } },
{ n: 3, kanji: "修", name: "Disciple", romaji: "shū", req: { tasks: 20, minutes: 300, streak: 0, onTime: 0, dated: 0 } },
{ n: 4, kanji: "道", name: "Wayfarer", romaji: "dō", req: { tasks: 50, minutes: 900, streak: 3, onTime: 0.60, dated: 10 } },
{ n: 5, kanji: "行", name: "Adept", romaji: "gyō", req: { tasks: 100, minutes: 1800, streak: 7, onTime: 0.70, dated: 25 } },
{ n: 6, kanji: "達", name: "Master", romaji: "tatsu", req: { tasks: 200, minutes: 3600, streak: 14, onTime: 0.75, dated: 50 } },
{ n: 7, kanji: "師", name: "Sage", romaji: "shi", req: { tasks: 400, minutes: 7200, streak: 21, onTime: 0.80, dated: 100 } },
{ n: 8, kanji: "玄", name: "Profound", romaji: "gen", req: { tasks: 700, minutes: 12000, streak: 30, onTime: 0.85, dated: 175 } },
{ n: 9, kanji: "妙", name: "Sublime", romaji: "myō", req: { tasks: 1100, minutes: 18000, streak: 45, onTime: 0.90, dated: 275 } },
{ n: 10, kanji: "神", name: "Divine", romaji: "shin", req: { tasks: 1700, minutes: 27000, streak: 60, onTime: 0.95, dated: 425 } },
];
// ----- metric helpers ---------------------------------------------------
function computeMetrics(state) {
const tasks = state.tasks || [];
const done = tasks.filter(t => t.status === "done" && t.completedAt);
const tasksDone = done.length;
const totalFocusMin = sel.totalFocusMin();
const streak = sel.streakDays();
// Commitment: of *dated* done tasks (i.e. tasks that had a dueDate and
// were completed), the fraction completed on or before that date.
// Undated tasks are excluded — you can't be on-time for something that
// was never scheduled. The denominator (`datedCount`) is reported too so
// the bar can show "build more dated history" when the sample is thin.
const dated = done.filter(t => t.dueDate);
let onTime = 0;
if (dated.length) {
const k = (s) => new Date(s).toISOString().slice(0, 10);
const ok = dated.filter(t => k(t.completedAt) <= t.dueDate).length;
onTime = ok / dated.length;
}
return { tasksDone, totalFocusMin, streak, onTime, datedCount: dated.length };
}
// Per-criterion progress to a level (0..1 each). The "commitment" bucket
// is the *minimum* of (rate / required rate) and (dated count / required
// dated count) — both the rate and the sample size must be met. This
// prevents accidental promotion off a single on-time completion, and the
// bar visibly shows whichever side is lagging.
function progressTo(metrics, req) {
const safe = (n, d) => d > 0 ? Math.min(1, n / d) : 1;
const ratePart = req.onTime > 0 ? Math.min(1, metrics.onTime / req.onTime) : 1;
const countPart = req.dated > 0 ? Math.min(1, metrics.datedCount / req.dated) : 1;
return {
tasks: safe(metrics.tasksDone, req.tasks),
minutes: safe(metrics.totalFocusMin, req.minutes),
streak: safe(metrics.streak, req.streak),
// Commitment combines two sub-gates. The display below shows the gating
// side: rate when sample is sufficient, count when it isn't.
onTime: Math.min(ratePart, countPart),
onTimeRate: ratePart,
onTimeCount: countPart,
};
}
function meets(metrics, req) {
const p = progressTo(metrics, req);
return p.tasks >= 1 && p.minutes >= 1 && p.streak >= 1 && p.onTime >= 1;
}
// Current level: highest level whose requirements are met. Always ≥ 1.
function currentLevel(metrics) {
let cur = LEVELS[0];
for (const lv of LEVELS) if (meets(metrics, lv.req)) cur = lv;
return cur;
}
function useRank() {
const [state] = useKomonichi();
const metrics = React.useMemo(() => computeMetrics(state), [state]);
const current = currentLevel(metrics);
const nextIdx = LEVELS.findIndex(l => l.n === current.n) + 1;
const next = nextIdx < LEVELS.length ? LEVELS[nextIdx] : null;
return { metrics, current, next };
}
// ----- SVG scene --------------------------------------------------------
// The kanji sits in front of a scene that gains layers as level rises.
// Each layer is keyed to a level threshold; we render anything ≤ current.
// The hues drift from sumi/moss → indigo → persimmon → gold.
function paletteFor(level) {
if (level >= 9) return { ink: "#2c2620", accent: "#b3924f", mist: "rgba(179,146,79,0.18)", deep: "rgba(179,146,79,0.32)", sky: "linear-gradient(180deg, #fbeac4 0%, #f3d49a 60%, #e6b97a 100%)" };
if (level >= 7) return { ink: "#2c2620", accent: "#c46c4a", mist: "rgba(196,108,74,0.16)", deep: "rgba(196,108,74,0.30)", sky: "linear-gradient(180deg, #fbe1d2 0%, #f3c4ab 70%, #d99373 100%)" };
if (level >= 5) return { ink: "#2c2620", accent: "#4d5a6e", mist: "rgba(77,90,110,0.16)", deep: "rgba(77,90,110,0.30)", sky: "linear-gradient(180deg, #e5e9f0 0%, #c8d0dc 70%, #98a3b6 100%)" };
if (level >= 3) return { ink: "#2c2620", accent: "#7d8666", mist: "rgba(125,134,102,0.14)", deep: "rgba(125,134,102,0.26)", sky: "linear-gradient(180deg, #f0eedb 0%, #d8d6bd 70%, #a8a787 100%)" };
return { ink: "#2c2620", accent: "#9a907f", mist: "rgba(154,144,127,0.10)", deep: "rgba(154,144,127,0.20)", sky: "linear-gradient(180deg, #faf6ec 0%, #ebe2cc 100%)" };
}
function KanjiScene({ level }) {
const p = paletteFor(level);
const n = level;
return (
);
}
// ----- background painting ----------------------------------------------
function RankPanel() {
const { current } = useRank();
const p = paletteFor(current.n);
const ref = React.useRef(null);
// The painting only "blooms forward" once the cursor leaves the main
// content (the centered .shell column) and moves into the right margin by
// a comfortable buffer — so it never wakes while you're working over a
// card. Driven here rather than via :hover so the threshold can include
// that buffer. We toggle the class on the node directly to avoid a React
// re-render on every mouse move.
React.useEffect(() => {
const BUFFER = 64; // px past the content's right edge before it stirs
let on = false;
const set = (v) => {
if (v === on) return;
on = v;
if (ref.current) ref.current.classList.toggle('active', v);
};
const onMove = (e) => {
const shell = document.querySelector('.shell');
const edge = shell ? shell.getBoundingClientRect().right : window.innerWidth;
set(e.clientX > edge + BUFFER);
};
const onLeave = () => set(false);
window.addEventListener('mousemove', onMove, { passive: true });
document.addEventListener('mouseleave', onLeave);
window.addEventListener('blur', onLeave);
return () => {
window.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseleave', onLeave);
window.removeEventListener('blur', onLeave);
};
}, []);
return (
{current.kanji}
level {current.n} · {current.romaji}
{current.name}
);
}
// Compact ladder showing all 10 levels, current one highlighted.
function RankLadder() {
const { current } = useRank();
return (