// Featured-treatment variations for emphasizing Eklemce + Düello.
// All three are the SAME width (1060) so they stack cleanly on the canvas.
const FW = 1060; // artboard width
const T = window.THEMES.light;
// Shared: the existing Günün Oyunu hero tile (a visual anchor so the
// variations are shown in context, not floating alone).
function FeaturedDailyTile({ compact = false }) {
const g = window.GAMES.find(x => x.id === 'kelimely');
return (
Günün Oyunu
{g.name}
{g.desc}
Oyna
);
}
// ═══════════════════════════════════════════════════════════════
// OPTION 1 — Featured Trio (differentiated hero row)
// Same 3-cell footprint as current, but Eklemce and Düello each get
// their own visual ritual instead of cloning the featured card.
// ═══════════════════════════════════════════════════════════════
function OptionFeaturedTrio() {
const duello = GAMES.find(g => g.id === 'duello');
const eklemce = GAMES.find(g => g.id === 'eklemce');
return (
{/* Düello — "Live" multiplayer card */}
{/* pulsing live dot */}
Canlı
{/* Two opponent avatars */}
{['#E85A6D', '#6B9CF5'].map((c, i) => (
{['A','M'][i]}
))}
{duello.name}
2P
233 oyuncu çevrimiçi
{/* Eklemce — "Haftanın oyunu" with tappable block preview */}
✦ Haftanın Oyunu
{/* Three harf blocks */}
{['KA', 'LE', 'M'].map((b, i) => (
{b}
))}
{eklemce.name}
Harf bloklarını birleştir
);
}
// ═══════════════════════════════════════════════════════════════
// OPTION 2 — Playable + Live pair under a ribbon
// Eklemce has a mini interactive preview; Düello is a live card.
// Framed by a "Öne Çıkanlar" ribbon that visually separates them.
// ═══════════════════════════════════════════════════════════════
function OptionLivePlayable() {
const duello = GAMES.find(g => g.id === 'duello');
const eklemce = GAMES.find(g => g.id === 'eklemce');
const [blocks, setBlocks] = React.useState([
{ t: 'KE', picked: false }, { t: 'Lİ', picked: false },
{ t: 'ME', picked: false }, { t: 'CİK', picked: false },
{ t: 'YA', picked: false }, { t: 'ZI', picked: false },
]);
const assembled = blocks.filter(b => b.picked).map(b => b.t).join('');
const toggle = i => setBlocks(bs => bs.map((b, j) => j === i ? { ...b, picked: !b.picked } : b));
const reset = () => setBlocks(bs => bs.map(b => ({ ...b, picked: false })));
return (
);
}
function MiniDuelloBoard({ avatar, color, rows, states }) {
return (
{avatar}
Oyuncu {avatar}
{rows.map((r, i) => )}
);
}
// ═══════════════════════════════════════════════════════════════
// OPTION 3 — Öne Çıkanlar Ribbon (two wide landscape cards)
// Lowest risk: reuse the current card language but put them in a
// separately-framed strip that earns its own identity.
// ═══════════════════════════════════════════════════════════════
function OptionRibbon() {
const duello = GAMES.find(g => g.id === 'duello');
const eklemce = GAMES.find(g => g.id === 'eklemce');
return (
