@quybt93/pcgf 0.0.1

package/plugins/phaser-casual-game-factory/templates/ui/settings-popup-dom.ts

@@ -0,0 +1,349 @@
+import {
+  getAudioSettings,
+  setMusicVolume,
+  setSfxVolume,
+  subscribeAudioSettings,
+  unlockAudioSettings,
+} from './audio-settings';
+
+export type DomSettingsOpenOptions = {
+  /** Show the in-panel Home CTA (GameScene). */
+  showHome?: boolean;
+};
+
+export type DomSettingsPopupOptions = {
+  /** Shared close SFX for × and backdrop (when not handled by DOM juice). */
+  onCloseSound?: () => void;
+  /** Shared click SFX for settings sliders. */
+  onClickSound?: () => void;
+  /** Game → Home from the settings panel. */
+  onHome?: () => void;
+};
+
+export type DomSettingsPopupHandle = {
+  open: (opts?: DomSettingsOpenOptions) => void;
+  close: () => void;
+  destroy: () => void;
+};
+
+/** Matches Phaser `Back.out` (open / volume up). */
+function easeOutBack(t: number): number {
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  return 1 + c3 * (t - 1) ** 3 + c1 * (t - 1) ** 2;
+}
+
+/** Matches Phaser `Expo.out` (close / volume down). */
+function easeOutExpo(t: number): number {
+  return t >= 1 ? 1 : 1 - 2 ** (-10 * t);
+}
+
+function animateValue(
+  from: number,
+  to: number,
+  durationMs: number,
+  ease: (t: number) => number,
+  onFrame: (v: number) => void,
+  onDone?: () => void,
+): () => void {
+  let raf = 0;
+  const start = performance.now();
+  const tick = (now: number) => {
+    const t = Math.min(1, (now - start) / durationMs);
+    onFrame(from + (to - from) * ease(t));
+    if (t < 1) raf = requestAnimationFrame(tick);
+    else onDone?.();
+  };
+  raf = requestAnimationFrame(tick);
+  return () => cancelAnimationFrame(raf);
+}
+
+const SLIDER_DRAG_PX = 6;
+
+type SliderBinding = {
+  input: HTMLInputElement;
+  valueEl: HTMLElement | null;
+  fillEl: HTMLElement | null;
+  which: 'sfx' | 'music';
+  setVolume: (v: number) => void;
+};
+
+let sharedHandle: DomSettingsPopupHandle | null = null;
+
+/** Same Home settings modal — open from GameScene gear too. */
+export function getDomSettingsPopup(): DomSettingsPopupHandle | null {
+  return sharedHandle;
+}
+
+/**
+ * Wire the shared HTML settings modal (Home + Game).
+ * Panel open = easeOutBack; close = easeOutExpo.
+ * Sliders: drag = instant; click seek = tween; pointer-down = click SFX.
+ */
+export function bindDomSettingsPopup(
+  root: ParentNode = document,
+  options: DomSettingsPopupOptions = {},
+): DomSettingsPopupHandle {
+  const modal = root.querySelector<HTMLElement>('#settings-modal');
+  const panel = modal?.querySelector<HTMLElement>('.settings-modal') ?? null;
+  const openBtn = root.querySelector<HTMLButtonElement>('#btn-settings');
+  const closeBtn = root.querySelector<HTMLButtonElement>('#settings-close');
+  const homeBtn = root.querySelector<HTMLButtonElement>('#settings-home');
+  const sfx = root.querySelector<HTMLInputElement>('#settings-sfx');
+  const music = root.querySelector<HTMLInputElement>('#settings-music');
+  const sfxValue = root.querySelector<HTMLElement>('#settings-sfx-value');
+  const musicValue = root.querySelector<HTMLElement>('#settings-music-value');
+  const sfxFill = root.querySelector<HTMLElement>('#settings-sfx-fill');
+  const musicFill = root.querySelector<HTMLElement>('#settings-music-fill');
+
+  const noop: DomSettingsPopupHandle = {
+    open: () => undefined,
+    close: () => undefined,
+    destroy: () => undefined,
+  };
+
+  if (!modal || !sfx || !music) {
+    sharedHandle = noop;
+    return noop;
+  }
+
+  let openState = false;
+  let cancelPanel: (() => void) | undefined;
+  let cancelSfxFill: (() => void) | undefined;
+  let cancelMusicFill: (() => void) | undefined;
+  let sfxFillProgress = Number(sfx.value) / 100;
+  let musicFillProgress = Number(music.value) / 100;
+  let writingLocal = false;
+
+  const setFillWidth = (el: HTMLElement | null, progress01: number) => {
+    if (el) el.style.width = `${Math.max(0, Math.min(1, progress01)) * 100}%`;
+  };
+
+  const getFillProgress = (which: 'sfx' | 'music') => (which === 'sfx' ? sfxFillProgress : musicFillProgress);
+
+  const tweenFill = (which: 'sfx' | 'music', to: number, animate: boolean) => {
+    const el = which === 'sfx' ? sfxFill : musicFill;
+    const from = getFillProgress(which);
+    const stopPrev = which === 'sfx' ? cancelSfxFill : cancelMusicFill;
+    stopPrev?.();
+    if (!animate || Math.abs(to - from) < 0.001) {
+      if (which === 'sfx') sfxFillProgress = to;
+      else musicFillProgress = to;
+      setFillWidth(el, to);
+      return;
+    }
+    const ease = to >= from ? easeOutBack : easeOutExpo;
+    const cancel = animateValue(from, to, 260, ease, (v) => {
+      if (which === 'sfx') sfxFillProgress = v;
+      else musicFillProgress = v;
+      setFillWidth(el, v);
+    });
+    if (which === 'sfx') cancelSfxFill = cancel;
+    else cancelMusicFill = cancel;
+  };
+
+  const paint = (animateFills = false) => {
+    const next = getAudioSettings();
+    sfx.value = String(Math.round(next.sfx * 100));
+    music.value = String(Math.round(next.music * 100));
+    if (sfxValue) sfxValue.textContent = `${Math.round(next.sfx * 100)}%`;
+    if (musicValue) musicValue.textContent = `${Math.round(next.music * 100)}%`;
+    tweenFill('sfx', next.sfx, animateFills);
+    tweenFill('music', next.music, animateFills);
+  };
+
+  const applyVolume = (binding: SliderBinding, v: number) => {
+    writingLocal = true;
+    binding.setVolume(v);
+    writingLocal = false;
+    if (binding.valueEl) binding.valueEl.textContent = `${Math.round(v * 100)}%`;
+  };
+
+  const wireSlider = (binding: SliderBinding) => {
+    let startX = 0;
+    let startProgress = 0;
+    let dragging = false;
+    let active = false;
+
+    const onPointerDown = (event: PointerEvent) => {
+      active = true;
+      dragging = false;
+      startX = event.clientX;
+      startProgress = getFillProgress(binding.which);
+      options.onClickSound?.();
+      // Keep drag alive when pointer leaves the thin range thumb/track.
+      try {
+        binding.input.setPointerCapture(event.pointerId);
+      } catch {
+        /* ignore */
+      }
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+      if (!active) return;
+      if (!dragging && Math.abs(event.clientX - startX) >= SLIDER_DRAG_PX) {
+        dragging = true;
+        const v = Number(binding.input.value) / 100;
+        applyVolume(binding, v);
+        tweenFill(binding.which, v, false);
+      }
+    };
+
+    const onInput = () => {
+      if (!active) {
+        const v = Number(binding.input.value) / 100;
+        applyVolume(binding, v);
+        tweenFill(binding.which, v, false);
+        return;
+      }
+      const v = Number(binding.input.value) / 100;
+      applyVolume(binding, v);
+      if (dragging) {
+        tweenFill(binding.which, v, false);
+      } else {
+        setFillWidth(binding.fillEl, startProgress);
+        if (binding.which === 'sfx') sfxFillProgress = startProgress;
+        else musicFillProgress = startProgress;
+      }
+    };
+
+    const onPointerUp = (event: PointerEvent) => {
+      if (!active) return;
+      try {
+        if (binding.input.hasPointerCapture?.(event.pointerId)) {
+          binding.input.releasePointerCapture(event.pointerId);
+        }
+      } catch {
+        /* ignore */
+      }
+      const v = Number(binding.input.value) / 100;
+      if (!dragging) {
+        applyVolume(binding, v);
+        if (binding.which === 'sfx') sfxFillProgress = startProgress;
+        else musicFillProgress = startProgress;
+        setFillWidth(binding.fillEl, startProgress);
+        tweenFill(binding.which, v, true);
+      } else {
+        tweenFill(binding.which, v, false);
+      }
+      active = false;
+      dragging = false;
+    };
+
+    binding.input.addEventListener('pointerdown', onPointerDown);
+    binding.input.addEventListener('pointermove', onPointerMove);
+    binding.input.addEventListener('pointerup', onPointerUp);
+    binding.input.addEventListener('pointercancel', onPointerUp);
+    binding.input.addEventListener('lostpointercapture', onPointerUp);
+    binding.input.addEventListener('input', onInput);
+
+    return () => {
+      binding.input.removeEventListener('pointerdown', onPointerDown);
+      binding.input.removeEventListener('pointermove', onPointerMove);
+      binding.input.removeEventListener('pointerup', onPointerUp);
+      binding.input.removeEventListener('pointercancel', onPointerUp);
+      binding.input.removeEventListener('lostpointercapture', onPointerUp);
+      binding.input.removeEventListener('input', onInput);
+    };
+  };
+
+  const setHomeVisible = (visible: boolean) => {
+    if (!homeBtn) return;
+    homeBtn.hidden = !visible;
+    modal.classList.toggle('has-home-action', visible);
+  };
+
+  const open = (opts: DomSettingsOpenOptions = {}) => {
+    if (openState) {
+      setHomeVisible(Boolean(opts.showHome));
+      return;
+    }
+    unlockAudioSettings();
+    paint(false);
+    setHomeVisible(Boolean(opts.showHome));
+    openState = true;
+    cancelPanel?.();
+    modal.hidden = false;
+    modal.classList.add('is-open');
+    if (!panel) return;
+    panel.style.transform = 'scale(0)';
+    cancelPanel = animateValue(0, 1, 250, easeOutBack, (v) => {
+      panel.style.transform = `scale(${v})`;
+    });
+  };
+
+  const close = (playSound = true) => {
+    if (!openState) return;
+    openState = false;
+    if (playSound) options.onCloseSound?.();
+    cancelPanel?.();
+    const finish = () => {
+      modal.classList.remove('is-open');
+      modal.hidden = true;
+      setHomeVisible(false);
+      if (panel) panel.style.transform = '';
+    };
+    if (!panel) {
+      finish();
+      return;
+    }
+    cancelPanel = animateValue(1, 0, 180, easeOutExpo, (v) => {
+      panel.style.transform = `scale(${v})`;
+    }, finish);
+  };
+
+  const onOpenClick = () => open({ showHome: false });
+  const onHomeClick = () => {
+    close(false);
+    options.onHome?.();
+  };
+
+  openBtn?.addEventListener('click', onOpenClick);
+  const onCloseClick = () => close(false);
+  const onBackdropClick = (event: MouseEvent) => {
+    if (event.target === modal) close(false);
+  };
+  closeBtn?.addEventListener('click', onCloseClick);
+  homeBtn?.addEventListener('click', onHomeClick);
+  modal.addEventListener('click', onBackdropClick);
+
+  const unbindSfx = wireSlider({
+    input: sfx,
+    valueEl: sfxValue,
+    fillEl: sfxFill,
+    which: 'sfx',
+    setVolume: setSfxVolume,
+  });
+  const unbindMusic = wireSlider({
+    input: music,
+    valueEl: musicValue,
+    fillEl: musicFill,
+    which: 'music',
+    setVolume: setMusicVolume,
+  });
+
+  const unsub = subscribeAudioSettings(() => paint(!writingLocal));
+  paint(false);
+  setHomeVisible(false);
+
+  const handle: DomSettingsPopupHandle = {
+    open,
+    close: () => close(true),
+    destroy: () => {
+      unsub();
+      unbindSfx();
+      unbindMusic();
+      cancelPanel?.();
+      cancelSfxFill?.();
+      cancelMusicFill?.();
+      openBtn?.removeEventListener('click', onOpenClick);
+      closeBtn?.removeEventListener('click', onCloseClick);
+      homeBtn?.removeEventListener('click', onHomeClick);
+      modal.removeEventListener('click', onBackdropClick);
+      if (sharedHandle === handle) sharedHandle = null;
+    },
+  };
+
+  sharedHandle = handle;
+  return handle;
+}

package/plugins/phaser-casual-game-factory/templates/ui/settings-popup-phaser.ts

@@ -0,0 +1,284 @@
+import * as Phaser from 'phaser';
+import { bindButtonMotion, createSlider, tweenPopup } from '../motion';
+import {
+  getAudioSettings,
+  setMusicVolume,
+  setSfxVolume,
+  unlockAudioSettings,
+} from './audio-settings';
+
+export type SettingsPopupHandle = {
+  open: () => void;
+  close: () => void;
+  destroy: () => void;
+  readonly isOpen: boolean;
+};
+
+export type SettingsPopupOptions = {
+  depth?: number;
+  /** Shared UI close SFX — × and backdrop dismiss. */
+  onCloseSound?: () => void;
+  /** Shared UI click SFX — action buttons inside the panel. */
+  onClickSound?: () => void;
+  /** Shown as a Home CTA inside the panel (GameScene). */
+  onHome?: () => void;
+};
+
+/**
+ * Settings popup aligned with Home HTML: cream panel, × close (hot), SFX/Music
+ * sliders (click tween / drag instant), optional Home button via `bindButtonMotion`.
+ */
+export function createSettingsPopup(
+  scene: Phaser.Scene,
+  options: SettingsPopupOptions = {},
+): SettingsPopupHandle {
+  const depth = options.depth ?? 4000;
+  const { width, height } = scene.scale.gameSize;
+  const cx = width / 2;
+  const cy = height / 2;
+  const panelW = Math.min(340, width - 40);
+  const hasHome = typeof options.onHome === 'function';
+  const panelH = hasHome ? 360 : 300;
+  const sliderWidth = panelW - 56;
+
+  const root = scene.add.container(0, 0).setDepth(depth);
+  const blocker = scene.add
+    .rectangle(cx, cy, width, height, 0x2b2140, 0.55)
+    .setInteractive()
+    .setVisible(false);
+
+  const panelHost = scene.add.container(cx, cy).setVisible(false).setScale(0);
+
+  const panel = scene.add.graphics();
+  panel.fillStyle(0x2b2140, 0.28);
+  panel.fillRoundedRect(-panelW / 2 + 4, -panelH / 2 + 8, panelW, panelH, 22);
+  panel.fillStyle(0xfff6ea, 0.98);
+  panel.fillRoundedRect(-panelW / 2, -panelH / 2, panelW, panelH, 22);
+
+  // Full-panel input sink: chrome/labels are not interactive, so without this
+  // pointer events fall through to the dim and dismiss the popup.
+  const panelSink = scene.add
+    .rectangle(0, 0, panelW, panelH, 0xffffff, 0)
+    .setInteractive();
+
+  blocker.on('pointerup', (pointer: Phaser.Input.Pointer) => {
+    const bounds = panelSink.getBounds();
+    if (bounds.contains(pointer.worldX, pointer.worldY)) return;
+    close(true);
+  });
+
+  const eyebrow = scene.add
+    .text(0, -panelH / 2 + 40, 'A U D I O', {
+      fontFamily: 'Be Vietnam Pro, Arial',
+      fontSize: '11px',
+      color: '#5c4d6e',
+      fontStyle: 'bold',
+    })
+    .setOrigin(0.5);
+
+  const title = scene.add
+    .text(0, -panelH / 2 + 66, 'Settings', {
+      fontFamily: 'Be Vietnam Pro, Arial',
+      fontSize: '24px',
+      color: '#2b2140',
+      fontStyle: 'bold',
+    })
+    .setOrigin(0.5);
+
+  const subtitle = scene.add
+    .text(0, -panelH / 2 + 94, 'Chỉnh âm lượng dùng chung giữa Home và Game.', {
+      fontFamily: 'Be Vietnam Pro, Arial',
+      fontSize: '12px',
+      color: '#5c4d6e',
+      align: 'center',
+      wordWrap: { width: panelW - 48 },
+    })
+    .setOrigin(0.5, 0);
+
+  const sfxY = -panelH / 2 + 148;
+  const musicY = sfxY + 72;
+
+  const sfxLabel = scene.add
+    .text(-panelW / 2 + 28, sfxY, 'Sound (SFX)', {
+      fontFamily: 'Be Vietnam Pro, Arial',
+      fontSize: '14px',
+      color: '#5c4d6e',
+      fontStyle: 'bold',
+    })
+    .setOrigin(0, 0.5);
+  const sfxValue = scene.add
+    .text(panelW / 2 - 28, sfxY, '80%', {
+      fontFamily: 'Be Vietnam Pro, Arial',
+      fontSize: '14px',
+      color: '#2b2140',
+      fontStyle: 'bold',
+    })
+    .setOrigin(1, 0.5);
+
+  const musicLabel = scene.add
+    .text(-panelW / 2 + 28, musicY, 'Music', {
+      fontFamily: 'Be Vietnam Pro, Arial',
+      fontSize: '14px',
+      color: '#5c4d6e',
+      fontStyle: 'bold',
+    })
+    .setOrigin(0, 0.5);
+  const musicValue = scene.add
+    .text(panelW / 2 - 28, musicY, '50%', {
+      fontFamily: 'Be Vietnam Pro, Arial',
+      fontSize: '14px',
+      color: '#2b2140',
+      fontStyle: 'bold',
+    })
+    .setOrigin(1, 0.5);
+
+  const paintValues = (sfx: number, music: number) => {
+    sfxValue.setText(`${Math.round(sfx * 100)}%`);
+    musicValue.setText(`${Math.round(music * 100)}%`);
+  };
+
+  const saved = getAudioSettings();
+  paintValues(saved.sfx, saved.music);
+
+  const sfxSlider = createSlider(scene, -sliderWidth / 2, sfxY + 28, sliderWidth, {
+    interactive: true,
+    initialProgress: saved.sfx,
+    onClickSound: () => options.onClickSound?.(),
+    onChanged: (v) => {
+      setSfxVolume(v);
+      sfxValue.setText(`${Math.round(v * 100)}%`);
+    },
+  });
+  const musicSlider = createSlider(scene, -sliderWidth / 2, musicY + 28, sliderWidth, {
+    interactive: true,
+    initialProgress: saved.music,
+    onClickSound: () => options.onClickSound?.(),
+    onChanged: (v) => {
+      setMusicVolume(v);
+      musicValue.setText(`${Math.round(v * 100)}%`);
+    },
+  });
+
+  const motionHandles: Array<{ destroy(): void }> = [];
+
+  // Home-style × close: hot tile + `bindButtonMotion` (close SFX on accept).
+  const closeSize = 44;
+  const closeX = panelW / 2 - 28;
+  const closeY = -panelH / 2 + 28;
+  const closeBg = scene.add.graphics();
+  closeBg.fillStyle(0xb8304b, 1);
+  closeBg.fillRoundedRect(-closeSize / 2 + 2, -closeSize / 2 + 4, closeSize, closeSize, 14);
+  closeBg.fillStyle(0xff4d6d, 1);
+  closeBg.fillRoundedRect(-closeSize / 2, -closeSize / 2, closeSize, closeSize, 14);
+  const closeText = scene.add
+    .text(0, -1, '×', {
+      fontFamily: 'Be Vietnam Pro, Arial',
+      fontSize: '28px',
+      color: '#ffffff',
+      fontStyle: 'bold',
+    })
+    .setOrigin(0.5);
+  const closeHit = scene.add.rectangle(0, 0, closeSize, closeSize, 0xffffff, 0);
+  const closeHost = scene.add.container(closeX, closeY, [closeBg, closeText, closeHit]);
+  closeHost.setAngle(8);
+  motionHandles.push(
+    bindButtonMotion(scene, closeHit, closeHit, {
+      scaleTarget: closeHost,
+      hoverScale: 1.08,
+      pressScale: 0.9,
+      onClickSound: () => options.onCloseSound?.(),
+      onAccepted: () => close(false),
+    }),
+  );
+
+  const children: Phaser.GameObjects.GameObject[] = [
+    panel,
+    panelSink,
+    eyebrow,
+    title,
+    subtitle,
+    sfxLabel,
+    sfxValue,
+    musicLabel,
+    musicValue,
+    sfxSlider.track,
+    sfxSlider.fill,
+    musicSlider.track,
+    musicSlider.fill,
+    closeHost,
+  ];
+
+  if (hasHome) {
+    const homeY = panelH / 2 - 44;
+    const homeW = Math.min(220, panelW - 48);
+    const homeBg = scene.add.graphics();
+    homeBg.fillStyle(0x0284c7, 1);
+    homeBg.fillRoundedRect(-homeW / 2, -22, homeW, 48, 16);
+    homeBg.fillStyle(0x38bdf8, 1);
+    homeBg.fillRoundedRect(-homeW / 2, -26, homeW, 48, 16);
+    const homeText = scene.add
+      .text(0, -2, 'Home', {
+        fontFamily: 'Be Vietnam Pro, Arial',
+        fontSize: '16px',
+        color: '#ffffff',
+        fontStyle: 'bold',
+      })
+      .setOrigin(0.5);
+    const homeHit = scene.add.rectangle(0, -2, homeW, 48, 0xffffff, 0);
+    const homeHost = scene.add.container(0, homeY, [homeBg, homeText, homeHit]);
+    motionHandles.push(
+      bindButtonMotion(scene, homeHit, homeHit, {
+        scaleTarget: homeHost,
+        onClickSound: () => options.onClickSound?.(),
+        onAccepted: () => {
+          close(false);
+          options.onHome?.();
+        },
+      }),
+    );
+    children.push(homeHost);
+  }
+
+  panelHost.add(children);
+  root.add([blocker, panelHost]);
+
+  let openState = false;
+
+  function open(): void {
+    if (openState) return;
+    unlockAudioSettings();
+    const next = getAudioSettings();
+    sfxSlider.setProgress(next.sfx, false);
+    musicSlider.setProgress(next.music, false);
+    paintValues(next.sfx, next.music);
+    openState = true;
+    blocker.setVisible(true);
+    tweenPopup(scene, panelHost, true);
+  }
+
+  function close(playCloseSound: boolean): void {
+    if (!openState) return;
+    openState = false;
+    if (playCloseSound) options.onCloseSound?.();
+    tweenPopup(scene, panelHost, false, () => {
+      blocker.setVisible(false);
+    });
+  }
+
+  function destroy(): void {
+    for (const handle of motionHandles) handle.destroy();
+    sfxSlider.destroy();
+    musicSlider.destroy();
+    scene.tweens.killTweensOf(panelHost);
+    root.destroy(true);
+  }
+
+  return {
+    open,
+    close: () => close(true),
+    destroy,
+    get isOpen() {
+      return openState;
+    },
+  };
+}