BreakEscape/test-keyboard-pause.html at main · alixthegreat/BreakEscape · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test Keyboard Pause</title>
    <style>
        body {
            font-family: monospace;
            padding: 20px;
        }
        .log {
            background: #f0f0f0;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            max-height: 300px;
            overflow-y: auto;
        }
        button {
            margin: 5px;
            padding: 10px 20px;
            font-size: 16px;
        }
        input {
            padding: 10px;
            font-size: 16px;
            margin: 10px 0;
            width: 300px;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            font-weight: bold;
        }
        .status.paused {
            background: #ffcccc;
            color: #cc0000;
        }
        .status.active {
            background: #ccffcc;
            color: #00cc00;
        }
    </style>
</head>
<body>
    <h1>Keyboard Pause Test</h1>

    <div class="status active" id="status">Keyboard Active</div>

    <div>
        <button onclick="pauseKeyboard()">Pause Keyboard</button>
        <button onclick="resumeKeyboard()">Resume Keyboard</button>
        <button onclick="clearLog()">Clear Log</button>
    </div>

    <div>
        <h3>Test typing WASD in this input:</h3>
        <input type="text" id="testInput" placeholder="Type WASD here...">
    </div>

    <div>
        <h3>Event Log:</h3>
        <div class="log" id="log"></div>
    </div>

    <script type="module">
        // Simulate the player keyboard system
        let keyboardPaused = false;

        function log(message, isError = false) {
            const logDiv = document.getElementById('log');
            const entry = document.createElement('div');
            entry.style.color = isError ? 'red' : 'black';
            entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            logDiv.appendChild(entry);
            logDiv.scrollTop = logDiv.scrollHeight;
        }

        function updateStatus() {
            const statusDiv = document.getElementById('status');
            if (keyboardPaused) {
                statusDiv.textContent = '🔒 Keyboard PAUSED';
                statusDiv.className = 'status paused';
            } else {
                statusDiv.textContent = '✅ Keyboard ACTIVE';
                statusDiv.className = 'status active';
            }
        }

        window.pauseKeyboard = function() {
            keyboardPaused = true;
            log('🔒 Keyboard PAUSED');
            updateStatus();
        };

        window.resumeKeyboard = function() {
            keyboardPaused = false;
            log('🔓 Keyboard RESUMED');
            updateStatus();
        };

        window.clearLog = function() {
            document.getElementById('log').innerHTML = '';
        };

        // Simulate player keydown handler
        document.addEventListener('keydown', (event) => {
            const key = event.key.toLowerCase();

            // Check if it's a game control key
            if (['w', 'a', 's', 'd', 'e', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(key)) {
                if (keyboardPaused) {
                    log(`⏸️ Game key "${event.key}" blocked (keyboard paused) - event should pass to input`, false);
                    return; // Don't prevent default, let it go to the input
                } else {
                    log(`🎮 Game key "${event.key}" intercepted - moving player`, false);
                    event.preventDefault(); // Prevent default for game controls
                    return;
                }
            }
        });

        // Log when text input receives keys
        document.getElementById('testInput').addEventListener('keydown', (event) => {
            log(`📝 Input received: "${event.key}"`, false);
        });

        log('Test initialized. Try typing WASD with keyboard paused vs active.');
        updateStatus();
    </script>
</body>
</html>