Compare commits
10 commits
Author | SHA1 | Date | |
---|---|---|---|
fbddf2de66 | |||
272cb06f28 | |||
155fc68dfe | |||
267282aa81 | |||
e55bed4fc9 | |||
b0354fd1fb | |||
f956972c6d | |||
4f003b98f9 | |||
95a09043f5 | |||
65cbda1b2e |
7 changed files with 564 additions and 0 deletions
32
docs/chat.php
Normal file
32
docs/chat.php
Normal 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
244
docs/css/main.css
Normal 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;
|
||||
}
|
|
@ -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
142
docs/map.js
Normal 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
BIN
docs/thingie.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 220 KiB |
81
docs/thingie.svg
Normal file
81
docs/thingie.svg
Normal 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
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