Time tracker app

desktop/src/renderer/pages/DashboardPage.tsx

@@ -0,0 +1,481 @@
+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>
+  )
+}