source-code/
break-the-web
Public
codeCodeinfoIssues 0call_splitPull Requestsplay_circleActions
break-the-web/src/components/Footer.tsx
typescript39 lines1.2 KB
import React from 'react';
import useGameStore from '../store';

interface FooterProps {
    isHorrorMode: boolean;
}

const Footer: React.FC<FooterProps> = ({ isHorrorMode }) => {
    const { setTerminalOpen } = useGameStore();

    return (
        <footer className="footer">
            <p>&copy; 2026 Andre.dev. All rights reserved.</p>
            {isHorrorMode && (
                <p style={{ color: '#ff0000', fontFamily: 'monospace', fontSize: '12px', marginTop: '10px', letterSpacing: '2px', fontWeight: 'bold' }}>
                    ERR_VAULT_LOCKED // PASSCODE: 0451
                </p>
            )}
            <button 
                onClick={() => setTerminalOpen(true)}
                style={{
                    background: 'transparent',
                    border: '1px solid rgba(255,255,255,0.2)',
                    color: 'rgba(255,255,255,0.5)',
                    padding: '4px 8px',
                    fontSize: '10px',
                    cursor: 'pointer',
                    borderRadius: '4px',
                    marginTop: '10px'
                }}
            >
                &gt;_ DEV CONSOLE
            </button>
        </footer>
    );
};

export default Footer;

About

Interact with the web page itself using HTML5 Drag-and-Drop to pull inputs and images directly into the Phaser physics engine. Alter the website state through bi-directional communication between React and Phaser, unlocking a glitchy horror mode. The game is built using React, Phaser 3, Zustand for state management, and Vanilla CSS.

ReactPhaser 3TypeScriptZustandVite

Contributors

1