jrtechs
/
jrtechs-SteamFriendsGraph
mirror of https://github.com/jrtechs/SteamFriendsGraph.git

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Jrtechs Steam Friend Graph Project</title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <link rel="stylesheet" href="css/bootstrap.css" media="screen">    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="src/sigma.core.js"></script>    <script src="src/conrad.js"></script>    <script src="src/utils/sigma.utils.js"></script>    <script src="src/utils/sigma.polyfills.js"></script>    <script src="src/sigma.settings.js"></script>    <script src="src/classes/sigma.classes.dispatcher.js"></script>    <script src="src/classes/sigma.classes.configurable.js"></script>    <script src="src/classes/sigma.classes.graph.js"></script>    <script src="src/classes/sigma.classes.camera.js"></script>    <script src="src/classes/sigma.classes.quad.js"></script>    <script src="src/classes/sigma.classes.edgequad.js"></script>    <script src="src/captors/sigma.captors.mouse.js"></script>    <script src="src/captors/sigma.captors.touch.js"></script>    <script src="src/renderers/sigma.renderers.canvas.js"></script>    <script src="src/renderers/sigma.renderers.webgl.js"></script>    <script src="src/renderers/sigma.renderers.svg.js"></script>    <script src="src/renderers/sigma.renderers.def.js"></script>    <script src="src/renderers/webgl/sigma.webgl.nodes.def.js"></script>    <script src="src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>    <script src="src/renderers/webgl/sigma.webgl.edges.def.js"></script>    <script src="src/renderers/webgl/sigma.webgl.edges.fast.js"></script>    <script src="src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>    <script src="src/renderers/canvas/sigma.canvas.labels.def.js"></script>    <script src="src/renderers/canvas/sigma.canvas.hovers.def.js"></script>    <script src="src/renderers/canvas/sigma.canvas.nodes.def.js"></script>    <script src="src/renderers/canvas/sigma.canvas.edges.def.js"></script>    <script src="src/renderers/canvas/sigma.canvas.edges.curve.js"></script>    <script src="src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>    <script src="src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>    <script src="src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>    <script src="src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>    <script src="src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>    <script src="src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>    <script src="src/renderers/canvas/sigma.canvas.extremities.def.js"></script>    <script src="src/renderers/svg/sigma.svg.utils.js"></script>    <script src="src/renderers/svg/sigma.svg.nodes.def.js"></script>    <script src="src/renderers/svg/sigma.svg.edges.def.js"></script>    <script src="src/renderers/svg/sigma.svg.edges.curve.js"></script>    <script src="src/renderers/svg/sigma.svg.labels.def.js"></script>    <script src="src/renderers/svg/sigma.svg.hovers.def.js"></script>    <script src="src/middlewares/sigma.middlewares.rescale.js"></script>    <script src="src/middlewares/sigma.middlewares.copy.js"></script>    <script src="src/misc/sigma.misc.animation.js"></script>    <script src="src/misc/sigma.misc.bindEvents.js"></script>    <script src="src/misc/sigma.misc.bindDOMEvents.js"></script>    <script src="src/misc/sigma.misc.drawHovers.js"></script>


    <script src="src/plugins/sigma.plugins.neighborhoods/sigma.plugins.neighborhoods.js"></script>    <script src="src/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>    <script src="src/plugins/sigma.layout.forceAtlas2/worker.js"></script>    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head><body><div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">    <div class="container">        <a href="index.html" class="navbar-brand">Jrtechs Steam Graph Project</a>        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">            <span class="navbar-toggler-icon"></span>        </button>        <div class="collapse navbar-collapse" id="navbarResponsive">            <ul class="navbar-nav">                <li class="nav-item">                    <a class="nav-link" href="graphs.html">Graphs</a>                </li>                <li class="nav-item">                    <a class="nav-link" href="https://jrtechs.net">Blog</a>                </li>                <li class="nav-item">                    <a class="nav-link" href="https://jrtechs.me">Resume</a>                </li>                <li class="nav-item">                    <a class="nav-link" href="https://github.com/jrtechs">Github</a>                </li>            </ul>        </div>    </div></div>

<!-- END SIGMA IMPORTS --><div id="container">    <style>        #graph-container {            top: 0;            bottom: 0;            left: 0;            right: 0;            position: absolute;            /*background-color: #455660;*/        }        .sigma-node:hover {            fill: blue;        }        .muted {            fill-opacity: 0.1;            stroke-opacity: 0.1;            font-size: 0;        }    </style>    <div id="graph-container" style="width:100%; height:100%"></div></div>
<script>
    var s,        g = {            nodes: [],            edges: []        },        colors = [            // '#617db4',            // '#668f3c',            // '#c6583e',            // '#b956af',            // '#ac80a0',            // '#c2cae8',            // '#8380b6',            // '#738290'            '#4281a4',            '#5da9e9',            '#003f91',            '#b793ae',            '#6d326d'        ];
    // Instantiate sigma:    s = new sigma({        graph: g,        settings: {            enableHovering: false        }    });
    s.addRenderer({        id: 'main',        type: 'svg',        container: document.getElementById('graph-container'),        freeStyle: true    });
    getData = getUrlVars();
    connection = new WebSocket('ws://localhost:4444');
    connection.onopen = function ()    {        console.log('Connected!');        if(getData["id"] != undefined && getData["id"] != "")        {            connection.send("{id:'" + getData["id"] + "', graph:" + getData["graph"] + "}");        }        else        {            connection.close();        }
    };
    // Log errors    connection.onerror = function (error)    {        console.log('WebSocket Error ' + error);    };
    function getUrlVars()    {        var vars = {};        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {            vars[key] = value;        });        return vars;    }
    function addNodeToGraph(request)    {        if(s.graph.nodes(request.id) == undefined)        {            s.graph.addNode({                id: request.id,                label: request.name,                x: request.x,                y: request.y,                size: request.size,                color: colors[Math.floor(Math.random() * colors.length)]            });            s.refresh();        }    }

    function addEdgeToGraph(request)    {        s.graph.addEdge({            id: request.id,            source: request.p1,            target: request.p2,            size: 1        });        s.refresh();    }

    // Log messages from the server    connection.onmessage = function (e)    {        var request = JSON.parse(e.data);
        if(request.action == 1)        {            addNodeToGraph(request);        }        else if(request.action == 2)        {            addEdgeToGraph(request);        }        else if(request.action == 3)        {            s.startForceAtlas2({worker: true, barnesHutOptimize: false, scalingRatio: 0.5, slowDown: 5, gravity: 20});
            setTimeout(function ()            {                s.stopForceAtlas2();            }, 30000);        }    };


    //jquery stuff for hiding and displaying users when clicked    s.bind('clickNode doubleClickNode rightClickNode', function(e)    {        console.log(e.type, e);        $('.sigma-node, .sigma-edge').each(function()        {            mute(this);        });
        var neighbors = s.graph.neighborhood(e.data.node.id);        neighbors.nodes.forEach(function(node)        {            unmute($('[data-node-id="' + node.id + '"]')[0]);        });
        neighbors.edges.forEach(function(edge) {            unmute($('[data-edge-id="' + edge.id + '"]')[0]);        });    });
    // Binding silly interactions    function mute(node)    {        if (!~node.getAttribute('class').search(/muted/))            node.setAttributeNS(null, 'class', node.getAttribute('class') + ' muted');    }
    function unmute(node)    {        node.setAttributeNS(null, 'class', node.getAttribute('class').replace(/(\s|^)muted(\s|$)/g, '$2'));    }
    $('.sigma-node').click(function()    {
        console.log("click");        $('.sigma-node, .sigma-edge').each(function()        {            mute(this);        });
        // Unmuting neighbors        var neighbors = s.graph.neighborhood($(this).attr('data-node-id'));        neighbors.nodes.forEach(function(node)        {            unmute($('[data-node-id="' + node.id + '"]')[0]);        });
        neighbors.edges.forEach(function(edge)        {            unmute($('[data-edge-id="' + edge.id + '"]')[0]);        });    });
    s.bind('clickStage', function()    {        $('.sigma-node, .sigma-edge').each(function()        {            unmute(this);        });    });

</script>

<!-┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈┈╲┈┈▏╭━━━━╯▕▕┈┈┈┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
If you are seeing this monkey that means that you are interested in mycode. Yay!! If you are not here to hack me ... you should really considercontributing to some of my public projects on github.
https://github.com/jrtechs
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script></body></html>