feat: add fullscreen mode toggle button
- Add src/utils/fullscreen.js with createFullscreenButton() helper - Fullscreen button appears in bottom-right corner of all scenes - Click to toggle fullscreen mode - Uses Phaser's built-in scale manager Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
75
src/utils/fullscreen.js
Normal file
75
src/utils/fullscreen.js
Normal file
@@ -0,0 +1,75 @@
|
||||
// Fullscreen toggle utility for Phaser scenes
|
||||
|
||||
import { fontSize } from './responsive.js';
|
||||
|
||||
/**
|
||||
* Create a fullscreen toggle button in the corner of the screen
|
||||
* @param {Phaser.Scene} scene - The Phaser scene to add the button to
|
||||
* @param {object} options - Optional configuration
|
||||
* @param {number} options.x - X position (default: 770)
|
||||
* @param {number} options.y - Y position (default: 580)
|
||||
*/
|
||||
export function createFullscreenButton(scene, options = {}) {
|
||||
const x = options.x || 770;
|
||||
const y = options.y || 580;
|
||||
|
||||
// Button background
|
||||
const btn = scene.add.rectangle(x, y, 50, 30, 0x000000, 0.6);
|
||||
btn.setStrokeStyle(2, 0xffffff);
|
||||
btn.setInteractive({ useHandCursor: true });
|
||||
btn.setScrollFactor(0);
|
||||
btn.setDepth(1000);
|
||||
|
||||
// Button icon/text
|
||||
const icon = scene.add.text(x, y, '⛶', {
|
||||
fontSize: fontSize(18),
|
||||
fill: '#ffffff'
|
||||
}).setOrigin(0.5);
|
||||
icon.setScrollFactor(0);
|
||||
icon.setDepth(1001);
|
||||
|
||||
// Update icon based on fullscreen state
|
||||
const updateIcon = () => {
|
||||
if (scene.scale.isFullscreen) {
|
||||
icon.setText('⛶');
|
||||
} else {
|
||||
icon.setText('⛶');
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle fullscreen on click
|
||||
btn.on('pointerdown', () => {
|
||||
btn.setFillStyle(0x333333, 0.8);
|
||||
btn.setScale(0.95);
|
||||
icon.setScale(0.95);
|
||||
});
|
||||
|
||||
btn.on('pointerup', () => {
|
||||
btn.setFillStyle(0x000000, 0.6);
|
||||
btn.setScale(1);
|
||||
icon.setScale(1);
|
||||
|
||||
if (scene.scale.isFullscreen) {
|
||||
scene.scale.stopFullscreen();
|
||||
} else {
|
||||
scene.scale.startFullscreen();
|
||||
}
|
||||
updateIcon();
|
||||
});
|
||||
|
||||
btn.on('pointerover', () => {
|
||||
btn.setFillStyle(0x333333, 0.8);
|
||||
});
|
||||
|
||||
btn.on('pointerout', () => {
|
||||
btn.setFillStyle(0x000000, 0.6);
|
||||
});
|
||||
|
||||
// Listen for fullscreen changes
|
||||
scene.scale.on('enterfullscreen', updateIcon);
|
||||
scene.scale.on('leavefullscreen', updateIcon);
|
||||
|
||||
return { btn, icon };
|
||||
}
|
||||
|
||||
export default { createFullscreenButton };
|
||||
Reference in New Issue
Block a user