thallada/panic-shack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add site to git repo

Browse Source
This commit is contained in:
Tyler Hallada 2017-11-30 16:07:27 -05:00
commit 66612c01ec
7 changed files with 224 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored Normal file
View File

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

79
css/styles.css Normal file
View File

@ -0,0 +1,79 @@
body {
max-width: 650px;
margin: 0 auto;
padding: 10px;
background-color: floralwhite;
color: #1B1B1B;
font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}
img {
width: 98%;
max-width: 500px;
margin: 0 auto;
display: block;
border: 1px solid grey;
border-radius: 3px;
}
ol li code {
font-size: large;
}
.label {
font-weight: bold;
}
.small-text {
font-size: small;
}
.monospace {
font-family: monospace;
}
.inline {
display: inline-block;
}
#server-status {
display: none;
padding: 10px;
margin: 10px;
border: 1px solid darkgrey;
max-width: 600px;
}
#server-status-error {
padding: 10px;
margin: 10px;
border: 1px solid darkgrey;
max-width: 600px;
}
#status-online {
display: none;
color: darkgreen;
}
#status-offline {
color: darkred;
}
#server-status div {
margin-bottom: 2px;
}
#map-link {
display: block;
text-align: center;
}
#server-log {
padding: 10px;
margin: 10px;
border: 1px solid darkgrey;
max-width: 1000px;
max-height: 600px;
overflow: scroll;
}

BIN
img/bridge.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 203 KiB

BIN
img/map.jpg Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 76 KiB

93
index.html Normal file
View File

@ -0,0 +1,93 @@
<html lang="en">
<head>
<title>Panic Shack - Minecraft Server</title>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1">
<meta charset="UTF-8">
</head>
<body>
<h1>Panic Shack - Minecraft Server</h1>
<img src="img/bridge.jpg" alt="Screenshot from the Minecraft server of a bridge over a lake in a jungle biome">
<h2>Server Status</h2>
<div id="server-status-error">
Loading...
</div>
<div id="server-status">
<div class="status">
<span class="label">Status:&nbsp;<span>
<span id="status-online">Online</span>
<span id="status-offline">Offline</span>
</div>
<div class="motd">
<span id="status-motd"></span>
</div>
<div class="players">
<span class="label">Players:&nbsp;</span>
<span id="status-players-now"></span>/<span id="status-players-max"></span>
</div>
<div class="connect-info">
<div class="inline">
<span class="label">Host:&nbsp;</span>
<span id="status-server-host" class="monospace">panic-shack.hallada.net</span>&nbsp;
</div>
<div class="inline">
<span class="label">Port:&nbsp;</span>
<span id="status-server-port" class="monospace">25565</span>
</div>
</div>
<div class="server">
<div class="inline">
<span class="label">Version:&nbsp;</span>
<span id="status-server-name" class="monospace"></span>&nbsp;
</div>
<div class="inline">
<span class="label">Protocol:&nbsp;</span>
<span id="status-server-protocol" class="monospace"></span>
</div>
</div>
<div class="last-online">
<span class="label">Last Online:&nbsp;</span>
<span id="status-last-online"></span>
</div>
<div class="last-updated">
<span class="label">Last Updated:&nbsp;</span>
<span id="status-last-updated"></span>
</div>
</div>
<h2>How to Connect</h2>
<ol>
<li>Launch Minecraft (version <span id="info-server-name">1.12.2</span>)</li>
<li>Go to "Multiplayer"</li>
<li>Click "Add Server"</li>
<li>Enter <code>Panic Shack</code> for the "Server Name"</li>
<li>Enter <code>panic-shack.hallada.net</code> for the "Server Address"</li>
<li>Click "Done"</li>
<li>You should now see the server in the list and be able to join it!</li>
</ol>
<h2>Server Map</h2>
<a href="map/" id="map-link">
<img src="img/map.jpg" alt="Screenshot from the in-browser map of the server centered on the lake and bridge">
View the server map
</a>
<p class="small-text">
Map is updated every Sunday around 3 am EST.
</p>
<h2>Server Log</h2>
<pre id="server-log"></pre>
<label>
<input type="checkbox" id="auto-scroll" checked>
Automatically scroll to bottom on log refresh
</label>
<p class="small-text">Updated every 10 seconds.</p>
<script src="https://mcapi.us/scripts/minecraft.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.2/moment.min.js"></script>
<script src="js/getStatus.js"></script>
<script src="js/getLog.js"></script>
</body>
</html>

21
js/getLog.js Normal file
View File

@ -0,0 +1,21 @@
var output = document.getElementById('server-log');
function reqListener() {
var autoScroll = document.getElementById('auto-scroll');
output.textContent = xhr.responseText;
if (autoScroll.checked) {
output.scrollTop = output.scrollHeight;
}
}
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', reqListener);
xhr.open('GET', '/server.log');
xhr.send();
setInterval(function() {
xhr = new XMLHttpRequest();
xhr.addEventListener('load', reqListener);
xhr.open('GET', '/server.log');
xhr.send();
}, 10000);

29
js/getStatus.js Normal file
View File

@ -0,0 +1,29 @@
MinecraftAPI.getServerStatus('panic-shack.hallada.net', {
port: 25565
}, function (err, status) {
var serverError = document.getElementById('server-status-error');
var serverStatus = document.getElementById('server-status');
if (err) {
serverError.style.color = 'red';
return serverError.textContent = 'Error loading server status';
} else {
serverError.style.display = 'none';
}
serverStatus.style.display = 'block';
if (status.online == true) {
document.getElementById('status-online').style.display = 'inline-block';
document.getElementById('status-offline').style.display = 'none';
}
document.getElementById('status-motd').textContent = status.motd;
document.getElementById('status-players-now').textContent = status.players.now;
document.getElementById('status-players-max').textContent = status.players.max;
document.getElementById('status-server-name').textContent = status.server.name;
document.getElementById('info-server-name').textContent = status.server.name;
document.getElementById('status-server-protocol').textContent = status.server.protocol;
document.getElementById('status-last-online').textContent = moment.unix(parseInt(status.last_online, 10)).fromNow();
document.getElementById('status-last-updated').textContent = moment.unix(parseInt(status.last_updated, 10)).fromNow();
});