views/gate.js

// Sign-in + robot picker (same pattern as the radio app).

import { state, render } from "../lib/state.js";
import { escapeHtml } from "../lib/util.js";

export function createGate({ robot, onPickedRobot }) {

    function GateView() {
        const wrap = document.createElement("div");
        wrap.className = "gate";
        const card = document.createElement("div");
        card.className = "gate-card";

        if (state.authChecking) {
            card.innerHTML = `
                <div class="big-emoji">🎮</div>
                <h1>Reachy Mini Simon</h1>
                <p>Checking sign-in…</p>`;
        } else if (!robot.isAuthenticated) {
            card.innerHTML = `
                <div class="big-emoji">🎮</div>
                <h1>Reachy Mini Simon</h1>
                <p>Sign in with Hugging Face to connect to your Reachy Mini.</p>
                <button class="btn primary btn-block" id="login">Sign in with Hugging Face</button>`;
            card.querySelector("#login").onclick = () => robot.login();
        } else if (!robot.robots.length) {
            card.innerHTML = `
                <div class="big-emoji">🤖</div>
                <h1>Looking for your robot…</h1>
                <p>Signed in as ${escapeHtml(robot.username || "—")}.</p>`;
        } else {
            card.innerHTML = `
                <div class="big-emoji">🤖</div>
                <h1>Pick a robot</h1>
                <p>Signed in as ${escapeHtml(robot.username || "—")}.</p>
                <div class="robot-list" id="rlist"></div>`;
            const list = card.querySelector("#rlist");
            for (const r of robot.robots) {
                const row = document.createElement("button");
                row.className = "row";
                row.innerHTML = `
                    <div class="emoji">🤖</div>
                    <div class="grow">
                        <div class="title">${escapeHtml(r.meta?.name || r.id)}</div>
                        <div class="meta">${escapeHtml(r.id)}</div>
                    </div>
                    <span class="chev">›</span>`;
                row.onclick = () => pickRobot(r);
                list.appendChild(row);
            }
        }
        wrap.appendChild(card);
        return wrap;
    }

    async function pickRobot(r) {
        try { await robot.startSession(r.id); }
        catch (e) { alert(`Session failed: ${e.message}`); return; }
        state.view = "game";
        onPickedRobot?.();
        render();
    }

    return { GateView };
}