bob/syntaxHelp.js at master · filip326/bob · 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
/** @type {HTMLTextAreaElement} */
let textarea = document.querySelector('.editor textarea')
/** @type {HTMLDivElement} */
let syntaxHighlighter = document.querySelector('#editor-overlay')


let savingCache = cacher(1000)

textarea.addEventListener('keydown', (key) => {
    if (key.code == 'Space' || key.code == 'Enter') {
        grossschreiben(textarea.value)
        savingCache(() => {
            localStorage.setItem('textarea', textarea.value)

            log(`&orCode gespeichert`)
        })
    }
})

function syntaxHighlighting() {
    let lines = textarea.value.split('\n');
    syntaxHighlighter.innerHTML = "";

    let allCommands = [
        ...(textarea.value.match(/LERNE [A-Z0-9\-]+/g)?.map((v) => v.split(' ')[1]) || []),
        ...Object.keys(basicCommands),
        ...Object.keys(paramCommands),
        ...Object.keys(customCommands),
        'WIEDERHOLE', 'WENN', 'SOLANGE', 'LERNE', 'ENDE, SONST', 'ENDE', '-MAL',
        'SCHRITT', 'LINKS-WENDUNG', 'PLATZIEREN', 'AUFHEBEN',
        '(IST|NICHT) (MAUER|MARKIERT|NORDEN|WESTEN|OSTEN|SÜDEN|ZUFALL|HAUS)'
    ]

    for (let line of lines) {

        let html = line;

        html.replace(/</, `&lt;`)
        html.replace(/>/, `&gt;`);

        html = html.replace(/ <-- .+/, '<span class="args">$&</span>')

        html = html.replace(new RegExp(allCommands.join('|'), 'g'), '<span class="not-wrong">$&</span>')
        html = html.replace(/\/\/.+$/gm, `<span class="comment">$&</span>`)
        html = html.replace(/WIEDERHOLE|WENN|SOLANGE|LERNE|ENDE, SONST|ENDE|-MAL/gm, `<span class="keyword">$&</span>`)
        html = html.replace(/SCHRITT|LINKS-WENDUNG|PLATZIEREN|AUFHEBEN/gm, `<span class="basicCommand">$&</span>`)
        html = html.replace(/(IST|NICHT) (MAUER|MARKIERT|NORDEN|WESTEN|OSTEN|SÜDEN|ZUFALL|HAUS)/gm, `<span class="logic-operator">$&</span>`)
        html = html.replace(/[0-9]+/gm, `<span class="number">$&</span>`)


        let div = document.createElement('div')

        if (html.trim() == "") { html = `<span class="invisible">__</span>` }
        div.innerHTML = html;


        syntaxHighlighter.appendChild(div)

    }
}

textarea.addEventListener('input', syntaxHighlighting)

function grossschreiben(t) {
    let cursorPos1 = textarea.selectionStart;
    let cursorPos2 = textarea.selectionEnd;
    let string = ""
    textarea.value = null;
    var text = t.split('\n')
    for (line in text) {
        text[line] = text[line].toUpperCase() + '\n';
        string += text[line];
    }
    string = string.trimEnd()
    textarea.value = string;
    textarea.setSelectionRange(cursorPos1, cursorPos2)
}

function cacher(ms) {

    let lastTimeout = undefined;

    function make(cb) {
        clearTimeout(lastTimeout)
        lastTimeout = setTimeout(() => {
            cb()
        }, ms)
    }

    return make;
}
textarea.value = localStorage.getItem('textarea') || ""

syntaxHighlighting()