299 lines
12 KiB
TypeScript
299 lines
12 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import { Gamepad2, Plus, Trash2, Search, FolderOpen, Cpu, RefreshCw, Loader2 } from 'lucide-react'
|
||
import { useTrackingStore } from '../store/tracking'
|
||
import { GlassCard } from '../components/ui/GlassCard'
|
||
import { NeonButton } from '../components/ui/NeonButton'
|
||
import { Input } from '../components/ui/Input'
|
||
import type { TrackedProcess } from '@shared/types'
|
||
|
||
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}с`
|
||
}
|
||
}
|
||
|
||
// System processes to filter out
|
||
const SYSTEM_PROCESSES = new Set([
|
||
'svchost', 'csrss', 'wininit', 'services', 'lsass', 'smss', 'winlogon',
|
||
'dwm', 'explorer', 'taskhost', 'conhost', 'spoolsv', 'searchhost',
|
||
'runtimebroker', 'sihost', 'fontdrvhost', 'ctfmon', 'dllhost',
|
||
'securityhealthservice', 'searchindexer', 'audiodg', 'wudfhost',
|
||
'system', 'registry', 'idle', 'memory compression', 'ntoskrnl',
|
||
'shellexperiencehost', 'startmenuexperiencehost', 'applicationframehost',
|
||
'systemsettings', 'textinputhost', 'searchui', 'cortana', 'lockapp',
|
||
'windowsinternal', 'taskhostw', 'wmiprvse', 'msiexec', 'trustedinstaller',
|
||
'tiworker', 'smartscreen', 'securityhealthsystray', 'sgrmbroker',
|
||
'gamebarpresencewriter', 'gamebar', 'gamebarftserver',
|
||
'microsoftedge', 'msedge', 'chrome', 'firefox', 'opera', 'brave',
|
||
'discord', 'slack', 'teams', 'zoom', 'skype',
|
||
'powershell', 'cmd', 'windowsterminal', 'code', 'devenv',
|
||
'node', 'npm', 'electron', 'vite'
|
||
])
|
||
|
||
export function GamesPage() {
|
||
const { trackedGames, currentGame, loadTrackedGames, addGame, removeGame } = useTrackingStore()
|
||
const [showAddModal, setShowAddModal] = useState(false)
|
||
const [searchQuery, setSearchQuery] = useState('')
|
||
const [addMode, setAddMode] = useState<'process' | 'manual'>('process')
|
||
const [manualGame, setManualGame] = useState({ name: '', executableName: '' })
|
||
const [processes, setProcesses] = useState<TrackedProcess[]>([])
|
||
const [isLoadingProcesses, setIsLoadingProcesses] = useState(false)
|
||
|
||
useEffect(() => {
|
||
loadTrackedGames()
|
||
}, [loadTrackedGames])
|
||
|
||
const loadProcesses = async () => {
|
||
setIsLoadingProcesses(true)
|
||
try {
|
||
const procs = await window.electronAPI.getRunningProcesses()
|
||
// Filter out system processes and already tracked games
|
||
const filtered = procs.filter(p => {
|
||
const name = p.name.toLowerCase().replace('.exe', '')
|
||
return !SYSTEM_PROCESSES.has(name) &&
|
||
!trackedGames.some(tg =>
|
||
tg.executableName.toLowerCase().replace('.exe', '') === name
|
||
)
|
||
})
|
||
setProcesses(filtered)
|
||
} catch (error) {
|
||
console.error('Failed to load processes:', error)
|
||
} finally {
|
||
setIsLoadingProcesses(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (showAddModal && addMode === 'process') {
|
||
loadProcesses()
|
||
}
|
||
}, [showAddModal, addMode])
|
||
|
||
const filteredProcesses = processes.filter(
|
||
(proc) =>
|
||
proc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
||
(proc.windowTitle && proc.windowTitle.toLowerCase().includes(searchQuery.toLowerCase()))
|
||
)
|
||
|
||
const handleAddProcess = async (process: TrackedProcess) => {
|
||
const name = process.windowTitle || process.displayName || process.name.replace('.exe', '')
|
||
await addGame({
|
||
id: `proc_${Date.now()}`,
|
||
name: name,
|
||
executableName: process.name,
|
||
executablePath: process.executablePath,
|
||
})
|
||
setShowAddModal(false)
|
||
setSearchQuery('')
|
||
}
|
||
|
||
const handleAddManualGame = async () => {
|
||
if (!manualGame.name || !manualGame.executableName) return
|
||
|
||
await addGame({
|
||
id: `manual_${Date.now()}`,
|
||
name: manualGame.name,
|
||
executableName: manualGame.executableName,
|
||
})
|
||
setShowAddModal(false)
|
||
setManualGame({ name: '', executableName: '' })
|
||
}
|
||
|
||
const handleRemoveGame = async (gameId: string) => {
|
||
if (confirm('Удалить игру из отслеживания?')) {
|
||
await removeGame(gameId)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-4">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<h1 className="text-xl font-display font-bold text-white flex items-center gap-2">
|
||
<Gamepad2 className="w-6 h-6 text-neon-500" />
|
||
Игры
|
||
</h1>
|
||
<NeonButton
|
||
size="sm"
|
||
icon={<Plus className="w-4 h-4" />}
|
||
onClick={() => setShowAddModal(true)}
|
||
>
|
||
Добавить
|
||
</NeonButton>
|
||
</div>
|
||
|
||
{/* Games list */}
|
||
{trackedGames.length === 0 ? (
|
||
<GlassCard variant="dark" className="text-center py-12">
|
||
<Gamepad2 className="w-16 h-16 text-gray-600 mx-auto mb-4" />
|
||
<h3 className="text-lg font-semibold text-white mb-2">Нет игр</h3>
|
||
<p className="text-gray-400 text-sm mb-4">
|
||
Добавьте игры для отслеживания времени
|
||
</p>
|
||
<NeonButton onClick={() => setShowAddModal(true)}>
|
||
Добавить игру
|
||
</NeonButton>
|
||
</GlassCard>
|
||
) : (
|
||
<div className="space-y-2">
|
||
{trackedGames.map((game) => (
|
||
<GlassCard
|
||
key={game.id}
|
||
variant="default"
|
||
className="flex items-center justify-between"
|
||
>
|
||
<div className="flex items-center gap-3 min-w-0">
|
||
{currentGame === game.name && <div className="live-indicator flex-shrink-0" />}
|
||
<div className="min-w-0">
|
||
<p className="font-medium text-white truncate">{game.name}</p>
|
||
<p className="text-xs text-gray-400">
|
||
{formatTime(game.totalTime)} наиграно
|
||
{game.steamAppId && ' • Steam'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<button
|
||
onClick={() => handleRemoveGame(game.id)}
|
||
className="p-2 text-gray-400 hover:text-red-400 transition-colors flex-shrink-0"
|
||
>
|
||
<Trash2 className="w-4 h-4" />
|
||
</button>
|
||
</GlassCard>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* Add game modal */}
|
||
{showAddModal && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-dark-950/80 backdrop-blur-sm">
|
||
<GlassCard variant="dark" className="w-full max-w-sm mx-4 max-h-[80vh] flex flex-col">
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className="text-lg font-semibold text-white">Добавить игру</h2>
|
||
<button
|
||
onClick={() => setShowAddModal(false)}
|
||
className="p-1 text-gray-400 hover:text-white"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
|
||
{/* Mode tabs */}
|
||
<div className="flex gap-1 mb-4">
|
||
<button
|
||
onClick={() => setAddMode('process')}
|
||
className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-2 rounded-lg text-xs font-medium transition-colors ${
|
||
addMode === 'process'
|
||
? 'bg-neon-500/20 text-neon-400 border border-neon-500/30'
|
||
: 'bg-dark-700 text-gray-400 border border-dark-600'
|
||
}`}
|
||
>
|
||
<Cpu className="w-3.5 h-3.5" />
|
||
Процессы
|
||
</button>
|
||
<button
|
||
onClick={() => setAddMode('manual')}
|
||
className={`flex-1 flex items-center justify-center gap-1.5 px-2 py-2 rounded-lg text-xs font-medium transition-colors ${
|
||
addMode === 'manual'
|
||
? 'bg-neon-500/20 text-neon-400 border border-neon-500/30'
|
||
: 'bg-dark-700 text-gray-400 border border-dark-600'
|
||
}`}
|
||
>
|
||
<FolderOpen className="w-3.5 h-3.5" />
|
||
Вручную
|
||
</button>
|
||
</div>
|
||
|
||
{addMode === 'process' && (
|
||
<>
|
||
<div className="flex gap-2">
|
||
<div className="flex-1">
|
||
<Input
|
||
placeholder="Поиск процесса..."
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
icon={<Search className="w-4 h-4" />}
|
||
/>
|
||
</div>
|
||
<button
|
||
onClick={loadProcesses}
|
||
disabled={isLoadingProcesses}
|
||
className="p-2.5 bg-dark-700 border border-dark-600 rounded-lg text-gray-400 hover:text-white hover:border-neon-500/50 transition-colors disabled:opacity-50"
|
||
title="Обновить список"
|
||
>
|
||
<RefreshCw className={`w-4 h-4 ${isLoadingProcesses ? 'animate-spin' : ''}`} />
|
||
</button>
|
||
</div>
|
||
<p className="text-xs text-gray-500 mt-2">
|
||
Запустите игру и нажмите обновить
|
||
</p>
|
||
<div className="mt-3 space-y-2 overflow-y-auto max-h-52">
|
||
{isLoadingProcesses ? (
|
||
<div className="flex items-center justify-center py-8">
|
||
<Loader2 className="w-6 h-6 text-neon-500 animate-spin" />
|
||
</div>
|
||
) : filteredProcesses.length === 0 ? (
|
||
<p className="text-center text-gray-400 text-sm py-4">
|
||
{processes.length === 0 ? 'Нет подходящих процессов' : 'Ничего не найдено'}
|
||
</p>
|
||
) : (
|
||
filteredProcesses.slice(0, 20).map((proc) => (
|
||
<button
|
||
key={proc.id}
|
||
onClick={() => handleAddProcess(proc)}
|
||
className="w-full flex items-start gap-3 p-2 rounded-lg bg-dark-700 hover:bg-dark-600 transition-colors text-left"
|
||
>
|
||
<Cpu className="w-4 h-4 text-gray-400 flex-shrink-0 mt-0.5" />
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-sm text-white truncate">
|
||
{proc.windowTitle || proc.displayName || proc.name}
|
||
</p>
|
||
<p className="text-xs text-gray-500 truncate">
|
||
{proc.name}
|
||
</p>
|
||
</div>
|
||
</button>
|
||
))
|
||
)}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{addMode === 'manual' && (
|
||
<div className="space-y-4">
|
||
<Input
|
||
label="Название игры"
|
||
placeholder="Например: Elden Ring"
|
||
value={manualGame.name}
|
||
onChange={(e) => setManualGame({ ...manualGame, name: e.target.value })}
|
||
/>
|
||
<Input
|
||
label="Имя процесса (exe)"
|
||
placeholder="Например: eldenring.exe"
|
||
value={manualGame.executableName}
|
||
onChange={(e) => setManualGame({ ...manualGame, executableName: e.target.value })}
|
||
/>
|
||
<NeonButton
|
||
className="w-full"
|
||
onClick={handleAddManualGame}
|
||
disabled={!manualGame.name || !manualGame.executableName}
|
||
>
|
||
Добавить
|
||
</NeonButton>
|
||
</div>
|
||
)}
|
||
</GlassCard>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|