/**
* TaskMate Points Display Card
* A kid-friendly display card showing how many points a child (or all children) has.
*
* Modes:
* single — One child, large animated point total. Great for a child's own dashboard.
* multi — Grid showing every child with their own score. Good for family TV display.
* cumulative — Combined family total with individual breakdowns below.
*
* Config options:
* entity — sensor.taskmate_overview (required)
* mode — single | multi | cumulative (default: single)
* child_id — required for single mode
* title — optional header title override
* show_streak — show streak badge (default: true)
* show_weekly — show this week's points alongside all-time (default: true)
* show_rank — show rank medal in multi/cumulative modes (default: true)
* animate — animate number on load (default: true)
* header_color — hex colour for the card header (default: #9b59b6)
* primary_display — current_points | career_score (default: current_points)
*
* Version: 1.0.0
*/
const LitElement = customElements.get("hui-masonry-view")
? Object.getPrototypeOf(customElements.get("hui-masonry-view"))
: Object.getPrototypeOf(customElements.get("hui-view"));
const html = LitElement.prototype.html;
const css = LitElement.prototype.css;
const DEFAULT_HEADER = "#9b59b6";
const CHILD_COLOURS = [
"#e74c3c", "#3498db", "#27ae60", "#f39c12",
"#9b59b6", "#1abc9c", "#e67e22", "#2980b9",
];
const RANK_MEDAL = ["\u{1F947}", "\u{1F948}", "\u{1F949}"];
/* ─── Utility helpers ──────────────────────────────────────────────────── */
function getChildren(state) {
return state.attributes.children || [];
}
function weeklyPoints(child, tz) {
const todayKey = new Date().toLocaleDateString("en-CA", { timeZone: tz });
const today = new Date(todayKey + "T12:00:00"); // noon avoids DST edge cases
const monday = new Date(today);
monday.setDate(today.getDate() - ((today.getDay() + 6) % 7));
const mondayKey = monday.toLocaleDateString("en-CA");
const history = child.history || [];
return history
.filter(e => e.approved
&& new Date(e.timestamp).toLocaleDateString("en-CA", { timeZone: tz }) >= mondayKey)
.reduce((s, e) => s + (e.points || 0), 0);
}
function childAvatar(child, colour) {
const av = child.avatar || "mdi:account-circle";
const isIcon = av.startsWith("mdi:");
const initials = (child.name || "?")
.split(" ")
.map(w => w[0])
.slice(0, 2)
.join("")
.toUpperCase();
return html`
${isIcon
? html`
`
: av
? html`
`
: initials}
${this._t("points_display.empty_no_child")}
${this._t("points_display.empty_set_child_id")}
`;
}
const children = this._allChildren();
const colour = CHILD_COLOURS[children.indexOf(child) % CHILD_COLOURS.length];
const primary = this._primaryValue(child);
const secondary = this._secondaryValue(child);
const tz = this.hass?.config?.time_zone || Intl.DateTimeFormat().resolvedOptions().timeZone;
const weekly = weeklyPoints(child, tz);
const streak = child.streak || 0;
const rank = this._rankedChildren().findIndex(c => c.id === child.id) + 1;
return html`
${childAvatar(child, colour)}
${child.name}
${this._primaryLabel()}
\u2B50${primary.toLocaleString()}
${this._secondaryLabel()}: ${secondary.toLocaleString()}
${this.config.show_weekly ? html`
${this._t("points_display.weekly_pts", { count: weekly })}
${this._t("points_display.this_week")}
` : ""}
${this.config.show_streak ? html`
${streak === 1
? this._t("points_display.streak_day", { count: streak })
: this._t("points_display.streak_days", { count: streak })}
${this._t("points_display.streak")}
` : ""}
${this.config.show_rank && children.length > 1 ? html`
${rank <= 3 ? RANK_MEDAL[rank - 1] : `#${rank}`}
${this._t("points_display.rank")}
` : ""}
`;
}
/* ── Multi mode ─────────────────────────────────────────────────────── */
_renderMulti() {
const ranked = this._rankedChildren();
if (!ranked.length) {
return html`
${this._t("points_display.empty_no_children")}
`;
}
const tz = this.hass?.config?.time_zone || Intl.DateTimeFormat().resolvedOptions().timeZone;
return html`
${ranked.map((child, idx) => {
const colour = CHILD_COLOURS[this._allChildren().indexOf(child) % CHILD_COLOURS.length];
const primary = this._primaryValue(child);
const secondary = this._secondaryValue(child);
const weekly = weeklyPoints(child, tz);
const streak = child.streak || 0;
const isTop = idx === 0;
return html`
${isTop ? html`
\u{1F947}
` :
idx < 3 && this.config.show_rank ? html`
${RANK_MEDAL[idx]}
` : ""}
${childAvatar(child, colour)}
${child.name}
\u2B50${primary.toLocaleString()}
${this._isCareerMode()
? this._t("points_display.career_score_label")
: this._t("points_display.points_label")}
${this._secondaryLabel()}: ${secondary.toLocaleString()}
${this.config.show_weekly ? html`
${this._t("points_display.weekly_plus", { count: weekly })}
` : ""}
${this.config.show_streak ? html`
\u{1F525} ${streak}
` : ""}
${isTop ? html`
` : ""}
`;
})}
${this._t("points_display.empty_no_children")}
`;
}
const total = ranked.reduce((s, c) => s + this._primaryValue(c), 0);
const secTotal = ranked.reduce((s, c) => s + this._secondaryValue(c), 0);
return html`
${this._t("points_display.combined_family_total")}
\u{1F31F}${total.toLocaleString()}
${this._secondaryLabel()}: ${secTotal.toLocaleString()}
${this._t("points_display.family_subtitle", { count: ranked.length })}
${this._t("points_display.individual_scores")}
${ranked.map((child, idx) => {
const colour = CHILD_COLOURS[this._allChildren().indexOf(child) % CHILD_COLOURS.length];
const primary = this._primaryValue(child);
const secondary = this._secondaryValue(child);
const pct = total > 0 ? Math.round((primary / total) * 100) : 0;
return html`
${childAvatar(child, colour)}
${child.name}
\u2B50${primary.toLocaleString()}
${this._secondaryLabel()}: ${secondary.toLocaleString()}
${this.config.show_rank && idx < 3 ? html`
${RANK_MEDAL[idx]}
` : ""}
`;
})}
`;
}
/* ── Main render ────────────────────────────────────────────────────── */
render() {
const design = window.__taskmate_design
? window.__taskmate_design.apply(this, this.hass, this.config, this.config.entity)
: "classic";
if (design !== "classic") return this._renderDesigned(design);
const mode = this.config.mode || "single";
const title = this.config.title || this._defaultTitle();
const modeLabel = {
single: this._t("points_display.mode_single"),
multi: this._t("points_display.mode_multi"),
cumulative: this._t("points_display.mode_cumulative"),
}[mode] || mode;
const modeIcon = { single: "mdi:star-circle", multi: "mdi:account-group", cumulative: "mdi:sigma" }[mode] || "mdi:star";
let body;
if (mode === "multi") body = this._renderMulti();
else if (mode === "cumulative") body = this._renderCumulative();
else body = this._renderSingle();
return html`
${body}
`;
}
/* ══════════════════════════════════════════════════════════════════════
DESIGNED STYLES (playroom / console / cleanpro) — see taskmate-design.js
Ported from docs/design/redesigns (§card-points-display).
══════════════════════════════════════════════════════════════════════ */
_designTone(i) { return `var(--tmd-c${(i % 6) + 1})`; }
_av(child, tone, size) {
const a = child.avatar || "";
const inner = a.startsWith("mdi:")
? html``
: a
? html`
`
: (child.name || "?").split(" ").map(w => w[0]).slice(0, 2).join("").toUpperCase();
return html`${inner}
`;
}
_renderDesigned(design) {
const mode = this.config.mode || "single";
const title = this.config.title || this._defaultTitle();
const hd = _safeColor(this.config.header_color, DEFAULT_HEADER);
const tz = this.hass?.config?.time_zone || Intl.DateTimeFormat().resolvedOptions().timeZone;
let ranked = this._rankedChildren();
if (mode === "single") {
const c = this._singleChild();
ranked = c ? [c] : [];
}
const header = html`
⭐
${title}
${mode === "multi" ? html`${this._t("points_display.mode_multi")}` : ""}
`;
if (!ranked.length) {
return html`
${header}
${this._t("points_display.empty_no_children")}
${body}
`;
}
_designPlayroom(rows) {
const showRank = this.config.show_rank !== false;
const showWeekly = this.config.show_weekly !== false;
const showStreak = this.config.show_streak !== false;
return html`
${rows.map((r) => html`
${showRank && r.rank < 3 ? html`
${RANK_MEDAL[r.rank]}
` : ""}
${this._av(r.child, r.tone, 52)}
${r.points.toLocaleString()}⭐
${r.child.name}
${showWeekly || (showStreak && r.streak) ? html`
${showWeekly ? html`
${this._t("points_display.weekly_plus", { count: r.weekly })}
` : ""}
${showStreak && r.streak ? html`
\u{1F525} ${r.streak}
` : ""}
` : ""}
`)}
${rows.map((r) => html`
${showRank ? html`
#${r.rank + 1}
` : ""}
${this._av(r.child, r.tone, 38)}
${r.points.toLocaleString()}
XP${showWeekly ? html` · +${r.weekly}` : ""}${showStreak && r.streak ? html` · \u{1F525}${r.streak}` : ""}
`)}
${rows.map((r) => html`
${this._av(r.child, r.tone, 46)}
${r.points.toLocaleString()}
${r.child.name}
${showRank ? html`
${r.rank === 0
? html`● ` : ""}#${r.rank + 1}
` : ""}
${showWeekly ? html`
+${r.weekly}
` : ""}
${showStreak && r.streak ? html`
\u{1F525} ${r.streak}
` : ""}
`)}
${this._t("points_display.combined_family_total")}
${total.toLocaleString()} ${this._t("points_display.points_label")}
` : ""}`;
}
_cumulBody(rows, total) {
return html`
${this._t("points_display.combined_family_total")}
${total.toLocaleString()} ⭐
${rows.map((r) => html`
${this._av(r.child, r.tone, 40)}
${r.child.name}
${r.points.toLocaleString()}
`)}