Hugging Face's logo

Spaces:
cosimotaiuti
/
team9
Sleeping

App Files Community
team9
File size: 3,844 Bytes 
2a6d2b0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 

class Numpad {
    constructor(containerId, options = {}) {
        this.container = document.getElementById(containerId);
        this.options = {
            code: options.code || '123',
            onSuccess: options.onSuccess || (() => alert('Correct code!')),
            onError: options.onError || (() => alert('Wrong code!'))
        };
        
        this.currentCode = '';
        this.init();
    }

    init() {
        // Create display
        this.display = document.createElement('div');
        this.display.className = 'numpad-display';
        this.container.appendChild(this.display);
        
        // Create numpad container
        this.numpadGrid = document.createElement('div');
        this.numpadGrid.className = 'numpad-grid';
        this.container.appendChild(this.numpadGrid);
        
        // Create number buttons
        for (let i = 1; i <= 9; i++) {
            this.createButton(i);
        }
        this.createButton(0);
        
        this.updateDisplay();
    }

    createButton(number) {
        const button = document.createElement('button');
        button.className = 'numpad-key';
        button.textContent = number;
        button.addEventListener('click', () => this.handleInput(number));
        this.numpadGrid.appendChild(button);
    }

    handleInput(number) {
        if (this.currentCode.length < 3) {
            this.currentCode += number;
            this.updateDisplay();
            
            if (this.currentCode.length === 3) {
                this.checkCode();
            }
        }
    }

    updateDisplay() {
        this.display.textContent = this.currentCode.padEnd(3, 'X');
    }

    checkCode() {
        if (this.currentCode === this.options.code) {
            this.options.onSuccess();
        } else {
            this.options.onError();
        }
        this.currentCode = '';
        this.updateDisplay();
    }

    reset() {
        this.currentCode = '';
        this.updateDisplay();
    }
}

// Wait for DOM to be loaded before initializing
document.addEventListener('DOMContentLoaded', () => {
    // Create required HTML elements if they don't exist
    if (!document.getElementById('numpad-overlay')) {
        const overlay = document.createElement('div');
        overlay.id = 'numpad-overlay';
        overlay.className = 'numpad-overlay hidden';
        
        const container = document.createElement('div');
        container.id = 'numpad-container';
        overlay.appendChild(container);
        
        document.body.appendChild(overlay);
    }
    
    if (!document.getElementById('toggle-numpad')) {
        const toggleButton = document.createElement('button');
        toggleButton.id = 'toggle-numpad';
        toggleButton.className = 'toggle-numpad';
        toggleButton.textContent = 'Enter Code';
        document.body.appendChild(toggleButton);
    }

    // Initialize the numpad with desired options
    const numpad = new Numpad('numpad-container', {
        code: '123',
        onSuccess: () => {
            console.log('Success! Correct code entered');
            // Add your game logic here
        },
        onError: () => {
            console.log('Error! Wrong code');
        }
    });

    // Setup toggle functionality
    const toggleButton = document.getElementById('toggle-numpad');
    const numpadOverlay = document.getElementById('numpad-overlay');

    toggleButton.addEventListener('click', () => {
        numpadOverlay.classList.toggle('hidden');
    });

    // Close numpad when clicking outside
    document.addEventListener('click', (event) => {
        if (!numpadOverlay.contains(event.target) && 
            !toggleButton.contains(event.target) && 
            !numpadOverlay.classList.contains('hidden')) {
            numpadOverlay.classList.add('hidden');
        }
    });
});