feat(web): garden on the «Сегодня» screen — stages, progress, today's checklist
CI / ruff · pytest (pull_request) Successful in 2m34s
CI / ruff · pytest (pull_request) Successful in 2m34s
SVG garden drawn from GET /me/{token}/garden: plants grow one after another
(sprout → stem → bud → flower), «Новый росток N из 10», today's activities,
«Пропуск — не страшно, сад не вянет». A gentle grow-in and a toast when the
garden grew since the last visit — but not right after a crisis reply.
No streaks, no «missed» marks, no red.
Refs #119
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,181 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
import { api } from "../api/client";
|
||||
import type { Garden as GardenData, GardenActivity } from "../api/types";
|
||||
import { ru } from "../content/ru";
|
||||
import { useDialog } from "../dialog/DialogContext";
|
||||
import { useSession } from "../session/SessionContext";
|
||||
import { Icon, type IconName } from "./Icon";
|
||||
import { useToast } from "./Toast";
|
||||
|
||||
/*
|
||||
* «Ваш сад» (#119, slide 13): every useful activity grows the garden. Without pressure — it never wilts, does not
|
||||
* depend on answers, nobody competes; there are no streaks, no «missed» marks and no red. The numbers come from the
|
||||
* server (#118); this only draws them.
|
||||
*/
|
||||
|
||||
const FLOWERS = ["#d9604c", "#e9a23b", "#c96f9a", "#e07a3f", "#b9577a", "#d4a02a"];
|
||||
const SLOTS = [44, 92, 140, 188, 236, 284];
|
||||
const GROUND = 128;
|
||||
const ICONS: Record<GardenActivity, IconName> = { meds: "pill", diary: "book", questionnaire: "clipboard" };
|
||||
const seenKey = (token: string) => `ptsr.garden.steps.${token}`;
|
||||
|
||||
function Plant({ x, stage, color, fresh }: { x: number; stage: number; color: string; fresh: boolean }) {
|
||||
if (stage <= 0) return <ellipse cx={x} cy={GROUND + 1} rx={5} ry={2} fill="#c9b08a" opacity={0.7} />;
|
||||
const h = [0, 18, 38, 54, 62][Math.min(stage, 4)];
|
||||
const top = GROUND - h;
|
||||
return (
|
||||
<g
|
||||
className={fresh ? "garden__plant garden__plant--fresh" : "garden__plant"}
|
||||
style={{ transformOrigin: `${x}px ${GROUND}px` }}
|
||||
>
|
||||
<path
|
||||
d={`M${x} ${GROUND} C ${x - 2} ${GROUND - h / 2}, ${x + 2} ${top + h / 3}, ${x} ${top}`}
|
||||
stroke="#4f7d5a"
|
||||
strokeWidth={2.4}
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
/>
|
||||
<path d={`M${x} ${GROUND - h * 0.35} q -11 -3 -13 -11 q 10 0 13 9`} fill="#6f9c6a" />
|
||||
{stage >= 2 && <path d={`M${x} ${GROUND - h * 0.6} q 11 -3 13 -11 q -10 0 -13 9`} fill="#6f9c6a" />}
|
||||
{stage === 1 && <path d={`M${x} ${top + 2} q 8 -4 9 -10 q -8 1 -9 8`} fill="#7fae74" />}
|
||||
{stage === 3 && <ellipse cx={x} cy={top - 3} rx={4.5} ry={7} fill={color} />}
|
||||
{stage >= 4 && (
|
||||
<g>
|
||||
{[0, 72, 144, 216, 288].map((a) => (
|
||||
<ellipse key={a} cx={x} cy={top - 8} rx={4.6} ry={8} fill={color} transform={`rotate(${a} ${x} ${top})`} />
|
||||
))}
|
||||
<circle cx={x} cy={top} r={4.2} fill="#f6d36b" />
|
||||
</g>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
|
||||
export function Garden({ refreshKey }: { refreshKey?: unknown }) {
|
||||
const { session } = useSession();
|
||||
const dialog = useDialog();
|
||||
const toast = useToast();
|
||||
const [garden, setGarden] = useState<GardenData | null>(null);
|
||||
const [freshFrom, setFreshFrom] = useState<number | null>(null);
|
||||
const announced = useRef(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!session) return;
|
||||
let alive = true;
|
||||
api
|
||||
.garden(session.token)
|
||||
.then((g) => {
|
||||
if (!alive) return;
|
||||
setGarden(g);
|
||||
const raw = window.localStorage.getItem(seenKey(session.token));
|
||||
const seen = raw === null ? null : Number(raw);
|
||||
// No celebration right after a crisis: growth stays, the toast and the animation do not.
|
||||
const recentCrisis = dialog.entries.slice(-12).some((e) => e.from === "assistant" && e.reply.kind === "crisis");
|
||||
if (seen !== null && g.steps > seen && !recentCrisis) {
|
||||
setFreshFrom(seen);
|
||||
if (!announced.current) toast(ru.garden.grew);
|
||||
announced.current = true;
|
||||
}
|
||||
window.localStorage.setItem(seenKey(session.token), String(g.steps));
|
||||
})
|
||||
.catch(() => undefined);
|
||||
return () => {
|
||||
alive = false;
|
||||
};
|
||||
}, [session, refreshKey]);
|
||||
|
||||
if (!garden) return null;
|
||||
const t = ru.garden;
|
||||
const perPlant = 4;
|
||||
const bloom = garden.plants.filter((p) => p.stage >= perPlant).length;
|
||||
const growing = garden.plants.filter((p) => p.stage > 0 && p.stage < perPlant).length;
|
||||
const share = garden.points_in_step / garden.step_points;
|
||||
|
||||
return (
|
||||
<section className="card garden" aria-labelledby="garden-title">
|
||||
<div>
|
||||
<p className="garden__eyebrow">{t.eyebrow}</p>
|
||||
<h2 id="garden-title" className="h3">
|
||||
{t.lead}
|
||||
</h2>
|
||||
</div>
|
||||
<svg
|
||||
className="garden__scene"
|
||||
viewBox="0 0 328 150"
|
||||
role="img"
|
||||
aria-label={t.label(garden.title, bloom, growing)}
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="garden-sky" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0" stopColor="#eef3ea" />
|
||||
<stop offset="1" stopColor="#f7f3ea" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="328" height="150" rx="12" fill="url(#garden-sky)" />
|
||||
<circle cx="282" cy="36" r="17" fill="#f2cc72" opacity={0.9} />
|
||||
<path
|
||||
d={`M0 ${GROUND + 4} Q 90 ${GROUND - 8} 170 ${GROUND + 2} T 328 ${GROUND - 2} V150 H0 Z`}
|
||||
fill="#e5d3b0"
|
||||
/>
|
||||
<path
|
||||
d={`M0 ${GROUND + 12} Q 110 ${GROUND + 2} 210 ${GROUND + 12} T 328 ${GROUND + 8} V150 H0 Z`}
|
||||
fill="#dcc59c"
|
||||
/>
|
||||
{garden.plants.map((p, i) => {
|
||||
// The plant that just grew (its stage covers steps after the last seen count) gets a gentle grow-in.
|
||||
const fresh =
|
||||
freshFrom !== null && garden.steps > freshFrom && Math.floor((garden.steps - 1) / perPlant) === i;
|
||||
return (
|
||||
<Plant
|
||||
key={i}
|
||||
x={SLOTS[i % SLOTS.length]}
|
||||
stage={p.stage}
|
||||
color={FLOWERS[i % FLOWERS.length]}
|
||||
fresh={fresh}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
<p className="garden__title">{garden.title}</p>
|
||||
<div className="garden__progress">
|
||||
<div className="garden__progress-head">
|
||||
<span>{t.next}</span>
|
||||
<span className="muted small">{t.of(garden.points_in_step, garden.step_points)}</span>
|
||||
</div>
|
||||
<div
|
||||
className="garden__bar"
|
||||
role="progressbar"
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={garden.step_points}
|
||||
aria-valuenow={garden.points_in_step}
|
||||
aria-label={t.next}
|
||||
>
|
||||
<span style={{ width: `${Math.round(share * 100)}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
{garden.today.length > 0 && (
|
||||
<ul className="garden__today" aria-label={t.today}>
|
||||
{garden.today.map((item) => (
|
||||
<li key={item.activity} className="garden__item">
|
||||
<span className="garden__icon" aria-hidden="true">
|
||||
<Icon name={ICONS[item.activity]} size={16} />
|
||||
</span>
|
||||
<span className="garden__item-text">
|
||||
{item.title}
|
||||
{item.detail && <span className="muted small"> · {item.detail}</span>}
|
||||
</span>
|
||||
<span
|
||||
className={item.done ? "garden__check garden__check--done" : "garden__check"}
|
||||
aria-label={item.done ? "сделано" : "ещё нет"}
|
||||
>
|
||||
{item.done && <Icon name="check" size={14} />}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
<p className="garden__note">{t.noPressure}</p>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user