Fablewood/src/scenes/MenuScene.js

export class MenuScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MenuScene' });
    }

    preload() {
        // Images
        this.load.image('logo', 'assets/images/logo.png');

        // Fonts
        this.load.font('eraserDust', 'assets/fonts/EraserDust.ttf');

        // Videos
        this.load.video('mainMenu', 'assets/videos/mainMenu.mp4');

        // Music
        this.load.audio('menuMusic', 'assets/music/menuMusic.mp3');
    }

    create() {
        // Add typing text
        const fullText = "Yet Another AAA Fertig Game....";
        const typingText = new TypingText(this, 
            this.game.config.width / 2, 
            this.game.config.height / 2,
            fullText,
            {
                fontFamily: 'eraserDust, Arial',
                fontSize: '32px',
                color: '#ffffff',
                align: 'center'
            }
        );
        
        // Start typing animation
        this.time.delayedCall(1000, () => {
            typingText.startTyping();
        });

        // Maun Menu
        this.time.delayedCall(7300, () => {
            // Play mainMenu video on loop and stretch to fill background
            this.mainMenuVideo = this.add.video(0, 0, 'mainMenu');
            this.mainMenuVideo.setOrigin(0);
            this.mainMenuVideo.scaleX = this.scale.width / 1280;
            this.mainMenuVideo.scaleY = this.scale.height / 720;
            this.mainMenuVideo.play(true);
            const logo = this.physics.add.image(610, 225, 'logo').setScale(0).setOrigin(0.5);
            this.tweens.add({
                targets: logo,
                angle: 360,
                scale: .65,
                duration: 3500,
                ease: 'Bounce',
                onComplete: () => {
                    this.tweens.add({
                        targets: logo,
                        scale: .7,
                        y: 250,
                        yoyo: true,
                        repeat: -1,
                        duration: 3000
                    });
                    const typingText2 = new TypingText(this, 
                        this.game.config.width / 2, 
                        this.game.config.height / 2 + 150,
                        "Use Mouse to Control your Character",
                        {
                            fontFamily: 'eraserDust, Arial',
                            fontSize: '32px',
                            color: '#ffffff',
                            align: 'center'
                        }
                    );
                    typingText2.startTyping();
                    const typingText3 = new TypingText(this, 
                        this.game.config.width / 2, 
                        this.game.config.height / 2 + 200,
                        "Click Here to Start",
                        {
                            fontFamily: 'eraserDust, Arial',
                            fontSize: '32px',
                            color: '#ffffff',
                            align: 'center'
                        }
                    );
                    typingText3.startTyping();

                    // Add click handler to start game
                    typingText3.typingText.setInteractive({ useHandCursor: true });
                    typingText3.typingText.on('pointerdown', () => {
                        // Stop video and music
                        if (this.mainMenuVideo) {
                            this.mainMenuVideo.stop();
                        }
                        if (this.bgMusic) {
                            this.bgMusic.stop();
                        }
                        
                        // Start Game scene
                        this.scene.start('Game');
                    });
                }
            });
        });

        // Background Music
        this.bgMusic = this.sound.add('menuMusic', { volume: 0.5 });
        this.bgMusic.loop = true;
        this.bgMusic.play();
    }

    update(time, delta) {

    }
}

// Typing text class implementation
class TypingText {
    constructor(scene, x, y, text, style = {}) {
        this.scene = scene;
        this.x = x;
        this.y = y;
        this.text = text;
        this.style = style;
        this.fullText = text;
        
        // Create empty text object
        this.typingText = scene.add.text(x, y, '', style).setShadow(3,3, '#333', 5);
        this.typingText.setOrigin(0.5);
        
        // Animation properties
        this.currentCharIndex = 0;
        this.isTyping = false;
        this.typingDelay = 100; // milliseconds per character
    }
    
    startTyping() {
        if (this.isTyping) return;
        
        this.isTyping = true;
        this.currentCharIndex = 0;
        
        // Clear existing text and start typing animation
        this.typingText.setText('');
        
        const typeCharacter = () => {
            if (this.currentCharIndex < this.fullText.length) {
                this.typingText.text += this.fullText.charAt(this.currentCharIndex);
                this.currentCharIndex++;
                
                // Schedule next character
                setTimeout(typeCharacter, this.typingDelay);
            } else {
                this.isTyping = false;
            }
        };
        
        typeCharacter();
    }
}