0.9.4 - Even more UI updates (#38)

charredUtensil · Jul 26, 2024 · b4d8621 · b4d8621
1 parent f1159fc
commit b4d8621
Show file tree

Hide file tree

Showing 16 changed files with 773 additions and 439 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "groundhog",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "homepage": "https://charredutensil.github.io/groundhog",
   "private": true,
   "dependencies": {

diff --git a/src/core/models/creature.ts b/src/core/models/creature.ts
@@ -14,11 +14,31 @@ export class CreatureTemplate {
   }
 }
 
-export const ROCK_MONSTER = new CreatureTemplate("CreatureRockMonster_C", "Rock Monster", "Rm");
-export const ICE_MONSTER = new CreatureTemplate("CreatureIceMonster_C", "Ice Monster", "Im");
-export const LAVA_MONSTER = new CreatureTemplate("CreatureLavaMonster_C", "Lava Monster", "Lm");
-export const SLIMY_SLUG = new CreatureTemplate("CreatureSlimySlug_C", "Slimy Slug", "Sg");
-export const SMALL_SPIDER = new CreatureTemplate("CreatureSmallSpider_C", "Small Spider", "Sr");
+export const ROCK_MONSTER = new CreatureTemplate(
+  "CreatureRockMonster_C",
+  "Rock Monster",
+  "Rm",
+);
+export const ICE_MONSTER = new CreatureTemplate(
+  "CreatureIceMonster_C",
+  "Ice Monster",
+  "Im",
+);
+export const LAVA_MONSTER = new CreatureTemplate(
+  "CreatureLavaMonster_C",
+  "Lava Monster",
+  "Lm",
+);
+export const SLIMY_SLUG = new CreatureTemplate(
+  "CreatureSlimySlug_C",
+  "Slimy Slug",
+  "Sg",
+);
+export const SMALL_SPIDER = new CreatureTemplate(
+  "CreatureSmallSpider_C",
+  "Small Spider",
+  "Sr",
+);
 export const BAT = new CreatureTemplate("CreatureBat_C", "Bat", "Bt");
 
 export function monsterForBiome(biome: Biome): CreatureTemplate {

diff --git a/src/index.css b/src/index.css
@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0&family=Russo+One&family=Outfit:wght@500&family=Silkscreen:wght@400;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,1,0&family=Russo+One&family=Outfit:wght@500&family=Silkscreen:wght@400;700&family=IBM+Plex+Mono:wght@400&display=swap");
 
 body {
   margin: 0;

diff --git a/src/webui/App.module.scss b/src/webui/App.module.scss
@@ -11,6 +11,7 @@
   --font-body: "Outfit";
   --font-cyber: "Russo One";
   --font-tiny: "Silkscreen";
+  --font-mono: "IBM Plex Mono";
 
   --palette-fg: white;
   --palette-bg: #121212;
@@ -61,21 +62,21 @@
       bottom: 0;
 
       background: var(--palette-settings-bg);
-      
+
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         left: 0;
         top: 0;
         right: 0;
         bottom: 0;
 
-        background-image:
-          linear-gradient(
-            to left,
-            transparent 0px,
-            var(--palette-accent) 25px,
-            transparent 400px);
+        background-image: linear-gradient(
+          to left,
+          transparent 0px,
+          var(--palette-accent) 25px,
+          transparent 400px
+        );
         background-size: 800px 100%;
         animation: scan-scrim 3s infinite linear;
         opacity: 0;
@@ -86,9 +87,9 @@
         opacity: 1;
         transition: opacity 250ms ease-out;
       }
-    
+
       &::after {
-        content: '';
+        content: "";
         position: absolute;
         left: 0;
         top: 0;
@@ -97,18 +98,19 @@
 
         background: var(--palette-bg);
         mask-composite: subtract;
-        mask-image:
-          linear-gradient(
+        mask-image: linear-gradient(
             to right,
             white 16px,
             transparent 16px,
             transparent 17px,
-            white 17px),
+            white 17px
+          ),
           linear-gradient(
             transparent 16px,
             black 16px,
             black 17px,
-            transparent 17px);
+            transparent 17px
+          );
         mask-size: 32px 32px;
       }
     }

diff --git a/src/webui/App.tsx b/src/webui/App.tsx
@@ -32,6 +32,7 @@ const MAP_OVERLAY_BUTTONS: readonly {
   { of: "erosion", label: "Erosion", enabled: (c) => !!c?.erosion },
   { of: "oxygen", label: "Oxygen", enabled: (c) => c?.oxygen !== undefined },
   { of: "lore", label: "Lore", enabled: (c) => !!c?.lore },
+  { of: "script", label: "Script", enabled: (c) => !!c?.script },
   { of: "about", label: "About", enabled: (c) => true },
 ];
 
@@ -118,13 +119,16 @@ function App() {
     (window as any).cavern = state.cavern;
   }, [state]);
 
+  const isLoading =
+    (autoGenerate && !state.cavern?.serialized) || mapOverlay === "about";
+
   return (
     <div className={`${styles.App} ${styles[`${biome}Biome`]}`}>
       <div className={styles.settingsPanel}>
         <CavernContextInput dispatchState={dispatchState} />
       </div>
       <div className={styles.mainPanel}>
-        <div className={`${styles.grid} ${autoGenerate && !state.cavern?.serialized ? styles.loading : ''}`} />
+        <div className={`${styles.grid} ${isLoading ? styles.loading : ""}`} />
         {state.cavern && (
           <CavernPreview
             cavern={state.cavern}
@@ -172,8 +176,8 @@ function App() {
             </div>
           )}
         </div>
-        {mapOverlay === "lore" && <LorePreview cavern={state.cavern} />}
         {mapOverlay === "about" && <About />}
+        {mapOverlay === "lore" && <LorePreview cavern={state.cavern} />}
       </div>
       <div className={styles.vizOptsPanel}>
         <h1>Show</h1>

diff --git a/src/webui/components/about.module.scss b/src/webui/components/about.module.scss
diff --git a/src/webui/components/about.tsx → src/webui/components/about/index.tsx b/src/webui/components/about.tsx → src/webui/components/about/index.tsx
@@ -1,9 +1,9 @@
 import React from "react";
-import styles from "./about.module.scss";
+import styles from "./styles.module.scss";
 
 const About = () => (
-  <div className={styles.about}>
-    <div>
+  <div className={styles.popoverWrapper}>
+    <div className={styles.about}>
       <h2>groundHog v{process.env.REACT_APP_VERSION}</h2>
       <p>By Christopher Dollard (aka charredUtensil)</p>
       <p>

diff --git a/src/webui/components/about/styles.module.scss b/src/webui/components/about/styles.module.scss
@@ -0,0 +1,40 @@
+.popoverWrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  > div {
+    background: var(--palette-bg);
+    border: 1px solid var(--palette-settings-bg);
+    margin: 0 auto;
+    padding: 0 24px;
+    max-width: 500px;
+    max-height: calc(100% - 100px);
+    overflow-x: hidden;
+    overflow-y: scroll;
+  }
+
+  .about {
+    color: var(--palette-accent);
+
+    a {
+      color: var(--palette-fg);
+    }
+  }
+
+  .script {
+    transform: translateX(-250px);
+    width: 300px;
+
+    .src {
+      white-space: pre;
+      font-family: var(--font-mono);
+      font-size: 12px;
+    }
+  }
+}