Keyboard-Tracker/browserCapture.html at master · KlassyKat/Keyboard-Tracker · 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
<head id="page-head">
    <style>
        :root {
            --fill-color: #badA55;
            --stroke-color: #000;
            --font-color: #000;
        }

        .active-el-class {
            stroke: var(--stroke-color) !important;
        }

        .pressed {
            fill: var(--fill-color) !important;
        }

        text {
            fill: var(--font-color) !important;
        }

    </style>
</head>
<body id="keyboard-wrapper">
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
    const server = io();
    server.on('keypress', (data) => {
        let { keycode } = data;
        console.log(keycode);
        let pressedKey = document.getElementById(keycode)
        if(pressedKey) {
            pressedKey.classList.add('pressed');
        }
    })
    server.on('keyrelease', (data) => {
        let { keycode } = data;
        console.log(keycode);
        let pressedKey = document.getElementById(keycode)
        if(pressedKey) {
            pressedKey.classList.remove('pressed');
        }

    })

    server.on('new-keyboard', (data) => {
        console.log(data)
        appendNewKeyboard(data);
    });

    server.on('settings', (data) => {
        applyNewSettings(data);
        for(setting in data) {
            localStorage.setItem(setting, data[setting]);
        }
    });

    function appendNewKeyboard(keyboard) {
        let container = document.getElementById('keyboard-wrapper');
        container.innerHTML = keyboard;
    }
    function applyNewSettings(data) {
        let {
            fontSize,
            selectedFont,
            strokeColor,
            fillColor,
            fontColor
        } = data;
        if((fontSize != localStorage.getItem('fontSize')) || (selectedFont != localStorage.getItem('selectedFont'))) {
            loadFont(fontSize, selectedFont);
        }
        if(strokeColor != localStorage.getItem('strokeColor')) {
            applyColor('stroke', strokeColor);
        }
        if(fillColor != localStorage.getItem('fillColor')) {
            applyColor('fill', fillColor);
        }
        if(fontColor != localStorage.getItem('fontColor')) {
            applyColor('font', fontColor);
        }
    }
    function loadFont(size, font) {
        let textNodes = document.querySelectorAll('text');
        let newFontSize = size;
        for(node of textNodes) {
            node.style.fontFamily = font;
            node.style.fontSize = size + 'em';
            node.style.transform = `translateX(${-size/10 + (.1)}em)`
            node.style.transform = `translateY(${size/10 - (.1)}em)`
        }
    }
    function applyColor(type, color) {
        let root = document.documentElement;
        switch(type) {
            case 'stroke':
                root.style.setProperty('--stroke-color', color);
                break;
            case 'fill':
                root.style.setProperty('--fill-color', color);
                break;
            case 'font':
                root.style.setProperty('--font-color', color);
                break;
        }
    }
</script>