ik/rf4-spotter
1
0
Fork 0
Code Issues Pull Requests Actions 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/PageHero.astro
+3 -3
View File
@@ -1,9 +1,9 @@
---
import FishingIcon from "./FishingIcon.astro";
import FishSilhouette from "./FishSilhouette.astro";
const { eyebrow, title, description, variant, count } = Astro.props as { eyebrow: string; title: string; description?: string; variant?: "water" | "fish"; count?: number };
import WaterbodyMark from "./WaterbodyMark.astro";
const { eyebrow, title, description, variant, count, identity = title } = Astro.props as { eyebrow: string; title: string; description?: string; variant?: "water" | "fish"; count?: number; identity?: string };
---
<section class:list={["catalog-hero content-grid", { "catalog-hero--illustrated": variant }]}>
<div class="catalog-hero__copy"><span class="overline">{eyebrow}</span><h1>{title}</h1>{description && <p>{description}</p>}</div>
{variant && <div class="catalog-hero__seal" aria-hidden="true"><span>{variant === "water" ? <FishingIcon name="ripple" size={54} /> : <FishSilhouette name={title} size={92} />}</span>{typeof count === "number" && <><strong>{String(count).padStart(2,"0")}</strong><small>{variant === "water" ? "водоёмов" : "видов рыб"}</small></>}</div>}
{variant && <div class="catalog-hero__seal" aria-hidden="true"><span>{variant === "water" ? <WaterbodyMark identity={identity} size={94} /> : <FishSilhouette name={identity} size={92} />}</span>{typeof count === "number" && <><strong>{String(count).padStart(2,"0")}</strong><small>{variant === "water" ? "водоёмов" : "видов рыб"}</small></>}</div>}
</section>
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>
apps/web/src/lib/waterbody-visuals.ts
+23
View File
@@ -0,0 +1,23 @@
export type WaterbodyVisual = {
shore: number;
waves: number;
markerX: number;
markerY: number;
code: string;
};
export function stableVisualHash(identity: string): number {
return [...identity.trim().toLocaleLowerCase("ru")]
.reduce((hash, char) => Math.imul(hash ^ (char.codePointAt(0) ?? 0), 16777619) >>> 0, 2166136261);
}
export function waterbodyVisual(identity: string): WaterbodyVisual {
const hash = stableVisualHash(identity || "waterbody");
return {
shore: hash % 8,
waves: 1 + ((hash >>> 4) % 3),
markerX: 32 + ((hash >>> 8) % 59),
markerY: 18 + ((hash >>> 15) % 23),
code: hash.toString(36).toUpperCase().padStart(2, "0").slice(-2),
};
}
apps/web/src/pages/fish/[slug].astro
+1 -1
View File
@@ -22,6 +22,6 @@ const schema = fish ? { "@context":"https://schema.org", "@type":"CollectionPage
---
<Layout title={fish ? `Где ловить ${fish.name_ru} в RF4 — свежие точки` : "Рыба не найдена — RF4 Spotter"} description={fish ? `Свежие точки ловли ${fish.name_ru} в Russian Fishing 4: водоёмы, координаты, приманки, активность и источники наблюдений.` : "Такого вида рыбы нет в каталоге RF4 Spotter."} noindex={!fish || unavailable} structuredData={schema} errorPage={!fish || unavailable}>
<a class="back" href="/fish">← Все виды рыб</a>
<PageHero eyebrow="Свежие данные за 72 часа" title={fish?.name_ru ?? "Рыба не найдена"} description={fish ? `${items.length} ${plural(items.length,["активная точка","активные точки","активных точек"])} на ${waters.length} ${plural(waters.length,["водоёме","водоёмах","водоёмах"])}.` : undefined} />
<PageHero eyebrow="Свежие данные за 72 часа" title={fish?.name_ru ?? "Рыба не найдена"} description={fish ? `${items.length} ${plural(items.length,["активная точка","активные точки","активных точек"])} на ${waters.length} ${plural(waters.length,["водоёме","водоёмах","водоёмах"])}.` : undefined} variant={fish ? "fish" : undefined} identity={fish?.name_ru} />
{unavailable ? <StatePanel tone="unavailable" title="Данные временно недоступны" description="Каталог сохранён, но свежие наблюдения сейчас не получены." /> : !fish ? <StatePanel tone="error" title="Такой рыбы нет в справочнике" actionHref="/fish" actionLabel="Открыть каталог" /> : <section class="catalog-results content-grid"><aside><span class="overline">Водоёмы</span>{waters.length ? <nav>{waters.map(([waterSlug,name]) => <a href={`/waterbodies/${waterSlug}/${fish!.slug}`}>{name}</a>)}</nav> : <p>Свежих подтверждённых водоёмов пока нет.</p>}</aside><div>{items.length ? items.map(item => <ActivityCard item={item}/>) : <StatePanel contained={false} title="Свежих точек пока нет" description="Проверьте позже или посмотрите полевые сигналы на главной." />}</div></section>}
</Layout>
apps/web/src/pages/waterbodies/[slug].astro
+1 -1
View File
@@ -22,6 +22,6 @@ const schema = water ? { "@context":"https://schema.org", "@type":"CollectionPag
---
<Layout title={water ? `${water.name_ru} в RF4 — рыба и свежие точки` : "Водоём не найден — RF4 Spotter"} description={water ? `${water.name_ru} в Russian Fishing 4: свежие координаты, активные виды рыб, приманки и источники наблюдений.` : "Такого водоёма нет в каталоге RF4 Spotter."} noindex={!water || unavailable} structuredData={schema} errorPage={!water || unavailable}>
<a class="back" href="/waterbodies">← Все водоёмы</a>
<PageHero eyebrow="Свежие данные за 72 часа" title={water?.name_ru ?? "Водоём не найден"} description={water ? `${items.length} ${plural(items.length,["активная точка","активные точки","активных точек"])} для ${fishes.length} ${plural(fishes.length,["вида рыбы","видов рыб","видов рыб"])}.` : undefined} />
<PageHero eyebrow="Свежие данные за 72 часа" title={water?.name_ru ?? "Водоём не найден"} description={water ? `${items.length} ${plural(items.length,["активная точка","активные точки","активных точек"])} для ${fishes.length} ${plural(fishes.length,["вида рыбы","видов рыб","видов рыб"])}.` : undefined} variant={water ? "water" : undefined} identity={water?.slug} />
{unavailable ? <StatePanel tone="unavailable" title="Данные временно недоступны" description="Каталог сохранён, но свежие наблюдения сейчас не получены." /> : !water ? <StatePanel tone="error" title="Такого водоёма нет в справочнике" actionHref="/waterbodies" actionLabel="Открыть каталог" /> : <section class="catalog-results content-grid"><aside><span class="overline">Рыбы</span>{fishes.length ? <nav>{fishes.map(([fishSlug,name]) => <a href={`/waterbodies/${water!.slug}/${fishSlug}`}>{name}</a>)}</nav> : <p>Свежих подтверждённых видов пока нет.</p>}</aside><div>{items.length ? items.map(item => <ActivityCard item={item}/>) : <StatePanel contained={false} title="Свежих точек пока нет" description="Проверьте позже или посмотрите полевые сигналы на главной." />}</div></section>}
</Layout>
apps/web/src/pages/waterbodies/index.astro
+1 -1
View File
@@ -14,5 +14,5 @@ if (unavailable) {
---
<Layout title="Все водоёмы Russian Fishing 4 — RF4 Spotter" description="Каталог водоёмов RF4 со свежими точками, рыбами, приманками и прозрачными источниками данных.">
<PageHero eyebrow="Карта водоёмов RF4" title="Водоёмы" description="Откройте водоём, чтобы увидеть активные виды рыб и последние подтверждённые точки." variant="water" count={waters.length} />
{unavailable ? <StatePanel tone="unavailable" title="Каталог временно недоступен" description="Не показываем непроверенный список. Попробуйте обновить страницу позже." /> : <nav class="catalog-grid catalog-grid--waters content-grid" aria-label="Водоёмы">{waters.map((water,index) => <a href={`/waterbodies/${water.slug}`}><span>Водоём · {String(index + 1).padStart(2,"0")}</span><strong>{water.name_ru}</strong><i>Открыть <b>→</b></i><WaterbodyMark name={water.name_ru}/></a>)}</nav>}
{unavailable ? <StatePanel tone="unavailable" title="Каталог временно недоступен" description="Не показываем непроверенный список. Попробуйте обновить страницу позже." /> : <nav class="catalog-grid catalog-grid--waters content-grid" aria-label="Водоёмы">{waters.map((water,index) => <a href={`/waterbodies/${water.slug}`}><span>Водоём · {String(index + 1).padStart(2,"0")}</span><strong>{water.name_ru}</strong><i>Открыть <b>→</b></i><WaterbodyMark identity={water.slug}/></a>)}</nav>}
</Layout>
apps/web/tests/unit/presentation.test.ts
+12
View File
@@ -4,6 +4,7 @@ import test from "node:test";
import { activityLevel, plural } from "../../src/lib/presentation.ts";
import { fishVisualFamily } from "../../src/lib/fish-visuals.ts";
import { tackleVisualKind, tackleVisualTone } from "../../src/lib/tackle-visuals.ts";
import { waterbodyVisual } from "../../src/lib/waterbody-visuals.ts";
test("activity levels share one complete 0-100 scale", () => {
assert.deepEqual(
@@ -34,3 +35,14 @@ test("tackle glyphs only infer a type from explicit name terms", () => {
);
assert.equal(tackleVisualTone("Spiker #2"), tackleVisualTone("spiker #2"));
});
test("waterbody fingerprints are stable, bounded and entity-specific", () => {
const kuori = waterbodyVisual("kuori");
assert.deepEqual(kuori, waterbodyVisual(" KUORI "));
assert.notDeepEqual(kuori, waterbodyVisual("vyunok"));
assert.ok(kuori.shore >= 0 && kuori.shore < 8);
assert.ok(kuori.waves >= 1 && kuori.waves <= 3);
assert.ok(kuori.markerX >= 32 && kuori.markerX <= 90);
assert.ok(kuori.markerY >= 18 && kuori.markerY <= 40);
assert.match(kuori.code, /^[0-9A-Z]{2}$/);
});