mirror of
https://github.com/Novattz/creamlinux-installer.git
synced 2025-12-06 03:55:37 -05:00
improve SmokeAPI detection and redesign loading screen
This commit is contained in:
Novattz
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "creamlinux",
|
||||
"private": true,
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"type": "module",
|
||||
"author": "Tickbase",
|
||||
"repository": "https://github.com/Novattz/creamlinux-installer",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
[package]
|
||||
name = "app"
|
||||
version = "1.0.5"
|
||||
version = "1.0.6"
|
||||
description = "DLC Manager for Steam games on Linux"
|
||||
authors = ["tickbase"]
|
||||
license = "MIT"
|
||||
|
||||
@@ -1019,7 +1019,7 @@ where
|
||||
// Check if this is SmokeAPI DLL file with the correct architecture
|
||||
if file_name.to_lowercase().ends_with(".dll")
|
||||
&& file_name.to_lowercase().contains("smoke")
|
||||
&& file_name.contains(target_arch) {
|
||||
&& file_name.to_lowercase().contains(&format!("{}.dll", target_arch)) {
|
||||
|
||||
matching_dll_name = Some(file_name.to_string());
|
||||
break;
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
},
|
||||
"productName": "Creamlinux",
|
||||
"mainBinaryName": "creamlinux",
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"identifier": "com.creamlinux.dev",
|
||||
"app": {
|
||||
"withGlobalTauri": false,
|
||||
|
||||
@@ -59,7 +59,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({ visible, onClose }) =>
|
||||
<div className="app-info">
|
||||
<div className="info-row">
|
||||
<span className="info-label">Version:</span>
|
||||
<span className="info-value">1.0.2</span>
|
||||
<span className="info-value">1.0.6</span>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<span className="info-label">Build:</span>
|
||||
|
||||
@@ -10,31 +10,27 @@ interface InitialLoadingScreenProps {
|
||||
* Initial loading screen displayed when the app first loads
|
||||
*/
|
||||
const InitialLoadingScreen = ({ message, progress }: InitialLoadingScreenProps) => {
|
||||
const [detailedStatus, setDetailedStatus] = useState<string[]>([
|
||||
'Initializing application...',
|
||||
'Setting up Steam integration...',
|
||||
'Preparing DLC management...',
|
||||
])
|
||||
const [currentStep, setCurrentStep] = useState(0)
|
||||
|
||||
// Use a sequence of messages based on progress
|
||||
useEffect(() => {
|
||||
const messages = [
|
||||
{ threshold: 10, message: 'Checking system requirements...' },
|
||||
{ threshold: 30, message: 'Scanning Steam libraries...' },
|
||||
{ threshold: 50, message: 'Discovering games...' },
|
||||
{ threshold: 70, message: 'Analyzing game configurations...' },
|
||||
{ threshold: 90, message: 'Preparing user interface...' },
|
||||
{ threshold: 100, message: 'Ready to launch!' },
|
||||
// Define the loading steps
|
||||
const steps = [
|
||||
'Checking system requirements...',
|
||||
'Scanning Steam libraries...',
|
||||
'Discovering games...',
|
||||
'Preparing user interface...',
|
||||
]
|
||||
|
||||
// Find current status message based on progress
|
||||
const currentMessage = messages.find((m) => progress <= m.threshold)?.message || 'Loading...'
|
||||
// Update current step based on progress
|
||||
useEffect(() => {
|
||||
const stepThresholds = [25, 50, 75, 100]
|
||||
const newStep = stepThresholds.findIndex(threshold => progress < threshold)
|
||||
|
||||
// Add new messages to the log as progress increases
|
||||
if (currentMessage && !detailedStatus.includes(currentMessage)) {
|
||||
setDetailedStatus((prev) => [...prev, currentMessage])
|
||||
if (newStep !== -1 && newStep !== currentStep) {
|
||||
setCurrentStep(newStep)
|
||||
} else if (newStep === -1 && currentStep !== steps.length - 1) {
|
||||
setCurrentStep(steps.length - 1)
|
||||
}
|
||||
}, [progress, detailedStatus])
|
||||
}, [progress, currentStep, steps.length])
|
||||
|
||||
return (
|
||||
<div className="initial-loading-screen">
|
||||
@@ -42,31 +38,19 @@ const InitialLoadingScreen = ({ message, progress }: InitialLoadingScreenProps)
|
||||
<h1>CreamLinux</h1>
|
||||
|
||||
<div className="loading-animation">
|
||||
{/* Enhanced animation with SVG or more elaborate CSS animation */}
|
||||
<div className="loading-circles">
|
||||
<div className="circle circle-1"></div>
|
||||
<div className="circle circle-2"></div>
|
||||
<div className="circle circle-3"></div>
|
||||
</div>
|
||||
{/* Spinner animation */}
|
||||
<div className="loading-spinner"></div>
|
||||
</div>
|
||||
|
||||
<p className="loading-message">{message}</p>
|
||||
|
||||
{/* Add a detailed status log that shows progress steps */}
|
||||
{/* Single step display that changes */}
|
||||
<div className="loading-status-log">
|
||||
{detailedStatus.slice(-4).map((status, index) => (
|
||||
<div key={index} className="status-line">
|
||||
<span className="status-indicator">○</span>
|
||||
<span className="status-text">{status}</span>
|
||||
<div className="status-line active">
|
||||
<span className="status-step">[{currentStep + 1}/{steps.length}]</span>
|
||||
<span className="status-text">{steps[currentStep]}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="progress-bar-container">
|
||||
<div className="progress-bar" style={{ width: `${progress}%` }} />
|
||||
</div>
|
||||
|
||||
<div className="progress-percentage">{Math.round(progress)}%</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -8,19 +8,21 @@
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: var(--primary-bg);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--primary-bg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-modal) + 1;
|
||||
z-index: 9999;
|
||||
|
||||
.loading-content {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
@@ -31,72 +33,46 @@
|
||||
}
|
||||
|
||||
.loading-animation {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
margin: 1rem 0;
|
||||
|
||||
.loading-circles {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.circle {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
// Spinner styles - thicker border
|
||||
.loading-spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
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);
|
||||
}
|
||||
border: 6px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: var(--primary-color);
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-message {
|
||||
font-size: 1.1rem;
|
||||
font-size: 1rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
min-height: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loading-status-log {
|
||||
margin: 1rem 0;
|
||||
text-align: left;
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
|
||||
.status-line {
|
||||
margin: 0.5rem 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.status-indicator {
|
||||
&.active {
|
||||
background-color: rgba(var(--primary-color-rgb), 0.1);
|
||||
|
||||
.status-step {
|
||||
color: var(--primary-color);
|
||||
margin-right: 0.5rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.status-indicator {
|
||||
color: var(--success);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
@@ -104,48 +80,21 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
height: 8px;
|
||||
background-color: var(--border-soft);
|
||||
border-radius: 4px;
|
||||
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)
|
||||
);
|
||||
box-shadow: 0px 0px 10px rgba(255, 200, 150, 0.4);
|
||||
}
|
||||
|
||||
.progress-percentage {
|
||||
text-align: right;
|
||||
font-size: 0.875rem;
|
||||
.status-step {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: 500;
|
||||
min-width: 3rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// Animation for the bouncing circles
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
transform: scale(0);
|
||||
}
|
||||
40% {
|
||||
transform: scale(1);
|
||||
.status-text {
|
||||
color: var(--text-secondary);
|
||||
text-align: left;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user