font updates

2026-06-12 20:38:06 -05:00
parent f9a59e9a66
commit ba7a22e0fd
17 changed files with 3709 additions and 7 deletions
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,14 @@
 import { useEffect } from 'react';
 import { invoke } from '@tauri-apps/api/core';
-import { useAppStore } from './store/appStore';
+import { useAppStore, applyTypographyVars, DEFAULT_FONT_FAMILY, DEFAULT_TEXT_COLOR, DEFAULT_FONT_SIZE_INDEX_REAL } from './store/appStore';
 import AppShell from './components/layout/AppShell';
 import ConfigScreen from './components/config/ConfigScreen';

 export default function App() {
-  const { isConfigured, setIsConfigured, setUoRoot, setServuoScripts, setCenterMode } =
-    useAppStore();
+  const {
+    isConfigured, setIsConfigured, setUoRoot, setServuoScripts, setCenterMode,
+    setFontFamily, setFontSizeIndex, setTextColor,
+  } = useAppStore();

  useEffect(() => {
    async function loadConfig() {
@@ -14,6 +16,20 @@ export default function App() {
        const uo = await invoke<string | null>('get_config', { key: 'uo_root' });
        const scripts = await invoke<string | null>('get_config', { key: 'seruo_scripts' });

+        // Load typography settings (non-fatal — fall back to defaults)
+        const fontFamily = await invoke<string | null>('get_config', { key: 'font_family' }).catch(() => null);
+        const fontSizeIdx = await invoke<string | null>('get_config', { key: 'font_size_index' }).catch(() => null);
+        const textColor = await invoke<string | null>('get_config', { key: 'text_color' }).catch(() => null);
+
+        const resolvedFamily = fontFamily ?? DEFAULT_FONT_FAMILY;
+        const resolvedIdx = fontSizeIdx != null ? parseInt(fontSizeIdx, 10) : DEFAULT_FONT_SIZE_INDEX_REAL;
+        const resolvedColor = textColor ?? DEFAULT_TEXT_COLOR;
+
+        setFontFamily(resolvedFamily);
+        setFontSizeIndex(isNaN(resolvedIdx) ? DEFAULT_FONT_SIZE_INDEX_REAL : resolvedIdx);
+        setTextColor(resolvedColor);
+        applyTypographyVars(resolvedFamily, isNaN(resolvedIdx) ? DEFAULT_FONT_SIZE_INDEX_REAL : resolvedIdx, resolvedColor);
+
        if (uo && scripts) {
          setUoRoot(uo);
          setServuoScripts(scripts);
--- a/src/components/config/ConfigScreen.module.css
+++ b/src/components/config/ConfigScreen.module.css
@@ -129,3 +129,138 @@
  font-size: 13px;
  color: #ffd0d0;
 }
+
+/* ── Appearance section ─────────────────────────────────────────── */
+
+.sectionDivider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.sectionDivider::before,
+.sectionDivider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--border);
+}
+
+.sectionLabel {
+  font-family: 'Cinzel', serif;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
+
+.select {
+  width: 100%;
+  padding: 6px 10px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  color: var(--text-primary);
+  font-family: 'EB Garamond', Georgia, serif;
+  font-size: 14px;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.select:focus {
+  border-color: var(--border-accent);
+  outline: none;
+}
+
+.fontSizeRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.fontSizeBtn {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.fontSizeBtn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.fontSizeDisplay {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  padding: 6px 12px;
+  border-radius: 3px;
+}
+
+.fontSizePip {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--border-accent);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background 0.15s, transform 0.15s;
+  flex-shrink: 0;
+}
+
+.fontSizePip:hover {
+  background: var(--accent-gold);
+}
+
+.fontSizePipActive {
+  background: var(--accent-gold-bright);
+  transform: scale(1.4);
+}
+
+.fontSizeLabel {
+  margin-left: auto;
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 12px;
+  color: var(--text-secondary);
+  min-width: 36px;
+  text-align: right;
+}
+
+.colorRow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.colorPicker {
+  width: 40px;
+  height: 32px;
+  padding: 2px;
+  border: 1px solid var(--border);
+  background: var(--bg-elevated);
+  cursor: pointer;
+  border-radius: 3px;
+}
+
+.colorPicker:focus {
+  border-color: var(--border-accent);
+  outline: none;
+}
+
+.colorHex {
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 13px;
+  color: var(--text-secondary);
+  min-width: 64px;
+}
--- a/src/components/config/ConfigScreen.tsx
+++ b/src/components/config/ConfigScreen.tsx
@@ -1,7 +1,11 @@
 import { useState } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import { open } from '@tauri-apps/plugin-dialog';
-import { useAppStore } from '../../store/appStore';
+import {
+  useAppStore,
+  FONT_SIZE_VALUES,
+  FONT_FAMILY_OPTIONS,
+} from '../../store/appStore';
 import styles from './ConfigScreen.module.css';

 interface ValidationResult {
@@ -15,7 +19,11 @@ interface Props {
 }

 export default function ConfigScreen({ onDone }: Props) {
-  const { uoRoot, servuoScripts, setUoRoot, setServuoScripts, setIsConfigured } = useAppStore();
+  const {
+    uoRoot, servuoScripts, setUoRoot, setServuoScripts, setIsConfigured,
+    fontFamily, fontSizeIndex, textColor,
+    setFontFamily, setFontSizeIndex, setTextColor,
+  } = useAppStore();
  const [uoResults, setUoResults] = useState<ValidationResult[]>([]);
  const [scriptResults, setScriptResults] = useState<ValidationResult[]>([]);
  const [saving, setSaving] = useState(false);
@@ -43,6 +51,9 @@ export default function ConfigScreen({ onDone }: Props) {
    try {
      await invoke('set_config', { key: 'uo_root', value: uoRoot });
      await invoke('set_config', { key: 'seruo_scripts', value: servuoScripts });
+      await invoke('set_config', { key: 'font_family', value: fontFamily });
+      await invoke('set_config', { key: 'font_size_index', value: String(fontSizeIndex) });
+      await invoke('set_config', { key: 'text_color', value: textColor });
      setIsConfigured(true);
      onDone?.();
    } catch (e) {
@@ -52,6 +63,13 @@ export default function ConfigScreen({ onDone }: Props) {
    }
  }

+  function handleFontSizeDown() {
+    if (fontSizeIndex > 0) setFontSizeIndex(fontSizeIndex - 1);
+  }
+  function handleFontSizeUp() {
+    if (fontSizeIndex < FONT_SIZE_VALUES.length - 1) setFontSizeIndex(fontSizeIndex + 1);
+  }
+
  const canSave =
    uoRoot &&
    servuoScripts &&
@@ -94,6 +112,71 @@ export default function ConfigScreen({ onDone }: Props) {
          {scriptResults.length > 0 && <ValidationList results={scriptResults} />}
        </div>

+        {/* ── Appearance ────────────────────────────────────────────── */}
+        <div className={styles.sectionDivider}>
+          <span className={styles.sectionLabel}>Appearance</span>
+        </div>
+
+        <div className={styles.field}>
+          <label className={styles.label}>Font Family</label>
+          <select
+            className={styles.select}
+            value={fontFamily}
+            onChange={(e) => setFontFamily(e.target.value)}
+          >
+            {FONT_FAMILY_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>{opt.label}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className={styles.field}>
+          <label className={styles.label}>Font Size</label>
+          <div className={styles.fontSizeRow}>
+            <button
+              className={`${styles.btn} ${styles.fontSizeBtn}`}
+              onClick={handleFontSizeDown}
+              disabled={fontSizeIndex === 0}
+              title="Decrease font size"
+            >−</button>
+            <div className={styles.fontSizeDisplay}>
+              {FONT_SIZE_VALUES.map((sz, i) => (
+                <button
+                  key={sz}
+                  className={`${styles.fontSizePip} ${i === fontSizeIndex ? styles.fontSizePipActive : ''}`}
+                  onClick={() => setFontSizeIndex(i)}
+                  title={`${sz}px`}
+                />
+              ))}
+              <span className={styles.fontSizeLabel}>{FONT_SIZE_VALUES[fontSizeIndex]}px</span>
+            </div>
+            <button
+              className={`${styles.btn} ${styles.fontSizeBtn}`}
+              onClick={handleFontSizeUp}
+              disabled={fontSizeIndex === FONT_SIZE_VALUES.length - 1}
+              title="Increase font size"
+            >+</button>
+          </div>
+        </div>
+
+        <div className={styles.field}>
+          <label className={styles.label}>Text Color</label>
+          <div className={styles.colorRow}>
+            <input
+              type="color"
+              className={styles.colorPicker}
+              value={textColor}
+              onChange={(e) => setTextColor(e.target.value)}
+            />
+            <span className={styles.colorHex}>{textColor}</span>
+            <button
+              className={`${styles.btn} ${styles.btnSecondary}`}
+              onClick={() => setTextColor('#d4c49a')}
+              title="Reset to default parchment color"
+            >Reset</button>
+          </div>
+        </div>
+
        {error && <div className={styles.error}>{error}</div>}

        <div className={styles.actions}>
--- a/src/index.css
+++ b/src/index.css
@@ -14,8 +14,11 @@
  --accent-green: #3a6b3a;
  --scrollbar-thumb: #3a3020;

-  font-family: 'EB Garamond', Georgia, serif;
-  font-size: 16px;
+  --font-family-body: 'EB Garamond', Georgia, serif;
+  --font-size-base: 16px;
+
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-base);
  color: var(--text-primary);
  background-color: var(--bg-base);
 }
--- a/src/store/appStore.ts
+++ b/src/store/appStore.ts
@@ -3,6 +3,35 @@ import type { TileInfo } from '../types/assets';
 import type { ClassSummary, MethodSummary, FlowNode } from '../types/scripts';
 import type { GumpDrawList } from '../types/gump';

+// ── Typography constants ──────────────────────────────────────────────────────
+
+// 7 sizes; index 1 = 16px (the current/default size per spec)
+export const FONT_SIZE_VALUES = [13, 16, 18, 20, 22, 24, 28] as const;
+
+export interface FontFamilyOption {
+  label: string;
+  value: string;
+}
+
+export const FONT_FAMILY_OPTIONS: FontFamilyOption[] = [
+  { label: 'EB Garamond (Default)', value: "'EB Garamond', Georgia, serif" },
+  { label: 'Cinzel', value: "'Cinzel', serif" },
+  { label: 'Georgia', value: 'Georgia, serif' },
+  { label: 'Palatino', value: "'Palatino Linotype', Palatino, serif" },
+  { label: 'System UI', value: 'system-ui, sans-serif' },
+];
+
+export const DEFAULT_FONT_FAMILY = FONT_FAMILY_OPTIONS[0].value;
+export const DEFAULT_TEXT_COLOR = '#d4c49a';
+export const DEFAULT_FONT_SIZE_INDEX_REAL = 1; // index 1 = 16px
+
+export function applyTypographyVars(fontFamily: string, fontSizeIndex: number, textColor: string) {
+  const size = FONT_SIZE_VALUES[fontSizeIndex] ?? 16;
+  document.documentElement.style.setProperty('--font-family-body', fontFamily);
+  document.documentElement.style.setProperty('--font-size-base', `${size}px`);
+  document.documentElement.style.setProperty('--text-primary', textColor);
+}
+
 export type LeftPanelTab = 'scripts' | 'statics' | 'mobiles' | 'gumps';

 export type CenterMode =
@@ -38,6 +67,14 @@ interface AppState {
  setAssetFormat: (f: 'mul' | 'uop') => void;
  setIsConfigured: (v: boolean) => void;

+  // Typography
+  fontFamily: string;
+  fontSizeIndex: number;
+  textColor: string;
+  setFontFamily: (f: string) => void;
+  setFontSizeIndex: (i: number) => void;
+  setTextColor: (c: string) => void;
+
  // Navigation
  activeTab: LeftPanelTab;
  centerMode: CenterMode;
@@ -88,6 +125,28 @@ export const useAppStore = create<AppState>((set) => ({
  setAssetFormat: (f) => set({ assetFormat: f }),
  setIsConfigured: (v) => set({ isConfigured: v }),

+  fontFamily: DEFAULT_FONT_FAMILY,
+  fontSizeIndex: DEFAULT_FONT_SIZE_INDEX_REAL,
+  textColor: DEFAULT_TEXT_COLOR,
+  setFontFamily: (f) => {
+    set((s) => {
+      applyTypographyVars(f, s.fontSizeIndex, s.textColor);
+      return { fontFamily: f };
+    });
+  },
+  setFontSizeIndex: (i) => {
+    set((s) => {
+      applyTypographyVars(s.fontFamily, i, s.textColor);
+      return { fontSizeIndex: i };
+    });
+  },
+  setTextColor: (c) => {
+    set((s) => {
+      applyTypographyVars(s.fontFamily, s.fontSizeIndex, c);
+      return { textColor: c };
+    });
+  },
+
  activeTab: 'statics',
  centerMode: 'empty',
  setActiveTab: (tab) => set({ activeTab: tab }),