add the damn thing
This commit is contained in:
parent
0bba9f885d
commit
65cbda1b2e
GPG key ID:
1398543B9746192C
6 changed files with 464 additions and 0 deletions
25
docs/chat.php
Normal file
25
docs/chat.php
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
<?php
|
||||||
|
require(__DIR__ . "/../libs/header.php");
|
||||||
|
|
||||||
|
page_header();
|
||||||
|
$msgs = json_decode(file_get_contents('https://mcp.dervland.net/messages'),true);
|
||||||
|
foreach ($msgs as $msg) {
|
||||||
|
?>
|
||||||
|
<div class="comment">
|
||||||
|
<div class="avatar">
|
||||||
|
<div>
|
||||||
|
<div><b>
|
||||||
|
<?php echo htmlspecialchars($msg['username']); ?>
|
||||||
|
</b></div>
|
||||||
|
<div><b>
|
||||||
|
<?php echo date(DATE_RFC2822, $msg['date'] * 0.001); ?>
|
||||||
|
</b></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<?php echo htmlspecialchars($msg['content']); ?>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
|
||||||
|
page_footer();
|
||||||
|
?>
|
||||||
232
docs/css/main.css
Normal file
232
docs/css/main.css
Normal file
|
|
@ -0,0 +1,232 @@
|
||||||
|
:root {
|
||||||
|
--black: rgb(16, 16, 16);
|
||||||
|
--gray: rgb(38, 38, 38);
|
||||||
|
--white: rgb(240, 240, 240);
|
||||||
|
--primary-dark: rgb(230, 128, 78);
|
||||||
|
--primary-light: rgb(255, 230, 200);
|
||||||
|
--elem-width: min(800px, 90vw);
|
||||||
|
--elem-height: 300px;
|
||||||
|
--border-radius: 15px;
|
||||||
|
--font: system-ui, sans-serif;
|
||||||
|
color: var(--white);
|
||||||
|
background: var(--black);
|
||||||
|
font-family: var(--font) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
max-width: 500px;
|
||||||
|
max-height: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner,
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
overflow-x: hidden;
|
||||||
|
margin-top: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
white-space: pre-wrap;
|
||||||
|
font-family: var(--font);
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: calc(-1*var(--elem-height))
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-background,
|
||||||
|
.banner-content {
|
||||||
|
height: var(--elem-height);
|
||||||
|
overflow-y: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-background {
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
background-color: var(--gray);
|
||||||
|
opacity: 30%;
|
||||||
|
object-fit: cover
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-content {
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
top: calc(-1*var(--elem-height))
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner pre {
|
||||||
|
width: calc(var(--elem-width) - 40px);
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner,
|
||||||
|
.banner-background,
|
||||||
|
.content,
|
||||||
|
.comment {
|
||||||
|
width: var(--elem-width)
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar b {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin-right: 15px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form {
|
||||||
|
width: calc(var(--elem-width) - 1rem);
|
||||||
|
grid-template-columns: .51fr 1fr;
|
||||||
|
display: grid
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-key {
|
||||||
|
margin-right: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button,
|
||||||
|
.form-input,
|
||||||
|
.form,
|
||||||
|
.comment {
|
||||||
|
border: solid var(--gray) 3px;
|
||||||
|
background: var(--black);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
color: var(--white);
|
||||||
|
padding: .5rem;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
margin-top: .5rem;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button,
|
||||||
|
.form-heading,
|
||||||
|
.form-message {
|
||||||
|
grid-column: span 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-button {
|
||||||
|
font-weight: 700;
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--primary-dark);
|
||||||
|
border-color: var(--primary-light);
|
||||||
|
margin: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
z-index: 5;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
background: var(--gray);
|
||||||
|
color: var(--white);
|
||||||
|
padding: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
width: var(--elem-width);
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-link,
|
||||||
|
.link {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--white)
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-link {
|
||||||
|
text-decoration: none;
|
||||||
|
padding-left: .5em;
|
||||||
|
margin-left: .5em;
|
||||||
|
border-left: solid var(--white) 2px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-img {
|
||||||
|
border-left: none;
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
height: 2.5em;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.form {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.form-button, .form-heading, .form-message {
|
||||||
|
grid-column: span 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
width: var(--elem-width);
|
||||||
|
white-space: pre-wrap;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
width: 480px;
|
||||||
|
height: 360px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header a {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header a, .clickie {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header a.leave {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickie {
|
||||||
|
width: min-content;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map {
|
||||||
|
width: var(--elem-width);
|
||||||
|
background: var(--gray);
|
||||||
|
image-rendering: pixelated;
|
||||||
|
image-rendering: crisp-edges;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coords {
|
||||||
|
position: relative;
|
||||||
|
top: calc(var(--elem-width) / -3);
|
||||||
|
left: calc(var(--elem-width) / 6);
|
||||||
|
font-size: 16px;
|
||||||
|
background: rgba(0,0,0,0.5);
|
||||||
|
padding: 10px;
|
||||||
|
width: 250px;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: -50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
<?php
|
||||||
|
require(__DIR__ . "/../libs/header.php");
|
||||||
|
|
||||||
|
page_header();
|
||||||
|
{ ?>
|
||||||
|
<div class="banner"><img class="banner-background" src="/thingie.png">
|
||||||
|
<div class="banner-content">
|
||||||
|
<h1>BiglyChat</h1>
|
||||||
|
<p><b class='important'>Astrophis</b> is a civilization roleplay. Lead your nation's destiny throughout the
|
||||||
|
Minecraft world.</p>
|
||||||
|
<p>
|
||||||
|
Unlike similar servers, the server doesn't use traditional claim plugins, and is not a short-term challenge.
|
||||||
|
Everything is crafted by the players and their interactions, under the <a class='link' href='#rules'>rules</a>.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<a class="form-button" href="https://nbg.dervland.net/">Community</a>
|
||||||
|
<a class="form-button" href="/chat.php">Chat</a>
|
||||||
|
<a class="form-button" onclick="copy()" href="#">Server Address</a>
|
||||||
|
<a class="form-button" href="https://dervland.net/">More Projects</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1>Nations</h1>
|
||||||
|
<p><b>Pan camera:</b> [WASD/Mouse], <b>Fast motion:</b> [Q], <b>Zoom:</b> [Mouse wheel]</p>
|
||||||
|
<canvas class='map' width='1200' height='800'></canvas>
|
||||||
|
<pre class='coords'></pre>
|
||||||
|
<div class='comment'>
|
||||||
|
<h1 id='rules'>Rules</h1>
|
||||||
|
<ol>
|
||||||
|
<li>Don't harrass others.</li>
|
||||||
|
<li>Don't use glitches.</li>
|
||||||
|
<li>Don't use utility mods or hacks. Exceptions: shaders, minimap (no caves), ViaVersion.</li>
|
||||||
|
<li>Land that belongs to someone else can't be looted, griefed, or built on, unless the land is vastly empty
|
||||||
|
or inactive for 5+ days (squatting).</li>
|
||||||
|
<li>Claims of excessive size will not be mapped.</li>
|
||||||
|
<li>The first nation to claim a land in Discord, and anyone squatting there, owns it.</li>
|
||||||
|
<li>Wars must be declared in Discord to be valid.</li>
|
||||||
|
<li>In a war, each nation starts with 3 points per citizen, 3 points per settlement. These are deducted by
|
||||||
|
player death.</li>
|
||||||
|
<li>To end a war, a nation must have 0 points, have surrendered, or have withdrawn.</li>
|
||||||
|
<li>Not all points need to be taken to partially annex a nation.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
page_footer();
|
||||||
|
?>
|
||||||
142
docs/map.js
Normal file
142
docs/map.js
Normal file
|
|
@ -0,0 +1,142 @@
|
||||||
|
const mapWidth = 16000;
|
||||||
|
const mapHeight = 16000;
|
||||||
|
|
||||||
|
let assets = [
|
||||||
|
'../thingie.png',
|
||||||
|
'../thingie.png' // i swear this is temporary
|
||||||
|
]
|
||||||
|
|
||||||
|
let imgA = [];
|
||||||
|
|
||||||
|
let map = document.querySelector('.map');
|
||||||
|
let ctx = map.getContext('2d');
|
||||||
|
|
||||||
|
let coords = document.querySelector('.coords');
|
||||||
|
|
||||||
|
let pos = [];
|
||||||
|
let mpos = [0, 0];
|
||||||
|
let keys = [];
|
||||||
|
let vel = [0, 0];
|
||||||
|
let center = [0, 0];
|
||||||
|
let lastPos = [0, 0];
|
||||||
|
let isMouse = false;
|
||||||
|
let zoom = 5;
|
||||||
|
let timer = 0;
|
||||||
|
|
||||||
|
let id = '';
|
||||||
|
|
||||||
|
ctx.imageSmoothingEnabled = false;
|
||||||
|
|
||||||
|
function fixEvent(e) {
|
||||||
|
let r = map.getBoundingClientRect();
|
||||||
|
e = { clientX: e.clientX, clientY: e.clientY };
|
||||||
|
|
||||||
|
e.clientX -= r.x;
|
||||||
|
e.clientY -= r.y;
|
||||||
|
|
||||||
|
e.clientX /= r.width / map.width;
|
||||||
|
e.clientY /= r.height / map.height;
|
||||||
|
|
||||||
|
return e;
|
||||||
|
}
|
||||||
|
|
||||||
|
function down(e) {
|
||||||
|
keys[e.key.toLowerCase()] = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
function up(e) {
|
||||||
|
keys[e.key.toLowerCase()] = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
function mouseMove(e) {
|
||||||
|
e = fixEvent(e);
|
||||||
|
|
||||||
|
lastPos = [e.clientX, e.clientY];
|
||||||
|
if (!isMouse) return;
|
||||||
|
mpos[0] += e.clientX - center[0];
|
||||||
|
mpos[1] += e.clientY - center[1];
|
||||||
|
center = lastPos;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseUp(e) {
|
||||||
|
isMouse = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mouseDown(e) {
|
||||||
|
e = fixEvent(e);
|
||||||
|
if (e.button == '2') return;
|
||||||
|
isMouse = true;
|
||||||
|
center = [e.clientX, e.clientY];
|
||||||
|
}
|
||||||
|
|
||||||
|
function wheel(e) {
|
||||||
|
document.body.style.overflow = 'hidden';
|
||||||
|
|
||||||
|
if (timer != 0) clearTimeout(timer);
|
||||||
|
|
||||||
|
timer = setTimeout(function() {
|
||||||
|
document.body.style.overflow = '';
|
||||||
|
},400)
|
||||||
|
|
||||||
|
mpos[0] -= lastPos[0];
|
||||||
|
mpos[1] -= lastPos[1];
|
||||||
|
|
||||||
|
let f = (2 ** -(e.deltaY/256));
|
||||||
|
|
||||||
|
mpos[0] *= f;
|
||||||
|
mpos[1] *= f;
|
||||||
|
|
||||||
|
mpos[0] += lastPos[0];
|
||||||
|
mpos[1] += lastPos[1];
|
||||||
|
|
||||||
|
zoom *= f;
|
||||||
|
}
|
||||||
|
|
||||||
|
function move() {
|
||||||
|
var isShift = keys['q'];
|
||||||
|
vel[0] += ((keys['a'] ? 1 : 0) - (keys['d'] ? 1 : 0)) * (isShift ? 5 : 1);
|
||||||
|
vel[1] += ((keys['w'] ? 1 : 0) - (keys['s'] ? 1 : 0)) * (isShift ? 5 : 1);
|
||||||
|
|
||||||
|
vel[0] *= 0.9;
|
||||||
|
vel[1] *= 0.9;
|
||||||
|
|
||||||
|
mpos[0] += vel[0];
|
||||||
|
mpos[1] += vel[1];
|
||||||
|
|
||||||
|
ctx.clearRect(0, 0, map.width, map.height);
|
||||||
|
|
||||||
|
for (let img of imgA) {
|
||||||
|
let w = img.width * zoom;
|
||||||
|
let h = img.height * zoom;
|
||||||
|
ctx.drawImage(img, mpos[0], mpos[1], w, h)
|
||||||
|
}
|
||||||
|
|
||||||
|
off = [-(imgA[0].width * zoom - map.width) / 2, -(imgA[0].height * zoom - map.height) / 2];
|
||||||
|
coords.textContent = `X: ${(mpos[0] - off[0]) * mapWidth / imgA[0].width / -zoom}\nZ: ${(mpos[1] - off[1]) * mapHeight / imgA[0].height / -zoom}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let asset of assets) {
|
||||||
|
let img = new Image();
|
||||||
|
img.src = `./${asset}`;
|
||||||
|
imgA.push(img);
|
||||||
|
}
|
||||||
|
|
||||||
|
let off = [-(imgA[0].width * zoom - map.width) / 2, -(imgA[0].height * zoom - map.height) / 2];
|
||||||
|
setTimeout(function() {
|
||||||
|
mpos = [off[0], off[1]];
|
||||||
|
},300)
|
||||||
|
|
||||||
|
setInterval(move, 10);
|
||||||
|
|
||||||
|
window.addEventListener('keydown', down);
|
||||||
|
window.addEventListener('keyup', up);
|
||||||
|
map.addEventListener('wheel', wheel);
|
||||||
|
window.addEventListener('mousemove', mouseMove);
|
||||||
|
window.addEventListener('mousedown', mouseDown);
|
||||||
|
window.addEventListener('mouseup', mouseUp);
|
||||||
|
|
||||||
|
function copy() {
|
||||||
|
let addr = 'play.dervland.net:7777';
|
||||||
|
navigator.clipboard.writeText(addr);
|
||||||
|
alert(addr);
|
||||||
|
}
|
||||||
BIN
docs/thingie.png
Normal file
BIN
docs/thingie.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
19
libs/header.php
Normal file
19
libs/header.php
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<?php
|
||||||
|
function page_header()
|
||||||
|
{
|
||||||
|
?>
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Scraftia</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1">
|
||||||
|
<link rel="stylesheet" href="/css/main.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<?php }
|
||||||
|
function page_footer()
|
||||||
|
{ ?>
|
||||||
|
<script src='/map.js'></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
<?php } ?>
|
||||||
Loading…
Reference in a new issue