vending-machine-game/index.html

<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
    <meta name="theme-color" content="#0d1412">
    <title>عملیات مشهد | روبات مارکت</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;800&display=swap" rel="stylesheet">
</head>
<body>
<canvas id="world"></canvas>
<div id="loading">در حال ساختن شهر مشهد…</div>

<!-- Mission briefing over the map of Iran -->
<section id="briefing">
    <div class="brief-map"><canvas id="iran"></canvas></div>
    <div class="brief-panel">
        <small class="tag">عملیات ۰۱ · خراسان رضوی</small>
        <h1>عملیات مشهد</h1>
        <p class="sub">روبات مارکت · شکار دستگاه‌های وندینگ</p>
        <pre id="brief-text" aria-live="polite"></pre>
        <button id="start-mission" type="button">شروع عملیات</button>
        <p class="keys">حرکت: W A S D · دویدن: Shift · دوربین: ماوس · سوار و پیاده شدن: F · خرید: E · نقشه: M</p>
    </div>
</section>

<!-- In-game HUD -->
<div id="hud" hidden>
    <canvas id="compass" width="560" height="44"></canvas>
    <button id="minimap-button" type="button" aria-label="باز کردن نقشهٔ شهر (M)">
        <canvas id="minimap" width="220" height="220"></canvas>
        <span class="map-hint">نقشه · M</span>
    </button>
    <div id="location"><span id="street">مشهد</span><small id="mode-label">پیاده</small></div>
    <aside id="objectives">
        <h2>مأموریت‌ها</h2>
        <ol id="mission-list"></ol>
    </aside>
    <div id="waypoint" hidden><i></i><b id="waypoint-name"></b><span id="waypoint-distance"></span></div>
    <div id="prompt" hidden></div>
    <div id="subtitle" hidden><b id="subtitle-speaker"></b><span id="subtitle-text"></span></div>
    <div id="awards" aria-live="polite"></div>
    <div id="banner" hidden></div>
    <div id="status">
        <div class="stat"><small>بودجه</small><strong id="balance">۵۰۰</strong><span>هتومان</span></div>
        <div class="stat"><small>ساعت</small><strong id="clock">۰۸:۳۰</strong></div>
        <div class="stat" id="speed-stat" hidden><small>سرعت</small><strong id="speed">۰</strong><span>km/h</span></div>
    </div>
    <div id="rank"><b id="rank-name">تازه‌وارد</b><span id="xp">۰ XP</span><div class="bar"><i id="xp-bar"></i></div></div>
    <div id="toolbar">
        <button id="sound" type="button" aria-pressed="false">صدا: خاموش</button>
        <button id="quality" type="button">گرافیک</button>
        <button id="restart" type="button">شروع دوباره</button>
    </div>
    <div id="touch" hidden>
        <div id="stick"><i></i></div>
        <div class="touch-buttons">
            <button type="button" data-key="f">F</button>
            <button type="button" data-key="e">E</button>
            <button type="button" data-key="shift">دویدن</button>
        </div>
    </div>
    <div id="crosshair"></div>
    <small id="attribution">نقشه: © مشارکت‌کنندگان OpenStreetMap</small>
</div>

<!-- Payment at the card reader -->
<section id="payment" hidden>
    <small>کارت‌خوان روبات مارکت</small>
    <h2 id="payment-title"></h2>
    <p id="payment-step"></p>
    <div class="actions">
        <button id="swipe" type="button" disabled>کشیدن کارت · C</button>
        <button id="cancel-payment" type="button" class="ghost">انصراف</button>
    </div>
</section>

<dialog id="map-dialog">
    <header>
        <div class="tabs" role="tablist">
            <button type="button" role="tab" data-tab="city" aria-selected="true">مشهد · بوستان ملت</button>
            <button type="button" role="tab" data-tab="iran" aria-selected="false">ایران</button>
        </div>
        <button type="button" class="close" id="map-close" aria-label="بستن">✕</button>
    </header>
    <div class="map-body">
        <div class="map-view">
            <canvas id="fullmap"></canvas>
            <canvas id="iran-map" hidden></canvas>
            <p class="map-help">کشیدن: جابه‌جایی · چرخ ماوس: زوم · کلیک روی دستگاه: انتخاب</p>
        </div>
        <aside class="map-side">
            <h3>دستگاه‌های روبات مارکت</h3>
            <div id="machine-detail" hidden>
                <h4 id="detail-name"></h4>
                <p id="detail-address"></p>
                <p id="detail-meta"></p>
                <p id="detail-products"></p>
                <button id="route-button" type="button">مسیریابی تا اینجا</button>
            </div>
            <ul id="machine-list"></ul>
        </aside>
    </div>
</dialog>

<dialog id="shop">
    <header>
        <div>
            <small id="shop-category"></small>
            <h2 id="shop-name"></h2>
            <p id="shop-address"></p>
        </div>
        <button type="button" class="close" id="shop-close" aria-label="بستن">✕</button>
    </header>
    <p id="shop-note"></p>
    <div id="products"></div>
    <p class="rate">۱۰ هتومان = ۱۰۰٬۰۰۰ ریال · مبالغ نمایشی‌اند و پرداخت واقعی انجام نمی‌شود.</p>
</dialog>

<dialog id="end">
    <small id="end-tag">پایان عملیات</small>
    <h2 id="end-title"></h2>
    <p id="end-text"></p>
    <ul id="end-stats"></ul>
    <div class="actions">
        <button id="again" type="button">عملیات دوباره</button>
        <button id="continue" type="button" class="ghost">ادامهٔ گشت در شهر</button>
    </div>
</dialog>
<script type="module" src="/src/main.js"></script>
</body>
</html>