Various Niceties

Thinking about adding CodeMirror 6 support to the main editor, which would allow for better UX, mainly code folding, syntax highlighting, and maybe even SNBT syntax error linting, I'm not sure about CodeMirror's support for that kind of thing though. These organization changes are some of the ones I did recently over in STE's codebase. It's part of my experimentation with learning the ways of common bundler-based site structures, as well as the general structures that framework-based sites tend to use, like with React or other libraries. I want to use React, with time, I don't want to cruftily move into using it though, I want my apps to be tidier and more applicable to the framework model before trying to adopt that mindset of structuring things. It's not that I'm trying to wait on using those, but rather I'm trying to teach myself the common patterns that those kinds of structures tend to follow, and I want to get used to those before moving over to also how I manage state and component declarations. That's the current issue, my state management isn't too compatible with how frameworks tend to organize things, and I want to get used to that way of thinking, before moving over to those. Like the concept of putting lipstick on a pig, I'd rather my apps not be ugly before trying to make them fancy. Nothing can be perfect, but you sure as hell can try doing your best! And I see plenty of things I can improve on, before adding layers more of abstraction. I want to remove fluff complexity, before adding helpful abstractions.
Offroaders123 · Dec 4, 2023 · 152e371 · 152e371
1 parent dbbcde2
commit 152e371
Show file tree

Hide file tree

Showing 13 changed files with 18 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -9,18 +9,18 @@
 <meta name="color-scheme" content="light dark">
 <meta name="theme-color" content="#445985">
 <link rel="manifest" href="./manifest.webmanifest">
-<link rel="icon" type="image/svg+xml" href="./icon.svg">
-<link rel="alternate icon" type="image/png" sizes="16x16" href="./icon-16.png">
-<link rel="alternate icon" type="image/png" sizes="32x32" href="./icon-32.png">
+<link rel="icon" type="image/svg+xml" href="./img/icon.svg">
+<link rel="alternate icon" type="image/png" sizes="16x16" href="./img/icon-16.png">
+<link rel="alternate icon" type="image/png" sizes="32x32" href="./img/icon-32.png">
 
-<link rel="stylesheet" href="./src/styles.scss">
+<link rel="stylesheet" href="./src/index.scss">
 
 </head>
 
 <body>
 
 <header>
-  <img draggable="false" src="./icon.svg" alt="">
+  <img draggable="false" src="./img/icon.svg" alt="">
   <button onclick="fileOpener.click();">Open</button>
   <input id="fileOpener" type="file" accept="application/octet-stream, .nbt, .dat, .dat_old, .mcstructure, .litematic, .schem, .schematic">
   <button id="saver" disabled>Save</button>

diff --git a/public/app-1024.png → public/img/app-1024.png b/public/app-1024.png → public/img/app-1024.png
diff --git a/public/app-192.png → public/img/app-192.png b/public/app-192.png → public/img/app-192.png
diff --git a/public/app-512.png → public/img/app-512.png b/public/app-512.png → public/img/app-512.png
diff --git a/public/icon-16.png → public/img/icon-16.png b/public/icon-16.png → public/img/icon-16.png
diff --git a/public/icon-32.png → public/img/icon-32.png b/public/icon-32.png → public/img/icon-32.png
diff --git a/public/icon.svg → public/img/icon.svg b/public/icon.svg → public/img/icon.svg
diff --git a/public/nbt.png → public/img/nbt.png b/public/nbt.png → public/img/nbt.png
diff --git a/public/manifest.webmanifest b/public/manifest.webmanifest
@@ -10,17 +10,17 @@
   "background_color": "#445985",
   "icons": [
     {
-      "src": "./app-192.png",
+      "src": "./img/app-192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "./app-512.png",
+      "src": "./img/app-512.png",
       "type": "image/png",
       "sizes": "512x512"
     },
     {
-      "src": "./app-1024.png",
+      "src": "./img/app-1024.png",
       "type": "image/png",
       "sizes": "1024x1024"
     }

diff --git a/src/app.ts b/src/app.ts
@@ -4,8 +4,8 @@ import { read, write, parse, stringify, NBTData, Int32 } from "nbtify";
 
 import type { Name, Endian, Compression, BedrockLevel, Format } from "nbtify";
 
-const platform = navigator.userAgentData?.platform ?? navigator.platform;
-const isiOSDevice = /^(Mac|iPhone|iPad|iPod)/i.test(platform) && typeof navigator.standalone === "boolean";
+const platform: string = navigator.userAgentData?.platform ?? navigator.platform;
+const isiOSDevice: boolean = /^(Mac|iPhone|iPad|iPod)/i.test(platform) && typeof navigator.standalone === "boolean";
 
 let showTreeView: boolean = false;
 
@@ -123,9 +123,10 @@ export async function openFile(file: File | FileSystemFileHandle | DataTransferF
 }
 
 /**
- * Updates the Format Options dialog to match the NBT file's metadata.
+ * Updates the Format Options dialog to match an NBT file's format metadata.
 */
-export function openOptions({ name, endian, compression, bedrockLevel }: NBTData): Format {
+export function openOptions(format: Format): Format;
+export function openOptions({ name, endian, compression, bedrockLevel }: Format): Format {
   const { elements } = formatForm;
 
   if (name !== null){

diff --git a/src/compression-polyfill.ts b/src/compression-polyfill.ts
@@ -1,7 +1,7 @@
 /**
  * Specifies whether the Compression Streams API must be polyfilled to run in the current browser.
 */
-const USE_POLYFILL: boolean = (() => {
+export const usePolyfill: boolean = (() => {
   try {
     new CompressionStream("deflate-raw");
     new DecompressionStream("deflate-raw");
@@ -11,14 +11,12 @@ const USE_POLYFILL: boolean = (() => {
   }
 })();
 
-if (USE_POLYFILL){
+if (usePolyfill){
   const {
     makeCompressionStream,
     makeDecompressionStream
   } = await import("compression-streams-polyfill/ponyfill");
 
   globalThis.CompressionStream = makeCompressionStream(TransformStream);
   globalThis.DecompressionStream = makeDecompressionStream(TransformStream);
-}
-
-export default USE_POLYFILL;
+}
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -9,7 +9,7 @@ declare global {
 
   interface Navigator {
     /**
-     * Exclusive to iOS and iPadOS devices.
+     * Exclusive to iOS, iPadOS, and macOS devices.
     */
     readonly standalone: boolean;
   }

diff --git a/src/styles.scss → src/index.scss b/src/styles.scss → src/index.scss
@@ -139,7 +139,7 @@ nbt-branch > details > summary::before, nbt-branch > label::before {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  background-image: url("/nbt.png");
+  background-image: url("/img/nbt.png");
   background-repeat: no-repeat;
   background-size: 64px auto;
   image-rendering: pixelated;