Koko Satranç

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Koko Satranç</title>

<style>
body {
  margin: 0;
  padding: 15px;
  background: #111827;
  color: white;
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  color: #38bdf8;
}

#tahta {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  width: min(95vw, 480px);
  margin: 20px auto;
  border: 4px solid #b58863;
}

.kare {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(25px, 7vw, 48px);
  cursor: pointer;
  border: none;
  padding: 0;
}

.acik { background: #f0d9b5; }
.koyu { background: #b58863; }

.secili {
  box-shadow: inset 0 0 0 4px #38bdf8;
}

button {
  cursor: pointer;
}

#durum {
  font-size: 18px;
  margin: 15px;
}

.ayar {
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: #0284c7;
  color: white;
  font-size: 16px;
  margin: 5px;
}
</style>
</head>

<body>

<h1>♟ KOKO SATRANÇ ♟</h1>
<p>Taşını seç ve gitmek istediğin kareye dokun!</p>

<div id="durum">Satranç hazırlanıyor...</div>

<div id="tahta"></div>

<button class="ayar" onclick="yeniOyun()">
  🔄 Yeni oyun
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.10.3/chess.min.js"></script>

<script>
const tahta = document.getElementById("tahta");
const durum = document.getElementById("durum");

const semboller = {
  wk:"♔", wq:"♕", wr:"♖",
  wb:"♗", wn:"♘", wp:"♙",
  bk:"♚", bq:"♛", br:"♜",
  bb:"♝", bn:"♞", bp:"♟"
};

let oyun;
let secili = null;

function yeniOyun() {
  oyun = new Chess();
  secili = null;
  ciz();
  durum.textContent = "Sen beyazsın! İlk hamle senin. ♙";
}

function ciz() {
  tahta.innerHTML = "";

  const taslar = oyun.board();

  for (let r = 0; r < 8; r++) {
    for (let c = 0; c < 8; c++) {
      const kare = document.createElement("button");
      kare.className = "kare " +
        ((r + c) % 2 === 0 ? "acik" : "koyu");

      const tas = taslar[r][c];
      const konum =
        String.fromCharCode(97 + c) + (8 - r);

      if (tas) {
        kare.textContent = semboller[tas.color + tas.type];
      }

      if (secili === konum) {
        kare.classList.add("secili");
      }

      kare.onclick = () => tikla(konum);

      tahta.appendChild(kare);
    }
  }
}

function tikla(konum) {
  if (oyun.game_over() || oyun.turn() !== "w") return;

  const tas = oyun.get(konum);

  if (secili) {
    const hamle = oyun.move({
      from: secili,
      to: konum,
      promotion: "q"
    });

    if (hamle) {
      secili = null;
      ciz();

      if (oyun.game_over()) {
        bitir();
      } else {
        durum.textContent = "Koko düşünüyor... 🤖";
        setTimeout(kokoHamle, 400);
      }
      return;
    }
  }

  if (tas && tas.color === "w") {
    secili = konum;
  } else {
    secili = null;
  }

  ciz();
}

function kokoHamle() {
  if (oyun.game_over() || oyun.turn() !== "b") return;

  const hamleler = oyun.moves({ verbose: true });

  if (hamleler.length === 0) {
    bitir();
    return;
  }

  const deger = {
    p: 10,
    n: 30,
    b: 32,
    r: 50,
    q: 90,
    k: 900
  };

  hamleler.sort((a, b) => {
    const puanA = (deger[a.captured] || 0) +
      Math.random() * 20;
    const puanB = (deger[b.captured] || 0) +
      Math.random() * 20;

    return puanB - puanA;
  });

  const hamle = hamleler[0];

  oyun.move({
    from: hamle.from,
    to: hamle.to,
    promotion: "q"
  });

  ciz();

  if (oyun.game_over()) {
    bitir();
  } else {
    durum.textContent = "Senin sıran! ♙";
  }
}

function bitir() {
  if (oyun.in_checkmate()) {
    durum.textContent =
      oyun.turn() === "w"
        ? "ŞAH MAT! Koko kazandı! 🤖"
        : "ŞAH MAT! SEN KAZANDIN! 🏆";
  } else {
    durum.textContent = "Oyun bitti! 🤝";
  }
}

yeniOyun();
</script>

</body>
</html>