main.js

var wsUrl = 'ws://' + document.location.host + '/ws';

var settings = {
    brightness: 0,
    interval: 0,
    color: {
        r: 255,
        g: 255,
        b: 255,
    }
};

var highscores = {};

var uiEnabled = false;

$(document).ready(function() {
    enabledUI(false);
    $("#wsMessages, #prompt").val("");    
});

$(window).on('load', function () {
    startSocket();
});

$(document).on('change', '.rangeSetting', function () {
    var setting = $(this).data('name');
    var value = $(this).val();
    switch (setting) {
        case 'brightness':
            value = mapRange(value, 1, 100, 8, 255);
            break;
        case 'interval':
            value = mapRange(value, 1, 100, 1000, 10);
            break;
    }
    settings[setting] = value;
    sendSettings();
});

var colorPicker = new iro.ColorPicker('#colorpicker', {
    layout: [
        {
            component: iro.ui.Wheel,
        }
    ]
});    

colorPicker.on('input:end', function (color) {
    settings.color = color.rgb;
    sendSettings();
});

$('.btnAction').on('click', function () {
    var action = $(this).data('action');
    sendAction(action);
});

$("#prompt").on('keydown', function (e) {
    if (e.keyCode == 13 && $("#prompt").val() != "") {
        var val = $("#prompt").val();
        wsSend(JSON.parse(val));
        $("#prompt").val("");
    }
});

function enabledUI(enable) {
    if (enable) {
        $('#spinner').addClass('invisible');
        $('.btnAction').prop('disabled', false);
        $('.rangeSetting').prop('disabled', false);
        uiEnabled = true;
    } else {
        $('#spinner').removeClass('invisible');
        $('.btnAction').prop('disabled', true);
        $('.rangeSetting').prop('disabled', true);
        uiEnabled = false;
    }
}

function addMessage(msg) {
    var txt = $("#wsMessages");
    txt.val($.trim(txt.val() + "\n" + msg));
    txt.scrollTop(txt[0].scrollHeight - txt.height());
}

function sendSettings() {
    if (!uiEnabled) {
        return;
    }
    var payload = {
        'settings': settings
    };
    wsSend(payload);
}

function wsSend(obj) {
    ws.send(obj).done(function () {
        addMessage("➡️ " + JSON.stringify(obj));
    }).fail(function (e) {
        addMessage("❗️ " + JSON.stringify(obj));
    });
}

var ws;
function startSocket() {
    ws = $.simpleWebSocket({
        url: wsUrl,
        timeout: 5000,
        onOpen: function (e) {
            if (ws.isConnected()) {
                console.log("WS: connected");
                addMessage("✅ connected");
                sendAction('getSettings');
            }
        },
        onClose: function (e) {
            enabledUI(false);
            console.log("WS: disconnected");
            addMessage("❌ disconnected");
        },
        onError: function (e) {
            enabledUI(false);
            console.log("WS: error");
            addMessage("❗️ error");
        },
    });

    ws.listen(function (data) {
        addMessage("⬅️ " + JSON.stringify(data));
        if (data.settings) {
            loadSettings(data.settings);
        } else if (data.highscores) {
            updateHighscore(data.highscores);
        } else if (data.stats) {
            updateStats(data.stats);
        }

    });
}

function sendAction(action) {
    var payload = {
        'action': action
    };
    wsSend(payload);
}

function loadSettings(data) {
    settings.brightness = data.brightness;
    settings.interval = data.interval;
    colorPicker.color.rgb = data.color;
    enabledUI(true);
    $('#rangeBrightness').val(mapRange(data.brightness, 8, 255, 1, 100));
    $('#rangeSpeed').val(mapRange(data.interval, 1000, 10, 1, 100));
    sendAction('getHighscores');
}

function updateHighscore(hs) {
    highscores = hs;
    $('#hsGames').find('.progress-bar').text(hs.games);
    $('#hsTicks').find('.progress-bar').text(hs.ticks);
    $('#hsCells').find('.progress-bar').text(hs.cells);
}

function updateStats(lg) {
    var lastGameWidth = 100 / (highscores.games / lg.game);
    var lastTicksWidth = 100 / (highscores.ticks / lg.ticks);
    var lastCellsWidth = 100 / (highscores.cells / lg.cells);
    var hsGamesWidth = (1 - (lg.game / highscores.games)) * 100;
    var hsTicksWidth = (1 - (lg.ticks / highscores.ticks)) * 100;
    var hsCellsWidth = (1 - (lg.cells / highscores.cells)) * 100;
    $('#hsGames').css('width', hsGamesWidth+'%');
    $('#lastGame').css('width', lastGameWidth+'%');
    $('#lastGame').find('.progress-bar').text(lg.game);
    $('#hsTicks').css('width', hsTicksWidth+'%');
    $('#lastTicks').css('width', lastTicksWidth+'%');
    $('#lastTicks').find('.progress-bar').text(lg.ticks);
    $('#hsCells').css('width', hsCellsWidth+'%');
    $('#lastCells').css('width', lastCellsWidth+'%');
    $('#lastCells').find('.progress-bar').text(lg.cells);
}

function mapRange(number, inMin, inMax, outMin, outMax) {
    return Math.round((number - inMin) * (outMax - outMin) / (inMax - inMin) + outMin);
}