More install stuff.

Wabbajack.App.Blazor/Components/ModlistItem.razor.cs

@@ -7,6 +7,9 @@ using Microsoft.AspNetCore.Components;
 using Wabbajack.App.Blazor.Store;
 using Wabbajack.Common;
 using Wabbajack.DTOs;
+using Wabbajack.DTOs.JsonConverters;
+using Wabbajack.Installer;
+using Wabbajack.Paths;
 using Wabbajack.Paths.IO;
 using Wabbajack.RateLimiter;
 using Wabbajack.Services.OSIntegrated.Services;
@@ -17,6 +20,7 @@ namespace Wabbajack.App.Blazor.Components
     public partial class ModlistItem
     {
         [Inject] private IState<DownloadState>     _downloadState    { get; set; }
+        [Inject] private IState<InstallState>      _installState     { get; set; }
         [Inject] private ModListDownloadMaintainer _maintainer       { get; set; }
         [Inject] private IDispatcher               _dispatcher       { get; set; }
         [Inject] private NavigationManager         NavigationManager { get; set; }
@@ -39,7 +43,10 @@ namespace Wabbajack.App.Blazor.Components
                 //await _wjClient.SendMetric("downloading", Metadata.Title);
                 UpdateDownloadState(DownloadState.DownloadStateEnum.Downloaded, Metadata);
                 dispose.Dispose();
-                NavigationManager.NavigateTo($"configure/{Metadata.Links.MachineURL}");
+                
+                AbsolutePath path = KnownFolders.EntryPoint.Combine("downloaded_mod_lists", Metadata.Links.MachineURL).WithExtension(Ext.Wabbajack);
+                _dispatcher.Dispatch(new UpdateInstallState(InstallState.InstallStateEnum.Configuration, null, path));
+                NavigationManager.NavigateTo("/configure");
 
             }
             catch (Exception e)

Wabbajack.App.Blazor/Components/News.razor

@@ -1,12 +1,10 @@
-@namespace Wabbajack.App.Blazor.Components
+<div class="container">
-
-<div class="container">
     <div class="info">
         <p class="title">
             Wabbajack 3.0
         </p>
         <p class="description">
-            I can't believe this shit is free.
+            [TBI] News ticker thing. 
         </p>
     </div>
 </div>

Wabbajack.App.Blazor/Components/News.razor.scss

@@ -1,15 +1,17 @@
 .container {
-  background-image: linear-gradient(30deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 30%, rgba(255, 255, 255, 0) 100%), url(images/Banner.png);
+  background-image: linear-gradient(30deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.8) 30%, rgba(255, 255, 255, 0) 100%), url(images/Banner_Dark_Transparent.png);
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   padding: 1rem 1.5rem;
-  border-radius: 0.75rem;
   max-width: 56rem;
   height: 9rem;
   margin-left: auto;
   margin-right: auto;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
 
   .info {
     align-self: flex-end;

Wabbajack.App.Blazor/Pages/Configure.razor

@@ -1,47 +1,55 @@
-@page "/configure/{machineURL}"
+@page "/configure"
-@layout Shared.MainLayout
+@namespace Wabbajack.App.Blazor.Pages
-@using System.Diagnostics
-@using Wabbajack.Common
-@using Wabbajack.Paths.IO
-@inherits Fluxor.Blazor.Web.Components.FluxorComponent
 
 <div id="content">
-    <div class="image"></div>
+    <div class="image" style="background-image: url('@Image');"></div>
+    <div class="list">
         <div class="info">
-        <div class="step">Downloading</div>
+            <div class="name">@Name</div>
-        <div class="description">Downloading missing archives...</div>
+            <div class="author">@Author</div>
-        <div class="number">16 of 228 archives downloaded</div>
+            <div class="version">@Version</div>
-        <div class="number">128.27 GB remaining</div>
+            <div class="description">@Description</div>
-        <div class="number">5.6 MB/s</div>
+        </div>
-        <div class="log">
+        <div class="modlist-image" style="background-image: url('@Image');"></div>
-            <p>Downloaded A Cool Mod</p>
+    </div>
-            <p>Downloaded Some Mod With a Long Name</p>
+    <div class="settings">
-            <p>Downloaded An Even Longer Name Why Do They Do This</p>
+        <div class="locations">
-            <p>Downloaded An Archive From MEGA Wow It's a Miracle</p>
+            <div class="labels">
-            <p>Downloaded Archive Mod Something Long</p>
+                <span>Target Modlist</span>
+                <span>Installation Location</span>
+                <span>Download Location</span>
+            </div>
+            <div class="paths">
+                <span class="modlist-file">D:\Programs\Wabbajack\downloaded_mod_lists\magnum_opus.wabbajack</span>
+                <span class="install-location"></span>
+                <span class="download-location"></span>
+
             </div>
         </div>
-    <div class="preview">
+        <div class="options">
-        <div class="mod-image"></div>
+            <label class="option">
-        <div class="mod-name">Manbeast - A Werewolf Overhaul</div>
+                Overwrite Existing Installation
-        <div class="mod-author">Simon Magus and colinswrath</div>
+                <input type="checkbox" checked="checked">
-        <div class="mod-info">Manbeast is a complete overhaul of Skyrim’s Werewolf system designed to balance existing Werewolf mechanics and add powerful new lycanthropic abilities to the game.</div>
+                <span class="checkmark"></span>
+            </label>
+
+            <label class="option">
+                <input type="checkbox">
+                <span class="checkmark"></span>
+                Enable NTFS Compression
+            </label>
+
+            <label class="option">
+                <input type="checkbox">
+                <span class="checkmark"></span>
+                Do a sweet trick once the modlist has finished installing
+            </label>
+
+            <label class="option">
+                <input type="checkbox">
+                <span class="checkmark"></span>
+                Something else
+            </label>
+        </div>
     </div>
 </div>
-
-@code {
-
-    [Parameter]
-    public string machineURL { get; set; }
-
-    protected override void OnInitialized()
-    {
-        var Location = KnownFolders.EntryPoint.Combine("downloaded_mod_lists", machineURL).WithExtension(Ext.Wabbajack);
-        if (Location.FileExists())
-        {
-            Debug.Print("IT EXISTS I GUESS");
-        }
-        base.OnInitialized();
-    }
-
-}

Wabbajack.App.Blazor/Pages/Configure.razor.cs

@@ -0,0 +1,55 @@
+using System;
+using System.IO;
+using System.Threading.Tasks;
+using Fluxor;
+using Microsoft.AspNetCore.Components;
+using Wabbajack.App.Blazor.Store;
+using Wabbajack.DTOs;
+using Wabbajack.DTOs.JsonConverters;
+using Wabbajack.Installer;
+using Wabbajack.Paths;
+
+namespace Wabbajack.App.Blazor.Pages
+{
+    public partial class Configure
+    {
+        [Inject] private NavigationManager    NavigationManager { get; set; }
+        [Inject] private IState<InstallState> _installState     { get; set; }
+        [Inject] private DTOSerializer        _dtos             { get; set; }
+        [Inject] private IDispatcher          _dispatcher       { get; set; }
+
+        private string  Name        { get; set; }
+        private string  Author      { get; set; }
+        private string  Description { get; set; }
+        private Version Version     { get; set; }
+        private string  Image       { get; set; }
+
+        protected override async Task OnInitializedAsync()
+        {
+            await CheckValidInstallPath();
+
+            await base.OnInitializedAsync();
+        }
+
+        private async Task CheckValidInstallPath()
+        {
+            if (_installState.Value.CurrentPath == null) return;
+
+            var listPath = (AbsolutePath)_installState.Value.CurrentPath;
+            ModList modList = await StandardInstaller.LoadFromFile(_dtos, listPath);
+            _dispatcher.Dispatch(new UpdateInstallState(InstallState.InstallStateEnum.Configuration, modList, listPath));
+
+
+            Name        = _installState.Value.CurrentModlist.Name;
+            Author      = _installState.Value.CurrentModlist.Author;
+            Description = _installState.Value.CurrentModlist.Description;
+            Version     = _installState.Value.CurrentModlist.Version;
+
+            var imagepath = (AbsolutePath)_installState.Value.CurrentPath;
+            Stream image = await StandardInstaller.ModListImageStream(imagepath);
+            await using var reader = new MemoryStream();
+            await image.CopyToAsync(reader);
+            Image = $"data:image/png;base64,{Convert.ToBase64String(reader.ToArray())}";
+        }
+    }
+}

Wabbajack.App.Blazor/Pages/Configure.razor.scss

@@ -1,5 +1,19 @@
 @import "../Shared/Globals.scss";
 
+$checkbox-background: white;
+$checkbox-background-hover: grey;
+$checkbox-background-checked: purple;
+
+@mixin path-span {
+  display: block;
+  height: 2rem;
+  width: 100%;
+  border: solid 1px red;
+  padding: 0.25rem;
+  margin: 0.25rem;
+  white-space: pre;
+}
+
 #content {
   display: flex;
   height: 100%;
@@ -7,10 +21,10 @@
   justify-content: space-around;
   align-items: center;
   color: white;
+  flex-direction: column;
 
   .image {
     position: absolute;
-    background-image: url("images/modlist-image.png");
     width: calc(100% - #{$sidebar-width});
     height: calc(100% - #{$header-height});
     background-repeat: no-repeat;
@@ -19,59 +33,138 @@
     filter: blur(25px) brightness(50%);
     z-index: -1;
   }
-  .info {
-    width: fit-content;
-    height: fit-content;
 
-    .step {
+  .list {
-      margin-left: -20px;
+    display: flex;
+    flex: 1;
+    width: 100%;
+    align-items: center;
+
+    .info {
+      width: 50%;
+      height: fit-content;
+      margin: 1rem;
+
+      .name {
         font-size: 5rem;
         font-weight: 100;
       }
 
-    .description {
+      .author {
-      margin-left: -10px;
+        margin-left: 10px;
         font-size: 2rem;
         font-weight: 100;
       }
 
-    .number {
+      .version {
+        margin-left: 20px;
         color: rgba(255, 255, 255, 0.75);
       }
-    .log {
+
+      .description {
+        margin-left: 20px;
         margin-top: 20px;
         color: rgba(255, 255, 255, 0.5);
       }
     }
-  .preview {
+
-    width: 800px;
+    .modlist-image {
-    height: 450px;
-    margin-top: -150px;
-    .mod-feature {
-      margin-left: -10px;
-      font-size: 2rem;
-      font-weight: 100;
-    }
-    .mod-image {
-      background-image: url("https://staticdelivery.nexusmods.com/mods/1704/images/44746/44746-1611463256-105629958.png");
       background-repeat: no-repeat;
-      background-size: cover;
+      background-size: contain;
       background-position: center;
-      width: 100%;
+      width: 50%;
       height: 100%;
+      margin: 2rem;
+    }
+  }
+
+  .settings {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+
+    .locations {
+      display: flex;
+      flex-direction: row;
+      flex: 1;
+
+      .labels {
+        span {
+          @include path-span;
+        }
+      }
+
+      .paths {
+        flex: 1;
+        margin-left: 1rem;
+
+        span {
+          @include path-span;
+        }
+      }
+    }
+
+    .options {
+      display: flex;
+      flex-flow: row wrap;
+      flex-direction: column;
+      border: solid 1px red;
+      margin-left: 2rem;
+
+      .option {
+        position: relative;
+        display: block;
+        margin: 0.25rem;
+        padding-left: 2rem;
+        cursor: pointer;
+        user-select: none;
+
+        &:hover input ~ .checkmark {
+          background-color: $checkbox-background-hover;
+        }
+
+        input {
+          position: absolute;
+          opacity: 0;
+          cursor: pointer;
+          height: 0;
+          width: 0;
+
+          &:checked ~ .checkmark {
+            background-color: $checkbox-background-checked;
+
+            &:after {
+              display: block;
+              left: 0.5rem;
+              top: 0.25rem;
+              width: 0.25rem;
+              height: 0.65rem;
+              border: solid white;
+              border-width: 0 3px 3px 0;
+              transform: rotate(45deg);
+            }
+          }
+        }
+
+        .checkmark {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 1.5rem;
+          width: 1.5rem;
+          background-color: $checkbox-background;
+
+          &:after {
+            content: "";
+            position: absolute;
+            display: none;
           }
-    .mod-name {
-      font-size: 2rem;
-      font-weight: 100;
         }
-    .mod-author {
-      font-size: 1.1rem;
-      font-weight: 100;
       }
-    .mod-info {
-      margin-top: 20px;
-      margin-left: 10px;
-      color: rgba(255, 255, 255, 0.75);
     }
   }
 }

Wabbajack.App.Blazor/Pages/Default.razor

@@ -1,15 +0,0 @@
-@page "/default"
-
-<h3>Hello, world!</h3>
-
-<p>The current count is <strong>@Counter</strong></p>
-
-<button @onclick="IncrementCount">Increment</button>
-
-@code {
-    int Counter = 0;
-    void IncrementCount()
-    {
-        Counter++;
-    }
-}

Wabbajack.App.Blazor/Pages/Gallery.razor

@@ -1,5 +1,5 @@
 @page "/gallery"
-@layout Shared.MainLayout
+@namespace Wabbajack.App.Blazor.Pages
 @using Wabbajack.Networking.WabbajackClientApi;
 @using Wabbajack.DTOs
 

Wabbajack.App.Blazor/Pages/Home.razor

@@ -1,5 +1,5 @@
 @page "/"
-@layout Shared.MainLayout
+@namespace Wabbajack.App.Blazor.Pages
 <News/>
 <div id="content"></div>
 

Wabbajack.App.Blazor/Pages/Installing.razor

@@ -0,0 +1,47 @@
+@page "/installing"
+@namespace Wabbajack.App.Blazor.Pages
+@using System.Diagnostics
+@using Wabbajack.Common
+@using Wabbajack.Paths.IO
+@inherits Fluxor.Blazor.Web.Components.FluxorComponent
+
+<div id="content">
+    <div class="image"></div>
+    <div class="info">
+        <div class="step">Downloading</div>
+        <div class="description">Downloading missing archives...</div>
+        <div class="number">16 of 228 archives downloaded</div>
+        <div class="number">128.27 GB remaining</div>
+        <div class="number">5.6 MB/s</div>
+        <div class="log">
+            <p>Downloaded A Cool Mod</p>
+            <p>Downloaded Some Mod With a Long Name</p>
+            <p>Downloaded An Even Longer Name Why Do They Do This</p>
+            <p>Downloaded An Archive From MEGA Wow It's a Miracle</p>
+            <p>Downloaded Archive Mod Something Long</p>
+        </div>
+    </div>
+    <div class="preview">
+        <div class="mod-image"></div>
+        <div class="mod-name">Manbeast - A Werewolf Overhaul</div>
+        <div class="mod-author">Simon Magus and colinswrath</div>
+        <div class="mod-info">Manbeast is a complete overhaul of Skyrim’s Werewolf system designed to balance existing Werewolf mechanics and add powerful new lycanthropic abilities to the game.</div>
+    </div>
+</div>
+
+@code {
+
+    [Parameter]
+    public string machineURL { get; set; }
+
+    protected override void OnInitialized()
+    {
+        var Location = KnownFolders.EntryPoint.Combine("downloaded_mod_lists", machineURL).WithExtension(Ext.Wabbajack);
+        if (Location.FileExists())
+        {
+            Debug.Print("IT EXISTS I GUESS");
+        }
+        base.OnInitialized();
+    }
+
+}

Wabbajack.App.Blazor/Pages/Installing.razor.scss

@@ -0,0 +1,77 @@
+@import "../Shared/Globals.scss";
+
+#content {
+  display: flex;
+  height: 100%;
+  align-content: center;
+  justify-content: space-around;
+  align-items: center;
+  color: white;
+  
+  .image {
+    position: absolute;
+    background-image: url("images/modlist-image.png");
+    width: calc(100% - #{$sidebar-width});
+    height: calc(100% - #{$header-height});
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+    filter: blur(25px) brightness(50%);
+    z-index: -1;
+  }
+  .info {
+    width: fit-content;
+    height: fit-content;
+    
+    .step {
+      margin-left: -20px;
+      font-size: 5rem;
+      font-weight: 100;
+    }
+    
+    .description {
+      margin-left: -10px;
+      font-size: 2rem;
+      font-weight: 100;
+    }
+    
+    .number {
+      color: rgba(255, 255, 255, 0.75);
+    }
+    .log {
+      margin-top: 20px;
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+  .preview {
+    width: 800px;
+    height: 450px;
+    margin-top: -150px;
+    .mod-feature {
+      margin-left: -10px;
+      font-size: 2rem;
+      font-weight: 100;
+    }
+    .mod-image {
+      background-image: url("https://staticdelivery.nexusmods.com/mods/1704/images/44746/44746-1611463256-105629958.png");
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+      width: 100%;
+      height: 100%;
+    }
+    .mod-name {
+      font-size: 2rem;
+      font-weight: 100;
+    } 
+    .mod-author {
+      font-size: 1.1rem;
+      font-weight: 100;
+    }
+    .mod-info {
+      margin-top: 20px;
+      margin-left: 10px;
+      color: rgba(255, 255, 255, 0.75);
+    }
+  }
+}

Wabbajack.App.Blazor/Pages/SelectInstall.razor

@@ -1,6 +1,5 @@
 @page "/SelectInstall"
-@layout Shared.MainLayout
+@namespace Wabbajack.App.Blazor.Pages
-@inject NavigationManager NavigationManager
 
 <div id="content">
     <div class="select">
@@ -8,15 +7,15 @@
             <img src="images/icons/cloud-download.svg" alt="Browse Gallery">
             <span>Browse the Gallery</span>
         </div>
-        <div class="disk" @onclick="Navigate">
+        <div class="disk">
-            <img src="images/icons/disk.svg" alt="Install from File">
+            <img src="images/icons/disk.svg" @onclick="SelectFile" alt="Install from File">
             <span>Install from File</span>
         </div>
     </div>
     <div class="recent">
-        <div class="title">Recently downloaded</div>
+        <div class="title">[TBI] Recently downloaded</div>
         <div class="modlist">
-            <img src="" alt="">
+            <img src="https://i.imgur.com/9jnSPcX.png" alt="">
             <div class="info">
                 <div class="title">Living Skyrim</div>
                 <div class="description">ForgottenGlory</div>
@@ -24,12 +23,3 @@
         </div>
     </div>
 </div>
-
-@code {
-
-    public void Navigate()
-    {
-        NavigationManager.NavigateTo("configure");
-    }
-
-}

Wabbajack.App.Blazor/Pages/SelectInstall.razor.cs

@@ -0,0 +1,55 @@
+using System;
+using System.Diagnostics;
+using Fluxor;
+using Microsoft.AspNetCore.Components;
+using Microsoft.Win32;
+using Wabbajack.App.Blazor.Store;
+using Wabbajack.DTOs;
+using Wabbajack.DTOs.JsonConverters;
+using Wabbajack.Installer;
+using Wabbajack.Paths;
+
+namespace Wabbajack.App.Blazor.Pages
+{
+    public partial class SelectInstall
+    {
+        [Inject] private NavigationManager    NavigationManager { get; set; }
+        [Inject] private IState<InstallState> _installState     { get; set; }
+        [Inject] private IDispatcher          _dispatcher       { get; set; }
+
+        private void SelectFile()
+        {
+            var file = new OpenFileDialog
+            {
+                Filter      = "Wabbajack (*.wabbajack)|*.wabbajack",
+                FilterIndex = 1,
+                Multiselect = false,
+                Title       = "Wabbajack file for install"
+            };
+            
+            try
+            {
+                if (file.ShowDialog() != true) return;
+                var path = file.FileName.ToAbsolutePath();
+                VerifyFile(path);
+            }
+            catch (Exception ex)
+            {
+                Debug.Print(ex.Message);
+            }
+        }
+
+        public async void VerifyFile(AbsolutePath path)
+        {
+            try
+            {
+                _dispatcher.Dispatch(new UpdateInstallState(InstallState.InstallStateEnum.Configuration, null, path));
+                NavigationManager.NavigateTo("/configure");
+            }
+            catch (Exception ex)
+            {
+                Debug.Print(ex.Message);
+            }
+        }
+    }
+}

Wabbajack.App.Blazor/Pages/SelectInstall.razor.scss

@@ -16,7 +16,7 @@
 
     div {
       display: flex;
-      border: solid 1px white;
+      border: solid 1px red;
       flex-direction: column;
       align-items: center;
 
@@ -37,7 +37,7 @@
       img {
         height: 75px;
         width: 125px;
-        border: solid 1px white;
+        border: solid 1px red;
       }
 
       .info {

Wabbajack.App.Blazor/Store/InstallState.cs

@@ -1,5 +1,6 @@
 using Fluxor;
 using Wabbajack.DTOs;
+using Wabbajack.Paths;
 
 namespace Wabbajack.App.Blazor.Store;
 
@@ -7,20 +8,22 @@ namespace Wabbajack.App.Blazor.Store;
 public class InstallState
 {
     public InstallStateEnum CurrentInstallState { get; }
-    public ModlistMetadata? CurrentModlistMetadata { get; }
+    public ModList?         CurrentModlist      { get; }
+    public AbsolutePath?    CurrentPath         { get; }
 
     // Required for initial state.
     private InstallState() { }
 
-    public InstallState(InstallStateEnum newState, ModlistMetadata? newModlist)
+    public InstallState(InstallStateEnum newState, ModList? newModList, AbsolutePath? newPath)
     {
         CurrentInstallState = newState;
-        CurrentModlistMetadata = newModlist;
+        CurrentModlist      = newModList ?? CurrentModlist;
+        CurrentPath         = newPath ?? CurrentPath;
     }
 
-
     public enum InstallStateEnum
     {
+        Waiting,
         Configuration,
         Installing,
         Success,
@@ -31,17 +34,19 @@ public class InstallState
 public class UpdateInstallState
 {
     public InstallState.InstallStateEnum State   { get; }
-    public ModlistMetadata?              Modlist { get; }
+    public ModList?                      Modlist { get; }
+    public AbsolutePath?                 Path    { get; }
 
-    public UpdateInstallState(InstallState.InstallStateEnum state, ModlistMetadata? modlist = null)
+    public UpdateInstallState(InstallState.InstallStateEnum state, ModList? modlist, AbsolutePath? path)
     {
         State   = state;
         Modlist = modlist;
+        Path    = path;
     }
 }
 
 public static class InstallStateReducers
 {
     [ReducerMethod]
-    public static InstallState ReduceChangeInstallState(InstallState state, UpdateInstallState action) => new(action.State, action.Modlist);
+    public static InstallState ReduceChangeInstallState(InstallState state, UpdateInstallState action) => new(action.State, action.Modlist, action.Path);
 }

Wabbajack.App.Blazor/Wabbajack.App.Blazor.csproj

@@ -13,7 +13,7 @@
     </ItemGroup>
 
     <ItemGroup>
-        <PackageReference Include="LibSassBuilder" Version="2.0.1" />
+<!--        <PackageReference Include="LibSassBuilder" Version="2.0.1" />-->
         <PackageReference Include="Fluxor" Version="4.2.2-Alpha" />
         <PackageReference Include="Fluxor.Blazor.Web" Version="4.2.2-Alpha" />
         <PackageReference Include="Microsoft.AspNetCore.Components.WebView.Wpf" Version="6.0.101-preview.11.2349" />