chess.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8"/>
<title>360Chess</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #05060a;
      color: #f5f5f5;
      overflow: hidden;
    }

    .shell {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width: 100vw;
    }

    .topbar {
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      background: rgba(10, 12, 20, 0.9);
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(18px);
      font-size: 14px;
    }

    .top-left {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .logo {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      background: radial-gradient(circle at 20% 20%, #4f9cff, #7b5cff);
    }

    .top-right {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      opacity: 0.85;
    }

    .btn {
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.04);
      color: #f5f5f5;
      font-size: 12px;
      cursor: pointer;
    }

    .main {
      flex: 1;
      display: flex;
      min-height: 0;
    }

    .board-wrap {
      flex: 0 0 auto;
      width: min(70vh, 70vw);
      max-width: 640px;
      max-height: 640px;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .board {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: repeat(8, 1fr);
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6);
    }

    .square {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32px;
      cursor: pointer;
      user-select: none;
    }

    .light {
      background: #f0d9b5;
    }

    .dark {
      background: #b58863;
    }

    .square.selected {
      outline: 3px solid #4f9cff;
      outline-offset: -3px;
    }

    .square.highlight {
      box-shadow: inset 0 0 0 3px rgba(79, 156, 255, 0.7);
    }

    .side-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 16px;
      gap: 12px;
      background: radial-gradient(circle at top, #151827, #05060a);
      min-width: 260px;
      max-width: 360px;
    }

    .player-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 13px;
    }

    .clock {
      font-family: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 14px;
    }

    .moves {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 13px;
    }

    .move-row {
      display: flex;
      gap: 8px;
      margin-bottom: 4px;
    }

    .move-num {
      opacity: 0.6;
      width: 24px;
    }

    .move-san {
      flex: 1;
    }

    .chat {
      height: 120px;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.06);
      overflow: hidden;
      font-size: 12px;
    }

    .chat-log {
      flex: 1;
      padding: 6px 8px;
      overflow-y: auto;
    }

    .chat-input-row {
      display: flex;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    .chat-input-row input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      color: #f5f5f5;
      padding: 6px 8px;
      font-size: 12px;
    }

    .chat-input-row button {
      border: none;
      background: rgba(255, 255, 255, 0.08);
      color: #f5f5f5;
      padding: 6px 10px;
      cursor: pointer;
      font-size: 12px;
    }

    .mode-buttons {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      font-size: 12px;
    }

    .status {
      font-size: 12px;
      opacity: 0.8;
    }

    @media (max-width: 900px) {
      .main {
        flex-direction: column;
      }
      .board-wrap {
        width: 100%;
        max-width: none;
        padding: 12px;
      }
      .side-panel {
        max-width: none;
        min-width: 0;
      }
    }
  </style>
<meta content="360Chess — part of the 360 web platform." name="description"/><meta content="index, follow" name="robots"/><meta content="website" property="og:type"/><meta content="360Chess" property="og:title"/><meta content="360Chess — part of the 360 web platform." property="og:description"/><meta content="https://360-search.com/chess.html" property="og:url"/><meta content="360" property="og:site_name"/><meta content="summary" name="twitter:card"/><meta content="360Chess" name="twitter:title"/><meta content="360Chess — part of the 360 web platform." name="twitter:description"/><link href="https://360-search.com/chess.html" rel="canonical"/><link rel="stylesheet" href="/assets/css/mobile-nav.css">
</head>
<body>
<div class="shell">
<div class="topbar">
<div class="top-left">
<div class="logo"></div>
<div>360Chess</div>
</div>
<div class="top-right">
<span id="user-label">Connecting…</span>
<button class="btn" id="copy-link-btn">Copy game link</button>
</div>
</div>
<div class="main">
<div class="board-wrap">
<div class="board" id="board"></div>
</div>
<div class="side-panel">
<div class="player-card">
<div>White: <span id="white-name">You</span></div>
<div class="clock" id="white-clock">10:00</div>
</div>
<div class="player-card">
<div>Black: <span id="black-name">Opponent</span></div>
<div class="clock" id="black-clock">10:00</div>
</div>
<div class="mode-buttons">
<button class="btn" id="new-ai-game">New vs AI</button>
<button class="btn" id="new-friend-game">New vs Friend</button>
</div>
<div class="status" id="status">Choose a mode to start.</div>
<div class="moves" id="moves"></div>
<div class="chat">
<div class="chat-log" id="chat-log"></div>
<div class="chat-input-row">
<input id="chat-input" placeholder="Say something…"/>
<button id="chat-send">Send</button>
</div>
</div>
</div>
</div>
</div>
<!-- chess.js -->
<script src="https://cdn.jsdelivr.net/npm/chess.js@1.0.0/chess.min.js"></script>
<!-- supabase -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
    // 🔧 CONFIG — replace with your Supabase project
    const SUPABASE_URL = "https://wiswfpfsjiowtrdyqpxy.supabase.co";
    const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Indpc3dmcGZzamlvd3RyZHlxcHh5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjgzMzg4OTcsImV4cCI6MjA4MzkxNDg5N30.z_4FtM2c8UwgrRlafPYjolQuod4IoHQats95XHio1zM";
    const CHESS_BOT_URL = `${SUPABASE_URL}/functions/v1/chess-bot`;

    const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);

    const boardEl = document.getElementById("board");
    const movesEl = document.getElementById("moves");
    const statusEl = document.getElementById("status");
    const userLabelEl = document.getElementById("user-label");
    const chatLogEl = document.getElementById("chat-log");
    const chatInputEl = document.getElementById("chat-input");

    const whiteNameEl = document.getElementById("white-name");
    const blackNameEl = document.getElementById("black-name");

    let game = new Chess();
    let squares = [];
    let selectedSquare = null;
    let isMyTurn = true;
    let myColor = "white"; // "white" or "black"
    let gameId = null;
    let channel = null;
    let user = null;
    let mode = null; // "ai" or "friend"

    // ---------- AUTH ----------
    async function initAuth() {
      const { data, error } = await supabase.auth.getUser();
      if (data.user) {
        user = data.user;
      } else {
        const res = await supabase.auth.signInAnonymously();
        user = res.data.user;
      }
      userLabelEl.textContent = `You: ${user.id.slice(0, 6)}`;
    }

    // ---------- BOARD RENDER ----------
    function createBoard() {
      boardEl.innerHTML = "";
      squares = [];
      const files = ["a","b","c","d","e","f","g","h"];
      const ranks = [8,7,6,5,4,3,2,1];

      for (let r = 0; r < 8; r++) {
        for (let f = 0; f < 8; f++) {
          const sq = files[f] + ranks[r];
          const div = document.createElement("div");
          div.className = "square " + (((r + f) % 2 === 0) ? "light" : "dark");
          div.dataset.square = sq;
          div.addEventListener("click", () => onSquareClick(sq));
          boardEl.appendChild(div);
          squares.push(div);
        }
      }
      renderPieces();
    }

    function renderPieces() {
      squares.forEach(div => {
        const sq = div.dataset.square;
        const piece = game.get(sq);
        div.textContent = piece ? pieceToChar(piece) : "";
        div.classList.remove("selected", "highlight");
      });
    }

    function pieceToChar(p) {
      const map = {
        p: "♟", r: "♜", n: "♞", b: "♝", q: "♛", k: "♚",
        P: "♙", R: "♖", N: "♘", B: "♗", Q: "♕", K: "♔"
      };
      return map[p.color === "w" ? p.type.toUpperCase() : p.type] || "?";
    }

    function onSquareClick(sq) {
      if (!gameId && mode === "friend") {
        statusEl.textContent = "Create a game first.";
        return;
      }

      if (mode === "ai" || mode === "friend") {
        const turnColor = game.turn() === "w" ? "white" : "black";
        if (turnColor !== myColor) return; // not your turn
      }

      if (!selectedSquare) {
        const piece = game.get(sq);
        if (!piece) return;
        const color = piece.color === "w" ? "white" : "black";
        if (color !== myColor) return;
        selectedSquare = sq;
        highlightSelection();
      } else {
        if (selectedSquare === sq) {
          selectedSquare = null;
          highlightSelection();
          return;
        }
        makeMove(selectedSquare, sq);
        selectedSquare = null;
        highlightSelection();
      }
    }

    function highlightSelection() {
      squares.forEach(div => {
        div.classList.remove("selected");
        if (div.dataset.square === selectedSquare) {
          div.classList.add("selected");
        }
      });
    }

    // ---------- MOVES ----------
    async function makeMove(from, to, isRemote = false) {
      const move = game.move({ from, to, promotion: "q" });
      if (!move) return;

      renderPieces();
      appendMove(move);
      updateStatus();

      if (!isRemote && mode === "friend" && channel) {
        channel.send({
          type: "broadcast",
          event: "move",
          payload: { from, to, fen: game.fen() }
        });
      }

      if (!isRemote && mode === "ai") {
        await aiMove();
      }
    }

    function appendMove(move) {
      const moveNumber = Math.ceil(game.history().length / 2);
      const row = document.createElement("div");
      row.className = "move-row";

      const num = document.createElement("div");
      num.className = "move-num";
      num.textContent = moveNumber + ".";

      const san = document.createElement("div");
      san.className = "move-san";
      san.textContent = move.san;

      row.appendChild(num);
      row.appendChild(san);
      movesEl.appendChild(row);
      movesEl.scrollTop = movesEl.scrollHeight;
    }

    function updateStatus() {
      if (game.isGameOver()) {
        if (game.isCheckmate()) {
          const winner = game.turn() === "w" ? "Black" : "White";
          statusEl.textContent = `Checkmate. ${winner} wins.`;
        } else if (game.isDraw()) {
          statusEl.textContent = "Draw.";
        } else {
          statusEl.textContent = "Game over.";
        }
      } else {
        const turn = game.turn() === "w" ? "White" : "Black";
        statusEl.textContent = `${turn} to move.`;
      }
    }

    // ---------- AI ----------
    async function aiMove() {
      statusEl.textContent = "AI thinking…";
      try {
        const res = await fetch(CHESS_BOT_URL, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ fen: game.fen() })
        });
        const data = await res.json();
        if (!data.move) {
          statusEl.textContent = "AI error.";
          return;
        }
        const uci = data.move.trim();
        const from = uci.slice(0, 2);
        const to = uci.slice(2, 4);
        await makeMove(from, to, true);
      } catch (e) {
        statusEl.textContent = "AI error.";
      }
    }

    // ---------- FRIEND / REALTIME ----------
    function getGameIdFromUrl() {
      const url = new URL(window.location.href);
      return url.searchParams.get("game");
    }

    async function createFriendGame() {
      mode = "friend";
      myColor = "white";
      game.reset();
      renderPieces();
      movesEl.innerHTML = "";
      updateStatus();

      const { data, error } = await supabase
        .from("games")
        .insert({
          white_id: user.id,
          status: "waiting",
          fen: game.fen(),
          time_control: "10+0"
        })
        .select()
        .single();

      if (error) {
        statusEl.textContent = "Error creating game. Please try again.";
        return;
      }

      gameId = data.id;
      attachChannel();
      const url = new URL(window.location.href);
      url.searchParams.set("game", gameId);
      window.history.replaceState({}, "", url.toString());
      statusEl.textContent = "Game created. Share the link with a friend.";
    }

    async function joinFriendGame(id) {
      mode = "friend";
      gameId = id;
      myColor = "black";
      game.reset();
      renderPieces();
      movesEl.innerHTML = "";
      updateStatus();

      await supabase
        .from("games")
        .update({ black_id: user.id, status: "ongoing" })
        .eq("id", gameId);

      attachChannel();
      statusEl.textContent = "Joined game. You are Black.";
    }

    function attachChannel() {
      if (channel) {
        supabase.removeChannel(channel);
      }
      channel = supabase.channel(`game:${gameId}`, {
        config: { broadcast: { self: false } }
      });

      channel.on("broadcast", { event: "move" }, payload => {
        const { from, to, fen } = payload.payload;
        game.load(fen);
        renderPieces();
        appendMove({ san: game.history({ verbose: true }).slice(-1)[0].san });
        updateStatus();
      });

      channel.on("broadcast", { event: "chat" }, payload => {
        const { sender, message } = payload.payload;
        appendChat(sender, message);
      });

      channel.subscribe();
    }

    // ---------- CHAT ----------
    function appendChat(sender, message) {
      const div = document.createElement("div");
      div.textContent = `${sender}: ${message}`;
      chatLogEl.appendChild(div);
      chatLogEl.scrollTop = chatLogEl.scrollHeight;
    }

    function sendChat() {
      const msg = chatInputEl.value.trim();
      if (!msg) return;
      chatInputEl.value = "";
      appendChat("You", msg);
      if (mode === "friend" && channel) {
        channel.send({
          type: "broadcast",
          event: "chat",
          payload: { sender: user.id.slice(0, 6), message: msg }
        });
      }
    }

    // ---------- UI HOOKS ----------
    document.getElementById("new-ai-game").addEventListener("click", () => {
      mode = "ai";
      myColor = "white";
      game.reset();
      renderPieces();
      movesEl.innerHTML = "";
      updateStatus();
      whiteNameEl.textContent = "You";
      blackNameEl.textContent = "AI";
      statusEl.textContent = "You are White vs AI.";
    });

    document.getElementById("new-friend-game").addEventListener("click", () => {
      createFriendGame();
      whiteNameEl.textContent = "You";
      blackNameEl.textContent = "Friend";
    });

    document.getElementById("copy-link-btn").addEventListener("click", () => {
      navigator.clipboard.writeText(window.location.href);
      statusEl.textContent = "Link copied.";
    });

    document.getElementById("chat-send").addEventListener("click", sendChat);
    chatInputEl.addEventListener("keydown", e => {
      if (e.key === "Enter") sendChat();
    });

    // ---------- INIT ----------
    (async function init() {
      await initAuth();
      createBoard();
      updateStatus();

      const existingGameId = getGameIdFromUrl();
      if (existingGameId) {
        await joinFriendGame(existingGameId);
        whiteNameEl.textContent = "Friend";
        blackNameEl.textContent = "You";
      }
    })();
  </script>
<script src="/assets/js/mobile-nav.js" defer></script>
</body>
</html>