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">

    <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>

</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 dropdown">                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Graphs <span class="caret"></span></a>                    <div class="dropdown-menu" aria-labelledby="themes">                        <a class="dropdown-item" href="friendsOfFriends.html">Friends of Friends</a>                        <a class="dropdown-item" href="commonFriends.html">Common Friends</a>                        <a class="dropdown-item" href="closestPath.html">Closest Path</a>                        <a class="dropdown-item" href="commonGames.html">Common Games</a>                        <a class="dropdown-item" href="friendsWithFriends.html">Best Friends</a>                    </div>                </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: 5%;            bottom: 0;            left: 0;            right: 0;            z-index: 0;            position: absolute;        }    </style>    <div id="graph-container" style="width:100%; height:100%"></div></div>
<script>
    var s,        r,        g = {            nodes: [],            edges: []        },        colors = [            '#617db4',            '#668f3c',            '#c6583e',            '#b956af'        ];
    s = new sigma({        graph: g,        renderer: {            container: document.getElementById('graph-container'),            type: 'canvas'        },        settings: {            minNodeSize: 8,            maxNodeSize: 16,        }    });

    connection = new WebSocket('ws://jrtechs.student.rit.edu:4444');
    connection.onopen = function ()    {        console.log('Connected!');        if(r != undefined)        {            connection.send("{id:'" + r.id + "', graph:" + r.graph + "}");        }        else        {            connection.close();        }
    };
    // Log errors    connection.onerror = function (error)    {        console.log('WebSocket Error ' + error);    };
    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: Math.random(),                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: Math.random(),        });        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);        }    };
    $(document).ready(function() {
        var ids = prompt("Enter the steam id to graph:", "76561198188400721");
        if(ids != null)        {            r = new Object();            r.graph = 2;            r.id = ids;        }    });

</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://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><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>