結 - YUI - | Real Match Dining
// --- アイコンコンポーネント (Lucideの簡易実装) --- const Icon = ({ path, className, ...props }) => ( {path} ); const GlassWater = (props) => } {...props} />; const Utensils = (props) => } {...props} />; const User = (props) => } {...props} />; const Sparkles = (props) => } {...props} />; const Heart = (props) => } {...props} />; const CheckCircle = (props) => } {...props} />; const ArrowRight = (props) => } {...props} />; const Wine = (props) => } {...props} />; const Beer = (props) => } {...props} />; const ChefHat = (props) => } {...props} />; const MessageCircle = (props) => } {...props} />; const Clock = (props) => } {...props} />; // --- データ定義 --- const APP_NAME = "結 - YUI -"; const CONCEPT_COPY = "アプリの画面よりも、目の前の笑顔を。"; const MOCK_TOPICS = [ "🍶 とりあえず、好きなお酒は？", "🏠 実家の味といえば？", "✈️ 次の連休、どこ行きたい？", "🎬 人生で一番泣いた映画は？", "🤐 実は私...〇〇フェチなんです", "💰 100万円あったら何に使う？", "🍜 ここの居酒屋の雰囲気どう？", "👶 子供の頃のあだ名は？" ]; const MOCK_USERS_MALE = [ { id: 1, name: "ケンジ", age: 28, job: "建築士", hobby: "古民家カフェ", drink: "日本酒", avatar: "bg-slate-700" }, { id: 2, name: "タカシ", age: 31, job: "商社", hobby: "ゴルフ", drink: "ハイボール", avatar: "bg-indigo-800" }, { id: 3, name: "ショウ", age: 26, job: "Web系", hobby: "サウナ", drink: "レモンサワー", avatar: "bg-blue-600" }, { id: 4, name: "ダイキ", age: 29, job: "公務員", hobby: "キャンプ", drink: "ビール", avatar: "bg-teal-700" }, ]; const MOCK_USERS_FEMALE = [ { id: 1, name: "サトミ", age: 26, job: "インテリア", hobby: "美術館", drink: "梅酒", avatar: "bg-rose-700" }, { id: 2, name: "ミホ", age: 29, job: "受付", hobby: "ヨガ", drink: "カシス", avatar: "bg-pink-600" }, { id: 3, name: "カナコ", age: 25, job: "保育士", hobby: "ディズニー", drink: "サングリア", avatar: "bg-orange-500" }, { id: 4, name: "ユキ", age: 30, job: "編集者", hobby: "読書", drink: "ワイン", avatar: "bg-purple-700" }, ]; // --- メインアプリ --- function App() { const [phase, setPhase] = useState('landing'); const [myProfile, setMyProfile] = useState({ name: '', gender: 'male' }); const [targetUsers, setTargetUsers] = useState([]); const [activeTab, setActiveTab] = useState('seats'); const [cheers, setCheers] = useState([]); const [vote, setVote] = useState(null); const handleJoin = () => { const targets = myProfile.gender === 'male' ? MOCK_USERS_FEMALE : MOCK_USERS_MALE; setTargetUsers(targets); setPhase('main'); }; const handleCheers = (userId) => { if (cheers.includes(userId)) return; setCheers([...cheers, userId]); }; // 1. LP / ランディング画面 const LandingScreen = () => (
全国初！リアル・マッチングシステム

{APP_NAME}

REAL MATCHING DINING

{CONCEPT_COPY}
「隠れ家」で始まる、
デジタルを超えた本物の出会い。

身分証確認済 完全個室
店主

本日の舞台

隠れ家酒場「灯 -AKARI-」

都会の喧騒を忘れる、再生された古民家空間。

); // 2. プロフィール入力 const ProfileScreen = () => (

入店手続き

setMyProfile({...myProfile, name: e.target.value})} />

※本サービスはリアルな店舗での体験を補助するツールです

); // 3. メイン画面 const MainScreen = () => (
結
現在: 歓談タイム
{activeTab === 'seats' && } {activeTab === 'talk' && } {activeTab === 'menu' && }
); const NavButton = ({ icon: Icon, label, active, onClick }) => ( ); const SeatsView = () => (

現在のミッション

目の前の方と乾杯しましょう！アプリ上で「乾杯」を送ると、相手に通知が届きます。

本日の同席者

{targetUsers.map((user) => (
{user.name[0]}

{user.name} {user.age}歳

{user.job}

好きなお酒: {user.drink} 趣味: {user.hobby}
))}
); const TalkTopics = () => { const [topic, setTopic] = useState("カードをタップして話題を注文"); const [animating, setAnimating] = useState(false); const drawTopic = () => { if(animating) return; setAnimating(true); setTopic("板前が選定中..."); setTimeout(() => { const t = MOCK_TOPICS[Math.floor(Math.random() * MOCK_TOPICS.length)]; setTopic(t); setAnimating(false); }, 800); }; return (

会話のお品書き

沈黙もまた一興ですが、
話題に困ったらこちらをどうぞ。

{topic}

タップして新しい話題を注文

); }; const ShopMenu = () => (

隠れ家酒場「灯 -AKARI-」

昭和初期の古民家をリノベーションした、
大人のための語らいの場。

店主のおすすめ

  • 自家製 燻製盛り合わせ 800円
  • 季節の土鍋ごはん 1,200円
  • 本日の日本酒三種飲み比べ 1,000円
※ご注文は近くのスタッフまでお声がけください

🎁 本日のカップル特典

マッチング成立したお二人には、当店特製のデザートプレートと次回来店時に使える「半個室確約チケット」をプレゼントいたします。

); // 4. 投票画面 const VotingScreen = () => (

FINAL SELECTION

今宵、盃を交わしたい人は？

これが最後の選択です。
直感を信じて選んでください。

{targetUsers.map((user) => ( ))}
); // 5. 結果画面 const ResultScreen = () => { const matchedUser = targetUsers.find(u => u.id === vote); return (
MATCHING

契り、成立。

{myProfile.gender === 'male' ? '🤵' : '👩'}
あなた
{matchedUser?.name[0]}
{matchedUser?.name}

おめでとうございます。
{matchedUser?.name} さんもあなたを選びました。

これより先は、画面を閉じて。
リアルな時間をお楽しみください。

スタッフにこの画面をご提示ください。
「特製デザート」をお持ちします。
); }; return ( <> {phase === 'landing' && } {phase === 'profile' && } {phase === 'main' && } {phase === 'voting' && } {phase === 'result' && } ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();