fix(P2): celebration, TTS delay, match-close confirm, tracking badge
P2 #9 — Achievement unlock celebration. AchievementsCard сравнивает текущие unlocked с persisted set'ом в localStorage. Новые играют scale+accent-glow анимацию 2.8 сек (1.4с × 2 повтора). После добавляются в celebrated — при следующем заходе не подпрыгивают. P2 #10 — Match summary close confirm. Если в Match Summary остались незакрытые челленджи, при close через X / Esc / btn — native confirm с количеством остатка. Пользователь не «пролетает» окно случайно. P2 #11 — TTS delay 800ms. Дикторский голос ждёт 800мс прежде чем проговорить — пользователь успевает decrement stepper если хочет сделать меньше планового. Иначе голос произносит планируемые reps уже когда юзер изменил цифру. P2 #13 — Tracking badge точность. Раньше зелёный если просто `gamesEnabled[id]`. Теперь зелёный только если live (enabled + integrationActive + launchOptionStatus='applied'). Введён tone 'warning' для «включена, но launch option ещё queued» с подсказкой «закрой Steam и снова открой». Dashboard подписывается на onGamesChanged + первый listGames на mount.
This commit is contained in:
@@ -28,6 +28,13 @@ type Mode =
|
|||||||
| { kind: 'exercise'; exercise: Exercise }
|
| { kind: 'exercise'; exercise: Exercise }
|
||||||
| { kind: 'match'; summary: MatchSummary; done: Set<string> }
|
| { kind: 'match'; summary: MatchSummary; done: Set<string> }
|
||||||
|
|
||||||
|
/** Минимальный нативный confirm. В reminder-окне нет места для модалки,
|
||||||
|
* проще использовать встроенный диалог. */
|
||||||
|
function nativeConfirm(message: string): boolean {
|
||||||
|
// eslint-disable-next-line no-alert -- reminder window не имеет своей Modal-обвязки
|
||||||
|
return window.confirm(message)
|
||||||
|
}
|
||||||
|
|
||||||
export default function ReminderApp(): JSX.Element {
|
export default function ReminderApp(): JSX.Element {
|
||||||
const [mode, setMode] = useState<Mode>({ kind: 'idle' })
|
const [mode, setMode] = useState<Mode>({ kind: 'idle' })
|
||||||
const [settings, setSettings] = useState<Settings | null>(null)
|
const [settings, setSettings] = useState<Settings | null>(null)
|
||||||
@@ -45,14 +52,17 @@ export default function ReminderApp(): JSX.Element {
|
|||||||
const s = settingsRef.current
|
const s = settingsRef.current
|
||||||
if (s?.soundEnabled) playBeep()
|
if (s?.soundEnabled) playBeep()
|
||||||
if (s?.voicePromptsEnabled) {
|
if (s?.voicePromptsEnabled) {
|
||||||
// «{exercise.name}, {n} раз/раза/раз». Простая локальная фраза без
|
// Задержка 800ms даёт пользователю шанс decrement'нуть stepper до
|
||||||
// ключа в dict — короткая команда, не нуждается в полном переводе.
|
// фактического количества — TTS прозвучит уже под реальную цифру,
|
||||||
|
// если успел нажать -. Иначе скажет планируемые reps.
|
||||||
const lang = s.language ?? 'ru'
|
const lang = s.language ?? 'ru'
|
||||||
const phrase =
|
setTimeout(() => {
|
||||||
lang === 'ru'
|
const phrase =
|
||||||
? `${ex.name}. ${ex.reps} ${repWordRu(ex.reps)}`
|
lang === 'ru'
|
||||||
: `${ex.name}. ${ex.reps} ${ex.reps === 1 ? 'rep' : 'reps'}`
|
? `${ex.name}. ${ex.reps} ${repWordRu(ex.reps)}`
|
||||||
speak(phrase, lang)
|
: `${ex.name}. ${ex.reps} ${ex.reps === 1 ? 'rep' : 'reps'}`
|
||||||
|
speak(phrase, lang)
|
||||||
|
}, 800)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const u2 = window.api.onMatchEnd((summary) => {
|
const u2 = window.api.onMatchEnd((summary) => {
|
||||||
@@ -88,6 +98,27 @@ export default function ReminderApp(): JSX.Element {
|
|||||||
}, [mode.kind])
|
}, [mode.kind])
|
||||||
|
|
||||||
function close(): void {
|
function close(): void {
|
||||||
|
// Если в Match Summary остались незакрытые челленджи — подтверждаем,
|
||||||
|
// чтобы пользователь не «пролетел» окно по привычке и не потерял
|
||||||
|
// мотивацию (и метрики стрик/today_done).
|
||||||
|
if (mode.kind === 'match') {
|
||||||
|
const remaining = mode.summary.results.filter(
|
||||||
|
(r) => !mode.done.has(r.challengeId)
|
||||||
|
)
|
||||||
|
if (remaining.length > 0) {
|
||||||
|
const lang = settings?.language ?? 'ru'
|
||||||
|
const reps = remaining.reduce((s, r) => s + r.reps, 0)
|
||||||
|
const msg =
|
||||||
|
lang === 'ru'
|
||||||
|
? `Осталось ${remaining.length} ${
|
||||||
|
remaining.length === 1 ? 'челлендж' : 'челленджей'
|
||||||
|
} · ${reps} повторений. Закрыть окно?`
|
||||||
|
: `${remaining.length} ${
|
||||||
|
remaining.length === 1 ? 'challenge' : 'challenges'
|
||||||
|
} left · ${reps} reps. Close anyway?`
|
||||||
|
if (!nativeConfirm(msg)) return
|
||||||
|
}
|
||||||
|
}
|
||||||
setMode({ kind: 'idle' })
|
setMode({ kind: 'idle' })
|
||||||
window.api.reminderClose()
|
window.api.reminderClose()
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useMemo } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
import { Award, Activity, Flame, Sparkles, TrendingUp, Lock } from 'lucide-react'
|
import { Award, Activity, Flame, Sparkles, TrendingUp, Lock } from 'lucide-react'
|
||||||
import type { Exercise, HistoryEntry } from '@shared/types'
|
import type { Exercise, HistoryEntry } from '@shared/types'
|
||||||
import {
|
import {
|
||||||
@@ -7,6 +8,27 @@ import {
|
|||||||
} from '../lib/achievements'
|
} from '../lib/achievements'
|
||||||
import { useT } from '../i18n'
|
import { useT } from '../i18n'
|
||||||
|
|
||||||
|
const CELEBRATED_KEY = 'laude:celebratedAchievements'
|
||||||
|
|
||||||
|
function loadCelebrated(): Set<string> {
|
||||||
|
try {
|
||||||
|
const raw = localStorage.getItem(CELEBRATED_KEY)
|
||||||
|
if (!raw) return new Set()
|
||||||
|
const parsed = JSON.parse(raw)
|
||||||
|
return Array.isArray(parsed) ? new Set(parsed) : new Set()
|
||||||
|
} catch {
|
||||||
|
return new Set()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveCelebrated(set: Set<string>): void {
|
||||||
|
try {
|
||||||
|
localStorage.setItem(CELEBRATED_KEY, JSON.stringify(Array.from(set)))
|
||||||
|
} catch {
|
||||||
|
/* localStorage может быть отключён — ничего страшного, просто будет celebrate каждый раз */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const ICON_BY_NAME = {
|
const ICON_BY_NAME = {
|
||||||
Activity,
|
Activity,
|
||||||
Flame,
|
Flame,
|
||||||
@@ -32,6 +54,32 @@ export function AchievementsCard({ history, exercises }: Props): JSX.Element {
|
|||||||
[history, exercises]
|
[history, exercises]
|
||||||
)
|
)
|
||||||
|
|
||||||
|
// Достижения, которые в этом mount пользователь впервые увидел unlocked
|
||||||
|
// (т.е. не были в localStorage до этого). Для них играем pulse-анимацию.
|
||||||
|
// После анимации помечаем как celebrated, чтобы при следующем рендере
|
||||||
|
// они уже не подпрыгивали.
|
||||||
|
const [freshlyUnlocked, setFreshlyUnlocked] = useState<Set<string>>(
|
||||||
|
() => new Set()
|
||||||
|
)
|
||||||
|
useEffect(() => {
|
||||||
|
const celebrated = loadCelebrated()
|
||||||
|
const fresh = new Set<string>()
|
||||||
|
for (const a of achievements) {
|
||||||
|
if (a.unlocked && !celebrated.has(a.def.id)) {
|
||||||
|
fresh.add(a.def.id)
|
||||||
|
celebrated.add(a.def.id)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (fresh.size > 0) {
|
||||||
|
setFreshlyUnlocked(fresh)
|
||||||
|
saveCelebrated(celebrated)
|
||||||
|
// Снимаем «свежесть» через 5 сек чтобы pulse не крутился вечно.
|
||||||
|
const t = setTimeout(() => setFreshlyUnlocked(new Set()), 5_000)
|
||||||
|
return () => clearTimeout(t)
|
||||||
|
}
|
||||||
|
return undefined
|
||||||
|
}, [achievements])
|
||||||
|
|
||||||
const unlocked = achievements.filter((a) => a.unlocked)
|
const unlocked = achievements.filter((a) => a.unlocked)
|
||||||
const locked = achievements.filter((a) => !a.unlocked)
|
const locked = achievements.filter((a) => !a.unlocked)
|
||||||
// Сортируем locked по близости к unlock'у — чтобы «осталось 12»
|
// Сортируем locked по близости к unlock'у — чтобы «осталось 12»
|
||||||
@@ -67,14 +115,24 @@ export function AchievementsCard({ history, exercises }: Props): JSX.Element {
|
|||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2">
|
||||||
{visible.map((a) => (
|
{visible.map((a) => (
|
||||||
<Badge key={a.def.id} a={a} />
|
<Badge
|
||||||
|
key={a.def.id}
|
||||||
|
a={a}
|
||||||
|
fresh={freshlyUnlocked.has(a.def.id)}
|
||||||
|
/>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function Badge({ a }: { a: AchievementProgress }): JSX.Element {
|
function Badge({
|
||||||
|
a,
|
||||||
|
fresh
|
||||||
|
}: {
|
||||||
|
a: AchievementProgress
|
||||||
|
fresh: boolean
|
||||||
|
}): JSX.Element {
|
||||||
const { t } = useT()
|
const { t } = useT()
|
||||||
const IconCmp = ICON_BY_NAME[a.def.icon as keyof typeof ICON_BY_NAME] ?? Award
|
const IconCmp = ICON_BY_NAME[a.def.icon as keyof typeof ICON_BY_NAME] ?? Award
|
||||||
const pct = Math.min(100, Math.round((a.current / a.target) * 100))
|
const pct = Math.min(100, Math.round((a.current / a.target) * 100))
|
||||||
@@ -86,7 +144,28 @@ function Badge({ a }: { a: AchievementProgress }): JSX.Element {
|
|||||||
}[a.def.tone]
|
}[a.def.tone]
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<motion.div
|
||||||
|
animate={
|
||||||
|
fresh
|
||||||
|
? {
|
||||||
|
scale: [1, 1.08, 1],
|
||||||
|
boxShadow: [
|
||||||
|
'0 0 0 0 rgb(var(--accent) / 0)',
|
||||||
|
'0 0 0 6px rgb(var(--accent) / 0.4)',
|
||||||
|
'0 0 0 0 rgb(var(--accent) / 0)'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
transition={
|
||||||
|
fresh
|
||||||
|
? {
|
||||||
|
duration: 1.4,
|
||||||
|
repeat: 2,
|
||||||
|
ease: 'easeInOut'
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
className={[
|
className={[
|
||||||
'rounded-xl p-2.5 transition-opacity',
|
'rounded-xl p-2.5 transition-opacity',
|
||||||
a.unlocked ? 'bg-surface-2' : 'bg-surface-2 opacity-55'
|
a.unlocked ? 'bg-surface-2' : 'bg-surface-2 opacity-55'
|
||||||
@@ -123,6 +202,6 @@ function Badge({ a }: { a: AchievementProgress }): JSX.Element {
|
|||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</motion.div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -74,8 +74,11 @@ export const ru: Dict = {
|
|||||||
'dashboard.stat.tracking': 'Трекинг матчей',
|
'dashboard.stat.tracking': 'Трекинг матчей',
|
||||||
'dashboard.stat.tracking.on': 'On',
|
'dashboard.stat.tracking.on': 'On',
|
||||||
'dashboard.stat.tracking.off': 'Off',
|
'dashboard.stat.tracking.off': 'Off',
|
||||||
|
'dashboard.stat.tracking.pending': 'Setup',
|
||||||
'dashboard.stat.tracking.subtitle_on': 'в реальном времени',
|
'dashboard.stat.tracking.subtitle_on': 'в реальном времени',
|
||||||
'dashboard.stat.tracking.subtitle_off': 'выключен',
|
'dashboard.stat.tracking.subtitle_off': 'выключен',
|
||||||
|
'dashboard.stat.tracking.subtitle_pending':
|
||||||
|
'нужно закрыть Steam и снова открыть',
|
||||||
'dashboard.paused.title': 'Напоминания на паузе',
|
'dashboard.paused.title': 'Напоминания на паузе',
|
||||||
'dashboard.paused.hint': 'Возобнови, чтобы продолжить отсчёт',
|
'dashboard.paused.hint': 'Возобнови, чтобы продолжить отсчёт',
|
||||||
'dashboard.meeting.title': 'Не дёргаем — ты на встрече',
|
'dashboard.meeting.title': 'Не дёргаем — ты на встрече',
|
||||||
@@ -401,8 +404,10 @@ export const en: Dict = {
|
|||||||
'dashboard.stat.tracking': 'Match tracking',
|
'dashboard.stat.tracking': 'Match tracking',
|
||||||
'dashboard.stat.tracking.on': 'On',
|
'dashboard.stat.tracking.on': 'On',
|
||||||
'dashboard.stat.tracking.off': 'Off',
|
'dashboard.stat.tracking.off': 'Off',
|
||||||
|
'dashboard.stat.tracking.pending': 'Setup',
|
||||||
'dashboard.stat.tracking.subtitle_on': 'real-time',
|
'dashboard.stat.tracking.subtitle_on': 'real-time',
|
||||||
'dashboard.stat.tracking.subtitle_off': 'disabled',
|
'dashboard.stat.tracking.subtitle_off': 'disabled',
|
||||||
|
'dashboard.stat.tracking.subtitle_pending': 'close & reopen Steam',
|
||||||
'dashboard.paused.title': 'Reminders paused',
|
'dashboard.paused.title': 'Reminders paused',
|
||||||
'dashboard.meeting.title': "You're in a meeting — won't interrupt",
|
'dashboard.meeting.title': "You're in a meeting — won't interrupt",
|
||||||
'dashboard.meeting.hint':
|
'dashboard.meeting.hint':
|
||||||
|
|||||||
@@ -16,7 +16,7 @@ import { HistoryHeatmap } from '../components/HistoryHeatmap'
|
|||||||
import { AchievementsCard } from '../components/AchievementsCard'
|
import { AchievementsCard } from '../components/AchievementsCard'
|
||||||
import { Button } from '../components/ui/Button'
|
import { Button } from '../components/ui/Button'
|
||||||
import { ConfirmModal } from '../components/ui/ConfirmModal'
|
import { ConfirmModal } from '../components/ui/ConfirmModal'
|
||||||
import type { Exercise, HistoryEntry } from '@shared/types'
|
import type { Exercise, GameStatus, HistoryEntry } from '@shared/types'
|
||||||
import { formatCountdown } from '../lib/format'
|
import { formatCountdown } from '../lib/format'
|
||||||
import { useT } from '../i18n'
|
import { useT } from '../i18n'
|
||||||
import {
|
import {
|
||||||
@@ -39,7 +39,26 @@ export default function Dashboard(): JSX.Element {
|
|||||||
// the parent re-renders even when nothing changed.
|
// the parent re-renders even when nothing changed.
|
||||||
const exercises = useMemo(() => state?.exercises ?? [], [state?.exercises])
|
const exercises = useMemo(() => state?.exercises ?? [], [state?.exercises])
|
||||||
const settings = state?.settings
|
const settings = state?.settings
|
||||||
const gamesEnabled = Object.values(state?.gamesEnabled ?? {}).some(Boolean)
|
|
||||||
|
// Игры: запрашиваем реальный статус (integrationActive + launchOption
|
||||||
|
// applied), а не просто `state.gamesEnabled`. Без этого badge показывал
|
||||||
|
// success-зелёный даже когда launch option ещё «queued» (Steam перезапи-
|
||||||
|
// сывает) — пользователь думал что GSI работает, а fires не приходили.
|
||||||
|
const [games, setGames] = useState<GameStatus[]>([])
|
||||||
|
useEffect(() => {
|
||||||
|
void window.api.listGames().then(setGames)
|
||||||
|
return window.api.onGamesChanged(setGames)
|
||||||
|
}, [])
|
||||||
|
const gamesLive = games.some(
|
||||||
|
(g) =>
|
||||||
|
g.enabled &&
|
||||||
|
g.integrationActive &&
|
||||||
|
g.launchOptionStatus === 'applied'
|
||||||
|
)
|
||||||
|
// «Включена, но не готова» — отдельное состояние, в badge другой tone.
|
||||||
|
const gamesEnabledButNotLive = games.some(
|
||||||
|
(g) => g.enabled && (!g.integrationActive || g.launchOptionStatus !== 'applied')
|
||||||
|
)
|
||||||
|
|
||||||
// Local history mirror; reloaded only when exercises change (not on every
|
// Local history mirror; reloaded only when exercises change (not on every
|
||||||
// tick or settings tweak — those don't affect history). When ticks/settings
|
// tick or settings tweak — those don't affect history). When ticks/settings
|
||||||
@@ -183,23 +202,29 @@ export default function Dashboard(): JSX.Element {
|
|||||||
icon={<Activity size={14} strokeWidth={2.6} />}
|
icon={<Activity size={14} strokeWidth={2.6} />}
|
||||||
/>
|
/>
|
||||||
<HeroStat
|
<HeroStat
|
||||||
tone={gamesEnabled ? 'success' : 'muted'}
|
tone={
|
||||||
|
gamesLive ? 'success' : gamesEnabledButNotLive ? 'warning' : 'muted'
|
||||||
|
}
|
||||||
label={t('dashboard.stat.tracking')}
|
label={t('dashboard.stat.tracking')}
|
||||||
value={
|
value={
|
||||||
gamesEnabled
|
gamesLive
|
||||||
? t('dashboard.stat.tracking.on')
|
? t('dashboard.stat.tracking.on')
|
||||||
: t('dashboard.stat.tracking.off')
|
: gamesEnabledButNotLive
|
||||||
|
? t('dashboard.stat.tracking.pending')
|
||||||
|
: t('dashboard.stat.tracking.off')
|
||||||
}
|
}
|
||||||
subvalue={
|
subvalue={
|
||||||
gamesEnabled
|
gamesLive
|
||||||
? t('dashboard.stat.tracking.subtitle_on')
|
? t('dashboard.stat.tracking.subtitle_on')
|
||||||
: t('dashboard.stat.tracking.subtitle_off')
|
: gamesEnabledButNotLive
|
||||||
|
? t('dashboard.stat.tracking.subtitle_pending')
|
||||||
|
: t('dashboard.stat.tracking.subtitle_off')
|
||||||
}
|
}
|
||||||
icon={
|
icon={
|
||||||
<span
|
<span
|
||||||
className={[
|
className={[
|
||||||
'w-1.5 h-1.5 rounded-full',
|
'w-1.5 h-1.5 rounded-full',
|
||||||
gamesEnabled ? 'bg-white' : 'bg-text/30'
|
gamesLive ? 'bg-white' : 'bg-text/30'
|
||||||
].join(' ')}
|
].join(' ')}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user