More UI updates (#37)

* some more ideas for UI changes * more ui tweaks
charredUtensil · Jul 21, 2024 · f1159fc · f1159fc
1 parent 18f3b7d
commit f1159fc
Show file tree

Hide file tree

Showing 10 changed files with 227 additions and 47 deletions.
diff --git a/src/core/models/building.ts b/src/core/models/building.ts
@@ -50,20 +50,23 @@ export type BuildingExtraArgs = {
 
 class BuildingTemplate {
   readonly id: string;
+  readonly name: string;
   readonly inspectAbbrev: string;
   readonly maxLevel: number;
   readonly ore: number;
   readonly crystals: number;
   readonly footprint: Footprint;
   constructor(
     id: string,
+    name: string,
     inspectAbbrev: string,
     maxLevel: Level,
     ore: number,
     crystals: number,
     footprint: Footprint,
   ) {
     this.id = id;
+    this.name = name;
     this.inspectAbbrev = inspectAbbrev;
     this.maxLevel = maxLevel;
     this.ore = ore;
@@ -91,6 +94,7 @@ class BuildingTemplate {
 
 export const TOOL_STORE = new BuildingTemplate(
   "BuildingToolStore_C",
+  "Tool Store",
   "Ts",
   3,
   0,
@@ -99,6 +103,7 @@ export const TOOL_STORE = new BuildingTemplate(
 );
 export const TELEPORT_PAD = new BuildingTemplate(
   "BuildingTeleportPad_C",
+  "Teleport Pad",
   "Tp",
   2,
   8,
@@ -109,6 +114,7 @@ export const TELEPORT_PAD = new BuildingTemplate(
 // Note the water tile is not counted as part of the foundation
 export const DOCKS = new BuildingTemplate(
   "BuildingDocks_C",
+  "Docks",
   "Dk",
   1,
   8,
@@ -119,6 +125,7 @@ export const DOCKS = new BuildingTemplate(
 // the yellow/black chevron piece is the FRONT.
 export const CANTEEN = new BuildingTemplate(
   "BuildingCanteen_C",
+  "Canteen",
   "Cn",
   1,
   10,
@@ -129,6 +136,7 @@ export const CANTEEN = new BuildingTemplate(
 // the crystals in.
 export const POWER_STATION = new BuildingTemplate(
   "BuildingPowerStation_C",
+  "Power Station",
   "Ps",
   2,
   12,
@@ -137,6 +145,7 @@ export const POWER_STATION = new BuildingTemplate(
 );
 export const SUPPORT_STATION = new BuildingTemplate(
   "BuildingSupportStation_C",
+  "Support Station",
   "Ss",
   2,
   15,
@@ -145,6 +154,7 @@ export const SUPPORT_STATION = new BuildingTemplate(
 );
 export const UPGRADE_STATION = new BuildingTemplate(
   "BuildingUpgradeStation_C",
+  "Upgrade Station",
   "Us",
   3,
   20,
@@ -154,6 +164,7 @@ export const UPGRADE_STATION = new BuildingTemplate(
 // Geological Center origin is the BACK of the building.
 export const GEOLOGICAL_CENTER = new BuildingTemplate(
   "BuildingGeologicalCenter_C",
+  "Geological Center",
   "Gc",
   5,
   20,
@@ -163,6 +174,7 @@ export const GEOLOGICAL_CENTER = new BuildingTemplate(
 // Ore Refinery origin is the FRONT of the building were miners put ore in.
 export const ORE_REFINERY = new BuildingTemplate(
   "BuildingOreRefinery_C",
+  "Ore Refinery",
   "Or",
   4,
   20,
@@ -171,6 +183,7 @@ export const ORE_REFINERY = new BuildingTemplate(
 );
 export const MINING_LASER = new BuildingTemplate(
   "BuildingMiningLaser_C",
+  "Mining Laser",
   "Ml",
   1,
   10,
@@ -180,6 +193,7 @@ export const MINING_LASER = new BuildingTemplate(
 // Super teleport origin is the LEFT side of the building when facing it.
 export const SUPER_TELEPORT = new BuildingTemplate(
   "BuildingSuperTeleport_C",
+  "Super Teleport",
   "St",
   2,
   20,

diff --git a/src/core/models/creature.ts b/src/core/models/creature.ts
@@ -5,19 +5,21 @@ import { EntityPosition, serializePosition } from "./position";
 
 export class CreatureTemplate {
   readonly id: string;
+  readonly name: string;
   readonly inspectAbbrev: string;
-  constructor(id: string, inspectAbbrev: string) {
+  constructor(id: string, name: string, inspectAbbrev: string) {
     this.id = id;
+    this.name = name;
     this.inspectAbbrev = inspectAbbrev;
   }
 }
 
-export const ROCK_MONSTER = new CreatureTemplate("CreatureRockMonster_C", "Rm");
-export const ICE_MONSTER = new CreatureTemplate("CreatureIceMonster_C", "Im");
-export const LAVA_MONSTER = new CreatureTemplate("CreatureLavaMonster_C", "Lm");
-export const SLIMY_SLUG = new CreatureTemplate("CreatureSlimySlug_C", "Sg");
-export const SMALL_SPIDER = new CreatureTemplate("CreatureSmallSpider_C", "Sr");
-export const BAT = new CreatureTemplate("CreatureBat_C", "Bt");
+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 {
   switch (biome) {

diff --git a/src/core/models/vehicle.ts b/src/core/models/vehicle.ts
@@ -19,20 +19,23 @@ const JOBS = {
 
 export class VehicleTemplate {
   readonly id: string;
+  readonly name: string;
   readonly inspectAbbrev: string;
   readonly frame: "small" | "large";
   readonly kind: "land" | "sea" | "air";
   readonly crystals: number;
   readonly upgrades: readonly Upgrade[];
   constructor(
     id: string,
+    name: string,
     inspectAbbrev: string,
     frame: "small" | "large",
     kind: "land" | "sea" | "air",
     crystals: number,
     upgrades: readonly Upgrade[],
   ) {
     this.id = id;
+    this.name = name;
     this.inspectAbbrev = inspectAbbrev;
     this.frame = frame;
     this.kind = kind;
@@ -47,6 +50,7 @@ export class VehicleTemplate {
 
 export const HOVER_SCOUT = new VehicleTemplate(
   "VehicleHoverScout_C",
+  "Hover Scout",
   "HoSc",
   "small",
   "land",
@@ -55,6 +59,7 @@ export const HOVER_SCOUT = new VehicleTemplate(
 );
 export const SMALL_DIGGER = new VehicleTemplate(
   "VehicleSmallDigger_C",
+  "Small Digger",
   "SmDi",
   "small",
   "land",
@@ -63,6 +68,7 @@ export const SMALL_DIGGER = new VehicleTemplate(
 );
 export const SMALL_TRANSPORT_TRUCK = new VehicleTemplate(
   "VehicleSmallTransportTruck_C",
+  "Small Transport Truck",
   "SmTT",
   "small",
   "land",
@@ -71,6 +77,7 @@ export const SMALL_TRANSPORT_TRUCK = new VehicleTemplate(
 );
 export const RAPID_RIDER = new VehicleTemplate(
   "VehicleRapidRider_C",
+  "Rapid Rider",
   "RaRr",
   "small",
   "sea",
@@ -79,6 +86,7 @@ export const RAPID_RIDER = new VehicleTemplate(
 );
 export const SMLC = new VehicleTemplate(
   "VehicleSMLC_C",
+  "Small Mobile Laser Cutter",
   "SMLC",
   "small",
   "land",
@@ -87,6 +95,7 @@ export const SMLC = new VehicleTemplate(
 );
 export const TUNNEL_SCOUT = new VehicleTemplate(
   "VehicleTunnelScout_C",
+  "Tunnel Scout",
   "TuSc",
   "small",
   "air",
@@ -95,6 +104,7 @@ export const TUNNEL_SCOUT = new VehicleTemplate(
 );
 export const LOADER_DOZER = new VehicleTemplate(
   "VehicleLoaderDozer_C",
+  "Loader Dozer",
   "LoDz",
   "large",
   "land",
@@ -103,6 +113,7 @@ export const LOADER_DOZER = new VehicleTemplate(
 );
 export const GRANITE_GRINDER = new VehicleTemplate(
   "VehicleGraniteGrinder_C",
+  "Granite Grinder",
   "GrGr",
   "large",
   "land",
@@ -111,6 +122,7 @@ export const GRANITE_GRINDER = new VehicleTemplate(
 );
 export const CARGO_CARRIER = new VehicleTemplate(
   "VehicleCargoCarrier_C",
+  "Cargo Carrier",
   "CaCa",
   "large",
   "sea",
@@ -119,6 +131,7 @@ export const CARGO_CARRIER = new VehicleTemplate(
 );
 export const LMLC = new VehicleTemplate(
   "VehicleLMLC_C",
+  "Large Mobile Laser Cutter",
   "LMLC",
   "large",
   "land",
@@ -127,6 +140,7 @@ export const LMLC = new VehicleTemplate(
 );
 export const CHROME_CRUSHER = new VehicleTemplate(
   "VehicleChromeCrusher_C",
+  "Chrome Crusher",
   "CrCr",
   "large",
   "land",
@@ -135,6 +149,7 @@ export const CHROME_CRUSHER = new VehicleTemplate(
 );
 export const TUNNEL_TRANSPORT = new VehicleTemplate(
   "VehicleTunnelTransport_C",
+  "Tunnel Transport",
   "TuTr",
   "large",
   "air",

diff --git a/src/webui/App.module.scss b/src/webui/App.module.scss
@@ -1,3 +1,12 @@
+@keyframes scan-scrim {
+  0% {
+    background-position-x: -800px;
+  }
+  100% {
+    background-position-x: 0;
+  }
+}
+
 .App {
   --font-body: "Outfit";
   --font-cyber: "Russo One";
@@ -44,6 +53,66 @@
     width: 75%;
     overflow: hidden;
 
+    .grid {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+
+      background: var(--palette-settings-bg);
+
+      &::before {
+        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-size: 800px 100%;
+        animation: scan-scrim 3s infinite linear;
+        opacity: 0;
+        transition: opacity 3000ms ease-in;
+      }
+
+      &.loading::before {
+        opacity: 1;
+        transition: opacity 250ms ease-out;
+      }
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+
+        background: var(--palette-bg);
+        mask-composite: subtract;
+        mask-image:
+          linear-gradient(
+            to right,
+            white 16px,
+            transparent 16px,
+            transparent 17px,
+            white 17px),
+          linear-gradient(
+            transparent 16px,
+            black 16px,
+            black 17px,
+            transparent 17px);
+        mask-size: 32px 32px;
+      }
+    }
+
     .stepName {
       position: absolute;
       top: 16px;

diff --git a/src/webui/App.tsx b/src/webui/App.tsx
@@ -124,6 +124,16 @@ function App() {
         <CavernContextInput dispatchState={dispatchState} />
       </div>
       <div className={styles.mainPanel}>
+        <div className={`${styles.grid} ${autoGenerate && !state.cavern?.serialized ? styles.loading : ''}`} />
+        {state.cavern && (
+          <CavernPreview
+            cavern={state.cavern}
+            error={state.error}
+            mapOverlay={mapOverlay}
+            showOutlines={showOutlines}
+            showPearls={showPearls}
+          />
+        )}
         {autoGenerate && state.progress !== undefined && (
           <div
             className={`${styles.progressBar} ${state.progress < 1 ? "" : styles.complete}`}
@@ -134,15 +144,6 @@ function App() {
             }
           />
         )}
-        {state.cavern && (
-          <CavernPreview
-            cavern={state.cavern}
-            error={state.error}
-            mapOverlay={mapOverlay}
-            showOutlines={showOutlines}
-            showPearls={showPearls}
-          />
-        )}
         {!autoGenerate && state.name && (
           <div className={styles.stepName}>{state.name}</div>
         )}

diff --git a/src/webui/components/map_preview/entity.tsx b/src/webui/components/map_preview/entity.tsx
@@ -69,7 +69,9 @@ export default function EntityPreview({
           <path
             className={styles.marker}
             d={`M${u + SCALE / 4} 0 L${u} ${v} L${-u} ${v} L${-u} ${-v} L${u} ${-v} Z`}
-          />
+          >
+            <title>{entity.template.name}</title>
+          </path>
           <text className={styles.label} x={0} y={0.75}>
             {entity.template.inspectAbbrev}
           </text>