ik/rf4-spotter
1
0
Fork 0
Code Issues Pull Requests Actions 9 Packages Projects Releases Wiki Activity

feat: add unique waterbody fingerprints

Browse Source
This commit is contained in:
ik
2026-09-12 15:35:57 +07:00
parent 80d534d549
commit 2ce1e20af2
10 changed files with 65 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/WaterbodyMark.astro
+20 -6
View File
@@ -1,15 +1,29 @@
---
const { name, size = 112 } = Astro.props as { name: string; size?: number };
const variant = [...name].reduce((sum, char) => sum + (char.codePointAt(0) ?? 0), 0) % 3;
import { waterbodyVisual } from "../lib/waterbody-visuals";
const { identity, size = 112 } = Astro.props as { identity: string; size?: number };
const visual = waterbodyVisual(identity);
const shores = [
"M8 57C22 42 34 48 47 34S75 20 91 34s16 7 25-3",
"M7 48c17-20 34 5 50-10s28-15 38 1 13 14 22 9",
"M5 54c14-4 20-24 39-18s27-9 40-14 20 11 33 10",
"M7 42c14 8 25-17 42-8s23 16 35 2 20-13 34-6",
"M6 51c16-24 31 7 47-8s32-17 41 3 14 11 24 4",
"M8 38c19-8 26 19 46 8s30-25 42-8 14 11 22 7",
"M5 56c11-19 25-20 39-5s25-1 37-16 25-10 37 2",
"M6 47c18 15 31-18 50-5s27 9 37-5 17-15 27-5",
];
---
<svg class="waterbody-mark" width={size} height={Math.round(size * .62)} viewBox="0 0 124 72" aria-hidden="true">
<path class="waterbody-mark__shore" d={shores[variant]} />
<path d="M12 61c18-7 31 6 49-2s31-6 51 0" />
<path d="M24 68c13-4 25 3 39-2s25-3 37 0" />
<circle cx={variant === 1 ? 82 : 51} cy={variant === 2 ? 25 : 30} r="3" />
<path class="waterbody-mark__shore" d={shores[visual.shore]} />
{visual.waves >= 1 && <path d="M12 59c18-7 31 6 49-2s31-6 51 0" />}
{visual.waves >= 2 && <path d="M20 65c14-5 27 4 42-2s27-4 43 0" />}
{visual.waves >= 3 && <path d="M31 70c11-3 21 2 32-1s20-2 30 0" />}
<circle cx={visual.markerX} cy={visual.markerY} r="3" />
<text x="111" y="15" text-anchor="end">{visual.code}</text>
</svg>
<style>
text { fill: currentColor; stroke: none; font: 700 8px Inter, sans-serif; letter-spacing: .08em; }
:global(.catalog-hero__seal) .waterbody-mark { position: static; right: auto; bottom: auto; opacity: 1; color: var(--lime); stroke: currentColor; }
:global(.catalog-hero__seal) text { fill: var(--white); }
</style>