Initial MVP: local visual novel library with Ren'Py → PGVN converter

- FastAPI backend: admin bootstrap with forced credential change, admin-created
  users with one-time generated passwords, roles as permission sets
- Games and versions with content-addressed blob storage; forks copy only the
  manifest, so mods share assets with the original
- Worker: archive/RPA extraction, unrpyc for .rpyc, own .rpy parser, Python
  subset translated via ast, media converted to WebP/Opus/WebM
- React panel (library search, game page, upload, users, roles) and a
  framework-free web player with saves, history, skip/auto, transitions
- docker compose: postgres, backend, worker, nginx on a single HTTP port

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/player/renderer.ts

@@ -0,0 +1,287 @@
+// DOM renderer for the image layer: one absolutely positioned element per shown tag.
+// The stage has the game's native resolution and is scaled with a CSS transform.
+
+import type { AtSpec, ImageDef, ShownImage, Transition } from "./types";
+
+const POSITIONS: Record<string, Record<string, number>> = {
+  left: { xpos: 0, xanchor: 0, ypos: 1, yanchor: 1 },
+  right: { xpos: 1, xanchor: 1, ypos: 1, yanchor: 1 },
+  center: { xpos: 0.5, xanchor: 0.5, ypos: 1, yanchor: 1 },
+  default: { xpos: 0.5, xanchor: 0.5, ypos: 1, yanchor: 1 },
+  reset: { xpos: 0.5, xanchor: 0.5, ypos: 1, yanchor: 1 },
+  truecenter: { xpos: 0.5, xanchor: 0.5, ypos: 0.5, yanchor: 0.5 },
+  topleft: { xpos: 0, xanchor: 0, ypos: 0, yanchor: 0 },
+  topright: { xpos: 1, xanchor: 1, ypos: 0, yanchor: 0 },
+  top: { xpos: 0.5, xanchor: 0.5, ypos: 0, yanchor: 0 },
+  offscreenleft: { xpos: 0, xanchor: 1, ypos: 1, yanchor: 1 },
+  offscreenright: { xpos: 1, xanchor: 0, ypos: 1, yanchor: 1 },
+};
+
+export interface ResolvedImage {
+  def: ImageDef;
+  name: string[];
+}
+
+export interface RendererHost {
+  url(file: string): string | null;
+  resolveRef(name: string): ImageDef | null;
+  evalCond(e: any): boolean;
+  transform(name: string): Record<string, any> | null;
+}
+
+interface Entry extends ShownImage {
+  el: HTMLElement;
+}
+
+export class Renderer {
+  readonly stage: HTMLDivElement;
+  readonly master: HTMLDivElement;
+  private overlay: HTMLDivElement;
+  private shown = new Map<string, Entry>();
+  private committed: HTMLElement | null = null;
+  fast = false;
+
+  constructor(parent: HTMLElement, public width: number, public height: number,
+              private host: RendererHost) {
+    this.stage = document.createElement("div");
+    this.stage.className = "pg-stage";
+    this.stage.style.width = `${width}px`;
+    this.stage.style.height = `${height}px`;
+    this.master = document.createElement("div");
+    this.master.className = "pg-layer";
+    this.overlay = document.createElement("div");
+    this.overlay.className = "pg-layer pg-transition";
+    this.stage.append(this.master, this.overlay);
+    parent.append(this.stage);
+  }
+
+  fit(container: HTMLElement) {
+    const s = Math.min(container.clientWidth / this.width, container.clientHeight / this.height);
+    this.stage.style.transform = `translate(-50%, -50%) scale(${s})`;
+  }
+
+  // --- scene state ---------------------------------------------------------
+
+  scene() {
+    for (const e of this.shown.values()) e.el.remove();
+    this.shown.clear();
+  }
+
+  show(img: ResolvedImage, tag: string, at: AtSpec[], opts: { zorder?: number; behind?: string[] } = {}) {
+    const prev = this.shown.get(tag);
+    const atSpecs = at.length ? at : prev?.at ?? [];
+    const el = this.build(img.def);
+    el.classList.add("pg-image");
+    this.place(el, img.def, atSpecs);
+    const entry: Entry = { tag, name: img.name, at: atSpecs, zorder: opts.zorder ?? prev?.zorder ?? 0, el };
+    if (prev) {
+      prev.el.replaceWith(el);
+    } else {
+      const behind = opts.behind?.map((t) => this.shown.get(t)?.el).find(Boolean);
+      const later = [...this.shown.values()].find((e) => e.zorder > entry.zorder)?.el;
+      this.master.insertBefore(el, behind ?? later ?? null);
+    }
+    this.shown.set(tag, entry);
+  }
+
+  hide(tag: string) {
+    const e = this.shown.get(tag);
+    if (!e) return;
+    e.el.remove();
+    this.shown.delete(tag);
+  }
+
+  isShown(tag: string) {
+    return this.shown.has(tag);
+  }
+
+  attrsOf(tag: string): string[] | null {
+    return this.shown.get(tag)?.name ?? null;
+  }
+
+  snapshot(): ShownImage[] {
+    return [...this.shown.values()].map(({ tag, name, at, zorder }) => ({ tag, name, at, zorder }));
+  }
+
+  // --- displayables ------------------------------------------------------------
+
+  private build(def: ImageDef, depth = 0): HTMLElement {
+    if (depth > 8) return document.createElement("div");
+    if (def.ref) {
+      const ref = this.host.resolveRef(def.ref);
+      if (ref) return this.build({ ...ref, props: { ...ref.props, ...def.props } }, depth + 1);
+    }
+    if (def.switch) {
+      const hit = def.switch.find(([c]) => this.host.evalCond(c));
+      if (hit) return this.build(hit[1], depth + 1);
+    }
+    if (def.color) {
+      const d = document.createElement("div");
+      d.style.background = def.color;
+      d.style.width = `${this.width}px`;
+      d.style.height = `${this.height}px`;
+      return d;
+    }
+    if (def.composite) {
+      const d = document.createElement("div");
+      d.style.position = "relative";
+      if (def.size) {
+        d.style.width = `${def.size[0]}px`;
+        d.style.height = `${def.size[1]}px`;
+      }
+      for (const layer of def.composite) {
+        const child = this.build(layer.img, depth + 1);
+        child.style.position = "absolute";
+        child.style.left = `${layer.pos[0]}px`;
+        child.style.top = `${layer.pos[1]}px`;
+        d.append(child);
+      }
+      return d;
+    }
+    if (def.movie) {
+      const v = document.createElement("video");
+      const src = this.host.url(def.movie);
+      if (src) v.src = src;
+      v.autoplay = true;
+      v.loop = true;
+      v.muted = true;
+      v.playsInline = true;
+      return v;
+    }
+    if (def.text !== undefined) {
+      const d = document.createElement("div");
+      d.className = "pg-show-text";
+      d.textContent = def.text;
+      return d;
+    }
+    if (def.file) {
+      const img = document.createElement("img");
+      img.draggable = false;
+      img.decoding = "async";
+      const src = this.host.url(def.file);
+      if (src) img.src = src;
+      else console.warn("[pgvn] нет файла", def.file);
+      if (def.props?.size) {
+        img.style.width = `${def.props.size[0]}px`;
+        img.style.height = `${def.props.size[1]}px`;
+      }
+      return img;
+    }
+    return document.createElement("div");
+  }
+
+  private place(el: HTMLElement, def: ImageDef, at: AtSpec[]) {
+    const p: Record<string, any> = { ...POSITIONS.default, ...(def.props ?? {}) };
+    for (const spec of at) {
+      if (spec.pos) Object.assign(p, POSITIONS[spec.pos] ?? {});
+      if (spec.name && !spec.props) Object.assign(p, this.host.transform(spec.name) ?? POSITIONS[spec.name] ?? {});
+      if (spec.props) Object.assign(p, spec.props);
+    }
+    normalize(p);
+    const pos = (v: number, total: number) => (Number.isInteger(v) && Math.abs(v) > 1 ? `${v}px` : `${v * total}px`);
+    const anchor = (v: number) => (Number.isInteger(v) && Math.abs(v) > 1 ? `${v}px` : `${v * 100}%`);
+    el.style.left = `calc(${pos(p.xpos, this.width)} + ${p.xoffset ?? 0}px)`;
+    el.style.top = `calc(${pos(p.ypos, this.height)} + ${p.yoffset ?? 0}px)`;
+    const ax = anchor(p.xanchor);
+    const ay = anchor(p.yanchor);
+    el.style.transformOrigin = `${ax} ${ay}`;
+    const zx = (p.zoom ?? 1) * (p.xzoom ?? 1);
+    const zy = (p.zoom ?? 1) * (p.yzoom ?? 1);
+    el.style.transform = `translate(-${ax}, -${ay}) scale(${zx}, ${zy})` + (p.rotate ? ` rotate(${p.rotate}deg)` : "");
+    // translate(-%) must use the element box, so negative percentages of px anchors are written as is
+    if (ax.endsWith("px") || ay.endsWith("px"))
+      el.style.transform = `translate(calc(-1 * ${ax}), calc(-1 * ${ay})) scale(${zx}, ${zy})`;
+    if (p.alpha !== undefined) el.style.opacity = String(p.alpha);
+    if (p.filter) el.style.filter = `${p.filter}(1)`;
+  }
+
+  // --- transitions ---------------------------------------------------------------
+
+  /** Remember the current picture as the starting point of the next transition. */
+  commit() {
+    this.committed = this.master.cloneNode(true) as HTMLElement;
+  }
+
+  async transition(t: Transition | null | undefined): Promise<void> {
+    const before = this.committed;
+    this.commit();
+    if (!t || !before || this.fast) return;
+    if (t.t === "punch") return this.punch(t);
+    const old = before;
+    old.classList.add("pg-old");
+    this.overlay.append(old);
+    try {
+      if (t.t === "fade") {
+        const color = document.createElement("div");
+        color.className = "pg-fill";
+        color.style.background = t.color ?? "#000";
+        color.style.opacity = "0";
+        this.overlay.append(color);
+        await animate(color, [{ opacity: 0 }, { opacity: 1 }], t.out ?? 0.5);
+        old.remove();
+        if (t.hold) await sleep(t.hold);
+        await animate(color, [{ opacity: 1 }, { opacity: 0 }], t.in ?? 0.5);
+        color.remove();
+      } else if (t.t === "wipe") {
+        const dir = t.dir ?? "right";
+        const end = { left: "inset(0 100% 0 0)", right: "inset(0 0 0 100%)", up: "inset(0 0 100% 0)",
+                      down: "inset(100% 0 0 0)" }[dir] ?? "inset(0 0 0 100%)";
+        await animate(old, [{ clipPath: "inset(0 0 0 0)" }, { clipPath: end }], t.d ?? 1);
+      } else if (t.t === "slide") {
+        const dir = t.dir ?? "left";
+        const shift = { left: "-100%, 0", right: "100%, 0", top: "0, -100%", bottom: "0, 100%" }[dir];
+        await animate(old, [{ transform: "translate(0, 0)", opacity: 1 },
+                            { transform: `translate(${shift})`, opacity: 0 }], t.d ?? 0.5);
+      } else {
+        await animate(old, [{ opacity: 1 }, { opacity: 0 }], t.d ?? 0.5);
+      }
+    } finally {
+      old.remove();
+    }
+  }
+
+  private async punch(t: Transition) {
+    const axis = t.dir === "h" ? "X" : "Y";
+    await animate(this.master, [0, 12, -10, 8, -6, 3, 0].map((v) => ({ transform: `translate${axis}(${v}px)` })),
+                  t.d ?? 0.3);
+  }
+
+  preload(def: ImageDef | null) {
+    if (def?.file) {
+      const src = this.host.url(def.file);
+      if (src) new Image().src = src;
+    }
+  }
+}
+
+function normalize(p: Record<string, any>) {
+  if (p.align) [p.xalign, p.yalign] = p.align;
+  if (p.pos) [p.xpos, p.ypos] = p.pos;
+  if (p.anchor) [p.xanchor, p.yanchor] = p.anchor;
+  if (p.xalign !== undefined) p.xpos = p.xanchor = p.xalign;
+  if (p.yalign !== undefined) p.ypos = p.yanchor = p.yalign;
+  if (p.xcenter !== undefined) [p.xpos, p.xanchor] = [p.xcenter, 0.5];
+  if (p.ycenter !== undefined) [p.ypos, p.yanchor] = [p.ycenter, 0.5];
+  p.xanchor = asFloat(p.xanchor);
+  p.yanchor = asFloat(p.yanchor);
+  p.xpos = asFloat(p.xpos);
+  p.ypos = asFloat(p.ypos);
+}
+
+// Ren'Py: float means fraction, int means pixels — but 0 and 1 as ints are common in
+// ATL ("xalign 1") and still mean fractions there; renderer treats |v|<=1 as fraction.
+function asFloat(v: any): number {
+  return typeof v === "number" ? v : 0;
+}
+
+export function sleep(seconds: number) {
+  return new Promise<void>((r) => setTimeout(r, seconds * 1000));
+}
+
+function animate(el: HTMLElement, frames: Keyframe[], seconds: number): Promise<void> {
+  return new Promise((resolve) => {
+    const a = el.animate(frames, { duration: seconds * 1000, fill: "forwards", easing: "ease-in-out" });
+    a.onfinish = () => resolve();
+    a.oncancel = () => resolve();
+  });
+}