Started working on a website for this web application

src/main/java/net/jrtechs/www/client/basic.html

@@ -1,241 +0,0 @@
-<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="src/jquery-2.1.1.min.js"></script>
-
-
-<!-- END SIGMA IMPORTS -->
-<div id="container">
-  <style>
-    #graph-container {
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      position: absolute;
-      background-color: #455660;
-    }
-    .sigma-edge {
-      stroke: #14191C;
-    }
-    .sigma-node {
-      fill: green;
-      stroke: #14191C;
-      stroke-width: 2px;
-    }
-    .sigma-node:hover {
-      fill: blue;
-    }
-    .muted {
-      fill-opacity: 0.1;
-      stroke-opacity: 0.1;
-    }
-  </style>
-  <div id="graph-container"></div>
-</div>
-
-<script src="src/worker.js"></script>
-<script src="src/supervisor.js"></script>
-
-<script>
-
-/**
- * This is a basic example on how to instantiate sigma. A random graph is
- * generated and stored in the "graph" variable, and then sigma is instantiated
- * directly with the graph.
- *
- * The simple instance of sigma is enough to make it render the graph on the on
- * the screen, since the graph is given directly to the constructor.
- *
- * var sigInstance = new sigma();
-
- // Adding node
- sigInstance.graph.addNode(params);
-
- // Adding edge
- sigInstance.graph.addEdge(params);
-
- // You can also use the read method if you already have a object of nodes and edges
- sigInst.graph.read({nodes: [...], edges: [...]});
-
- // Updating nodes
- sigInstance.graph.nodes().forEach(function(n) {
-  n.size = 34;
-  n.color = '#000';
-});
-
- // Replace 'nodes' by 'edges' for the edges
-
- // Don't forget to refresh your instance when done so the new graph is correctly displayed
- sigInst.refresh();
-
- // If you want to clear the graph, use the clear method
- sigInst.graph.clear(); // graph now empty
- *
- */
-var s,
-    g = {
-      nodes: [],
-      edges: []
-    };
-
-// Instantiate sigma:
-s = new sigma({
-  graph: g,
-  container: 'graph-container'
-});
-
-
-s.addRenderer({
-    id: 'main',
-    type: 'svg',
-    container: document.getElementById('graph-container'),
-    freeStyle: true
-});
-
-s.refresh();
-
-// 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() {
-
-    // Muting
-    $('.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);
-    });
-});
-
-
-
-
-var connection = new WebSocket('ws://127.0.0.1:4444');
-
-connection.onopen = function ()
-{
-    console.log('Connected!');
-    connection.send('Ping'); // Send the message 'Ping' to the server
-};
-
-// Log errors
-connection.onerror = function (error)
-{
-    console.log('WebSocket Error ' + error);
-};
-
-function addNodeToGraph(request)
-{
-    s.graph.addNode({
-        id: request.id,
-        label: request.name,
-        x: Math.random(),
-        y: Math.random(),
-        size: Math.random(),
-        color: '#666'
-    });
-    s.refresh();
-}
-
-
-function addEdgeToGraph(request)
-{
-    s.graph.addEdge({
-        id: request.id,
-        source: request.p1,
-        target: request.p2,
-        size: Math.random(),
-        color: '#000'
-    });
-    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);
-    }
-    console.log('Server: ' + e.data);
-};
-
-
-//s.startForceAtlas2({worker: true, barnesHutOptimize: false});
-</script>

src/main/java/net/jrtechs/www/client/bestFriends.html

@@ -0,0 +1,136 @@
+<!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 rel="stylesheet" href="css/custom.min.css">
+</head>
+<body>
+<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
+    <div class="container">
+        <a href="#" 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="bestFriends.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>
+
+
+<div class="container">
+    <br><br><br>
+
+    <h1>TDLTR</h1>
+
+</div>
+
+
+<!-
+┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
+┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
+╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
+▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
+▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
+╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
+┈╲┈┈▏╭━━━━╯▕▕┈┈┈
+┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
+┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
+┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
+┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
+┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
+┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
+┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
+┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
+┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
+
+If you are seeing this money that means that you are interested in my
+code. Yay!! If you are not here to hack me ... you should really consider
+contributing to some of my public projects on github.
+
+https://github.com/jrtechs
+
+-->
+
+<!-- Footer -->
+<footer class="text-center">
+    <div class="footer-above">
+        <div class="container">
+            <div class="row">
+                <div class="footer-col col-md-4">
+                    <h3>Location</h3>
+                    <p>Rochester Institute of Technology
+                        <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>Around the Web</h3>
+                    <ul class="list-inline">
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
+                                <i class="fa fa-fw fa-youtube"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://github.com/jrtechs">
+                                <i class="fa fa-fw fa-github"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="http://jrtechs.net">
+                                <i class="fa fa-fw fa-wordpress"></i>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>About This Website</h3>
+                    <p>Check out the source code for this website on my
+                        <a href="https://github.com/jrtechs">github</a>.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer-below">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> <script type="text/javascript">
+                        document.write(new Date().getFullYear());
+                    </script> Jrtechs</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+
+
+<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>

src/main/java/net/jrtechs/www/client/closestPath.html

@@ -0,0 +1,136 @@
+<!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 rel="stylesheet" href="css/custom.min.css">
+</head>
+<body>
+<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
+    <div class="container">
+        <a href="#" 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="bestFriends.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>
+
+
+<div class="container">
+    <br><br><br>
+
+    <h1>TDLTR</h1>
+
+</div>
+
+
+<!-
+┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
+┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
+╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
+▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
+▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
+╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
+┈╲┈┈▏╭━━━━╯▕▕┈┈┈
+┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
+┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
+┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
+┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
+┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
+┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
+┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
+┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
+┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
+
+If you are seeing this money that means that you are interested in my
+code. Yay!! If you are not here to hack me ... you should really consider
+contributing to some of my public projects on github.
+
+https://github.com/jrtechs
+
+-->
+
+<!-- Footer -->
+<footer class="text-center">
+    <div class="footer-above">
+        <div class="container">
+            <div class="row">
+                <div class="footer-col col-md-4">
+                    <h3>Location</h3>
+                    <p>Rochester Institute of Technology
+                        <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>Around the Web</h3>
+                    <ul class="list-inline">
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
+                                <i class="fa fa-fw fa-youtube"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://github.com/jrtechs">
+                                <i class="fa fa-fw fa-github"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="http://jrtechs.net">
+                                <i class="fa fa-fw fa-wordpress"></i>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>About This Website</h3>
+                    <p>Check out the source code for this website on my
+                        <a href="https://github.com/jrtechs">github</a>.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer-below">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> <script type="text/javascript">
+                        document.write(new Date().getFullYear());
+                    </script> Jrtechs</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+
+
+<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>

src/main/java/net/jrtechs/www/client/commonFriends.html

@@ -0,0 +1,136 @@
+<!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 rel="stylesheet" href="css/custom.min.css">
+</head>
+<body>
+<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
+    <div class="container">
+        <a href="#" 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="bestFriends.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>
+
+
+<div class="container">
+    <br><br><br>
+
+    <h1>TDLTR</h1>
+
+</div>
+
+
+<!-
+┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
+┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
+╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
+▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
+▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
+╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
+┈╲┈┈▏╭━━━━╯▕▕┈┈┈
+┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
+┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
+┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
+┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
+┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
+┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
+┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
+┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
+┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
+
+If you are seeing this money that means that you are interested in my
+code. Yay!! If you are not here to hack me ... you should really consider
+contributing to some of my public projects on github.
+
+https://github.com/jrtechs
+
+-->
+
+<!-- Footer -->
+<footer class="text-center">
+    <div class="footer-above">
+        <div class="container">
+            <div class="row">
+                <div class="footer-col col-md-4">
+                    <h3>Location</h3>
+                    <p>Rochester Institute of Technology
+                        <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>Around the Web</h3>
+                    <ul class="list-inline">
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
+                                <i class="fa fa-fw fa-youtube"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://github.com/jrtechs">
+                                <i class="fa fa-fw fa-github"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="http://jrtechs.net">
+                                <i class="fa fa-fw fa-wordpress"></i>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>About This Website</h3>
+                    <p>Check out the source code for this website on my
+                        <a href="https://github.com/jrtechs">github</a>.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer-below">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> <script type="text/javascript">
+                        document.write(new Date().getFullYear());
+                    </script> Jrtechs</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+
+
+<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>

src/main/java/net/jrtechs/www/client/commonGames.html

@@ -0,0 +1,136 @@
+<!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 rel="stylesheet" href="css/custom.min.css">
+</head>
+<body>
+<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
+    <div class="container">
+        <a href="#" 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="bestFriends.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>
+
+
+<div class="container">
+    <br><br><br>
+
+    <h1>TDLTR</h1>
+
+</div>
+
+
+<!-
+┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
+┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
+╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
+▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
+▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
+╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
+┈╲┈┈▏╭━━━━╯▕▕┈┈┈
+┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
+┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
+┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
+┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
+┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
+┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
+┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
+┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
+┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
+
+If you are seeing this money that means that you are interested in my
+code. Yay!! If you are not here to hack me ... you should really consider
+contributing to some of my public projects on github.
+
+https://github.com/jrtechs
+
+-->
+
+<!-- Footer -->
+<footer class="text-center">
+    <div class="footer-above">
+        <div class="container">
+            <div class="row">
+                <div class="footer-col col-md-4">
+                    <h3>Location</h3>
+                    <p>Rochester Institute of Technology
+                        <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>Around the Web</h3>
+                    <ul class="list-inline">
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
+                                <i class="fa fa-fw fa-youtube"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://github.com/jrtechs">
+                                <i class="fa fa-fw fa-github"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="http://jrtechs.net">
+                                <i class="fa fa-fw fa-wordpress"></i>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>About This Website</h3>
+                    <p>Check out the source code for this website on my
+                        <a href="https://github.com/jrtechs">github</a>.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer-below">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> <script type="text/javascript">
+                        document.write(new Date().getFullYear());
+                    </script> Jrtechs</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+
+
+<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>

src/main/java/net/jrtechs/www/client/friendsOfFriends.html

@@ -0,0 +1,229 @@
+<!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 rel="stylesheet" href="css/custom.min.css">
+
+
+    <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="#" 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="bestFriends.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,
+        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://127.0.0.1:4444');
+
+    connection.onopen = function ()
+    {
+        console.log('Connected!');
+        connection.send('Ping'); // Send the message 'Ping' to the server
+    };
+
+    // Log errors
+    connection.onerror = function (error)
+    {
+        console.log('WebSocket Error ' + error);
+    };
+
+    function addNodeToGraph(request)
+    {
+        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);
+        }
+        console.log('Server: ' + e.data);
+    };
+
+</script>
+
+
+<!-
+┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
+┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
+╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
+▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
+▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
+╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
+┈╲┈┈▏╭━━━━╯▕▕┈┈┈
+┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
+┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
+┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
+┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
+┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
+┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
+┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
+┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
+┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
+
+If you are seeing this money that means that you are interested in my
+code. Yay!! If you are not here to hack me ... you should really consider
+contributing 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>
+

src/main/java/net/jrtechs/www/client/images.html

@@ -1,290 +0,0 @@
-<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="src/jquery-2.1.1.min.js"></script>
-
-
-<!-- END SIGMA IMPORTS -->
-<div id="container">
-    <style>
-        #graph-container {
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            position: absolute;
-        }
-    </style>
-    <div id="graph-container"></div>
-</div>
-
-<script src="src/worker.js"></script>
-<script src="src/supervisor.js"></script>
-
-<script>
-
-    sigma.utils.pkg('sigma.canvas.nodes');
-    sigma.canvas.nodes.image = (function() {
-        var _cache = {},
-            _loading = {},
-            _callbacks = {};
-
-        // Return the renderer itself:
-        var renderer = function(node, context, settings) {
-            var args = arguments,
-                prefix = settings('prefix') || '',
-                size = node[prefix + 'size'],
-                color = node.color || settings('defaultNodeColor'),
-                url = node.url;
-
-            if (_cache[url]) {
-                context.save();
-
-                // Draw the clipping disc:
-                context.beginPath();
-                context.arc(
-                    node[prefix + 'x'],
-                    node[prefix + 'y'],
-                    node[prefix + 'size'],
-                    0,
-                    Math.PI * 2,
-                    true
-                );
-                context.closePath();
-                context.clip();
-
-                // Draw the image
-                context.drawImage(
-                    _cache[url],
-                    node[prefix + 'x'] - size,
-                    node[prefix + 'y'] - size,
-                    2 * size,
-                    2 * size
-                );
-
-                // Quit the "clipping mode":
-                context.restore();
-
-                // Draw the border:
-                context.beginPath();
-                context.arc(
-                    node[prefix + 'x'],
-                    node[prefix + 'y'],
-                    node[prefix + 'size'],
-                    0,
-                    Math.PI * 2,
-                    true
-                );
-                context.lineWidth = size / 5;
-                context.strokeStyle = node.color || settings('defaultNodeColor');
-                context.stroke();
-            } else {
-                sigma.canvas.nodes.image.cache(url);
-                sigma.canvas.nodes.def.apply(
-                    sigma.canvas.nodes,
-                    args
-                );
-            }
-        };
-
-        // Let's add a public method to cache images, to make it possible to
-        // preload images before the initial rendering:
-        renderer.cache = function(url, callback) {
-            if (callback)
-                _callbacks[url] = callback;
-
-            if (_loading[url])
-                return;
-
-            var img = new Image();
-
-            img.onload = function() {
-                _loading[url] = false;
-                _cache[url] = img;
-
-                if (_callbacks[url]) {
-                    _callbacks[url].call(this, img);
-                    delete _callbacks[url];
-                }
-            };
-
-            _loading[url] = true;
-            img.src = url;
-        };
-
-        return renderer;
-    })();
-
-    // Now that's the renderer has been implemented, let's generate a graph
-    // to render:
-    var i,
-        s,
-        img,
-        N = 50,
-        E = 300,
-        g = {
-            nodes: [],
-            edges: []
-        },
-        urls = [
-            'img/img1.png',
-            'img/img2.png',
-            'img/img3.png',
-            'img/img4.png'
-        ],
-        loaded = 0,
-        colors = [
-            '#617db4',
-            '#668f3c',
-            '#c6583e',
-            '#b956af'
-        ];
-
-    // // Generate a random graph, with ~30% nodes having the type "image":
-    // for (i = 0; i < N; i++) {
-    //     img = Math.random() >= 0.7;
-    //     g.nodes.push({
-    //         id: 'n' + i,
-    //         label: 'Node ' + i,
-    //         type: img ? 'image' : 'def',
-    //         url: img ? urls[Math.floor(Math.random() * urls.length)] : null,
-    //         x: Math.random(),
-    //         y: Math.random(),
-    //         size: Math.random(),
-    //         color: colors[Math.floor(Math.random() * colors.length)]
-    //     });
-    // }
-    //
-    // for (i = 0; i < E; i++)
-    //     g.edges.push({
-    //         id: 'e' + i,
-    //         source: 'n' + (Math.random() * N | 0),
-    //         target: 'n' + (Math.random() * N | 0),
-    //         size: Math.random()
-    //     });
-
-    // Then, wait for all images to be loaded before instanciating sigma:
-    s = new sigma({
-        graph: g,
-        renderer: {
-            // IMPORTANT:
-            // This works only with the canvas renderer, so the
-            // renderer type set as "canvas" is necessary here.
-            container: document.getElementById('graph-container'),
-            type: 'canvas'
-        },
-        settings: {
-            minNodeSize: 8,
-            maxNodeSize: 16,
-        }
-    });
-
-
-    connection = new WebSocket('ws://127.0.0.1:4444');
-
-    connection.onopen = function ()
-    {
-        console.log('Connected!');
-        connection.send('Ping'); // Send the message 'Ping' to the server
-    };
-
-    // Log errors
-    connection.onerror = function (error)
-    {
-        console.log('WebSocket Error ' + error);
-    };
-
-    function addNodeToGraph(request)
-    {
-        s.graph.addNode({
-            id: request.id,
-            label: request.name,
-            type: img ? 'image' : 'def',
-            url: request.url,
-            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);
-        }
-        console.log('Server: ' + e.data);
-    };
-
-
-    //s.startForceAtlas2({worker: true, barnesHutOptimize: false});
-</script>

src/main/java/net/jrtechs/www/client/index.html

@@ -1,26 +1,136 @@
-<!doctype html>
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
-    <script>
-        var connection = new WebSocket('ws://127.0.0.1:4444');
-
-        connection.onopen = function () {
-            console.log('Connected!');
-            connection.send('Ping'); // Send the message 'Ping' to the server
-        };
-
-        // Log errors
-        connection.onerror = function (error) {
-            console.log('WebSocket Error ' + error);
-        };
-
-        // Log messages from the server
-        connection.onmessage = function (e) {
-            console.log('Server: ' + e.data);
-        };
-    </script>
+    <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 rel="stylesheet" href="css/custom.min.css">
 </head>
 <body>
-<ul id='messages'></ul>
+<div class="navbar navbar-expand-lg fixed-top navbar-dark bg-primary">
+    <div class="container">
+        <a href="#" 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="bestFriends.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>
+
+
+<div class="container">
+<br><br><br>
+
+    <h1>TDLTR</h1>
+
+</div>
+
+
+<!-
+┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
+┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
+╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
+▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
+▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
+╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
+┈╲┈┈▏╭━━━━╯▕▕┈┈┈
+┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
+┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
+┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
+┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
+┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
+┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
+┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
+┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
+┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
+
+If you are seeing this money that means that you are interested in my
+code. Yay!! If you are not here to hack me ... you should really consider
+contributing to some of my public projects on github.
+
+https://github.com/jrtechs
+
+-->
+
+<!-- Footer -->
+<footer class="text-center">
+    <div class="footer-above">
+        <div class="container">
+            <div class="row">
+                <div class="footer-col col-md-4">
+                    <h3>Location</h3>
+                    <p>Rochester Institute of Technology
+                        <br>1 Lomb Memorial Dr, Rochester, NY 14623</p>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>Around the Web</h3>
+                    <ul class="list-inline">
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://www.youtube.com/c/JrtechsNet">
+                                <i class="fa fa-fw fa-youtube"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="https://github.com/jrtechs">
+                                <i class="fa fa-fw fa-github"></i>
+                            </a>
+                        </li>
+                        <li class="list-inline-item">
+                            <a class="btn-social btn-outline" href="http://jrtechs.net">
+                                <i class="fa fa-fw fa-wordpress"></i>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="footer-col col-md-4">
+                    <h3>About This Website</h3>
+                    <p>Check out the source code for this website on my
+                        <a href="https://github.com/jrtechs">github</a>.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="footer-below">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12">
+                    <p class="m-0 text-center text-white"><a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC-BY-SA 4.0</a> <script type="text/javascript">
+                    document.write(new Date().getFullYear());
+                </script> Jrtechs</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</footer>
+
+
+<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>
+</html>

src/main/java/net/jrtechs/www/server/Client.java

@@ -41,7 +41,7 @@ public class Client extends Thread
         this.graph = new SteamGraph();
 
         //temp stuff
-        this.baseId = "76561198086854442";
+        this.baseId = "76561198176504246";
         this.debth = 1;
     }