diff --git a/frontend/src/components/Live2DStage.tsx b/frontend/src/components/Live2DStage.tsx index 7db8bea..c9e4c67 100644 --- a/frontend/src/components/Live2DStage.tsx +++ b/frontend/src/components/Live2DStage.tsx @@ -35,18 +35,21 @@ function positionKira(kira: any, appW: number, appH: number) { kira.position.set(centerMidX, centerMidY); } -function positionCat(cat: any) { - const el = document.querySelector('[data-petzone]'); - if (!el || !cat) return; - const r = el.getBoundingClientRect(); +function positionCat(cat: any, kira: any, appW: number, appH: number) { + if (!cat || !kira) return; - cat.scale.set(1); + // Place Mochi to the bottom-right of Kira + const kiraBounds = kira.getBounds(); + const catTargetPx = 150; const naturalH = cat.getLocalBounds().height; - const targetPx = 100; - const cs = naturalH > 0 ? targetPx / naturalH : 0.05; + const cs = naturalH > 0 ? catTargetPx / naturalH : 0.05; cat.scale.set(cs); cat.anchor.set(0.5, 0.5); - cat.position.set(r.left + r.width / 2, r.top + r.height / 2 + 10); + + // Bottom-right of Kira's bounding box, slightly overlapping + const offsetX = kiraBounds.width * 0.35; + const offsetY = kiraBounds.height * 0.4; + cat.position.set(kira.position.x + offsetX, kira.position.y + offsetY); } export default function Live2DStage({ onKiraReady, onReady, outfit, celebrateTrigger }: Props) { @@ -89,7 +92,7 @@ export default function Live2DStage({ onKiraReady, onReady, outfit, celebrateTri const onResize = () => { app.renderer.resize(window.innerWidth, window.innerHeight); if (kiraModel) positionKira(kiraModel, app.screen.width, app.screen.height); - if (catModel) positionCat(catModel); + if (catModel) positionCat(catModel, kiraModel, app.screen.width, app.screen.height); }; window.addEventListener('resize', onResize); @@ -118,7 +121,7 @@ export default function Live2DStage({ onKiraReady, onReady, outfit, celebrateTri if (!mounted) return; await new Promise(r => setTimeout(r, 100)); - positionCat(catModel); + positionCat(catModel, kiraModel, app.screen.width, app.screen.height); (catModel as any).isInteractive = () => false; app.stage.addChild(catModel as any); catModelRef.current = catModel; @@ -438,7 +441,7 @@ export default function Live2DStage({ onKiraReady, onReady, outfit, celebrateTri // Resume idle animations if (celebratingRef) celebratingRef.current = false; // Reset scale - positionCat(cat); + positionCat(cat, kiraModelRef.current, window.innerWidth, window.innerHeight); } };