Home Explore Help
Register Sign In
thallada
/
panic-shack
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 19 Releases 0 Wiki
Browse Source

Add site to git repo

Tyler Hallada 6 years ago
commit
66612c01ec
7 changed files with 224 additions and 0 deletions
Split View Show Diff Stats
  1. 2 0
      .gitignore
  2. 79 0
      css/styles.css
  3. BIN
      img/bridge.jpg
  4. BIN
      img/map.jpg
  5. 93 0
      index.html
  6. 21 0
      js/getLog.js
  7. 29 0
      js/getStatus.js

+ 2 - 0
.gitignore
View File 

@@ -0,0 +1,2 @@
1 
+server.log
2 
+map

+ 79 - 0
css/styles.css
View File 

@@ -0,0 +1,79 @@
1 
+body {
2 
+  max-width: 650px;
3 
+  margin: 0 auto;
4 
+  padding: 10px;
5 
+  background-color: floralwhite;
6 
+  color: #1B1B1B;
7 
+  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
8 
+}
9 
+
10 
+img {
11 
+  width: 98%;
12 
+  max-width: 500px;
13 
+  margin: 0 auto;
14 
+  display: block;
15 
+  border: 1px solid grey;
16 
+  border-radius: 3px;
17 
+}
18 
+
19 
+ol li code {
20 
+  font-size: large;
21 
+}
22 
+
23 
+.label {
24 
+  font-weight: bold;
25 
+}
26 
+
27 
+.small-text {
28 
+  font-size: small;
29 
+}
30 
+
31 
+.monospace {
32 
+  font-family: monospace;
33 
+}
34 
+
35 
+.inline {
36 
+  display: inline-block;
37 
+}
38 
+
39 
+#server-status {
40 
+  display: none;
41 
+  padding: 10px;
42 
+  margin: 10px;
43 
+  border: 1px solid darkgrey;
44 
+  max-width: 600px;
45 
+}
46 
+
47 
+#server-status-error {
48 
+  padding: 10px;
49 
+  margin: 10px;
50 
+  border: 1px solid darkgrey;
51 
+  max-width: 600px;
52 
+}
53 
+
54 
+#status-online {
55 
+  display: none;
56 
+  color: darkgreen;
57 
+}
58 
+
59 
+#status-offline {
60 
+  color: darkred;
61 
+}
62 
+
63 
+#server-status div {
64 
+  margin-bottom: 2px;
65 
+}
66 
+
67 
+#map-link {
68 
+  display: block;
69 
+  text-align: center;
70 
+}
71 
+
72 
+#server-log {
73 
+  padding: 10px;
74 
+  margin: 10px;
75 
+  border: 1px solid darkgrey;
76 
+  max-width: 1000px;
77 
+  max-height: 600px;
78 
+  overflow: scroll;
79 
+}

BIN
img/bridge.jpg
View File


BIN
img/map.jpg
View File


+ 93 - 0
index.html
View File 

@@ -0,0 +1,93 @@
1 
+<html lang="en">
2 
+    <head>
3 
+        <title>Panic Shack - Minecraft Server</title>
4 
+        <link rel="shortcut icon" type="image/png" href="/favicon.png"/>
5 
+        <link rel="stylesheet" type="text/css" href="css/styles.css"/>
6 
+        <meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1">
7 
+        <meta charset="UTF-8">
8 
+    </head>
9 
+    <body>
10 
+        <h1>Panic Shack - Minecraft Server</h1>
11 
+        <img src="img/bridge.jpg" alt="Screenshot from the Minecraft server of a bridge over a lake in a jungle biome">
12 
+
13 
+        <h2>Server Status</h2>
14 
+        <div id="server-status-error">
15 
+          Loading...
16 
+        </div>
17 
+        <div id="server-status">
18 
+          <div class="status">
19 
+            <span class="label">Status:&nbsp;<span>
20 
+            <span id="status-online">Online</span>
21 
+            <span id="status-offline">Offline</span>
22 
+          </div>
23 
+          <div class="motd">
24 
+            <span id="status-motd"></span>
25 
+          </div>
26 
+          <div class="players">
27 
+            <span class="label">Players:&nbsp;</span>
28 
+            <span id="status-players-now"></span>/<span id="status-players-max"></span>
29 
+          </div>
30 
+          <div class="connect-info">
31 
+            <div class="inline">
32 
+              <span class="label">Host:&nbsp;</span>
33 
+              <span id="status-server-host" class="monospace">panic-shack.hallada.net</span>&nbsp;
34 
+            </div>
35 
+            <div class="inline">
36 
+              <span class="label">Port:&nbsp;</span>
37 
+              <span id="status-server-port" class="monospace">25565</span>
38 
+            </div>
39 
+          </div>
40 
+          <div class="server">
41 
+            <div class="inline">
42 
+              <span class="label">Version:&nbsp;</span>
43 
+              <span id="status-server-name" class="monospace"></span>&nbsp;
44 
+            </div>
45 
+            <div class="inline">
46 
+              <span class="label">Protocol:&nbsp;</span>
47 
+              <span id="status-server-protocol" class="monospace"></span>
48 
+            </div>
49 
+          </div>
50 
+          <div class="last-online">
51 
+            <span class="label">Last Online:&nbsp;</span>
52 
+            <span id="status-last-online"></span>
53 
+          </div>
54 
+          <div class="last-updated">
55 
+            <span class="label">Last Updated:&nbsp;</span>
56 
+            <span id="status-last-updated"></span>
57 
+          </div>
58 
+        </div>
59 
+
60 
+        <h2>How to Connect</h2>
61 
+        <ol>
62 
+          <li>Launch Minecraft (version <span id="info-server-name">1.12.2</span>)</li>
63 
+          <li>Go to "Multiplayer"</li>
64 
+          <li>Click "Add Server"</li>
65 
+          <li>Enter <code>Panic Shack</code> for the "Server Name"</li>
66 
+          <li>Enter <code>panic-shack.hallada.net</code> for the "Server Address"</li>
67 
+          <li>Click "Done"</li>
68 
+          <li>You should now see the server in the list and be able to join it!</li>
69 
+        </ol>
70 
+
71 
+        <h2>Server Map</h2>
72 
+        <a href="map/" id="map-link">
73 
+          <img src="img/map.jpg" alt="Screenshot from the in-browser map of the server centered on the lake and bridge">
74 
+          View the server map
75 
+        </a>
76 
+        <p class="small-text">
77 
+          Map is updated every Sunday around 3 am EST.
78 
+        </p>
79 
+
80 
+        <h2>Server Log</h2>
81 
+        <pre id="server-log"></pre>
82 
+        <label>
83 
+          <input type="checkbox" id="auto-scroll" checked>
84 
+          Automatically scroll to bottom on log refresh
85 
+        </label>
86 
+        <p class="small-text">Updated every 10 seconds.</p>
87 
+
88 
+				<script src="https://mcapi.us/scripts/minecraft.js"></script>
89 
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
90 
+        <script src="js/getStatus.js"></script>
91 
+        <script src="js/getLog.js"></script>
92 
+    </body>
93 
+</html>

+ 21 - 0
js/getLog.js
View File 

@@ -0,0 +1,21 @@
1 
+var output = document.getElementById('server-log');
2 
+
3 
+function reqListener() {
4 
+  var autoScroll = document.getElementById('auto-scroll');
5 
+  output.textContent = xhr.responseText;
6 
+  if (autoScroll.checked) {
7 
+    output.scrollTop = output.scrollHeight;
8 
+  }
9 
+}
10 
+
11 
+var xhr = new XMLHttpRequest();
12 
+xhr.addEventListener('load', reqListener);
13 
+xhr.open('GET', '/server.log');
14 
+xhr.send();
15 
+
16 
+setInterval(function() {
17 
+  xhr = new XMLHttpRequest();
18 
+  xhr.addEventListener('load', reqListener);
19 
+  xhr.open('GET', '/server.log');
20 
+  xhr.send();
21 
+}, 10000);

+ 29 - 0
js/getStatus.js
View File 

@@ -0,0 +1,29 @@
1 
+MinecraftAPI.getServerStatus('panic-shack.hallada.net', {
2 
+  port: 25565
3 
+}, function (err, status) {
4 
+  var serverError = document.getElementById('server-status-error');
5 
+  var serverStatus = document.getElementById('server-status');
6 
+
7 
+  if (err) {
8 
+    serverError.style.color = 'red';
9 
+    return serverError.textContent = 'Error loading server status';
10 
+  } else {
11 
+    serverError.style.display = 'none';
12 
+  }
13 
+
14 
+  serverStatus.style.display = 'block';
15 
+
16 
+  if (status.online == true) {
17 
+    document.getElementById('status-online').style.display = 'inline-block';
18 
+    document.getElementById('status-offline').style.display = 'none';
19 
+  }
20 
+
21 
+  document.getElementById('status-motd').textContent = status.motd;
22 
+  document.getElementById('status-players-now').textContent = status.players.now;
23 
+  document.getElementById('status-players-max').textContent = status.players.max;
24 
+  document.getElementById('status-server-name').textContent = status.server.name;
25 
+  document.getElementById('info-server-name').textContent = status.server.name;
26 
+  document.getElementById('status-server-protocol').textContent = status.server.protocol;
27 
+  document.getElementById('status-last-online').textContent = moment.unix(parseInt(status.last_online, 10)).fromNow();
28 
+  document.getElementById('status-last-updated').textContent = moment.unix(parseInt(status.last_updated, 10)).fromNow();
29 
+});