jrtechs
/
jrtechs-SteamFriendsGraph
mirror of https://github.com/jrtechs/SteamFriendsGraph.git
1
0
Fork 0
Code Issues 0 Releases 0 Wiki Activity
Browse Source

Updated the website to do friends of friends graphs and fix problems with firefox.

pull/8/head
jrtechs 6 years ago
parent
5d722183f7
commit
b4b87c42bb
5 changed files with 49 additions and 431 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -135
      website/commonGames.html
  2. +0
    -252
      website/friendsWithFriends.html
  3. +17
    -21
      website/graph.html
  4. +30
    -13
      website/graphs.html
  5. +2
    -10
      website/index.html

+ 0
- 135
website/commonGames.html View File

@ -1,135 +0,0 @@
<!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">
</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>
<div class="container">
<br><br><br>
<h1>TDLTR</h1>
</div>
<!-
┈┈╱▔▔▔▔▔╲┈┈┈HM┈HM
┈╱┈┈╱▔╲╲╲▏┈┈┈HMMM
╱┈┈╱━╱▔▔▔▔▔╲━╮┈┈
▏┈▕┃▕╱▔╲╱▔╲▕╮┃┈┈
▏┈▕╰━▏▊▕▕▋▕▕━╯┈┈
╲┈┈╲╱▔╭╮▔▔┳╲╲┈┈┈
┈╲┈┈▏╭━━━━╯▕▕┈┈┈
┈┈╲┈╲▂▂▂▂▂▂╱╱┈┈┈
┈┈┈┈▏┊┈┈┈┈┊┈┈┈╲┈
┈┈┈┈▏┊┈┈┈┈┊▕╲┈┈╲
┈╱▔╲▏┊┈┈┈┈┊▕╱▔╲▕
┈▏ ┈┈┈╰┈┈┈┈╯┈┈┈▕▕
┈╲┈┈┈╲┈┈┈┈╱┈┈┈╱┈╲
┈┈╲┈┈▕▔▔▔▔▏┈┈╱╲╲╲▏
┈╱▔┈┈▕┈┈┈┈▏┈┈▔╲▔▔
┈╲▂▂▂╱┈┈┈┈╲▂▂▂╱┈
If you are seeing this monkey 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>

+ 0
- 252
website/friendsWithFriends.html View File

@ -1,252 +0,0 @@
<!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 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>

website/friendsOfFriends.html → website/graph.html View File

@ -66,17 +66,9 @@
</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 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>
@ -134,15 +126,19 @@
}
});
getData = getUrlVars();
connection = new WebSocket('ws://jrtechs.student.rit.edu:4444');
connection.onopen = function ()
{
console.log('Connected!');
if(r != undefined)
console.log(r);
if(getData["id"] != undefined && getData["id"] != "")
{
connection.send("{id:'" + r.id + "', graph:" + r.graph + "}");
connection.send("{id:'" + getData["id"] + "', graph:" + getData["graph"] + "}");
}
else
{
@ -157,6 +153,15 @@
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)
@ -201,15 +206,6 @@
}
};
var ids = prompt("Enter the steam id to graph:", "76561198188400721");
if(ids != null)
{
r = new Object();
r.graph = 1;
r.id = ids;
}
</script>

website/commonFriends.html → website/graphs.html View File

@ -16,17 +16,9 @@
</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 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>
@ -43,9 +35,34 @@
<div class="container">
<br><br><br>
<h1>TDLTR</h1>
<br><br><br><br>
<div class="jumbotron">
<h1 class="text-center">Generate a graph</h1><br>
<form action="graph.html" method="get">
<div class="form-group row">
<label for="idID" class="col-sm-2 col-form-label">Steam ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="idID" placeholder="Steam ID" name="id">
</div>
</div>
<div class="form-group row">
<label for="graphId" class="col-sm-2 col-form-label">Graph Type</label>
<div class="col-sm-10">
<select class="custom-select mb-3" id="graphId" name="graph">
<option selected>Select Graph Type</option>
<option value="1">Friends of Friends</option>
<option value="2">Friends with Friends</option>
<option value="3">Most common friends of Friends</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Graph!</button>
</div>
</div>
</form>
</div>
</div>

+ 2
- 10
website/index.html View File

@ -16,17 +16,9 @@
</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 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>

Write Preview
Loading…
Cancel
Save