// Shared bits used by all three directions.
const { useState, useEffect, useRef, useMemo } = React;
// --- tiny utilities ---
window.cx = (...parts) => parts.filter(Boolean).join(' ');
window.fmtTime = (s) => {
const m = Math.floor(s / 60);
const ss = String(s % 60).padStart(2, '0');
return `${m}:${ss}`;
};
window.fmtCount = (n) => {
if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, '') + 'B';
return String(n);
};
// Subtle striped placeholder — used when we want a board preview and don't
// want to hand-draw game-specific art. Monospace explainer inside.
window.Placeholder = function Placeholder({ label, h = 120, tone = '#e8e8e0' }) {
const id = useMemo(() => 'p' + Math.random().toString(36).slice(2, 8), []);
return (
[{label}]
);
};
// Streak flame, used across directions
window.StreakBadge = function StreakBadge({ n, size = 16 }) {
return (
{n}
);
};
// A tiny real-looking Kelimely row (solved) — used as ambient art
window.TileRow = function TileRow({ letters, states, size = 22, gap = 3 }) {
const colors = {
c: '#3a9e5c', p: '#c79a1b', a: '#d0d0c8', e: 'transparent', f: '#ffffff',
};
const textColors = { c: '#fff', p: '#fff', a: '#555', e: 'transparent', f: '#222' };
const borderColors = { c: 'transparent', p: 'transparent', a: 'transparent', e: '#d0d0c8', f: '#9a9a92' };
return (
{letters.map((l, i) => {
const s = states[i] || 'e';
return (
{l}
);
})}
);
};
// --- THEMES ---
// Each direction supports a light + dark variant consistent with the live app's
// tokens in src/style.css (paper-white / deep navy).
window.THEMES = {
light: {
bg: '#f5f5f0', bg2: '#edeee8', paper: '#fbfbf6',
ink: '#1f1f1a', inkSoft: '#6a6a62', line: '#dddcd3',
accent: '#1f1f1a',
},
dark: {
bg: '#0c0d12', bg2: '#141620', paper: '#181a24',
ink: '#e8ebf3', inkSoft: '#8088a0', line: '#232636',
accent: '#e8ebf3',
},
};
// Keep the player's "position" persistent across reloads
window.useLocal = function useLocal(key, initial) {
const [v, setV] = useState(() => {
try {
const raw = localStorage.getItem(key);
return raw == null ? initial : JSON.parse(raw);
} catch { return initial; }
});
useEffect(() => {
try { localStorage.setItem(key, JSON.stringify(v)); } catch {}
}, [key, v]);
return [v, setV];
};
// Shared top chrome used in all three directions — matches the live app's
// "Kelimely" wordmark + find-a-word link + theme switch structure.
window.AppHeader = function AppHeader({ theme, setTheme, T, variant }) {
const isDark = theme === 'dark';
return (
K
kelimely
Türkçe kelime oyunları · {variant}
e.preventDefault()} style={{
fontSize: 12, fontWeight: 600, color: T.inkSoft,
textDecoration: 'none', padding: '7px 12px',
border: `1px solid ${T.line}`, borderRadius: 8,
display: 'inline-flex', alignItems: 'center', gap: 6,
}}>
Kelime Bulucu
);
};