🎮ArcadeLab

Futbol Açık Arttırma

by DriftBuilder15
720 lines31.2 KB
▶ Play
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Futbol Açık Arttırma</title>
<style>
  * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, 'Segoe UI', Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
  html, body { height: 100%; overflow: hidden; background: #0f2027; color: #fff; display: flex; justify-content: center; align-items: center; }
  .phone {
    width: 375px; height: 667px;
    background: linear-gradient(160deg, #1a2a3a, #0f2027);
    border-radius: 20px; overflow: hidden; position: relative;
    display: flex; flex-direction: column;
    box-shadow: 0 0 30px rgba(0,0,0,0.6);
  }
  @media (max-width: 380px), (max-height: 670px) { .phone { width: 100vw; height: 100vh; border-radius: 0; } }

  .topbar {
    height: 32px; background: rgba(0,0,0,0.4);
    display: flex; align-items: center; padding: 0 8px;
    font-size: 11px; gap: 6px; flex-shrink: 0;
  }
  .topbar .title { flex: 1; text-align: center; font-weight: bold; color: #ffd700; }

  .content { flex: 1; overflow: hidden; position: relative; }
  .page { position: absolute; inset: 0; padding: 8px; overflow-y: auto; display: none; flex-direction: column; }
  .page.active { display: flex; }
  .page::-webkit-scrollbar { width: 0; }

  .status-row { display: flex; gap: 6px; margin-bottom: 6px; flex-shrink: 0; }
  .team-mini {
    flex: 1; background: rgba(0,0,0,0.35); border-radius: 8px;
    padding: 5px; text-align: center;
    border: 2px solid transparent; transition: 0.25s;
  }
  .team-mini.active { border-color: #ffd700; box-shadow: 0 0 10px #ffd70066; }
  .team-mini .name { font-size: 10px; opacity: 0.85; }
  .team-mini .money { font-size: 15px; font-weight: bold; color: #7CFC00; }
  .team-mini .cnt { font-size: 9px; opacity: 0.7; }

  .player-card {
    background: linear-gradient(145deg, #1e3c72, #2a5298);
    border-radius: 12px; padding: 10px; text-align: center;
    margin-bottom: 6px; border: 1px solid #4a90e2; flex-shrink: 0;
    display: flex; align-items: center; gap: 10px; min-height: 110px;
    transition: 0.3s;
  }
  .avatar {
    width: 74px; height: 74px; border-radius: 50%;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: bold; color: #fff;
    border: 3px solid #ffd700; box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }
  .card-info { flex: 1; text-align: left; }
  .card-info .label { font-size: 9px; letter-spacing: 1px; opacity: 0.7; text-transform: uppercase; }
  .card-info .pname { font-size: 17px; font-weight: bold; margin: 2px 0; line-height: 1.1; }
  .card-info .pmeta { font-size: 11px; color: #ffd700; }
  .card-info .pos-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-weight: bold; font-size: 10px; margin-top: 4px;
  }
  .card-info .stat {
    font-size: 11px; margin-top: 4px; line-height: 1.2;
    color: #ffe066; font-style: italic;
  }

  .msg {
    text-align: center; font-size: 12px; font-weight: bold;
    color: #ffd700; min-height: 16px; margin: 2px 0;
  }

  .countdown-screen {
    position: absolute; inset: 0; z-index: 5;
    background: rgba(0,0,0,0.92);
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
  }
  .countdown-screen .hint { font-size: 14px; opacity: 0.7; margin-bottom: 12px; }
  .countdown-screen .num {
    font-size: 110px; font-weight: bold; color: #ffd700;
    text-shadow: 0 0 30px #ffd700;
  }

  .timer-bar {
    height: 5px; background: rgba(255,255,255,0.15);
    border-radius: 3px; overflow: hidden; margin: 4px 0 6px;
    flex-shrink: 0;
  }
  .timer-fill {
    height: 100%; background: linear-gradient(90deg, #27ae60, #ffd700, #c0392b);
    width: 100%; transition: width 0.1s linear;
  }
  .timer-fill.urgent { background: #c0392b; }

  .tabs { display: flex; background: rgba(0,0,0,0.3); border-radius: 8px; flex-shrink: 0; margin-bottom: 6px; }
  .tab {
    flex: 1; padding: 7px 4px; text-align: center; font-size: 11px;
    font-weight: bold; cursor: pointer; color: #8ab;
    border-bottom: 2px solid transparent; transition: 0.2s;
  }
  .tab.active { color: #fff; border-bottom-color: #ffd700; background: rgba(255,215,0,0.08); }

  .actions { display: flex; gap: 8px; flex-shrink: 0; }
  .actions button {
    flex: 1; padding: 14px; font-size: 14px; font-weight: bold;
    border: none; border-radius: 10px; cursor: pointer; color: #fff;
    transition: 0.15s;
  }
  .actions button:active:not(:disabled) { transform: scale(0.96); }
  .actions button:disabled { opacity: 0.35; }
  .btn-bid { background: #27ae60; }
  .btn-pass { background: #c0392b; }
  .actions button.thinking { background: #f39c12 !important; color: #000 !important; }

  .team-section { background: rgba(0,0,0,0.3); border-radius: 10px; padding: 8px; margin-bottom: 8px; }
  .team-section h3 {
    font-size: 13px; margin-bottom: 6px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .team-section h3 .money { color: #7CFC00; font-size: 13px; }
  .ai-tag { font-size: 9px; background: #9b59b6; padding: 1px 6px; border-radius: 8px; margin-left: 4px; }

  .pitch {
    position: relative; width: 100%; height: 128px;
    background: repeating-linear-gradient(90deg, #1a6b3a 0px, #1a6b3a 12px, #17602f 12px, #17602f 24px);
    border-radius: 8px; border: 2px solid #0d4a26;
    display: grid; grid-template-columns: 25% 25% 25% 25%;
    grid-template-rows: 50% 50%; gap: 2px; padding: 4px; overflow: hidden;
  }
  .pitch::before { content: ''; position: absolute; left: 3px; top: 50%; width: 8px; height: 30px; transform: translateY(-50%); border: 2px solid rgba(255,255,255,0.5); border-left: none; border-radius: 0 4px 4px 0; }
  .pitch::after { content: ''; position: absolute; right: 3px; top: 50%; width: 8px; height: 30px; transform: translateY(-50%); border: 2px solid rgba(255,255,255,0.5); border-right: none; border-radius: 4px 0 0 4px; }

  .pos-slot {
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: bold; border-radius: 6px;
    text-align: center; padding: 2px; line-height: 1.05;
    color: #fff; overflow: hidden; word-break: break-word;
  }
  .pos-slot.empty { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.35); border: 1px dashed rgba(255,255,255,0.2); font-weight: normal; }
  .pos-slot.filled { box-shadow: 0 2px 6px rgba(0,0,0,0.4); border: 1px solid #ffd700; }
  .pos-slot[data-pos="GK"] { background: rgba(241,196,15,0.9); color:#000; }
  .pos-slot[data-pos="DF"] { background: rgba(52,152,219,0.9); }
  .pos-slot[data-pos="MF"] { background: rgba(46,204,113,0.9); }
  .pos-slot[data-pos="FW"] { background: rgba(231,76,60,0.9); }

  .slot-gk  { grid-column: 1; grid-row: 1 / 3; }
  .slot-df1 { grid-column: 2; grid-row: 1; }
  .slot-df2 { grid-column: 2; grid-row: 2; }
  .slot-mf1 { grid-column: 3; grid-row: 1; }
  .slot-mf2 { grid-column: 3; grid-row: 2; }
  .slot-fw1 { grid-column: 4; grid-row: 1; }
  .slot-fw2 { grid-column: 4; grid-row: 2; }

  .result-box { text-align: center; padding: 12px; background: rgba(0,0,0,0.4); border-radius: 12px; margin: auto 0; }
  .result-box h2 { font-size: 18px; color: #ffd700; margin-bottom: 8px; }
  .result-box .row { font-size: 11px; margin: 5px 0; padding: 6px; background: rgba(255,255,255,0.06); border-radius: 6px; }
  .result-box .winner { font-size: 16px; color: #ffd700; font-weight: bold; margin: 10px 0; }
  .result-box button { padding: 12px 24px; font-size: 14px; font-weight: bold; border: none; border-radius: 10px; background: #f39c12; color: #000; cursor: pointer; margin-top: 8px; }

  .start-screen {
    position: absolute; inset: 0;
    background: linear-gradient(160deg, #0f2027, #203a43);
    display: flex; flex-direction: column; justify-content: center;
    align-items: center; padding: 22px; text-align: center; z-index: 10;
  }
  .start-screen h1 { font-size: 21px; color: #ffd700; margin-bottom: 10px; }
  .start-screen p { font-size: 12px; opacity: 0.85; line-height: 1.6; margin-bottom: 12px; }
  .start-screen .ai-badge { background: rgba(155,89,182,0.3); border: 1px solid #9b59b6; padding: 7px 12px; border-radius: 10px; font-size: 11px; margin-bottom: 12px; line-height: 1.5; }
  .start-screen .rules { background: rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 10px; font-size: 11px; margin-bottom: 14px; line-height: 1.5; }
  .start-screen button { padding: 15px 36px; font-size: 16px; font-weight: bold; border: none; border-radius: 12px; background: #27ae60; color: #fff; cursor: pointer; }
  .hidden { display: none !important; }
</style>
</head>
<body>

<div class="phone">

  <div class="start-screen" id="startScreen">
    <h1>⚽ Futbol Açık Arttırma</h1>
    <p>Sen <b>Takım 1</b>'sin. Rakibin <b>🤖 AI (Takım 2)</b>.</p>
    <div class="ai-badge">
      🤖 <b>AI Özellikleri</b><br>
      • Bütçe yönetimi<br>
      • Kazandıracak oyuncuyu bulma<br>
      • Mevki ihtiyacı analizi
    </div>
    <div class="rules">
      💰 Her takımın <b>25 parası</b> var.<br>
      👥 5'er oyuncu alınacak.<br>
      ⏱️ Oyuncu başına <b>10 sn</b> karar süresi.<br>
      🎲 Ters köşe oyuncular var — dikkat!
    </div>
    <button onclick="startGame()">BAŞLAT</button>
  </div>

  <div class="topbar">
    <span id="tb1">T1: 25💰</span>
    <span class="title">⚽ Açık Arttırma</span>
    <span id="tb2">🤖 25💰</span>
  </div>

  <div class="content">

    <div class="page active" id="page-bid" style="position:relative;">

      <div class="status-row">
        <div class="team-mini" id="tm1">
          <div class="name">Sen</div>
          <div class="money" id="m1">25💰</div>
          <div class="cnt" id="c1">0/5</div>
        </div>
        <div class="team-mini" id="tm2">
          <div class="name">🤖 AI</div>
          <div class="money" id="m2">25💰</div>
          <div class="cnt" id="c2">0/5</div>
        </div>
      </div>

      <div class="player-card" id="playerCard">
        <div class="avatar" id="pAvatar" style="background:#4a90e2;">?</div>
        <div class="card-info">
          <div class="label">Sıradaki Oyuncu</div>
          <div class="pname" id="pName">-</div>
          <div class="pmeta" id="pMeta">-</div>
          <div class="pos-badge" id="pPos">-</div>
          <div class="stat" id="pStat">-</div>
        </div>
      </div>

      <div class="msg" id="message">-</div>
      <div class="timer-bar"><div class="timer-fill" id="timerFill"></div></div>

      <div class="tabs">
        <div class="tab active" data-tab="squad" onclick="switchTab('squad')">Kadro</div>
        <div class="tab" data-tab="result" onclick="switchTab('result')">Sonuç</div>
      </div>

      <div class="actions">
        <button class="btn-bid" id="bidBtn" onclick="placeBid()">Teklif (+1)</button>
        <button class="btn-pass" id="passBtn" onclick="passBid()">Pas Geç</button>
      </div>

      <div class="countdown-screen hidden" id="countdownScreen">
        <div class="hint">Sıradaki oyuncu geliyor...</div>
        <div class="num" id="countdownNum">3</div>
      </div>
    </div>

    <div class="page" id="page-squad">
      <div class="tabs" style="margin-bottom:8px;">
        <div class="tab" data-tab="bid" onclick="switchTab('bid')">← Teklif</div>
        <div class="tab active" data-tab="squad" onclick="switchTab('squad')">Kadro</div>
        <div class="tab" data-tab="result" onclick="switchTab('result')">Sonuç</div>
      </div>
      <div class="team-section">
        <h3>Sen (Takım 1) <span class="money" id="sm1">25💰</span></h3>
        <div class="pitch" id="pitch1"></div>
      </div>
      <div class="team-section">
        <h3>🤖 AI (Takım 2) <span class="ai-tag">AI</span> <span class="money" id="sm2">25💰</span></h3>
        <div class="pitch" id="pitch2"></div>
      </div>
    </div>

    <div class="page" id="page-result">
      <div class="tabs" style="margin-bottom:8px;">
        <div class="tab" data-tab="bid" onclick="switchTab('bid')">← Teklif</div>
        <div class="tab" data-tab="squad" onclick="switchTab('squad')">Kadro</div>
        <div class="tab active" data-tab="result" onclick="switchTab('result')">Sonuç</div>
      </div>
      <div class="result-box" id="resultBox">
        <h2>🏆 Sonuç</h2>
        <p style="font-size:12px; opacity:0.7;">Oyun bitince sonuç burada görünecek.</p>
      </div>
    </div>

  </div>
</div>

<script>
/* ==================== OYUNCU HAVUZU ==================== */
const PLAYER_POOL = [
  { name: "Lionel Messi",      year: 2012, club: "Barcelona",  pos: "FW", rating: 99, color: "#c0392b", stat: "2012: 91 gol, 22 asist (tek yıl rekoru)" },
  { name: "Cristiano Ronaldo", year: 2014, club: "Real Madrid",pos: "FW", rating: 98, color: "#2c3e50", stat: "2014: 61 gol, Şampiyonlar Ligi rekoru" },
  { name: "Ronaldo Nazario",   year: 1997, club: "Inter",      pos: "FW", rating: 95, color: "#2980b9", stat: "1997: 34 gol, UEFA Kupası finali" },
  { name: "Zinedine Zidane",   year: 2002, club: "Real Madrid",pos: "MF", rating: 94, color: "#8e44ad", stat: "2002: ŞL finalinde efsane vole golü" },
  { name: "Ronaldinho",        year: 2005, club: "Barcelona",  pos: "MF", rating: 93, color: "#16a085", stat: "2005: Ballon d'Or, 21 gol 15 asist" },
  { name: "Thierry Henry",     year: 2004, club: "Arsenal",    pos: "FW", rating: 92, color: "#c0392b", stat: "2004: 39 gol, Premier Lig şampiyonu" },
  { name: "Kaka",              year: 2007, club: "Milan",      pos: "MF", rating: 91, color: "#e74c3c", stat: "2007: Ballon d'Or, ŞL şampiyonu" },
  { name: "Andres Iniesta",    year: 2010, club: "Barcelona",  pos: "MF", rating: 91, color: "#3498db", stat: "2010: Dünya Kupası finali golü" },
  { name: "Xavi",              year: 2011, club: "Barcelona",  pos: "MF", rating: 90, color: "#e67e22", stat: "2011: 3 kupa, ŞL finali asist" },
  { name: "Paolo Maldini",     year: 2003, club: "Milan",      pos: "DF", rating: 92, color: "#c0392b", stat: "2003: ŞL şampiyonu, 8. finali" },
  { name: "Cafu",              year: 2002, club: "Roma",       pos: "DF", rating: 90, color: "#f1c40f", stat: "2002: Dünya Kupası şampiyonu" },
  { name: "Roberto Carlos",    year: 2002, club: "Real Madrid",pos: "DF", rating: 91, color: "#ecf0f1", stat: "2002: ŞL + Dünya Kupası aynı yıl" },
  { name: "Fabio Cannavaro",   year: 2006, club: "Juventus",   pos: "DF", rating: 90, color: "#2c3e50", stat: "2006: Dünya Kupası + Ballon d'Or" },
  { name: "Carles Puyol",      year: 2009, club: "Barcelona",  pos: "DF", rating: 89, color: "#8e44ad", stat: "2009: 6 kupa kazanan tarihi kadro" },
  { name: "Iker Casillas",     year: 2010, club: "Real Madrid",pos: "GK", rating: 92, color: "#16a085", stat: "2010: Dünya Kupası, 5 maç gol yemedi" },
  { name: "Gianluigi Buffon",  year: 2006, club: "Juventus",   pos: "GK", rating: 93, color: "#2980b9", stat: "2006: Dünya Kupası, sadece 1 gol yedi" },
  { name: "Manuel Neuer",      year: 2014, club: "Bayern",     pos: "GK", rating: 92, color: "#c0392b", stat: "2014: Dünya Kupası, altın eldiven" },
  { name: "Petr Cech",         year: 2008, club: "Chelsea",    pos: "GK", rating: 90, color: "#27ae60", stat: "2008: ŞL finali, 21 maç gol yemedi" },
  { name: "Steven Gerrard",    year: 2005, club: "Liverpool",  pos: "MF", rating: 90, color: "#c0392b", stat: "2005: İstanbul mucizesi, ŞL kaptanı" },
  { name: "Frank Lampard",     year: 2006, club: "Chelsea",    pos: "MF", rating: 90, color: "#2980b9", stat: "2006: 20 gol (orta saha rekoru)" },
  { name: "Andrea Pirlo",      year: 2007, club: "Milan",      pos: "MF", rating: 91, color: "#e74c3c", stat: "2007: ŞL şampiyonu, final asist" },
  { name: "Zlatan Ibrahimovic",year: 2013, club: "PSG",        pos: "FW", rating: 92, color: "#9b59b6", stat: "2013: 30 gol, Ligue 1 şampiyonu" },
  { name: "Wayne Rooney",      year: 2008, club: "Man United", pos: "FW", rating: 90, color: "#e74c3c", stat: "2008: ŞL şampiyonu, 16 gol" },
  { name: "Samuel Eto'o",      year: 2009, club: "Barcelona",  pos: "FW", rating: 91, color: "#e67e22", stat: "2009: Treble, final golü" },
  { name: "Didier Drogba",     year: 2010, club: "Chelsea",    pos: "FW", rating: 90, color: "#2980b9", stat: "2010: 37 gol, Premier Lig altın krampon" },
  { name: "Sergio Ramos",      year: 2015, club: "Real Madrid",pos: "DF", rating: 91, color: "#c0392b", stat: "2015: 92. dakika final golü" },
  { name: "Gerard Pique",      year: 2011, club: "Barcelona",  pos: "DF", rating: 89, color: "#8e44ad", stat: "2011: ŞL finali, 3 kupa" },
  { name: "Ashley Cole",       year: 2008, club: "Chelsea",    pos: "DF", rating: 89, color: "#3498db", stat: "2008: ŞL finali, en iyi sol bek" },
  { name: "Luka Modric",       year: 2018, club: "Real Madrid",pos: "MF", rating: 91, color: "#f1c40f", stat: "2018: Ballon d'Or, ŞL şampiyonu" },
  { name: "Kevin De Bruyne",   year: 2020, club: "Man City",   pos: "MF", rating: 92, color: "#3498db", stat: "2020: 13 asist, PL şampiyonu" },
  { name: "Nicolas Anelka",    year: 1999, club: "Arsenal",    pos: "FW", rating: 84, color: "#7f8c8d", stat: "1999: 17 gol, genç yetenek" },
  { name: "Mario Balotelli",   year: 2012, club: "Man City",   pos: "FW", rating: 83, color: "#e74c3c", stat: "2012: 'Why always me?' derbi golü" },
  { name: "Fernando Torres",   year: 2008, club: "Liverpool",  pos: "FW", rating: 88, color: "#c0392b", stat: "2008: 33 gol, Euro 2008 final golü" },
  { name: "Robin van Persie",  year: 2013, club: "Man United", pos: "FW", rating: 89, color: "#e74c3c", stat: "2013: 26 gol, PL şampiyonu" },
  { name: "David Beckham",     year: 2001, club: "Man United", pos: "MF", rating: 88, color: "#e74c3c", stat: "2001: Serbest vuruş ustası, 15 asist" },
  { name: "Rivaldo",           year: 1999, club: "Barcelona",  pos: "MF", rating: 89, color: "#2980b9", stat: "1999: Ballon d'Or, 24 gol" },
  { name: "Luis Figo",         year: 2000, club: "Real Madrid",pos: "MF", rating: 90, color: "#2c3e50", stat: "2000: Ballon d'Or, tartışmalı transfer" },
  { name: "Alessandro Nesta",  year: 2003, club: "Milan",      pos: "DF", rating: 89, color: "#c0392b", stat: "2003: ŞL şampiyonu, kaya gibi defans" },
  { name: "Lilian Thuram",     year: 1998, club: "Parma",      pos: "DF", rating: 88, color: "#f1c40f", stat: "1998: Dünya Kupası, 2 yarı final golü" },
  { name: "Patrick Vieira",    year: 2002, club: "Arsenal",    pos: "MF", rating: 89, color: "#c0392b", stat: "2002: Double, 34 maç yenilmedi" },
  { name: "Roy Keane",         year: 1999, club: "Man United", pos: "MF", rating: 88, color: "#e74c3c", stat: "1999: Treble kaptanı, ŞL yarı final" },
  { name: "Clarence Seedorf",  year: 2003, club: "Milan",      pos: "MF", rating: 88, color: "#e74c3c", stat: "2003: ŞL, 3 farklı takımla kazanan" },
  { name: "Edwin van der Sar", year: 2008, club: "Man United", pos: "GK", rating: 89, color: "#27ae60", stat: "2008: ŞL, 1311 dk gol yemedi" },
  { name: "Oliver Kahn",       year: 2002, club: "Bayern",     pos: "GK", rating: 89, color: "#2c3e50", stat: "2002: Dünya Kupası finali, altın top" }
];

const POS_TR = { GK: "Kaleci", DF: "Defans", MF: "Orta Saha", FW: "Forvet" };
const BUDGET = 25;
const BID_TIME = 10;

let state = {};
let countdownInterval = null;
let timerInterval = null;
let timeLeft = 0;

function startGame() {
  const shuffled = [...PLAYER_POOL].sort(() => Math.random() - 0.5).slice(0, 10);
  state = {
    teams: {
      1: { money: BUDGET, players: [], name: "Sen", isAI: false },
      2: { money: BUDGET, players: [], name: "AI", isAI: true }
    },
    pool: shuffled,
    poolIndex: 0,
    currentTeam: 1,
    currentBid: 0,
    bidder: null,
    aiThinking: false
  };
  document.getElementById("startScreen").classList.add("hidden");
  renderPitches();
  updateAllUI();
  startCountdown();
}

/* ==================== 3-2-1 GERİ SAYIM ==================== */
function startCountdown() {
  const screen = document.getElementById("countdownScreen");
  const numEl = document.getElementById("countdownNum");
  screen.classList.remove("hidden");
  let n = 3;
  numEl.textContent = n;

  countdownInterval = setInterval(() => {
    n--;
    if (n > 0) {
      numEl.textContent = n;
    } else {
      clearInterval(countdownInterval);
      screen.classList.add("hidden");
      loadNextPlayer();
    }
  }, 700);
}

/* ==================== OYUNCU YÜKLE ==================== */
function loadNextPlayer() {
  if (state.poolIndex >= state.pool.length
      || state.teams[1].players.length >= 5
      || state.teams[2].players.length >= 5) {
    endGame();
    return;
  }

  const player = state.pool[state.poolIndex];
  state.currentPlayer = player;
  state.currentBid = 0;
  state.bidder = null;
  state.aiThinking = false;

  const t1Full = state.teams[1].players.length >= 5;
  const t2Full = state.teams[2].players.length >= 5;
  state.currentTeam = t1Full ? 2 : (t2Full ? 1 : (state.poolIndex % 2 === 0 ? 1 : 2));

  // İsim baş harflerinden avatar
  const initials = player.name.split(" ").map(w => w[0]).join("").slice(0, 2).toUpperCase();
  const av = document.getElementById("pAvatar");
  av.textContent = initials;
  av.style.background = player.color;

  document.getElementById("pName").textContent = player.name;
  document.getElementById("pMeta").textContent = `${player.year} • ${player.club}`;
  document.getElementById("pPos").textContent = POS_TR[player.pos];
  document.getElementById("pStat").textContent = "⭐ " + player.stat;

  const card = document.getElementById("playerCard");
  const colors = { GK: "#b8860b", DF: "#1f6fa8", MF: "#1f8a4c", FW: "#b0362a" };
  card.style.borderColor = colors[player.pos];
  document.getElementById("pPos").style.background = colors[player.pos];
  document.getElementById("pPos").style.color = "#fff";

  updateAllUI();
  setMessage(`Sıra: ${teamLabel(state.currentTeam)}`);

  // Zamanlayıcıyı başlat (sadece kullanıcı sırasıysa)
  if (!state.teams[state.currentTeam].isAI) {
    startBidTimer();
  } else {
    document.getElementById("timerFill").style.width = "100%";
    setTimeout(aiTurn, 1000);
  }
}

function teamLabel(id) {
  return state.teams[id].isAI ? "🤖 AI" : "Sen";
}

/* ==================== ZAMANLAYICI ==================== */
function startBidTimer() {
  clearInterval(timerInterval);
  timeLeft = BID_TIME;
  const fill = document.getElementById("timerFill");
  fill.classList.remove("urgent");
  fill.style.width = "100%";

  timerInterval = setInterval(() => {
    timeLeft -= 0.1;
    const pct = Math.max(0, (timeLeft / BID_TIME) * 100);
    fill.style.width = pct + "%";

    if (timeLeft <= 3) fill.classList.add("urgent");

    if (timeLeft <= 0) {
      clearInterval(timerInterval);
      autoPass(); // süre bitti, otomatik pas
    }
  }, 100);
}

function stopTimer() {
  clearInterval(timerInterval);
  document.getElementById("timerFill").style.width = "100%";
  document.getElementById("timerFill").classList.remove("urgent");
}

/* ==================== KULLANICI AKSİYONLARI ==================== */
function placeBid() {
  if (state.currentTeam !== 1 || state.aiThinking) return;
  const nextBid = state.currentBid + 1;

  if (state.teams[1].money < nextBid) { setMessage(`Paran yetmiyor!`); return; }
  if (state.teams[1].players.length >= 5) { setMessage(`Kadron dolu!`); return; }

  stopTimer();
  state.currentBid = nextBid;
  state.bidder = 1;
  setMessage(`Sen ${nextBid}💰 teklif ettin.`);
  state.currentTeam = 2;
  updateAllUI();
  setTimeout(aiTurn, 1200);
}

function passBid() {
  if (state.currentTeam !== 1 || state.aiThinking) return;
  stopTimer();

  if (state.bidder === null) {
    setMessage(`Pas geçtin. Oyuncu satılmadı.`);
    state.poolIndex++;
    updateAllUI();
    setTimeout(() => { startCountdown(); }, 700);
    return;
  }
  sellPlayer();
}

function autoPass() {
  if (state.currentTeam !== 1) return;
  setMessage("⏰ Süre doldu! Otomatik pas.");
  passBid();
}

/* ==================== 🤖 YAPAY ZEKA ==================== */
function aiEvaluate(player, team) {
  const roster = team.players;
  const money = team.money;
  const remainingPlayersToBuy = 5 - roster.length;
  const remainingPool = state.pool.length - state.poolIndex;

  const posCount = { GK: 0, DF: 0, MF: 0, FW: 0 };
  roster.forEach(p => posCount[p.pos]++);

  const ideal = { GK: 1, DF: 2, MF: 1, FW: 1 };
  const needFactor = posCount[player.pos] < ideal[player.pos] ? 1.25 : 0.85;
  const gkUrgent = (player.pos === "GK" && posCount.GK === 0) ? 1.3 : 1;

  const avgBudgetPerPlayer = money / remainingPlayersToBuy;
  const scarcity = remainingPlayersToBuy / Math.max(remainingPool, 1);

  const ratingValue = (player.rating - 80) / 20;
  const baseValue = 0.2 + ratingValue * 0.8;

  let valueScore = baseValue * needFactor * gkUrgent;
  valueScore *= (1 + scarcity * 0.5);

  let maxBid = Math.floor(avgBudgetPerPlayer * 0.85);

  if (player.rating >= 95 && money >= 8) maxBid = Math.min(maxBid + 2, Math.floor(money * 0.55));
  else if (player.rating >= 92 && money >= 6) maxBid = Math.min(maxBid + 1, Math.floor(money * 0.5));

  if (remainingPlayersToBuy === 1 && roster.length === 4) maxBid = Math.min(money, maxBid + 2);

  maxBid = Math.min(maxBid, Math.floor(money * 0.7));
  maxBid = Math.max(maxBid, 0);

  const nextBid = state.currentBid + 1;
  if (nextBid > maxBid) return { bid: false, reason: "bütçe limiti" };
  if (valueScore < 0.35 && state.currentBid >= 2) return { bid: false, reason: "değer düşük" };
  if (valueScore < 0.25) return { bid: false, reason: "istemiyor" };

  return { bid: true, maxBid, valueScore };
}

function aiTurn() {
  if (state.currentTeam !== 2) return;
  if (state.teams[2].players.length >= 5) {
    state.currentTeam = 1;
    updateAllUI();
    setMessage("Sıra: Sen");
    startBidTimer();
    return;
  }

  state.aiThinking = true;
  updateAllUI();
  setMessage("🤖 AI düşünüyor...");

  setTimeout(() => {
    const decision = aiEvaluate(state.currentPlayer, state.teams[2]);
    state.aiThinking = false;

    if (decision.bid) {
      const nextBid = state.currentBid + 1;
      state.currentBid = nextBid;
      state.bidder = 2;
      setMessage(`🤖 AI ${nextBid}💰 teklif etti.`);
      state.currentTeam = 1;
      updateAllUI();
      startBidTimer();
    } else {
      if (state.bidder === 1) {
        setMessage(`🤖 AI pas geçti (${decision.reason}).`);
        sellPlayer();
      } else {
        setMessage(`🤖 AI da pas geçti. Oyuncu satılmadı.`);
        state.poolIndex++;
        updateAllUI();
        setTimeout(startCountdown, 800);
      }
    }
  }, 700 + Math.random() * 500);
}

/* ==================== SATIŞ ==================== */
function sellPlayer() {
  stopTimer();
  const buyer = state.bidder;
  const price = state.currentBid;
  const player = state.currentPlayer;

  if (buyer === null) { state.poolIndex++; updateAllUI(); setTimeout(startCountdown, 500); return; }

  state.teams[buyer].money -= price;
  state.teams[buyer].players.push({ ...player, price });

  setMessage(`${teamLabel(buyer)} ${player.name}'i ${price}💰 aldı!`);
  state.poolIndex++;
  renderPitches();
  updateAllUI();

  setTimeout(() => {
    if (state.teams[1].players.length >= 5 && state.teams[2].players.length >= 5) endGame();
    else if (state.poolIndex >= state.pool.length) endGame();
    else startCountdown();
  }, 1100);
}

/* ==================== UI ==================== */
function updateAllUI() {
  const t1 = state.teams[1], t2 = state.teams[2];
  document.getElementById("m1").textContent = t1.money + "💰";
  document.getElementById("m2").textContent = t2.money + "💰";
  document.getElementById("c1").textContent = t1.players.length + "/5";
  document.getElementById("c2").textContent = t2.players.length + "/5";
  document.getElementById("tb1").textContent = "T1: " + t1.money + "💰";
  document.getElementById("tb2").textContent = "🤖 " + t2.money + "💰";
  document.getElementById("sm1").textContent = t1.money + "💰";
  document.getElementById("sm2").textContent = t2.money + "💰";

  document.getElementById("tm1").classList.toggle("active", state.currentTeam === 1 && !state.aiThinking);
  document.getElementById("tm2").classList.toggle("active", state.currentTeam === 2 || state.aiThinking);

  const myTurn = state.currentTeam === 1 && !state.aiThinking && state.poolIndex < state.pool.length;
  const canBid = myTurn && state.teams[1].money >= state.currentBid + 1
              && state.teams[1].players.length < 5;

  const bidBtn = document.getElementById("bidBtn");
  bidBtn.disabled = !canBid;
  bidBtn.textContent = `Teklif (${state.currentBid + 1}💰)`;
  document.getElementById("passBtn").disabled = !myTurn;

  if (state.aiThinking) {
    bidBtn.classList.add("thinking");
    bidBtn.textContent = "🤖 AI düşünüyor...";
  } else {
    bidBtn.classList.remove("thinking");
  }
}

function setMessage(txt) { document.getElementById("message").textContent = txt; }

function switchTab(name) {
  document.querySelectorAll(".tab").forEach(t => t.classList.toggle("active", t.dataset.tab === name));
  document.querySelectorAll(".page").forEach(p => p.classList.toggle("active", p.id === "page-" + name));
}

/* ==================== SAHA ==================== */
const SLOT_LAYOUT = [
  { cls: "slot-gk",  pos: "GK" },
  { cls: "slot-df1", pos: "DF" },
  { cls: "slot-df2", pos: "DF" },
  { cls: "slot-mf1", pos: "MF" },
  { cls: "slot-mf2", pos: "MF" },
  { cls: "slot-fw1", pos: "FW" },
  { cls: "slot-fw2", pos: "FW" }
];

function renderTeamPitch(teamId) {
  const el = document.getElementById("pitch" + teamId);
  const players = [...state.teams[teamId].players];
  const byPos = { GK: [], DF: [], MF: [], FW: [] };
  players.forEach(p => byPos[p.pos] && byPos[p.pos].push(p));

  el.innerHTML = "";
  SLOT_LAYOUT.forEach(slot => {
    const p = byPos[slot.pos].shift();
    const div = document.createElement("div");
    div.className = "pos-slot " + slot.cls;
    if (p) {
      div.classList.add("filled");
      div.dataset.pos = p.pos;
      const surname = p.name.split(" ").slice(-1)[0];
      div.innerHTML = `<div>${surname}<br><span style="font-size:8px;opacity:0.8">${p.year}</span></div>`;
    } else {
      div.classList.add("empty");
      div.textContent = POS_TR[slot.pos];
    }
    el.appendChild(div);
  });
}

function renderPitches() {
  renderTeamPitch(1);
  renderTeamPitch(2);
}

/* ==================== SONUÇ ==================== */
function endGame() {
  stopTimer();
  switchTab("result");

  const t1 = state.teams[1], t2 = state.teams[2];
  const s1 = avg(t1.players), s2 = avg(t2.players);
  const b1 = formationBonus(t1.players), b2 = formationBonus(t2.players);
  const total1 = s1 + b1, total2 = s2 + b2;

  const fmt = (t, s, b, total) => `
    <div class="row">
      <b>${t.name}</b> — Ort: ${s.toFixed(1)} | Bonus: +${b} | <b style="color:#7CFC00">Toplam: ${total.toFixed(1)}</b><br>
      <span style="font-size:10px;opacity:0.75">${t.players.map(p => p.name).join(", ") || "Oyuncu yok"}</span>
    </div>`;

  let winner;
  if (total1 > total2) winner = "🏆 SEN KAZANDIN!";
  else if (total2 > total1) winner = "🤖 AI KAZANDI!";
  else winner = "🤝 BERABERE!";

  document.getElementById("resultBox").innerHTML = `
    <h2>🏆 Maç Sonucu</h2>
    ${fmt(t1, s1, b1, total1)}
    ${fmt(t2, s2, b2, total2)}
    <div class="winner">${winner}<br><span style="font-size:12px;color:#fff">${total1.toFixed(1)} - ${total2.toFixed(1)}</span></div>
    <button onclick="location.reload()">TEKRAR OYNA</button>
  `;
}

function avg(players) {
  if (!players.length) return 0;
  return players.reduce((a, p) => a + p.rating, 0) / players.length;
}
function formationBonus(players) {
  const set = new Set(players.map(p => p.pos));
  return set.size * 2;
}
</script>
</body>
</html>

Game Source: Futbol Açık Arttırma

Creator: DriftBuilder15

Libraries: none

Complexity: complex (720 lines, 31.2 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: futbol-a-k-artt-rma-driftbuilder15" to link back to the original. Then publish at arcadelab.ai/publish.