// Konbini 108 — Screen components const SC = React; // alias for clarity // =============== SPLASH =============== function SplashScreen({ onEnter }) { return (
{/* Top: title + poster */}
24 HR / 営業中
KONBINI
108
コンビニ・イチマルハチ
{/* Cover poster — smaller on mobile */}
YANKEE SQUAT cover
NEW SINGLE
{/* Bottom: tagline + CTA */}
BUILD YOUR ORDER. GET MATCHED.
ご注文をどうぞ ≧◡≦
いらっしゃいませ _
); } // =============== AISLE / BROWSE =============== // Each pair is [background, burst] — chosen so the burst always contrasts // with the background (never yellow-on-cream, blue-on-sky, etc.) const BURST_PAIRS = [ ['bg-pink', 'burst-blue'], ['bg-mint', 'burst-red'], ['bg-cream', 'burst-red'], ['bg-sky', 'burst-red'], ['bg-peach', 'burst-blue'], ['bg-lilac', 'burst-orange'], ['bg-pink', 'burst-orange'], ['bg-mint', 'burst-orange'], ['bg-sky', 'burst-orange'], ['bg-peach', 'burst-red'], ['bg-lilac', 'burst-red'], ['bg-cream', 'burst-blue'], ]; // Compact horizontal card for mobile aisle — one per row function ProductCardMobile({ p, inCart, onAdd, onRemove }) { const hash = React.useMemo(() => { let h = 0; for (let i = 0; i < p.id.length; i++) h = (h * 31 + p.id.charCodeAt(i)) | 0; return Math.abs(h); }, [p.id]); const [bgCls, burstCls] = BURST_PAIRS[hash % BURST_PAIRS.length]; return (
{/* Thumbnail w/ burst */}
{/* Info */}
{p.jp}
{p.en}
¥{p.price}
{/* Add / Added toggle button */}
); } function ProductCard({ p, inCart, onAdd, onRemove }) { // Stable hash based on product id so the burst color/bg don't change between renders const hash = React.useMemo(() => { let h = 0; for (let i = 0; i < p.id.length; i++) h = (h * 31 + p.id.charCodeAt(i)) | 0; return Math.abs(h); }, [p.id]); const [bgCls, burstCls] = BURST_PAIRS[hash % BURST_PAIRS.length]; return (
{/* Photo frame */}
{/* Blast burst behind the emoji */}
{/* Price tag bottom-right */}
¥{p.price}
{/* RECOMMENDED ticker strip */}
{'\u00BB RECOMMENDED \u00BB RECOMMENDED \u00BB RECOMMENDED \u00BB RECOMMENDED \u00BB RECOMMENDED '}
{/* Info bar */}
{p.jp}
{p.en}
); } function AisleScreen({ cart, addItem, removeItem, onCheckout, maxItems }) { const [cat, setCat] = 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 tabsRef = SC.useRef(null); return (
{/* Store header */}
KONBINI 108
● OPEN 24H
{/* 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 list — single vertical column, compact rows */}
{products.map(p => ( itemCount < maxItems && addItem(p.id)} onRemove={() => removeItem(p.id)} /> ))}
{/* Floating basket bar */}
🛒 {itemCount > 0 && (
{itemCount}
)}
BASKET ({itemCount}/{maxItems})
¥{subtotal.toLocaleString()}
); } // =============== CART REVIEW =============== function CartScreen({ cart, addItem, removeItem, onBack, onCheckout }) { 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; return (
YOUR BASKET
かごの中身 / {items.length} ITEMS
{items.map(item => (
{item.jp}
{item.en}
¥{item.price}
))} {/* Subtotal */}
SUBTOTAL / 小計 ¥{subtotal.toLocaleString()}
TAX 10% / 税 ¥{tax.toLocaleString()}
TOTAL ¥{total.toLocaleString()}
{/* CTA bar */}
会計をする ・ ¥ CASH ONLY ¥
); } // =============== RECEIPT (with match reveal) =============== function ReceiptScreen({ cart, onShare, onRestart }) { const [printing, setPrinting] = useState(true); const [showMatch, setShowMatch] = 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; // Match: count tags 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 = useMemo( () => window.MEMBERS[Math.floor(Math.random() * window.MEMBERS.length)], [] ); const match = window.MEMBERS.find(m => m.id === matchId) || fallbackMember; const orderNum = useMemo(() => String(Math.floor(Math.random()*900000)+100000), []); const branch = useMemo(() => window.STORE_BRANCHES[Math.floor(Math.random()*window.STORE_BRANCHES.length)], []); useEffect(() => { const t1 = setTimeout(() => setPrinting(false), 1800); const t2 = setTimeout(() => setShowMatch(true), 2600); 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')}`; return (
{/* Top bar with X */}
{printing ? <>● PRINTING... : 'RECEIPT READY ★'}
{/* Receipt paper */}
{/* Header */}
KONBINI 108
コンビニ・イチマルハチ
{branch} BRANCH ・ {branch === 'SHIBUYA' ? '渋谷' : branch === 'SHINJUKU' ? '新宿' : branch === 'HARAJUKU' ? '原宿' : branch === 'NAKANO' ? '中野' : branch === 'KOENJI' ? '高円寺' : '下北'}店
TEL: 03-1080-0108
{/* Order meta */}
DATE / 日付{dateStr}
TIME / 時刻{timeStr}
ORDER # {orderNum}
REGISTER#108
{/* Items */}
{items.map(item => (
{item.en} ¥{(item.price * item.qty).toLocaleString()}
{item.jp}
))}
{/* Totals */}
SUBTOTAL / 小計¥{subtotal.toLocaleString()}
TAX (10%) / 税¥{tax.toLocaleString()}
TOTAL¥{total.toLocaleString()}
CASH / 現金¥{total.toLocaleString()}
CHANGE / おつり¥0
{/* Match reveal section */}
★ YOU MATCH WITH / 診断結果 ★
{/* Member portrait slot */}
{match.name} { e.target.style.display = 'none'; }} />
{match.name}
{match.jp}
of ONE OR EIGHT
YANKEE SQUAT ・ OUT NOW
{/* Footer */}
★ THANK YOU FOR YOUR PATRONAGE ★
ありがとうございました ≧◡≦
PLEASE COME AGAIN / またお越しください
{/* Barcode */}
KONBINI108 / 1OR8 / YANKEESQUAT / {orderNum}
{/* Newsletter signup card (sits below receipt, above fixed share bar) */}
{/* Share bar */}
SHARE YOUR RECEIPT ・ シェア
); } Object.assign(window, { SplashScreen, AisleScreen, CartScreen, ReceiptScreen, ProductCard, ProductCardMobile });