@vgai/editor 0.2.0

package/src/components/BuildPanel.tsx

@@ -0,0 +1,455 @@
+import { faGlobe } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { getDownloadUrl, saveFile, startExport } from '../editor-api';
+
+type BuildTarget = 'web';
+type BuildPhase = 'idle' | 'building' | 'done';
+
+interface BuildResult {
+  ok: boolean;
+  code: number | null;
+}
+
+interface ProjectConfig {
+  name: string;
+  resolution: { width: number; height: number };
+  appId: string;
+}
+
+const DEFAULT_CONFIG: ProjectConfig = {
+  name: 'My Game',
+  resolution: { width: 1280, height: 720 },
+  appId: 'com.example.mygame',
+};
+
+const TARGETS: {
+  id: BuildTarget;
+  label: string;
+  subtitle: string;
+  output: string;
+  icon: typeof faGlobe;
+}[] = [
+  { id: 'web', label: 'Web', subtitle: 'HTML5 for itch.io', output: 'vgai-web.zip', icon: faGlobe },
+];
+
+export function BuildPanel() {
+  const [config, setConfig] = useState<ProjectConfig>(DEFAULT_CONFIG);
+  const [phase, setPhase] = useState<BuildPhase>('idle');
+  const [selected, setSelected] = useState<BuildTarget>('web');
+  const [log, setLog] = useState<string[]>([]);
+  const [result, setResult] = useState<BuildResult | null>(null);
+  const logRef = useRef<HTMLDivElement>(null);
+  const abortRef = useRef<AbortController | null>(null);
+  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Load config on mount
+  useEffect(() => {
+    fetch('/project.json')
+      .then((res) => (res.ok ? res.json() : DEFAULT_CONFIG))
+      .then((data) => setConfig({ ...DEFAULT_CONFIG, ...data }))
+      .catch(() => {});
+  }, []);
+
+  // Auto-scroll log
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
+  }, [log]);
+
+  // Debounced save
+  const saveConfig = useCallback((cfg: ProjectConfig) => {
+    if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+    saveTimerRef.current = setTimeout(() => {
+      saveFile('project.json', JSON.stringify(cfg, null, 2)).catch(() => {});
+    }, 500);
+  }, []);
+
+  const updateConfig = useCallback(
+    (patch: Partial<ProjectConfig>) => {
+      setConfig((prev) => {
+        const next = { ...prev, ...patch };
+        saveConfig(next);
+        return next;
+      });
+    },
+    [saveConfig],
+  );
+
+  const updateResolution = useCallback(
+    (key: 'width' | 'height', value: number) => {
+      setConfig((prev) => {
+        const next = { ...prev, resolution: { ...prev.resolution, [key]: Math.round(value) } };
+        saveConfig(next);
+        return next;
+      });
+    },
+    [saveConfig],
+  );
+
+  const startBuild = useCallback(async () => {
+    setPhase('building');
+    setLog([]);
+    setResult(null);
+
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    try {
+      const res = await startExport(selected, controller.signal);
+
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({ error: 'Build request failed' }));
+        setLog((prev) => [...prev, `Error: ${err.error ?? res.statusText}`]);
+        setResult({ ok: false, code: null });
+        setPhase('done');
+        return;
+      }
+
+      const reader = res.body!.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+
+        const parts = buffer.split('\n\n');
+        buffer = parts.pop()!;
+
+        for (const part of parts) {
+          if (part.startsWith(':')) continue;
+          const lines = part.split('\n');
+          let event = '';
+          let data = '';
+          for (const line of lines) {
+            if (line.startsWith('event: ')) event = line.slice(7);
+            else if (line.startsWith('data: ')) data = line.slice(6);
+          }
+          if (event === 'log') {
+            try {
+              const text = JSON.parse(data) as string;
+              setLog((prev) => [...prev, text]);
+            } catch {
+              setLog((prev) => [...prev, data]);
+            }
+          } else if (event === 'done') {
+            try {
+              const r = JSON.parse(data) as BuildResult;
+              setResult(r);
+            } catch {
+              setResult({ ok: false, code: null });
+            }
+            setPhase('done');
+          }
+        }
+      }
+    } catch (err: unknown) {
+      if ((err as Error).name !== 'AbortError') {
+        setLog((prev) => [...prev, `Error: ${(err as Error).message}`]);
+        setResult({ ok: false, code: null });
+        setPhase('done');
+      }
+    }
+  }, [selected]);
+
+  const cancelBuild = useCallback(() => {
+    abortRef.current?.abort();
+    setPhase('idle');
+  }, []);
+
+  const targetInfo = TARGETS.find((t) => t.id === selected)!;
+
+  return (
+    <div style={{ display: 'flex', flex: 1, minHeight: 0, background: '#2c2c2c' }}>
+      {/* Left: target list */}
+      <div style={targetListStyle}>
+        {TARGETS.map((t) => (
+          <div
+            key={t.id}
+            onClick={() => {
+              if (phase !== 'building') setSelected(t.id);
+            }}
+            style={{
+              padding: '8px 12px',
+              cursor: phase === 'building' ? 'default' : 'pointer',
+              background: selected === t.id ? '#353535' : 'transparent',
+              borderLeft: `3px solid ${selected === t.id ? '#579EFF' : 'transparent'}`,
+              opacity: phase === 'building' && selected !== t.id ? 0.4 : 1,
+            }}
+          >
+            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <FontAwesomeIcon
+                icon={t.icon}
+                style={{ fontSize: 13, color: selected === t.id ? '#579EFF' : '#888' }}
+              />
+              <div>
+                <div
+                  style={{
+                    fontSize: 12,
+                    fontWeight: 600,
+                    color: selected === t.id ? '#c5c8ce' : '#999',
+                  }}
+                >
+                  {t.label}
+                </div>
+                <div style={{ fontSize: 10, color: '#666', marginTop: 1 }}>{t.subtitle}</div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Right: phase-dependent content */}
+      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        {/* Idle: settings + build button */}
+        {phase === 'idle' && (
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column', padding: '10px 16px' }}>
+            <div style={sectionHeaderStyle}>Project</div>
+
+            <div style={fieldRowStyle}>
+              <label style={labelStyle}>Name</label>
+              <input
+                style={textInputStyle}
+                value={config.name}
+                onChange={(e) => updateConfig({ name: e.target.value })}
+              />
+            </div>
+
+            <div style={fieldRowStyle}>
+              <label style={labelStyle}>Resolution</label>
+              <div style={{ display: 'flex', alignItems: 'center', gap: 4, flex: 1 }}>
+                <input
+                  type="number"
+                  style={{ ...textInputStyle, width: 0, flex: 1 }}
+                  value={config.resolution.width}
+                  onChange={(e) => {
+                    const v = Number.parseInt(e.target.value, 10);
+                    if (Number.isFinite(v) && v > 0) updateResolution('width', v);
+                  }}
+                />
+                <span style={{ fontSize: 10, color: '#666' }}>&times;</span>
+                <input
+                  type="number"
+                  style={{ ...textInputStyle, width: 0, flex: 1 }}
+                  value={config.resolution.height}
+                  onChange={(e) => {
+                    const v = Number.parseInt(e.target.value, 10);
+                    if (Number.isFinite(v) && v > 0) updateResolution('height', v);
+                  }}
+                />
+              </div>
+            </div>
+
+            <div style={fieldRowStyle}>
+              <label style={labelStyle}>App ID</label>
+              <input
+                style={textInputStyle}
+                value={config.appId}
+                onChange={(e) => updateConfig({ appId: e.target.value })}
+              />
+            </div>
+
+            <div style={{ ...fieldRowStyle, marginTop: 4 }}>
+              <label style={labelStyle}>Output</label>
+              <span style={{ fontSize: 12, color: '#888' }}>{targetInfo.output}</span>
+            </div>
+
+            <div
+              style={{
+                marginTop: 'auto',
+                display: 'flex',
+                justifyContent: 'flex-end',
+                paddingTop: 8,
+              }}
+            >
+              <button type="button" onClick={startBuild} style={buildBtnStyle}>
+                Build
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Building: log */}
+        {phase === 'building' && (
+          <div style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
+            <div style={buildingHeaderStyle}>
+              <span>Building for {targetInfo.label}...</span>
+              <button type="button" onClick={cancelBuild} style={smallBtnStyle}>
+                Cancel
+              </button>
+            </div>
+            <div ref={logRef} style={logBoxStyle}>
+              {log.map((line, i) => (
+                <div key={i}>{line || '\u00A0'}</div>
+              ))}
+              <div
+                style={{
+                  display: 'inline-block',
+                  width: 6,
+                  height: 14,
+                  background: '#579EFF',
+                  animation: 'blink 1s step-end infinite',
+                }}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Done: result */}
+        {phase === 'done' && (
+          <div
+            style={{
+              flex: 1,
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 8,
+              padding: 16,
+            }}
+          >
+            <div style={{ fontSize: 28, color: result?.ok ? '#4ec9b0' : '#ff6b6b' }}>
+              {result?.ok ? '\u2713' : '\u2717'}
+            </div>
+            <div style={{ fontSize: 13, fontWeight: 600, color: '#c5c8ce' }}>
+              {result?.ok ? 'Build Complete' : 'Build Failed'}
+            </div>
+            {result?.ok ? (
+              <div style={{ fontSize: 12, color: '#888' }}>{targetInfo.output}</div>
+            ) : (
+              <div style={{ fontSize: 12, color: '#888' }}>
+                Exit code: {result?.code ?? 'unknown'}
+              </div>
+            )}
+            <div style={{ display: 'flex', gap: 8, marginTop: 8 }}>
+              {result?.ok && selected === 'web' && (
+                <a
+                  href={getDownloadUrl(targetInfo.output)}
+                  download={targetInfo.output}
+                  style={downloadBtnStyle}
+                >
+                  Download
+                </a>
+              )}
+              <button
+                type="button"
+                onClick={() => {
+                  setPhase('idle');
+                  setLog([]);
+                  setResult(null);
+                }}
+                style={buildBtnStyle}
+              >
+                Build Again
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/* ---- Styles ---- */
+
+const targetListStyle: React.CSSProperties = {
+  width: 140,
+  flexShrink: 0,
+  borderRight: '1px solid #333',
+  overflowY: 'auto',
+};
+
+const sectionHeaderStyle: React.CSSProperties = {
+  fontSize: 10,
+  fontWeight: 700,
+  textTransform: 'uppercase',
+  color: '#666',
+  letterSpacing: '0.05em',
+  marginBottom: 6,
+};
+
+const fieldRowStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+  marginBottom: 4,
+};
+
+const labelStyle: React.CSSProperties = {
+  width: 65,
+  fontSize: 11,
+  color: '#8c8c8c',
+  flexShrink: 0,
+};
+
+const textInputStyle: React.CSSProperties = {
+  flex: 1,
+  background: '#1e1e1e',
+  color: '#c5c8ce',
+  border: '1px solid #333',
+  borderRadius: 2,
+  padding: '2px 6px',
+  fontSize: 12,
+  outline: 'none',
+  minWidth: 0,
+};
+
+const buildingHeaderStyle: React.CSSProperties = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '8px 12px',
+  fontSize: 12,
+  fontWeight: 600,
+  color: '#579EFF',
+  flexShrink: 0,
+  borderBottom: '1px solid #333',
+};
+
+const smallBtnStyle: React.CSSProperties = {
+  background: '#333',
+  color: '#c5c8ce',
+  border: '1px solid #444',
+  borderRadius: 4,
+  padding: '4px 12px',
+  fontSize: 11,
+  cursor: 'pointer',
+};
+
+const buildBtnStyle: React.CSSProperties = {
+  background: '#579EFF',
+  color: '#fff',
+  border: '1px solid #6AADFF',
+  borderRadius: 4,
+  padding: '6px 16px',
+  fontSize: 12,
+  fontWeight: 600,
+  cursor: 'pointer',
+};
+
+const downloadBtnStyle: React.CSSProperties = {
+  background: '#333',
+  color: '#c5c8ce',
+  border: '1px solid #444',
+  borderRadius: 4,
+  padding: '6px 16px',
+  fontSize: 12,
+  cursor: 'pointer',
+  textDecoration: 'none',
+  display: 'inline-block',
+};
+
+const logBoxStyle: React.CSSProperties = {
+  flex: 1,
+  overflowY: 'auto',
+  background: '#1a1a1a',
+  padding: '4px 8px',
+  fontFamily: 'ui-monospace, "SF Mono", Menlo, Consolas, monospace',
+  fontSize: 11,
+  lineHeight: '16px',
+  color: '#aaa',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+  minHeight: 0,
+};

package/src/components/CameraInfo.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useRef, useState } from 'react';
+import { useEditorStats } from '../EditorContext';
+
+function fmt(n: number): string {
+  return n.toFixed(2);
+}
+
+export function CameraInfo() {
+  const stats = useEditorStats();
+  const [pos, setPos] = useState({ x: 0, y: 0, z: 0 });
+  const [target, setTarget] = useState({ x: 0, y: 0, z: 0 });
+  const rafRef = useRef(0);
+
+  useEffect(() => {
+    function tick() {
+      const cam = stats.cameraPosition;
+      const tgt = stats.cameraTarget;
+      setPos((prev) =>
+        prev.x !== cam.x || prev.y !== cam.y || prev.z !== cam.z
+          ? { x: cam.x, y: cam.y, z: cam.z }
+          : prev,
+      );
+      setTarget((prev) =>
+        prev.x !== tgt.x || prev.y !== tgt.y || prev.z !== tgt.z
+          ? { x: tgt.x, y: tgt.y, z: tgt.z }
+          : prev,
+      );
+      rafRef.current = requestAnimationFrame(tick);
+    }
+    rafRef.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [stats]);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        bottom: 6,
+        right: 10,
+        display: 'flex',
+        alignItems: 'center',
+        gap: 16,
+        fontSize: 11,
+        color: '#c5c8ce',
+        textShadow: '0 1px 3px rgba(0,0,0,0.8)',
+      }}
+    >
+      <span>
+        Pos {fmt(pos.x)} {fmt(pos.y)} {fmt(pos.z)}
+      </span>
+      <span>
+        Target {fmt(target.x)} {fmt(target.y)} {fmt(target.z)}
+      </span>
+    </div>
+  );
+}