/* ============================================================
$LAND — UI components
============================================================ */
const D = window.LandData;
const { Tile } = window.Land;
const F = D.fmt;
const rarByKey = (k) => D.rarities.find(r => r.key === k);
/* ---------- small helpers ---------- */
function RarityBadge({ rk, size }) {
const r = rarByKey(rk);
const sm = size === 'sm';
return (
{r.label}
);
}
function varForRarity(rk) { return 'var(--r-' + rk + ')'; }
function hexA(v, a) { return v; } // var() can't take alpha; fall back to solid (used sparingly)
function Addr({ a, n = 4, copy = true }) {
const [c, setC] = React.useState(false);
return (
{ if (!copy) return; e.stopPropagation(); navigator.clipboard && navigator.clipboard.writeText(a); setC(true); setTimeout(() => setC(false), 900); }}
title={a}>
{c ? 'copied ✓' : F.addr(a, n)}
);
}
function ExtLink({ label, href }) {
return e.stopPropagation()} title={href}>{label} ↗;
}
function Spark({ up }) {
return {up ? '▲' : '▼'};
}
/* ---------- honest empty state (no data yet / before launch) ---------- */
function EmptyState({ text }) {
return (
{text}
);
}
/* ---------- countdown ---------- */
function useCountdown(ts) {
const [now, setNow] = React.useState(Date.now());
React.useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []);
let d = Math.max(0, ts - now);
const h = Math.floor(d / 3600000); d -= h * 3600000;
const m = Math.floor(d / 60000); d -= m * 60000;
const s = Math.floor(d / 1000);
return { h, m, s, pad: (n) => String(n).padStart(2, '0') };
}
/* ---------- LOGO ---------- */
function Logo({ size = 38 }) {
return (
$LAND
NON-RENEWABLE RESOURCE
);
}
/* ---------- HEADER ---------- */
function Header({ wallet, onConnect, onDisconnect, onAcquire, onNav, route }) {
return (
{ e.preventDefault(); onNav(''); }}>
{[['𝕏', 'https://x.com/norenewableland'], ['pump', 'https://pump.fun/coin/' + D.LAND_MINT], ['Program ↗', 'https://solscan.io/account/' + D.PROGRAM_ID]].map(([l, h]) => (
{l}
))}
{wallet
?
:
}
);
}
function McBadge() {
const s = D.stats;
return (
MARKET CAP
{F.usd(s.marketcap)}
0} /> {Math.abs(s.mcChange)}%
);
}
function PhantomIcon() {
return ;
}
/* ============================================================
LAND MAP — top-down grid
============================================================ */
function cellHash(i) { return ((i * 2654435761) >>> 0) % 100 / 100; }
function LandMap({ onSelect, density }) {
const [tip, setTip] = React.useState(null);
const wrapRef = React.useRef(null);
const [box, setBox] = React.useState({ w: 900, h: 560 });
React.useEffect(() => {
if (!wrapRef.current) return;
const ro = new ResizeObserver((ents) => { for (const e of ents) setBox({ w: e.contentRect.width, h: e.contentRect.height }); });
ro.observe(wrapRef.current);
setBox({ w: wrapRef.current.clientWidth, h: wrapRef.current.clientHeight });
return () => ro.disconnect();
}, []);
// Keep cells SQUARE; derive how many cols/rows fit the container at `density`
// px per cell. The grid count adapts to the screen — bigger screen → more
// cells — and fills the panel with no empty margins. This is purely a
// VISUAL remap; the underlying ownership data (D.cells over MAP_W×MAP_H) is
// unchanged and just sampled onto the responsive grid.
const gap = 2;
const cell = Math.max(12, density || 20);
const cols = Math.max(8, Math.floor((box.w + gap) / (cell + gap)));
const rows = Math.max(6, Math.floor((box.h + gap) / (cell + gap)));
const srcW = D.MAP_W, srcH = D.MAP_H;
const sample = (x, y) => {
const sx = Math.min(srcW - 1, Math.floor(x / cols * srcW));
const sy = Math.min(srcH - 1, Math.floor(y / rows * srcH));
return D.cells[sy * srcW + sx];
};
const out = [];
for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) {
const i = y * cols + x;
const owner = sample(x, y);
if (owner === null || owner === undefined) { out.push(); continue; }
const h = D.holderById[owner];
const r = rarByKey(h.rarity);
out.push(
{ const b = e.currentTarget.getBoundingClientRect(); setTip({ x: b.left + b.width / 2, y: b.top, h }); }}
onClick={() => onSelect(h)}>
{r.glow >= 3 && }
);
}
}
const gridW = cols * cell + (cols - 1) * gap;
const gridH = rows * cell + (rows - 1) * gap;
return (
setTip(null)}>
{out}
{D.holders.length === 0 && (
Land not claimed yet
{D.loaded ? 'The map fills in as wallets acquire $LAND. Hold ≥100k $LAND to claim territory.' : 'Loading the map…'}
)}
{tip &&
}
);
}
function cellStyle(h, r, i) {
// two-tone faceted green, varied by rarity tint.
// PERF: cheap flat inset ring only — NO blur glow (0 0 Npx) shadows. Those
// recompute per-cell on every paint and tanked the 880-cell map. Rarity is
// signalled by a solid ring colour instead of a glow.
const greens = {
common: ['#7eb04f', '#5f9550'], uncommon: ['#73ad58', '#4f9272'],
rare: ['#6aa863', '#3f86b8'], epic: ['#7a9e6a', '#6a5fb0'], legendary: ['#9bb84e', '#be9a3a'],
}[h.rarity];
const g1 = greens[0], g2 = greens[1];
const ringW = { common: 0, uncommon: 1, rare: 1.4, epic: 1.6, legendary: 2 }[h.rarity];
const ac = varForRarity(h.rarity);
let shadow = `inset 1px 1px 0 rgba(255,255,255,.18), inset -1px -1px 0 rgba(0,0,0,.14)`;
if (ringW) shadow += `, inset 0 0 0 ${ringW}px ${ac}`;
return {
background: `linear-gradient(135deg, ${g1} 0 49%, ${g2} 49% 100%)`,
boxShadow: shadow,
};
}
function MapTip({ tip }) {
const h = tip.h, r = rarByKey(h.rarity);
return (
{F.addr(h.address, 4)}
Holds{F.land(h.vol)} $LAND
Territory{h.cells.length} cells
click for details →
);
}
/* ---------- rarity legend ---------- */
function RarityLegend() {
return (
{D.rarities.map(r => {
const count = D.holders.filter(h => h.rarity === r.key).length;
return (
{r.label}
{count}
);
})}
Pool to distribute now
{s.currentPool.toFixed(2)} SOL
split by territory share across all holders of ownership rights
Total paid out
{Math.round(s.totalPaid).toLocaleString('en-US')} SOL
Next round
{c.pad(c.h)}:{c.pad(c.m)}:{c.pad(c.s)}
map is finite · {s.claimedPct}% taken · {s.totalCells - s.ownedCells} cells free
);
}
/* ---------- claim progress bar ---------- */
function ClaimBar() {
const s = D.stats;
return (
Territory claimed
{s.claimedPct}%
{s.ownedCells} of {s.totalCells} cells claimed by {s.holders} holders. Unclaimed land is gone forever.
);
}
/* ============================================================
ROUNDS LEDGER
============================================================ */
function RoundsLedger() {
const fmtTime = (ts) => { const d = new Date(ts); const p = (n) => String(n).padStart(2, '0'); return p(d.getDate()) + '.' + p(d.getMonth() + 1) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes()); };
return (
Rounds ledger
transparency
RdTimeAmountTx
{D.rounds.length === 0
?
: D.rounds.map((r, i) => (
r.tx && window.open('https://solscan.io/tx/' + r.tx, '_blank')} title={r.tx ? 'Open round #' + r.round + ' on Solscan' : ''}>
#{r.round}
{r.ts ? fmtTime(r.ts) : '—'}
+{r.amount.toFixed(2)} SOL
{r.tx ? r.tx.slice(0, 4) + '…' : '—'}
))}
);
}
/* ============================================================
HOLDERS PANEL — rights of ownership
============================================================ */
function HoldersPanel({ onSelect }) {
return (
Ownership rights
{D.holders.length} holders
{D.holders.length === 0
?
: D.holders.map((h) => (
onSelect(h)}>
{h.rank}
{F.addr(h.address, 4)}
{h.cells.length}c · {h.buildingsCount}b · #{h.rank}
))}
);
}
/* ============================================================
BUILDINGS SECTION — 8 iso cards
============================================================ */
function BuildingsSection({ onSelect, compact }) {
if (compact) {
return (
8 building tokens
Buildings
{D.buildingDefs.map((b, i) => (
))}
);
}
return (
8 building tokens · medieval city
Buildings
Each building is its own pump.fun token. Build on your parcel to boost your share and rarity.
{D.buildingDefs.map((b, i) => )}
);
}
function BuildingCard({ b, i, onSelect }) {
const holders = b.holderCount;
const mc = b.marketCapUsd;
return (
);
}
/* ============================================================
FULL PAGES (hash routes) — scrollable, full info
============================================================ */
function PageShell({ title, sub, children }) {
return (
);
}
/* --- BUILDINGS PAGE: all 8 tokens, full cards --- */
function BuildingsPage({ onSelect }) {
return (
{D.buildingDefs.map((b, i) => )}
);
}
/* --- HOLDERS PAGE: full table of every holder --- */
function HoldersPage({ onSelect }) {
return (
{D.holders.length === 0 ?
: (
RankTileHolderWalletCellsBuilds$LAND
{D.holders.map((h, idx) => {
const r = rarByKey(h.rarity);
return (
onSelect(h)}>
#{h.rank}
{F.addr(h.address, 6)}
{F.addr(h.address, 4)}
{h.cells.length}
{h.buildingsCount}
{F.land(h.vol)}
);
})}
)}
);
}
/* --- ROUNDS PAGE: full payout history --- */
function RoundsPage() {
const fmtTime = (ts) => { const d = new Date(ts); const p = (n) => String(n).padStart(2, '0'); return p(d.getDate()) + '.' + p(d.getMonth() + 1) + ' ' + p(d.getHours()) + ':' + p(d.getMinutes()); };
const s = D.stats;
return (
{[['Total paid out', Math.round(s.totalPaid).toLocaleString('en-US') + ' SOL'],
['Current pool', s.currentPool.toFixed(2) + ' SOL'],
['Rounds', D.rounds.length]].map(([l, v]) => (
))}
RoundTimeAmountWalletsTx
{D.rounds.map((r, i) => (
window.open('https://solscan.io/tx/' + r.tx, '_blank')}>
#{r.round}
{fmtTime(r.ts)}
+{r.amount.toFixed(2)} SOL
{r.wallets}
{r.tx.slice(0, 4)}…
))}
);
}
Object.assign(window, {
Logo, Header, RarityBadge, Addr, ExtLink, Spark, useCountdown, varForRarity,
LandMap, RarityLegend, PayoutPanel, ClaimBar, RoundsLedger, HoldersPanel,
BuildingsSection, BuildingCard, rarByKey, cellStyle,
BuildingsPage, HoldersPage, RoundsPage,
});