rewrites

docs/chat.php

@@ -0,0 +1,32 @@
+<?php
+require(__DIR__ . "/../libs/header.php");
+
+page_header();
+$msgs = json_decode(file_get_contents('https://mcp.dervland.net/messages'), true);
+?>
+<h2>Scraftia (<a href='/' class='link'>Home</a>)</h2>
+<?php
+foreach ($msgs as $msg) {
+	$sys = ($msg['username'] == ':system');
+	$classes = '';
+	if ($sys && str_contains($msg['content'],'joined ')) $classes = 'joiner';
+	if ($sys && str_contains($msg['content'],'left ')) $classes = 'leaver';
+    ?>
+	<div class="comment <?php echo $classes ?>">
+					<div class="avatar">
+						<div>
+							<div><b>
+								<?php echo htmlspecialchars($sys ? 'System User' : $msg['username']); ?>
+								</b></div>
+							<div><b class='date'>
+								<?php echo date(DATE_RFC2822, $msg['date'] * 0.001); ?>
+								</b></div>
+						</div>
+					</div>
+					<?php echo htmlspecialchars($msg['content']); ?>	
+			</div>	
+<?php
+}
+
+page_footer();
+?>

docs/css/main.css

@@ -0,0 +1,244 @@
+: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: 8px;
+    --font: system-ui, sans-serif;
+    color: var(--white);
+    background: var(--black);
+    font-family: var(--font) !important;
+}
+
+.comment.joiner {
+	background: rgb(78,180,78);
+}
+
+.comment.leaver {
+	background: rgb(180,78,78);
+}
+
+.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: .1rem;
+    margin-top: .1rem;
+    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;
+}
+
+
+.date {
+	font-size: 0.8em;
+}

docs/index.php

@@ -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>Scraftia</h1>
+				<p><b class='important'>Scraftia</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>
+				<p>
+					International affairs are handled via the BiglyChat community website.
+				</p>
+				<a class="form-button" href="https://nbg.dervland.net/comment.php?id=f2a20f194dafffe83812c2482df8afda">BiglyChat</a>
+				<a class="form-button" href="/chat.php">Minecraft Feed</a>
+				<a class="form-button" onclick="copy()" href="#">Server Address</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 glitch.</li>
+				<li>Don't hack, excluding shaders, minimaps without caves, and ViaVersion.</li>
+				<li>Don't loot, grief, or build on foreign land that isn't empty
+				or inactive for 5+ days (squatting).</li>
+				<li>Huge claims won't get mapped.</li>
+				<li>The first claimer of land via BiglyChat and its squatters owns it.</li>
+				<li>Wars are declared on BiglyChat.</li>
+				<li>Nations in war have 3 points per citizen or town. Dying deducts this.</li>
+				<li>A nation having 0 points or being removed, ends a war.</li>
+				<li>Nations can be partially annexed with only some points deducted.</li>
+				</ol>
+				</div>
+				<?php
+}
+page_footer();
+?>

docs/map.js

@@ -0,0 +1,142 @@
+const mapWidth = 14000;
+const mapHeight = 14000;
+
+let assets = [
+    '../thingie.png',
+    '../thingie.svg' // 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 = imgA[0].width * zoom;
+        let h = imgA[0].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';
+    navigator.clipboard.writeText(addr);
+    alert(addr);
+}

docs/thingie.svg

@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg99"
+   width="832.63367"
+   height="832.63367"
+   viewBox="0 0 832.63367 832.63368"
+   sodipodi:docname="thingie.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xml:space="preserve"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs103" /><sodipodi:namedview
+     id="namedview101"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="11.264335"
+     inkscape:cx="476.01569"
+     inkscape:cy="437.97527"
+     inkscape:window-width="1920"
+     inkscape:window-height="1007"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="g105" /><g
+     inkscape:groupmode="layer"
+     inkscape:label="Image"
+     id="g105"><image
+       width="832.63367"
+       height="832.63367"
+       preserveAspectRatio="none"
+       style="image-rendering:optimizeSpeed;stroke-linecap:round;stroke-linejoin:round"
+       xlink:href="thingie.png"
+       id="image594"
+       x="0"
+       y="0" /><rect
+       style="fill:#000000;fill-opacity:0.64363295;stroke-linecap:round;stroke-linejoin:round"
+       id="rect603"
+       width="832.63367"
+       height="832.63367"
+       x="0"
+       y="0" /><path
+       style="opacity:1;fill:#eb4040;fill-opacity:0.45482;stroke:#ffffff;stroke-opacity:1;paint-order:normal;stroke-linecap:round;stroke-linejoin:round"
+       d="m 406.87337,470.92616 3.84833,4.77535 -0.73844,8.5449 6.33357,5.03866 v 12.64969 l 5.17658,6.91783 3.11524,5.98823 h 23.24665 l -4.41575,-9.60002 3.62355,0.0775 1.43855,-1.00649 -2.35777,-5.22148 0.78173,-6.29329 -2.22737,-4.00891 -0.92847,-3.57631 1.00304,-5.13311 6.36496,-10.19613 1.96389,-7.9673 4.11108,-0.60192 8.46536,-2.4512 3.2914,5.43871 1.96194,3.39496 4.05832,-0.3551 -0.21479,-8.79115 -11.03323,-9.49656 -7.85756,4.24824 -8.74651,1.57696 -5.95119,-0.59937 -2.13513,-6.13499 -3.22439,-6.71636 -1.87863,-4.94731 -0.22609,-5.97784 4.15629,-5.24223 1.47202,0.17755 0.11706,-1.2888 -10.53279,-2.77204 -9.54181,2.04358 -3.07618,12.04642 1.90806,3.42516 -1.90806,4.02648 5.75708,15.97913 -5.75708,8.54608 -8.01082,0.95158 -1.29893,5.63623 z"
+       id="path2127" /><text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:9.71354px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';opacity:1;fill:#ffffff;fill-opacity:0.991232;stroke:none;stroke-width:0.80946;stroke-opacity:1;paint-order:normal;stroke-linecap:round;stroke-linejoin:round"
+       x="288.06116"
+       y="565.2309"
+       id="text2300"
+       transform="rotate(-13.963974)"><tspan
+         sodipodi:role="line"
+         id="tspan2298"
+         x="288.06116"
+         y="565.2309"
+         style="stroke-width:0.80946;stroke-linecap:round;stroke-linejoin:round">Akoria</tspan></text><path
+       style="fill:#407ceb;fill-opacity:0.45490196;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;paint-order:normal;stroke:#ffffff;stroke-opacity:1;stroke-dasharray:none"
+       d="m 472.80183,439.69519 -1.9312,-3.50756 -0.52953,-4.90597 -1.60279,-4.74297 2.05962,-4.06559 2.74884,0.0835 c 0,0 2.99937,1.22194 2.78174,1.75255 -0.21763,0.53062 -1.10759,2.75358 -1.10759,2.75358 l 3.18598,1.03519 2.70871,0.20551 0.41645,-1.02866 3.23833,1.56761 -1.02188,1.96737 c 0,0 -0.52626,1.89464 -0.61504,2.77645 -0.0888,0.8818 0.87706,2.38767 0.87706,2.38767 l 2.88011,1.77401 c 0,0 -1.45491,4.31835 -2.05899,4.22957 -0.60408,-0.0888 -6.10295,-2.63911 -6.10295,-2.63911 z"
+       id="path292" /><text
+       xml:space="preserve"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:9.71354px;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold';opacity:1;fill:#ffffff;fill-opacity:0.991232;stroke:none;stroke-width:0.80946;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;paint-order:normal"
+       x="563.94672"
+       y="274.48572"
+       id="text2208"
+       transform="rotate(15.884476)"><tspan
+         sodipodi:role="line"
+         id="tspan2206"
+         x="563.94672"
+         y="274.48572"
+         style="stroke-width:0.80946;stroke-linecap:round;stroke-linejoin:round">Islandia</tspan></text></g></svg>

libs/header.php

@@ -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 } ?>