More install stuff.

This commit is contained in:
Unnoen 2022-01-15 17:29:44 +11:00
parent b19a86f298
commit c338db4e73
No known key found for this signature in database
GPG Key ID: 8F8E42252BA20553
16 changed files with 468 additions and 146 deletions

View File

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

View File

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

View File

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

View File

@ -1,47 +1,55 @@
@page "/configure/{machineURL}"
@layout Shared.MainLayout
@using System.Diagnostics
@using Wabbajack.Common
@using Wabbajack.Paths.IO
@inherits Fluxor.Blazor.Web.Components.FluxorComponent
@page "/configure"
@namespace Wabbajack.App.Blazor.Pages
<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 class="image" style="background-image: url('@Image');"></div>
<div class="list">
<div class="info">
<div class="name">@Name</div>
<div class="author">@Author</div>
<div class="version">@Version</div>
<div class="description">@Description</div>
</div>
<div class="modlist-image" style="background-image: url('@Image');"></div>
</div>
<div class="settings">
<div class="locations">
<div class="labels">
<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="options">
<label class="option">
Overwrite Existing Installation
<input type="checkbox" checked="checked">
<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 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 Skyrims 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();
}
}
</div>

View File

@ -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())}";
}
}
}

View File

@ -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 {
margin-left: -20px;
font-size: 5rem;
font-weight: 100;
.list {
display: flex;
flex: 1;
width: 100%;
align-items: center;
.info {
width: 50%;
height: fit-content;
margin: 1rem;
.name {
font-size: 5rem;
font-weight: 100;
}
.author {
margin-left: 10px;
font-size: 2rem;
font-weight: 100;
}
.version {
margin-left: 20px;
color: rgba(255, 255, 255, 0.75);
}
.description {
margin-left: 20px;
margin-top: 20px;
color: rgba(255, 255, 255, 0.5);
}
}
.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);
.modlist-image {
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 50%;
height: 100%;
margin: 2rem;
}
}
.preview {
width: 800px;
height: 450px;
margin-top: -150px;
.mod-feature {
margin-left: -10px;
font-size: 2rem;
font-weight: 100;
.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;
}
}
}
.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);
.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;
}
}
}
}
}
}

View File

@ -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++;
}
}

View File

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

View File

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

View File

@ -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 Skyrims 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();
}
}

View File

@ -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);
}
}
}

View File

@ -1,6 +1,5 @@
@page "/SelectInstall"
@layout Shared.MainLayout
@inject NavigationManager NavigationManager
@namespace Wabbajack.App.Blazor.Pages
<div id="content">
<div class="select">
@ -8,28 +7,19 @@
<img src="images/icons/cloud-download.svg" alt="Browse Gallery">
<span>Browse the Gallery</span>
</div>
<div class="disk" @onclick="Navigate">
<img src="images/icons/disk.svg" alt="Install from File">
<div class="disk">
<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>
</div>
</div>
</div>
</div>
@code {
public void Navigate()
{
NavigationManager.NavigateTo("configure");
}
}
</div>

View File

@ -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);
}
}
}
}

View File

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

View File

@ -1,26 +1,29 @@
using Fluxor;
using Wabbajack.DTOs;
using Wabbajack.Paths;
namespace Wabbajack.App.Blazor.Store;
[FeatureState]
public class InstallState
{
public InstallStateEnum CurrentInstallState { get; }
public ModlistMetadata? CurrentModlistMetadata { get; }
public InstallStateEnum CurrentInstallState { 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;
CurrentInstallState = newState;
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);
}

View File

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