getpicked 1.0.0

package/index.js

@@ -0,0 +1,655 @@
+#!/usr/bin/env node
+
+import blessed from "blessed";
+import WebSocket from "ws";
+
+const isLocal = process.argv.includes("--local");
+const SERVER_URL = process.env.PORTO_SERVER ||
+  (isLocal ? "ws://localhost:8111/ws" : "wss://shapely-insect.spcf.app/ws");
+
+// ─── Colors ──────────────────────────────────────────────────────
+const C = {
+  bg: "#0a0a0f",
+  panel: "#111118",
+  border: "#2a2a3a",
+  dim: "#444466",
+  text: "#8888aa",
+  bright: "#bbbbdd",
+  white: "#ffffff",
+  green: "#22cc66",
+  red: "#ee4444",
+  yellow: "#eebb33",
+  cyan: "#44dddd",
+  purple: "#aa66ff",
+  orange: "#ee8833",
+  dark: "#181820",
+};
+
+// ─── Screen ──────────────────────────────────────────────────────
+const screen = blessed.screen({
+  smartCSR: true,
+  title: "Porto",
+  fullUnicode: true,
+});
+
+// Track scene-specific key handlers so we can cleanly remove them
+let sceneKeyHandlers = [];
+
+function onKey(keys, fn) {
+  screen.key(keys, fn);
+  sceneKeyHandlers.push({ keys, fn });
+}
+
+function clearSceneKeys() {
+  for (const handler of sceneKeyHandlers) {
+    if (handler._keypressHandler) {
+      screen.removeListener("keypress", handler._keypressHandler);
+    } else {
+      screen.unkey(handler.keys, handler.fn);
+    }
+  }
+  sceneKeyHandlers = [];
+}
+
+function clearScreen() {
+  clearSceneKeys();
+  // Detach all children
+  while (screen.children.length) {
+    screen.children[0].detach();
+  }
+}
+
+// Global exit
+screen.key(["C-c"], () => process.exit(0));
+
+// ═══════════════════════════════════════════════════════════════════
+//  MAIN MENU
+// ═══════════════════════════════════════════════════════════════════
+
+let username = "";
+
+function showMainMenu() {
+  clearScreen();
+
+  const container = blessed.box({
+    parent: screen,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    style: { bg: C.bg },
+  });
+
+  // ASCII logo
+  const logoLines = [
+    "██████╗  ██████╗ ██████╗ ████████╗ ██████╗ ",
+    "██╔══██╗██╔═══██╗██╔══██╗╚══██╔══╝██╔═══██╗",
+    "██████╔╝██║   ██║██████╔╝   ██║   ██║   ██║",
+    "██╔═══╝ ██║   ██║██╔══██╗   ██║   ██║   ██║",
+    "██║     ╚██████╔╝██║  ██║   ██║   ╚██████╔╝",
+    "╚═╝      ╚═════╝ ╚═╝  ╚═╝   ╚═╝    ╚═════╝",
+  ];
+
+  blessed.box({
+    parent: container,
+    top: Math.max(2, Math.floor(screen.height / 2) - 10),
+    left: "center",
+    width: 48,
+    height: logoLines.length,
+    content: logoLines.join("\n"),
+    tags: true,
+    style: { fg: C.purple, bg: C.bg },
+  });
+
+  // Subtitle
+  blessed.box({
+    parent: container,
+    top: Math.max(2, Math.floor(screen.height / 2) - 10) + logoLines.length + 1,
+    left: "center",
+    width: 30,
+    height: 1,
+    content: "{center}the raffle game{/center}",
+    tags: true,
+    style: { fg: C.dim, bg: C.bg },
+  });
+
+  // Menu
+  const menuItems = [
+    {
+      label: username ? `Change name` : "Set username",
+      hint: username ? `  (${username})` : "",
+      action: () => showUsernameInput(),
+    },
+    {
+      label: "Join lobby",
+      hint: "",
+      disabled: !username,
+      action: () => showLobby(),
+    },
+    {
+      label: "Quit",
+      hint: "",
+      action: () => process.exit(0),
+    },
+  ];
+
+  let sel = username ? 1 : 0;
+
+  const menuTop = Math.max(2, Math.floor(screen.height / 2) - 10) + logoLines.length + 4;
+
+  const menuBox = blessed.box({
+    parent: container,
+    top: menuTop,
+    left: "center",
+    width: 40,
+    height: menuItems.length * 2 + 2,
+    tags: true,
+    style: { bg: C.bg },
+  });
+
+  function renderMenu() {
+    let out = "";
+    menuItems.forEach((item, i) => {
+      const selected = i === sel;
+      const disabled = item.disabled;
+
+      if (selected && !disabled) {
+        out += `  {${C.cyan}-fg}{bold}  ▸ ${item.label}{/bold}{/}`;
+        if (item.hint) out += `{${C.dim}-fg}${item.hint}{/}`;
+        out += "\n\n";
+      } else if (disabled) {
+        out += `  {${C.dim}-fg}    ${item.label}  {/}`;
+        if (selected) out += `{${C.dim}-fg}(set name first){/}`;
+        out += "\n\n";
+      } else {
+        out += `  {${C.text}-fg}    ${item.label}{/}`;
+        if (item.hint) out += `{${C.dim}-fg}${item.hint}{/}`;
+        out += "\n\n";
+      }
+    });
+    menuBox.setContent(out);
+    screen.render();
+  }
+
+  onKey(["up", "k"], () => {
+    sel = (sel - 1 + menuItems.length) % menuItems.length;
+    renderMenu();
+  });
+
+  onKey(["down", "j"], () => {
+    sel = (sel + 1) % menuItems.length;
+    renderMenu();
+  });
+
+  onKey(["enter", "return"], () => {
+    const item = menuItems[sel];
+    if (item.disabled) return;
+    item.action();
+  });
+
+  // Keyboard hints at bottom
+  blessed.box({
+    parent: container,
+    bottom: 1,
+    left: "center",
+    width: 50,
+    height: 1,
+    content: "{center}{" + C.dim + "-fg}↑↓ navigate  ·  enter select  ·  ctrl-c quit{/}{/center}",
+    tags: true,
+    style: { bg: C.bg },
+  });
+
+  renderMenu();
+}
+
+// ═══════════════════════════════════════════════════════════════════
+//  USERNAME INPUT
+// ═══════════════════════════════════════════════════════════════════
+
+function showUsernameInput(thenJoin = false) {
+  clearScreen();
+
+  const container = blessed.box({
+    parent: screen,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    style: { bg: C.bg },
+  });
+
+  const dialog = blessed.box({
+    parent: container,
+    top: "center",
+    left: "center",
+    width: 50,
+    height: 13,
+    border: { type: "line" },
+    style: {
+      bg: C.panel,
+      border: { fg: C.purple },
+    },
+    tags: true,
+    shadow: true,
+  });
+
+  blessed.text({
+    parent: dialog,
+    top: 1,
+    left: "center",
+    content: "CHOOSE YOUR NAME",
+    style: { fg: C.bright, bg: C.panel, bold: true },
+  });
+
+  blessed.line({
+    parent: dialog,
+    top: 3,
+    left: 1,
+    right: 1,
+    width: "100%-4",
+    orientation: "horizontal",
+    style: { fg: C.border },
+  });
+
+  const inputBox = blessed.box({
+    parent: dialog,
+    top: 5,
+    left: 4,
+    right: 4,
+    height: 1,
+    tags: false,
+    style: { bg: C.dark },
+  });
+
+  const cursorEl = blessed.box({
+    parent: dialog,
+    top: 5,
+    left: 4,
+    width: 1,
+    height: 1,
+    style: { fg: 0, bg: 15 },
+  });
+
+  let inputValue = username;
+  let cursorPos = inputValue.length;
+
+  function renderInput() {
+    // Raw ANSI bright white + bold for the input text
+    inputBox.setContent(`\x1b[38;5;231;1m${inputValue}\x1b[0m`);
+    cursorEl.left = 4 + cursorPos;
+    cursorEl.setContent(inputValue[cursorPos] || " ");
+    screen.render();
+  }
+
+  blessed.text({
+    parent: dialog,
+    top: 8,
+    left: "center",
+    content: "Enter confirm  ·  Esc cancel",
+    style: { fg: C.dim, bg: C.panel },
+  });
+
+  const errText = blessed.text({
+    parent: dialog,
+    top: 10,
+    left: "center",
+    content: "",
+    style: { fg: C.red, bg: C.panel },
+  });
+
+  function submit() {
+    const trimmed = inputValue.trim();
+    if (!trimmed) {
+      errText.setContent("Name cannot be empty");
+      screen.render();
+      return;
+    }
+    username = trimmed.slice(0, 20);
+    if (thenJoin) showLobby();
+    else showMainMenu();
+  }
+
+  function cancel() {
+    if (thenJoin && !username) showMainMenu();
+    else showMainMenu();
+  }
+
+  // Single keypress handler for all input — avoids conflicts with screen.key()
+  function onKeypress(ch, key) {
+    if (!key) return;
+
+    if (key.name === "return" || key.name === "enter") {
+      submit();
+      return;
+    }
+    if (key.name === "escape") {
+      cancel();
+      return;
+    }
+    if (key.name === "backspace") {
+      if (cursorPos > 0) {
+        inputValue = inputValue.slice(0, cursorPos - 1) + inputValue.slice(cursorPos);
+        cursorPos--;
+      }
+    } else if (key.name === "delete") {
+      inputValue = inputValue.slice(0, cursorPos) + inputValue.slice(cursorPos + 1);
+    } else if (key.name === "left") {
+      if (cursorPos > 0) cursorPos--;
+    } else if (key.name === "right") {
+      if (cursorPos < inputValue.length) cursorPos++;
+    } else if (key.name === "home") {
+      cursorPos = 0;
+    } else if (key.name === "end") {
+      cursorPos = inputValue.length;
+    } else if (ch && !key.ctrl && !key.meta && ch.length === 1 && inputValue.length < 20) {
+      inputValue = inputValue.slice(0, cursorPos) + ch + inputValue.slice(cursorPos);
+      cursorPos++;
+    } else {
+      return;
+    }
+
+    errText.setContent("");
+    renderInput();
+  }
+
+  // Defer registration so the Enter key from the menu doesn't leak through
+  process.nextTick(() => {
+    screen.on("keypress", onKeypress);
+  });
+  sceneKeyHandlers.push({ _keypressHandler: onKeypress });
+
+  renderInput();
+}
+
+// ═══════════════════════════════════════════════════════════════════
+//  LOBBY
+// ═══════════════════════════════════════════════════════════════════
+
+function showLobby() {
+  clearScreen();
+
+  if (!username) {
+    return showUsernameInput(true);
+  }
+
+  const container = blessed.box({
+    parent: screen,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    style: { bg: C.bg },
+  });
+
+  // ── Header ──
+  const headerBox = blessed.box({
+    parent: container,
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: 3,
+    style: { bg: C.panel },
+    tags: true,
+    padding: { left: 1, right: 1 },
+    valign: "middle",
+  });
+
+  // ── Progress bar ──
+  const progressBox = blessed.box({
+    parent: container,
+    top: 3,
+    left: 0,
+    width: "100%",
+    height: 1,
+    style: { bg: C.bg },
+    tags: true,
+  });
+
+  // ── Player grid ──
+  const gridBox = blessed.box({
+    parent: container,
+    top: 4,
+    left: 0,
+    width: "100%",
+    height: "100%-7",
+    tags: true,
+    style: { bg: C.bg },
+    scrollable: true,
+    alwaysScroll: true,
+    mouse: true,
+    scrollbar: { style: { bg: C.dim } },
+    padding: { left: 2, right: 2, top: 1, bottom: 1 },
+  });
+
+  // ── Footer ──
+  const footerBox = blessed.box({
+    parent: container,
+    bottom: 0,
+    left: 0,
+    width: "100%",
+    height: 3,
+    style: { bg: C.panel },
+    tags: true,
+    padding: { left: 2, right: 2 },
+    valign: "middle",
+  });
+
+  // ── State ──
+  let ws = null;
+  let lobbyState = null;
+  let stateReceivedAt = null;
+  let myId = null;
+  let pingInterval = null;
+  let renderInterval = null;
+  let dead = false;
+
+  function leave() {
+    clearInterval(pingInterval);
+    clearInterval(renderInterval);
+    if (ws) {
+      try { ws.close(); } catch {}
+    }
+    showMainMenu();
+  }
+
+  onKey(["q", "escape"], leave);
+
+  // ── Connect ──
+  headerBox.setContent(`{center}{${C.yellow}-fg}⟳ Connecting...{/}{/center}`);
+  screen.render();
+
+  const wsUrl = `${SERVER_URL}?username=${encodeURIComponent(username)}`;
+  ws = new WebSocket(wsUrl);
+
+  ws.on("open", () => {
+    pingInterval = setInterval(() => {
+      if (ws.readyState === WebSocket.OPEN) {
+        ws.send(JSON.stringify({ type: "ping" }));
+      }
+    }, 5000);
+  });
+
+  ws.on("message", (raw) => {
+    const msg = JSON.parse(raw.toString());
+    if (msg.type === "lobby_state") {
+      if (msg.your_id) myId = msg.your_id;
+      lobbyState = msg;
+      stateReceivedAt = Date.now();
+      render();
+    }
+  });
+
+  ws.on("close", () => {
+    clearInterval(pingInterval);
+    dead = true;
+    headerBox.setContent(`{center}{${C.red}-fg}● Disconnected{/}{/center}`);
+    footerBox.setContent(`{center}{${C.dim}-fg}Press Q or Esc to return{/}{/center}`);
+    screen.render();
+  });
+
+  ws.on("error", () => {
+    clearInterval(pingInterval);
+    dead = true;
+    headerBox.setContent(`{center}{${C.red}-fg}● Connection failed — is the server running?{/}{/center}`);
+    footerBox.setContent(`{center}{${C.dim}-fg}Press Q or Esc to return{/}{/center}`);
+    screen.render();
+  });
+
+  // Timer refresh
+  renderInterval = setInterval(() => {
+    if (lobbyState && !dead) render();
+  }, 200);
+
+  // 256-color index 231 = true #ffffff white, NOT remappable by terminal themes
+  // (palette indices 0-15 like SGR 97 are theme-dependent and render as grey)
+  const W = "\x1b[38;5;231m";
+  const B = "\x1b[1m";
+  const R = "\x1b[0m";
+
+  function render() {
+    if (!lobbyState) return;
+
+    const { state, players, player_count, max_players, time_remaining, countdown_remaining, winner_id } = lobbyState;
+
+    const elapsed = (Date.now() - stateReceivedAt) / 1000;
+
+    // ── Header ── uses {|} for left/right split
+    if (state === "waiting") {
+      const t = Math.max(0, Math.ceil(time_remaining - elapsed));
+      const lid = lobbyState.lobby_id;
+      headerBox.setContent(
+        `{${C.green}-fg}● LOBBY{/} {${C.dim}-fg}#${lid}{/}{|}${W}${player_count}${R}{${C.dim}-fg}/${max_players}{/}  {${C.yellow}-fg}⏱ ${t}s{/}`
+      );
+      const barW = screen.width;
+      const filled = Math.round((player_count / max_players) * barW);
+      progressBox.setContent(
+        `{${C.green}-fg}${"▀".repeat(Math.min(filled, barW))}{/}` +
+        `{${C.dark}-fg}${"▀".repeat(Math.max(0, barW - filled))}{/}`
+      );
+    } else if (state === "countdown") {
+      const t = Math.max(0, Math.ceil(countdown_remaining - elapsed));
+      const pips = Array.from({ length: 10 }, (_, i) =>
+        i < t ? `{${C.orange}-fg}◆{/}` : `{${C.dim}-fg}◇{/}`
+      ).join("");
+      headerBox.setContent(
+        `{center}{${C.orange}-fg}{bold}✦ RAFFLE ✦{/bold}  ${pips}  {${C.yellow}-fg}${t}s{/}{/center}`
+      );
+      progressBox.setContent(`{${C.orange}-fg}${"▀".repeat(screen.width)}{/}`);
+    } else if (state === "reveal") {
+      headerBox.setContent(
+        `{center}{${C.green}-fg}{bold}✦ WINNER REVEALED ✦{/bold}{/}{/center}`
+      );
+      progressBox.setContent(`{${C.green}-fg}${"▀".repeat(screen.width)}{/}`);
+    } else {
+      headerBox.setContent(
+        `{center}{${C.green}-fg}{bold}✦ RAFFLE COMPLETE ✦{/bold}{/}{/center}`
+      );
+      progressBox.setContent(`{${C.green}-fg}${"▀".repeat(screen.width)}{/}`);
+    }
+
+    // ── Grid ── uses raw ANSI for white names
+    const colW = 26;
+    const availW = gridBox.width - 4;
+    const cols = Math.max(1, Math.floor(availW / colW));
+    const lines = [];
+    let row = "";
+    let c = 0;
+
+    for (const player of players) {
+      let dot, nameAnsi;
+
+      if (state === "waiting") {
+        if (player.status === "online") {
+          dot = `{${C.green}-fg}●{/}`;
+          nameAnsi = player.id === myId ? `${W}${B}` : `${W}`;
+        } else {
+          dot = `{${C.dim}-fg}●{/}`;
+          nameAnsi = `{${C.dim}-fg}`;
+        }
+      } else if (state === "countdown") {
+        // All dots dark during countdown — suspense, no winner known
+        dot = `{${C.dark}-fg}●{/}`;
+        nameAnsi = `{${C.dark}-fg}`;
+      } else if (state === "reveal") {
+        if (player.id === winner_id) {
+          dot = `${W}●${R}`;
+          nameAnsi = `${W}${B}`;
+        } else {
+          dot = `{${C.dark}-fg}●{/}`;
+          nameAnsi = `{${C.dark}-fg}`;
+        }
+      } else {
+        if (player.id === winner_id) {
+          dot = `{${C.green}-fg}★{/}`;
+          nameAnsi = `{${C.green}-fg}{bold}`;
+        } else {
+          dot = `{${C.dark}-fg}●{/}`;
+          nameAnsi = `{${C.dark}-fg}`;
+        }
+      }
+
+      const name = player.username.length > 20
+        ? player.username.slice(0, 19) + "…"
+        : player.username;
+
+      const pad = " ".repeat(Math.max(1, 22 - name.length));
+      // Use {/} reset for tag-based styles, \x1b[0m for ANSI-based
+      const resetStr = nameAnsi.startsWith("\x1b") ? R : "{/}";
+      row += ` ${dot} ${nameAnsi}${name}${resetStr}${pad}`;
+      c++;
+
+      if (c >= cols) {
+        lines.push(row);
+        row = "";
+        c = 0;
+      }
+    }
+    if (row) lines.push(row);
+
+    if (players.length === 0) {
+      lines.push(`  {${C.dim}-fg}Waiting for the first player...{/}`);
+    }
+
+    gridBox.setContent(lines.join("\n\n"));
+
+    // ── Footer ── uses {|} for left/right split
+    if (state === "waiting") {
+      footerBox.setContent(
+        `{${C.text}-fg}You: ${W}${B}${username}${R}{|}{${C.dim}-fg}Q{/} {${C.text}-fg}leave lobby{/}`
+      );
+    } else if (state === "countdown") {
+      footerBox.setContent(
+        `{center}{${C.orange}-fg}{bold}✦ Drawing winner...{/bold}{/}{/center}`
+      );
+    } else if (state === "reveal" || state === "finished") {
+      const winner = players.find((p) => p.id === winner_id);
+      const wName = winner ? winner.username : "???";
+      const isMe = winner_id === myId;
+
+      if (state === "reveal") {
+        if (isMe) {
+          footerBox.setContent(`{center}{${C.green}-fg}{bold}★  YOU HAVE BEEN CHOSEN  ★{/bold}{/}{/center}`);
+        } else {
+          footerBox.setContent(`{center}{${C.orange}-fg}Winner: {bold}${wName}{/bold}{/}{/center}`);
+        }
+      } else {
+        if (isMe) {
+          footerBox.setContent(
+            `{center}{${C.green}-fg}{bold}★ WINNER: YOU ★{/bold}{/}  ` +
+            `{${C.dim}-fg}Q to return{/}{/center}`
+          );
+        } else {
+          footerBox.setContent(
+            `{center}${W}Winner: ${B}${wName}${R}  ` +
+            `{${C.dim}-fg}Q to return{/}{/center}`
+          );
+        }
+      }
+    }
+
+    screen.render();
+  }
+}
+
+// ─── Go ──────────────────────────────────────────────────────────
+showMainMenu();

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "getpicked",
+  "version": "1.0.0",
+  "description": "Join a lobby, enter the raffle, win the draw",
+  "bin": {
+    "getpicked": "./index.js"
+  },
+  "type": "module",
+  "keywords": ["raffle", "game", "multiplayer", "terminal", "cli"],
+  "license": "MIT",
+  "files": ["index.js"],
+  "dependencies": {
+    "blessed": "^0.1.81",
+    "blessed-contrib": "^4.11.0",
+    "ws": "^8.16.0"
+  }
+}