Loading Lily's World... const Character = { x: 30, y: 0, state: 'idle', // idle, walking, sitting facing: 'front', // left, right, front walkSpeed: 40, // % per second lastTick: Date.now(), targetX: null, loopInterval: null, getHTML() { return `

`; }, inject(container) { const existing = document.getElementById('lilyWrap'); if (existing) existing.remove(); container.insertAdjacentHTML('beforeend', this.getHTML()); this.el = document.getElementById('lilyWrap'); this.charEl = document.getElementById('lilyChar'); this.fxPoint = document.getElementById('lilyFxPoint'); this.speechEl = document.getElementById('lilySpeech'); if (!this.loopInterval) { this.lastTick = Date.now(); this.loopInterval = requestAnimationFrame(() => this.loop()); } }, loop() { const now = Date.now(); const dt = (now - this.lastTick) / 1000; this.lastTick = now; if (this.state === 'walking' && this.targetX !== null) { const dx = this.targetX - this.x; if (Math.abs(dx) < 1) { this.x = this.targetX; this.setState('idle'); this.setFacing('front'); this.targetX = null; } else { const dir = dx > 0 ? 1 : -1; this.x += dir * this.walkSpeed * dt; this.setFacing(dir > 0 ? 'right' : 'left'); } if (this.el) this.el.style.left = this.x