Gitinbox/OpenOPC
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(office-ui): resolve blank/frozen office canvas and add sidebar collapse

Browse Source 
Office canvas fixes:
- Lazy-create the Phaser game via ResizeObserver on the first non-zero
  layout instead of creating it inside the display:none office page with
  inline px fallback sizes. Phaser's RESIZE-mode 500ms parent poll has no
  zero guard, so the old path shrank the canvas to 0x0 (blue-black screen)
  and later restored it to a stale wrong size (clipped office).
- On unhide, re-measure with scale.getParentBounds() before scale.refresh();
  plain scale.resize() is clobbered by the stale cached parentSize in
  RESIZE mode.
- Fix whole-game freeze when clicking an office card: camera effects
  resolve ease names via EaseMap, which has no 'Cubic.Out' key, leaving
  effect.ease undefined and killing the RAF loop with a per-frame
  TypeError. Use 'Cubic.easeOut' for cam.pan in panToOffice/resetCameraView.
- Bound GameBridge queues (latest snapshot supersedes, event queue capped)
  since game creation is now deferred until the Office page is first opened.

Sidebar:
- Add a collapse/expand handle on the canvas/sidebar boundary with a 220ms
  grid transition; state persists in localStorage. The canvas follows the
  column change automatically through the ResizeObserver path. Stacked
  (<=1024px) layout collapses the bottom panel and moves the handle to the
  bottom edge.

README:
- Add Simplified Chinese translation (README.zh-CN.md) with a language
  switcher in both files; fix stale TOC entries in the English README.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
LZH-YS1998
2026-07-07 11:45:11 +08:00
parent 137e382097
commit ee79331d48
12 changed files with 1087 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files
opc/plugins/office_ui/frontend_src/game/GameBridge.ts
+6 -1
View File
@@ -36,6 +36,7 @@ export class GameBridge extends Phaser.Events.EventEmitter {
pushEvent(evt: VisualEvent) {
if (!this.scene) {
this.eventQueue.push(evt)
if (this.eventQueue.length > 500) this.eventQueue.shift()
return
}
this.applyEvent(evt)
@@ -45,7 +46,11 @@ export class GameBridge extends Phaser.Events.EventEmitter {
const agentCount = Object.keys(snapshot.agents ?? {}).length
if (!this.scene) {
console.log(`[GameBridge] pushSnapshot queued (scene not ready) — ${agentCount} agents`)
this.snapshotQueue.push(snapshot)
// A snapshot fully resets the scene, so it supersedes anything queued
// before it. The game may not be created until the Office page is first
// opened — keep the queues bounded in the meantime.
this.snapshotQueue = [snapshot]
this.eventQueue = []
return
}
console.log(`[GameBridge] pushSnapshot applying now — ${agentCount} agents`)
opc/plugins/office_ui/frontend_src/game/PhaserGame.tsx
+39 -34
View File
@@ -15,47 +15,51 @@ export function PhaserGame({ bridge }: Props) {
const gameRef = useRef<Phaser.Game | null>(null)
useEffect(() => {
if (!wrapperRef.current || !containerRef.current || gameRef.current) return
if (!wrapperRef.current || !containerRef.current) return
// Measure the wrapper (which has definite CSS dimensions from the grid layout).
// The inner container div is initially empty so has 0 dimensions.
const wrapper = wrapperRef.current
const container = containerRef.current
// Force container to fill wrapper so clientWidth/Height are non-zero
container.style.width = `${wrapper.clientWidth}px`
container.style.height = `${wrapper.clientHeight}px`
// Safety: never create a 0×0 game
const w = container.clientWidth || window.innerWidth - 400
const h = container.clientHeight || window.innerHeight - 48
if (w < 50 || h < 50) {
console.warn('[PhaserGame] Container too small:', w, h, '— using fallback size')
container.style.width = `${window.innerWidth - 400}px`
container.style.height = `${window.innerHeight - 48}px`
const createGame = (w: number, h: number) => {
console.log('[PhaserGame] Creating Phaser game', w, '×', h)
const config = createGameConfig(container, w, h)
config.scene = [BootScene, OfficeScene]
const game = new Phaser.Game(config)
game.registry.set('bridge', bridge)
gameRef.current = game
}
console.log('[PhaserGame] Creating Phaser game', container.clientWidth, '×', container.clientHeight)
const config = createGameConfig(container)
config.scene = [BootScene, OfficeScene]
const game = new Phaser.Game(config)
game.registry.set('bridge', bridge)
gameRef.current = game
// Keep canvas sized to wrapper on window resize
const onResize = () => {
if (!wrapper || !game) return
container.style.width = `${wrapper.clientWidth}px`
container.style.height = `${wrapper.clientHeight}px`
game.scale.resize(wrapper.clientWidth, wrapper.clientHeight)
if (typeof ResizeObserver === 'undefined') {
createGame(wrapper.clientWidth || window.innerWidth - 380, wrapper.clientHeight || window.innerHeight - 48)
return () => {
gameRef.current?.destroy(true)
gameRef.current = null
}
}
window.addEventListener('resize', onResize)
// The office page can start hidden (display:none → 0×0). Never create or
// resize the game at zero size; wait for the first real layout instead.
const observer = new ResizeObserver((entries) => {
const rect = entries[entries.length - 1].contentRect
const w = Math.floor(rect.width)
const h = Math.floor(rect.height)
if (w < 1 || h < 1) return // hidden — keep last known size
if (!gameRef.current) {
createGame(w, h)
} else {
// In RESIZE scale mode the game follows parentSize, which Phaser only
// re-measures on its 500ms poll — and scale.resize() gets clobbered by
// that stale value. Re-measure the parent, then refresh.
const scale = gameRef.current.scale
scale.getParentBounds()
scale.refresh()
}
})
observer.observe(wrapper)
return () => {
window.removeEventListener('resize', onResize)
game.destroy(true)
observer.disconnect()
gameRef.current?.destroy(true)
gameRef.current = null
}
}, [bridge]) // bridge is a stable ref, effect runs once
@@ -63,8 +67,9 @@ export function PhaserGame({ bridge }: Props) {
return (
// Wrapper fills the CSS grid cell
<div ref={wrapperRef} style={{ width: '100%', height: '100%' }}>
{/* Phaser mounts its canvas inside this div */}
<div ref={containerRef} />
{/* Phaser mounts its canvas inside this div; it must track the wrapper
so Phaser's own parent-bounds polling reads the true size. */}
<div ref={containerRef} style={{ width: '100%', height: '100%' }} />
</div>
)
}
opc/plugins/office_ui/frontend_src/game/config.ts
+3 -3
View File
@@ -99,9 +99,9 @@ export const STATUS_BUBBLE_DURATION = 5.0
export const INACTIVE_SEAT_TIMER_MIN = 3.0
export const INACTIVE_SEAT_TIMER_RANGE = 2.0
export function createGameConfig(parent: HTMLElement): Phaser.Types.Core.GameConfig {
const w = parent.clientWidth || window.innerWidth - 380
const h = parent.clientHeight || window.innerHeight - 48
export function createGameConfig(parent: HTMLElement, width?: number, height?: number): Phaser.Types.Core.GameConfig {
const w = width || parent.clientWidth || window.innerWidth - 380
const h = height || parent.clientHeight || window.innerHeight - 48
const skyHex = isLocalDaytime() ? '#a8d4ec' : '#31453a'
return {
type: Phaser.CANVAS,
opc/plugins/office_ui/frontend_src/game/scenes/OfficeScene.ts
+4 -4
View File
@@ -320,9 +320,9 @@ export class OfficeScene extends Phaser.Scene {
targets: cam,
zoom: targetZoom,
duration: 260,
ease: 'Cubic.Out',
ease: 'Cubic.easeOut',
})
cam.pan(targetX, targetY, 260, 'Cubic.Out')
cam.pan(targetX, targetY, 260, 'Cubic.easeOut')
}
panToOffice(officeId: string) {
@@ -343,9 +343,9 @@ export class OfficeScene extends Phaser.Scene {
targets: cam,
zoom: targetZoom,
duration: 380,
ease: 'Cubic.Out',
ease: 'Cubic.easeOut',
})
cam.pan(cx, cy, 380, 'Cubic.Out')
cam.pan(cx, cy, 380, 'Cubic.easeOut')
}
// ── Agent management ──────────────────────────────────