/* global React */
// House Hunt Diary — sample data + helpers shared across canvas & prototype.
const SAMPLE = [
{
id: 'p1',
title: 'Cedar bungalow with the porch swing',
label: 'Cedar bungalow',
neighborhood: 'Sellwood',
city: 'Portland, OR',
region: 'Inner SE',
price: 689000,
beds: 3, baths: 2, sqft: 1840,
source: 'Redfin',
saved: '2 days ago',
note: 'The kitchen is dated but the light in the front room is unreal.',
tags: ['light', 'walkable'],
status: 'shortlisted',
visibility: 'private',
color: '#c89770',
accent: '#8b5e3c',
commute: '22 min to downtown',
aspect: 1.10,
},
{
id: 'p2',
title: 'Mid-century on a corner lot',
label: 'Mid-century corner',
neighborhood: 'Mt Tabor',
city: 'Portland, OR',
region: 'Inner SE',
price: 825000,
beds: 4, baths: 2, sqft: 2100,
source: 'Zillow',
saved: 'yesterday',
note: '',
tags: ['mid-century'],
status: 'visited',
visibility: 'public',
color: '#9aaf94',
accent: '#4f6b4f',
commute: '28 min to downtown',
aspect: 0.78,
},
{
id: 'p3',
title: 'Two-bed loft above the bakery',
label: 'Bakery loft',
neighborhood: 'Pearl District',
city: 'Portland, OR',
region: 'NW',
price: 540000,
beds: 2, baths: 1, sqft: null,
source: 'private',
saved: '5 days ago',
note: 'Maya found it on Craigslist. No floorplan, ask for one.',
tags: ['loft', 'incomplete'],
status: null,
visibility: 'private',
color: '#b89978',
accent: '#6b4f37',
commute: null,
aspect: 1.32,
},
{
id: 'p4',
title: 'Stone cottage near the reservoir',
label: 'Stone cottage',
neighborhood: 'Mt Tabor',
city: 'Portland, OR',
region: 'Inner SE',
price: 720000,
beds: 3, baths: 2, sqft: 1620,
source: 'Redfin',
saved: 'a week ago',
note: 'Walkable to the reservoir loop. Roof was redone in 2022.',
tags: ['stone', 'reservoir'],
status: 'favorite',
visibility: 'public',
color: '#a8a098',
accent: '#5e554c',
commute: '26 min to downtown',
aspect: 0.85,
},
{
id: 'p5',
title: 'Craftsman with the wraparound',
label: 'Craftsman',
neighborhood: 'Alberta Arts',
city: 'Portland, OR',
region: 'NE',
price: 615000,
beds: 3, baths: 1, sqft: 1480,
source: 'Compass',
saved: '3 days ago',
note: '',
tags: ['craftsman'],
status: null,
visibility: 'private',
color: '#c2624a',
accent: '#7a3a26',
commute: '18 min to downtown',
aspect: 1.0,
},
{
id: 'p6',
title: 'Garden flat with the south light',
label: 'Garden flat',
neighborhood: 'Buckman',
city: 'Portland, OR',
region: 'Inner SE',
price: 425000,
beds: 1, baths: 1, sqft: 780,
source: 'private',
saved: '4 hours ago',
note: 'Maybe the most affordable thing in our list. Garden is huge.',
tags: ['garden'],
status: null,
visibility: 'private',
color: '#8a9b6f',
accent: '#4a5736',
commute: '14 min to downtown',
aspect: 1.5,
},
{
id: 'p7',
title: 'Brick four-square',
label: 'Brick four-square',
neighborhood: 'Irvington',
city: 'Portland, OR',
region: 'NE',
price: 875000,
beds: 4, baths: 3, sqft: 2480,
source: 'Zillow',
saved: 'a week ago',
note: '',
tags: ['family'],
status: 'shortlisted',
visibility: 'public',
color: '#a45c47',
accent: '#6a3520',
commute: '20 min to downtown',
aspect: 0.92,
},
{
id: 'p8',
title: 'Tiny A-frame on the bluff',
label: 'A-frame',
neighborhood: 'Linnton',
city: 'Portland, OR',
region: 'NW',
price: 489000,
beds: 2, baths: 1, sqft: null,
source: 'private',
saved: 'today',
note: 'Off-market. Owner is a friend of David. Worth visiting before listing.',
tags: ['off-market', 'incomplete'],
status: 'favorite',
visibility: 'private',
color: '#7d8f9f',
accent: '#3f4d5b',
commute: '34 min to downtown',
aspect: 1.18,
},
{
id: 'p9',
title: 'Apartment over the corner store',
label: 'Corner store flat',
neighborhood: 'Division',
city: 'Portland, OR',
region: 'Inner SE',
price: 379000,
beds: 1, baths: 1, sqft: 640,
source: 'Redfin',
saved: 'yesterday',
note: '',
tags: [],
status: null,
visibility: 'public',
color: '#cab68c',
accent: '#7a6539',
commute: '16 min to downtown',
aspect: 0.7,
},
];
// Pretty-print helpers
const fmt = {
price: (n) => n == null ? '—' : '$' + (n / 1000).toFixed(0) + 'k',
priceFull: (n) => n == null ? '—' : '$' + n.toLocaleString(),
facts: (p) => {
const parts = [];
if (p.beds) parts.push(p.beds + ' bd');
if (p.baths) parts.push(p.baths + ' ba');
if (p.sqft) parts.push(p.sqft.toLocaleString() + ' sf');
return parts;
},
};
// Tiny inline icons (stroke-based; warm ink color)
const I = {
bed: (s = 14) => (
),
bath: (s = 14) => (
),
sqft: (s = 14) => (
),
pin: (s = 14) => (
),
link: (s = 14) => (
),
note: (s = 14) => (
),
heart: (s = 14, filled) => (
),
bookmark: (s = 14, filled) => (
),
eye: (s = 14) => (
),
lock: (s = 14) => (
),
globe: (s = 14) => (
),
plus: (s = 14) => (
),
search: (s = 14) => (
),
close: (s = 14) => (
),
arrow: (s = 14) => (
),
external: (s = 14) => (
),
};
// A subtle, recognizable mini-map illustration. Not real geo — feels like a
// hand-drawn neighborhood diagram. Colors pull from --paper-2 / accent.
function MiniMap({ width = 240, height = 96, neighborhood = '', accent = '#c2624a', dim = false }) {
// deterministic seed from neighborhood
let s = 0; for (const c of (neighborhood || 'x')) s = (s * 31 + c.charCodeAt(0)) & 0xffff;
const r = (n) => { s = (s * 9301 + 49297) % 233280; return (s / 233280) * n; };
const roads = [];
for (let i = 0; i < 4; i++) roads.push({ y: 14 + i * 22 + r(8), w: 30 + r(60) });
const cross = [];
for (let i = 0; i < 5; i++) cross.push({ x: 18 + i * 50 + r(8), h: 30 + r(50) });
return (
);
}
Object.assign(window, { SAMPLE, fmt, I, MiniMap });