fix: allow blank cells; disable dice roll until it is ready (#29)

Author: ericrallen

src/components/Editor/EditorHex.module.css

@@ -115,6 +115,17 @@
   font-weight: bold;
 }
 
+/* Blank rendering for editor hexes */
+.blank .hexId,
+.blank .icon {
+  display: none !important;
+}
+
+/* Hide all direct children (icon/label/etc) when blank — preserves pseudo-elements */
+.blank > * {
+  display: none !important;
+}
+
 @media (min-width: 480px) {
   .hex {
     --hex-size: 60px;

src/components/Editor/EditorHex.tsx

@@ -33,6 +33,7 @@ export function EditorHex({ hex, onHexClick, isSelected, isHighlighted, isStart,
   ]
     .filter(Boolean)
     .join(" ");
+  const boxClasses = [hexClasses, hex.blank && classes.blank].filter(Boolean).join(" ");
 
   const tooltipLabel = hex.label || `Hex ${hex.id}`;
 
@@ -41,19 +42,15 @@ export function EditorHex({ hex, onHexClick, isSelected, isHighlighted, isStart,
       <Tooltip label={tooltipLabel} position="top" withArrow>
         <UnstyledButton onClick={onHexClick} className={containerClasses} aria-label={tooltipLabel}>
           <Box
-            className={hexClasses}
+            className={boxClasses}
             style={
               {
                 backgroundColor,
                 "--hex-bg": backgroundColor,
               } as React.CSSProperties
             }
           >
-            {hex.style?.icon ? (
-              <HexIcon icon={hex.style.icon} label={tooltipLabel} />
-            ) : (
-              <span className={classes.hexId}>{hex.id}</span>
-            )}
+            {!hex.blank && (hex.style?.icon ? <HexIcon icon={hex.style.icon} label={tooltipLabel} /> : <span className={classes.hexId}>{hex.id}</span>)}
           </Box>
         </UnstyledButton>
       </Tooltip>

src/components/Editor/EngineSettingsPanel.tsx

@@ -143,10 +143,11 @@ export function EngineSettingsPanel() {
 
         <Select
           label="Dice Roll"
-          description="The dice rolled to determine movement"
+          description="(Coming Soon) The dice rolled to determine movement"
           value={draft.roll}
           onChange={handleRollChange}
           data={DICE_OPTIONS}
+          disabled
         />
 
         <Text size="sm" fw={500}>

src/components/Editor/HexPropertyPanel.tsx

@@ -2,6 +2,7 @@ import { useCallback, useState } from "react";
 import {
   Stack,
   Text,
+  Switch,
   TextInput,
   Textarea,
   ColorInput,
@@ -199,6 +200,15 @@ export function HexPropertyPanel() {
           swatchesPerRow={8}
         />
 
+        <Group justify="space-between" align="center">
+          <Text size="sm">Render blank</Text>
+          <Switch
+            checked={!!selectedHex.blank}
+            onChange={(e) => actions.updateHex(selectedHex.id, { blank: e.currentTarget.checked })}
+            aria-label="Render hex blank"
+          />
+        </Group>
+
         <Box>
           <Text size="sm" fw={500} mb={4}>
             Icon

src/components/Hex/Hex.module.css

@@ -76,6 +76,20 @@
   font-weight: bold;
 }
 
+/* When a hex is marked blank, hide overlays (icon/label/number) */
+.blank .hexId,
+.blank .icon {
+  display: none !important;
+}
+
+.blank {
+  /* make sure blank hexes still show shape but without content */
+}
+/* Hide all direct children (icon/label/etc) when blank — preserves pseudo-elements */
+.blank > * {
+  display: none !important;
+}
+
 @media (min-width: 480px) {
   .hex {
     --hex-size: 80px;

src/components/Hex/Hex.tsx

@@ -20,6 +20,8 @@ export function Hex({ hex, onHexClick, isActive, isHighlighted }: HexProps) {
   const hexClasses = [classes.hex, isActive && classes.activeHex, isHighlighted && classes.highlightedHex]
     .filter(Boolean)
     .join(" ");
+  // add blank class when hex should render empty
+  const boxClasses = [hexClasses, hex.blank && classes.blank].filter(Boolean).join(" ");
 
   const tooltipLabel = hex.label || `Hex ${hex.id}`;
 
@@ -28,19 +30,15 @@ export function Hex({ hex, onHexClick, isActive, isHighlighted }: HexProps) {
       <Tooltip label={tooltipLabel} position="top" withArrow>
         <UnstyledButton onClick={onHexClick} className={containerClasses} disabled={isActive} aria-label={tooltipLabel}>
           <Box
-            className={hexClasses}
+            className={boxClasses}
             style={
               {
                 backgroundColor,
                 "--hex-bg": backgroundColor,
               } as React.CSSProperties
             }
           >
-            {hex.style?.icon ? (
-              <HexIcon icon={hex.style.icon} label={tooltipLabel} />
-            ) : (
-              <span className={classes.hexId}>{hex.id}</span>
-            )}
+            {!hex.blank && (hex.style?.icon ? <HexIcon icon={hex.style.icon} label={tooltipLabel} /> : <span className={classes.hexId}>{hex.id}</span>)}
           </Box>
         </UnstyledButton>
       </Tooltip>

src/types/engine.ts

@@ -54,6 +54,11 @@ export interface HexNode {
   modifiers?: Modifier[];
   /** Visual styling */
   style?: NodeStyle;
+  /**
+   * When true, this hex renders as a blank cell on the grid:
+   * no icon, no number/label — only the base hex shape (still selectable).
+   */
+  blank?: boolean;
   /** 
    * Navigation map: direction -> target node ID
    * A node can reference itself to indicate "stay in place"