FortuneRoundtable/src/script/script.js

"use strict";

/* Helper functions */
function guid() {
    function s4() {
        return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
    }
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
}



/* Persistent data store */
var dataStore={
    groupAName: "Group A",
    groupBName: "Group B",
    entities: {},
    groupA: [],
    groupB: [],
    assignments: [],
    options: {
        remFromB: false
    }
}
function loadDataStore(){
    try{
        var ser=localStorage.getItem("dataStore");
        if(ser){
            dataStore=JSON.parse(ser);
        }

        //loading to UI

        //load group names
        $(".groupAName").text(dataStore.groupAName);
        $(".groupBName").text(dataStore.groupBName);

        //load group entities
        $.each(dataStore.groupA, (i, val) => {
            var el=dataStore.entities[val];
            $("<li><button class=\"forfa\" onclick=\"remGroupA(this, '"+el.id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+el.val+"</span></li>").hide().appendTo("#groupAList").slideDown();
        })
        $.each(dataStore.groupB, (i, val) => {
            var el=dataStore.entities[val];
            $("<li><button class=\"forfa\" onclick=\"remGroupB(this, '"+el.id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+el.val+"</span></li>").hide().appendTo("#groupBList").slideDown();
        })

        //load options
        $("#remFromBOnMatch").prop("checked", dataStore.options.remFromB);
    }
    catch(e){
        console.log(e);
    }
}
function saveDataStore(){
    try{
        var ser=JSON.stringify(dataStore);
        localStorage.setItem("dataStore", ser);
    }
    catch(e){
        console.log(e);
    }
}



/* Edit group name */
function renameGroupA(){
    $("#groupANameDisplay").hide();
    $("#groupANameEdit").show();
    $("#groupANameField").val(dataStore.groupAName);
}
function renameGroupB(){
    $("#groupBNameDisplay").hide();
    $("#groupBNameEdit").show();
    $("#groupBNameField").val(dataStore.groupBName);
}
function saveGroupA(){
    dataStore.groupAName=$("#groupANameField").val();
    $(".groupAName").text(dataStore.groupAName);
    $("#groupANameEdit").hide();
    $("#groupANameDisplay").show();
    saveDataStore();
}
function saveGroupB(){
    dataStore.groupBName=$("#groupBNameField").val();
    $(".groupBName").text(dataStore.groupBName);
    $("#groupBNameEdit").hide();
    $("#groupBNameDisplay").show();
    saveDataStore();
}



/* Element manipulation */
function addGroupA(){
    var inp=$("#groupAInput").val();
    var id=guid();

    var el={id: id, val: inp};
    Object.assign(dataStore.entities, {[id]: el});
    dataStore.groupA.push(id);
    saveDataStore();

    $("#groupAInput").val("");

    //add to ui
    $("<li><button class=\"forfa\" onclick=\"remGroupA(this, '"+id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+inp+"</span></li>").hide().appendTo("#groupAList").slideDown();
}
function addGroupB(){
    var inp=$("#groupBInput").val();
    var id=guid();

    var el={id: id, val: inp};
    Object.assign(dataStore.entities, {[id]: el});
    dataStore.groupB.push(id);
    saveDataStore();

    $("#groupBInput").val("");

    //add to ui
    $("<li><button class=\"forfa\" onclick=\"remGroupB(this, '"+id+"')\"><i class=\"fa fa-times\"></i></button> <span>"+inp+"</span></li>").hide().appendTo("#groupBList").slideDown();
}
function remGroupA(el, id){
    dataStore.groupA=dataStore.groupA.filter((el) => el!==id);
    saveDataStore();
    $(el).parent().slideUp(() => $(el).parent().remove());
}
function remGroupB(el, id){
    console.log(id);
    dataStore.groupB=dataStore.groupB.filter((el) => el!==id);
    saveDataStore();
    $(el).parent().slideUp(() => $(el).parent().remove());
}



/* Options */
function updateOptions(){
    dataStore.options.remFromB=$("#remFromBOnMatch").prop("checked")?true:false;
    saveDataStore();
}



/* actual rolling */
var baseRotateA=0;
var baseRotateB=0;
var countA=0;
var countB=0;
var degA=0;
var degB=0;
function setupRoll(){
    $("#roller").slideUp(() => {
        //set up roller A
        $("#rollerA").html("");
        $("#rollerA").css("transform", "rotate(0)");
        countA=dataStore.groupA.length;
        degA=360/countA;
        var dataA=dataStore.groupA.map((id) => dataStore.entities[id]);
        $.each(dataA, (i, val) => {
            var rotSlicer=i*degA;
            var rotLabel=((i-1)*degA)+(degA/2);
            $("<div class=\"roller__slicer\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerA");
            $("<div class=\"roller__label\" style=\"transform: rotate("+rotLabel.toString()+"deg)\">"+val.val+"</div>").appendTo("#rollerA");
        })

        //set up roller B
        $("#rollerB").html("");
        $("#rollerB").css("transform", "rotate(0)");
        countB=dataStore.groupB.length;
        degB=360/countB;
        var dataB=dataStore.groupB.map((id) => dataStore.entities[id]);
        $.each(dataB, (i, val) => {
            var rotSlicer=i*degB;
            var rotLabel=((i-1)*degB)+(degB/2);
            $("<div class=\"roller__slicer roller__slicer__flip\" style=\"transform: rotate("+rotSlicer.toString()+"deg)\"/>").appendTo("#rollerB");
            $("<div class=\"roller__label roller__label__flip\" style=\"transform: rotate("+rotLabel.toString()+"deg)\">"+val.val+"</div>").appendTo("#rollerB");
        });

        if(countA%2!==0){
            baseRotateA=-degA/2;
        }
        if(countB%2!==0){
            baseRotateB=degB/2;
        }

        //$("#rollerA").css("transform", "rotate("+baseRotateA.toString()+"deg)");
        //$("#rollerB").css("transform", "rotate("+baseRotateB.toString()+"deg)");

        $("#editor").slideUp();
        $("#roller").slideDown();
        $("#roller_button").slideDown();
    })
}

var idA="";
var idB="";
function roll(){
    $("#roller_button").slideUp();

    var randA=Math.floor(Math.random()*countA);
    var randB=Math.floor(Math.random()*countB);
    idA=dataStore.groupA[randA];
    idB=dataStore.groupB[randB];

    var rotA=(360*10)-((randA-1)*degA)-(degA/2);
    var rotB=(360*10)-((randB-1)*degB)-(degB/2);

    dataStore.assignments.push({a: idA, b: idB});
    dataStore.groupA=dataStore.groupA.filter((id) => id!=idA);
    if(dataStore.options.remFromB){
        dataStore.groupB=dataStore.groupB.filter((id) => id!=idB);
    }

    $("#rollerA").removeClass("roller__rotate");
    $("#rollerB").removeClass("roller__rotate");
    $("#rollerA").css("transform", "rotate("+rotA.toString()+"deg)");
    $("#rollerB").css("transform", "rotate("+rotB.toString()+"deg)");
    $("#rollerA").addClass("roller__rotate");
    $("#rollerB").addClass("roller__rotate");

    setTimeout(finishRoll, 11500);
    saveDataStore();
}

function finishRoll(){
    $("#resA").text(dataStore.entities[idA].val);
    $("#resB").text(dataStore.entities[idB].val);
    $("#roll_results").show();
}

function reroll(){
    if(dataStore.groupA.length){
        $("#roll_results").slideUp();
        setupRoll();
    }
    else{
        showResults();
    }
}

function showResults(){
    $("#editor").slideUp();
    $("#roller").slideUp();

    $.each(dataStore.assignments, (i, val) => {
        var labelA=dataStore.entities[val.a].val;
        var labelB=dataStore.entities[val.b].val;

        $("<tr><td>"+labelA+"</td><td>"+labelB+"</td></tr>").appendTo("#resultsTable");
    });

    $("#results").slideDown();
}

function reset(){
    localStorage.removeItem("dataStore");
    location.reload();
}