Skip to content

Commit 4a67c69

Browse files
IamMrCuppIamMrCupp
authored
Merge pull request #82 from IamMrCupp/feat/fantasy-world-map
feat(rpgweb): fantasy world map (#81)
2 parents eb75d38 + c91ed86 commit 4a67c69

1 file changed

Lines changed: 91 additions & 19 deletions

File tree

‎internal/rpgweb/rpgweb.go‎

Lines changed: 91 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -281,34 +281,106 @@ const mapTmpl = `<!doctype html>
281281
<title>annoybots · the realm map</title>
282282
<style>
283283
:root { color-scheme: dark; }
284-
body { background:#0e0f13; color:#d6d8de; font:15px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; margin:0; padding:2rem; }
285-
h1 { font-size:1.4rem; margin:0 0 .25rem; color:#e9b949; }
286-
.sub { color:#8aa0c6; margin:0 0 1rem; }
287-
.world { display:block; width:100%; max-width:680px; margin:0 auto; background:#0b0c10; border:1px solid #2a2f3a; border-radius:8px; }
288-
.town { fill:#4a3c14; stroke:#e9b949; stroke-width:2; }
289-
.town-l { fill:#b9912f; font-size:11px; }
290-
.dot { fill:#7fd1a8; stroke:#0e0f13; stroke-width:1.5; }
291-
.dot-l { fill:#9aa0ac; font-size:9px; }
292-
.muted { color:#6b7280; }
293-
a { color:#7fd1a8; text-decoration:none; }
284+
body { background:#15110b; color:#d6c9a8; font:15px/1.5 Georgia,'Times New Roman',serif; margin:0; padding:2rem; }
285+
h1 { font-size:1.5rem; margin:0 0 .25rem; color:#e9b949; font-variant:small-caps; letter-spacing:.06em; }
286+
.sub { color:#9a8a64; margin:0 0 1rem; font-style:italic; }
287+
.world { display:block; width:100%; max-width:680px; margin:0 auto; background:#e7d9b5; border:2px solid #6b563b; border-radius:4px; box-shadow:0 4px 20px rgba(0,0,0,.5); }
288+
.coast { fill:#b9cfcb; stroke:#6b563b; stroke-width:1.3; }
289+
.wave { fill:none; stroke:#98b3ae; stroke-width:1; }
290+
.river { fill:none; stroke:#b9cfcb; stroke-width:4; stroke-linecap:round; }
291+
.river-l { fill:none; stroke:#8fb0ab; stroke-width:1; }
292+
.lake { fill:#b9cfcb; stroke:#6b563b; stroke-width:1.2; }
293+
.mtn { fill:#cdbb94; stroke:#6b563b; stroke-width:1.2; stroke-linejoin:round; }
294+
.snow { fill:#f4eede; }
295+
.tree { fill:#6f7d49; }
296+
.reed { stroke:#7f8a55; stroke-width:1.2; stroke-linecap:round; fill:none; }
297+
.sea-l { fill:#6e8a85; font-style:italic; font-size:13px; }
298+
.region-l { fill:#9a8255; font-style:italic; font-size:11px; }
299+
.frame { fill:none; stroke:#6b563b; }
300+
.town-l { fill:#5a3a22; font-size:12px; font-variant:small-caps; }
301+
.dot { fill:#2f4a78; stroke:#e7d9b5; stroke-width:1.2; }
302+
.dot-l { fill:#463c26; font-size:9px; font-style:italic; }
303+
a { color:#e9b949; text-decoration:none; }
294304
a:hover { text-decoration:underline; }
295-
footer { margin-top:1.5rem; color:#4b5563; font-size:.8rem; text-align:center; }
305+
footer { margin-top:1.5rem; color:#6b5a3a; font-size:.8rem; text-align:center; }
296306
</style>
297307
</head>
298308
<body>
299309
<h1>🗺 the realm map</h1>
300-
<p class="sub">{{len .Players}} adventurers roaming · towns in gold</p>
301-
<svg class="world" viewBox="-12 -12 {{add .Size 24}} {{add .Size 24}}" role="img" aria-label="world map of player positions">
302-
<rect x="0" y="0" width="{{.Size}}" height="{{.Size}}" fill="#0b0c10" stroke="#20232b" stroke-width="1"/>
310+
<p class="sub">{{len .Players}} souls abroad in the realm</p>
311+
<svg class="world" viewBox="0 0 {{.Size}} {{.Size}}" role="img" aria-label="fantasy map of the realm with towns and wandering players">
312+
<rect x="0" y="0" width="{{.Size}}" height="{{.Size}}" fill="#e7d9b5"/>
313+
314+
<!-- the sea (southwest) -->
315+
<path class="coast" d="M0,392 Q60,430 100,452 Q140,470 130,490 L0,500 Z"/>
316+
<path class="coast" d="M210,500 Q250,486 300,492 L320,500 Z"/>
317+
<path class="wave" d="M24,440 q12,-7 24,0 t24,0"/>
318+
<path class="wave" d="M36,460 q12,-7 24,0 t24,0"/>
319+
<text class="sea-l" x="22" y="486">The Idle Sea</text>
320+
321+
<!-- river: from the northeast peaks down to the sea -->
322+
<path class="river" d="M428,118 C360,168 300,228 250,278 C202,326 158,396 118,452"/>
323+
<path class="river-l" d="M428,118 C360,168 300,228 250,278 C202,326 158,396 118,452"/>
324+
<!-- the ford stream past Quietford, with a little bridge -->
325+
<path class="river" style="stroke-width:3" d="M34,108 Q92,138 168,132"/>
326+
<path class="reed" d="M122,142 l16,-8 M122,150 l16,-8"/>
327+
328+
<!-- a lake -->
329+
<ellipse class="lake" cx="332" cy="196" rx="26" ry="15"/>
330+
331+
<!-- the northeastern peaks -->
332+
<g class="mtn">
333+
<path d="M356,128 l20,-40 20,40 z"/>
334+
<path d="M388,134 l26,-54 26,54 z"/>
335+
<path d="M428,124 l18,-34 18,34 z"/>
336+
<path d="M334,132 l14,-26 14,26 z"/>
337+
</g>
338+
<path class="snow" d="M408,98 l6,-14 6,14 z"/>
339+
<path class="snow" d="M376,104 l4,-10 4,10 z"/>
340+
341+
<!-- forests -->
342+
<g class="tree">
343+
<path d="M286,316 l-5,9 10,0 z"/><path d="M298,322 l-5,9 10,0 z"/><path d="M278,326 l-5,9 10,0 z"/>
344+
<path d="M306,312 l-5,9 10,0 z"/><path d="M292,332 l-5,9 10,0 z"/><path d="M314,326 l-5,9 10,0 z"/>
345+
<path d="M168,250 l-5,9 10,0 z"/><path d="M180,256 l-5,9 10,0 z"/><path d="M158,260 l-5,9 10,0 z"/>
346+
<path d="M190,248 l-5,9 10,0 z"/><path d="M174,266 l-5,9 10,0 z"/>
347+
<path d="M436,288 l-5,9 10,0 z"/><path d="M448,294 l-5,9 10,0 z"/><path d="M428,298 l-5,9 10,0 z"/>
348+
<path d="M250,150 l-4,8 8,0 z"/><path d="M260,156 l-4,8 8,0 z"/><path d="M242,158 l-4,8 8,0 z"/>
349+
</g>
350+
351+
<!-- the marsh (southeast) -->
352+
<g class="reed">
353+
<path d="M330,360 l0,-10 M338,364 l0,-12 M324,368 l0,-9"/>
354+
<path d="M352,372 l0,-11 M362,366 l0,-10 M372,374 l0,-12 M384,368 l0,-9"/>
355+
<path d="M344,388 l0,-10 M356,392 l0,-11 M368,386 l0,-9"/>
356+
</g>
357+
<text class="region-l" x="316" y="412">The Lag Fens</text>
358+
359+
<!-- compass rose (southeast corner) -->
360+
<g transform="translate(452,452)">
361+
<circle r="20" fill="none" stroke="#6b563b" stroke-width="1"/>
362+
<path d="M0,-22 L4,0 L0,22 L-4,0 Z" fill="#6b563b"/>
363+
<path d="M-22,0 L0,-4 L22,0 L0,4 Z" fill="#8a7a5e"/>
364+
<text x="-3.5" y="-25" fill="#6b563b" font-size="10" font-weight="bold">N</text>
365+
</g>
366+
367+
<!-- decorative double frame -->
368+
<rect class="frame" x="6" y="6" width="{{add .Size -12}}" height="{{add .Size -12}}" stroke-width="3"/>
369+
<rect class="frame" x="12" y="12" width="{{add .Size -24}}" height="{{add .Size -24}}" stroke-width="1"/>
370+
371+
<!-- towns -->
303372
{{range .Towns}}
304-
<rect x="{{add .X -5}}" y="{{add .Y -5}}" width="10" height="10" class="town"/>
305-
<text x="{{add .X 9}}" y="{{add .Y 4}}" class="town-l">{{.Name}}</text>
373+
<circle cx="{{.X}}" cy="{{.Y}}" r="4.5" fill="#8c2f1c" stroke="#3a160d" stroke-width="1"/>
374+
<circle cx="{{.X}}" cy="{{.Y}}" r="1.6" fill="#f0e6c8"/>
375+
<text class="town-l" x="{{add .X 8}}" y="{{add .Y 4}}">{{.Name}}</text>
306376
{{end}}
377+
378+
<!-- wandering souls -->
307379
{{range .Players}}
308-
<circle cx="{{.X}}" cy="{{.Y}}" r="4" class="dot"/>
309-
<text x="{{add .X 6}}" y="{{add .Y 3}}" class="dot-l">{{.Name}}</text>
380+
<circle class="dot" cx="{{.X}}" cy="{{.Y}}" r="3"/>
381+
<text class="dot-l" x="{{add .X 5}}" y="{{add .Y 3}}">{{.Name}}</text>
310382
{{else}}
311-
<text x="{{add .Size -250}}" y="250" class="dot-l">no one has wandered onto the map yet.</text>
383+
<text class="region-l" x="186" y="248">no souls wander here yet…</text>
312384
{{end}}
313385
</svg>
314386
<footer><a href="/">&larr; back to the realm</a> · auto-refreshes every 30s</footer>

0 commit comments

Comments
 (0)