Compare commits

...

10 commits
v0.0.1 ... main

Author SHA1 Message Date
fbddf2de66
rewrites 2025-02-17 17:21:12 -05:00
272cb06f28
fix up UI 2025-02-10 20:25:30 -05:00
155fc68dfe
isladnia 2025-02-10 18:33:16 -05:00
267282aa81
colors for jhoin/leave 2025-02-09 19:23:40 -05:00
e55bed4fc9
links and discord 2025-02-08 21:06:23 -05:00
b0354fd1fb
add nations 2025-02-08 19:48:01 -05:00
f956972c6d
clarity 2025-02-08 19:36:16 -05:00
4f003b98f9
sdg 2025-02-08 01:04:40 -05:00
95a09043f5
fixes 2025-02-08 00:58:52 -05:00
65cbda1b2e
add the damn thing 2025-02-08 00:52:59 -05:00
7 changed files with 564 additions and 0 deletions

32
docs/chat.php Normal file
View file

@ -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();
?>

244
docs/css/main.css Normal file
View file

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

View file

@ -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();
?>

142
docs/map.js Normal file
View file

@ -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);
}

BIN
docs/thingie.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 KiB

81
docs/thingie.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 4.6 KiB

19
libs/header.php Normal file
View 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 } ?>