desk2/client/tools.js

function tools_switch(tool) {
    if (storage.tools.active_element) {
        storage.tools.active_element.classList.remove('active');
    }

    storage.tools.active = tool;
    storage.tools.active_element = document.querySelector(`.tool[data-tool="${tool}"]`);
    storage.tools.active_element.classList.add('active');
}

function tools_init() {
    const pencil = document.querySelector('.tool[data-tool="pencil"]');
    const ruler = document.querySelector('.tool[data-tool="ruler"]');
    const eraser = document.querySelector('.tool[data-tool="eraser"]');
    const undo = document.querySelector('.tool[data-tool="undo"]');

    pencil.addEventListener('click', () => tools_switch('pencil'));
    ruler.addEventListener('click', () => tools_switch('ruler'));
    eraser.addEventListener('click', () => tools_switch('eraser'));
    undo.addEventListener('click', queue_undo);

    tools_switch('pencil');
}