// Konbini 108 — Desktop layout variants // Used at >= 900px viewport. function useIsDesktop() { const [d, setD] = React.useState(() => typeof window !== 'undefined' && window.innerWidth >= 900); React.useEffect(() => { const onR = () => setD(window.innerWidth >= 900); window.addEventListener('resize', onR); return () => window.removeEventListener('resize', onR); }, []); return d; } // ============= DESKTOP SPLASH ============= function SplashDesktop({ onEnter }) { return (
{/* Top utility bar */}
KONBINI 108
● NOW OPEN ・ 営業中
{/* HERO grid: poster left, title right */}
{/* Left: poster */}
YANKEE SQUAT cover
NEW SINGLE
NOW PLAYING IN STORE ♪ ♪ ♪
{/* Right: title block */}
24 HR / 営業中
KONBINI
108
コンビニ・イチマルハチ
BUILD YOUR ORDER. GET MATCHED.
Pick up snacks, drinks, and after-hours essentials.
Your receipt reveals which member you match with ≧◡≦
いらっしゃいませ _
{/* Footer marquee */}
); } // ============= DESKTOP AISLE ============= function AisleDesktop({ cart, addItem, removeItem, onCheckout, maxItems }) { const [cat, setCat] = React.useState('snacks'); const products = window.PRODUCTS.filter(p => p.cat === cat); const itemCount = Object.values(cart).reduce((a,b) => a+b, 0); const subtotal = Object.entries(cart).reduce((acc, [id, qty]) => { const prod = window.PRODUCTS.find(p => p.id === id); return acc + (prod ? prod.price * qty : 0); }, 0); const cartItems = Object.entries(cart).map(([id, qty]) => ({ ...window.PRODUCTS.find(p => p.id === id), qty, })); return (
{/* Store header */}
KONBINI 108
● OPEN 24H ・ 営業中
{/* Main 2-col layout: shop left, cart sidebar right */}
{/* LEFT: shop */}
{/* Category tabs */}
{window.CATEGORIES.map(c => ( ))}
{/* Section header */}
{window.CATEGORIES.find(c => c.id === cat).en}
{window.CATEGORIES.find(c => c.id === cat).jp}
{products.length} ITEMS
{/* Product grid: 4 cols on desktop */}
{products.map(p => ( itemCount < maxItems && addItem(p.id)} onRemove={() => removeItem(p.id)} /> ))}
{/* RIGHT: cart sidebar */}
); } // ============= DESKTOP RECEIPT (cart screen skipped on desktop — sidebar already shows cart) ============= function ReceiptDesktop({ cart, onShare, onRestart }) { const [printing, setPrinting] = React.useState(true); const [showMatch, setShowMatch] = React.useState(false); const items = Object.entries(cart).map(([id, qty]) => ({ ...window.PRODUCTS.find(p => p.id === id), qty, })); const subtotal = items.reduce((a, i) => a + i.price * i.qty, 0); const tax = Math.round(subtotal * 0.10); const total = subtotal + tax; const tagCounts = {}; items.forEach(i => { (i.tags || []).forEach(t => { tagCounts[t] = (tagCounts[t] || 0) + i.qty; }); }); const matchId = Object.entries(tagCounts).sort((a,b) => b[1]-a[1])[0]?.[0]; // If no tagged items in cart, pick a random member as a graceful fallback const fallbackMember = React.useMemo( () => window.MEMBERS[Math.floor(Math.random() * window.MEMBERS.length)], [] ); const match = window.MEMBERS.find(m => m.id === matchId) || fallbackMember; const orderNum = React.useMemo(() => String(Math.floor(Math.random()*900000)+100000), []); const branch = React.useMemo(() => window.STORE_BRANCHES[Math.floor(Math.random()*window.STORE_BRANCHES.length)], []); React.useEffect(() => { const t1 = setTimeout(() => setPrinting(false), 1500); const t2 = setTimeout(() => setShowMatch(true), 2400); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); const now = new Date(); const dateStr = `${now.getFullYear()}/${String(now.getMonth()+1).padStart(2,'0')}/${String(now.getDate()).padStart(2,'0')}`; const timeStr = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`; const branchJP = { SHIBUYA:'渋谷', SHINJUKU:'新宿', HARAJUKU:'原宿', NAKANO:'中野', KOENJI:'高円寺', SHIMOKITA:'下北' }; return (
{/* Top bar */}
{printing ? <>● PRINTING... : '★ RECEIPT READY ★'}
{/* Centered receipt with match panel on side */}
{/* Receipt */}
KONBINI 108
コンビニ・イチマルハチ
{branch} BRANCH ・ {branchJP[branch] || ''}店
TEL: 03-1080-0108
DATE / 日付{dateStr}
TIME / 時刻{timeStr}
ORDER #{orderNum}
REGISTER#108
{items.map(item => (
{item.en} ¥{(item.price * item.qty).toLocaleString()}
{item.jp}
))}
SUBTOTAL / 小計¥{subtotal.toLocaleString()}
TAX (10%) / 税¥{tax.toLocaleString()}
TOTAL¥{total.toLocaleString()}
CASH / 現金¥{total.toLocaleString()}
CHANGE / おつり¥0
★ THANK YOU FOR YOUR PATRONAGE ★
ありがとうございました ≧◡≦
PLEASE COME AGAIN / またお越しください
KONBINI108 / 1OR8 / YANKEESQUAT / {orderNum}
{/* Match reveal column */}
★ YOU MATCH WITH / 診断結果 ★
{/* Portrait + name row */}
{/* Portrait slot */}
{match.name} { e.target.style.display = 'none'; }} />
{match.name}
{match.jp}
of ONE OR EIGHT
YANKEE SQUAT ・ OUT NOW
{/* Share */}
SHARE YOUR RECEIPT ・ シェア
{/* Newsletter signup */}
); } Object.assign(window, { useIsDesktop, SplashDesktop, AisleDesktop, ReceiptDesktop });