hobokenchicken/kira
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pet): move Mochi next to Kira, size +50%

Browse Source 
Positioned bottom-right of Kira's bounding box instead of sidebar overlay.
Target size increased from 100px to 150px.
This commit is contained in:
Dustin Newkirk
2026-06-06 00:46:41 -04:00
parent 2ffd5b2fa5
commit 5d7d1a3327
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Live2DStage.tsx
+14 -11
View File
@@ -35,18 +35,21 @@ function positionKira(kira: any, appW: number, appH: number) {
kira.position.set(centerMidX, centerMidY); kira.position.set(centerMidX, centerMidY);
} }
function positionCat(cat: any) { function positionCat(cat: any, kira: any, appW: number, appH: number) {
const el = document.querySelector('[data-petzone]'); if (!cat || !kira) return;
if (!el || !cat) return;
const r = el.getBoundingClientRect();
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 naturalH = cat.getLocalBounds().height;
const targetPx = 100; const cs = naturalH > 0 ? catTargetPx / naturalH : 0.05;
const cs = naturalH > 0 ? targetPx / naturalH : 0.05;
cat.scale.set(cs); cat.scale.set(cs);
cat.anchor.set(0.5, 0.5); 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) { export default function Live2DStage({ onKiraReady, onReady, outfit, celebrateTrigger }: Props) {
@@ -89,7 +92,7 @@ export default function Live2DStage({ onKiraReady, onReady, outfit, celebrateTri
const onResize = () => { const onResize = () => {
app.renderer.resize(window.innerWidth, window.innerHeight); app.renderer.resize(window.innerWidth, window.innerHeight);
if (kiraModel) positionKira(kiraModel, app.screen.width, app.screen.height); 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); window.addEventListener('resize', onResize);
@@ -118,7 +121,7 @@ export default function Live2DStage({ onKiraReady, onReady, outfit, celebrateTri
if (!mounted) return; if (!mounted) return;
await new Promise(r => setTimeout(r, 100)); await new Promise(r => setTimeout(r, 100));
positionCat(catModel); positionCat(catModel, kiraModel, app.screen.width, app.screen.height);
(catModel as any).isInteractive = () => false; (catModel as any).isInteractive = () => false;
app.stage.addChild(catModel as any); app.stage.addChild(catModel as any);
catModelRef.current = catModel; catModelRef.current = catModel;
@@ -438,7 +441,7 @@ export default function Live2DStage({ onKiraReady, onReady, outfit, celebrateTri
// Resume idle animations // Resume idle animations
if (celebratingRef) celebratingRef.current = false; if (celebratingRef) celebratingRef.current = false;
// Reset scale // Reset scale
positionCat(cat); positionCat(cat, kiraModelRef.current, window.innerWidth, window.innerHeight);
} }
}; };