-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (94 loc) · 5.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>
<head>
<!--Set the tab's title-->
<title>Bridge Variables</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
.lightblue{
background-color: #10EBEB;
}
#serverActive{
font-size: 25px;
}
.inline{
display: inline;
}
</style>
<!--Add website icon (favicon)-->
<link rel="icon" href="bridgevar.github.io/favicon.ico" />
</head>
<body>
<a name="top" /> <!--So that #top takes you to the top -->
<top>
<nav>
<div class="nav-wrapper top lightblue">
<a href="#" class="brand-logo center">BridgeVar</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="#top">Top</a></li>
<li><a href="#Bridges">Bridges</a></li>
<li><a href="#GetABridge">Get A Bridge</a></li>
</ul>
</div>
</nav>
</top>
<main>
<div class="white text-black">
<div class="container">
Have you ever made two projects, only to continuously go between them and syncing up their cloud data (maybe highscores for different versions of the same game)? Well, a bridge system between projects has been suggested on the forums, but - unfortunately - not implemented yet. So, what's an innovative solution to this problem? BCVS! We have an innovative system of slots that allows you to safely use our system for your needs! It syncs up your Cloud Data automatically, and instantly<sup>If our servers are working and online at the time</sup>.
</div>
</div>
<div class="divider" id="Bridges" style="margin-top:10px; margin-bottom:10px;"></div>
<div class="container">
<center id="Bridges">
<!--So that #Bridges takes you to here -->
<h2 class="inline">Currently Active Bridges</h2><br/><span id="serverActive"><span style='color:orange'>Checking if there are any servers online...</span></span>
</center>
<table id="myTable" class="bordered striped">
</table>
<br>
</div>
</main>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script>
var projects;
function add(project1, project2, bridgeType) {
var table = document.getElementById("myTable");
var p2;
var p1;
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
$.getJSON( "https://scratch.mit.edu/api/v1/project/"+project1, function( data ) {
p1=data.title;
cell1.innerHTML = "<a href='https://scratch.mit.edu/projects/"+project1+"' title='Open this project in Scratch by clicking'><center><img src='https://cdn2.scratch.mit.edu/get_image/project/"+project1+"_100x80.png'><br><h4>"+p1+"</h4></center></a>";
});
cell2.innerHTML = (bridgeType)?"<h1 title='One-way bridge'>→</h1>":"<h1 title='Two-way bridge'>⟷</h1>"
$.getJSON( "https://scratch.mit.edu/api/v1/project/"+project2, function( data ) {
p2=data.title;
cell3.innerHTML = "<a href='https://scratch.mit.edu/projects/"+project2 + "' title='Open this project in Scratch by clicking'><center><img src='https://cdn2.scratch.mit.edu/get_image/project/"+project2+"_100x80.png'><br><h4>"+p2+"</h4></center></a>";
});
}
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "https://crossorigin.me/https://scratch.mit.edu/varserver/115628457", true);
xhttp.onreadystatechange = function() { if(xhttp.readyState==4) {
if(xhttp.status==200){document.getElementById("serverActive").innerHTML = (JSON.parse(xhttp.responseText).variables.map(function(inp){return ((new Date().getTime() - inp.value) < 60000);}).indexOf(true)!=-1)?"<span style='color:green'>There are active servers</span>":"<span style='color:red'>There are no active servers</span>"; /*As you can tell, I am a fan of one-liners :P */} else {document.getElementById("serverActive").innerHTML ="Unable to get server status. Try <a href='./'>reloading</a> the page?"}
}};
xhttp.send();
$.getJSON( "https://raw.githubusercontent.com/bridgevar/bridgevar-js/master/users.json", function( data ) {
projects=data.users;
for (i in projects) {
add(projects[i].firstProjectId,projects[i].secondProjectId, projects[i].oneway);
}
});
</script>
</body>
</html>