improve SmokeAPI detection and redesign loading screen

.github/ISSUE_TEMPLATE/bug_report.md

@@ -31,6 +31,7 @@ If applicable, add screenshots to help explain your problem.
 - Desktop Environment: [e.g. GNOME, KDE, etc.]
 - CreamLinux Version: [e.g. 0.1.0]
 - Steam Version: [e.g. latest]
+- Graphics card: [e.g. 2060 rtx]
 
 ## Game Information
 

.github/workflows/build.yml

@@ -0,0 +1,104 @@
+name: 'Build CreamLinux'
+
+on:
+  push:
+    branches: [main, master, develop]
+  pull_request:
+    branches: [main, master, develop]
+  workflow_dispatch: # Allows manual triggering
+
+jobs:
+  build:
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: 'ubuntu-22.04' # Stable Debian-based release
+            args: ''
+
+    runs-on: ${{ matrix.platform }}
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: 'npm'
+
+      - name: Install Rust stable
+        uses: dtolnay/rust-toolchain@stable
+        with:
+          components: rustfmt, clippy
+
+      - name: Rust cache
+        uses: swatinem/rust-cache@v2
+        with:
+          workspaces: './src-tauri -> target'
+
+      - name: Install system dependencies (Ubuntu)
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y \
+            libwebkit2gtk-4.1-dev \
+            libayatana-appindicator3-dev \
+            librsvg2-dev \
+            patchelf \
+            build-essential \
+            curl \
+            wget \
+            file \
+            libssl-dev \
+            libgtk-3-dev
+
+      - name: Install frontend dependencies
+        run: npm ci
+
+      - name: Build Tauri app
+        uses: tauri-apps/tauri-action@v0
+        # env:
+        # No GITHUB_TOKEN since we're not creating releases
+        # TAURI_PRIVATE_KEY: ${{ secrets.TAURI_PRIVATE_KEY }}
+        # TAURI_KEY_PASSWORD: ${{ secrets.TAURI_KEY_PASSWORD }}
+        with:
+          # Build configuration
+          projectPath: '.'
+          includeDebug: false
+          includeRelease: true
+          includeUpdaterJson: false
+          tauriScript: 'npm run tauri'
+          args: ${{ matrix.args }}
+
+          # No release configuration - just build artifacts
+          # Omitting tagName, releaseName, and releaseId means no release creation
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: creamlinux-ubuntu-20.04-artifacts
+          path: |
+            src-tauri/target/release/bundle/
+            src-tauri/target/release/creamlinux
+            src-tauri/target/release/creamlinux.exe
+          retention-days: 30
+          if-no-files-found: warn
+
+      - name: Upload AppImage (if exists)
+        uses: actions/upload-artifact@v4
+        with:
+          name: creamlinux-appimage
+          path: |
+            src-tauri/target/release/bundle/appimage/*.AppImage
+          retention-days: 30
+          if-no-files-found: ignore
+
+      - name: Upload DEB package (if exists)
+        uses: actions/upload-artifact@v4
+        with:
+          name: creamlinux-deb
+          path: |
+            src-tauri/target/release/bundle/deb/*.deb
+          retention-days: 30
+          if-no-files-found: ignore

README.md

@@ -52,7 +52,7 @@ While the core functionality is working, please be aware that this is an early r
 
 - Rust 1.77.2 or later
 - Node.js 18 or later
-- webkit2gtk-4.1
+- webkit2gtk-4.1 (libwebkit2gtk-4.1 for debian)
 - npm or yarn
 
 #### Steps

package.json

@@ -1,7 +1,7 @@
 {
   "name": "creamlinux",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.0.6",
   "type": "module",
   "author": "Tickbase",
   "repository": "https://github.com/Novattz/creamlinux-installer",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "app"
-version = "1.0.1"
+version = "1.0.6"
 description = "DLC Manager for Steam games on Linux"
 authors = ["tickbase"]
 license = "MIT"
@@ -36,4 +36,4 @@ tauri-plugin-process = "2"
 custom-protocol = ["tauri/custom-protocol"]
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
-tauri-plugin-updater = "2"
+# tauri-plugin-updater = "2"

src-tauri/capabilities/desktop.json

@@ -9,6 +9,5 @@
     "main"
   ],
   "permissions": [
-    "updater:default"
   ]
 }

src-tauri/src/installer.rs

@@ -1001,15 +1001,48 @@ where
             info!("Created backup: {}", backup_path.display());
         }
 
-        // Extract the appropriate DLL directly to the game directory
-        if let Ok(mut file) = archive.by_name(&api_name.to_string_lossy()) {
-            let mut outfile = fs::File::create(&original_path)?;
-            io::copy(&mut file, &mut outfile)?;
-            info!("Installed SmokeAPI as: {}", original_path.display());
-        } else {
+        // Determine if we need 32-bit or 64-bit SmokeAPI DLL based on the original Steam API DLL
+        let is_64bit = api_name.to_string_lossy().contains("64");
+        let target_arch = if is_64bit { "64" } else { "32" };
+
+        // Search through all files in the archive to find the matching SmokeAPI DLL
+        let mut found_dll = false;
+        let mut tried_files = Vec::new();
+        let mut matching_dll_name: Option<String> = None;
+
+        // First pass: find the matching DLL name
+        for i in 0..archive.len() {
+            if let Ok(file) = archive.by_index(i) {
+                let file_name = file.name();
+                tried_files.push(file_name.to_string());
+
+                // 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.to_lowercase().contains(&format!("{}.dll", target_arch)) {
+
+                      matching_dll_name = Some(file_name.to_string());
+                      break;
+                }
+            }
+        }
+
+        // Second pass: extract the matching DLL if found
+        if let Some(dll_name) = matching_dll_name {
+            if let Ok(mut smoke_file) = archive.by_name(&dll_name) {
+                let mut outfile = fs::File::create(&original_path)?;
+                io::copy(&mut smoke_file, &mut outfile)?;
+                info!("Installed {} as: {}", dll_name, original_path.display());
+                found_dll = true;
+            }
+        }
+
+        if !found_dll {
             return Err(InstallerError::InstallationError(format!(
-                "Could not find {} in the SmokeAPI zip file",
-                api_name.to_string_lossy()
+                "Could not find {}-bit SmokeAPI DLL for {} in the zip file. Archive contains: {}",
+                target_arch,
+                api_name.to_string_lossy(),
+                tried_files.join(", ")
             )));
         }
     }

src-tauri/src/main.rs

@@ -513,7 +513,7 @@ fn main() {
 
     tauri::Builder::default()
         .plugin(tauri_plugin_process::init())
-        .plugin(tauri_plugin_updater::Builder::new().build())
+        // .plugin(tauri_plugin_updater::Builder::new().build())
         .plugin(tauri_plugin_shell::init())
         .plugin(tauri_plugin_dialog::init())
         .plugin(tauri_plugin_fs::init())

src-tauri/tauri.conf.json

@@ -10,25 +10,12 @@
     "active": true,
     "targets": "all",
     "category": "Utility",
-    "createUpdaterArtifacts": true,
-    "icon": ["icons/128x128.png", "icons/128x128@2x.png", "icons/icon.png"],
-    "resources": ["resources/libs/*"]
+    "icon": ["icons/128x128.png", "icons/128x128@2x.png", "icons/icon.png"]
   },
   "productName": "Creamlinux",
   "mainBinaryName": "creamlinux",
-  "version": "1.0.2",
+  "version": "1.0.6",
   "identifier": "com.creamlinux.dev",
-  "plugins": {
-    "updater": {
-      "pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IDJDNEI1NzBBRDUxODQ3RjEKUldUeFJ4alZDbGRMTE5Vc241NG5yL080UklnaW1iUGdUWElPRXloRGtKZ3M2SWkzK0RGSDh3Q2kK",
-      "endpoints": [
-        "https://github.com/Novattz/creamlinux-installer/releases/latest/download/latest.json"
-      ],
-      "windows": {
-        "installMode": "passive"
-      }
-    }
-  },
   "app": {
     "withGlobalTauri": false,
     "windows": [

src/components/dialogs/SettingsDialog.tsx

@@ -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>

src/components/layout/InitialLoadingScreen.tsx

@@ -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
+  // Define the loading steps
+  const steps = [
+    'Checking system requirements...',
+    'Scanning Steam libraries...',
+    'Discovering games...',
+    'Preparing user interface...',
+  ]
+
+  // Update current step 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!' },
-    ]
-
-    // Find current status message based on progress
-    const currentMessage = messages.find((m) => progress <= m.threshold)?.message || 'Loading...'
-
-    // Add new messages to the log as progress increases
-    if (currentMessage && !detailedStatus.includes(currentMessage)) {
-      setDetailedStatus((prev) => [...prev, currentMessage])
+    const stepThresholds = [25, 50, 75, 100]
+    const newStep = stepThresholds.findIndex(threshold => progress < threshold)
+    
+    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,34 +38,22 @@ 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>
-          ))}
+          <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>
   )
 }
 
-export default InitialLoadingScreen
+export default InitialLoadingScreen

src/styles/components/layout/_loading_screen.scss

@@ -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 {
-          color: var(--primary-color);
-          margin-right: 0.5rem;
-          font-size: 1.2rem;
-        }
+        &.active {
+          background-color: rgba(var(--primary-color-rgb), 0.1);
 
-        .status-text {
-          color: var(--text-secondary);
-          font-size: 0.9rem;
-        }
-
-        &:last-child {
-          .status-indicator {
-            color: var(--success);
+          .status-step {
+            color: var(--primary-color);
+            font-weight: 600;
           }
 
           .status-text {
@@ -104,48 +80,21 @@
             font-weight: 600;
           }
         }
+
+        .status-step {
+          color: var(--text-secondary);
+          font-family: 'Courier New', monospace;
+          font-weight: 500;
+          min-width: 3rem;
+          text-align: left;
+        }
+
+        .status-text {
+          color: var(--text-secondary);
+          text-align: left;
+          flex: 1;
+        }
       }
     }
-
-    .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;
-      color: var(--text-secondary);
-      margin-bottom: 1rem;
-    }
-  }
-}
-
-// Animation for the bouncing circles
-@keyframes bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
   }
 }