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