Salastil/creamlinux-installer
1
0
Fork 0
mirror of https://github.com/Novattz/creamlinux-installer.git synced 2026-01-24 20:32:51 -05:00
Code Issues Packages Projects Releases Wiki Activity

formatting

Browse Source
This commit is contained in:
Tickbase
2025-05-17 22:49:09 +02:00
parent ecd05f1980
commit 76bfea819b
46 changed files with 2905 additions and 2743 deletions
Download Patch File Download Diff File Expand all files Collapse all files

946
src/App.tsx
View File

File diff suppressed because it is too large Load Diff

59
src/components/ActionButton.tsx
View File

@@ -1,46 +1,41 @@
// src/components/ActionButton.tsx
import React from 'react';
import React from 'react'
export type ActionType = 'install_cream' | 'uninstall_cream' | 'install_smoke' | 'uninstall_smoke';
export type ActionType = 'install_cream' | 'uninstall_cream' | 'install_smoke' | 'uninstall_smoke'
interface ActionButtonProps {
action: ActionType;
isInstalled: boolean;
isWorking: boolean;
onClick: () => void;
disabled?: boolean;
action: ActionType
isInstalled: boolean
isWorking: boolean
onClick: () => void
disabled?: boolean
}
const ActionButton: React.FC<ActionButtonProps> = ({
action,
isInstalled,
isWorking,
onClick,
disabled = false
const ActionButton: React.FC<ActionButtonProps> = ({
action,
isInstalled,
isWorking,
onClick,
disabled = false,
}) => {
const getButtonText = () => {
if (isWorking) return "Working...";
const isCream = action.includes('cream');
const product = isCream ? "CreamLinux" : "SmokeAPI";
return isInstalled ? `Uninstall ${product}` : `Install ${product}`;
};
if (isWorking) return 'Working...'
const isCream = action.includes('cream')
const product = isCream ? 'CreamLinux' : 'SmokeAPI'
return isInstalled ? `Uninstall ${product}` : `Install ${product}`
}
const getButtonClass = () => {
const baseClass = "action-button";
return `${baseClass} ${isInstalled ? 'uninstall' : 'install'}`;
};
const baseClass = 'action-button'
return `${baseClass} ${isInstalled ? 'uninstall' : 'install'}`
}
return (
<button
className={getButtonClass()}
onClick={onClick}
disabled={disabled || isWorking}
>
<button className={getButtonClass()} onClick={onClick} disabled={disabled || isWorking}>
{getButtonText()}
</button>
);
};
)
}
export default ActionButton;
export default ActionButton

165
src/components/AnimatedBackground.tsx
View File

@@ -1,46 +1,45 @@
// src/components/AnimatedBackground.tsx
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef } from 'react'
const AnimatedBackground: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null)
useEffect(() => {
const canvas = canvasRef.current;
if (!canvas) return;
const ctx = canvas.getContext('2d');
if (!ctx) return;
const canvas = canvasRef.current
if (!canvas) return
const ctx = canvas.getContext('2d')
if (!ctx) return
// Set canvas size to match window
const setCanvasSize = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
setCanvasSize();
window.addEventListener('resize', setCanvasSize);
// Create particles
const particles: Particle[] = [];
const particleCount = 30;
interface Particle {
x: number;
y: number;
size: number;
speedX: number;
speedY: number;
opacity: number;
color: string;
canvas.width = window.innerWidth
canvas.height = window.innerHeight
}
setCanvasSize()
window.addEventListener('resize', setCanvasSize)
// Create particles
const particles: Particle[] = []
const particleCount = 30
interface Particle {
x: number
y: number
size: number
speedX: number
speedY: number
opacity: number
color: string
}
// Color palette
const colors = [
'rgba(74, 118, 196, 0.5)', // primary blue
'rgba(74, 118, 196, 0.5)', // primary blue
'rgba(155, 125, 255, 0.5)', // purple
'rgba(251, 177, 60, 0.5)', // gold
];
'rgba(251, 177, 60, 0.5)', // gold
]
// Create initial particles
for (let i = 0; i < particleCount; i++) {
particles.push({
@@ -50,65 +49,65 @@ const AnimatedBackground: React.FC = () => {
speedX: Math.random() * 0.2 - 0.1,
speedY: Math.random() * 0.2 - 0.1,
opacity: Math.random() * 0.07 + 0.03,
color: colors[Math.floor(Math.random() * colors.length)]
});
color: colors[Math.floor(Math.random() * colors.length)],
})
}
// Animation loop
const animate = () => {
// Clear canvas with transparent black to create fade effect
ctx.fillStyle = 'rgba(15, 15, 15, 0.1)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(15, 15, 15, 0.1)'
ctx.fillRect(0, 0, canvas.width, canvas.height)
// Update and draw particles
particles.forEach(particle => {
particles.forEach((particle) => {
// Update position
particle.x += particle.speedX;
particle.y += particle.speedY;
particle.x += particle.speedX
particle.y += particle.speedY
// Wrap around edges
if (particle.x < 0) particle.x = canvas.width;
if (particle.x > canvas.width) particle.x = 0;
if (particle.y < 0) particle.y = canvas.height;
if (particle.y > canvas.height) particle.y = 0;
if (particle.x < 0) particle.x = canvas.width
if (particle.x > canvas.width) particle.x = 0
if (particle.y < 0) particle.y = canvas.height
if (particle.y > canvas.height) particle.y = 0
// Draw particle
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
ctx.fillStyle = particle.color.replace('0.5', `${particle.opacity}`);
ctx.fill();
ctx.beginPath()
ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
ctx.fillStyle = particle.color.replace('0.5', `${particle.opacity}`)
ctx.fill()
// Connect particles
particles.forEach(otherParticle => {
const dx = particle.x - otherParticle.x;
const dy = particle.y - otherParticle.y;
const distance = Math.sqrt(dx * dx + dy * dy);
particles.forEach((otherParticle) => {
const dx = particle.x - otherParticle.x
const dy = particle.y - otherParticle.y
const distance = Math.sqrt(dx * dx + dy * dy)
if (distance < 100) {
ctx.beginPath();
ctx.strokeStyle = particle.color.replace('0.5', `${particle.opacity * 0.5}`);
ctx.lineWidth = 0.2;
ctx.moveTo(particle.x, particle.y);
ctx.lineTo(otherParticle.x, otherParticle.y);
ctx.stroke();
ctx.beginPath()
ctx.strokeStyle = particle.color.replace('0.5', `${particle.opacity * 0.5}`)
ctx.lineWidth = 0.2
ctx.moveTo(particle.x, particle.y)
ctx.lineTo(otherParticle.x, otherParticle.y)
ctx.stroke()
}
});
});
requestAnimationFrame(animate);
};
})
})
requestAnimationFrame(animate)
}
// Start animation
animate();
animate()
return () => {
window.removeEventListener('resize', setCanvasSize);
};
}, []);
window.removeEventListener('resize', setCanvasSize)
}
}, [])
return (
<canvas
ref={canvasRef}
<canvas
ref={canvasRef}
className="animated-background"
style={{
position: 'fixed',
@@ -118,10 +117,10 @@ const AnimatedBackground: React.FC = () => {
height: '100%',
pointerEvents: 'none',
zIndex: 0,
opacity: 0.4
opacity: 0.4,
}}
/>
);
};
)
}
export default AnimatedBackground;
export default AnimatedBackground

36
src/components/AnimatedCheckbox.tsx
View File

@@ -1,12 +1,11 @@
// src/components/AnimatedCheckbox.tsx
import React from 'react';
import React from 'react'
interface AnimatedCheckboxProps {
checked: boolean;
onChange: () => void;
label?: string;
sublabel?: string;
className?: string;
checked: boolean
onChange: () => void
label?: string
sublabel?: string
className?: string
}
const AnimatedCheckbox: React.FC<AnimatedCheckboxProps> = ({
@@ -14,25 +13,20 @@ const AnimatedCheckbox: React.FC<AnimatedCheckboxProps> = ({
onChange,
label,
sublabel,
className = ''
className = '',
}) => {
return (
<label className={`animated-checkbox ${className}`}>
<input
type="checkbox"
checked={checked}
onChange={onChange}
className="checkbox-original"
/>
<input type="checkbox" checked={checked} onChange={onChange} className="checkbox-original" />
<span className={`checkbox-custom ${checked ? 'checked' : ''}`}>
<svg viewBox="0 0 24 24" className="checkmark-icon">
<path
<path
className={`checkmark ${checked ? 'checked' : ''}`}
d="M5 12l5 5L20 7"
stroke="#fff"
d="M5 12l5 5L20 7"
stroke="#fff"
strokeWidth="2.5"
fill="none"
strokeLinecap="round"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
@@ -44,7 +38,7 @@ const AnimatedCheckbox: React.FC<AnimatedCheckboxProps> = ({
</div>
)}
</label>
);
};
)
}
export default AnimatedCheckbox;
export default AnimatedCheckbox

187
src/components/DlcSelectionDialog.tsx
View File

@@ -1,23 +1,22 @@
// src/components/DlcSelectionDialog.tsx
import React, { useState, useEffect, useMemo } from 'react';
import AnimatedCheckbox from './AnimatedCheckbox';
import React, { useState, useEffect, useMemo } from 'react'
import AnimatedCheckbox from './AnimatedCheckbox'
interface DlcInfo {
appid: string;
name: string;
enabled: boolean;
appid: string
name: string
enabled: boolean
}
interface DlcSelectionDialogProps {
visible: boolean;
gameTitle: string;
dlcs: DlcInfo[];
onClose: () => void;
onConfirm: (selectedDlcs: DlcInfo[]) => void;
isLoading: boolean;
isEditMode?: boolean;
loadingProgress?: number;
estimatedTimeLeft?: string;
visible: boolean
gameTitle: string
dlcs: DlcInfo[]
onClose: () => void
onConfirm: (selectedDlcs: DlcInfo[]) => void
isLoading: boolean
isEditMode?: boolean
loadingProgress?: number
estimatedTimeLeft?: string
}
const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
@@ -29,122 +28,125 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
isLoading,
isEditMode = false,
loadingProgress = 0,
estimatedTimeLeft = ''
estimatedTimeLeft = '',
}) => {
const [selectedDlcs, setSelectedDlcs] = useState<DlcInfo[]>([]);
const [showContent, setShowContent] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [selectAll, setSelectAll] = useState(true);
const [initialized, setInitialized] = useState(false);
const [selectedDlcs, setSelectedDlcs] = useState<DlcInfo[]>([])
const [showContent, setShowContent] = useState(false)
const [searchQuery, setSearchQuery] = useState('')
const [selectAll, setSelectAll] = useState(true)
const [initialized, setInitialized] = useState(false)
// Initialize selected DLCs when DLC list changes
useEffect(() => {
if (visible && dlcs.length > 0 && !initialized) {
setSelectedDlcs(dlcs);
setSelectedDlcs(dlcs)
// Determine initial selectAll state based on if all DLCs are enabled
const allSelected = dlcs.every(dlc => dlc.enabled);
setSelectAll(allSelected);
const allSelected = dlcs.every((dlc) => dlc.enabled)
setSelectAll(allSelected)
// Mark as initialized so we don't reset selections on subsequent DLC additions
setInitialized(true);
setInitialized(true)
}
}, [visible, dlcs, initialized]);
}, [visible, dlcs, initialized])
// Handle visibility changes
useEffect(() => {
if (visible) {
// Show content immediately for better UX
const timer = setTimeout(() => {
setShowContent(true);
}, 50);
return () => clearTimeout(timer);
setShowContent(true)
}, 50)
return () => clearTimeout(timer)
} else {
setShowContent(false);
setInitialized(false); // Reset initialized state when dialog closes
setShowContent(false)
setInitialized(false) // Reset initialized state when dialog closes
}
}, [visible]);
}, [visible])
// Memoize filtered DLCs to avoid unnecessary recalculations
const filteredDlcs = useMemo(() => {
return searchQuery.trim() === ''
? selectedDlcs
: selectedDlcs.filter(dlc =>
dlc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
dlc.appid.includes(searchQuery)
);
}, [selectedDlcs, searchQuery]);
return searchQuery.trim() === ''
? selectedDlcs
: selectedDlcs.filter(
(dlc) =>
dlc.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
dlc.appid.includes(searchQuery)
)
}, [selectedDlcs, searchQuery])
// Update DLC selection status
const handleToggleDlc = (appid: string) => {
setSelectedDlcs(prev => prev.map(dlc =>
dlc.appid === appid ? { ...dlc, enabled: !dlc.enabled } : dlc
));
};
setSelectedDlcs((prev) =>
prev.map((dlc) => (dlc.appid === appid ? { ...dlc, enabled: !dlc.enabled } : dlc))
)
}
// Update selectAll state when individual DLC selections change
useEffect(() => {
const allSelected = selectedDlcs.every(dlc => dlc.enabled);
setSelectAll(allSelected);
}, [selectedDlcs]);
const allSelected = selectedDlcs.every((dlc) => dlc.enabled)
setSelectAll(allSelected)
}, [selectedDlcs])
// Handle new DLCs being added while dialog is already open
useEffect(() => {
if (initialized && dlcs.length > selectedDlcs.length) {
// Find new DLCs that aren't in our current selection
const currentAppIds = new Set(selectedDlcs.map(dlc => dlc.appid));
const newDlcs = dlcs.filter(dlc => !currentAppIds.has(dlc.appid));
const currentAppIds = new Set(selectedDlcs.map((dlc) => dlc.appid))
const newDlcs = dlcs.filter((dlc) => !currentAppIds.has(dlc.appid))
// Add new DLCs to our selection, maintaining their enabled state
if (newDlcs.length > 0) {
setSelectedDlcs(prev => [...prev, ...newDlcs]);
setSelectedDlcs((prev) => [...prev, ...newDlcs])
}
}
}, [dlcs, selectedDlcs, initialized]);
}, [dlcs, selectedDlcs, initialized])
const handleToggleSelectAll = () => {
const newSelectAllState = !selectAll;
setSelectAll(newSelectAllState);
setSelectedDlcs(prev => prev.map(dlc => ({
...dlc,
enabled: newSelectAllState
})));
};
const newSelectAllState = !selectAll
setSelectAll(newSelectAllState)
setSelectedDlcs((prev) =>
prev.map((dlc) => ({
...dlc,
enabled: newSelectAllState,
}))
)
}
const handleConfirm = () => {
onConfirm(selectedDlcs);
};
onConfirm(selectedDlcs)
}
// Modified to prevent closing when loading
const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
// Prevent clicks from propagating through the overlay
e.stopPropagation();
e.stopPropagation()
// Only allow closing via overlay click if not loading
if (e.target === e.currentTarget && !isLoading) {
onClose();
onClose()
}
};
}
// Count selected DLCs
const selectedCount = selectedDlcs.filter(dlc => dlc.enabled).length;
const selectedCount = selectedDlcs.filter((dlc) => dlc.enabled).length
// Format loading message to show total number of DLCs found
const getLoadingInfoText = () => {
if (isLoading && loadingProgress < 100) {
return ` (Loading more DLCs...)`;
return ` (Loading more DLCs...)`
} else if (dlcs.length > 0) {
return ` (Total DLCs: ${dlcs.length})`;
return ` (Total DLCs: ${dlcs.length})`
}
return '';
};
return ''
}
if (!visible) return null;
if (!visible) return null
return (
<div
className={`dlc-dialog-overlay ${showContent ? 'visible' : ''}`}
<div
className={`dlc-dialog-overlay ${showContent ? 'visible' : ''}`}
onClick={handleOverlayClick}
>
<div className={`dlc-selection-dialog ${showContent ? 'dialog-visible' : ''}`}>
@@ -160,9 +162,9 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
</div>
<div className="dlc-dialog-search">
<input
type="text"
placeholder="Search DLCs..."
<input
type="text"
placeholder="Search DLCs..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="dlc-search-input"
@@ -179,14 +181,13 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
{isLoading && (
<div className="dlc-loading-progress">
<div className="progress-bar-container">
<div
className="progress-bar"
style={{ width: `${loadingProgress}%` }}
/>
<div className="progress-bar" style={{ width: `${loadingProgress}%` }} />
</div>
<div className="loading-details">
<span>Loading DLCs: {loadingProgress}%</span>
{estimatedTimeLeft && <span className="time-left">Est. time left: {estimatedTimeLeft}</span>}
{estimatedTimeLeft && (
<span className="time-left">Est. time left: {estimatedTimeLeft}</span>
)}
</div>
</div>
)}
@@ -194,7 +195,7 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
<div className="dlc-list-container">
{selectedDlcs.length > 0 ? (
<ul className="dlc-list">
{filteredDlcs.map(dlc => (
{filteredDlcs.map((dlc) => (
<li key={dlc.appid} className="dlc-item">
<AnimatedCheckbox
checked={dlc.enabled}
@@ -219,24 +220,20 @@ const DlcSelectionDialog: React.FC<DlcSelectionDialogProps> = ({
</div>
<div className="dlc-dialog-actions">
<button
className="cancel-button"
<button
className="cancel-button"
onClick={onClose}
disabled={isLoading && loadingProgress < 10} // Briefly disable to prevent accidental closing at start
>
Cancel
</button>
<button
className="confirm-button"
onClick={handleConfirm}
disabled={isLoading}
>
<button className="confirm-button" onClick={handleConfirm} disabled={isLoading}>
{isEditMode ? 'Save Changes' : 'Install with Selected DLCs'}
</button>
</div>
</div>
</div>
);
};
)
}
export default DlcSelectionDialog;
export default DlcSelectionDialog

152
src/components/GameItem.tsx
View File

@@ -1,98 +1,100 @@
// src/components/GameItem.tsx
import React, { useState, useEffect } from 'react';
import { findBestGameImage } from '../services/ImageService';
import { ActionType } from './ActionButton';
import React, { useState, useEffect } from 'react'
import { findBestGameImage } from '../services/ImageService'
import { ActionType } from './ActionButton'
interface Game {
id: string;
title: string;
path: string;
platform?: string;
native: boolean;
api_files: string[];
cream_installed?: boolean;
smoke_installed?: boolean;
installing?: boolean;
id: string
title: string
path: string
platform?: string
native: boolean
api_files: string[]
cream_installed?: boolean
smoke_installed?: boolean
installing?: boolean
}
interface GameItemProps {
game: Game;
onAction: (gameId: string, action: ActionType) => Promise<void>;
onEdit?: (gameId: string) => void;
game: Game
onAction: (gameId: string, action: ActionType) => Promise<void>
onEdit?: (gameId: string) => void
}
const GameItem: React.FC<GameItemProps> = ({ game, onAction, onEdit }) => {
const [imageUrl, setImageUrl] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(true);
const [hasError, setHasError] = useState(false);
const [imageUrl, setImageUrl] = useState<string | null>(null)
const [isLoading, setIsLoading] = useState(true)
const [hasError, setHasError] = useState(false)
useEffect(() => {
// Function to fetch the game cover/image
const fetchGameImage = async () => {
// First check if we already have it (to prevent flickering on re-renders)
if (imageUrl) return;
setIsLoading(true);
if (imageUrl) return
setIsLoading(true)
try {
// Try to find the best available image for this game
const bestImageUrl = await findBestGameImage(game.id);
const bestImageUrl = await findBestGameImage(game.id)
if (bestImageUrl) {
setImageUrl(bestImageUrl);
setHasError(false);
setImageUrl(bestImageUrl)
setHasError(false)
} else {
setHasError(true);
setHasError(true)
}
} catch (error) {
console.error('Error fetching game image:', error);
setHasError(true);
console.error('Error fetching game image:', error)
setHasError(true)
} finally {
setIsLoading(false);
setIsLoading(false)
}
};
}
if (game.id) {
fetchGameImage();
fetchGameImage()
}
}, [game.id, imageUrl]);
}, [game.id, imageUrl])
// Determine if we should show CreamLinux buttons (only for native games)
const shouldShowCream = game.native === true;
const shouldShowCream = game.native === true
// Determine if we should show SmokeAPI buttons (only for non-native games with API files)
const shouldShowSmoke = !game.native && game.api_files && game.api_files.length > 0;
const shouldShowSmoke = !game.native && game.api_files && game.api_files.length > 0
// Check if this is a Proton game without API files
const isProtonNoApi = !game.native && (!game.api_files || game.api_files.length === 0);
const isProtonNoApi = !game.native && (!game.api_files || game.api_files.length === 0)
const handleCreamAction = () => {
if (game.installing) return;
const action: ActionType = game.cream_installed ? 'uninstall_cream' : 'install_cream';
onAction(game.id, action);
};
if (game.installing) return
const action: ActionType = game.cream_installed ? 'uninstall_cream' : 'install_cream'
onAction(game.id, action)
}
const handleSmokeAction = () => {
if (game.installing) return;
const action: ActionType = game.smoke_installed ? 'uninstall_smoke' : 'install_smoke';
onAction(game.id, action);
};
if (game.installing) return
const action: ActionType = game.smoke_installed ? 'uninstall_smoke' : 'install_smoke'
onAction(game.id, action)
}
// Handle edit button click
const handleEdit = () => {
if (onEdit && game.cream_installed) {
onEdit(game.id);
onEdit(game.id)
}
};
}
// Determine background image
const backgroundImage = !isLoading && imageUrl ?
`url(${imageUrl})` :
hasError ? 'linear-gradient(135deg, #232323, #1A1A1A)' : 'linear-gradient(135deg, #232323, #1A1A1A)';
const backgroundImage =
!isLoading && imageUrl
? `url(${imageUrl})`
: hasError
? 'linear-gradient(135deg, #232323, #1A1A1A)'
: 'linear-gradient(135deg, #232323, #1A1A1A)'
return (
<div
className="game-item-card"
style={{
<div
className="game-item-card"
style={{
backgroundImage,
backgroundSize: 'cover',
backgroundPosition: 'center',
@@ -103,14 +105,10 @@ const GameItem: React.FC<GameItemProps> = ({ game, onAction, onEdit }) => {
<span className={`status-badge ${game.native ? 'native' : 'proton'}`}>
{game.native ? 'Native' : 'Proton'}
</span>
{game.cream_installed && (
<span className="status-badge cream">CreamLinux</span>
)}
{game.smoke_installed && (
<span className="status-badge smoke">SmokeAPI</span>
)}
{game.cream_installed && <span className="status-badge cream">CreamLinux</span>}
{game.smoke_installed && <span className="status-badge smoke">SmokeAPI</span>}
</div>
<div className="game-title">
<h3>{game.title}</h3>
</div>
@@ -118,31 +116,39 @@ const GameItem: React.FC<GameItemProps> = ({ game, onAction, onEdit }) => {
<div className="game-actions">
{/* Show CreamLinux button only for native games */}
{shouldShowCream && (
<button
<button
className={`action-button ${game.cream_installed ? 'uninstall' : 'install'}`}
onClick={handleCreamAction}
disabled={!!game.installing}
>
{game.installing ? "Working..." : (game.cream_installed ? "Uninstall CreamLinux" : "Install CreamLinux")}
{game.installing
? 'Working...'
: game.cream_installed
? 'Uninstall CreamLinux'
: 'Install CreamLinux'}
</button>
)}
{/* Show SmokeAPI button only for Proton/Windows games with API files */}
{shouldShowSmoke && (
<button
<button
className={`action-button ${game.smoke_installed ? 'uninstall' : 'install'}`}
onClick={handleSmokeAction}
disabled={!!game.installing}
>
{game.installing ? "Working..." : (game.smoke_installed ? "Uninstall SmokeAPI" : "Install SmokeAPI")}
{game.installing
? 'Working...'
: game.smoke_installed
? 'Uninstall SmokeAPI'
: 'Install SmokeAPI'}
</button>
)}
{/* Show message for Proton games without API files */}
{isProtonNoApi && (
<div className="api-not-found-message">
<span>Steam API DLL not found</span>
<button
<button
className="rescan-button"
onClick={() => onAction(game.id, 'install_smoke')}
title="Attempt to scan again"
@@ -151,10 +157,10 @@ const GameItem: React.FC<GameItemProps> = ({ game, onAction, onEdit }) => {
</button>
</div>
)}
{/* Edit button - only enabled if CreamLinux is installed */}
{game.cream_installed && (
<button
<button
className="edit-button"
onClick={handleEdit}
disabled={!game.cream_installed || !!game.installing}
@@ -166,7 +172,7 @@ const GameItem: React.FC<GameItemProps> = ({ game, onAction, onEdit }) => {
</div>
</div>
</div>
);
};
)
}
export default GameItem;
export default GameItem

93
src/components/GameList.tsx
View File

@@ -1,92 +1,81 @@
// src/components/GameList.tsx
import React, { useState, useEffect, useMemo } from 'react';
import GameItem from './GameItem';
import ImagePreloader from './ImagePreloader';
import { ActionType } from './ActionButton';
import React, { useState, useEffect, useMemo } from 'react'
import GameItem from './GameItem'
import ImagePreloader from './ImagePreloader'
import { ActionType } from './ActionButton'
interface Game {
id: string;
title: string;
path: string;
platform?: string;
native: boolean;
api_files: string[];
cream_installed?: boolean;
smoke_installed?: boolean;
installing?: boolean;
id: string
title: string
path: string
platform?: string
native: boolean
api_files: string[]
cream_installed?: boolean
smoke_installed?: boolean
installing?: boolean
}
interface GameListProps {
games: Game[];
isLoading: boolean;
onAction: (gameId: string, action: ActionType) => Promise<void>;
onEdit?: (gameId: string) => void;
games: Game[]
isLoading: boolean
onAction: (gameId: string, action: ActionType) => Promise<void>
onEdit?: (gameId: string) => void
}
const GameList: React.FC<GameListProps> = ({
games,
isLoading,
onAction,
onEdit
}) => {
const [imagesPreloaded, setImagesPreloaded] = useState(false);
// Sort games alphabetically by title - using useMemo to avoid re-sorting on each render
const GameList: React.FC<GameListProps> = ({ games, isLoading, onAction, onEdit }) => {
const [imagesPreloaded, setImagesPreloaded] = useState(false)
// Sort games alphabetically by title using useMemo to avoid re-sorting on each render
const sortedGames = useMemo(() => {
return [...games].sort((a, b) => a.title.localeCompare(b.title));
}, [games]);
return [...games].sort((a, b) => a.title.localeCompare(b.title))
}, [games])
// Reset preloaded state when games change
useEffect(() => {
setImagesPreloaded(false);
}, [games]);
setImagesPreloaded(false)
}, [games])
// Debug log to help diagnose game states
useEffect(() => {
if (games.length > 0) {
console.log("Games state in GameList:", games.length, "games");
console.log('Games state in GameList:', games.length, 'games')
}
}, [games]);
}, [games])
if (isLoading) {
return (
<div className="game-list">
<div className="loading-indicator">Scanning for games...</div>
</div>
);
)
}
const handlePreloadComplete = () => {
setImagesPreloaded(true);
};
setImagesPreloaded(true)
}
return (
<div className="game-list">
<h2>Games ({games.length})</h2>
{!imagesPreloaded && games.length > 0 && (
<ImagePreloader
gameIds={sortedGames.map(game => game.id)}
<ImagePreloader
gameIds={sortedGames.map((game) => game.id)}
onComplete={handlePreloadComplete}
/>
)}
{games.length === 0 ? (
<div className="no-games-message">No games found</div>
) : (
<div className="game-grid">
{sortedGames.map(game => (
<GameItem
key={game.id}
game={game}
onAction={onAction}
onEdit={onEdit}
/>
{sortedGames.map((game) => (
<GameItem key={game.id} game={game} onAction={onAction} onEdit={onEdit} />
))}
</div>
)}
</div>
);
};
)
}
export default GameList;
export default GameList

35
src/components/Header.tsx
View File

@@ -1,40 +1,35 @@
// src/components/Header.tsx
import React from 'react';
import React from 'react'
interface HeaderProps {
onRefresh: () => void;
refreshDisabled?: boolean;
onSearch: (query: string) => void;
searchQuery: string;
onRefresh: () => void
refreshDisabled?: boolean
onSearch: (query: string) => void
searchQuery: string
}
const Header: React.FC<HeaderProps> = ({
onRefresh,
const Header: React.FC<HeaderProps> = ({
onRefresh,
refreshDisabled = false,
onSearch,
searchQuery
searchQuery,
}) => {
return (
<header className="app-header">
<h1>CreamLinux</h1>
<div className="header-controls">
<button
className="refresh-button"
onClick={onRefresh}
disabled={refreshDisabled}
>
<button className="refresh-button" onClick={onRefresh} disabled={refreshDisabled}>
Refresh
</button>
<input
type="text"
placeholder="Search games..."
<input
type="text"
placeholder="Search games..."
className="search-input"
value={searchQuery}
onChange={(e) => onSearch(e.target.value)}
/>
</div>
</header>
);
};
)
}
export default Header;
export default Header

51
src/components/ImagePreloader.tsx
View File

@@ -1,10 +1,9 @@
// src/components/ImagePreloader.tsx
import React, { useEffect } from 'react';
import { findBestGameImage } from '../services/ImageService';
import React, { useEffect } from 'react'
import { findBestGameImage } from '../services/ImageService'
interface ImagePreloaderProps {
gameIds: string[];
onComplete?: () => void;
gameIds: string[]
onComplete?: () => void
}
const ImagePreloader: React.FC<ImagePreloaderProps> = ({ gameIds, onComplete }) => {
@@ -12,37 +11,31 @@ const ImagePreloader: React.FC<ImagePreloaderProps> = ({ gameIds, onComplete })
const preloadImages = async () => {
try {
// Only preload the first batch for performance (10 images max)
const batchToPreload = gameIds.slice(0, 10);
const batchToPreload = gameIds.slice(0, 10)
// Load images in parallel
await Promise.allSettled(
batchToPreload.map(id => findBestGameImage(id))
);
await Promise.allSettled(batchToPreload.map((id) => findBestGameImage(id)))
if (onComplete) {
onComplete();
onComplete()
}
} catch (error) {
console.error("Error preloading images:", error);
console.error('Error preloading images:', error)
// Continue even if there's an error
if (onComplete) {
onComplete();
onComplete()
}
}
};
if (gameIds.length > 0) {
preloadImages();
} else if (onComplete) {
onComplete();
}
}, [gameIds, onComplete]);
return (
<div className="image-preloader">
{/* Hidden element, just used for preloading */}
</div>
);
};
export default ImagePreloader;
if (gameIds.length > 0) {
preloadImages()
} else if (onComplete) {
onComplete()
}
}, [gameIds, onComplete])
return <div className="image-preloader">{/* Hidden element, just used for preloading */}</div>
}
export default ImagePreloader

22
src/components/InitialLoadingScreen.tsx
View File

@@ -1,14 +1,11 @@
import React from 'react';
import React from 'react'
interface InitialLoadingScreenProps {
message: string;
progress: number;
message: string
progress: number
}
const InitialLoadingScreen: React.FC<InitialLoadingScreenProps> = ({
message,
progress
}) => {
const InitialLoadingScreen: React.FC<InitialLoadingScreenProps> = ({ message, progress }) => {
return (
<div className="initial-loading-screen">
<div className="loading-content">
@@ -22,15 +19,12 @@ const InitialLoadingScreen: React.FC<InitialLoadingScreenProps> = ({
</div>
<p className="loading-message">{message}</p>
<div className="progress-bar-container">
<div
className="progress-bar"
style={{ width: `${progress}%` }}
/>
<div className="progress-bar" style={{ width: `${progress}%` }} />
</div>
<div className="progress-percentage">{Math.round(progress)}%</div>
</div>
</div>
);
};
)
}
export default InitialLoadingScreen;
export default InitialLoadingScreen

164
src/components/ProgressDialog.tsx
View File

@@ -1,100 +1,100 @@
// src/components/ProgressDialog.tsx
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect } from 'react'
interface InstructionInfo {
type: string;
command: string;
game_title: string;
dlc_count?: number;
type: string
command: string
game_title: string
dlc_count?: number
}
interface ProgressDialogProps {
title: string;
message: string;
progress: number; // 0-100
visible: boolean;
showInstructions?: boolean;
instructions?: InstructionInfo;
onClose?: () => void;
title: string
message: string
progress: number // 0-100
visible: boolean
showInstructions?: boolean
instructions?: InstructionInfo
onClose?: () => void
}
const ProgressDialog: React.FC<ProgressDialogProps> = ({
title,
message,
progress,
const ProgressDialog: React.FC<ProgressDialogProps> = ({
title,
message,
progress,
visible,
showInstructions = false,
instructions,
onClose
onClose,
}) => {
const [copySuccess, setCopySuccess] = useState(false);
const [showContent, setShowContent] = useState(false);
const [copySuccess, setCopySuccess] = useState(false)
const [showContent, setShowContent] = useState(false)
// Reset copy state when dialog visibility changes
useEffect(() => {
if (!visible) {
setCopySuccess(false);
setShowContent(false);
setCopySuccess(false)
setShowContent(false)
} else {
// Add a small delay to trigger the entrance animation
const timer = setTimeout(() => {
setShowContent(true);
}, 50);
return () => clearTimeout(timer);
setShowContent(true)
}, 50)
return () => clearTimeout(timer)
}
}, [visible]);
}, [visible])
if (!visible) return null;
if (!visible) return null
const handleCopyCommand = () => {
if (instructions?.command) {
navigator.clipboard.writeText(instructions.command);
setCopySuccess(true);
navigator.clipboard.writeText(instructions.command)
setCopySuccess(true)
// Reset the success message after 2 seconds
setTimeout(() => {
setCopySuccess(false);
}, 2000);
setCopySuccess(false)
}, 2000)
}
};
}
const handleClose = () => {
setShowContent(false);
setShowContent(false)
// Delay closing to allow exit animation
setTimeout(() => {
if (onClose) {
onClose();
onClose()
}
}, 300);
};
}, 300)
}
// Modified to prevent closing when in progress
// Prevent closing when in progress
const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {
// Always prevent propagation
e.stopPropagation();
// Only allow clicking outside to close if we're done processing (100%)
e.stopPropagation()
// Only allow clicking outside to close if we're done processing (100%)
// and showing instructions or if explicitly allowed via a prop
if (e.target === e.currentTarget && progress >= 100 && showInstructions) {
handleClose();
handleClose()
}
// Otherwise, do nothing - require using the close button
};
}
// Determine if we should show the copy button (for CreamLinux but not SmokeAPI)
const showCopyButton = instructions?.type === 'cream_install' ||
instructions?.type === 'cream_uninstall';
const showCopyButton =
instructions?.type === 'cream_install' || instructions?.type === 'cream_uninstall'
// Format instruction message based on type
const getInstructionText = () => {
if (!instructions) return null;
if (!instructions) return null
switch (instructions.type) {
case 'cream_install':
return (
<>
<p className="instruction-text">
In Steam, set the following launch options for <strong>{instructions.game_title}</strong>:
In Steam, set the following launch options for{' '}
<strong>{instructions.game_title}</strong>:
</p>
{instructions.dlc_count !== undefined && (
<div className="dlc-count">
@@ -102,13 +102,14 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
</div>
)}
</>
);
)
case 'cream_uninstall':
return (
<p className="instruction-text">
For <strong>{instructions.game_title}</strong>, open Steam properties and remove the following launch option:
For <strong>{instructions.game_title}</strong>, open Steam properties and remove the
following launch option:
</p>
);
)
case 'smoke_install':
return (
<>
@@ -121,71 +122,67 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
</div>
)}
</>
);
)
case 'smoke_uninstall':
return (
<p className="instruction-text">
SmokeAPI has been uninstalled from <strong>{instructions.game_title}</strong>
</p>
);
)
default:
return (
<p className="instruction-text">
Done processing <strong>{instructions.game_title}</strong>
</p>
);
)
}
};
}
// Determine the CSS class for the command box based on instruction type
const getCommandBoxClass = () => {
return instructions?.type.includes('smoke') ? 'command-box command-box-smoke' : 'command-box';
};
return instructions?.type.includes('smoke') ? 'command-box command-box-smoke' : 'command-box'
}
// Determine if close button should be enabled
const isCloseButtonEnabled = showInstructions || progress >= 100;
const isCloseButtonEnabled = showInstructions || progress >= 100
return (
<div
className={`progress-dialog-overlay ${showContent ? 'visible' : ''}`}
<div
className={`progress-dialog-overlay ${showContent ? 'visible' : ''}`}
onClick={handleOverlayClick}
>
<div className={`progress-dialog ${showInstructions ? 'with-instructions' : ''} ${showContent ? 'dialog-visible' : ''}`}>
<div
className={`progress-dialog ${showInstructions ? 'with-instructions' : ''} ${showContent ? 'dialog-visible' : ''}`}
>
<h3>{title}</h3>
<p>{message}</p>
<div className="progress-bar-container">
<div
className="progress-bar"
style={{ width: `${progress}%` }}
/>
<div className="progress-bar" style={{ width: `${progress}%` }} />
</div>
<div className="progress-percentage">{Math.round(progress)}%</div>
{showInstructions && instructions && (
<div className="instruction-container">
<h4>
{instructions.type.includes('uninstall')
? 'Uninstallation Instructions'
{instructions.type.includes('uninstall')
? 'Uninstallation Instructions'
: 'Installation Instructions'}
</h4>
{getInstructionText()}
<div className={getCommandBoxClass()}>
<pre className="selectable-text">{instructions.command}</pre>
</div>
<div className="action-buttons">
{showCopyButton && (
<button
className="copy-button"
onClick={handleCopyCommand}
>
<button className="copy-button" onClick={handleCopyCommand}>
{copySuccess ? 'Copied!' : 'Copy to Clipboard'}
</button>
)}
<button
<button
className="close-button"
onClick={handleClose}
disabled={!isCloseButtonEnabled}
@@ -195,21 +192,18 @@ const ProgressDialog: React.FC<ProgressDialogProps> = ({
</div>
</div>
)}
{/* Show close button even if no instructions */}
{!showInstructions && progress >= 100 && (
<div className="action-buttons" style={{ marginTop: '1rem' }}>
<button
className="close-button"
onClick={handleClose}
>
<button className="close-button" onClick={handleClose}>
Close
</button>
</div>
)}
</div>
</div>
);
};
)
}
export default ProgressDialog;
export default ProgressDialog

26
src/components/Sidebar.tsx
View File

@@ -1,9 +1,8 @@
// src/components/Sidebar.tsx
import React from 'react';
import React from 'react'
interface SidebarProps {
setFilter: (filter: string) => void;
currentFilter: string;
setFilter: (filter: string) => void
currentFilter: string
}
const Sidebar: React.FC<SidebarProps> = ({ setFilter, currentFilter }) => {
@@ -11,27 +10,24 @@ const Sidebar: React.FC<SidebarProps> = ({ setFilter, currentFilter }) => {
<div className="sidebar">
<h2>Library</h2>
<ul className="filter-list">
<li
className={currentFilter === 'all' ? 'active' : ''}
onClick={() => setFilter('all')}
>
<li className={currentFilter === 'all' ? 'active' : ''} onClick={() => setFilter('all')}>
All Games
</li>
<li
className={currentFilter === 'native' ? 'active' : ''}
<li
className={currentFilter === 'native' ? 'active' : ''}
onClick={() => setFilter('native')}
>
Native
</li>
<li
className={currentFilter === 'proton' ? 'active' : ''}
<li
className={currentFilter === 'proton' ? 'active' : ''}
onClick={() => setFilter('proton')}
>
Proton Required
</li>
</ul>
</div>
);
};
)
}
export default Sidebar;
export default Sidebar

2
src/main.tsx
View File

@@ -5,5 +5,5 @@ import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
</StrictMode>
)

149
src/services/ImageService.ts
View File

@@ -1,5 +1,3 @@
// src/services/ImageService.ts
/**
* Game image sources from Steam's CDN
*/
@@ -9,88 +7,87 @@ export const SteamImageType = {
LOGO: 'logo', // Game logo with transparency
LIBRARY_HERO: 'library_hero', // 1920x620
LIBRARY_CAPSULE: 'library_600x900', // 600x900
} as const;
} as const
export type SteamImageTypeKey = keyof typeof SteamImageType;
export type SteamImageTypeKey = keyof typeof SteamImageType
// Cache for images to prevent flickering
const imageCache: Map<string, string> = new Map();
const imageCache: Map<string, string> = new Map()
/**
* Builds a Steam CDN URL for game images
* @param appId Steam application ID
* @param type Image type from SteamImageType enum
* @returns URL string for the image
*/
export const getSteamImageUrl = (appId: string, type: typeof SteamImageType[SteamImageTypeKey]) => {
return `https://cdn.cloudflare.steamstatic.com/steam/apps/${appId}/${type}.jpg`;
};
* Builds a Steam CDN URL for game images
* @param appId Steam application ID
* @param type Image type from SteamImageType enum
* @returns URL string for the image
*/
export const getSteamImageUrl = (
appId: string,
type: (typeof SteamImageType)[SteamImageTypeKey]
) => {
return `https://cdn.cloudflare.steamstatic.com/steam/apps/${appId}/${type}.jpg`
}
/**
* Checks if an image exists by performing a HEAD request
* @param url Image URL to check
* @returns Promise resolving to a boolean indicating if the image exists
*/
* Checks if an image exists by performing a HEAD request
* @param url Image URL to check
* @returns Promise resolving to a boolean indicating if the image exists
*/
export const checkImageExists = async (url: string): Promise<boolean> => {
try {
const response = await fetch(url, { method: 'HEAD' });
return response.ok;
} catch (error) {
console.error('Error checking image existence:', error);
return false;
}
};
/**
* Preloads an image for faster rendering
* @param url URL of image to preload
* @returns Promise that resolves when image is loaded
*/
const preloadImage = (url: string): Promise<string> => {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(url);
img.onerror = reject;
img.src = url;
});
};
/**
* Attempts to find a valid image for a Steam game, trying different image types
* @param appId Steam application ID
* @returns Promise resolving to a valid image URL or null if none found
*/
export const findBestGameImage = async (appId: string): Promise<string | null> => {
// Check cache first
if (imageCache.has(appId)) {
return imageCache.get(appId) || null;
}
// Try these image types in order of preference
const typesToTry = [
SteamImageType.HEADER,
SteamImageType.CAPSULE,
SteamImageType.LIBRARY_CAPSULE
];
for (const type of typesToTry) {
const url = getSteamImageUrl(appId, type);
const exists = await checkImageExists(url);
if (exists) {
try {
// Preload the image to prevent flickering
const preloadedUrl = await preloadImage(url);
// Store in cache
imageCache.set(appId, preloadedUrl);
return preloadedUrl;
} catch {
// If preloading fails, just return the URL
imageCache.set(appId, url);
return url;
}
try {
const response = await fetch(url, { method: 'HEAD' })
return response.ok
} catch (error) {
console.error('Error checking image existence:', error)
return false
}
}
// If we've reached here, no valid image was found
return null;
};
/**
* Preloads an image for faster rendering
* @param url URL of image to preload
* @returns Promise that resolves when image is loaded
*/
const preloadImage = (url: string): Promise<string> => {
return new Promise((resolve, reject) => {
const img = new Image()
img.onload = () => resolve(url)
img.onerror = reject
img.src = url
})
}
/**
* Attempts to find a valid image for a Steam game, trying different image types
* @param appId Steam application ID
* @returns Promise resolving to a valid image URL or null if none found
*/
export const findBestGameImage = async (appId: string): Promise<string | null> => {
// Check cache first
if (imageCache.has(appId)) {
return imageCache.get(appId) || null
}
// Try these image types in order of preference
const typesToTry = [SteamImageType.HEADER, SteamImageType.CAPSULE, SteamImageType.LIBRARY_CAPSULE]
for (const type of typesToTry) {
const url = getSteamImageUrl(appId, type)
const exists = await checkImageExists(url)
if (exists) {
try {
// Preload the image to prevent flickering
const preloadedUrl = await preloadImage(url)
// Store in cache
imageCache.set(appId, preloadedUrl)
return preloadedUrl
} catch {
// If preloading fails, just return the URL
imageCache.set(appId, url)
return url
}
}
}
// If we've reached here, no valid image was found
return null
}

18
src/styles/_fonts.scss
View File

@@ -1,10 +1,10 @@
@font-face {
font-family: 'Satoshi';
src: url('../assets/fonts/Satoshi.ttf') format('ttf'),
url('../assets/fonts/Roboto.ttf') format('ttf'),
url('../assets/fonts/WorkSans.ttf') format('ttf');
font-weight: 400; // adjust as needed
font-style: normal;
font-display: swap;
}
font-family: 'Satoshi';
src:
url('../assets/fonts/Satoshi.ttf') format('ttf'),
url('../assets/fonts/Roboto.ttf') format('ttf'),
url('../assets/fonts/WorkSans.ttf') format('ttf');
font-weight: 400;
font-style: normal;
font-display: swap;
}

29
src/styles/_layout.scss
View File

@@ -1,5 +1,3 @@
// src/styles/_layout.scss
@use './variables' as *;
@use './mixins' as *;
@@ -23,7 +21,7 @@
left: 0;
right: 0;
bottom: 0;
background-image:
background-image:
radial-gradient(circle at 20% 30%, rgba(var(--primary-color), 0.05) 0%, transparent 70%),
radial-gradient(circle at 80% 70%, rgba(var(--cream-color), 0.05) 0%, transparent 70%);
pointer-events: none;
@@ -41,7 +39,7 @@
position: relative;
z-index: var(--z-header);
height: var(--header-height);
h1 {
font-size: 1.5rem;
font-weight: 600;
@@ -57,7 +55,12 @@
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--cream-color), var(--primary-color), var(--smoke-color));
background: linear-gradient(
90deg,
var(--cream-color),
var(--primary-color),
var(--smoke-color)
);
opacity: 0.7;
}
@@ -71,7 +74,7 @@
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
}
.header-controls {
display: flex;
gap: 1rem;
@@ -88,7 +91,7 @@
z-index: var(--z-elevate);
}
/* Sidebar */
// Sidebar
.sidebar {
width: var(--sidebar-width);
min-width: var(--sidebar-width);
@@ -161,7 +164,8 @@
}
// Loading and empty state
.loading-indicator, .no-games-message {
.loading-indicator,
.no-games-message {
@include flex-center;
height: 250px;
width: 100%;
@@ -185,12 +189,7 @@
left: -100%;
width: 50%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.05),
transparent
);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
animation: loading-shimmer 2s infinite;
}
}
@@ -259,4 +258,4 @@
to {
left: 100%;
}
}
}

24
src/styles/_mixins.scss
View File

@@ -1,9 +1,5 @@
// src/styles/_mixins.scss
@use './variables' as *;
// src/styles/_mixins.scss
// Basic flex helpers
@mixin flex-center {
display: flex;
@@ -43,7 +39,7 @@
}
@mixin shadow-hover {
box-shadow: var(--shadow-hover);;
box-shadow: var(--shadow-hover);
}
@mixin text-shadow {
@@ -60,19 +56,27 @@
// Responsive mixins
@mixin media-sm {
@media (min-width: 576px) { @content; }
@media (min-width: 576px) {
@content;
}
}
@mixin media-md {
@media (min-width: 768px) { @content; }
@media (min-width: 768px) {
@content;
}
}
@mixin media-lg {
@media (min-width: 992px) { @content; }
@media (min-width: 992px) {
@content;
}
}
@mixin media-xl {
@media (min-width: 1200px) { @content; }
@media (min-width: 1200px) {
@content;
}
}
// Card base styling
@@ -104,4 +108,4 @@
&::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, white 10%, var(--primary-color));
}
}
}

25
src/styles/_reset.scss
View File

@@ -1,9 +1,6 @@
// src/styles/_reset.scss
@use './variables' as *;
@use './mixins' as *;
@use './fonts' as *;
// src/styles/_reset.scss
* {
box-sizing: border-box;
@@ -11,7 +8,8 @@
padding: 0;
}
html, body {
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
@@ -23,7 +21,7 @@ body {
-moz-osx-font-smoothing: grayscale;
background-color: var(--primary-bg);
color: var(--text-primary);
/* Prevent text selection by default */
// Prevent text selection by default
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
@@ -51,15 +49,24 @@ a {
text-decoration: none;
}
ul, ol {
ul,
ol {
list-style: none;
}
input, button, textarea, select {
input,
button,
textarea,
select {
font: inherit;
}
h1, h2, h3, h4, h5, h6 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: inherit;
font-size: inherit;
}
}

175
src/styles/_variables.scss
View File

@@ -1,111 +1,102 @@
// src/styles/_variables.scss
@use './fonts' as *;
// Color palette
:root {
// Primary colors
--primary-color: #ffc896;
--secondary-color: #ffb278;
// Primary colors
--primary-color: #ffc896;
--secondary-color: #ffb278;
// Background
--primary-bg: #0f0f0f;
--secondary-bg: #151515;
--tertiary-bg: #121212;
--elevated-bg: #1a1a1a;
--disabled: #5E5E5E;
// Background
--primary-bg: #0f0f0f;
--secondary-bg: #151515;
--tertiary-bg: #121212;
--elevated-bg: #1a1a1a;
--disabled: #5e5e5e;
// Text
--text-primary: #f0f0f0;
--text-secondary: #c8c8c8;
--text-soft: #afafaf;
--text-heavy: #1a1a1a;
--text-muted: #4b4b4b;
// Text
--text-primary: #f0f0f0;
--text-secondary: #c8c8c8;
--text-soft: #afafaf;
--text-heavy: #1a1a1a;
--text-muted: #4b4b4b;
// Borders
--border-dark: #1a1a1a;
--border-soft: #282828;
--border: #323232;
// Status colors - more vibrant
--success: #8cc893;
--warning: #ffc896;
--danger: #d96b6b;
--info: #80b4ff;
// Borders
--border-dark: #1a1a1a;
--border-soft: #282828;
--border: #323232;
--success-light: #b0e0a9;
--warning-light: #ffdcb9;
--danger-light: #e69691;
--info-light: #a8d2ff;
// Status colors
--success: #8cc893;
--warning: #ffc896;
--danger: #d96b6b;
--info: #80b4ff;
--success-soft: rgba(176, 224, 169, 0.15);
--warning-soft: rgba(247, 200, 111, 0.15);
--danger-soft: rgba(230, 150, 145, 0.15);
--info-soft: rgba(168, 210, 255, 0.15);
--success-light: #b0e0a9;
--warning-light: #ffdcb9;
--danger-light: #e69691;
--info-light: #a8d2ff;
// Feature colors
--native: #8cc893;
--proton: #ffc896;
--cream: #80b4ff;
--smoke: #fff096;
--modal-backdrop: rgba(30, 30, 30, 0.95);
// Animation durations
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
// Animation easings
--easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
--easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
--easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--success-soft: rgba(176, 224, 169, 0.15);
--warning-soft: rgba(247, 200, 111, 0.15);
--danger-soft: rgba(230, 150, 145, 0.15);
--info-soft: rgba(168, 210, 255, 0.15);
// Layout values
--header-height: 64px;
--sidebar-width: 250px;
--card-height: 200px;
// Feature colors
--native: #8cc893;
--proton: #ffc896;
--cream: #80b4ff;
--smoke: #fff096;
// Border radius
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--modal-backdrop: rgba(30, 30, 30, 0.95);
// Font weights
--thin: 100;
--extralight: 200;
--light: 300;
--normal: 400;
--medium: 500;
--semibold: 600;
--bold: 700;
--extrabold: 800;
// Animation durations
--duration-fast: 100ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--family: 'Satoshi';
// Animation easings
--easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
--easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
--easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
// Shadows
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
--shadow-standard: 0 10px 25px rgba(0, 0, 0, 0.5);
--shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.7);
// Layout values
--header-height: 64px;
--sidebar-width: 250px;
--card-height: 200px;
// Z-index levels
//--z-index-bg: 0;
//--z-index-content: 1;
//--z-index-header: 100;
//--z-index-modal: 1000;
//--z-index-tooltip: 1500;
// Border radius
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
// Z-index levels
--z-bg: 0;
--z-elevate: 1;
--z-header: 100;
--z-modal: 1000;
--z-tooltip: 1500;
// Font weights
--thin: 100;
--extralight: 200;
--light: 300;
--normal: 400;
--medium: 500;
--semibold: 600;
--bold: 700;
--extrabold: 800;
--family: 'Satoshi';
// Shadows
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
--shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
--shadow-standard: 0 10px 25px rgba(0, 0, 0, 0.5);
--shadow-hover: 0 15px 30px rgba(0, 0, 0, 0.7);
// Z-index levels
--z-bg: 0;
--z-elevate: 1;
--z-header: 100;
--z-modal: 1000;
--z-tooltip: 1500;
}
$success-color: #55e07a;
@@ -113,4 +104,4 @@ $danger-color: #ff5252;
$primary-color: #4a76c4;
$cream-color: #9b7dff;
$smoke-color: #fbb13c;
$warning-color: #fbb13c;
$warning-color: #fbb13c;

10
src/styles/components/_animated_checkbox.scss
View File

@@ -1,5 +1,3 @@
// src/styles/components/_animated_checkbox.scss
@use '../variables' as *;
@use '../mixins' as *;
@@ -9,7 +7,7 @@
cursor: pointer;
width: 100%;
position: relative;
&:hover .checkbox-custom {
border-color: rgba(255, 255, 255, 0.3);
}
@@ -35,7 +33,7 @@
margin-right: 15px;
flex-shrink: 0;
position: relative;
&.checked {
background-color: var(--primary-color, #ffc896);
border-color: var(--primary-color, #ffc896);
@@ -53,7 +51,7 @@
stroke-dashoffset: 30;
opacity: 0;
transition: stroke-dashoffset 0.3s ease;
&.checked {
stroke-dashoffset: 0;
opacity: 1;
@@ -95,4 +93,4 @@
stroke-dashoffset: 0;
opacity: 1;
}
}
}

4
src/styles/components/_background.scss
View File

@@ -1,5 +1,3 @@
// src/styles/_components/_background.scss
@use '../variables' as *;
@use '../mixins' as *;
@use 'sass:color';
@@ -13,4 +11,4 @@
pointer-events: none;
z-index: var(--z-bg);
opacity: 0.4;
}
}

57
src/styles/components/_dialog.scss
View File

@@ -1,9 +1,7 @@
// src/styles/_components/_dialog.scss
@use '../variables' as *;
@use '../mixins' as *;
/* Progress Dialog */
// Progress Dialog
.progress-dialog-overlay {
position: fixed;
top: 0;
@@ -17,22 +15,28 @@
opacity: 0;
animation: modal-appear 0.2s ease-out;
cursor: pointer;
&.visible {
opacity: 1;
}
@keyframes modal-appear {
0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
}
.progress-dialog {
background-color: var(--elevated-bg);
border-radius: 8px;
padding: 1.5rem;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); /* shadow-glow */
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); // shadow-glow
width: 450px;
max-width: 90vw;
border: 1px solid var(--border-soft);
@@ -43,17 +47,17 @@
transform: scale(1);
opacity: 1;
}
&.with-instructions {
width: 500px;
}
h3 {
font-weight: 700;
margin-bottom: 1rem;
color: var(--text-primary);
}
p {
margin-bottom: 1rem;
color: var(--text-secondary);
@@ -85,7 +89,7 @@
margin-bottom: 1rem;
}
/* Instruction container in progress dialog */
// Instruction container in progress dialog
.instruction-container {
margin-top: 1.5rem;
padding-top: 1rem;
@@ -112,7 +116,7 @@
color: var(--info);
border-radius: 4px;
font-size: 0.8rem;
&::before {
content: '';
display: inline-block;
@@ -143,7 +147,7 @@
max-width: 100%;
}
}
.selectable-text {
font-size: 0.9rem;
line-height: 1.5;
@@ -164,7 +168,8 @@
justify-content: flex-end;
}
.copy-button, .close-button {
.copy-button,
.close-button {
padding: 0.6rem 1.2rem;
border-radius: var(--radius-sm);
font-weight: 600;
@@ -180,7 +185,7 @@
&:hover {
background-color: var(--primary-color);
transform: translateY(-2px) scale(1.02); /* hover-lift */
transform: translateY(-2px) scale(1.02); // hover-lift
box-shadow: 0 6px 14px var(--info-soft);
}
}
@@ -191,7 +196,7 @@
&:hover {
background-color: var(--border);
transform: translateY(-2px) scale(1.02); /* hover-lift */
transform: translateY(-2px) scale(1.02); // hover-lift
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
}
@@ -210,20 +215,20 @@
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(5px);
text-align: center;
h3 {
color: var(--danger);
font-weight: 700;
margin-bottom: 1rem;
}
p {
margin-bottom: 1.5rem;
color: var(--text-secondary);
white-space: pre-wrap;
word-break: break-word;
}
button {
background-color: var(--primary-color);
color: var(--text-primary);
@@ -234,7 +239,7 @@
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
@include transition-standard;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(var(--primary-color), 0.4);
@@ -244,6 +249,10 @@
// Animation for progress bar
@keyframes progress-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}

103
src/styles/components/_dlc_dialog.scss
View File

@@ -1,5 +1,3 @@
// src/styles/components/_dlc_dialog.scss
@use '../variables' as *;
@use '../mixins' as *;
@@ -15,7 +13,7 @@
z-index: var(--z-modal);
opacity: 0;
cursor: pointer;
&.visible {
opacity: 1;
animation: modal-appear 0.2s ease-out;
@@ -35,18 +33,20 @@
cursor: default;
opacity: 0;
transform: scale(0.95);
&.dialog-visible {
transform: scale(1);
opacity: 1;
transition: transform 0.2s var(--easing-bounce), opacity 0.2s ease-out;
transition:
transform 0.2s var(--easing-bounce),
opacity 0.2s ease-out;
}
}
.dlc-dialog-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border-soft);
h3 {
font-size: 1.2rem;
font-weight: 700;
@@ -60,12 +60,12 @@
justify-content: space-between;
align-items: center;
margin-top: 0.5rem;
.game-title {
font-weight: 500;
color: var(--text-secondary);
}
.dlc-count {
font-size: 0.9rem;
padding: 0.3rem 0.6rem;
@@ -94,13 +94,13 @@
padding: 0.6rem 1rem;
font-size: 0.9rem;
@include transition-standard;
&:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0px 0px 6px rgba(245, 150, 130, 0.2);
}
&::placeholder {
color: var(--text-muted);
}
@@ -110,12 +110,12 @@
display: flex;
align-items: center;
min-width: 100px;
// Custom styling for the select all checkbox
:global(.animated-checkbox) {
margin-left: auto;
}
:global(.checkbox-label) {
font-size: 0.9rem;
color: var(--text-secondary);
@@ -126,7 +126,7 @@
padding: 0.75rem 1.5rem;
background-color: rgba(0, 0, 0, 0.05);
border-bottom: 1px solid var(--border-soft);
.progress-bar-container {
height: 6px;
background-color: var(--border-soft);
@@ -134,7 +134,7 @@
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-bar {
height: 100%;
background-color: var(--primary-color);
@@ -143,13 +143,13 @@
background: var(--primary-color);
box-shadow: 0px 0px 6px rgba(128, 181, 255, 0.3);
}
.loading-details {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--text-secondary);
.time-left {
color: var(--text-muted);
}
@@ -171,54 +171,56 @@
padding: 0.75rem 1.5rem;
border-bottom: 1px solid var(--border-soft);
@include transition-standard;
&:hover {
background-color: rgba(255, 255, 255, 0.03);
}
&:last-child {
border-bottom: none;
}
&.dlc-item-loading {
height: 30px;
display: flex;
align-items: center;
justify-content: center;
.loading-pulse {
width: 70%;
height: 20px;
background: linear-gradient(90deg,
var(--border-soft) 0%,
var(--border) 50%,
var(--border-soft) 100%);
background: linear-gradient(
90deg,
var(--border-soft) 0%,
var(--border) 50%,
var(--border-soft) 100%
);
background-size: 200% 100%;
border-radius: 4px;
animation: loading-pulse 1.5s infinite;
}
}
// Enhanced styling for the checkbox component inside dlc-item
// Styling for the checkbox component inside dlc-item
:global(.animated-checkbox) {
width: 100%;
.checkbox-label {
color: var(--text-primary);
font-weight: 500;
transition: color 0.15s ease;
}
.checkbox-sublabel {
color: var(--text-muted);
}
// Optional hover effect
&:hover {
.checkbox-label {
color: var(--primary-color);
}
.checkbox-custom {
border-color: var(--primary-color, #ffc896);
transform: scale(1.05);
@@ -232,7 +234,7 @@
@include flex-center;
flex-direction: column;
gap: 1rem;
.loading-spinner {
width: 40px;
height: 40px;
@@ -241,7 +243,7 @@
border-radius: 50%;
animation: spin 1s linear infinite;
}
p {
color: var(--text-secondary);
}
@@ -261,7 +263,8 @@
gap: 1rem;
}
.cancel-button, .confirm-button {
.cancel-button,
.confirm-button {
padding: 0.6rem 1.2rem;
border-radius: var(--radius-sm);
font-weight: 600;
@@ -274,7 +277,7 @@
.cancel-button {
background-color: var(--border-soft);
color: var(--text-primary);
&:hover {
background-color: var(--border);
transform: translateY(-2px);
@@ -285,12 +288,12 @@
.confirm-button {
background-color: var(--primary-color);
color: white;
&:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px var(--info-soft);
}
&:disabled {
opacity: 0.7;
cursor: not-allowed;
@@ -299,16 +302,30 @@
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes modal-appear {
0% { opacity: 0; transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
0% {
opacity: 0;
transform: scale(0.95);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes loading-pulse {
0% { background-position: 200% 50%; }
100% { background-position: 0% 50%; }
}
0% {
background-position: 200% 50%;
}
100% {
background-position: 0% 50%;
}
}

59
src/styles/components/_gamecard.scss
View File

@@ -1,5 +1,3 @@
// src/styles/components/_gamecard.scss
@use '../variables' as *;
@use '../mixins' as *;
@@ -12,7 +10,7 @@
@include shadow-standard;
@include transition-standard;
transform-origin: center;
// Simple image loading animation
opacity: 0;
animation: fadeIn 0.5s forwards;
@@ -23,19 +21,19 @@
transform: translateY(-8px) scale(1.02);
@include shadow-hover;
z-index: 5;
.status-badge.native {
box-shadow: 0 0 10px rgba(85, 224, 122, 0.5)
box-shadow: 0 0 10px rgba(85, 224, 122, 0.5);
}
.status-badge.proton {
box-shadow: 0 0 10px rgba(255, 201, 150, 0.5);
}
.status-badge.cream {
box-shadow: 0 0 10px rgba(128, 181, 255, 0.5);
}
.status-badge.smoke {
box-shadow: 0 0 10px rgba(255, 239, 150, 0.5);
}
@@ -43,11 +41,15 @@
// Special styling for cards with different statuses
.game-item-card:has(.status-badge.cream) {
box-shadow: var(--shadow-standard), 0 0 15px rgba(128, 181, 255, 0.15);
box-shadow:
var(--shadow-standard),
0 0 15px rgba(128, 181, 255, 0.15);
}
.game-item-card:has(.status-badge.smoke) {
box-shadow: var(--shadow-standard), 0 0 15px rgba(255, 239, 150, 0.15);
box-shadow:
var(--shadow-standard),
0 0 15px rgba(255, 239, 150, 0.15);
}
// Simple clean overlay
@@ -57,7 +59,8 @@
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom,
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.5) 0%,
rgba(0, 0, 0, 0.6) 50%,
rgba(0, 0, 0, 0.8) 100%
@@ -70,7 +73,7 @@
font-family: var(--family);
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: geometricPrecision;
color: var(--text-heavy);;
color: var(--text-heavy);
z-index: 1;
}
@@ -92,7 +95,7 @@
font-family: var(--family);
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: geometricPrecision;
color: var(--text-heavy);;
color: var(--text-heavy);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
@include transition-standard;
border: 1px solid rgba(255, 255, 255, 0.1);
@@ -129,7 +132,7 @@
margin: 0;
-webkit-font-smoothing: subpixel-antialiased;
text-rendering: geometricPrecision;
transform: translateZ(0); // or
transform: translateZ(0);
will-change: opacity, transform;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
overflow: hidden;
@@ -176,7 +179,7 @@
.action-button.uninstall:hover {
background-color: var(--danger-light);
transform: translateY(-2px) scale(1.02);
box-shadow: 0px 0px 12px rgba(217, 107, 107, 0.3)
box-shadow: 0px 0px 12px rgba(217, 107, 107, 0.3);
}
.action-button:active {
@@ -241,11 +244,11 @@
font-size: 0.85rem;
color: var(--text-primary);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
span {
flex: 1;
}
.rescan-button {
background-color: var(--warning);
color: var(--text-heavy);
@@ -257,12 +260,12 @@
margin-left: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background-color: var(--warning-light);
transform: translateY(-2px);
}
&:active {
transform: translateY(0);
}
@@ -271,17 +274,23 @@
// Apply staggered delay to cards
@for $i from 1 through 12 {
.game-grid .game-item-card:nth-child(#{$i}) {
animation-delay: #{$i * 0.05}s;
.game-grid .game-item-card:nth-child(#{$i}) {
animation-delay: #{$i * 0.05}s;
}
}
// Simple animations
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes button-loading {
to { left: 100%; }
}
to {
left: 100%;
}
}

144
src/styles/components/_header.scss
View File

@@ -1,82 +1,80 @@
// src/styles/_components/_header.scss
@use '../variables' as *;
@use '../mixins' as *;
.app-container {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--primary-bg);
position: relative;
}
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--primary-bg);
position: relative;
}
// Header
.app-header {
@include flex-between;
padding: 1rem 2rem;
background-color: var(--tertiary-bg);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
position: relative;
z-index: var(--z-header);
height: var(--header-height);
h1 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.5px;
@include text-shadow;
}
}
.header-controls {
display: flex;
gap: 1rem;
align-items: center;
}
.refresh-button {
background-color: var(--primary-color);
@include flex-between;
padding: 1rem 2rem;
background-color: var(--tertiary-bg);
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
position: relative;
z-index: var(--z-header);
height: var(--header-height);
h1 {
font-size: 1.5rem;
font-weight: 600;
color: var(--text-primary);
border: none;
border-radius: 4px;
padding: 0.6rem 1.2rem;
font-weight: var(--bold);
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease;
@include text-shadow;
}
.refresh-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(245, 150, 130, 0.3);
background-color: var(--primary-color);
}
.refresh-button:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.search-input {
padding: 0.5rem 1rem;
border: 1px solid var(--border-soft);
border-radius: 4px;
min-width: 200px;
background-color: var(--border-dark);
color: var(--text-primary);
}
.search-input:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0px 0px 6px rgba(245, 150, 130, 0.2);
}
}
.header-controls {
display: flex;
gap: 1rem;
align-items: center;
}
.refresh-button {
background-color: var(--primary-color);
color: var(--text-primary);
border: none;
border-radius: 4px;
padding: 0.6rem 1.2rem;
font-weight: var(--bold);
letter-spacing: 0.5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease;
}
.refresh-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(245, 150, 130, 0.3);
background-color: var(--primary-color);
}
.refresh-button:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.search-input {
padding: 0.5rem 1rem;
border: 1px solid var(--border-soft);
border-radius: 4px;
min-width: 200px;
background-color: var(--border-dark);
color: var(--text-primary);
}
.search-input:focus {
border-color: var(--primary-color);
outline: none;
box-shadow: 0px 0px 6px rgba(245, 150, 130, 0.2);
}

41
src/styles/components/_loading_screen.scss
View File

@@ -9,13 +9,13 @@
align-items: center;
justify-content: center;
z-index: var(--z-modal) + 1;
.loading-content {
text-align: center;
padding: 2rem;
max-width: 500px;
width: 90%;
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
@@ -23,46 +23,46 @@
color: var(--primary-color);
text-shadow: 0 2px 10px rgba(var(--primary-color), 0.4);
}
.loading-animation {
margin-bottom: 2rem;
}
.loading-circles {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
.circle {
width: 20px;
height: 20px;
border-radius: 50%;
animation: bounce 1.4s infinite ease-in-out both;
&.circle-1 {
background-color: var(--primary-color);
animation-delay: -0.32s;
}
&.circle-2 {
background-color: var(--cream-color);
animation-delay: -0.16s;
}
&.circle-3 {
background-color: var(--smoke-color);
}
}
}
.loading-message {
font-size: 1.1rem;
color: var(--text-secondary);
margin-bottom: 1.5rem;
min-height: 3rem;
}
.progress-bar-container {
height: 8px;
background-color: var(--border-soft);
@@ -70,16 +70,21 @@
overflow: hidden;
margin-bottom: 0.5rem;
}
.progress-bar {
height: 100%;
background-color: var(--primary-color);
border-radius: 4px;
transition: width 0.5s ease;
background: linear-gradient(to right, var(--cream-color), var(--primary-color), var(--smoke-color));
background: linear-gradient(
to right,
var(--cream-color),
var(--primary-color),
var(--smoke-color)
);
box-shadow: 0px 0px 10px rgba(255, 200, 150, 0.4);
}
.progress-percentage {
text-align: right;
font-size: 0.875rem;
@@ -91,10 +96,12 @@
// Animation for the bouncing circles
@keyframes bounce {
0%, 80%, 100% {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1.0);
40% {
transform: scale(1);
}
}
}

48
src/styles/components/_sidebar.scss
View File

@@ -1,12 +1,10 @@
// src/styles/_components/_sidebar.scss
@use '../variables' as *;
@use '../mixins' as *;
.filter-list {
list-style: none;
margin-bottom: 1.5rem;
li {
@include transition-standard;
border-radius: var(--radius-sm);
@@ -14,11 +12,11 @@
margin-bottom: 0.3rem;
font-weight: 500;
cursor: pointer;
&:hover {
background-color: rgba(255, 255, 255, 0.07);
}
&.active {
@include gradient-bg($primary-color, color-mix(in srgb, black 10%, var(--primary-color)));
box-shadow: 0 4px 10px rgba(var(--primary-color), 0.3);
@@ -30,7 +28,7 @@
.custom-select {
position: relative;
display: inline-block;
.select-selected {
background-color: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.1);
@@ -45,18 +43,18 @@
justify-content: space-between;
gap: 10px;
min-width: 150px;
&:after {
content: '⯆';
font-size: 0.7rem;
opacity: 0.7;
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
}
.select-items {
position: absolute;
top: 100%;
@@ -71,20 +69,20 @@
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
&.show {
max-height: 300px;
}
.select-item {
padding: 0.5rem 1rem;
cursor: pointer;
@include transition-standard;
&:hover {
background-color: rgba(255, 255, 255, 0.07);
}
&.selected {
background-color: var(--primary-color);
color: var(--text-primary);
@@ -98,7 +96,7 @@
display: flex;
align-items: center;
gap: 10px;
svg {
width: 28px;
height: 28px;
@@ -111,13 +109,13 @@
.tooltip {
position: relative;
display: inline-block;
&:hover .tooltip-content {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.tooltip-content {
visibility: hidden;
width: 200px;
@@ -133,14 +131,16 @@
margin-left: -100px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s;
transition:
opacity 0.3s,
transform 0.3s;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.8rem;
pointer-events: none;
&::after {
content: "";
content: '';
position: absolute;
top: 100%;
left: 50%;
@@ -192,15 +192,17 @@
@include transition-standard;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2);
min-width: 200px;
&:focus {
border-color: var(--primary-color);
background-color: rgba(255, 255, 255, 0.1);
outline: none;
box-shadow: 0 0 0 2px rgba(var(--primary-color), 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow:
0 0 0 2px rgba(var(--primary-color), 0.3),
inset 0 2px 5px rgba(0, 0, 0, 0.2);
}
&::placeholder {
color: rgba(255, 255, 255, 0.4);
}
}
}

4
src/styles/main.scss
View File

@@ -1,5 +1,3 @@
// src/styles/main.scss
// Import variables and mixins first
@use './variables' as *;
@use './mixins' as *;
@@ -18,4 +16,4 @@
@use './components/sidebar';
@use './components/dlc_dialog';
@use './components/loading_screen';
@use './components/animated_checkbox';
@use './components/animated_checkbox';