feat: add general qol improvments (#4)

.github/workflows/deploy.yml

@@ -9,34 +9,29 @@ jobs:
   deploy:
     name: "Deploy Site"
     runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     steps:
-      - uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
+      - uses: actions/checkout@v4
 
-      - uses: actions/cache@v2
-        with:
-          path: ${{ github.workspace }}/.next/cache
-          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-${{ hashFiles('**.[jt]sx?') }}
-          restore-keys: |
-            ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}-
+      - uses: actions/configure-pages@v4
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 20
           cache: yarn
+          registry-url: "https://npm.pkg.github.com"
 
       - run: yarn install
 
       - run: yarn build
 
       - run: yarn export
 
-      - run: touch out/.nojekyll
-
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.3.3
+      - uses: actions/upload-pages-artifact@v2
         with:
-          branch: gh-pages
-          folder: out
-          single-commit: true
+          path: ./out
+
+      - uses: actions/deploy-pages@v3
+        id: deployment

README.md

@@ -2,7 +2,7 @@
 
 [![Deploy Site](https://github.com/alegemaate/stronghold-converters-ui/actions/workflows/deploy.yml/badge.svg)](https://github.com/alegemaate/stronghold-converters-ui/actions/workflows/deploy.yml)
 
-A collection of Javascript based file converters for Stronghold Crusader
+A collection of Javascript based file converters for Stronghold and Stronghold Crusader.
 
 ## Supported Formats
 

components/ImageRenderer.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useRef, useState } from "react";
+/* eslint-disable @next/next/no-img-element */
+import { useEffect, useState } from "react";
 import { imageDataToUri } from "../lib/convert";
 
 interface ImageRendererProps {
@@ -31,7 +32,14 @@ export const ImageRenderer: React.FC<ImageRendererProps> = ({
 
   return (
     <>
-      <img src={imageSrc} width="100%" alt="Image output" />
+      <img
+        src={imageSrc}
+        width="100%"
+        alt="Image output"
+        style={{
+          imageRendering: "pixelated",
+        }}
+      />
       <a href={downloadSrc} download={name}>
         Download [{name}]
       </a>

components/Layout.tsx

@@ -27,13 +27,8 @@ const Footer = styled("footer")(({ theme }) => ({
   borderTop: "1px solid #eaeaea",
   justifyContent: "center",
   alignItems: "center",
+  columnGap: theme.spacing(2),
   backgroundColor: theme.palette.background.paper,
-  a: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    flexGrow: 1,
-  },
 }));
 
 const StyledContainer = styled(Container)(({ theme }) => ({
@@ -71,6 +66,14 @@ export const Layout: React.FC<LayoutProps> = ({
         >
           Created by Allan Legemaate
         </a>
+        <a
+          href="https://github.com/alegemaate/stronghold-converters-ui"
+          target="_blank"
+          rel="noopener noreferrer"
+          title="Github"
+        >
+          Github
+        </a>
       </Footer>
     </Main>
   </>

components/Nav.tsx

@@ -8,9 +8,9 @@ export const Nav = () => (
       padding: 2,
     }}
   >
-    <Link href="/" passHref>
+    <Link href="/">
       <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-        Stronghold Crusader File Converters
+        Stronghold File Converters
       </Typography>
     </Link>
   </AppBar>

lib/color.ts

@@ -1,5 +1,31 @@
-// Convert 15 bit colour to 24 bit
-export const color15to32 = (byte1: number, byte2: number) => {
+/**
+ * RGB colour
+ */
+export interface RGBColor {
+  /**
+   * Red component
+   */
+  r: number;
+
+  /**
+   * Green component
+   */
+  g: number;
+
+  /**
+   * Blue component
+   */
+  b: number;
+}
+
+/**
+ * Convert 15 bit colour to 24 bit
+ *
+ * @param byte1 - First byte of 15 bit colour
+ * @param byte2 - Second byte of 15 bit colour
+ * @returns - 24 bit colour
+ */
+export const color15to32 = (byte1: number, byte2: number): RGBColor => {
   // Extract values (gggbbbbb Xrrrrrgg)
   const r = (byte2 & 0b01111100) >> 2;
   const g = ((byte1 & 0b11100000) >> 5) | ((byte2 & 0b00000011) << 3);
@@ -14,11 +40,17 @@ export const color15to32 = (byte1: number, byte2: number) => {
   };
 };
 
-// Convert 24 bit colour to 15 bit
-export const color32to15 = (r: number, g: number, b: number) => {
+/**
+ * Convert 24 bit colour to 15 bit
+ *
+ * @param color - 24 bit colour
+ * @returns - 15 bit colour
+ */
+export const color32to15 = (color: RGBColor): [number, number] => {
   // Roll up values (gggbbbbb Xrrrrrgg)
-  const byte1 = ((b & 0b111111000) >> 3) | ((g & 0b00111000) << 2);
-  const byte2 = ((r & 0b111111000) >> 1) | ((g & 0b11000000) >> 6) | 0b10000000;
+  const byte1 = ((color.b & 0b111111000) >> 3) | ((color.g & 0b00111000) << 2);
+  const byte2 =
+    ((color.r & 0b111111000) >> 1) | ((color.g & 0b11000000) >> 6) | 0b10000000;
 
   return [byte1, byte2];
 };

lib/convert.ts

@@ -1,4 +1,9 @@
-export const fileToImageData = async (file: File) =>
+/**
+ * Import file to image data
+ * @param file - File to convert to image data
+ * @returns - Image data of file
+ */
+export const fileToImageData = async (file: File): Promise<ImageData> =>
   new Promise<ImageData>((resolve, reject) => {
     try {
       const image = new Image();
@@ -30,7 +35,12 @@ export const fileToImageData = async (file: File) =>
     }
   });
 
-export const imageDataToUri = (imageData: ImageData) => {
+/**
+ * Convert image data to URI
+ * @param imageData - Image data to convert to URI
+ * @returns - URI of image data
+ */
+export const imageDataToUri = (imageData: ImageData): string => {
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
 

lib/file-reader.ts

@@ -1,14 +1,32 @@
+/**
+ * General file reader class
+ */
 export class FileReader {
+  /**
+   * Bytes of file
+   */
   protected bytes = new Uint8Array();
 
+  /**
+   * Index of current byte
+   */
   protected index = 0;
 
-  protected loadBuffer(buffer: ArrayBuffer) {
+  /**
+   * Load buffer into reader
+   * @param buffer - Buffer to read
+   */
+  protected loadBuffer(buffer: ArrayBuffer): void {
     this.bytes = new Uint8Array(buffer);
     this.index = 0;
   }
 
-  protected readNextBytes(length: number) {
+  /**
+   * Read next 'length' bytes
+   * @param length - Number of bytes to read
+   * @returns - Next 'length' bytes
+   */
+  protected readNextBytes(length: number): Uint8Array {
     // Get next 'length' byte
     const next = this.bytes.slice(this.index, this.index + length);
     if (next.length !== length) {
@@ -21,6 +39,10 @@ export class FileReader {
     return next;
   }
 
+  /**
+   * Read a single byte
+   * @returns - Next byte
+   */
   protected readNextByte(): number {
     // Get a single byte
     const byte = this.bytes.at(this.index);

lib/file-writer.ts

@@ -1,16 +1,32 @@
+/**
+ * Generic file writer
+ */
 export class FileWriter {
-  protected bytes = new Uint8Array();
-
+  /**
+   * Byte array of file
+   */
   private fileArray: number[] = [];
 
+  /**
+   * Load buffer into writer
+   * @param buffer - Buffer to write
+   */
   protected getArrayBuffer(): ArrayBuffer {
     return new Uint8ClampedArray(this.fileArray);
   }
 
+  /**
+   * Write bytes to file
+   * @param bytes - Bytes to write
+   */
   protected writeBytes(bytes: number[]) {
     this.fileArray.push(...bytes);
   }
 
+  /**
+   * Write single byte to file
+   * @param byte - Byte to write
+   */
   protected writeByte(byte: number) {
     this.fileArray.push(byte);
   }

lib/tgx/index.ts

@@ -0,0 +1,9 @@
+export enum TokenType {
+  Stream = 0,
+  Transparent = 1,
+  Repeated = 2,
+  EndLine = 4,
+}
+
+export { TgxReader } from "./tgx-reader";
+export { TgxWriter } from "./tgx-writer";

lib/tgx-reader.ts → lib/tgx/tgx-reader.ts

@@ -1,18 +1,15 @@
-import { color15to32 } from "./color";
-import { FileReader } from "./file-reader";
+import { TokenType } from ".";
+import { color15to32 } from "../color";
+import { FileReader } from "../file-reader";
 
 interface TgxToken {
   type: TokenType;
   length: number;
 }
 
-enum TokenType {
-  Stream = 0,
-  Transparent = 1,
-  Repeated = 2,
-  EndLine = 4,
-}
-
+/**
+ * TGX reader
+ */
 export class TgxReader extends FileReader {
   private imageData: number[] = [];
 

lib/tgx-writer.ts → lib/tgx/tgx-writer.ts

@@ -1,18 +1,6 @@
-import { color32to15 } from "./color";
-import { FileWriter } from "./file-writer";
-
-enum TokenType {
-  Stream = 0,
-  Transparent = 1,
-  Repeated = 2,
-  EndLine = 4,
-}
-
-interface PixelValue {
-  r: number;
-  g: number;
-  b: number;
-}
+import { TokenType } from ".";
+import { RGBColor, color32to15 } from "../color";
+import { FileWriter } from "../file-writer";
 
 interface PixelCountValue {
   r: number;
@@ -93,7 +81,7 @@ export class TgxWriter extends FileWriter {
     // Write bytes, line by line
     pixelStack.forEach((line) => {
       // Stream happens when multiple pixels in a row that are not the same
-      const pixelStream: PixelValue[] = [];
+      const pixelStream: RGBColor[] = [];
 
       line.forEach((pixel, index) => {
         // Transparent
@@ -185,15 +173,15 @@ export class TgxWriter extends FileWriter {
    * Write pixel stream
    * @param pixels Pixel values to write to stream
    */
-  private writePixelStream(pixels: PixelValue[]): void {
+  private writePixelStream(pixels: RGBColor[]): void {
     if (pixels.length === 0) {
       return;
     }
 
     this.writeToken(TokenType.Stream, pixels.length);
 
     pixels.forEach((pixel) => {
-      const bytes = color32to15(pixel.r, pixel.g, pixel.b);
+      const bytes = color32to15(pixel);
       this.writeBytes(bytes);
     });
 
@@ -204,8 +192,8 @@ export class TgxWriter extends FileWriter {
    * Write repeated pixel
    * @param pixel Pixel to repeat with length data
    */
-  private writePixelRepeated(pixel: PixelValue, count: number) {
-    const bytes = color32to15(pixel.r, pixel.g, pixel.b);
+  private writePixelRepeated(pixel: RGBColor, count: number) {
+    const bytes = color32to15(pixel);
     this.writeToken(TokenType.Repeated, count);
     this.writeBytes(bytes);
   }