JonathanMcCaffrey/EarthborneTrailerblazer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

...

Browse Source
This commit is contained in:
Jonathan McCaffrey
2026-06-10 22:11:00 -04:00
parent 43be7d4ddc
commit 7291c3565f
7 changed files with 370 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ET/Console/Program.cs
+176 -33
View File
@@ -1,4 +1,5 @@
using System.Text.RegularExpressions;
using System.Text.Json;
var exeDir = AppContext.BaseDirectory;
@@ -17,53 +18,185 @@ if (!Directory.Exists(srcDir))
return 1;
}
Directory.CreateDirectory(dstDir);
SyncNotes(srcDir, dstDir);
GenerateMap(srcDir, Path.GetFullPath(Path.Combine(solutionDir, "Web", "wwwroot", "docs")));
foreach (var file in Directory.GetFiles(dstDir))
File.Delete(file);
Console.WriteLine("Done.");
return 0;
var entries = new List<object>();
foreach (var file in Directory.EnumerateFiles(srcDir, "*.md"))
static void SyncNotes(string srcDir, string dstDir)
{
var name = Path.GetFileNameWithoutExtension(file);
var slug = Slugify(name);
Directory.CreateDirectory(dstDir);
File.Copy(file, Path.Combine(dstDir, $"{slug}.md"), overwrite: true);
foreach (var file in Directory.GetFiles(dstDir))
File.Delete(file);
string? category = null;
var content = File.ReadAllText(file);
var fmMatch = Regex.Match(content, @"^---\s*\n(.*?)\n---", RegexOptions.Singleline);
if (fmMatch.Success)
var entries = new List<object>();
foreach (var file in Directory.EnumerateFiles(srcDir, "*.md"))
{
var catMatch = Regex.Match(fmMatch.Groups[1].Value, @"(?m)^category:\s*(.+)$");
if (catMatch.Success)
category = catMatch.Groups[1].Value.Trim().Trim('"');
var name = Path.GetFileNameWithoutExtension(file);
var slug = Slugify(name);
File.Copy(file, Path.Combine(dstDir, $"{slug}.md"), overwrite: true);
string? category = null;
var content = File.ReadAllText(file);
var fmMatch = Regex.Match(content, @"^---\s*\n(.*?)\n---", RegexOptions.Singleline);
if (fmMatch.Success)
{
var catMatch = Regex.Match(fmMatch.Groups[1].Value, @"(?m)^category:\s*(.+)$");
if (catMatch.Success)
category = catMatch.Groups[1].Value.Trim().Trim('"');
}
var entry = new Dictionary<string, object?>
{
["slug"] = slug,
["title"] = name
};
if (category != null)
entry["category"] = category;
entries.Add(entry);
}
var entry = new Dictionary<string, object?>
{
["slug"] = slug,
["title"] = name
};
if (category != null)
entry["category"] = category;
var index = new Dictionary<string, object> { ["notes"] = entries };
var json = JsonSerializer.Serialize(index, new JsonSerializerOptions { WriteIndented = true });
entries.Add(entry);
var indexPath = Path.Combine(Path.GetDirectoryName(dstDir)!, "notes-index.json");
File.WriteAllText(indexPath, json);
Console.WriteLine($"Copied {entries.Count} notes.");
Console.WriteLine($"Index written to: {indexPath}");
}
var index = new Dictionary<string, object> { ["notes"] = entries };
var json = System.Text.Json.JsonSerializer.Serialize(index, new System.Text.Json.JsonSerializerOptions
static void GenerateMap(string srcDir, string dstDir)
{
WriteIndented = true
});
var terrainColors = new Dictionary<string, string>
{
["Grass"] = "#4caf50",
["Forest"] = "#2e7d32",
["Mountain"] = "#78909c",
["Water"] = "#42a5f5",
["Wasteland"] = "#8d6e63",
};
var indexPath = Path.Combine(Path.GetDirectoryName(dstDir)!, "notes-index.json");
File.WriteAllText(indexPath, json);
var regionFiles = Directory.EnumerateFiles(srcDir, "*.md")
.Select(f => (File: f, Content: File.ReadAllText(f)))
.Where(t => Regex.IsMatch(t.Content, @"(?m)^category:\s*Region$"))
.ToList();
Console.WriteLine($"Copied {entries.Count} notes.");
Console.WriteLine($"Index written to: {indexPath}");
return 0;
var regions = new List<RegionData>();
foreach (var (file, content) in regionFiles)
{
var fmMatch = Regex.Match(content, @"^---\s*\n(.*?)\n---", RegexOptions.Singleline);
if (!fmMatch.Success) continue;
var fm = fmMatch.Groups[1].Value;
var name = Path.GetFileNameWithoutExtension(file);
var xMatch = Regex.Match(fm, @"(?m)^X:\s*(\d+)");
var yMatch = Regex.Match(fm, @"(?m)^Y:\s*(\d+)");
if (!xMatch.Success || !yMatch.Success) continue;
var connMatches = Regex.Matches(fm, @"\[\[([^\]]+)\]\]");
var conns = connMatches.Select(m => m.Groups[1].Value).ToList();
var landmarks = new List<string>();
var lmSection = Regex.Match(fm, @"Landmarks:\s*\n((?:\s*-\s*""\[\[([^\]]+)\]\]""\s*\n?)*)");
if (lmSection.Success)
{
var lmEntries = Regex.Matches(lmSection.Groups[1].Value, @"\[\[([^\]]+)\]\]");
landmarks.AddRange(lmEntries.Select(m => m.Groups[1].Value));
}
var terrain = name.Split(' ')[0];
regions.Add(new RegionData
{
Name = name,
Terrain = terrain,
X = int.Parse(xMatch.Groups[1].Value),
Y = int.Parse(yMatch.Groups[1].Value),
Connections = conns,
Landmarks = landmarks
});
}
var nameLookup = regions.ToDictionary(r => r.Name);
var pad = 60;
var maxX = regions.Max(r => r.X) + pad * 2;
var maxY = regions.Max(r => r.Y) + pad * 2;
var svg = new System.Text.StringBuilder();
svg.AppendLine($"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 {maxX} {maxY}\">");
svg.AppendLine($"""<rect width="100%" height="100%" fill="#1a1a2e" rx="8"/>""");
svg.AppendLine($"""<defs>""");
foreach (var (terrain, color) in terrainColors)
{
svg.AppendLine($"""<radialGradient id="glow-{terrain}" cx="50%" cy="50%" r="50%">""");
svg.AppendLine($"""<stop offset="0%" stop-color="{color}" stop-opacity="0.3"/>""");
svg.AppendLine($"""<stop offset="100%" stop-color="{color}" stop-opacity="0"/>""");
svg.AppendLine("</radialGradient>");
}
svg.AppendLine("</defs>");
foreach (var region in regions)
{
foreach (var conn in region.Connections)
{
if (!nameLookup.TryGetValue(conn, out var target) || string.Compare(region.Name, conn, StringComparison.OrdinalIgnoreCase) >= 0)
continue;
svg.AppendLine($"""<line x1="{region.X + pad}" y1="{region.Y + pad}" x2="{target.X + pad}" y2="{target.Y + pad}" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>""");
}
}
foreach (var region in regions)
{
var cx = region.X + pad;
var cy = region.Y + pad;
var color = terrainColors.GetValueOrDefault(region.Terrain, "#888");
svg.AppendLine($"""<circle cx="{cx}" cy="{cy}" r="32" fill="url(#glow-{region.Terrain})"/>""");
svg.AppendLine($"""<circle cx="{cx}" cy="{cy}" r="18" fill="{color}" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>""");
var labelX = cx + 24;
svg.AppendLine($"""<text x="{labelX}" y="{cy + 4}" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">""");
svg.Append(System.Text.Encodings.Web.HtmlEncoder.Default.Encode(region.Name));
svg.AppendLine("</text>");
foreach (var lm in region.Landmarks)
{
svg.AppendLine($"""<text x="{labelX}" y="{cy + 18}" fill="rgba(255,255,255,0.45)" font-family="system-ui,sans-serif" font-size="9" font-style="italic">""");
svg.Append(System.Text.Encodings.Web.HtmlEncoder.Default.Encode($"\u2605 {lm}"));
svg.AppendLine("</text>");
}
}
var legendX = maxX - 160;
var legendY = 20;
svg.AppendLine($"""<rect x="{legendX}" y="{legendY}" width="140" height="{20 + terrainColors.Count * 22}" rx="6" fill="rgba(0,0,0,0.4)" stroke="rgba(255,255,255,0.08)"/>""");
svg.AppendLine($"""<text x="{legendX + 10}" y="{legendY + 15}" fill="rgba(255,255,255,0.6)" font-family="system-ui,sans-serif" font-size="10" font-weight="600">Legend</text>""");
var ly = legendY + 32;
foreach (var (terrain, color) in terrainColors)
{
svg.AppendLine($"""<circle cx="{legendX + 14}" cy="{ly - 3}" r="5" fill="{color}"/>""");
svg.AppendLine($"""<text x="{legendX + 26}" y="{ly + 1}" fill="rgba(255,255,255,0.7)" font-family="system-ui,sans-serif" font-size="10">{terrain}</text>""");
ly += 22;
}
svg.AppendLine("</svg>");
var mapPath = Path.Combine(dstDir, "map.svg");
File.WriteAllText(mapPath, svg.ToString());
Console.WriteLine($"Map written to: {mapPath} ({regions.Count} regions)");
}
static string Slugify(string name)
{
@@ -90,3 +223,13 @@ static string? FindContainingDir(string startDir, string markerFile)
return null;
}
class RegionData
{
public string Name { get; set; } = "";
public string Terrain { get; set; } = "";
public int X { get; set; }
public int Y { get; set; }
public List<string> Connections { get; set; } = new();
public List<string> Landmarks { get; set; } = new();
}
ET/Web/Pages/Home.razor
+9 -3
View File
@@ -1,7 +1,13 @@
@page "/"
<PageTitle>Home</PageTitle>
<PageTitle>Earthborne Trailblazer</PageTitle>
<h1>Hello, world!</h1>
<h1>Earthborne Trailblazer</h1>
Welcome to your new app.
<div class="map-container">
<object data="docs/map.svg" type="image/svg+xml" class="map-svg"></object>
</div>
<p>
<a href="docs">Browse documentation &rarr;</a>
</p>
ET/Web/wwwroot/css/app.css
+15
View File
@@ -200,6 +200,21 @@ table.frontmatter td.fm-key {
.markdown-body pre code { background: none; padding: 0; }
.markdown-body blockquote { border-left: 3px solid #dee2e6; padding-left: 1rem; color: #6c757d; margin: 0.75rem 0; }
.map-container {
max-width: 100%;
margin: 1.5rem 0;
border: 1px solid #dee2e6;
border-radius: 8px;
overflow: hidden;
background: #1a1a2e;
}
.map-svg {
width: 100%;
height: auto;
display: block;
}
.category-badge {
display: inline-block;
font-size: 0.7rem;
ET/Web/wwwroot/docs/map.svg
+154
View File
@@ -0,0 +1,154 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 760 530">
<rect width="100%" height="100%" fill="#1a1a2e" rx="8"/>
<defs>
<radialGradient id="glow-Grass" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4caf50" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#4caf50" stop-opacity="0"/>
</radialGradient>
<radialGradient id="glow-Forest" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#2e7d32" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#2e7d32" stop-opacity="0"/>
</radialGradient>
<radialGradient id="glow-Mountain" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#78909c" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#78909c" stop-opacity="0"/>
</radialGradient>
<radialGradient id="glow-Water" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#42a5f5" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#42a5f5" stop-opacity="0"/>
</radialGradient>
<radialGradient id="glow-Wasteland" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#8d6e63" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#8d6e63" stop-opacity="0"/>
</radialGradient>
</defs>
<line x1="120" y1="390" x2="90" y2="310" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="120" y1="390" x2="210" y2="460" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="120" y1="390" x2="90" y2="470" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="120" y1="390" x2="310" y2="430" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="310" y1="430" x2="210" y2="460" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="310" y1="430" x2="210" y2="220" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="210" y1="200" x2="210" y2="220" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="480" y1="160" x2="690" y2="140" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="480" y1="160" x2="620" y2="180" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="480" y1="160" x2="610" y2="350" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="530" y1="470" x2="660" y2="460" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="90" y1="310" x2="80" y2="180" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="90" y1="310" x2="210" y2="220" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="360" y1="290" x2="210" y2="220" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="360" y1="290" x2="320" y2="170" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="360" y1="290" x2="440" y2="240" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="690" y1="140" x2="430" y2="90" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="690" y1="140" x2="620" y2="180" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="610" y1="350" x2="490" y2="390" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="610" y1="350" x2="660" y2="460" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="610" y1="350" x2="620" y2="180" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="80" y1="180" x2="110" y2="110" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="320" y1="170" x2="110" y2="110" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="440" y1="240" x2="490" y2="390" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<line x1="620" y1="180" x2="700" y2="170" stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
<circle cx="120" cy="390" r="32" fill="url(#glow-Forest)"/>
<circle cx="120" cy="390" r="18" fill="#2e7d32" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="144" y="394" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Forest 1</text>
<circle cx="310" cy="430" r="32" fill="url(#glow-Forest)"/>
<circle cx="310" cy="430" r="18" fill="#2e7d32" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="334" y="434" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Forest 2</text>
<circle cx="210" cy="200" r="32" fill="url(#glow-Forest)"/>
<circle cx="210" cy="200" r="18" fill="#2e7d32" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="234" y="204" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Forest 3</text>
<circle cx="480" cy="160" r="32" fill="url(#glow-Forest)"/>
<circle cx="480" cy="160" r="18" fill="#2e7d32" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="504" y="164" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Forest 4</text>
<circle cx="530" cy="470" r="32" fill="url(#glow-Forest)"/>
<circle cx="530" cy="470" r="18" fill="#2e7d32" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="554" y="474" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Forest 5</text>
<circle cx="90" cy="310" r="32" fill="url(#glow-Grass)"/>
<circle cx="90" cy="310" r="18" fill="#4caf50" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="114" y="314" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Grass 1</text>
<text x="114" y="328" fill="rgba(255,255,255,0.45)" font-family="system-ui,sans-serif" font-size="9" font-style="italic">
&#x2605; Lone Tree Station</text>
<circle cx="210" cy="460" r="32" fill="url(#glow-Grass)"/>
<circle cx="210" cy="460" r="18" fill="#4caf50" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="234" y="464" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Grass 2</text>
<text x="234" y="478" fill="rgba(255,255,255,0.45)" font-family="system-ui,sans-serif" font-size="9" font-style="italic">
&#x2605; Spire</text>
<circle cx="360" cy="290" r="32" fill="url(#glow-Grass)"/>
<circle cx="360" cy="290" r="18" fill="#4caf50" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="384" y="294" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Grass 3</text>
<circle cx="690" cy="140" r="32" fill="url(#glow-Grass)"/>
<circle cx="690" cy="140" r="18" fill="#4caf50" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="714" y="144" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Grass 4</text>
<circle cx="610" cy="350" r="32" fill="url(#glow-Grass)"/>
<circle cx="610" cy="350" r="18" fill="#4caf50" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="634" y="354" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Grass 5</text>
<circle cx="80" cy="180" r="32" fill="url(#glow-Mountain)"/>
<circle cx="80" cy="180" r="18" fill="#78909c" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="104" y="184" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Mountain 1</text>
<circle cx="320" cy="170" r="32" fill="url(#glow-Mountain)"/>
<circle cx="320" cy="170" r="18" fill="#78909c" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="344" y="174" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Mountain 2</text>
<circle cx="440" cy="240" r="32" fill="url(#glow-Mountain)"/>
<circle cx="440" cy="240" r="18" fill="#78909c" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="464" y="244" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Mountain 3</text>
<circle cx="430" cy="90" r="32" fill="url(#glow-Mountain)"/>
<circle cx="430" cy="90" r="18" fill="#78909c" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="454" y="94" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Mountain 4</text>
<circle cx="490" cy="390" r="32" fill="url(#glow-Mountain)"/>
<circle cx="490" cy="390" r="18" fill="#78909c" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="514" y="394" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Mountain 5</text>
<circle cx="620" cy="180" r="32" fill="url(#glow-Wasteland)"/>
<circle cx="620" cy="180" r="18" fill="#8d6e63" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="644" y="184" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Wasteland 1</text>
<circle cx="90" cy="470" r="32" fill="url(#glow-Water)"/>
<circle cx="90" cy="470" r="18" fill="#42a5f5" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="114" y="474" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Water 1</text>
<text x="114" y="488" fill="rgba(255,255,255,0.45)" font-family="system-ui,sans-serif" font-size="9" font-style="italic">
&#x2605; Research Station</text>
<circle cx="210" cy="220" r="32" fill="url(#glow-Water)"/>
<circle cx="210" cy="220" r="18" fill="#42a5f5" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="234" y="224" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Water 2</text>
<text x="234" y="238" fill="rgba(255,255,255,0.45)" font-family="system-ui,sans-serif" font-size="9" font-style="italic">
&#x2605; White Sky</text>
<circle cx="110" cy="110" r="32" fill="url(#glow-Water)"/>
<circle cx="110" cy="110" r="18" fill="#42a5f5" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="134" y="114" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Water 3</text>
<circle cx="700" cy="170" r="32" fill="url(#glow-Water)"/>
<circle cx="700" cy="170" r="18" fill="#42a5f5" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="724" y="174" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Water 4</text>
<circle cx="660" cy="460" r="32" fill="url(#glow-Water)"/>
<circle cx="660" cy="460" r="18" fill="#42a5f5" stroke="rgba(255,255,255,0.4)" stroke-width="2"/>
<text x="684" y="464" fill="rgba(255,255,255,0.9)" font-family="system-ui,sans-serif" font-size="11" font-weight="600">
Water 5</text>
<rect x="600" y="20" width="140" height="130" rx="6" fill="rgba(0,0,0,0.4)" stroke="rgba(255,255,255,0.08)"/>
<text x="610" y="35" fill="rgba(255,255,255,0.6)" font-family="system-ui,sans-serif" font-size="10" font-weight="600">Legend</text>
<circle cx="614" cy="49" r="5" fill="#4caf50"/>
<text x="626" y="53" fill="rgba(255,255,255,0.7)" font-family="system-ui,sans-serif" font-size="10">Grass</text>
<circle cx="614" cy="71" r="5" fill="#2e7d32"/>
<text x="626" y="75" fill="rgba(255,255,255,0.7)" font-family="system-ui,sans-serif" font-size="10">Forest</text>
<circle cx="614" cy="93" r="5" fill="#78909c"/>
<text x="626" y="97" fill="rgba(255,255,255,0.7)" font-family="system-ui,sans-serif" font-size="10">Mountain</text>
<circle cx="614" cy="115" r="5" fill="#42a5f5"/>
<text x="626" y="119" fill="rgba(255,255,255,0.7)" font-family="system-ui,sans-serif" font-size="10">Water</text>
<circle cx="614" cy="137" r="5" fill="#8d6e63"/>
<text x="626" y="141" fill="rgba(255,255,255,0.7)" font-family="system-ui,sans-serif" font-size="10">Wasteland</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB