482 lines
17 KiB
TypeScript
482 lines
17 KiB
TypeScript
|
import { useEffect, useRef, useCallback, useState } from 'react'
|
|||
|
|
import { Link } from 'react-router-dom'
|
|||
|
|
import { Clock, Gamepad2, Plus, Trophy, Target, Loader2, ChevronDown, Timer, Play, Square } from 'lucide-react'
|
|||
|
|
import { useTrackingStore } from '../store/tracking'
|
|||
|
|
import { useAuthStore } from '../store/auth'
|
|||
|
|
import { useMarathonStore } from '../store/marathon'
|
|||
|
|
import { GlassCard } from '../components/ui/GlassCard'
|
|||
|
|
import { NeonButton } from '../components/ui/NeonButton'
|
|||
|
|
|
|||
|
|
function formatTime(ms: number): string {
|
|||
|
|
const seconds = Math.floor(ms / 1000)
|
|||
|
|
const minutes = Math.floor(seconds / 60)
|
|||
|
|
const hours = Math.floor(minutes / 60)
|
|||
|
|
|
|||
|
|
if (hours > 0) {
|
|||
|
|
const remainingMinutes = minutes % 60
|
|||
|
|
return `${hours}ч ${remainingMinutes}м`
|
|||
|
|
} else if (minutes > 0) {
|
|||
|
|
return `${minutes}м`
|
|||
|
|
} else {
|
|||
|
|
return `${seconds}с`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function formatMinutes(minutes: number): string {
|
|||
|
|
const hours = Math.floor(minutes / 60)
|
|||
|
|
const mins = minutes % 60
|
|||
|
|
|
|||
|
|
if (hours > 0) {
|
|||
|
|
return `${hours}ч ${mins}м`
|
|||
|
|
}
|
|||
|
|
return `${mins}м`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getDifficultyColor(difficulty: string): string {
|
|||
|
|
switch (difficulty) {
|
|||
|
|
case 'easy': return 'text-green-400'
|
|||
|
|
case 'medium': return 'text-yellow-400'
|
|||
|
|
case 'hard': return 'text-red-400'
|
|||
|
|
default: return 'text-gray-400'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getDifficultyLabel(difficulty: string): string {
|
|||
|
|
switch (difficulty) {
|
|||
|
|
case 'easy': return 'Легкий'
|
|||
|
|
case 'medium': return 'Средний'
|
|||
|
|
case 'hard': return 'Сложный'
|
|||
|
|
default: return difficulty
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function DashboardPage() {
|
|||
|
|
const { user } = useAuthStore()
|
|||
|
|
const { trackedGames, stats, currentGame, loadTrackedGames, updateStats } = useTrackingStore()
|
|||
|
|
const {
|
|||
|
|
marathons,
|
|||
|
|
selectedMarathonId,
|
|||
|
|
currentAssignment,
|
|||
|
|
isLoading,
|
|||
|
|
loadMarathons,
|
|||
|
|
selectMarathon,
|
|||
|
|
syncTime
|
|||
|
|
} = useMarathonStore()
|
|||
|
|
|
|||
|
|
// Monitoring state
|
|||
|
|
const [isMonitoring, setIsMonitoring] = useState(false)
|
|||
|
|
const [localSessionSeconds, setLocalSessionSeconds] = useState(0)
|
|||
|
|
|
|||
|
|
// Refs for time tracking sync
|
|||
|
|
const syncIntervalRef = useRef<NodeJS.Timeout | null>(null)
|
|||
|
|
const lastSyncedMinutesRef = useRef<number>(0)
|
|||
|
|
const sessionStartRef = useRef<number | null>(null)
|
|||
|
|
|
|||
|
|
// Check if we should track time: any tracked game is running + active assignment exists
|
|||
|
|
const isTrackingAssignment = !!(currentGame && currentAssignment && currentAssignment.status === 'active')
|
|||
|
|
|
|||
|
|
// Sync time to server
|
|||
|
|
const doSyncTime = useCallback(async () => {
|
|||
|
|
if (!currentAssignment || !isTrackingAssignment) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Calculate total minutes: previous tracked + current session
|
|||
|
|
const sessionDuration = sessionStartRef.current
|
|||
|
|
? Math.floor((Date.now() - sessionStartRef.current) / 60000)
|
|||
|
|
: 0
|
|||
|
|
const totalMinutes = currentAssignment.tracked_time_minutes + sessionDuration
|
|||
|
|
|
|||
|
|
if (totalMinutes !== lastSyncedMinutesRef.current && totalMinutes > 0) {
|
|||
|
|
console.log(`[Sync] Syncing ${totalMinutes} minutes for assignment ${currentAssignment.id}`)
|
|||
|
|
await syncTime(totalMinutes)
|
|||
|
|
lastSyncedMinutesRef.current = totalMinutes
|
|||
|
|
}
|
|||
|
|
}, [currentAssignment, isTrackingAssignment, syncTime])
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadTrackedGames()
|
|||
|
|
loadMarathons()
|
|||
|
|
|
|||
|
|
// Load monitoring status
|
|||
|
|
window.electronAPI.getMonitoringStatus().then(setIsMonitoring)
|
|||
|
|
|
|||
|
|
// Subscribe to tracking updates
|
|||
|
|
const unsubscribe = window.electronAPI.onTrackingUpdate((newStats) => {
|
|||
|
|
updateStats(newStats)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// Subscribe to game started event
|
|||
|
|
const unsubGameStarted = window.electronAPI.onGameStarted((gameName, _gameId) => {
|
|||
|
|
console.log(`[Game] Started: ${gameName}`)
|
|||
|
|
sessionStartRef.current = Date.now()
|
|||
|
|
setLocalSessionSeconds(0)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// Subscribe to game stopped event
|
|||
|
|
const unsubGameStopped = window.electronAPI.onGameStopped((gameName, _duration) => {
|
|||
|
|
console.log(`[Game] Stopped: ${gameName}`)
|
|||
|
|
sessionStartRef.current = null
|
|||
|
|
setLocalSessionSeconds(0)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// Get initial stats
|
|||
|
|
window.electronAPI.getTrackingStats().then(updateStats)
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
unsubscribe()
|
|||
|
|
unsubGameStarted()
|
|||
|
|
unsubGameStopped()
|
|||
|
|
}
|
|||
|
|
}, [loadTrackedGames, loadMarathons, updateStats])
|
|||
|
|
|
|||
|
|
// Setup sync interval and local timer when tracking
|
|||
|
|
useEffect(() => {
|
|||
|
|
let localTimerInterval: NodeJS.Timeout | null = null
|
|||
|
|
|
|||
|
|
if (isTrackingAssignment) {
|
|||
|
|
// Start session if not already started
|
|||
|
|
if (!sessionStartRef.current) {
|
|||
|
|
sessionStartRef.current = Date.now()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Sync immediately when game starts
|
|||
|
|
doSyncTime()
|
|||
|
|
|
|||
|
|
// Setup periodic sync every 60 seconds
|
|||
|
|
syncIntervalRef.current = setInterval(() => {
|
|||
|
|
doSyncTime()
|
|||
|
|
}, 60000)
|
|||
|
|
|
|||
|
|
// Update local timer every second for UI
|
|||
|
|
localTimerInterval = setInterval(() => {
|
|||
|
|
if (sessionStartRef.current) {
|
|||
|
|
setLocalSessionSeconds(Math.floor((Date.now() - sessionStartRef.current) / 1000))
|
|||
|
|
}
|
|||
|
|
}, 1000)
|
|||
|
|
|
|||
|
|
} else {
|
|||
|
|
// Do final sync when game stops
|
|||
|
|
if (syncIntervalRef.current) {
|
|||
|
|
doSyncTime()
|
|||
|
|
clearInterval(syncIntervalRef.current)
|
|||
|
|
syncIntervalRef.current = null
|
|||
|
|
sessionStartRef.current = null
|
|||
|
|
}
|
|||
|
|
setLocalSessionSeconds(0)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return () => {
|
|||
|
|
if (syncIntervalRef.current) {
|
|||
|
|
clearInterval(syncIntervalRef.current)
|
|||
|
|
syncIntervalRef.current = null
|
|||
|
|
}
|
|||
|
|
if (localTimerInterval) {
|
|||
|
|
clearInterval(localTimerInterval)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}, [isTrackingAssignment, doSyncTime])
|
|||
|
|
|
|||
|
|
// Toggle monitoring
|
|||
|
|
const toggleMonitoring = async () => {
|
|||
|
|
if (isMonitoring) {
|
|||
|
|
await window.electronAPI.stopMonitoring()
|
|||
|
|
setIsMonitoring(false)
|
|||
|
|
} else {
|
|||
|
|
await window.electronAPI.startMonitoring()
|
|||
|
|
setIsMonitoring(true)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const todayTime = stats?.totalTimeToday || 0
|
|||
|
|
const weekTime = stats?.totalTimeWeek || 0
|
|||
|
|
|
|||
|
|
const selectedMarathon = marathons.find(m => m.id === selectedMarathonId)
|
|||
|
|
|
|||
|
|
const renderCurrentChallenge = () => {
|
|||
|
|
if (isLoading) {
|
|||
|
|
return (
|
|||
|
|
<div className="flex items-center justify-center py-4">
|
|||
|
|
<Loader2 className="w-6 h-6 text-neon-500 animate-spin" />
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (marathons.length === 0) {
|
|||
|
|
return (
|
|||
|
|
<p className="text-gray-400 text-sm">
|
|||
|
|
Нет активных марафонов. Присоединитесь к марафону на сайте.
|
|||
|
|
</p>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!currentAssignment) {
|
|||
|
|
return (
|
|||
|
|
<p className="text-gray-400 text-sm">
|
|||
|
|
Нет активного задания. Крутите колесо на сайте!
|
|||
|
|
</p>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const assignment = currentAssignment
|
|||
|
|
|
|||
|
|
// Playthrough assignment
|
|||
|
|
if (assignment.is_playthrough && assignment.playthrough_info) {
|
|||
|
|
// Use localSessionSeconds for live display (updates every second)
|
|||
|
|
const sessionSeconds = isTrackingAssignment ? localSessionSeconds : 0
|
|||
|
|
const totalSeconds = (assignment.tracked_time_minutes * 60) + sessionSeconds
|
|||
|
|
const totalMinutes = Math.floor(totalSeconds / 60)
|
|||
|
|
const trackedHours = totalMinutes / 60
|
|||
|
|
const estimatedPoints = Math.floor(trackedHours * 30)
|
|||
|
|
|
|||
|
|
// Format with seconds when actively tracking
|
|||
|
|
const formatLiveTime = () => {
|
|||
|
|
if (isTrackingAssignment && sessionSeconds > 0) {
|
|||
|
|
const hours = Math.floor(totalSeconds / 3600)
|
|||
|
|
const mins = Math.floor((totalSeconds % 3600) / 60)
|
|||
|
|
const secs = totalSeconds % 60
|
|||
|
|
if (hours > 0) {
|
|||
|
|
return `${hours}ч ${mins}м ${secs}с`
|
|||
|
|
}
|
|||
|
|
return `${mins}м ${secs}с`
|
|||
|
|
}
|
|||
|
|
return formatMinutes(totalMinutes)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div className="flex items-start gap-3">
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<div className="flex items-center gap-2 mb-1">
|
|||
|
|
<h3 className="font-medium text-white">
|
|||
|
|
Прохождение: {assignment.game.title}
|
|||
|
|
</h3>
|
|||
|
|
{isTrackingAssignment && (
|
|||
|
|
<span className="flex items-center gap-1 px-2 py-0.5 bg-green-500/20 border border-green-500/30 rounded-full text-xs text-green-400">
|
|||
|
|
<div className="live-indicator" />
|
|||
|
|
Идёт запись
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{assignment.playthrough_info.description && (
|
|||
|
|
<p className="text-sm text-gray-400 mb-2 line-clamp-2">
|
|||
|
|
{assignment.playthrough_info.description}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
<div className="flex items-center gap-3 text-xs flex-wrap">
|
|||
|
|
{totalSeconds > 0 || isTrackingAssignment ? (
|
|||
|
|
<>
|
|||
|
|
<span className="flex items-center gap-1 text-neon-400">
|
|||
|
|
<Timer className="w-3 h-3" />
|
|||
|
|
{formatLiveTime()}
|
|||
|
|
</span>
|
|||
|
|
<span className="text-neon-400 font-medium">
|
|||
|
|
~{estimatedPoints} очков
|
|||
|
|
</span>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<span className="text-gray-500">
|
|||
|
|
Базово: {assignment.playthrough_info.points} очков
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Challenge assignment
|
|||
|
|
if (assignment.challenge) {
|
|||
|
|
const challenge = assignment.challenge
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div className="flex items-start gap-3">
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<h3 className="font-medium text-white mb-1">{challenge.title}</h3>
|
|||
|
|
<p className="text-xs text-gray-500 mb-1">{challenge.game.title}</p>
|
|||
|
|
<p className="text-sm text-gray-400 mb-2 line-clamp-2">
|
|||
|
|
{challenge.description}
|
|||
|
|
</p>
|
|||
|
|
<div className="flex items-center gap-3 text-xs">
|
|||
|
|
<span className={getDifficultyColor(challenge.difficulty)}>
|
|||
|
|
[{getDifficultyLabel(challenge.difficulty)}]
|
|||
|
|
</span>
|
|||
|
|
<span className="text-neon-400 font-medium">
|
|||
|
|
+{challenge.points} очков
|
|||
|
|
</span>
|
|||
|
|
{challenge.estimated_time && (
|
|||
|
|
<span className="text-gray-500">
|
|||
|
|
~{challenge.estimated_time} мин
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<p className="text-gray-400 text-sm">
|
|||
|
|
Задание загружается...
|
|||
|
|
</p>
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-4">
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div>
|
|||
|
|
<h1 className="text-xl font-display font-bold text-white">
|
|||
|
|
Привет, {user?.nickname || 'Игрок'}!
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-sm text-gray-400">
|
|||
|
|
{isMonitoring ? (currentGame ? `Играет: ${currentGame}` : 'Мониторинг активен') : 'Мониторинг выключен'}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
{currentGame && isMonitoring && (
|
|||
|
|
<div className="flex items-center gap-2 px-3 py-1.5 bg-green-500/10 border border-green-500/30 rounded-full">
|
|||
|
|
<div className="live-indicator" />
|
|||
|
|
<span className="text-xs text-green-400 font-medium truncate max-w-[100px]">{currentGame}</span>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
onClick={toggleMonitoring}
|
|||
|
|
className={`p-2 rounded-lg transition-colors ${
|
|||
|
|
isMonitoring
|
|||
|
|
? 'bg-red-500/20 text-red-400 hover:bg-red-500/30'
|
|||
|
|
: 'bg-green-500/20 text-green-400 hover:bg-green-500/30'
|
|||
|
|
}`}
|
|||
|
|
title={isMonitoring ? 'Остановить мониторинг' : 'Начать мониторинг'}
|
|||
|
|
>
|
|||
|
|
{isMonitoring ? <Square className="w-5 h-5" /> : <Play className="w-5 h-5" />}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Stats cards */}
|
|||
|
|
<div className="grid grid-cols-2 gap-3">
|
|||
|
|
<GlassCard variant="neon" className="p-3">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="w-10 h-10 rounded-lg bg-neon-500/10 flex items-center justify-center">
|
|||
|
|
<Clock className="w-5 h-5 text-neon-500" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-gray-400">Сегодня</p>
|
|||
|
|
<p className="text-lg font-bold text-white">{formatTime(todayTime)}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</GlassCard>
|
|||
|
|
|
|||
|
|
<GlassCard variant="default" className="p-3">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="w-10 h-10 rounded-lg bg-accent-500/10 flex items-center justify-center">
|
|||
|
|
<Trophy className="w-5 h-5 text-accent-500" />
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p className="text-xs text-gray-400">За неделю</p>
|
|||
|
|
<p className="text-lg font-bold text-white">{formatTime(weekTime)}</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</GlassCard>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Current challenge */}
|
|||
|
|
<GlassCard variant="dark" className="border border-neon-500/20">
|
|||
|
|
<div className="flex items-center justify-between mb-3">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<Target className="w-5 h-5 text-neon-500" />
|
|||
|
|
<h2 className="font-semibold text-white">Текущий челлендж</h2>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Marathon selector */}
|
|||
|
|
{marathons.length > 1 && (
|
|||
|
|
<div className="relative">
|
|||
|
|
<select
|
|||
|
|
value={selectedMarathonId || ''}
|
|||
|
|
onChange={(e) => selectMarathon(Number(e.target.value))}
|
|||
|
|
className="appearance-none bg-dark-800 border border-dark-600 rounded-lg px-3 py-1.5 pr-8 text-xs text-gray-300 focus:outline-none focus:border-neon-500 cursor-pointer"
|
|||
|
|
>
|
|||
|
|
{marathons.map(m => (
|
|||
|
|
<option key={m.id} value={m.id}>
|
|||
|
|
{m.title.length > 30 ? m.title.substring(0, 30) + '...' : m.title}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
<ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500 pointer-events-none" />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Marathon title for single marathon */}
|
|||
|
|
{marathons.length === 1 && selectedMarathon && (
|
|||
|
|
<p className="text-xs text-gray-500 mb-2">{selectedMarathon.title}</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{renderCurrentChallenge()}
|
|||
|
|
</GlassCard>
|
|||
|
|
|
|||
|
|
{/* Tracked games */}
|
|||
|
|
<div>
|
|||
|
|
<div className="flex items-center justify-between mb-3">
|
|||
|
|
<h2 className="font-semibold text-white flex items-center gap-2">
|
|||
|
|
<Gamepad2 className="w-5 h-5 text-neon-500" />
|
|||
|
|
Отслеживаемые игры
|
|||
|
|
</h2>
|
|||
|
|
<Link to="/games">
|
|||
|
|
<NeonButton variant="ghost" size="sm" icon={<Plus className="w-4 h-4" />}>
|
|||
|
|
Добавить
|
|||
|
|
</NeonButton>
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{trackedGames.length === 0 ? (
|
|||
|
|
<GlassCard variant="dark" className="text-center py-8">
|
|||
|
|
<Gamepad2 className="w-12 h-12 text-gray-600 mx-auto mb-3" />
|
|||
|
|
<p className="text-gray-400 text-sm mb-4">
|
|||
|
|
Нет отслеживаемых игр
|
|||
|
|
</p>
|
|||
|
|
<Link to="/games">
|
|||
|
|
<NeonButton variant="secondary" size="sm">
|
|||
|
|
Добавить игру
|
|||
|
|
</NeonButton>
|
|||
|
|
</Link>
|
|||
|
|
</GlassCard>
|
|||
|
|
) : (
|
|||
|
|
<div className="grid grid-cols-2 gap-2">
|
|||
|
|
{trackedGames.slice(0, 4).map((game) => (
|
|||
|
|
<GlassCard
|
|||
|
|
key={game.id}
|
|||
|
|
variant="default"
|
|||
|
|
hover
|
|||
|
|
className="p-3"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center gap-2 mb-2">
|
|||
|
|
{currentGame === game.name && <div className="live-indicator" />}
|
|||
|
|
<p className="text-sm font-medium text-white truncate flex-1">
|
|||
|
|
{game.name}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<p className="text-xs text-gray-400">
|
|||
|
|
{formatTime(game.totalTime)}
|
|||
|
|
</p>
|
|||
|
|
</GlassCard>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{trackedGames.length > 4 && (
|
|||
|
|
<Link to="/games" className="block mt-2">
|
|||
|
|
<NeonButton variant="ghost" size="sm" className="w-full">
|
|||
|
|
Показать все ({trackedGames.length})
|
|||
|
|
</NeonButton>
|
|||
|
|
</Link>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)
|
|||
|
|
}
|