@retro-antlitz-kartei/react-editor 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useRef, useEffect, useState, useMemo, useCallback } from 'react';
-import { renderAvatar, normalizeConfig, DEFAULT_CONFIG, configFromSeed, PART_NAMES, BG, encodeConfig, SKIN, CLOTH, randomConfig, decodeConfig } from '@retro-antlitz-kartei/generator';
+import { renderAvatar, normalizeConfig, DEFAULT_CONFIG, configFromSeed, PARTS, partLabel, BG, encodeConfig, SKIN, HAIRS, CLOTH, PANTS, randomConfig, decodeConfig } from '@retro-antlitz-kartei/generator';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { AvatarArena, POSES, POSE_NAMES } from '@retro-antlitz-kartei/animate';
 
@@ -176,7 +176,7 @@ function theme(layout) {
       mono: MONO,
       body: BODY,
       radius: "14px",
-      titleText: "AVATAR EDITOR",
+      titleText: "@retro-antlitz-kartei AVATAR EDITOR",
       glow: false,
       paper: false
     };
@@ -231,20 +231,37 @@ var FONT_HREFS = [
   "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap"
 ];
 var PART_CONTROLS = [
-  { key: "gender", label: "BUILD" },
-  { key: "hut", label: "HAT" },
-  { key: "haare", label: "HAIR" },
-  { key: "ohren", label: "EARS" },
-  { key: "nase", label: "NOSE" },
-  { key: "acc", label: "ACCESSORY" },
-  { key: "torso", label: "TOP" },
-  { key: "hose", label: "TROUSERS" }
+  { key: "build", label: "BUILD" },
+  { key: "hat", label: "HAT" },
+  { key: "hair", label: "HAIR" },
+  { key: "ears", label: "EARS" },
+  { key: "nose", label: "NOSE" },
+  { key: "accessory", label: "ACCESSORY" },
+  { key: "top", label: "TOP" },
+  { key: "trousers", label: "TROUSERS" },
+  { key: "shoes", label: "SHOES" }
 ];
 var VIEW_OPTIONS = [
   { key: "left", name: "LEFT" },
   { key: "front", name: "FRONT" },
   { key: "right", name: "RIGHT" }
 ];
+function useNarrow(ref, breakpoint = 640) {
+  const [narrow, setNarrow] = useState(
+    () => typeof window !== "undefined" && window.innerWidth < breakpoint
+  );
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width ?? 0;
+      if (w > 0) setNarrow(w < breakpoint);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref, breakpoint]);
+  return narrow;
+}
 function useControllable(controlled, initial, onChange) {
   const [internal, setInternal] = useState(initial);
   const value = controlled !== void 0 ? controlled : internal;
@@ -270,6 +287,7 @@ function AvatarEditor(props) {
     showCombat = true,
     showCode = true,
     showSeed = true,
+    onMagic,
     loadFonts = true,
     className,
     style
@@ -286,7 +304,10 @@ function AvatarEditor(props) {
   const [codeInput, setCodeInput] = useState("");
   const [codeMsg, setCodeMsg] = useState("");
   const [seedInput, setSeedInput] = useState(seed ?? "");
+  const stageRef = useRef(null);
+  const narrow = useNarrow(stageRef);
   const t = theme(layout);
+  const stacked = narrow || t.mainDir === "column";
   useEffect(() => {
     if (!loadFonts || typeof document === "undefined") return;
     for (const href of FONT_HREFS) {
@@ -296,18 +317,13 @@ function AvatarEditor(props) {
       link.href = href;
       document.head.appendChild(link);
     }
-    if (!document.getElementById("rak-keyframes")) {
-      const s = document.createElement("style");
-      s.id = "rak-keyframes";
-      s.textContent = "@keyframes rak-coinpulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}";
-      document.head.appendChild(s);
-    }
   }, [loadFonts]);
   const patch = useCallback((p) => setConfig({ ...config, ...p }), [config, setConfig]);
   const cycle = useCallback(
     (key, dir) => {
-      const len = PART_NAMES[key].length;
-      patch({ [key]: (config[key] + dir + len) % len });
+      const ids = PARTS[key];
+      const cur = ids.indexOf(config[key]);
+      patch({ [key]: ids[(cur + dir + ids.length) % ids.length] });
     },
     [config, patch]
   );
@@ -398,24 +414,25 @@ function AvatarEditor(props) {
     border: "2px solid " + (active ? t.accent : t.paper ? "#00000033" : "#ffffff44"),
     boxShadow: active ? "0 0 0 2px " + t.accent + "66" : "none"
   });
-  const nameDisplay = PART_NAMES.torso[config.torso].toUpperCase();
+  const nameDisplay = partLabel("top", config.top).toUpperCase();
   const partRow = (key, label) => /* @__PURE__ */ jsxs("div", { style: rowStyle, children: [
     /* @__PURE__ */ jsx("button", { onClick: () => cycle(key, -1), style: arrowStyle, children: "\u25C0" }),
     /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0, textAlign: "center" }, children: [
       /* @__PURE__ */ jsx("div", { style: partLabelStyle, children: label }),
-      /* @__PURE__ */ jsx("div", { style: partValueStyle, children: PART_NAMES[key][config[key]] })
+      /* @__PURE__ */ jsx("div", { style: partValueStyle, children: partLabel(key, config[key]) })
     ] }),
     /* @__PURE__ */ jsx("button", { onClick: () => cycle(key, 1), style: arrowStyle, children: "\u25B6" })
   ] }, key);
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: stageRef,
       className,
       style: {
         minHeight: "100%",
         width: "100%",
         background: t.stageBg,
-        padding: "24px",
+        padding: narrow ? "10px" : "24px",
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
@@ -452,11 +469,11 @@ function AvatarEditor(props) {
           {
             style: {
               width: "100%",
-              maxWidth: t.mainDir === "row" ? "860px" : "540px",
+              maxWidth: narrow ? "100%" : t.mainDir === "row" ? "860px" : "540px",
               background: t.cabinet,
-              border: "4px solid " + t.cabinetBorder,
-              borderRadius: t.radius,
-              boxShadow: "0 18px 50px rgba(0,0,0,.5)" + (t.glow ? ", 0 0 30px " + t.accent + "33" : ""),
+              border: narrow ? "none" : "4px solid " + t.cabinetBorder,
+              borderRadius: narrow ? "10px" : t.radius,
+              boxShadow: narrow ? "none" : "0 18px 50px rgba(0,0,0,.5)" + (t.glow ? ", 0 0 30px " + t.accent + "33" : ""),
               overflow: "hidden"
             },
             children: [
@@ -465,29 +482,32 @@ function AvatarEditor(props) {
                 {
                   style: {
                     background: t.marqueeBg,
-                    padding: "14px",
+                    padding: narrow ? "10px" : "14px",
                     display: "flex",
-                    gap: "12px",
+                    gap: narrow ? "8px" : "12px",
                     alignItems: "center",
                     justifyContent: "center",
-                    borderBottom: "3px solid " + t.cabinetBorder
+                    flexWrap: "wrap",
+                    borderBottom: narrow ? "none" : "3px solid " + t.cabinetBorder
                   },
                   children: [
-                    /* @__PURE__ */ jsx("span", { style: { width: "10px", height: "10px", borderRadius: "50%", background: t.accent, boxShadow: "0 0 8px " + t.accent } }),
+                    /* @__PURE__ */ jsx("span", { style: { width: "10px", height: "10px", borderRadius: "50%", background: t.accent, boxShadow: "0 0 8px " + t.accent, flex: "0 0 auto" } }),
                     /* @__PURE__ */ jsx(
                       "span",
                       {
                         style: {
                           fontFamily: t.mono,
-                          fontSize: t.titleText === "WANTED" ? "20px" : "15px",
+                          fontSize: t.titleText === "WANTED" ? "20px" : narrow ? "10px" : "15px",
                           color: t.title,
-                          letterSpacing: "2px",
-                          textShadow: t.glow ? "0 0 10px " + t.accent : "2px 2px 0 #00000044"
+                          letterSpacing: narrow ? "1px" : "2px",
+                          textShadow: t.glow ? "0 0 10px " + t.accent : "2px 2px 0 #00000044",
+                          textAlign: "center",
+                          lineHeight: 1.5
                         },
                         children: t.titleText
                       }
                     ),
-                    /* @__PURE__ */ jsx("span", { style: { width: "10px", height: "10px", borderRadius: "50%", background: t.accent, boxShadow: "0 0 8px " + t.accent } })
+                    /* @__PURE__ */ jsx("span", { style: { width: "10px", height: "10px", borderRadius: "50%", background: t.accent, boxShadow: "0 0 8px " + t.accent, flex: "0 0 auto" } })
                   ]
                 }
               ),
@@ -496,21 +516,23 @@ function AvatarEditor(props) {
                 {
                   style: {
                     display: "flex",
-                    flexDirection: t.mainDir,
+                    flexDirection: stacked ? "column" : "row",
                     gap: "16px",
-                    padding: "18px",
-                    alignItems: t.mainDir === "row" ? "stretch" : "center"
+                    padding: narrow ? "10px" : "18px",
+                    alignItems: stacked ? "center" : "stretch"
                   },
                   children: [
                     /* @__PURE__ */ jsxs(
                       "div",
                       {
                         style: {
-                          flex: t.mainDir === "row" ? "0 0 300px" : "0 0 auto",
+                          flex: stacked ? "0 0 auto" : "0 0 300px",
                           display: "flex",
                           flexDirection: "column",
                           gap: "8px",
-                          alignItems: "center"
+                          alignItems: "center",
+                          width: stacked ? "100%" : void 0,
+                          maxWidth: "100%"
                         },
                         children: [
                           /* @__PURE__ */ jsxs(
@@ -527,7 +549,15 @@ function AvatarEditor(props) {
                               },
                               onClick: showCombat ? () => setModalOpen(true) : void 0,
                               children: [
-                                /* @__PURE__ */ jsx(AvatarPreview, { config, width: 320, height: 400, style: { width: "264px", height: "330px", borderRadius: "3px" } }),
+                                /* @__PURE__ */ jsx(
+                                  AvatarPreview,
+                                  {
+                                    config,
+                                    width: 320,
+                                    height: 400,
+                                    style: { width: "264px", maxWidth: "100%", height: "auto", aspectRatio: "320 / 400", borderRadius: "3px" }
+                                  }
+                                ),
                                 /* @__PURE__ */ jsx(
                                   "div",
                                   {
@@ -602,10 +632,10 @@ function AvatarEditor(props) {
                               },
                               o.key
                             )) }),
-                            partRow("mund", "MOUTH"),
+                            partRow("mouth", "MOUTH"),
                             /* @__PURE__ */ jsxs("div", { style: swatchRowStyle, children: [
                               /* @__PURE__ */ jsx("span", { style: swatchLabelStyle, children: "BACKGROUND" }),
-                              /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: BG.map((c, i) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ bg: i }), style: swatchBtn(c, config.bg === i) }, c)) })
+                              /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: BG.map((c) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ background: c }), style: swatchBtn(c, config.background === c) }, c)) })
                             ] }),
                             showCode && /* @__PURE__ */ jsxs(Fragment, { children: [
                               /* @__PURE__ */ jsx("div", { style: dividerStyle }),
@@ -664,7 +694,7 @@ function AvatarEditor(props) {
                         style: {
                           flex: 1,
                           minWidth: 0,
-                          width: t.mainDir === "column" ? "100%" : "auto",
+                          width: stacked ? "100%" : "auto",
                           display: "flex",
                           flexDirection: "column",
                           gap: "9px",
@@ -678,56 +708,66 @@ function AvatarEditor(props) {
                           /* @__PURE__ */ jsx("div", { style: dividerStyle }),
                           /* @__PURE__ */ jsxs("div", { style: swatchRowStyle, children: [
                             /* @__PURE__ */ jsx("span", { style: swatchLabelStyle, children: "SKIN" }),
-                            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: SKIN.map((c, i) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ skin: i }), style: swatchBtn(c, config.skin === i) }, c)) })
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: SKIN.map((c) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ skin: c }), style: swatchBtn(c, config.skin === c) }, c)) })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { style: swatchRowStyle, children: [
+                            /* @__PURE__ */ jsx("span", { style: swatchLabelStyle, children: "HAIR" }),
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: HAIRS.map((c) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ hairColor: c }), style: swatchBtn(c, config.hairColor === c) }, c)) })
                           ] }),
                           /* @__PURE__ */ jsxs("div", { style: swatchRowStyle, children: [
                             /* @__PURE__ */ jsx("span", { style: swatchLabelStyle, children: "CLOTHING" }),
-                            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: CLOTH.map((c, i) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ cloth: i }), style: swatchBtn(c, config.cloth === i) }, c)) })
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: CLOTH.map((c) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ topColor: c }), style: swatchBtn(c, config.topColor === c) }, c)) })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { style: swatchRowStyle, children: [
+                            /* @__PURE__ */ jsx("span", { style: swatchLabelStyle, children: "TROUSERS" }),
+                            /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "6px", flexWrap: "wrap" }, children: PANTS.map((c) => /* @__PURE__ */ jsx("button", { onClick: () => patch({ trousersColor: c }), style: swatchBtn(c, config.trousersColor === c) }, c)) })
                           ] }),
                           /* @__PURE__ */ jsx("div", { style: dividerStyle }),
-                          /* @__PURE__ */ jsx(
-                            "button",
-                            {
-                              onClick: onRandom,
-                              style: {
-                                fontFamily: t.mono,
-                                fontSize: "10px",
-                                letterSpacing: "1px",
-                                cursor: "pointer",
-                                padding: "12px",
-                                borderRadius: t.paper ? "3px" : "9px",
-                                marginTop: "2px",
-                                border: "3px solid " + t.title,
-                                background: t.accent,
-                                color: "#10131c"
-                              },
-                              children: "\u{1F3B2} RANDOM"
-                            }
-                          )
+                          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "2px" }, children: [
+                            onMagic && /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: onMagic,
+                                style: {
+                                  fontFamily: t.mono,
+                                  fontSize: "10px",
+                                  letterSpacing: "1px",
+                                  cursor: "pointer",
+                                  padding: "12px",
+                                  borderRadius: t.paper ? "3px" : "9px",
+                                  border: "3px solid " + t.title,
+                                  background: "#9b5de5",
+                                  color: "#fff",
+                                  flex: "0 0 auto"
+                                },
+                                children: "\u2728 MAGIC"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "button",
+                              {
+                                onClick: onRandom,
+                                style: {
+                                  fontFamily: t.mono,
+                                  fontSize: "10px",
+                                  letterSpacing: "1px",
+                                  cursor: "pointer",
+                                  padding: "12px",
+                                  borderRadius: t.paper ? "3px" : "9px",
+                                  border: "3px solid " + t.title,
+                                  background: t.accent,
+                                  color: "#10131c",
+                                  flex: 1
+                                },
+                                children: "\u{1F3B2} RANDOM"
+                              }
+                            )
+                          ] })
                         ]
                       }
                     )
                   ]
                 }
-              ),
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  style: {
-                    background: t.marqueeBg,
-                    padding: "10px",
-                    display: "flex",
-                    gap: "10px",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color: t.title,
-                    borderTop: "3px solid " + t.cabinetBorder
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("span", { style: { color: t.accent, fontSize: "14px", animation: "rak-coinpulse 1.2s ease-in-out infinite" }, children: "\u25CF" }),
-                    /* @__PURE__ */ jsx("span", { style: { fontFamily: t.mono, fontSize: "8px", letterSpacing: "1px" }, children: "INSERT COIN \xB7 SATIRE EDITION" })
-                  ]
-                }
               )
             ]
           }