feat(dashboard): add momentum and game debt
This commit is contained in:
Codex
@@ -9,8 +9,11 @@
|
||||
для Tailwind utility-классов и инлайн-стилей framer-motion. font-src
|
||||
включает data: на случай если кто-то вставит base64 SVG-glyph.
|
||||
-->
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data:; script-src 'self'; connect-src 'self'; base-uri 'self'; frame-ancestors 'none'" />
|
||||
<title>Exercise Reminder</title>
|
||||
<meta
|
||||
http-equiv="Content-Security-Policy"
|
||||
content="default-src 'self'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data:; script-src 'self'; connect-src 'self'; base-uri 'self'; frame-ancestors 'none'"
|
||||
/>
|
||||
<title>Не Залипай</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -162,7 +162,7 @@ function SidebarContent({ onNav }: { onNav?: () => void }): JSX.Element {
|
||||
<>
|
||||
<div className="px-5 pt-7 pb-6">
|
||||
<div className="font-serif text-[36px] leading-none tracking-tight font-bold">
|
||||
Laude
|
||||
Не Залипай
|
||||
</div>
|
||||
<div className="text-[13px] text-text/55 mt-2 font-medium">
|
||||
{t('sidebar.slogan')}
|
||||
|
||||
@@ -18,7 +18,7 @@ export const ru: Dict = {
|
||||
'nav.games': 'Игры',
|
||||
'nav.challenges': 'Челленджи',
|
||||
'nav.settings': 'Настройки',
|
||||
'sidebar.slogan': 'Двигайся осознанно',
|
||||
'sidebar.slogan': 'Держи ритм за компом',
|
||||
'sidebar.status_tracking': 'Активность отслеживается',
|
||||
'titlebar.menu_aria': 'Меню',
|
||||
'titlebar.minimize_aria': 'Свернуть',
|
||||
@@ -26,7 +26,7 @@ export const ru: Dict = {
|
||||
'titlebar.restore_aria': 'Восстановить размер',
|
||||
'titlebar.tray_aria': 'В трей',
|
||||
'titlebar.close_aria': 'Закрыть',
|
||||
'titlebar.app_title': 'Exercise Reminder',
|
||||
'titlebar.app_title': 'Не Залипай',
|
||||
|
||||
// Common buttons / actions
|
||||
'btn.add': 'Добавить',
|
||||
@@ -124,6 +124,44 @@ export const ru: Dict = {
|
||||
'dashboard.empty.title': 'Программа пуста',
|
||||
'dashboard.empty.hint': 'Добавь первое упражнение, чтобы начать',
|
||||
|
||||
// Momentum / today redesign
|
||||
'momentum.level.title': 'Уровень',
|
||||
'momentum.level.number': 'уровень {n}',
|
||||
'momentum.level.next': 'до «{name}» осталось {n} XP',
|
||||
'momentum.level.max': 'максимальный уровень',
|
||||
'momentum.level.warmup': 'Разогрелся',
|
||||
'momentum.level.rhythm': 'Вошёл в ритм',
|
||||
'momentum.level.steady': 'Держу форму',
|
||||
'momentum.level.back': 'Железная спина',
|
||||
'momentum.level.machine': 'Машина привычек',
|
||||
'momentum.level.legend': 'Легенда перерывов',
|
||||
'momentum.week.kicker': 'Челленджи недели',
|
||||
'momentum.week.title': 'Ритм за неделю',
|
||||
'momentum.week.summary': '{days} дн · {reps} повт',
|
||||
'momentum.quest.complete': 'закрыто',
|
||||
'momentum.quest.week_rhythm.title': '5 дней без нуля',
|
||||
'momentum.quest.week_rhythm.desc': 'отметь активность в 5 разных дней',
|
||||
'momentum.quest.week_reps.title': '1000 повторов',
|
||||
'momentum.quest.week_reps.desc': 'набери тысячу повторов за неделю',
|
||||
'momentum.quest.match_debt.title': 'Закрыть катки',
|
||||
'momentum.quest.match_debt.desc': 'закрой 3 игровых долга за неделю',
|
||||
'momentum.quest.today_anchor.title': 'Сегодня не ноль',
|
||||
'momentum.quest.today_anchor.desc': 'сделай хотя бы одно действие сегодня',
|
||||
'momentum.game.kicker': 'После катки',
|
||||
'momentum.game.title': 'Игровой долг',
|
||||
'momentum.game.status': 'Dota GSI',
|
||||
'momentum.game.live': 'live',
|
||||
'momentum.game.setup': 'настройка',
|
||||
'momentum.game.off': 'выкл',
|
||||
'momentum.game.today': 'сегодня',
|
||||
'momentum.game.week': 'неделя',
|
||||
'momentum.game.reps': '{n} повт',
|
||||
'momentum.game.entries': '{n} закрыто',
|
||||
'momentum.game.last': 'последняя катка: {date}',
|
||||
'momentum.game.no_matches': 'закрытых игровых долгов пока нет',
|
||||
'momentum.game.no_rules':
|
||||
'Добавь челлендж за матч, и здесь появится долг после каток.',
|
||||
|
||||
// Exercises
|
||||
'exercises.kicker': 'Программа',
|
||||
'exercises.title': 'Упражнения',
|
||||
@@ -433,7 +471,7 @@ export const en: Dict = {
|
||||
'nav.games': 'Games',
|
||||
'nav.challenges': 'Challenges',
|
||||
'nav.settings': 'Settings',
|
||||
'sidebar.slogan': 'Move with intention',
|
||||
'sidebar.slogan': 'Keep your PC rhythm',
|
||||
'sidebar.status_tracking': 'Activity tracking is on',
|
||||
'titlebar.menu_aria': 'Menu',
|
||||
'titlebar.minimize_aria': 'Minimize',
|
||||
@@ -441,7 +479,7 @@ export const en: Dict = {
|
||||
'titlebar.restore_aria': 'Restore size',
|
||||
'titlebar.tray_aria': 'To tray',
|
||||
'titlebar.close_aria': 'Close',
|
||||
'titlebar.app_title': 'Exercise Reminder',
|
||||
'titlebar.app_title': 'Ne Zalipay',
|
||||
|
||||
// Common buttons
|
||||
'btn.add': 'Add',
|
||||
@@ -538,6 +576,44 @@ export const en: Dict = {
|
||||
'dashboard.empty.title': 'Program is empty',
|
||||
'dashboard.empty.hint': 'Add your first exercise to start',
|
||||
|
||||
// Momentum / today redesign
|
||||
'momentum.level.title': 'Level',
|
||||
'momentum.level.number': 'level {n}',
|
||||
'momentum.level.next': '{n} XP to "{name}"',
|
||||
'momentum.level.max': 'max level',
|
||||
'momentum.level.warmup': 'Warmed up',
|
||||
'momentum.level.rhythm': 'In rhythm',
|
||||
'momentum.level.steady': 'Keeping shape',
|
||||
'momentum.level.back': 'Iron back',
|
||||
'momentum.level.machine': 'Habit machine',
|
||||
'momentum.level.legend': 'Break legend',
|
||||
'momentum.week.kicker': 'Weekly challenges',
|
||||
'momentum.week.title': 'Week rhythm',
|
||||
'momentum.week.summary': '{days} d · {reps} reps',
|
||||
'momentum.quest.complete': 'done',
|
||||
'momentum.quest.week_rhythm.title': '5 non-zero days',
|
||||
'momentum.quest.week_rhythm.desc': 'log activity on 5 different days',
|
||||
'momentum.quest.week_reps.title': '1000 reps',
|
||||
'momentum.quest.week_reps.desc': 'reach one thousand reps this week',
|
||||
'momentum.quest.match_debt.title': 'Close matches',
|
||||
'momentum.quest.match_debt.desc': 'close 3 game debts this week',
|
||||
'momentum.quest.today_anchor.title': 'Today is not zero',
|
||||
'momentum.quest.today_anchor.desc': 'complete at least one action today',
|
||||
'momentum.game.kicker': 'After match',
|
||||
'momentum.game.title': 'Game debt',
|
||||
'momentum.game.status': 'Dota GSI',
|
||||
'momentum.game.live': 'live',
|
||||
'momentum.game.setup': 'setup',
|
||||
'momentum.game.off': 'off',
|
||||
'momentum.game.today': 'today',
|
||||
'momentum.game.week': 'week',
|
||||
'momentum.game.reps': '{n} reps',
|
||||
'momentum.game.entries': '{n} closed',
|
||||
'momentum.game.last': 'last match: {date}',
|
||||
'momentum.game.no_matches': 'no closed game debts yet',
|
||||
'momentum.game.no_rules':
|
||||
'Add a per-match challenge and game debt will show up here.',
|
||||
|
||||
// Exercises
|
||||
'exercises.kicker': 'Program',
|
||||
'exercises.title': 'Exercises',
|
||||
|
||||
112
src/renderer/src/lib/momentum.test.ts
Normal file
112
src/renderer/src/lib/momentum.test.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import type { Challenge, Exercise, HistoryEntry } from '@shared/types'
|
||||
import { computeMomentumSummary } from './momentum'
|
||||
|
||||
const NOW = new Date(2026, 5, 10, 12, 0, 0, 0).getTime()
|
||||
const DAY = 24 * 60 * 60 * 1000
|
||||
|
||||
function exercise(partial: Partial<Exercise> & { id: string }): Exercise {
|
||||
return {
|
||||
id: partial.id,
|
||||
name: partial.name ?? partial.id,
|
||||
reps: partial.reps ?? 10,
|
||||
icon: partial.icon ?? 'Activity',
|
||||
intervalMinutes: partial.intervalMinutes ?? 30,
|
||||
enabled: partial.enabled ?? true,
|
||||
nextFireAt: partial.nextFireAt ?? NOW + 60_000,
|
||||
category: partial.category,
|
||||
dailyGoal: partial.dailyGoal,
|
||||
adaptive: partial.adaptive
|
||||
}
|
||||
}
|
||||
|
||||
function challenge(partial: Partial<Challenge> & { id: string }): Challenge {
|
||||
return {
|
||||
id: partial.id,
|
||||
name: partial.name ?? partial.id,
|
||||
gameId: 'dota2',
|
||||
stat: partial.stat ?? 'deaths',
|
||||
multiplier: partial.multiplier ?? 3,
|
||||
exerciseName: partial.exerciseName ?? 'Squats',
|
||||
icon: partial.icon ?? 'Dumbbell',
|
||||
enabled: partial.enabled ?? true
|
||||
}
|
||||
}
|
||||
|
||||
function done(
|
||||
exerciseId: string,
|
||||
daysAgo: number,
|
||||
reps: number,
|
||||
source?: HistoryEntry['source']
|
||||
): HistoryEntry {
|
||||
return {
|
||||
exerciseId,
|
||||
ts: NOW - daysAgo * DAY,
|
||||
action: 'done',
|
||||
reps,
|
||||
source
|
||||
}
|
||||
}
|
||||
|
||||
describe('computeMomentumSummary', () => {
|
||||
it('tracks weekly quests and match debt from history', () => {
|
||||
const summary = computeMomentumSummary({
|
||||
now: NOW,
|
||||
exercises: [exercise({ id: 'pushups', reps: 15 })],
|
||||
challenges: [challenge({ id: 'c1' })],
|
||||
history: [
|
||||
done('pushups', 0, 15),
|
||||
done('pushups', 1, 20),
|
||||
done('pushups', 2, 25),
|
||||
done('challenge:c1', 0, 30, 'match'),
|
||||
done('challenge:c1', 2, 45, 'match')
|
||||
]
|
||||
})
|
||||
|
||||
expect(summary.todayReps).toBe(45)
|
||||
expect(summary.weekReps).toBe(135)
|
||||
expect(summary.weekActiveDays).toBe(3)
|
||||
expect(summary.gameDebt.matchEntriesToday).toBe(1)
|
||||
expect(summary.gameDebt.matchEntriesWeek).toBe(2)
|
||||
expect(summary.gameDebt.matchRepsWeek).toBe(75)
|
||||
expect(summary.weeklyQuests.map((quest) => quest.id)).toEqual([
|
||||
'week_rhythm',
|
||||
'week_reps',
|
||||
'match_debt',
|
||||
'today_anchor'
|
||||
])
|
||||
})
|
||||
|
||||
it('hides match quest when there are no enabled challenge rules', () => {
|
||||
const summary = computeMomentumSummary({
|
||||
now: NOW,
|
||||
exercises: [exercise({ id: 'pushups' })],
|
||||
challenges: [challenge({ id: 'c1', enabled: false })],
|
||||
history: [done('pushups', 0, 10)]
|
||||
})
|
||||
|
||||
expect(summary.gameDebt.activeRules).toBe(0)
|
||||
expect(summary.weeklyQuests.map((quest) => quest.id)).toEqual([
|
||||
'week_rhythm',
|
||||
'week_reps',
|
||||
'today_anchor'
|
||||
])
|
||||
})
|
||||
|
||||
it('computes a soft level from reps, active days and match activity', () => {
|
||||
const summary = computeMomentumSummary({
|
||||
now: NOW,
|
||||
exercises: [exercise({ id: 'pushups' })],
|
||||
challenges: [challenge({ id: 'c1' })],
|
||||
history: [
|
||||
done('pushups', 0, 100),
|
||||
done('pushups', 1, 100),
|
||||
done('challenge:c1', 0, 100, 'match')
|
||||
]
|
||||
})
|
||||
|
||||
expect(summary.level.xp).toBe(425)
|
||||
expect(summary.level.key).toBe('momentum.level.rhythm')
|
||||
expect(summary.level.progressPct).toBeGreaterThan(0)
|
||||
})
|
||||
})
|
||||
216
src/renderer/src/lib/momentum.ts
Normal file
216
src/renderer/src/lib/momentum.ts
Normal file
@@ -0,0 +1,216 @@
|
||||
import type { Challenge, Exercise, HistoryEntry } from '@shared/types'
|
||||
import { dayKey } from './history'
|
||||
|
||||
export type MomentumLevel = {
|
||||
key: string
|
||||
xp: number
|
||||
levelIndex: number
|
||||
current: number
|
||||
target: number
|
||||
progressPct: number
|
||||
nextKey?: string
|
||||
}
|
||||
|
||||
export type WeeklyQuest = {
|
||||
id: 'week_rhythm' | 'week_reps' | 'match_debt' | 'today_anchor'
|
||||
titleKey: string
|
||||
descKey: string
|
||||
current: number
|
||||
target: number
|
||||
progressPct: number
|
||||
complete: boolean
|
||||
tone: 'accent' | 'success' | 'warning' | 'info'
|
||||
}
|
||||
|
||||
export type GameDebtSummary = {
|
||||
activeRules: number
|
||||
matchRepsToday: number
|
||||
matchRepsWeek: number
|
||||
matchEntriesToday: number
|
||||
matchEntriesWeek: number
|
||||
lastMatchAt?: number
|
||||
}
|
||||
|
||||
export type MomentumSummary = {
|
||||
level: MomentumLevel
|
||||
weeklyQuests: WeeklyQuest[]
|
||||
gameDebt: GameDebtSummary
|
||||
weekReps: number
|
||||
weekActiveDays: number
|
||||
todayReps: number
|
||||
}
|
||||
|
||||
const LEVELS = [
|
||||
{ key: 'momentum.level.warmup', xp: 0 },
|
||||
{ key: 'momentum.level.rhythm', xp: 120 },
|
||||
{ key: 'momentum.level.steady', xp: 450 },
|
||||
{ key: 'momentum.level.back', xp: 1000 },
|
||||
{ key: 'momentum.level.machine', xp: 2500 },
|
||||
{ key: 'momentum.level.legend', xp: 6000 }
|
||||
] as const
|
||||
|
||||
function startOfDay(ts: number): Date {
|
||||
const d = new Date(ts)
|
||||
d.setHours(0, 0, 0, 0)
|
||||
return d
|
||||
}
|
||||
|
||||
function startOfWeek(ts: number): Date {
|
||||
const d = startOfDay(ts)
|
||||
const day = d.getDay()
|
||||
const delta = day === 0 ? -6 : 1 - day
|
||||
d.setDate(d.getDate() + delta)
|
||||
return d
|
||||
}
|
||||
|
||||
function entryReps(
|
||||
entry: HistoryEntry,
|
||||
exercisesById: Map<string, Exercise>
|
||||
): number {
|
||||
return (
|
||||
entry.actualReps ??
|
||||
entry.reps ??
|
||||
exercisesById.get(entry.exerciseId)?.reps ??
|
||||
0
|
||||
)
|
||||
}
|
||||
|
||||
function isMatchEntry(entry: HistoryEntry): boolean {
|
||||
return entry.source === 'match' || entry.exerciseId.startsWith('challenge:')
|
||||
}
|
||||
|
||||
function computeLevel(xp: number): MomentumLevel {
|
||||
let index = 0
|
||||
for (let i = 0; i < LEVELS.length; i++) {
|
||||
if (xp >= LEVELS[i].xp) index = i
|
||||
}
|
||||
|
||||
const currentLevel = LEVELS[index]
|
||||
const nextLevel = LEVELS[index + 1]
|
||||
const current = Math.max(0, xp - currentLevel.xp)
|
||||
const target = nextLevel ? nextLevel.xp - currentLevel.xp : current || 1
|
||||
const progressPct = nextLevel
|
||||
? Math.min(100, Math.round((current / target) * 100))
|
||||
: 100
|
||||
|
||||
return {
|
||||
key: currentLevel.key,
|
||||
xp,
|
||||
levelIndex: index + 1,
|
||||
current,
|
||||
target,
|
||||
progressPct,
|
||||
nextKey: nextLevel?.key
|
||||
}
|
||||
}
|
||||
|
||||
function quest(
|
||||
id: WeeklyQuest['id'],
|
||||
current: number,
|
||||
target: number,
|
||||
tone: WeeklyQuest['tone']
|
||||
): WeeklyQuest {
|
||||
return {
|
||||
id,
|
||||
titleKey: `momentum.quest.${id}.title`,
|
||||
descKey: `momentum.quest.${id}.desc`,
|
||||
current,
|
||||
target,
|
||||
progressPct: Math.min(100, Math.round((current / target) * 100)),
|
||||
complete: current >= target,
|
||||
tone
|
||||
}
|
||||
}
|
||||
|
||||
export function computeMomentumSummary({
|
||||
history,
|
||||
exercises,
|
||||
challenges,
|
||||
now = Date.now()
|
||||
}: {
|
||||
history: HistoryEntry[]
|
||||
exercises: Exercise[]
|
||||
challenges: Challenge[]
|
||||
now?: number
|
||||
}): MomentumSummary {
|
||||
const exercisesById = new Map(
|
||||
exercises.map((exercise) => [exercise.id, exercise])
|
||||
)
|
||||
const today = dayKey(now)
|
||||
const weekStart = startOfWeek(now).getTime()
|
||||
|
||||
let totalReps = 0
|
||||
let todayReps = 0
|
||||
let weekReps = 0
|
||||
let matchRepsToday = 0
|
||||
let matchRepsWeek = 0
|
||||
let matchEntriesToday = 0
|
||||
let matchEntriesWeek = 0
|
||||
let lastMatchAt: number | undefined
|
||||
const allActiveDays = new Set<string>()
|
||||
const weekActiveDays = new Set<string>()
|
||||
|
||||
for (const entry of history) {
|
||||
if (entry.action !== 'done') continue
|
||||
|
||||
const reps = entryReps(entry, exercisesById)
|
||||
const key = dayKey(entry.ts)
|
||||
const inWeek = entry.ts >= weekStart && entry.ts <= now
|
||||
const match = isMatchEntry(entry)
|
||||
|
||||
totalReps += reps
|
||||
allActiveDays.add(key)
|
||||
|
||||
if (key === today) todayReps += reps
|
||||
if (inWeek) {
|
||||
weekReps += reps
|
||||
weekActiveDays.add(key)
|
||||
}
|
||||
|
||||
if (match) {
|
||||
if (lastMatchAt === undefined || entry.ts > lastMatchAt) {
|
||||
lastMatchAt = entry.ts
|
||||
}
|
||||
if (key === today) {
|
||||
matchEntriesToday++
|
||||
matchRepsToday += reps
|
||||
}
|
||||
if (inWeek) {
|
||||
matchEntriesWeek++
|
||||
matchRepsWeek += reps
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const activeRules = challenges.filter((challenge) => challenge.enabled).length
|
||||
const xp = totalReps + allActiveDays.size * 50 + matchEntriesWeek * 25
|
||||
const weeklyQuests: WeeklyQuest[] = [
|
||||
quest('week_rhythm', weekActiveDays.size, 5, 'success'),
|
||||
quest('week_reps', weekReps, 1000, 'accent'),
|
||||
quest('today_anchor', todayReps > 0 ? 1 : 0, 1, 'info')
|
||||
]
|
||||
|
||||
if (activeRules > 0) {
|
||||
weeklyQuests.splice(
|
||||
2,
|
||||
0,
|
||||
quest('match_debt', matchEntriesWeek, 3, 'warning')
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
level: computeLevel(xp),
|
||||
weeklyQuests,
|
||||
gameDebt: {
|
||||
activeRules,
|
||||
matchRepsToday,
|
||||
matchRepsWeek,
|
||||
matchEntriesToday,
|
||||
matchEntriesWeek,
|
||||
lastMatchAt
|
||||
},
|
||||
weekReps,
|
||||
weekActiveDays: weekActiveDays.size,
|
||||
todayReps
|
||||
}
|
||||
}
|
||||
@@ -11,7 +11,10 @@ import {
|
||||
CalendarCheck,
|
||||
Target,
|
||||
RotateCcw,
|
||||
Check
|
||||
Check,
|
||||
Trophy,
|
||||
Swords,
|
||||
BadgeCheck
|
||||
} from 'lucide-react'
|
||||
import { useAppStore } from '../store/appStore'
|
||||
import { ExerciseCard } from '../components/ExerciseCard'
|
||||
@@ -40,6 +43,11 @@ import {
|
||||
repsDoneTodayForExercise,
|
||||
todayKey
|
||||
} from '../lib/history'
|
||||
import {
|
||||
computeMomentumSummary,
|
||||
type MomentumSummary,
|
||||
type WeeklyQuest
|
||||
} from '../lib/momentum'
|
||||
|
||||
export default function Dashboard(): JSX.Element {
|
||||
const state = useAppStore((s) => s.state)
|
||||
@@ -54,6 +62,7 @@ export default function Dashboard(): JSX.Element {
|
||||
// the parent re-renders even when nothing changed.
|
||||
const exercises = useMemo(() => state?.exercises ?? [], [state?.exercises])
|
||||
const meals = useMemo(() => state?.meals ?? [], [state?.meals])
|
||||
const challenges = useMemo(() => state?.challenges ?? [], [state?.challenges])
|
||||
const settings = state?.settings
|
||||
const [planActionKey, setPlanActionKey] = useState<string | null>(null)
|
||||
|
||||
@@ -129,6 +138,10 @@ export default function Dashboard(): JSX.Element {
|
||||
void ticks
|
||||
return computeTodayPlan({ exercises, meals, history })
|
||||
}, [exercises, meals, history, ticks])
|
||||
const momentum = useMemo(
|
||||
() => computeMomentumSummary({ history, exercises, challenges }),
|
||||
[history, exercises, challenges]
|
||||
)
|
||||
|
||||
const paused = !settings?.globalEnabled
|
||||
|
||||
@@ -327,6 +340,14 @@ export default function Dashboard(): JSX.Element {
|
||||
onItemDone={(item) => void handlePlanItemDone(item)}
|
||||
/>
|
||||
|
||||
<MomentumPanel
|
||||
momentum={momentum}
|
||||
gamesLive={gamesLive}
|
||||
gamesEnabledButNotLive={gamesEnabledButNotLive}
|
||||
lang={lang}
|
||||
t={t}
|
||||
/>
|
||||
|
||||
{history.length > 0 && (
|
||||
<div className="mb-8 space-y-3">
|
||||
<HistoryHeatmap history={history} exercises={exercises} />
|
||||
@@ -393,6 +414,238 @@ export default function Dashboard(): JSX.Element {
|
||||
)
|
||||
}
|
||||
|
||||
function MomentumPanel({
|
||||
momentum,
|
||||
gamesLive,
|
||||
gamesEnabledButNotLive,
|
||||
lang,
|
||||
t
|
||||
}: {
|
||||
momentum: MomentumSummary
|
||||
gamesLive: boolean
|
||||
gamesEnabledButNotLive: boolean
|
||||
lang: Language
|
||||
t: TFn
|
||||
}): JSX.Element {
|
||||
const gameStatus = gamesLive
|
||||
? t('momentum.game.live')
|
||||
: gamesEnabledButNotLive
|
||||
? t('momentum.game.setup')
|
||||
: t('momentum.game.off')
|
||||
|
||||
return (
|
||||
<section className="mb-8 grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr_0.95fr] gap-4">
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-warning text-white grid place-items-center shrink-0">
|
||||
<Trophy size={19} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/55 font-semibold">
|
||||
{t('momentum.level.title')}
|
||||
</div>
|
||||
<div className="font-display text-[22px] font-bold leading-tight truncate">
|
||||
{t(momentum.level.key)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-5 flex items-end justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-[12px] text-text/55 font-semibold">
|
||||
{t('momentum.level.number', {
|
||||
n: momentum.level.levelIndex
|
||||
})}
|
||||
</div>
|
||||
<div className="font-mono-num text-[28px] leading-none font-bold">
|
||||
{momentum.level.xp}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[13px] text-text/60 text-right">
|
||||
{momentum.level.nextKey
|
||||
? t('momentum.level.next', {
|
||||
name: t(momentum.level.nextKey),
|
||||
n: momentum.level.target - momentum.level.current
|
||||
})
|
||||
: t('momentum.level.max')}
|
||||
</div>
|
||||
</div>
|
||||
<ProgressBar pct={momentum.level.progressPct} tone="warning" />
|
||||
</div>
|
||||
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="flex items-start justify-between gap-3 mb-3">
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/55 font-semibold">
|
||||
{t('momentum.week.kicker')}
|
||||
</div>
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
{t('momentum.week.title')}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text-[12px] text-text/55 font-mono-num font-semibold shrink-0">
|
||||
{t('momentum.week.summary', {
|
||||
days: momentum.weekActiveDays,
|
||||
reps: momentum.weekReps
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-hairline/35">
|
||||
{momentum.weeklyQuests.map((quest) => (
|
||||
<WeeklyQuestRow key={quest.id} quest={quest} t={t} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-surface rounded-3xl p-5 shadow-card dark:ring-0.5 dark:ring-hairline/30 min-w-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-accent-2 text-white grid place-items-center shrink-0">
|
||||
<Swords size={19} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="text-[13px] text-text/55 font-semibold">
|
||||
{t('momentum.game.kicker')}
|
||||
</div>
|
||||
<h2 className="font-display text-[22px] font-bold leading-tight">
|
||||
{t('momentum.game.title')}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 rounded-2xl bg-surface-2 p-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="text-[13px] text-text/60 font-semibold">
|
||||
{t('momentum.game.status')}
|
||||
</div>
|
||||
<div
|
||||
className={[
|
||||
'text-[12px] px-2.5 py-1 rounded-full font-semibold',
|
||||
gamesLive
|
||||
? 'bg-success/12 text-success'
|
||||
: gamesEnabledButNotLive
|
||||
? 'bg-warning/12 text-warning'
|
||||
: 'bg-text/10 text-text/55'
|
||||
].join(' ')}
|
||||
>
|
||||
{gameStatus}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{momentum.gameDebt.activeRules > 0 ? (
|
||||
<>
|
||||
<div className="mt-4 grid grid-cols-2 gap-3">
|
||||
<GameDebtStat
|
||||
label={t('momentum.game.today')}
|
||||
value={t('momentum.game.reps', {
|
||||
n: momentum.gameDebt.matchRepsToday
|
||||
})}
|
||||
hint={t('momentum.game.entries', {
|
||||
n: momentum.gameDebt.matchEntriesToday
|
||||
})}
|
||||
/>
|
||||
<GameDebtStat
|
||||
label={t('momentum.game.week')}
|
||||
value={t('momentum.game.reps', {
|
||||
n: momentum.gameDebt.matchRepsWeek
|
||||
})}
|
||||
hint={t('momentum.game.entries', {
|
||||
n: momentum.gameDebt.matchEntriesWeek
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4 text-[13px] text-text/62 leading-relaxed">
|
||||
{momentum.gameDebt.lastMatchAt
|
||||
? t('momentum.game.last', {
|
||||
date: new Date(
|
||||
momentum.gameDebt.lastMatchAt
|
||||
).toLocaleDateString(lang === 'en' ? 'en-US' : 'ru-RU', {
|
||||
day: 'numeric',
|
||||
month: 'short'
|
||||
})
|
||||
})
|
||||
: t('momentum.game.no_matches')}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="mt-4 text-[14px] text-text/65 leading-relaxed">
|
||||
{t('momentum.game.no_rules')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
function WeeklyQuestRow({
|
||||
quest,
|
||||
t
|
||||
}: {
|
||||
quest: WeeklyQuest
|
||||
t: TFn
|
||||
}): JSX.Element {
|
||||
const IconCmp =
|
||||
quest.id === 'match_debt'
|
||||
? Swords
|
||||
: quest.id === 'today_anchor'
|
||||
? BadgeCheck
|
||||
: quest.id === 'week_rhythm'
|
||||
? Flame
|
||||
: TrendingUp
|
||||
|
||||
return (
|
||||
<div className="py-3 flex items-center gap-3 min-w-0">
|
||||
<div
|
||||
className={[
|
||||
'w-9 h-9 rounded-xl grid place-items-center text-white shrink-0',
|
||||
quest.complete
|
||||
? 'bg-success'
|
||||
: quest.tone === 'warning'
|
||||
? 'bg-warning'
|
||||
: quest.tone === 'info'
|
||||
? 'bg-info'
|
||||
: 'bg-accent'
|
||||
].join(' ')}
|
||||
>
|
||||
<IconCmp size={16} strokeWidth={2.5} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="font-semibold text-[15px] truncate">
|
||||
{t(quest.titleKey)}
|
||||
</div>
|
||||
<div className="font-mono-num text-[12px] text-text/55 shrink-0">
|
||||
{quest.current}/{quest.target}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-[12px] text-text/55 mt-1 truncate">
|
||||
{quest.complete ? t('momentum.quest.complete') : t(quest.descKey)}
|
||||
</div>
|
||||
<ProgressBar pct={quest.progressPct} tone={quest.tone} compact />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function GameDebtStat({
|
||||
label,
|
||||
value,
|
||||
hint
|
||||
}: {
|
||||
label: string
|
||||
value: string
|
||||
hint: string
|
||||
}): JSX.Element {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<div className="text-[12px] text-text/55 font-semibold">{label}</div>
|
||||
<div className="font-mono-num text-[20px] font-bold leading-tight mt-1 truncate">
|
||||
{value}
|
||||
</div>
|
||||
<div className="text-[11px] text-text/50 mt-1 truncate">{hint}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function TodayPlanPanel({
|
||||
plan,
|
||||
paused,
|
||||
@@ -650,17 +903,33 @@ function PlanListRow({
|
||||
|
||||
function ProgressBar({
|
||||
pct,
|
||||
tone
|
||||
tone,
|
||||
compact = false
|
||||
}: {
|
||||
pct: number
|
||||
tone: 'accent' | 'success'
|
||||
tone: 'accent' | 'success' | 'warning' | 'info'
|
||||
compact?: boolean
|
||||
}): JSX.Element {
|
||||
const toneClass =
|
||||
tone === 'accent'
|
||||
? 'bg-accent'
|
||||
: tone === 'success'
|
||||
? 'bg-success'
|
||||
: tone === 'warning'
|
||||
? 'bg-warning'
|
||||
: 'bg-info'
|
||||
|
||||
return (
|
||||
<div className="mt-3 h-2 rounded-full bg-hairline/35 overflow-hidden">
|
||||
<div
|
||||
className={[
|
||||
'rounded-full bg-hairline/35 overflow-hidden',
|
||||
compact ? 'mt-2 h-1.5' : 'mt-3 h-2'
|
||||
].join(' ')}
|
||||
>
|
||||
<div
|
||||
className={[
|
||||
'h-full rounded-full transition-all duration-300',
|
||||
tone === 'accent' ? 'bg-accent' : 'bg-success'
|
||||
toneClass
|
||||
].join(' ')}
|
||||
style={{ width: `${pct}%` }}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user