Using canvas for now

Controllers/HomeController.cs

@@ -13,14 +13,16 @@ namespace fxl.codes.kisekae.Controllers
 {
     public class HomeController : Controller
     {
+        private readonly FileParserService _fileParserService;
         private readonly ILogger<HomeController> _logger;
         private readonly ConfigurationReaderService _readerService;
         private readonly IsolatedStorageFile _storage;
 
-        public HomeController(ILogger<HomeController> logger, ConfigurationReaderService readerService)
+        public HomeController(ILogger<HomeController> logger, ConfigurationReaderService readerService, FileParserService fileParserService)
         {
             _logger = logger;
             _readerService = readerService;
+            _fileParserService = fileParserService;
 
             _storage = IsolatedStorageFile.GetUserStoreForApplication();
         }
@@ -37,10 +39,7 @@ namespace fxl.codes.kisekae.Controllers
                 if (files.Length <= 0) continue;
 
                 var doll = new DirectoryModel(directory);
-                foreach (var file in files)
+                foreach (var file in files) doll.Configurations.Add(new ConfigurationModel(file));
-                {
-                    doll.Configurations.Add(new ConfigurationModel(file));
-                }
 
                 model.Add(doll);
             }
@@ -52,11 +51,12 @@ namespace fxl.codes.kisekae.Controllers
         public IActionResult Upload(IFormFile file)
         {
             _logger.LogTrace($"File uploaded: {file?.FileName}");
-            if (!(file?.FileName.EndsWith("cnf", StringComparison.InvariantCultureIgnoreCase) ?? false))
+            if (!(file?.FileName.EndsWith("lzh", StringComparison.InvariantCultureIgnoreCase) ?? false))
-                throw new Exception("Please select a *.cnf file");
+                throw new Exception("Please select a *.lzh file");
 
-            var model = _readerService.ReadCnf(file);
+            _fileParserService.UnzipLzh(file);
-            return View("Play", model);
+
+            return Redirect("/");
         }
 
         [HttpPost]

Models/CelModel.cs

@@ -24,6 +24,14 @@ namespace fxl.codes.kisekae.Models
                 match.Groups.TryGetValue(groupName, out var group);
                 if (string.IsNullOrEmpty(group?.Value))
                 {
+                    if (string.Equals(groupName, "Sets"))
+                    {
+                        for (var index = 0; index < Sets.Length; index++)
+                        {
+                            Sets[index] = true;
+                        }
+                    }
+                    
                     logger.LogWarning($"Unable to find regex group {groupName} in {line}");
                     continue;
                 }

Scripts/function.ts

@@ -1,18 +1,13 @@
-import Builder from "./utility"
 import {ICel, IPlayset} from "./pto"
+import Builder from "./utility";
 
-export function draw(playset: IPlayset, set: number): HTMLCanvasElement {
+export function draw(playset: IPlayset, canvas: HTMLCanvasElement, set: number): void {
-    let canvas = new Builder("canvas").addAttributes({
-        "height": playset.height.toString(),
-        "width": playset.width.toString()
-    }).build() as HTMLCanvasElement
     let context = canvas.getContext("2d")
+    context.clearRect(0, 0, canvas.width, canvas.height)
 
     playset.cels.forEach(cel => {
         drawToCanvas2dContext(cel, context, set)
     })
-
-    return canvas
 }
 
 export function drawToCanvas2dContext(cel: ICel, context: CanvasRenderingContext2D, set: number): void {
@@ -25,3 +20,24 @@ export function drawToCanvas2dContext(cel: ICel, context: CanvasRenderingContext
 
     image.src = `data:image/gif;base64,${cel.defaultImage}`
 }
+
+export function setPlayArea(header: HTMLElement, container: HTMLElement, playset: IPlayset, set: number): void {
+    const cssClass = "active-set"
+    header.querySelectorAll("button").forEach(button => {
+        button.classList.remove(cssClass)
+    })
+
+    header.querySelector(`button[data-set="${set}"]`).classList.add(cssClass)
+    
+    let canvases = container.getElementsByTagName("canvas")
+    if (canvases.length) {
+        draw(playset, canvases[0], set)
+        return
+    }
+
+    let canvas = new Builder("canvas")
+        .addAttributes({"height": playset.height, "width": playset.width})
+        .build()
+    container.appendChild(canvas)
+    draw(playset, canvases[0], set)
+}

Scripts/main.ts

@@ -1,7 +1,7 @@
 import {MDCLinearProgress} from "@material/linear-progress"
 import {MDCRipple} from "@material/ripple"
 import {MDCTopAppBar} from "@material/top-app-bar"
-import {draw} from "./function"
+import {setPlayArea} from "./function"
 import {IPlayset} from "./pto"
 import Builder from "./utility"
 
@@ -35,7 +35,8 @@ export default class Main {
 
         let reset = header.querySelector(`button[data-rel="reset"]`)
         reset.addEventListener("click", () => {
-            this.setPlayArea(container, playset, 0)
+            // TODO reset positions
+            setPlayArea(header, container, playset, 0)
         })
 
         playset.enabledSets.forEach((enabled, index) => {
@@ -43,31 +44,26 @@ export default class Main {
                 let button = new Builder("li")
                     .addChildren(new Builder("button")
                         .addClass("mdc-button")
+                        .addAttributes({"data-set": index})
                         .addChildren(
                             new Builder("span").addClass("mdc-button__ripple"),
                             new Builder("span").addClass("mdc-button__label").setText(index.toString())
                         )).build()
 
                 button.addEventListener("click", () => {
-                    this.setPlayArea(container, playset, index)
+                    setPlayArea(header, container, playset, index)
                 })
 
                 menu.appendChild(button)
             }
         })
 
-        this.setPlayArea(container, playset, set)
+        setPlayArea(header, container, playset, set)
-    }
-
-    private setPlayArea(container: HTMLElement, playset: IPlayset, set: number): void {
-        // Empty
-        while (container.firstChild) container.removeChild(container.firstChild)
-
-        let canvas = draw(playset, set)
-        container.appendChild(canvas)
     }
 
     private init() {
+        this.linearProgress.open()
+
         let main = document.querySelector("main")
         let directories = main.querySelector("ul")
 
@@ -77,6 +73,9 @@ export default class Main {
 
         links.forEach(link => {
             link.addEventListener("click", () => {
+                this.linearProgress.determinate = false
+                this.linearProgress.open()
+
                 let directory = link.attributes.getNamedItem("data-directory")
                 let form = new Builder("form")
                     .addAttributes({"method": "post", "action": "/Home/Select"})

Services/ConfigurationReaderService.cs

@@ -43,10 +43,10 @@ namespace fxl.codes.kisekae.Services
                 switch (line.ToCharArray()[0])
                 {
                     case '(':
-                        var resolutionRegex = new Regex("\\(([0-9]*),([0-9]*)\\)");
+                        var resolutionRegex = new Regex(@"\((?<Width>[0-9]*).(?<Height>[0-9]*)\)");
                         var resolutionMatch = resolutionRegex.Match(line);
-                        model.Width = int.Parse(resolutionMatch.Groups[1].Value);
+                        model.Width = int.Parse(resolutionMatch.Groups["Width"].Value);
-                        model.Height = int.Parse(resolutionMatch.Groups[2].Value);
+                        model.Height = int.Parse(resolutionMatch.Groups["Height"].Value);
                         break;
                     case '[':
                         var borderValue = line.Replace("[", "");

Services/FileParserService.cs

@@ -1,10 +1,13 @@
 using System;
 using System.Collections.Generic;
+using System.Diagnostics;
 using System.IO;
 using System.IO.IsolatedStorage;
 using System.Linq;
+using System.Reflection;
 using System.Text;
 using fxl.codes.kisekae.Models;
+using Microsoft.AspNetCore.Http;
 using Microsoft.Extensions.Logging;
 using SixLabors.ImageSharp;
 using SixLabors.ImageSharp.PixelFormats;
@@ -25,6 +28,44 @@ namespace fxl.codes.kisekae.Services
             _storage = IsolatedStorageFile.GetUserStoreForApplication();
         }
 
+        public void UnzipLzh(IFormFile file)
+        {
+            if (_storage.FileExists(file.FileName)) _storage.DeleteFile(file.FileName);
+            
+            using var writer = _storage.CreateFile(file.FileName);
+            file.CopyTo(writer);
+            writer.Flush();
+            writer.Close();
+
+            var root = _storage.GetType()
+                .GetProperty("RootDirectory", BindingFlags.Instance | BindingFlags.NonPublic)
+                .GetValue(_storage)
+                .ToString() ?? "";
+
+            var directory = Path.GetFileNameWithoutExtension(file.FileName);
+            if (_storage.DirectoryExists(directory)) _storage.DeleteDirectory(directory);
+            _storage.CreateDirectory(directory);
+
+            var process = new Process
+            {
+                StartInfo = new ProcessStartInfo
+                {
+                    FileName = "7z",
+                    Arguments = $"x {Path.Combine(root, file.FileName)} -o{Path.Combine(root, directory)}",
+                    UseShellExecute = false,
+                    RedirectStandardError = true,
+                    RedirectStandardOutput = true
+                }
+            };
+
+            if (!process.Start()) throw new InvalidDataException("Unable to call p7zip to extract archive");
+            
+            while (!process.StandardOutput.EndOfStream) _logger.LogTrace(process.StandardOutput.ReadLine());
+            process.WaitForExit();
+            
+            _storage.DeleteFile(file.FileName);
+        }
+
         public void ParsePalette(string directory, PaletteModel palette)
         {
             _logger.LogTrace($"Reading palette {palette.FileName} from {directory}");
@@ -132,7 +173,7 @@ namespace fxl.codes.kisekae.Services
                     for (var column = 0; column < width; column++)
                     {
                         var value = values[index];
-                        span[column] = value == 0 ? Transparent : palette.Colors[value];
+                        span[column] = value == 0 || value >= palette.Colors.Length ? Transparent : palette.Colors[value];
                         index++;
                     }
 

Styles/main.scss

@@ -7,8 +7,8 @@ $fxl-orange: #ff6e40;
 );
 
 @use "@material/button/styles";
+@use "@material/button/mixins" as button-mixins;
 @use "@material/icon-button/icon-button";
-@use "@material/linear-progress";
 @use "@material/top-app-bar/mdc-top-app-bar";
 @use "@material/typography/mdc-typography";
 
@@ -40,6 +40,10 @@ body {
 
         li {
           margin: 0 0.25em;
+
+          button.active-set {
+            @include button-mixins.filled-accessible($fxl-gray);
+          }
         }
       }
     }

Views/Shared/_Layout.cshtml

@@ -7,13 +7,12 @@
         <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto:900i" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
-        <link rel="stylesheet" href="~/css/main.css"/>
+        <link href="~/css/main.css" rel="stylesheet">
     </head>
     <body class="mdc-typography">
         <header class="mdc-top-app-bar">
             <div class="mdc-top-app-bar__row">
                 <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
-                    <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
                     <span class="mdc-top-app-bar__title">Kisekae Online - @ViewData["Title"]</span>
                 </section>
                 <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
@@ -23,19 +22,19 @@
                     <a class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Options">more_vert</a>
                 </section>
             </div>
-            <div role="progressbar" class="mdc-linear-progress" aria-label="Loading Progress" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
-                <div class="mdc-linear-progress__buffer">
-                    <div class="mdc-linear-progress__buffer-bar"></div>
-                    <div class="mdc-linear-progress__buffer-dots"></div>
-                </div>
-                <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
-                    <span class="mdc-linear-progress__bar-inner"></span>
-                </div>
-                <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
-                    <span class="mdc-linear-progress__bar-inner"></span>
-                </div>
-            </div>
         </header>
+        <div role="progressbar" class="mdc-linear-progress" aria-label="Example Progress Bar" aria-valuemin="0" aria-valuemax="1" aria-valuenow="0">
+            <div class="mdc-linear-progress__buffer">
+                <div class="mdc-linear-progress__buffer-bar"></div>
+                <div class="mdc-linear-progress__buffer-dots"></div>
+            </div>
+            <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
+                <span class="mdc-linear-progress__bar-inner"></span>
+            </div>
+            <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
+                <span class="mdc-linear-progress__bar-inner"></span>
+            </div>
+        </div>
         <main class="mdc-top-app-bar--fixed-adjust" role="main">
             @RenderBody()
         </main>

fxl.codes.kisekae.csproj

@@ -16,4 +16,30 @@
       <PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="5.0.10" />
       <PackageReference Include="SixLabors.ImageSharp" Version="1.0.4" />
     </ItemGroup>
+
+    <ItemGroup>
+      <_ContentIncludedByDefault Remove="wwwroot\css\main.css" />
+      <_ContentIncludedByDefault Remove="LHADecompressor\appsettings.Development.json" />
+      <_ContentIncludedByDefault Remove="LHADecompressor\appsettings.json" />
+      <_ContentIncludedByDefault Remove="LHADecompressor\obj\LHADecompressor.csproj.nuget.dgspec.json" />
+      <_ContentIncludedByDefault Remove="LHADecompressor\obj\project.assets.json" />
+      <_ContentIncludedByDefault Remove="LHADecompressor\obj\project.packagespec.json" />
+      <_ContentIncludedByDefault Remove="LHADecompressor\Properties\launchSettings.json" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <Compile Remove="LHADecompressor\**" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <EmbeddedResource Remove="LHADecompressor\**" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <None Remove="LHADecompressor\**" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <Content Remove="LHADecompressor\**" />
+    </ItemGroup>
 </Project>