DNDGamePlayer: Electron редактор сцен, презентация, упаковка electron-builder

Made-with: Cursor
2026-04-19 14:16:54 +08:00
commit a6cbcc273e
82 changed files with 22195 additions and 0 deletions
@@ -0,0 +1,96 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import styles from './Controls.module.css';
+
+type ButtonProps = {
+  children: React.ReactNode;
+  onClick?: () => void;
+  variant?: 'primary' | 'ghost';
+  disabled?: boolean;
+  title?: string | undefined;
+  /** Подпись для скринридеров (иконки без текста). */
+  ariaLabel?: string | undefined;
+  /** Компактная кнопка под одну иконку. */
+  iconOnly?: boolean;
+};
+
+export function Button({
+  children,
+  onClick,
+  variant = 'ghost',
+  disabled = false,
+  title,
+  ariaLabel,
+  iconOnly = false,
+}: ButtonProps) {
+  const btnRef = useRef<HTMLButtonElement | null>(null);
+  const [tipPos, setTipPos] = useState<{ x: number; y: number } | null>(null);
+
+  const showTip = useCallback(() => {
+    if (disabled || !title) return;
+    const el = btnRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setTipPos({ x: r.left + r.width / 2, y: r.top });
+  }, [disabled, title]);
+
+  const hideTip = useCallback(() => {
+    setTipPos(null);
+  }, []);
+
+  const btnClass = [
+    styles.button,
+    variant === 'primary' ? styles.buttonPrimary : '',
+    iconOnly ? styles.iconOnly : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const tip =
+    title && tipPos && typeof document !== 'undefined'
+      ? createPortal(
+          <div role="tooltip" className={styles.tooltip} style={{ left: tipPos.x, top: tipPos.y }}>
+            {title}
+          </div>,
+          document.body,
+        )
+      : null;
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        className={btnClass}
+        disabled={disabled}
+        aria-label={ariaLabel}
+        onClick={disabled ? undefined : onClick}
+        onMouseEnter={showTip}
+        onMouseLeave={hideTip}
+        onFocus={showTip}
+        onBlur={hideTip}
+      >
+        {children}
+      </button>
+      {tip}
+    </>
+  );
+}
+
+type InputProps = {
+  value: string;
+  placeholder?: string;
+  onChange: (v: string) => void;
+};
+
+export function Input({ value, placeholder, onChange }: InputProps) {
+  return (
+    <input
+      className={styles.input}
+      value={value}
+      placeholder={placeholder}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+}